<template>
|
<div class='app'>
|
|
<div class='item'>
|
<h4 v-if='data.length>0' :style="{ marginBottom: '20px' }" style='text-align: center'> 项目工时比例 </h4>
|
<div class='chart-box'>
|
<Pie style='width: 1000px' :data-source='data' @click='pieClick' />
|
</div>
|
</div>
|
<div v-if='project' class='item'>
|
<a-divider dashed />
|
<h4 :style="{ marginBottom: '20px' }" style='text-align: center'> {{ project }} </h4>
|
<div class='chart-box'>
|
<Pie style='width: 1000px' :data-source='itemData[project]' />
|
</div>
|
</div>
|
|
</div>
|
</template>
|
|
<script>
|
|
import Pie from '@comp/chart/Pie'
|
import { filterMultiDictText, initDictOptions } from '@comp/dict/JDictSelectUtil'
|
|
/*
|
数据样本
|
const sourceData = [
|
{ item: '事例一', count: 40 },
|
{ item: '事例二', count: 21 },
|
{ item: '事例三', count: 17 },
|
{ item: '事例四', count: 13 },
|
{ item: '事例五', count: 9 }
|
];
|
*/
|
|
export default {
|
name: 'StatisticsPie',
|
components: { Pie },
|
props: {
|
dataSource: {
|
type: Array,
|
default: []
|
}
|
|
},
|
watch: {
|
dataSource: {
|
immediate: true,
|
handler() {
|
if (this.dataSource.length==0) {
|
|
}
|
},
|
},
|
},
|
data() {
|
return {
|
userDictOptions: [],
|
project: ''
|
}
|
},
|
created() {
|
this.initDictConfig()
|
},
|
mounted() {
|
// 项目详情饼图默认第一个数据
|
if (this.data) {
|
//this.project = this.data[0].item
|
}
|
},
|
methods: {
|
initDictConfig() {
|
//初始化字典 - 性别
|
initDictOptions('sys_user,realname,username').then((res) => {
|
if (res.success) {
|
this.$set(this.userDictOptions, 'username', res.result)
|
}
|
})
|
|
},
|
getDictText(text) {
|
return filterMultiDictText(this.userDictOptions['username'], text)
|
},
|
pieClick(event, chart) {
|
//
|
if (!event.data || !event.data.point || !event.data.point.item) return
|
let selectPro = event.data.point.item
|
if (!selectPro) return
|
this.project = selectPro
|
}
|
},
|
computed: {
|
//所有项目工时统计
|
data() {
|
if (!this.dataSource) return []
|
//剔除合计数据
|
let data = this.dataSource.filter((i) => i.xm != 'hj')
|
let res = data.map(item => {
|
return { item: item.xmName, count: item.hj }
|
})
|
return res
|
|
|
},
|
//每个项目 成员工时的统计
|
itemData() {
|
if (!this.dataSource) return []
|
//剔除合计数据
|
let data = this.dataSource.filter((i) => i.xm != 'hj')
|
let res = {}
|
data.forEach(item => {
|
let row = []
|
for (var key in item) {
|
//过滤不需要统计列
|
if (key == 'hj' || key == 'xm' || key == 'xmName') continue
|
let col = {}
|
col.item = this.getDictText(key),
|
col.count = item[key]
|
row.push(col)
|
}
|
res[item.xmName] = row
|
})
|
return res
|
}
|
|
}
|
}
|
</script>
|
|
<style lang='less' scoped>
|
.app {
|
.item {
|
.chart-box {
|
width: 100%;
|
display: flex;
|
justify-content: center;
|
}
|
|
.title {
|
width: 100%;
|
text-align: center;
|
}
|
}
|
|
|
}
|
</style>
|
