<template>
|
<el-row justify="space-between">
|
<el-col :span="24">
|
<el-row justify="space-between" class="p-h-16">
|
<el-statistic title="场景数" :value="sceneNum" />
|
<el-statistic title="问题/整改" :value="proNum + '/' + changePassNum" />
|
<el-statistic title="单场景问题均值" :value="proEachSceneNum" />
|
<!-- <el-statistic title="整改数" :value="changeNum" /> -->
|
<!-- <el-statistic title="整改通过数" :value="changePassNum" /> -->
|
<!-- <el-statistic title="整改提交率" :value="changePer" /> -->
|
<el-statistic title="整改率/(提交率)" :value="changePassPer + '/' + changePer" />
|
</el-row>
|
<!-- <el-row justify="space-between" class="p-h-16">
|
<el-statistic title="整改通过数" :value="changePassNum" />
|
<el-statistic title="问题整改率" :value="changePer" />
|
<el-statistic title="整改通过率" :value="changePassPer" />
|
</el-row> -->
|
<!-- <el-text size="small">
|
场景数：{{ sceneNum }}，问题总数：{{ proNum }}，单场景问题均值：{{ proEachSceneNum }}，
|
</el-text>
|
<el-text size="small">
|
整改总数：{{ changeNum }}，有效整改数：{{ changePassNum }}，问题整改率：{{
|
changePer
|
}}，有效整改率：{{ changePassPer }}
|
</el-text> -->
|
</el-col>
|
<!-- <el-col :span="6"> -->
|
<!-- <el-statistic title="有效整改率" :value="changePassPer" /> -->
|
<!-- <el-row justify="end">
|
<OptionTime v-model="time"></OptionTime>
|
</el-row> -->
|
<!-- </el-col> -->
|
</el-row>
|
<div ref="echart" class="line-chart"></div>
|
</template>
|
<script>
|
import * as echarts from 'echarts'
|
import { barChartOption } from '@/utils/echart/bar-chart-option'
|
import { useSubtaskStore } from '@/stores/subtask.js'
|
import { mapStores } from 'pinia'
|
import dayjs from 'dayjs'
|
|
export default {
|
data() {
|
return {
|
sceneNum: 0,
|
proNum: 0,
|
changeNum: 0,
|
changePassNum: 0
|
}
|
},
|
computed: {
|
...mapStores(useSubtaskStore),
|
proEachSceneNum() {
|
return Math.round((this.proNum / this.sceneNum) * 10) / 10
|
},
|
changePer() {
|
if (this.proNum > 0) {
|
return Math.round((this.changeNum / this.proNum) * 100) + '%'
|
} else {
|
return '-'
|
}
|
},
|
changePassPer() {
|
if (this.proNum > 0) {
|
return Math.round((this.changePassNum / this.proNum) * 100) + '%'
|
} else {
|
return '-'
|
}
|
}
|
},
|
methods: {
|
fetchData() {
|
this.subtaskStore.getSummaryMap((map) => {
|
this.refresh(map)
|
})
|
},
|
refresh(map) {
|
let sceneNum = 0,
|
proNum = 0,
|
changeNum = 0,
|
changePassNum = 0
|
const chartData = {
|
xAxis: [],
|
yAxis: [
|
{
|
name: '问题数',
|
data: []
|
},
|
{
|
name: '整改数',
|
data: []
|
}
|
]
|
}
|
const list = []
|
for (const key of map.keys()) {
|
const value = map.get(key)
|
list.push({ name: key, value: value })
|
}
|
// 按日期正序排列
|
list
|
.sort(function (a, b) {
|
return b.name - a.name
|
})
|
.forEach((e) => {
|
chartData.xAxis.push(dayjs(e.name).format('DD日'))
|
let pNum = 0,
|
cNum = 0
|
|
e.value.forEach((s) => {
|
sceneNum++
|
pNum += s.proNum
|
cNum += s.changeNum
|
changePassNum += s.changeCheckedNum
|
})
|
chartData.yAxis[0].data.push(pNum)
|
chartData.yAxis[1].data.push(cNum)
|
proNum += pNum
|
changeNum += cNum
|
})
|
const option = barChartOption(chartData)
|
this.echart.setOption(option)
|
|
this.sceneNum = sceneNum
|
this.proNum = proNum
|
this.changeNum = changeNum
|
this.changePassNum = changePassNum
|
}
|
},
|
mounted() {
|
this.echart = echarts.init(this.$refs.echart)
|
this.fetchData()
|
}
|
}
|
</script>
|
<style scoped>
|
.line-chart {
|
/* width: 200px; */
|
height: 200px;
|
}
|
</style>
|
