Skip to content

D
dashboard
Commit a48d946c authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

完善页面

parent 0581e983
Hide whitespace changes
Inline Side-by-side
Showing with 274 additions and 38 deletions
src/App.vue
View file @ a48d946c
......@@ -20,12 +20,12 @@ export default {
font-family Microsoft YaHei UI
src url(./assets/font/Microsoft-YaHei-UI-Bold.ttf)
html, body
background #000
width 100%
height 100%
font-size 1vw
user-select none
#app
/* font-family: 'Avenir', Helvetica, Arial, sans-serif; */
font-family DIN, 'Avenir', Helvetica, Arial, sans-serif
-webkit-font-smoothing antialiased
-moz-osx-font-smoothing grayscale
......
src/components/MonitorProgress/monitor-progress.vue
View file @ a48d946c
......@@ -24,12 +24,16 @@ export default {
},
size: {
type: Number,
default: 20,
default: 14,
},
hideInfo: {
'hide-info': {
type: Boolean,
default: false,
},
'text-inside': {
type: Boolean,
default: false,
}
},
computed: {
style() {
......@@ -37,16 +41,20 @@ export default {
const result = {
padding: `${(size / 5).toFixed(1)}rem ${(size / 4.5).toFixed(1)}rem`,
}
if (!this.hideInfo) {
result.width = '93%'
if (!this.hideInfo && !this.textInside) {
result.width = '90%'
} else {
result.width = '100%'
if (this.percent >= 95) {
result.width = '90%'
} else {
result.width = '100%'
}
}
return result
},
containerStyle() {
return {
height: `${Math.round(this.size / 10)}rem`,
height: `${(this.size / 10).toFixed(1)}rem`,
width: `${this.percent}%`,
}
},
......@@ -62,8 +70,18 @@ export default {
}
},
infoStyle() {
let info = {
left: '102%'
}
if (this.textInside && this.percent < 95) {
info = {
left: `${this.percent + 1}%`,
}
}
return {
...info,
fontSize: `${(this.size * 0.7 / 10).toFixed(1)}rem`,
color: 'string' === typeof this.color ? this.color : this.color[1],
}
},
}
......@@ -92,20 +110,19 @@ $radius = 2rem
&.progress-bar
z-index 1
opacity 0.2
background-image repeating-linear-gradient(45deg, #fff, #fff 0.8rem, transparent 0.8rem, transparent 1.2rem)
background-size 17rem
animation rolling 10s linear infinite running
background-image repeating-linear-gradient(45deg, #fff, #fff 0.8rem, transparent 0.8rem, transparent 1.2rem)
animation rolling 20s linear infinite running
.progress-info
display flex
align-items center
justify-content center
width 7%
position absolute
right -7%
left 0
top 0
color $edgeColor
height 100%
text-shadow 0 0 0.6rem $edgeColor
transition left 2s ease
text-shadow 0 0 0.6rem rgba(255,255,255,0.5)
@keyframes rolling
to
background-position-x 17rem
......
src/main.js
View file @ a48d946c
......@@ -5,7 +5,7 @@ import Vue from 'vue'
import App from './App'
import router from './router'
import echarts from 'echarts'
import {Button} from 'view-design'
import {Button, Divider} from 'view-design'
import MonitorCard from '@/components/MonitorCard'
import MonitorCount from '@/components/MonitorCount'
import MonitorBrief from '@/components/MonitorBrief'
......@@ -19,6 +19,7 @@ Vue.use(MonitorCount)
Vue.use(MonitorBrief)
Vue.use(MonitorProgress)
Vue.component('Button', Button)
Vue.component('Divider', Divider)
/* eslint-disable no-new */
new Vue({
......
src/views/chart.vue
View file @ a48d946c
<template>
<div id="chart" ref="chart"/>
<div class="chart" ref="chart"/>
</template>
<script>
......@@ -43,6 +43,11 @@ export default {
},
},
yAxis: {
// name: '收入（万元）',
// nameTextStyle: {
// color: '#1ce8ff',
// padding: [0, 0, 0, 30],
// },
type: 'value',
interval: 20,
splitLine: {
......@@ -103,7 +108,7 @@ export default {
</script>
<style lang="stylus" scoped>
#chart
.chart
height 100%
width 100%
</style>
src/views/chart2.vue 0 → 100644
View file @ a48d946c
<template>
<div class="chart" ref="chart"/>
</template>
<script>
export default {
name: 'Chart',
mounted() {
this.init()
},
methods: {
init() {
const chart = this.$echarts.init(this.$refs.chart)
const options = {
grid: {
top: '30px',
left: '5px',
right: '5px',
bottom: '5px',
width: '100%',
height: 'auto',
containLabel: true,
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
xAxis: {
type: 'category',
data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
axisLabel: {
textStyle: {
color: '#fff',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: '#aaa',
}
},
},
yAxis: {
// name: '收入（万元）',
// nameTextStyle: {
// color: '#1ce8ff',
// padding: [0, 0, 0, 30],
// },
type: 'value',
interval: 20,
splitLine: {
show: false,
},
axisLabel: {
textStyle: {
color: '#fff',
},
fontSize: this.fontSize,
},
axisLine: {
lineStyle: {
color: '#aaa',
}
},
},
series: [
{
type: 'bar',
barWidth: '40%',
barGap: 0,
itemStyle: {
shadowColor: '#1ce8ff',
shadowBlur: 6,
color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
{offset: 0, color: '#1ce8ff'},
{offset: 1, color: '#0079fd'}
])
},
data: [10, 20, 30, 40, 50, 60, 10, 20, 30, 40, 50, 60],
},
],
}
chart.setOption(options)
}
},
computed: {
fontSize() {
return Math.floor(window.innerWidth / 100) - 1
},
}
}
</script>
<style lang="stylus" scoped>
.chart
height 100%
width 100%
</style>
src/views/header.vue 0 → 100644
View file @ a48d946c
<template>
<div class="header">
<h1 class="main-title">项目管理</h1>
<div class="info">
<template v-for="item in list">
<div :key="item.name">
<p>
<b><m-count :value="item.count"/></b>{{item.unit}}
</p>
<p>{{item.name}}</p>
</div>
<Divider :key="item.name" class="divider" type="vertical"/>
</template>
</div>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
list: [
{
name: '项目总数',
count: 13,
unit: '个',
},
{
name: '人员总数',
count: 43,
unit: '人',
},
{
name: '总收入',
count: 13476678.48,
unit: '元',
},
{
name: '总成本',
count: 8726723.17,
unit: '元',
},
{
name: '利润',
count: 4749966.31,
unit: '个',
},
{
name: '利润率',
count: 43,
unit: '%',
},
]
}
},
}
</script>
<style lang="stylus" scoped>
.header
display flex
align-items center
color $edgeColor
font-family DIN, Microsoft YaHei UI
.main-title
margin 0 5rem 0 3rem
.info
display flex
align-items center
div
display flex
flex-direction column
p:last-child
font-weight 100
b
font-size 1.8rem
.divider
margin 0 3rem
background $edgeColor
opacity 0.5
</style>
src/views/main.vue
View file @ a48d946c
<template>
<div class="main-container" :style="`background-image: url(${require('@/assets/images/bg.jpg')})`">
<div class="box1"><m-card></m-card></div>
<div class="box1">
<Header/>
</div>
<div class="box2">
<m-card>
<m-card title="项目监控">
<div style="height: 100%">
<div style="display: flex;">
<m-brief label="正常项目" :count="7" unit="个"/>&nbsp;&nbsp;&nbsp;
......@@ -13,38 +15,63 @@
<m-brief label="对应收入" :count="6153417" unit="元"/>
</div>
<div style="height:80%">
<Chart />
<Chart2/>
</div>
</div>
</m-card>
</div>
<div class="box3">
<m-card>
<m-card title="收入监控">
<div class="chart-wrapper"><Chart/></div>
<div>
<p style="color: #ccc">收入组成</p>
<br>
<div style="display: flex;margin-bottom: 0.5rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">人力制</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent" :size="14"/></div></div>
<div style="display: flex;margin-bottom: 0.5rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">项目制</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent" :size="14"/></div></div>
<div style="display: flex;margin-bottom: 4rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">其他收入</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent" :size="14"/></div></div>
<div style="text-align: right">
<m-brief label="人均收入" :count="13417" unit="元"/>
</div>
<div style="height: 45%">
<p style="color: #ccc;margin-bottom: 0.6rem;">收入组成</p>
<div style="display: flex;margin-bottom: 0.8rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">人力制</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent"/></div></div>
<div style="display: flex;margin-bottom: 0.8rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">项目制</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent"/></div></div>
<div style="display: flex;margin-bottom: 4rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">其他收入</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent"/></div></div>
</div>
<div style="text-align: right">
<m-brief label="人均收入" :count="13417" unit="元"/>
</div>
</m-card>
</div>
<div class="box4">
<m-card>
<div class="chart-wrapper"><Chart/></div>
<div></div>
<m-card title="成本监控">
<div class="chart-wrapper"><Chart2/></div>
<div style="height: 45%;">
<p style="color: #ccc;margin-bottom: 0.6rem;">成本组成</p>
<div style="display: flex;margin-bottom: 0.8rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">人工成本</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent"/></div></div>
<div style="display: flex;margin-bottom: 0.8rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">报销成本</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent"/></div></div>
<div style="display: flex;margin-bottom: 0.8rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">计提成本</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent"/></div></div>
<div style="display: flex;margin-bottom: 0.8rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">硬件设备</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent"/></div></div>
<div style="display: flex;margin-bottom: 0.8rem;"><span style="color: #0eb2ee; width: 15%;text-align: right;">其他成本</span> <div style="width: 85%;margin-left: 1rem"><m-progress :percent="percent"/></div></div>
</div>
<div style="text-align: right">
<m-brief label="人均成本" :count="6167" unit="元"/>
</div>
</m-card>
</div>
<div class="box5">
<m-card title="人员监控">
<div style="display: flex;align-items: center;">
<div style="width: 0.6rem;height:1rem;background: #1ce8ff;margin: 0.3rem 0.5rem 0;"/>
<m-brief label="有wbs覆盖" :count="33" unit="人"/>&nbsp;&nbsp;&nbsp;
<m-brief label="对应成本" :count="4763175" unit="元"/>
</div>
<div style="display: flex;align-items: center;">
<div style="width: 0.6rem;height:1rem;background: #c16ad6;margin: 0.3rem 0.5rem 0;"/>
<m-brief label="无wbs覆盖" :count="10" unit="人"/>&nbsp;&nbsp;&nbsp;
<m-brief label="对应成本" :count="3911143" unit="元"/>
</div>
<div style="height: 80%">
<Chart/>
</div>
</m-card>
</div>
<div class="box5"><m-card><Chart></Chart></m-card></div>
<div class="box6">
<m-card title="收入监控">
<m-card title="绩效监控">
<div style="text-align: center;">
<m-brief style="margin: 0.5rem 0;" label="绩效" :count="3763175" unit="元"/>
<m-progress :percent="percent" :color="['#0176fe', '#4aecfd']"/>
<m-progress :size="20" text-inside :percent="percent" :color="['#0176fe', '#4aecfd']"/>
</div>
</m-card>
</div>
......@@ -53,10 +80,14 @@
<script>
import Chart from './chart'
import Chart2 from './chart2'
import Header from './header'
export default {
name: 'Main',
components: {
Chart,
Chart2,
Header,
},
data() {
return {
......@@ -65,7 +96,7 @@ export default {
},
mounted() {
setTimeout(() => {
this.percent = 50
this.percent = 67
}, 1000)
}
}
......@@ -84,7 +115,7 @@ export default {
'box6 box6 box6'
grid-template-rows 1fr 3fr 3fr 2fr
grid-template-columns 1fr 1fr 1fr
grid-gap 1rem
grid-gap 0.8rem
padding 1rem
.box1
grid-area box1
......@@ -99,7 +130,7 @@ export default {
.box6
grid-area box6
.chart-wrapper
height 48%
height 40%
margin-bottom 1rem
border-bottom $cardBorder
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment