<template>
|
<div class='app'>
|
<bar-horizontal :data-source='data' :title='title' @click='barClick' :height='height'/>
|
<a-divider dashed />
|
<bar-horizontal :data-source='itemData[project]' :title='subTitle' :height='subHeight' />
|
</div>
|
</template>
|
|
<script>
|
|
import { filterMultiDictText, initDictOptions } from '@comp/dict/JDictSelectUtil'
|
import BarHorizontal from '@comp/chart/BarHorizontal'
|
|
/*
|
数据样本
|
const sourceData = [
|
{ type: '中国', value: 131744 },
|
{ type: '印度', value: 104970 },
|
{ type: '美国', value: 29034 },
|
{ type: '印尼', value: 23489 },
|
{ type: '巴西', value: 18203 },
|
];*/
|
|
export default {
|
name: 'StatisticsBar',
|
components: { BarHorizontal },
|
props: {
|
dataSource: {
|
type: Array,
|
default: []
|
}
|
|
},
|
data() {
|
return {
|
title:'项目工时',
|
subTitle:'',
|
height:0,
|
subHeight:0,
|
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)
|
},
|
barClick(event, chart) {
|
//
|
|
if (!event.data || !event.data.point || !event.data.point.type) return
|
let selectPro = event.data.point.type
|
if (!selectPro) return
|
this.project = selectPro
|
//计算生成柱状图高度
|
this.subHeight = this.itemData[this.project].length * 40 + 100
|
|
//解决一条数据集不显示名字的bug
|
if(this.itemData[this.project].length==1) this.itemData[this.project].push({type:'',value:null})
|
|
this.itemData[this.project].sort(function(a, b) {
|
return a.value - b.value
|
})
|
this.subTitle = this.project
|
}
|
},
|
computed: {
|
//所有项目工时统计
|
data() {
|
if (!this.dataSource) return []
|
//剔除合计数据
|
let data = this.dataSource.filter((i) => i.xm != 'hj')
|
let res = data.map(item => {
|
return { type: item.xmName, value: item.hj }
|
})
|
res.sort(function(a, b) {
|
return a.value - b.value
|
})
|
//解决一条数据集不显示名字的bug
|
if(res.length==1) res.push({type:'',value:null})
|
//计算柱状图高度
|
this.height = res.length * 40 + 100
|
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.type = this.getDictText(key),
|
col.value = 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>
|
