陈裕财
4 years ago
39 changed files with 5087 additions and 165 deletions
-
BINsrc/assets/image/datav_bg2.png
-
39src/components/NoticeMsgBar/index.vue
-
40src/components/TopModules/index.vue
-
36src/router/index.js
-
6src/router/routes_datav_xm.js
-
30src/router/routes_my_work.js
-
1src/router/routes_workflow.js
-
2src/styles/variables.scss
-
3src/views/dashboard/admin/index.vue
-
29src/views/datav/xm/FullScreenLayout.vue
-
2src/views/datav/xm/branch/index.vue
-
275src/views/datav/xm/branch1/cards.vue
-
215src/views/datav/xm/branch1/digitalFlop.vue
-
104src/views/datav/xm/branch1/index.less
-
463src/views/datav/xm/branch1/index.vue
-
108src/views/datav/xm/branch1/rankingBoard.vue
-
176src/views/datav/xm/branch1/roseChart.vue
-
66src/views/datav/xm/branch1/scrollBoard.vue
-
46src/views/datav/xm/branch1/topHeader.vue
-
109src/views/datav/xm/branch1/waterLevelChart.vue
-
65src/views/datav/xm/common/index.vue
-
490src/views/datav/xm/common/theme.json
-
31src/views/datav/xm/project/index.vue
-
269src/views/datav/xm/project1/cards.vue
-
214src/views/datav/xm/project1/digitalFlop.vue
-
103src/views/datav/xm/project1/index.less
-
466src/views/datav/xm/project1/index.vue
-
102src/views/datav/xm/project1/rankingBoard.vue
-
176src/views/datav/xm/project1/roseChart.vue
-
66src/views/datav/xm/project1/scrollBoard.vue
-
109src/views/datav/xm/project1/waterLevelChart.vue
-
59src/views/datav/xm/utils/drawMixin.js
-
51src/views/datav/xm/utils/index.js
-
2src/views/layout/components/AppMain.vue
-
151src/views/layout/components/Navbar.vue
-
5src/views/layout/components/Sidebar/Logo.vue
-
4src/views/layout/components/Sidebar/index.vue
-
2src/views/xm/XmOverview.vue
-
1137src/views/xm/XmOverview2.vue
|
After Width: 1920 | Height: 1080 | Size: 289 KiB |
@ -0,0 +1,30 @@ |
|||
/* Layout */ |
|||
import Layout from '../views/layout/Layout' |
|||
const _import = require('./_import_' + process.env.NODE_ENV) |
|||
|
|||
export default { |
|||
routes: [ |
|||
{ |
|||
path: '/my/work', |
|||
component: Layout, |
|||
name: '我的工作台', |
|||
meta: { |
|||
title: 'TaskCenter', |
|||
icon: 'task' |
|||
}, |
|||
iconCls: 'fa el-icon-menu', |
|||
// leaf: true,
|
|||
children: [ |
|||
{ |
|||
path: 'updateUserInfo', |
|||
component: _import('mdp/sys/user/UpdateUserInfo'), |
|||
name: '账户设置', |
|||
meta: { |
|||
title: '修改个人信息', |
|||
icon: 'component' |
|||
} |
|||
} |
|||
] |
|||
} |
|||
] |
|||
} |
|||
@ -0,0 +1,275 @@ |
|||
<template> |
|||
<div class="d_cards"> |
|||
<div |
|||
class="card-item" |
|||
v-for="(card, i) in myData" |
|||
:key="i" |
|||
> |
|||
<div class="card-header"> |
|||
<div class="card-header-left">{{ card.title }}</div> |
|||
<div class="card-header-right">{{ '0' + (i + 1) }}</div> |
|||
</div> |
|||
<dv-charts class="ring-charts" :option="card.ring" /> |
|||
<div class="card-footer"> |
|||
<div class="card-footer-item"> |
|||
<div class="footer-title">总工作量</div> |
|||
<div class="footer-detail"> |
|||
<dv-digital-flop :config="card.total" style="width:70%;height:35px;" />人月 |
|||
</div> |
|||
</div> |
|||
<div class="card-footer-item"> |
|||
<div class="footer-title">当前进度</div> |
|||
<div class="footer-detail"> |
|||
<dv-digital-flop :config="card.num" style="width:70%;height:35px;" />% |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Cards', |
|||
props:['data'], |
|||
computed:{ |
|||
myData(){ |
|||
if(this.data && this.data.length>0){ |
|||
var cards= this.data.map(i=>{ |
|||
var card=JSON.parse(JSON.stringify(this.cardConfig)) |
|||
card.title=i.productName |
|||
card.total.number=[i.planWorkload/8/20];//累计工作量 人月 |
|||
card.num.number=[i.finishRate];//当前进度 |
|||
//资金占比 |
|||
card.ring.series[0].data[0].value=(i.planWorkload/i.totalPlanWorkload) //工作量占比 |
|||
return card |
|||
}); |
|||
if(cards.length<5){ |
|||
var count=5-cards.length |
|||
for(var i=0;i<count;i++){ |
|||
cards.push(this.cards[i]); |
|||
} |
|||
} |
|||
return cards; |
|||
}else{ |
|||
return this.cards; |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
cards: [], |
|||
cardConfig:{ |
|||
title: '', |
|||
total: { |
|||
number: [10], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#ea6027', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
num: { |
|||
number: [20], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#26fcd8', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
ring: { |
|||
series: [ |
|||
{ |
|||
type: 'gauge', |
|||
startAngle: -Math.PI / 2, |
|||
endAngle: Math.PI * 1.5, |
|||
arcLineWidth: 13, |
|||
radius: '80%', |
|||
data: [ |
|||
{ name: '工作量占比', value: 22 } |
|||
], |
|||
axisLabel: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
pointer: { |
|||
show: false |
|||
}, |
|||
backgroundArc: { |
|||
style: { |
|||
stroke: '#224590' |
|||
} |
|||
}, |
|||
details: { |
|||
show: true, |
|||
formatter: '工作量占比{value}%', |
|||
style: { |
|||
fill: '#1ed3e5', |
|||
fontSize: 20 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
color: ['#03d3ec'] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
createData () { |
|||
const { randomExtend } = this |
|||
const productNames=['商城','营销','项目管理工具','支付','智慧党建'] |
|||
this.cards = new Array(5).fill(0).map((foo, i) => ({ |
|||
title: productNames[i], |
|||
total: { |
|||
number: [randomExtend(90, 100)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#ea6027', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
num: { |
|||
number: [randomExtend(30, 60)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#26fcd8', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
ring: { |
|||
series: [ |
|||
{ |
|||
type: 'gauge', |
|||
startAngle: -Math.PI / 2, |
|||
endAngle: Math.PI * 1.5, |
|||
arcLineWidth: 13, |
|||
radius: '80%', |
|||
data: [ |
|||
{ name: '资金占比', value: randomExtend(40, 60) } |
|||
], |
|||
axisLabel: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
pointer: { |
|||
show: false |
|||
}, |
|||
backgroundArc: { |
|||
style: { |
|||
stroke: '#224590' |
|||
} |
|||
}, |
|||
details: { |
|||
show: true, |
|||
formatter: '资金占比{value}%', |
|||
style: { |
|||
fill: '#1ed3e5', |
|||
fontSize: 20 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
color: ['#03d3ec'] |
|||
} |
|||
})) |
|||
}, |
|||
randomExtend (minNum, maxNum) { |
|||
if (arguments.length === 1) { |
|||
return parseInt(Math.random() * minNum + 1, 10) |
|||
} else { |
|||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10) |
|||
} |
|||
} |
|||
}, |
|||
|
|||
mounted () { |
|||
const { createData } = this |
|||
createData() |
|||
setInterval(this.createData, 300) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.d_cards { |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
height: 100%; |
|||
margin-left: 15px; |
|||
margin-top: 10px; |
|||
|
|||
.card-item { |
|||
background-color: rgba(6, 30, 93, 0.5); |
|||
border-top: 2px solid rgba(1, 153, 209, .5); |
|||
width: 19%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.card-header { |
|||
display: flex; |
|||
height: 20%; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.card-header-left { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
.card-header-right { |
|||
padding-right: 20px; |
|||
font-size: 40px; |
|||
color: #03d3ec; |
|||
} |
|||
} |
|||
|
|||
.ring-charts { |
|||
height: 55%; |
|||
} |
|||
|
|||
.card-footer { |
|||
height: 25%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.card-footer-item { |
|||
padding: 5px 10px 0px 10px; |
|||
box-sizing: border-box; |
|||
width: 40%; |
|||
background-color: rgba(6, 30, 93, 0.7); |
|||
border-radius: 3px; |
|||
|
|||
.footer-title { |
|||
font-size: 15px; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.footer-detail { |
|||
font-size: 20px; |
|||
color: #1294fb; |
|||
display: flex; |
|||
font-size: 18px; |
|||
align-items: center; |
|||
|
|||
.dv-digital-flop { |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,215 @@ |
|||
<template> |
|||
<div class="flop"> |
|||
<div |
|||
class="digital-flop-item" |
|||
v-for="item in myData" |
|||
:key="item.title" |
|||
> |
|||
<p class="digital-flop-title">{{ item.title }}</p> |
|||
<div class="digital-flop"> |
|||
<dv-digital-flop |
|||
:config="item.number" |
|||
style="width:100px; height:50px;" |
|||
/> |
|||
<span class="unit">{{ item.unit }}</span> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'DigitalFlop', |
|||
data () { |
|||
return { |
|||
defaultDigitalFlopData: [] |
|||
} |
|||
}, |
|||
computed:{ |
|||
myData(){ |
|||
if(this.data){ |
|||
return this.data |
|||
}else{ |
|||
return this.defaultDigitalFlopData |
|||
} |
|||
} |
|||
}, |
|||
props:['data'], |
|||
methods: { |
|||
createData () { |
|||
const { randomExtend } = this |
|||
|
|||
this.defaultDigitalFlopData = [ |
|||
{ |
|||
title: '累计金额', |
|||
number: { |
|||
number: [randomExtend(5000000, 10000000000000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '元' |
|||
}, |
|||
{ |
|||
title: '发布总任务数', |
|||
number: { |
|||
number: [randomExtend(20000, 30000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '项目', |
|||
number: { |
|||
number: [randomExtend(200, 300)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '参与人数', |
|||
number: { |
|||
number: [randomExtend(2000, 3000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '客户', |
|||
number: { |
|||
number: [randomExtend(100, 200)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '需求', |
|||
number: { |
|||
number: [randomExtend(5000, 100000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '产品', |
|||
number: { |
|||
number: [randomExtend(50, 100)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '测试用例', |
|||
number: { |
|||
number: [randomExtend(5000, 100000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '迭代', |
|||
number: { |
|||
number: [randomExtend(500, 10000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
} |
|||
] |
|||
}, |
|||
randomExtend (minNum, maxNum) { |
|||
if (arguments.length === 1) { |
|||
return parseInt(Math.random() * minNum + 1, 10) |
|||
} else { |
|||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
const { createData } = this |
|||
|
|||
createData() |
|||
|
|||
setInterval(createData, 30000) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.flop { |
|||
width: 100%; |
|||
height: 120px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
background-color: rgba(13,20,39,0.5); |
|||
.digital-flop-item { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-left: 3px solid rgb(6, 30, 93); |
|||
border-right: 3px solid rgb(6, 30, 93); |
|||
} |
|||
|
|||
.digital-flop-title { |
|||
font-size: 24px; |
|||
margin:20px 20px 10px 20px; |
|||
} |
|||
|
|||
.digital-flop { |
|||
display: flex; |
|||
text-align: center; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 10px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
box-sizing: border-box; |
|||
padding-bottom: 13px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,104 @@ |
|||
#data-branch { |
|||
color: #d3d6dd; |
|||
width: 1920px; |
|||
height: 1080px; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
transform-origin: left top; |
|||
overflow: hidden; |
|||
.bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 16px 16px 0 16px; |
|||
background-image: url("../../../../assets/image/datav_bg2.png"); |
|||
background-size: cover; |
|||
background-position: center center; |
|||
} |
|||
|
|||
.row_1 { |
|||
display: flex; |
|||
.dv-dec-10, |
|||
.dv-dec-10-s { |
|||
width: 33.3%; |
|||
height: 5px; |
|||
} |
|||
.dv-dec-10-s { |
|||
transform: rotateY(180deg); |
|||
} |
|||
.middle { |
|||
display: flex; |
|||
.dv-dec-8 { |
|||
width: 200px; |
|||
height: 30px; |
|||
} |
|||
.title { |
|||
position: relative; |
|||
width: 500px; |
|||
height: 40px; |
|||
text-align: center; |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
line-height: 40px; |
|||
.title-text { |
|||
font-size: 36px; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
width: 500px; |
|||
transform: translate(-50%); |
|||
} |
|||
.dv-dec-6 { |
|||
position: absolute; |
|||
bottom: -30px; |
|||
left: 50%; |
|||
width: 250px; |
|||
height: 8px; |
|||
transform: translate(-50%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.row_2 { |
|||
display: flex; |
|||
margin-top: 42px; |
|||
} |
|||
|
|||
.row_3 { |
|||
display: flex; |
|||
margin-top: 10px; |
|||
.left { |
|||
width: 300px; |
|||
height: 826px; |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
height: 820px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.r_top { |
|||
display: flex; |
|||
flex: 1; |
|||
.top_1, .top_2, .top_3 { |
|||
height: 400px; |
|||
} |
|||
.top_1 { |
|||
width: 480px; |
|||
} |
|||
.top_2 { |
|||
width: 325px; |
|||
} |
|||
.top_3 { |
|||
width: 772px; |
|||
} |
|||
} |
|||
.r_bottom { |
|||
display: flex; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,463 @@ |
|||
<template> |
|||
<div id="data-branch" ref="appRef"> |
|||
<div class="bg"> |
|||
<dv-loading v-if="loading">加载中</dv-loading> |
|||
<div v-else class="host-body"> |
|||
<!-- 第一行 --> |
|||
<div class="row_1"> |
|||
<dv-decoration-10 class="dv-dec-10" /> |
|||
<div class="middle"> |
|||
<dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" /> |
|||
<div class="title"> |
|||
<span class="title-text">唛盟项目管理综合数据监控</span> |
|||
<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']"></dv-decoration-6> |
|||
</div> |
|||
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="['#568aea', '#000000']" /> |
|||
</div> |
|||
<dv-decoration-10 class="dv-dec-10-s" /> |
|||
</div> |
|||
|
|||
<!-- 第二行 --> |
|||
<div class="row_2"> |
|||
<digital-flop :data="digitalFlopData" :title="'汇总数据'"/> |
|||
</div> |
|||
|
|||
<!-- 第三行 --> |
|||
<div class="row_3"> |
|||
<div class="left"> |
|||
<ranking-board :data="rankingBoardData" :title="'项目进度'" /> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="r_top"> |
|||
<div class="top_1"> |
|||
<rose-chart :data="roseChartData" :title="'资金分布'"/> |
|||
</div> |
|||
<div class="top_2"> |
|||
<water-level-chart :data="waterLevelChartData" :title="'计划资金累计完成情况'"/> |
|||
</div> |
|||
<div class="top_3"> |
|||
<scroll-board :data="scrollBoardData" :title="'动态'" :header="['时间','操作人','动作','备注']"/> |
|||
</div> |
|||
</div> |
|||
<div class="r_bottom"> |
|||
<cards :data="cardsData" :title="'产品'" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Vue from 'vue' |
|||
import topHeader from './topHeader' |
|||
import digitalFlop from './digitalFlop' |
|||
import rankingBoard from './rankingBoard' |
|||
import roseChart from './roseChart' |
|||
import waterLevelChart from './waterLevelChart' |
|||
import scrollBoard from './scrollBoard' |
|||
import cards from './cards' |
|||
import dataV from '@jiaminghi/data-view' |
|||
Vue.use(dataV) |
|||
import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询 |
|||
import { listXmBranchState } from '@/api/xm/core/xmBranchState'; |
|||
import { listXmProjectState} from '@/api/xm/core/xmProjectState'; |
|||
import { listXmBranchTaskTypeState } from '@/api/xm/core/xmBranchTaskTypeState'; |
|||
import { listXmRecord } from '@/api/xm/core/xmRecord'; |
|||
import { listXmProductState } from '@/api/xm/core/xmProductState'; |
|||
import { mapGetters } from 'vuex' |
|||
import drawMixin from "../utils/drawMixin"; |
|||
|
|||
|
|||
export default { |
|||
name: 'BranchDataView', |
|||
mixins: [ drawMixin ], |
|||
components: { |
|||
topHeader, |
|||
digitalFlop, |
|||
rankingBoard, |
|||
roseChart, |
|||
waterLevelChart, |
|||
scrollBoard, |
|||
cards |
|||
}, |
|||
computed: { |
|||
...mapGetters([ |
|||
'userInfo' |
|||
]), |
|||
digitalFlopData(){ |
|||
if(!this.xmBranchState){ |
|||
return null; |
|||
} |
|||
var digitalFlopData = [ |
|||
{ |
|||
title: '累计金额', |
|||
number: { |
|||
number: [(this.floatValue(this.xmBranchState.totalBudgetNouserAmount) + this.floatValue(this.xmBranchState.totalBudgetIuserAmount) + this.floatValue(this.xmBranchState.totalBudgetOuserAmount))/10000], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '万元' |
|||
}, |
|||
{ |
|||
title: '发布总任务数', |
|||
number: { |
|||
number: [this.xmBranchState.totalTaskCnt ], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '项目', |
|||
number: { |
|||
number: [this.xmBranchState.projectCnt ], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '参与人数', |
|||
number: { |
|||
number: [this.xmBranchState.totalStaffCnt], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '人' |
|||
}, |
|||
{ |
|||
title: '客户', |
|||
number: { |
|||
number: [this.xmBranchState.productCnt], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '需求', |
|||
number: { |
|||
number: [this.xmBranchState.menuCnt], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '产品', |
|||
number: { |
|||
number: [this.xmBranchState.productCnt], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '测试用例', |
|||
number: { |
|||
number: [this.xmBranchState.testCases], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '迭代', |
|||
number: { |
|||
number: [this.xmBranchState.iterationCnt], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
} |
|||
] |
|||
return digitalFlopData; |
|||
}, |
|||
rankingBoardData(){ |
|||
if( !this.xmProjectStates || this.xmProjectStates.length==0 ){ |
|||
return []; |
|||
} |
|||
var rankingBoardData=this.xmProjectStates.map(i=>{ |
|||
return {name:i.projectName,value:i.totalProgress+'%'} |
|||
}) |
|||
return rankingBoardData |
|||
}, |
|||
roseChartData(){ |
|||
var taskTypeList=this.options.taskType |
|||
if(this.xmBranchTaskTypeStates && this.xmBranchTaskTypeStates.length>0){ |
|||
var xmBranchTaskTypeStates=this.xmBranchTaskTypeStates.filter(i=>i.planAmount>0); |
|||
var roseChartData=xmBranchTaskTypeStates.map(i=>{ |
|||
|
|||
if(!taskTypeList || taskTypeList.length==0){ |
|||
return { |
|||
name:i.taskType?i.taskType:'其它', |
|||
value:i.planAmount?i.planAmount:0 |
|||
} |
|||
}else{ |
|||
var taskTypes=taskTypeList.filter(k=>k.optionValue==i.taskType) |
|||
if(taskTypes && taskTypes.length>0){ |
|||
var taskType=taskTypes[0] |
|||
return { |
|||
name:taskType.optionName, |
|||
value:i.planAmount?i.planAmount:0 |
|||
} |
|||
}else{ |
|||
return { |
|||
name:i.taskType?i.taskType:'其它', |
|||
value:i.planAmount?i.planAmount:0 |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
return roseChartData |
|||
}else{ |
|||
return null; |
|||
} |
|||
|
|||
}, |
|||
waterLevelChartData(){ |
|||
if(this.xmBranchState){ |
|||
var data={} |
|||
var allAmount=this.floatValue(this.xmBranchState.totalBudgetNouserAmount) + this.floatValue(this.xmBranchState.totalBudgetIuserAmount) + this.floatValue(this.xmBranchState.totalBudgetOuserAmount); |
|||
data.finishNum= this.floatValue(this.xmBranchState.totalCostNouserAmount) + this.floatValue(this.xmBranchState.totalCostIuserAmount) +this.floatValue(this.xmBranchState.totalCostOuserAmount) |
|||
data.finishPercent= parseFloat(data.finishNum/allAmount * 100).toFixed(0) |
|||
return data; |
|||
}else{ |
|||
return null; |
|||
} |
|||
}, |
|||
scrollBoardData(){ |
|||
if(this.xmRecords && this.xmRecords.length>0){ |
|||
var data = this.xmRecords.map(i=>{ |
|||
return [i.operTime,i.operUsername,i.action,i.remarks] |
|||
}) |
|||
return data; |
|||
}else{ |
|||
return null; |
|||
} |
|||
}, |
|||
|
|||
cardsData(){ |
|||
if(this.xmProductStates && this.xmProductStates.length>0){ |
|||
var totalPlanWorkload=this.floatValue(this.xmBranchState.totalPlanWorkload) |
|||
this.xmProductStates.map(i=>{ |
|||
i.totalPlanWorkload=totalPlanWorkload |
|||
return i; |
|||
}) |
|||
return this.xmProductStates.slice(0, 5); |
|||
}else{ |
|||
return null; |
|||
} |
|||
} |
|||
}, |
|||
|
|||
data () { |
|||
return { |
|||
loading: true, |
|||
xmBranchState:null, |
|||
xmProjectStates:[], |
|||
xmBranchTaskTypeStates:[], |
|||
xmRecords:[], |
|||
xmProductStates:[], |
|||
options:{ |
|||
taskType:[], |
|||
}, |
|||
|
|||
xmRecordPageInfo:{//分页数据 |
|||
total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。 |
|||
pageSize:20,//每页数据 |
|||
count:false,//是否需要重新计算总记录数 |
|||
pageNum:1,//当前页码、从1开始计算 |
|||
orderFields:["oper_time"],//排序列 如 ['sex','student_id']，必须为数据库字段 |
|||
orderDirs:["desc"]//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc'] |
|||
}, |
|||
|
|||
xmProjectStatePageInfo:{//分页数据 |
|||
total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。 |
|||
pageSize:20,//每页数据 |
|||
count:false,//是否需要重新计算总记录数 |
|||
pageNum:1,//当前页码、从1开始计算 |
|||
orderFields:["calc_time"],//排序列 如 ['sex','student_id']，必须为数据库字段 |
|||
orderDirs:["desc"]//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc'] |
|||
}, |
|||
|
|||
|
|||
xmProductStatePageInfo:{//分页数据 |
|||
total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。 |
|||
pageSize:20,//每页数据 |
|||
count:false,//是否需要重新计算总记录数 |
|||
pageNum:1,//当前页码、从1开始计算 |
|||
orderFields:["calc_time"],//排序列 如 ['sex','student_id']，必须为数据库字段 |
|||
orderDirs:["desc"]//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc'] |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
getXmBranchState(){ |
|||
var params = { |
|||
branchId:this.userInfo.branchId |
|||
} |
|||
listXmBranchState(params).then(res=>{ |
|||
var tips = res.data.tips; |
|||
if(tips.isOk){ |
|||
if(res.data.data.length>0){ |
|||
this.xmBranchState=res.data.data[0] |
|||
} |
|||
setTimeout(() => { |
|||
this.loading = false; |
|||
}, 100); |
|||
} |
|||
}); |
|||
}, |
|||
getXmProjectStates(){ |
|||
let params = { |
|||
pageSize: this.xmProjectStatePageInfo.pageSize, |
|||
pageNum: this.xmProjectStatePageInfo.pageNum, |
|||
total: this.xmProjectStatePageInfo.total, |
|||
count:this.xmProjectStatePageInfo.count |
|||
}; |
|||
if(this.xmProjectStatePageInfo.orderFields!=null && this.xmProjectStatePageInfo.orderFields.length>0){ |
|||
let orderBys=[]; |
|||
for(var i=0;i<this.xmProjectStatePageInfo.orderFields.length;i++){ |
|||
orderBys.push(this.xmProjectStatePageInfo.orderFields[i]+" "+this.xmProjectStatePageInfo.orderDirs[i]) |
|||
} |
|||
params.orderBy= orderBys.join(",") |
|||
} |
|||
params.branchId=this.userInfo.branchId |
|||
listXmProjectState(params).then(res=>{ |
|||
var tips = res.data.tips; |
|||
if(tips.isOk){ |
|||
if(res.data.data.length>0){ |
|||
this.xmProjectStates=res.data.data |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
getXmBranchTaskTypeStates(){ |
|||
var params = { |
|||
branchId:this.userInfo.branchId |
|||
} |
|||
listXmBranchTaskTypeState(params).then(res=>{ |
|||
var tips = res.data.tips; |
|||
if(tips.isOk){ |
|||
if(res.data.data.length>0){ |
|||
this.xmBranchTaskTypeStates=res.data.data |
|||
} |
|||
} |
|||
}); |
|||
},//获取列表 XmRecord xm_record |
|||
getXmRecords() { |
|||
let params = { |
|||
pageSize: this.xmRecordPageInfo.pageSize, |
|||
pageNum: this.xmRecordPageInfo.pageNum, |
|||
total: this.xmRecordPageInfo.total, |
|||
count:this.xmRecordPageInfo.count |
|||
}; |
|||
if(this.xmRecordPageInfo.orderFields!=null && this.xmRecordPageInfo.orderFields.length>0){ |
|||
let orderBys=[]; |
|||
for(var i=0;i<this.xmRecordPageInfo.orderFields.length;i++){ |
|||
orderBys.push(this.xmRecordPageInfo.orderFields[i]+" "+this.xmRecordPageInfo.orderDirs[i]) |
|||
} |
|||
params.orderBy= orderBys.join(",") |
|||
} |
|||
listXmRecord(params).then((res) => { |
|||
var tips=res.data.tips; |
|||
if(tips.isOk){ |
|||
this.xmRecordPageInfo.total = res.data.total; |
|||
this.xmRecordPageInfo.count=false; |
|||
this.xmRecords = res.data.data; |
|||
}else{ |
|||
} |
|||
}) ; |
|||
}, |
|||
//获取列表 XmProductState 功能状态表,无需前端维护，所有数据由汇总统计得出 |
|||
getXmProductStates() { |
|||
let params = { |
|||
pageSize: this.xmProductStatePageInfo.pageSize, |
|||
pageNum: this.xmProductStatePageInfo.pageNum, |
|||
total: this.xmProductStatePageInfo.total, |
|||
count:this.xmProductStatePageInfo.count |
|||
}; |
|||
if(this.xmProductStatePageInfo.orderFields!=null && this.xmProductStatePageInfo.orderFields.length>0){ |
|||
let orderBys=[]; |
|||
for(var i=0;i<this.xmProductStatePageInfo.orderFields.length;i++){ |
|||
orderBys.push(this.xmProductStatePageInfo.orderFields[i]+" "+this.xmProductStatePageInfo.orderDirs[i]) |
|||
} |
|||
params.orderBy= orderBys.join(",") |
|||
} |
|||
params.branchId=this.userInfo.branchId |
|||
listXmProductState(params).then((res) => { |
|||
var tips=res.data.tips; |
|||
if(tips.isOk){ |
|||
this.xmProductStatePageInfo.total = res.data.total; |
|||
this.xmProductStatePageInfo.count=false; |
|||
this.xmProductStates = res.data.data; |
|||
}else{ |
|||
} |
|||
}) ; |
|||
}, |
|||
floatValue(value){ |
|||
if(!value){ |
|||
return 0.0; |
|||
}else{ |
|||
return value |
|||
} |
|||
} |
|||
}, |
|||
mounted(){ |
|||
this.getXmBranchState(); |
|||
this.getXmProjectStates(); |
|||
this.getXmBranchTaskTypeStates(); |
|||
this.getXmRecords(); |
|||
this.getXmProductStates(); |
|||
listOption([{categoryId:'all',itemCode:'taskType'}] ).then(res=>{ |
|||
if(res.data.tips.isOk){ |
|||
this.options=res.data.data |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
@import './index.less'; |
|||
</style> |
|||
@ -0,0 +1,108 @@ |
|||
<template> |
|||
<div class="ranking-board"> |
|||
<span class="ranking-board-title">{{title}}</span> |
|||
<dv-scroll-ranking-board :config="config" style="height: 500px;" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'RankingBoard', |
|||
props:['data','title'], |
|||
computed:{ |
|||
config(){ |
|||
if( !this.data || this.data.length==0){ |
|||
return this.defaultConfig; |
|||
}else{ |
|||
var data=this.data; |
|||
if(data.length<5){ |
|||
const count = 5-data.length; |
|||
for(var i=0;i< count;i++){ |
|||
var defaultOne=JSON.parse(JSON.stringify(this.defaultConfig.data[i])) |
|||
data.push(defaultOne); |
|||
} |
|||
} |
|||
data.forEach(element => { |
|||
element.name = `<span style="font-size:16px;">${element.name}</span>` |
|||
}); |
|||
var config={ |
|||
data:data |
|||
} |
|||
return config |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
defaultConfig: { |
|||
data: [ |
|||
{ |
|||
name: '商城项目', |
|||
value: '30%' |
|||
}, |
|||
{ |
|||
name: '营销项目', |
|||
value: '40%' |
|||
}, |
|||
{ |
|||
name: '支付项目', |
|||
value: '50%' |
|||
}, |
|||
{ |
|||
name: '短信项目', |
|||
value: '60%' |
|||
}, |
|||
{ |
|||
name: '党建项目', |
|||
value: '50%' |
|||
}, |
|||
{ |
|||
name: '协同办公项目', |
|||
value: '90%' |
|||
}, |
|||
{ |
|||
name: '即聊项目', |
|||
value: '40%' |
|||
}, |
|||
{ |
|||
name: '审计项目', |
|||
value: '60%' |
|||
}, |
|||
{ |
|||
name: '溯源项目', |
|||
value: '90%' |
|||
} |
|||
], |
|||
rowNum: 9 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.ranking-board { |
|||
width: 300px; |
|||
height: 100%; |
|||
box-shadow: 0 0 3px blue; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: rgba(10, 13, 28, 0.5); |
|||
border-top: 2px solid rgba(1, 153, 209, .5); |
|||
box-sizing: border-box; |
|||
padding: 0px 30px; |
|||
|
|||
.ranking-board-title { |
|||
font-weight: bold; |
|||
height: 50px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 20px; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.dv-scroll-ranking-board { |
|||
flex: 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<div class="rose-chart"> |
|||
<div class="rose-chart-title">{{title}}</div> |
|||
<Echart |
|||
:options="option" |
|||
id="dv_roseChart" |
|||
height="340px" |
|||
width="100%" |
|||
></Echart> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Echart from '../common' |
|||
export default { |
|||
name: 'RoseChart', |
|||
props:['data','title'], |
|||
components: {Echart}, |
|||
computed:{ |
|||
option(){ |
|||
if( !this.data || this.data.length==0){ |
|||
return this.defaultOption; |
|||
}else{ |
|||
this.createData() |
|||
let tempData = this.data.slice(0, 5); |
|||
let obj = {name: '其它', value : 0}; |
|||
let v = 0; |
|||
this.data.forEach((element,index) => { |
|||
if(index > 5) { |
|||
v += element.value; |
|||
} |
|||
}); |
|||
obj.value = v; |
|||
if(obj.value > 0) { |
|||
tempData.push(obj); |
|||
} |
|||
var option = JSON.parse(JSON.stringify(this.options)) |
|||
option.series[0].data = tempData |
|||
option.legend.data = tempData |
|||
return option |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
defaultOption: {}, |
|||
options : { |
|||
color: [ |
|||
"#37a2da", |
|||
"#32c5e9", |
|||
"#9fe6b8", |
|||
"#ffdb5c", |
|||
"#ff9f7f", |
|||
"#fb7293", |
|||
"#e7bcf3" |
|||
], |
|||
tooltip: { |
|||
trigger: "item", |
|||
formatter: "{b} : {c} ({d}%)" |
|||
}, |
|||
legend: { |
|||
orient: "horizontal", |
|||
icon: "circle", |
|||
bottom: 0, |
|||
x: "center", |
|||
data: |
|||
[ |
|||
{ value: 40, name: 'rose 1' }, |
|||
{ value: 38, name: 'rose 2' }, |
|||
{ value: 32, name: 'rose 3' }, |
|||
{ value: 30, name: 'rose 4' }, |
|||
{ value: 28, name: 'rose 5' }, |
|||
], |
|||
textStyle: { |
|||
color: "#fff", |
|||
fontSize: 18 |
|||
} |
|||
}, |
|||
calculable: true, |
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
radius: [35, 80], |
|||
center: ['50%', '45%'], |
|||
roseType: 'area', |
|||
data: [ |
|||
{ value: 40, name: 'rose 1' }, |
|||
{ value: 38, name: 'rose 2' }, |
|||
{ value: 32, name: 'rose 3' }, |
|||
{ value: 30, name: 'rose 4' }, |
|||
{ value: 28, name: 'rose 5' }, |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
createData () { |
|||
const { randomExtend } = this |
|||
|
|||
this.defaultOption = { |
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
radius: '50%', |
|||
roseSort: false, |
|||
data: [ |
|||
{ name: '需求', value: randomExtend(40, 70) }, |
|||
{ name: '开发', value: randomExtend(20, 30) }, |
|||
{ name: '测试', value: randomExtend(10, 50) }, |
|||
{ name: '设计', value: randomExtend(5, 20) }, |
|||
{ name: '运营', value: randomExtend(40, 50) }, |
|||
{ name: '客服', value: randomExtend(20, 30) }, |
|||
{ name: '管理', value: randomExtend(5, 10) }, |
|||
{ name: '产品', value: randomExtend(20, 35) }, |
|||
{ name: '运维', value: randomExtend(5, 10) } |
|||
], |
|||
insideLabel: { |
|||
show: false |
|||
}, |
|||
outsideLabel: { |
|||
formatter: '{name} {percent}%', |
|||
labelLineEndLength: 20, |
|||
style: { |
|||
fill: '#fff' |
|||
}, |
|||
labelLineStyle: { |
|||
stroke: '#fff' |
|||
} |
|||
}, |
|||
roseType: true |
|||
} |
|||
], |
|||
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700'] |
|||
} |
|||
}, |
|||
randomExtend (minNum, maxNum) { |
|||
if (arguments.length === 1) { |
|||
return parseInt(Math.random() * minNum + 1, 10) |
|||
} else { |
|||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
const { createData } = this |
|||
createData() |
|||
setInterval(createData, 30000) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.rose-chart { |
|||
width: 450px; |
|||
height: 400px; |
|||
margin: 0 0px 0 15px; |
|||
background-color: rgba(6, 30, 93, 0.5); |
|||
border-top: 2px solid rgba(1, 153, 209, .5); |
|||
box-sizing: border-box; |
|||
.rose-chart-title { |
|||
height: 50px; |
|||
font-weight: bold; |
|||
text-indent: 20px; |
|||
font-size: 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.dv-charts-container { |
|||
height: calc(~"100% - 20px"); |
|||
} |
|||
} |
|||
</style> |
|||
|
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<div class="scroll-board"> |
|||
<dv-scroll-board :config="myConfig" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ScrollBoard', |
|||
props:['data','header'], |
|||
computed:{ |
|||
myConfig(){ |
|||
if(this.data && this.data.length>0){ |
|||
var config=JSON.parse(JSON.stringify(this.config)); |
|||
this.data.forEach(d => { |
|||
d.forEach((text, index) => { |
|||
d[index] = `<span style="font-size:16px;">${text}</span>`; |
|||
}); |
|||
}); |
|||
config.header=this.header |
|||
config.data=this.data |
|||
return config; |
|||
}else{ |
|||
return this.config |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
config: { |
|||
header: ['时间', '项目', '金额', '变动情况'], |
|||
data: [ |
|||
['2019-07-01 19:25:00', '唛萌项目管理工具', '500万元', '立项'], |
|||
['2019-07-02 17:25:00', '唛盟商城项目', '300万元', '通过验收'], |
|||
['2019-07-03 16:25:00', '唛萌营销项目', '200万元', '测试完成'], |
|||
['2019-07-04 15:25:00', '组织管理系统项目', '100万', '竞标中'], |
|||
['2019-07-05 14:25:00', '支付管理系统', '700万元', '完成第一里程碑'], |
|||
['2019-07-06 13:25:00', '溯源系统', '300万元', '系统对接完成'], |
|||
['2019-07-07 12:25:00', '智能办公系统', '400万元', '试运行中'], |
|||
['2019-07-08 11:25:00', '数据可视化系统', '600万元', '开发中'], |
|||
['2019-07-09 10:25:00', '党建系统', '500万元', '上线成功'], |
|||
['2019-07-10 09:25:00', '智慧社区系统', '300万元', '运营中'] |
|||
], |
|||
index: true, |
|||
columnWidth: [50, 150, 100,200,200], |
|||
align: ['center'], |
|||
rowNum: 7, |
|||
headerBGC: '#1981f6', |
|||
headerHeight: 45, |
|||
oddRowBGC: 'rgba(0, 44, 81, 0.8)', |
|||
evenRowBGC: 'rgba(10, 29, 50, 0.8)' |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.scroll-board { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
margin-left: 10px; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,46 @@ |
|||
<template> |
|||
<div id="top-header"> |
|||
<dv-decoration-8 class="header-left-decoration" /> |
|||
<dv-decoration-5 class="header-center-decoration" /> |
|||
<dv-decoration-8 class="header-right-decoration" :reverse="true" /> |
|||
<div class="center-title">{{title}}</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'TopHeader', |
|||
props:['title'], |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
#top-header { |
|||
position: relative; |
|||
width: 100%; |
|||
height: 100px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
flex-shrink: 0; |
|||
|
|||
.header-center-decoration { |
|||
width: 40%; |
|||
height: 60px; |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.header-left-decoration, .header-right-decoration { |
|||
width: 25%; |
|||
height: 60px; |
|||
} |
|||
|
|||
.center-title { |
|||
position: absolute; |
|||
font-size: 30px; |
|||
font-weight: bold; |
|||
left: 50%; |
|||
top: 15px; |
|||
transform: translateX(-50%); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,109 @@ |
|||
<template> |
|||
<div class="water-level-chart"> |
|||
<div class="water-level-chart-title">{{title}}</div> |
|||
|
|||
<div class="water-level-chart-details"> |
|||
累计完成<span>{{myData.finishNum}}</span>元 |
|||
</div> |
|||
|
|||
<div class="chart-container"> |
|||
<dv-water-level-pond :config="myData.config" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'WaterLevelChart', |
|||
props:['data','title'], |
|||
computed:{ |
|||
myData(){ |
|||
if(this.data){ |
|||
|
|||
var config=JSON.parse(JSON.stringify( this.config)) |
|||
config.data=[this.data.finishPercent] |
|||
return { |
|||
finishNum:this.data.finishNum, |
|||
config:config |
|||
} |
|||
} else{ |
|||
return { |
|||
finishNum:12350, |
|||
config:this.config |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
config: { |
|||
data: [45], |
|||
shape: 'round', |
|||
waveHeight: 25, |
|||
waveNum: 2 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.water-level-chart { |
|||
width: 100%; |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
margin-right: 20px; |
|||
background-color: rgba(6, 30, 93, 0.5); |
|||
border-top: 2px solid rgba(1, 153, 209, .5); |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.water-level-chart-title { |
|||
font-weight: bold; |
|||
height: 50px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 20px; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.water-level-chart-details { |
|||
height: 15%; |
|||
display: flex; |
|||
justify-content: center; |
|||
font-size: 17px; |
|||
align-items: flex-end; |
|||
|
|||
span { |
|||
font-size: 35px; |
|||
font-weight: bold; |
|||
color: #58a1ff; |
|||
margin: 0 5px; |
|||
margin-bottom: -5px; |
|||
} |
|||
} |
|||
|
|||
.chart-container { |
|||
flex: 1; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.dv-water-pond-level { |
|||
max-width: 90%; |
|||
width: 200px; |
|||
height: 200px; |
|||
border: 10px solid #19c3eb; |
|||
border-radius: 50%; |
|||
|
|||
ellipse { |
|||
stroke: transparent !important; |
|||
} |
|||
|
|||
text { |
|||
font-size: 40px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,65 @@ |
|||
<template> |
|||
<div :id="id" :class="className" :style="{ height: height, width: width }" /> |
|||
</template> |
|||
|
|||
<script> |
|||
import tdTheme from './theme.json' // 引入默认主题 |
|||
|
|||
export default { |
|||
name: 'echart', |
|||
props: { |
|||
className: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
id: { |
|||
type: String, |
|||
default: 'chart' |
|||
}, |
|||
width: { |
|||
type: String, |
|||
default: '100%' |
|||
}, |
|||
height: { |
|||
type: String, |
|||
default: '2.5rem' |
|||
}, |
|||
options: { |
|||
type: Object, |
|||
default: ()=>({}) |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
chart: null |
|||
} |
|||
}, |
|||
watch: { |
|||
options: { |
|||
handler (options) { |
|||
// 设置true清空echart缓存 |
|||
this.chart.setOption(options, true) |
|||
}, |
|||
deep: true |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.$echarts.registerTheme('tdTheme', tdTheme); // 覆盖默认主题 |
|||
this.initChart(); |
|||
}, |
|||
beforeDestroy () { |
|||
this.chart.dispose() |
|||
this.chart = null |
|||
}, |
|||
methods: { |
|||
initChart () { |
|||
// 初始化echart |
|||
this.chart = this.$echarts.init(this.$el, 'tdTheme') |
|||
this.chart.setOption(this.options, true) |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style> |
|||
</style> |
|||
@ -0,0 +1,490 @@ |
|||
{ |
|||
"color": [ |
|||
"#2d8cf0", |
|||
"#19be6b", |
|||
"#ff9900", |
|||
"#E46CBB", |
|||
"#9A66E4", |
|||
"#ed3f14" |
|||
], |
|||
"backgroundColor": "rgba(0,0,0,0)", |
|||
"textStyle": {}, |
|||
"title": { |
|||
"textStyle": { |
|||
"color": "#516b91" |
|||
}, |
|||
"subtextStyle": { |
|||
"color": "#93b7e3" |
|||
} |
|||
}, |
|||
"line": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": "2" |
|||
} |
|||
}, |
|||
"lineStyle": { |
|||
"normal": { |
|||
"width": "2" |
|||
} |
|||
}, |
|||
"symbolSize": "6", |
|||
"symbol": "emptyCircle", |
|||
"smooth": true |
|||
}, |
|||
"radar": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": "2" |
|||
} |
|||
}, |
|||
"lineStyle": { |
|||
"normal": { |
|||
"width": "2" |
|||
} |
|||
}, |
|||
"symbolSize": "6", |
|||
"symbol": "emptyCircle", |
|||
"smooth": true |
|||
}, |
|||
"bar": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"barBorderWidth": 0, |
|||
"barBorderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"barBorderWidth": 0, |
|||
"barBorderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"pie": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"scatter": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"boxplot": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"parallel": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"sankey": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"funnel": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"gauge": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
}, |
|||
"emphasis": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
} |
|||
}, |
|||
"candlestick": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"color": "#edafda", |
|||
"color0": "transparent", |
|||
"borderColor": "#d680bc", |
|||
"borderColor0": "#8fd3e8", |
|||
"borderWidth": "2" |
|||
} |
|||
} |
|||
}, |
|||
"graph": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"borderWidth": 0, |
|||
"borderColor": "#ccc" |
|||
} |
|||
}, |
|||
"lineStyle": { |
|||
"normal": { |
|||
"width": 1, |
|||
"color": "#aaa" |
|||
} |
|||
}, |
|||
"symbolSize": "6", |
|||
"symbol": "emptyCircle", |
|||
"smooth": true, |
|||
"color": [ |
|||
"#2d8cf0", |
|||
"#19be6b", |
|||
"#f5ae4a", |
|||
"#9189d5", |
|||
"#56cae2", |
|||
"#cbb0e3" |
|||
], |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#eee" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"map": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"areaColor": "#f3f3f3", |
|||
"borderColor": "#516b91", |
|||
"borderWidth": 0.5 |
|||
}, |
|||
"emphasis": { |
|||
"areaColor": "rgba(165,231,240,1)", |
|||
"borderColor": "#516b91", |
|||
"borderWidth": 1 |
|||
} |
|||
}, |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#000" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "rgb(81,107,145)" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"geo": { |
|||
"itemStyle": { |
|||
"normal": { |
|||
"areaColor": "#f3f3f3", |
|||
"borderColor": "#516b91", |
|||
"borderWidth": 0.5 |
|||
}, |
|||
"emphasis": { |
|||
"areaColor": "rgba(165,231,240,1)", |
|||
"borderColor": "#516b91", |
|||
"borderWidth": 1 |
|||
} |
|||
}, |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#000" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "rgb(81,107,145)" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"categoryAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#fff" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"valueAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#fff" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"logAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"timeAxis": { |
|||
"axisLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": "#cccccc" |
|||
} |
|||
}, |
|||
"axisTick": { |
|||
"show": false, |
|||
"lineStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"axisLabel": { |
|||
"show": true, |
|||
"textStyle": { |
|||
"color": "#999999" |
|||
} |
|||
}, |
|||
"splitLine": { |
|||
"show": true, |
|||
"lineStyle": { |
|||
"color": [ |
|||
"#eeeeee" |
|||
] |
|||
} |
|||
}, |
|||
"splitArea": { |
|||
"show": false, |
|||
"areaStyle": { |
|||
"color": [ |
|||
"rgba(250,250,250,0.05)", |
|||
"rgba(200,200,200,0.02)" |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
"toolbox": { |
|||
"iconStyle": { |
|||
"normal": { |
|||
"borderColor": "#999" |
|||
}, |
|||
"emphasis": { |
|||
"borderColor": "#666" |
|||
} |
|||
} |
|||
}, |
|||
"legend": { |
|||
"textStyle": { |
|||
"color": "#fff" |
|||
} |
|||
}, |
|||
"tooltip": { |
|||
"axisPointer": { |
|||
"lineStyle": { |
|||
"color": "#ccc", |
|||
"width": 1 |
|||
}, |
|||
"crossStyle": { |
|||
"color": "#ccc", |
|||
"width": 1 |
|||
} |
|||
} |
|||
}, |
|||
"timeline": { |
|||
"lineStyle": { |
|||
"color": "#8fd3e8", |
|||
"width": 1 |
|||
}, |
|||
"itemStyle": { |
|||
"normal": { |
|||
"color": "#8fd3e8", |
|||
"borderWidth": 1 |
|||
}, |
|||
"emphasis": { |
|||
"color": "#8fd3e8" |
|||
} |
|||
}, |
|||
"controlStyle": { |
|||
"normal": { |
|||
"color": "#8fd3e8", |
|||
"borderColor": "#8fd3e8", |
|||
"borderWidth": 0.5 |
|||
}, |
|||
"emphasis": { |
|||
"color": "#8fd3e8", |
|||
"borderColor": "#8fd3e8", |
|||
"borderWidth": 0.5 |
|||
} |
|||
}, |
|||
"checkpointStyle": { |
|||
"color": "#8fd3e8", |
|||
"borderColor": "rgba(138,124,168,0.37)" |
|||
}, |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#8fd3e8" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "#8fd3e8" |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
"visualMap": { |
|||
"color": [ |
|||
"#516b91", |
|||
"#59c4e6", |
|||
"#a5e7f0" |
|||
] |
|||
}, |
|||
"dataZoom": { |
|||
"backgroundColor": "rgba(0,0,0,0)", |
|||
"dataBackgroundColor": "rgba(255,255,255,0.3)", |
|||
"fillerColor": "rgba(167,183,204,0.4)", |
|||
"handleColor": "#a7b7cc", |
|||
"handleSize": "100%", |
|||
"textStyle": { |
|||
"color": "#333" |
|||
} |
|||
}, |
|||
"markPoint": { |
|||
"label": { |
|||
"normal": { |
|||
"textStyle": { |
|||
"color": "#eee" |
|||
} |
|||
}, |
|||
"emphasis": { |
|||
"textStyle": { |
|||
"color": "#eee" |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,269 @@ |
|||
<template> |
|||
<div class="d_cards"> |
|||
<div |
|||
class="card-item" |
|||
v-for="(card, i) in myData" |
|||
:key="card.title" |
|||
> |
|||
<div class="card-header"> |
|||
<div class="card-header-left">{{ card.title }}</div> |
|||
<div class="card-header-right">{{ '0' + (i + 1) }}</div> |
|||
</div> |
|||
<dv-charts class="ring-charts" :option="card.ring" /> |
|||
<div class="card-footer"> |
|||
<div class="card-footer-item"> |
|||
<div class="footer-title">总工作量</div> |
|||
<div class="footer-detail"> |
|||
<dv-digital-flop :config="card.total" style="width:65%;height:35px;" /> |
|||
<span style="font-size: 16px">人时</span> |
|||
</div> |
|||
</div> |
|||
<div class="card-footer-item"> |
|||
<div class="footer-title">当前进度</div> |
|||
<div class="footer-detail"> |
|||
<dv-digital-flop :config="card.num" style="width:65%;height:35px;" />% |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'Cards', |
|||
props:['data'], |
|||
computed:{ |
|||
myData(){ |
|||
if(this.data && this.data.length>0){ |
|||
var cards= this.data.map(i=>{ |
|||
var card=JSON.parse(JSON.stringify(this.cardConfig)) |
|||
card.title=i.name |
|||
card.total.number=[i.budgetWorkload];//累计工作量 人月 |
|||
card.num.number=[i.actRate];//当前进度 |
|||
//资金占比 |
|||
card.ring.series[0].data[0].value=(i.budgetWorkload/i.totalPlanWorkload) //工作量占比 |
|||
console.log(card, ""); |
|||
return card |
|||
}); |
|||
return cards; |
|||
}else{ |
|||
return this.cards; |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
cards: [], |
|||
cardConfig:{ |
|||
title: '', |
|||
total: { |
|||
number: [10], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#ea6027', |
|||
fontWeight: 'bold', |
|||
fontSize: 24 |
|||
} |
|||
}, |
|||
num: { |
|||
number: [20], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#26fcd8', |
|||
fontWeight: 'bold', |
|||
fontSize: 26 |
|||
} |
|||
}, |
|||
ring: { |
|||
series: [ |
|||
{ |
|||
type: 'gauge', |
|||
startAngle: -Math.PI / 2, |
|||
endAngle: Math.PI * 1.5, |
|||
arcLineWidth: 13, |
|||
radius: '80%', |
|||
data: [ |
|||
{ name: '工作量占比', value: 22 } |
|||
], |
|||
axisLabel: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
pointer: { |
|||
show: false |
|||
}, |
|||
backgroundArc: { |
|||
style: { |
|||
stroke: '#224590' |
|||
} |
|||
}, |
|||
details: { |
|||
show: true, |
|||
formatter: '工作量占比{value}%', |
|||
style: { |
|||
fill: '#1ed3e5', |
|||
fontSize: 20 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
color: ['#03d3ec'] |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
createData () { |
|||
const { randomExtend } = this |
|||
const productNames=['商城','营销','项目管理工具','支付','智慧党建'] |
|||
this.cards = new Array(5).fill(0).map((foo, i) => ({ |
|||
title: productNames[i], |
|||
total: { |
|||
number: [randomExtend(90, 100)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#ea6027', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
num: { |
|||
number: [randomExtend(30, 60)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#26fcd8', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
ring: { |
|||
series: [ |
|||
{ |
|||
type: 'gauge', |
|||
startAngle: -Math.PI / 2, |
|||
endAngle: Math.PI * 1.5, |
|||
arcLineWidth: 13, |
|||
radius: '80%', |
|||
data: [ |
|||
{ name: '资金占比', value: randomExtend(40, 60) } |
|||
], |
|||
axisLabel: { |
|||
show: false |
|||
}, |
|||
axisTick: { |
|||
show: false |
|||
}, |
|||
pointer: { |
|||
show: false |
|||
}, |
|||
backgroundArc: { |
|||
style: { |
|||
stroke: '#224590' |
|||
} |
|||
}, |
|||
details: { |
|||
show: true, |
|||
formatter: '资金占比{value}%', |
|||
style: { |
|||
fill: '#1ed3e5', |
|||
fontSize: 20 |
|||
} |
|||
} |
|||
} |
|||
], |
|||
color: ['#03d3ec'] |
|||
} |
|||
})) |
|||
}, |
|||
randomExtend (minNum, maxNum) { |
|||
if (arguments.length === 1) { |
|||
return parseInt(Math.random() * minNum + 1, 10) |
|||
} else { |
|||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
const { createData } = this |
|||
createData() |
|||
setInterval(this.createData, 300) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.d_cards { |
|||
display: flex; |
|||
width: 100%; |
|||
justify-content: space-between; |
|||
height: 100%; |
|||
margin-left: 15px; |
|||
margin-top: 10px; |
|||
|
|||
.card-item { |
|||
background-color: rgba(6, 30, 93, 0.5); |
|||
border-top: 2px solid rgba(1, 153, 209, .5); |
|||
width: 19%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.card-header { |
|||
display: flex; |
|||
height: 20%; |
|||
align-items: center; |
|||
justify-content: space-between; |
|||
|
|||
.card-header-left { |
|||
font-size: 18px; |
|||
font-weight: bold; |
|||
padding-left: 20px; |
|||
} |
|||
|
|||
.card-header-right { |
|||
padding-right: 20px; |
|||
font-size: 40px; |
|||
color: #03d3ec; |
|||
} |
|||
} |
|||
|
|||
.ring-charts { |
|||
height: 55%; |
|||
} |
|||
|
|||
.card-footer { |
|||
height: 25%; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: space-around; |
|||
} |
|||
|
|||
.card-footer-item { |
|||
// padding: 5px 5px 0px 10px; |
|||
box-sizing: border-box; |
|||
width: 46% !important; |
|||
background-color: rgba(6, 30, 93, 0.7); |
|||
border-radius: 3px; |
|||
|
|||
.footer-title { |
|||
font-size: 15px; |
|||
margin-bottom: 5px; |
|||
} |
|||
.footer-detail { |
|||
color: #1294fb; |
|||
display: flex; |
|||
font-size: 18px; |
|||
align-items: center; |
|||
.dv-digital-flop { |
|||
margin-right: 5px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,214 @@ |
|||
<template> |
|||
<div class="flop"> |
|||
<div |
|||
class="digital-flop-item" |
|||
v-for="item in myData" |
|||
:key="item.title" |
|||
> |
|||
<p class="digital-flop-title">{{ item.title }}</p> |
|||
<div class="digital-flop"> |
|||
<dv-digital-flop |
|||
:config="item.number" |
|||
style="width:140px; height:50px;" |
|||
/> |
|||
<span class="unit">{{ item.unit }}</span> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'DigitalFlop', |
|||
data () { |
|||
return { |
|||
defaultDigitalFlopData: [] |
|||
} |
|||
}, |
|||
computed:{ |
|||
myData(){ |
|||
if(this.data){ |
|||
return this.data |
|||
}else{ |
|||
return this.defaultDigitalFlopData |
|||
} |
|||
} |
|||
}, |
|||
props:['data'], |
|||
methods: { |
|||
createData () { |
|||
const { randomExtend } = this |
|||
|
|||
this.defaultDigitalFlopData = [ |
|||
{ |
|||
title: '累计金额', |
|||
number: { |
|||
number: [randomExtend(50000, 10000000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '元' |
|||
}, |
|||
{ |
|||
title: '发布总任务数', |
|||
number: { |
|||
number: [randomExtend(20000, 30000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '项目', |
|||
number: { |
|||
number: [randomExtend(200, 300)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '参与人数', |
|||
number: { |
|||
number: [randomExtend(2000, 3000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '客户', |
|||
number: { |
|||
number: [randomExtend(100, 200)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '需求', |
|||
number: { |
|||
number: [randomExtend(5000, 100000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '产品', |
|||
number: { |
|||
number: [randomExtend(50, 100)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '测试用例', |
|||
number: { |
|||
number: [randomExtend(5000, 100000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '迭代', |
|||
number: { |
|||
number: [randomExtend(500, 10000)], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
} |
|||
] |
|||
}, |
|||
randomExtend (minNum, maxNum) { |
|||
if (arguments.length === 1) { |
|||
return parseInt(Math.random() * minNum + 1, 10) |
|||
} else { |
|||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
const { createData } = this |
|||
createData() |
|||
setInterval(createData, 30000) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.flop { |
|||
width: 100%; |
|||
height: 120px; |
|||
display: flex; |
|||
justify-content: space-between; |
|||
background-color: rgba(13,20,39,0.5); |
|||
.digital-flop-item { |
|||
flex: 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: center; |
|||
align-items: center; |
|||
border-left: 3px solid rgb(6, 30, 93); |
|||
border-right: 3px solid rgb(6, 30, 93); |
|||
} |
|||
|
|||
.digital-flop-title { |
|||
font-size: 24px; |
|||
margin:20px 20px 10px 20px; |
|||
} |
|||
|
|||
.digital-flop { |
|||
display: flex; |
|||
text-align: center; |
|||
} |
|||
|
|||
.unit { |
|||
margin-left: 10px; |
|||
display: flex; |
|||
align-items: flex-end; |
|||
box-sizing: border-box; |
|||
padding-bottom: 13px; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,103 @@ |
|||
#index { |
|||
color: #d3d6dd; |
|||
width: 1920px; |
|||
height: 1080px; |
|||
position: absolute; |
|||
top: 50%; |
|||
left: 50%; |
|||
transform: translate(-50%, -50%); |
|||
transform-origin: left top; |
|||
overflow: hidden; |
|||
.bg { |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 16px 16px 0 16px; |
|||
background-image: url("../../../../assets/image/datav_bg2.png"); |
|||
background-size: cover; |
|||
background-position: center center; |
|||
} |
|||
|
|||
.row_1 { |
|||
display: flex; |
|||
.dv-dec-10, |
|||
.dv-dec-10-s { |
|||
width: 33.3%; |
|||
height: 5px; |
|||
} |
|||
.dv-dec-10-s { |
|||
transform: rotateY(180deg); |
|||
} |
|||
.middle { |
|||
display: flex; |
|||
.dv-dec-8 { |
|||
width: 200px; |
|||
height: 30px; |
|||
} |
|||
.title { |
|||
position: relative; |
|||
width: 500px; |
|||
height: 40px; |
|||
text-align: center; |
|||
background-size: cover; |
|||
background-repeat: no-repeat; |
|||
line-height: 40px; |
|||
.title-text { |
|||
font-size: 36px; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 50%; |
|||
transform: translate(-50%); |
|||
} |
|||
.dv-dec-6 { |
|||
position: absolute; |
|||
bottom: -30px; |
|||
left: 50%; |
|||
width: 250px; |
|||
height: 8px; |
|||
transform: translate(-50%); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.row_2 { |
|||
display: flex; |
|||
margin-top: 42px; |
|||
} |
|||
|
|||
.row_3 { |
|||
display: flex; |
|||
margin-top: 20px; |
|||
.left { |
|||
width: 300px; |
|||
height: 826px; |
|||
} |
|||
.right { |
|||
flex: 1; |
|||
height: 820px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
.r_top { |
|||
display: flex; |
|||
flex: 1; |
|||
.top_1, .top_2, .top_3 { |
|||
height: 400px; |
|||
} |
|||
.top_1 { |
|||
width: 480px; |
|||
} |
|||
.top_2 { |
|||
width: 325px; |
|||
} |
|||
.top_3 { |
|||
width: 772px; |
|||
} |
|||
} |
|||
.r_bottom { |
|||
display: flex; |
|||
flex: 1; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,466 @@ |
|||
<template> |
|||
<div id="index" ref="appRef"> |
|||
<div class="bg"> |
|||
<dv-loading v-if="loading">加载中</dv-loading> |
|||
<div v-else class="host-body"> |
|||
<!-- 第一行 --> |
|||
<div class="row_1"> |
|||
<dv-decoration-10 class="dv-dec-10" /> |
|||
<div class="middle"> |
|||
<dv-decoration-8 class="dv-dec-8" :color="['#568aea', '#000000']" /> |
|||
<div class="title"> |
|||
<span class="title-text">综合数据监控</span> |
|||
<dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']"></dv-decoration-6> |
|||
</div> |
|||
<dv-decoration-8 class="dv-dec-8" :reverse="true" :color="['#568aea', '#000000']" /> |
|||
</div> |
|||
<dv-decoration-10 class="dv-dec-10-s" /> |
|||
</div> |
|||
|
|||
<!-- 第二行 --> |
|||
<div class="row_2"> |
|||
<digital-flop /> |
|||
</div> |
|||
|
|||
<!-- 第三行 --> |
|||
<div class="row_3"> |
|||
<div class="left"> |
|||
<ranking-board :data="rankingBoardData" :title="'团队进度'" /> |
|||
</div> |
|||
<div class="right"> |
|||
<div class="r_top"> |
|||
<div class="top_1"> |
|||
<rose-chart :data="roseChartData" :title="'资金分布'"/> |
|||
</div> |
|||
<div class="top_2"> |
|||
<water-level-chart :data="waterLevelChartData" :title="'计划资金累计完成情况'"/> |
|||
</div> |
|||
<div class="top_3"> |
|||
<scroll-board :data="scrollBoardData" :title="'动态'" :header="['时间','操作人','动作','备注']"/> |
|||
</div> |
|||
</div> |
|||
<div class="r_bottom"> |
|||
<cards :data="cardsData" :title="'阶段计划'" /> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
</div> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import digitalFlop from './digitalFlop'; |
|||
import drawMixin from "../utils/drawMixin"; |
|||
import rankingBoard from './rankingBoard' |
|||
import roseChart from './roseChart' |
|||
import waterLevelChart from './waterLevelChart' |
|||
import scrollBoard from './scrollBoard' |
|||
import cards from './cards' |
|||
import { listOption } from '@/api/mdp/meta/itemOption';//下拉框数据查询 |
|||
import { listXmProjectState } from '@/api/xm/core/xmProjectState'; |
|||
import { listXmGroupState} from '@/api/xm/core/xmGroupState'; |
|||
import { listXmProjectTaskTypeState } from '@/api/xm/core/xmProjectTaskTypeState'; |
|||
import { listXmRecord } from '@/api/xm/core/xmRecord'; |
|||
import { listXmPhase } from '@/api/xm/core/xmPhase'; |
|||
import { mapGetters } from 'vuex' |
|||
|
|||
import Vue from 'vue' |
|||
import dataV from '@jiaminghi/data-view' |
|||
Vue.use(dataV) |
|||
|
|||
export default { |
|||
mixins: [ drawMixin ], |
|||
components: {digitalFlop, rankingBoard, roseChart, waterLevelChart, scrollBoard, cards}, |
|||
computed: { |
|||
|
|||
...mapGetters([ |
|||
'userInfo' |
|||
]), |
|||
digitalFlopData(){ |
|||
if(!this.xmProjectState){ |
|||
return null; |
|||
} |
|||
var digitalFlopData = [ |
|||
{ |
|||
title: '累计金额', |
|||
number: { |
|||
number: [(this.floatValue(this.xmProjectState.totalBudgetNouserAmount) + this.floatValue(this.xmProjectState.totalBudgetIuserAmount) + this.floatValue(this.xmProjectState.totalBudgetOuserAmount))/10000], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '万元' |
|||
}, |
|||
{ |
|||
title: '发布总任务数', |
|||
number: { |
|||
number: [this.xmProjectState.totalTaskCnt ], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '项目进度', |
|||
number: { |
|||
number: [this.xmProjectState.totalProgress ], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '%' |
|||
}, |
|||
{ |
|||
title: '参与人数', |
|||
number: { |
|||
number: [this.xmProjectState.totalStaffCnt], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '人' |
|||
}, |
|||
{ |
|||
title: '客户', |
|||
number: { |
|||
number: [this.xmProjectState.productCnt], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '需求', |
|||
number: { |
|||
number: [this.xmProjectState.menuCnt], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '产品', |
|||
number: { |
|||
number: [this.xmProjectState.productCnt], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#40faee', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '测试用例', |
|||
number: { |
|||
number: [this.xmProjectState.testCases], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#4d99fc', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
}, |
|||
{ |
|||
title: '迭代', |
|||
number: { |
|||
number: [this.xmProjectState.iterationCnt], |
|||
content: '{nt}', |
|||
textAlign: 'right', |
|||
style: { |
|||
fill: '#f46827', |
|||
fontWeight: 'bold' |
|||
} |
|||
}, |
|||
unit: '个' |
|||
} |
|||
] |
|||
return digitalFlopData; |
|||
}, |
|||
rankingBoardData(){ |
|||
if( !this.xmGroupStates || this.xmGroupStates.length==0 ){ |
|||
return []; |
|||
} |
|||
var rankingBoardData=this.xmGroupStates.map(i=>{ |
|||
return {name:i.groupName,value:i.finishRate+'%'} |
|||
}) |
|||
return rankingBoardData |
|||
}, |
|||
roseChartData(){ |
|||
var taskTypeList=this.options.taskType |
|||
if(this.xmProjectTaskTypeStates && this.xmProjectTaskTypeStates.length>0){ |
|||
var xmProjectTaskTypeStates=this.xmProjectTaskTypeStates.filter(i=>i.planAmount>0); |
|||
var roseChartData=xmProjectTaskTypeStates.map(i=>{ |
|||
|
|||
if(!taskTypeList || taskTypeList.length==0){ |
|||
return { |
|||
name:i.taskType?i.taskType:'其它', |
|||
value:i.planAmount?i.planAmount:0 |
|||
} |
|||
}else{ |
|||
var taskTypes=taskTypeList.filter(k=>k.optionValue==i.taskType) |
|||
if(taskTypes && taskTypes.length>0){ |
|||
var taskType=taskTypes[0] |
|||
return { |
|||
name:taskType.optionName, |
|||
value:i.planAmount?i.planAmount:0 |
|||
} |
|||
}else{ |
|||
return { |
|||
name:i.taskType?i.taskType:'其它', |
|||
value:i.planAmount?i.planAmount:0 |
|||
} |
|||
} |
|||
} |
|||
}) |
|||
return roseChartData |
|||
}else{ |
|||
return null; |
|||
} |
|||
|
|||
}, |
|||
waterLevelChartData(){ |
|||
if(this.xmProjectState){ |
|||
var data={} |
|||
var allAmount=this.floatValue(this.xmProjectState.totalBudgetNouserAmount) + this.floatValue(this.xmProjectState.totalBudgetIuserAmount) + this.floatValue(this.xmProjectState.totalBudgetOuserAmount); |
|||
data.finishNum= this.floatValue(this.xmProjectState.totalCostNouserAmount) + this.floatValue(this.xmProjectState.totalCostIuserAmount) +this.floatValue(this.xmProjectState.totalCostOuserAmount) |
|||
data.finishPercent= parseFloat(data.finishNum/allAmount * 100).toFixed(0) |
|||
return data; |
|||
}else{ |
|||
return null; |
|||
} |
|||
}, |
|||
scrollBoardData(){ |
|||
if(this.xmRecords && this.xmRecords.length>0){ |
|||
var data = this.xmRecords.map(i=>{ |
|||
return [i.operTime,i.operUsername,i.action,i.remarks] |
|||
}) |
|||
return data; |
|||
}else{ |
|||
return null; |
|||
} |
|||
}, |
|||
cardsData(){ |
|||
if(this.xmPhases && this.xmPhases.length>0){ |
|||
var totalPlanWorkload=this.floatValue(this.xmProjectState.totalPlanWorkload) |
|||
return this.xmPhases.map(i=>{ |
|||
i.totalPlanWorkload=totalPlanWorkload |
|||
return i; |
|||
}) |
|||
}else{ |
|||
return null; |
|||
} |
|||
} |
|||
|
|||
}, |
|||
data () { |
|||
return { |
|||
loading: true, |
|||
filters:{ |
|||
projectId:null, |
|||
}, |
|||
xmProjectState:null, |
|||
xmGroupStates:[], |
|||
xmProjectTaskTypeStates:[], |
|||
xmRecords:[], |
|||
xmPhases:[], |
|||
options:{ |
|||
taskType:[], |
|||
}, |
|||
xmRecordPageInfo:{//分页数据 |
|||
total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。 |
|||
pageSize:20,//每页数据 |
|||
count:false,//是否需要重新计算总记录数 |
|||
pageNum:1,//当前页码、从1开始计算 |
|||
orderFields:["oper_time"],//排序列 如 ['sex','student_id']，必须为数据库字段 |
|||
orderDirs:["desc"]//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc'] |
|||
}, |
|||
|
|||
xmGroupStatePageInfo:{//分页数据 |
|||
total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。 |
|||
pageSize:5,//每页数据 |
|||
count:false,//是否需要重新计算总记录数 |
|||
pageNum:1,//当前页码、从1开始计算 |
|||
orderFields:["calc_time"],//排序列 如 ['sex','student_id']，必须为数据库字段 |
|||
orderDirs:["desc"]//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc'] |
|||
}, |
|||
|
|||
|
|||
xmPhasePageInfo:{//分页数据 |
|||
total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。 |
|||
pageSize:5,//每页数据 |
|||
count:false,//是否需要重新计算总记录数 |
|||
pageNum:1,//当前页码、从1开始计算 |
|||
orderFields:["calc_time"],//排序列 如 ['sex','student_id']，必须为数据库字段 |
|||
orderDirs:["desc"]//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc'] |
|||
}, |
|||
} |
|||
}, |
|||
methods: { |
|||
getXmProjectState(){ |
|||
var params = { |
|||
projectId:this.filters.projectId |
|||
} |
|||
listXmProjectState(params).then(res=>{ |
|||
var tips = res.data.tips; |
|||
if(tips.isOk){ |
|||
if(res.data.data.length>0){ |
|||
this.xmProjectState=res.data.data[0] |
|||
} |
|||
setTimeout(() => { |
|||
this.loading = false; |
|||
}, 100); |
|||
} |
|||
}); |
|||
}, |
|||
getXmGroupStates(){ |
|||
let params = { |
|||
pageSize: this.xmGroupStatePageInfo.pageSize, |
|||
pageNum: this.xmGroupStatePageInfo.pageNum, |
|||
total: this.xmGroupStatePageInfo.total, |
|||
count:this.xmGroupStatePageInfo.count |
|||
}; |
|||
if(this.xmGroupStatePageInfo.orderFields!=null && this.xmGroupStatePageInfo.orderFields.length>0){ |
|||
let orderBys=[]; |
|||
for(var i=0;i<this.xmGroupStatePageInfo.orderFields.length;i++){ |
|||
orderBys.push(this.xmGroupStatePageInfo.orderFields[i]+" "+this.xmGroupStatePageInfo.orderDirs[i]) |
|||
} |
|||
params.orderBy= orderBys.join(",") |
|||
} |
|||
params.branchId=this.userInfo.branchId |
|||
params.projectId=this.filters.projectId |
|||
listXmGroupState(params).then(res=>{ |
|||
var tips = res.data.tips; |
|||
if(tips.isOk){ |
|||
if(res.data.data.length>0){ |
|||
this.xmGroupStates=res.data.data |
|||
} |
|||
} |
|||
}); |
|||
}, |
|||
|
|||
getXmProjectTaskTypeStates(){ |
|||
var params = { |
|||
} |
|||
params.projectId=this.filters.projectId |
|||
|
|||
listXmProjectTaskTypeState(params).then(res=>{ |
|||
var tips = res.data.tips; |
|||
if(tips.isOk){ |
|||
if(res.data.data.length>0){ |
|||
this.xmProjectTaskTypeStates=res.data.data |
|||
} |
|||
} |
|||
}); |
|||
},//获取列表 XmRecord xm_record |
|||
getXmRecords() { |
|||
let params = { |
|||
pageSize: this.xmRecordPageInfo.pageSize, |
|||
pageNum: this.xmRecordPageInfo.pageNum, |
|||
total: this.xmRecordPageInfo.total, |
|||
count:this.xmRecordPageInfo.count |
|||
}; |
|||
params.projectId=this.filters.projectId |
|||
|
|||
if(this.xmRecordPageInfo.orderFields!=null && this.xmRecordPageInfo.orderFields.length>0){ |
|||
let orderBys=[]; |
|||
for(var i=0;i<this.xmRecordPageInfo.orderFields.length;i++){ |
|||
orderBys.push(this.xmRecordPageInfo.orderFields[i]+" "+this.xmRecordPageInfo.orderDirs[i]) |
|||
} |
|||
params.orderBy= orderBys.join(",") |
|||
} |
|||
listXmRecord(params).then((res) => { |
|||
var tips=res.data.tips; |
|||
if(tips.isOk){ |
|||
this.xmRecordPageInfo.total = res.data.total; |
|||
this.xmRecordPageInfo.count=false; |
|||
this.xmRecords = res.data.data; |
|||
}else{ |
|||
} |
|||
}) ; |
|||
}, |
|||
//获取列表 XmPhase 功能状态表,无需前端维护，所有数据由汇总统计得出 |
|||
getXmPhases() { |
|||
let params = { |
|||
pageSize: this.xmPhasePageInfo.pageSize, |
|||
pageNum: this.xmPhasePageInfo.pageNum, |
|||
total: this.xmPhasePageInfo.total, |
|||
count:this.xmPhasePageInfo.count |
|||
}; |
|||
if(this.xmPhasePageInfo.orderFields!=null && this.xmPhasePageInfo.orderFields.length>0){ |
|||
let orderBys=[]; |
|||
for(var i=0;i<this.xmPhasePageInfo.orderFields.length;i++){ |
|||
orderBys.push(this.xmPhasePageInfo.orderFields[i]+" "+this.xmPhasePageInfo.orderDirs[i]) |
|||
} |
|||
params.orderBy= orderBys.join(",") |
|||
} |
|||
|
|||
params.projectId=this.filters.projectId |
|||
listXmPhase(params).then((res) => { |
|||
var tips=res.data.tips; |
|||
if(tips.isOk){ |
|||
this.xmPhasePageInfo.total = res.data.total; |
|||
this.xmPhasePageInfo.count=false; |
|||
this.xmPhases = res.data.data; |
|||
}else{ |
|||
} |
|||
}) ; |
|||
}, |
|||
floatValue(value){ |
|||
if(!value){ |
|||
return 0.0; |
|||
}else{ |
|||
return value |
|||
} |
|||
} |
|||
}, |
|||
|
|||
mounted(){ |
|||
if(this.$route.params){ |
|||
this.filters.projectId=this.$route.params.projectId; |
|||
} |
|||
|
|||
this.getXmProjectState(); |
|||
this.getXmGroupStates(); |
|||
this.getXmProjectTaskTypeStates(); |
|||
this.getXmRecords(); |
|||
this.getXmPhases(); |
|||
|
|||
listOption([{categoryId:'all',itemCode:'taskType'}] ).then(res=>{ |
|||
if(res.data.tips.isOk){ |
|||
this.options=res.data.data |
|||
} |
|||
}); |
|||
}, |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
@import './index.less'; |
|||
</style> |
|||
@ -0,0 +1,102 @@ |
|||
<template> |
|||
<div class="ranking-board"> |
|||
<span class="ranking-board-title">{{title}}</span> |
|||
<dv-scroll-ranking-board :config="config"/> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'RankingBoard', |
|||
props:['data','title'], |
|||
computed:{ |
|||
config(){ |
|||
if( !this.data || this.data.length==0){ |
|||
return this.defaultConfig; |
|||
}else{ |
|||
var data=this.data; |
|||
data.forEach(element => { |
|||
element.name = `<span style="font-size:16px;">${element.name}</span>` |
|||
}); |
|||
var config={ |
|||
data:data, |
|||
carousel: "page" |
|||
} |
|||
return config |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
defaultConfig: { |
|||
data: [ |
|||
{ |
|||
name: '商城项目', |
|||
value: '30%' |
|||
}, |
|||
{ |
|||
name: '营销项目', |
|||
value: '40%' |
|||
}, |
|||
{ |
|||
name: '支付项目', |
|||
value: '50%' |
|||
}, |
|||
{ |
|||
name: '短信项目', |
|||
value: '60%' |
|||
}, |
|||
{ |
|||
name: '党建项目', |
|||
value: '50%' |
|||
}, |
|||
{ |
|||
name: '协同办公项目', |
|||
value: '90%' |
|||
}, |
|||
{ |
|||
name: '即聊项目', |
|||
value: '40%' |
|||
}, |
|||
{ |
|||
name: '审计项目', |
|||
value: '60%' |
|||
}, |
|||
{ |
|||
name: '溯源项目', |
|||
value: '90%' |
|||
} |
|||
], |
|||
rowNum: 9, |
|||
|
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less" scoped> |
|||
.ranking-board { |
|||
width: 300px; |
|||
height: 100%; |
|||
box-shadow: 0 0 3px blue; |
|||
display: flex; |
|||
flex-direction: column; |
|||
background-color: rgba(10, 13, 28, 0.5); |
|||
border-top: 2px solid rgba(1, 153, 209, .5); |
|||
box-sizing: border-box; |
|||
padding: 0px 30px; |
|||
|
|||
.ranking-board-title { |
|||
height: 50px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 20px; |
|||
font-weight: 700; |
|||
} |
|||
|
|||
.dv-scroll-ranking-board { |
|||
flex: 1; |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,176 @@ |
|||
<template> |
|||
<div class="rose-chart"> |
|||
<div class="rose-chart-title">{{title}}</div> |
|||
<Echart |
|||
:options="option" |
|||
id="dv_roseChart" |
|||
height="340px" |
|||
width="100%" |
|||
></Echart> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
import Echart from '../common' |
|||
export default { |
|||
name: 'RoseChart1', |
|||
components: {Echart}, |
|||
props:['data','title'], |
|||
computed:{ |
|||
option(){ |
|||
if( !this.data || this.data.length==0){ |
|||
return this.defaultOption; |
|||
}else{ |
|||
this.createData() |
|||
let tempData = this.data.slice(0, 5); |
|||
let obj = {name: '其它', value : 0}; |
|||
let v = 0; |
|||
this.data.forEach((element,index) => { |
|||
if(index > 5) { |
|||
v += element.value; |
|||
} |
|||
}); |
|||
obj.value = v; |
|||
if(obj.value > 0) { |
|||
tempData.push(obj); |
|||
} |
|||
var option = JSON.parse(JSON.stringify(this.options)) |
|||
option.series[0].data = tempData |
|||
option.legend.data = tempData |
|||
return option |
|||
} |
|||
} |
|||
|
|||
|
|||
}, |
|||
data () { |
|||
return { |
|||
defaultOption: {}, |
|||
options : { |
|||
color: [ |
|||
"#37a2da", |
|||
"#32c5e9", |
|||
"#9fe6b8", |
|||
"#ffdb5c", |
|||
"#ff9f7f", |
|||
"#fb7293", |
|||
"#e7bcf3" |
|||
], |
|||
tooltip: { |
|||
trigger: "item", |
|||
formatter: "{b} : {c} ({d}%)" |
|||
}, |
|||
legend: { |
|||
orient: "horizontal", |
|||
icon: "circle", |
|||
bottom: 0, |
|||
x: "center", |
|||
data: |
|||
[ |
|||
{ value: 40, name: 'rose 1' }, |
|||
{ value: 38, name: 'rose 2' }, |
|||
{ value: 32, name: 'rose 3' }, |
|||
{ value: 30, name: 'rose 4' }, |
|||
{ value: 28, name: 'rose 5' }, |
|||
], |
|||
textStyle: { |
|||
color: "#fff", |
|||
fontSize: 18 |
|||
} |
|||
}, |
|||
calculable: true, |
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
radius: [35, 80], |
|||
center: ['50%', '45%'], |
|||
roseType: 'area', |
|||
data: [ |
|||
{ value: 40, name: 'rose 1' }, |
|||
{ value: 38, name: 'rose 2' }, |
|||
{ value: 32, name: 'rose 3' }, |
|||
{ value: 30, name: 'rose 4' }, |
|||
{ value: 28, name: 'rose 5' }, |
|||
] |
|||
} |
|||
] |
|||
} |
|||
} |
|||
}, |
|||
methods: { |
|||
createData () { |
|||
const { randomExtend } = this |
|||
this.defaultOption = { |
|||
series: [ |
|||
{ |
|||
type: 'pie', |
|||
radius: '50%', |
|||
roseSort: false, |
|||
data: [ |
|||
{ name: '需求', value: randomExtend(40, 70) }, |
|||
{ name: '开发', value: randomExtend(20, 30) }, |
|||
{ name: '测试', value: randomExtend(10, 50) }, |
|||
{ name: '设计', value: randomExtend(5, 20) }, |
|||
{ name: '运营', value: randomExtend(40, 50) }, |
|||
{ name: '客服', value: randomExtend(20, 30) }, |
|||
{ name: '管理', value: randomExtend(5, 10) }, |
|||
{ name: '产品', value: randomExtend(20, 35) }, |
|||
{ name: '运维', value: randomExtend(5, 10) } |
|||
], |
|||
insideLabel: { |
|||
show: false |
|||
}, |
|||
outsideLabel: { |
|||
formatter: '{name} {percent}%', |
|||
labelLineEndLength: 20, |
|||
style: { |
|||
fill: '#fff' |
|||
}, |
|||
labelLineStyle: { |
|||
stroke: '#fff' |
|||
} |
|||
}, |
|||
roseType: true |
|||
} |
|||
], |
|||
color: ['#da2f00', '#fa3600', '#ff4411', '#ff724c', '#541200', '#801b00', '#a02200', '#5d1400', '#b72700'] |
|||
} |
|||
}, |
|||
randomExtend (minNum, maxNum) { |
|||
if (arguments.length === 1) { |
|||
return parseInt(Math.random() * minNum + 1, 10) |
|||
} else { |
|||
return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10) |
|||
} |
|||
} |
|||
}, |
|||
mounted () { |
|||
// const { createData } = this |
|||
// createData() |
|||
// setInterval(createData, 30000) |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.rose-chart { |
|||
width: 450px; |
|||
height: 400px; |
|||
margin: 0 15px 0 15px; |
|||
background-color: rgba(6, 30, 93, 0.5); |
|||
border-top: 2px solid rgba(1, 153, 209, .5); |
|||
box-sizing: border-box; |
|||
.rose-chart-title { |
|||
height: 50px; |
|||
font-weight: bold; |
|||
text-indent: 20px; |
|||
font-size: 20px; |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.dv-charts-container { |
|||
height: calc(~"100% - 20px"); |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,66 @@ |
|||
<template> |
|||
<div class="scroll-board"> |
|||
<dv-scroll-board :config="myConfig" /> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'ScrollBoard1', |
|||
props:['data','header'], |
|||
computed:{ |
|||
myConfig(){ |
|||
if(this.data && this.data.length>0){ |
|||
var config=JSON.parse(JSON.stringify(this.config)); |
|||
this.data.forEach(d => { |
|||
d.forEach((text, index) => { |
|||
d[index] = `<span style="font-size:16px;">${text}</span>`; |
|||
}); |
|||
}); |
|||
config.header=this.header |
|||
config.data=this.data |
|||
return config; |
|||
}else{ |
|||
return this.config |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
config: { |
|||
header: ['时间', '项目', '金额', '变动情况'], |
|||
data: [ |
|||
['2019-07-01 19:25:00', '唛萌项目管理工具', '500万元', '立项'], |
|||
['2019-07-02 17:25:00', '唛盟商城项目', '300万元', '通过验收'], |
|||
['2019-07-03 16:25:00', '唛萌营销项目', '200万元', '测试完成'], |
|||
['2019-07-04 15:25:00', '组织管理系统项目', '100万', '竞标中'], |
|||
['2019-07-05 14:25:00', '支付管理系统', '700万元', '完成第一里程碑'], |
|||
['2019-07-06 13:25:00', '溯源系统', '300万元', '系统对接完成'], |
|||
['2019-07-07 12:25:00', '智能办公系统', '400万元', '试运行中'], |
|||
['2019-07-08 11:25:00', '数据可视化系统', '600万元', '开发中'], |
|||
['2019-07-09 10:25:00', '党建系统', '500万元', '上线成功'], |
|||
['2019-07-10 09:25:00', '智慧社区系统', '300万元', '运营中'] |
|||
], |
|||
index: true, |
|||
columnWidth: [50, 150, 100,200,200], |
|||
align: ['center'], |
|||
rowNum: 7, |
|||
headerBGC: '#1981f6', |
|||
headerHeight: 45, |
|||
oddRowBGC: 'rgba(0, 44, 81, 0.8)', |
|||
evenRowBGC: 'rgba(10, 29, 50, 0.8)', |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.scroll-board { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
margin-left: 10px; |
|||
height: 100%; |
|||
overflow: hidden; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,109 @@ |
|||
<template> |
|||
<div class="water-level-chart"> |
|||
<div class="water-level-chart-title">{{title}}</div> |
|||
|
|||
<div class="water-level-chart-details"> |
|||
累计完成<span>{{myData.finishNum}}</span>元 |
|||
</div> |
|||
|
|||
<div class="chart-container"> |
|||
<dv-water-level-pond :config="myData.config" /> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
name: 'WaterLevelChart1', |
|||
props:['data','title'], |
|||
computed:{ |
|||
myData(){ |
|||
if(this.data){ |
|||
|
|||
var config=JSON.parse(JSON.stringify( this.config)) |
|||
config.data=[this.data.finishPercent] |
|||
return { |
|||
finishNum:this.data.finishNum, |
|||
config:config |
|||
} |
|||
} else{ |
|||
return { |
|||
finishNum:12350, |
|||
config:this.config |
|||
} |
|||
} |
|||
} |
|||
}, |
|||
data () { |
|||
return { |
|||
config: { |
|||
data: [45], |
|||
shape: 'round', |
|||
waveHeight: 25, |
|||
waveNum: 2 |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="less"> |
|||
.water-level-chart { |
|||
width: 100%; |
|||
height: 100%; |
|||
box-sizing: border-box; |
|||
margin-right: 20px; |
|||
background-color: rgba(6, 30, 93, 0.5); |
|||
border-top: 2px solid rgba(1, 153, 209, .5); |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
.water-level-chart-title { |
|||
font-weight: bold; |
|||
height: 50px; |
|||
display: flex; |
|||
align-items: center; |
|||
font-size: 20px; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.water-level-chart-details { |
|||
height: 15%; |
|||
display: flex; |
|||
justify-content: center; |
|||
font-size: 17px; |
|||
align-items: flex-end; |
|||
|
|||
span { |
|||
font-size: 35px; |
|||
font-weight: bold; |
|||
color: #58a1ff; |
|||
margin: 0 5px; |
|||
margin-bottom: -5px; |
|||
} |
|||
} |
|||
|
|||
.chart-container { |
|||
flex: 1; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.dv-water-pond-level { |
|||
max-width: 90%; |
|||
width: 200px; |
|||
height: 200px; |
|||
border: 10px solid #19c3eb; |
|||
border-radius: 50%; |
|||
|
|||
ellipse { |
|||
stroke: transparent !important; |
|||
} |
|||
|
|||
text { |
|||
font-size: 40px; |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
@ -0,0 +1,59 @@ |
|||
// 屏幕适配 mixin 函数
|
|||
|
|||
// * 默认缩放值
|
|||
const scale = { |
|||
width: '1', |
|||
height: '1', |
|||
} |
|||
|
|||
// * 设计稿尺寸（px）
|
|||
const baseWidth = 1920 |
|||
const baseHeight = 1080 |
|||
|
|||
// * 需保持的比例（默认1.77778）
|
|||
// const baseProportion = parseFloat((baseWidth / baseHeight).toFixed(5))
|
|||
const baseProportion = 1.91 |
|||
|
|||
export default { |
|||
data() { |
|||
return { |
|||
// * 定时函数
|
|||
drawTiming: null |
|||
} |
|||
}, |
|||
mounted () { |
|||
this.calcRate() |
|||
window.addEventListener('resize', this.resize) |
|||
}, |
|||
beforeDestroy () { |
|||
window.removeEventListener('resize', this.resize) |
|||
}, |
|||
methods: { |
|||
calcRate () { |
|||
console.log(window.innerWidth, window.innerHeight); |
|||
const appRef = this.$refs["appRef"] |
|||
if (!appRef) return |
|||
// 当前宽高比
|
|||
const currentRate = parseFloat((window.innerWidth / window.innerHeight).toFixed(5)) |
|||
if (appRef) { |
|||
if (currentRate > baseProportion) { |
|||
// 表示更宽
|
|||
scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5) |
|||
scale.height = (window.innerHeight / baseHeight).toFixed(5) |
|||
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` |
|||
} else { |
|||
// 表示更高
|
|||
scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5) |
|||
scale.width = (window.innerWidth / baseWidth).toFixed(5) |
|||
appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` |
|||
} |
|||
} |
|||
}, |
|||
resize () { |
|||
clearTimeout(this.drawTiming) |
|||
this.drawTiming = setTimeout(() => { |
|||
this.calcRate() |
|||
}, 200) |
|||
} |
|||
}, |
|||
} |
|||
@ -0,0 +1,51 @@ |
|||
/** |
|||
* @param {Function} fn 防抖函数 |
|||
* @param {Number} delay 延迟时间 |
|||
*/ |
|||
export function debounce(fn, delay) { |
|||
var timer; |
|||
return function () { |
|||
var context = this; |
|||
var args = arguments; |
|||
clearTimeout(timer); |
|||
timer = setTimeout(function () { |
|||
fn.apply(context, args); |
|||
}, delay); |
|||
}; |
|||
} |
|||
|
|||
/** |
|||
* @param {date} time 需要转换的时间 |
|||
* @param {String} fmt 需要转换的格式 如 yyyy-MM-dd、yyyy-MM-dd HH:mm:ss |
|||
*/ |
|||
export function formatTime(time, fmt) { |
|||
if (!time) return ''; |
|||
else { |
|||
const date = new Date(time); |
|||
const o = { |
|||
'M+': date.getMonth() + 1, |
|||
'd+': date.getDate(), |
|||
'H+': date.getHours(), |
|||
'm+': date.getMinutes(), |
|||
's+': date.getSeconds(), |
|||
'q+': Math.floor((date.getMonth() + 3) / 3), |
|||
S: date.getMilliseconds(), |
|||
}; |
|||
if (/(y+)/.test(fmt)) |
|||
fmt = fmt.replace( |
|||
RegExp.$1, |
|||
(date.getFullYear() + '').substr(4 - RegExp.$1.length) |
|||
); |
|||
for (const k in o) { |
|||
if (new RegExp('(' + k + ')').test(fmt)) { |
|||
fmt = fmt.replace( |
|||
RegExp.$1, |
|||
RegExp.$1.length === 1 |
|||
? o[k] |
|||
: ('00' + o[k]).substr(('' + o[k]).length) |
|||
); |
|||
} |
|||
} |
|||
return fmt; |
|||
} |
|||
} |
|||
1137
src/views/xm/XmOverview2.vue
File diff suppressed because it is too large
View File
File diff suppressed because it is too large
View File
Write
Preview
Loading…
Cancel
Save
Reference in new issue