From ff82e86becbd200adabd2ce56fba1f6b3c6c37e1 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期一, 23 六月 2025 23:10:49 +0800
Subject: [PATCH] 2025.6.23
---
src/views/inspection/problem/component/ProblemChangeChart.vue | 145 +++++++++++++++++++++++++++--------------------
1 files changed, 83 insertions(+), 62 deletions(-)
diff --git a/src/views/inspection/problem/component/ProblemChangeChart.vue b/src/views/inspection/problem/component/ProblemChangeChart.vue
index 3e6314d..24675ee 100644
--- a/src/views/inspection/problem/component/ProblemChangeChart.vue
+++ b/src/views/inspection/problem/component/ProblemChangeChart.vue
@@ -1,36 +1,56 @@
<template>
<el-row justify="space-between">
- <el-col :span="18">
- <div>
+ <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 }}锛�
- </div>
- <div>
+ </el-text>
+ <el-text size="small">
鏁存敼鎬绘暟锛歿{ changeNum }}锛屾湁鏁堟暣鏀规暟锛歿{ changePassNum }}锛岄棶棰樻暣鏀圭巼锛歿{
changePer
}}锛屾湁鏁堟暣鏀圭巼锛歿{ changePassPer }}
- </div>
+ </el-text> -->
</el-col>
- <el-col :span="6">
- <el-row justify="end">
+ <!-- <el-col :span="6"> -->
+ <!-- <el-statistic title="鏈夋晥鏁存敼鐜�" :value="changePassPer" /> -->
+ <!-- <el-row justify="end">
<OptionTime v-model="time"></OptionTime>
- </el-row>
- </el-col>
+ </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: 51,
- proNum: 161,
- changeNum: 40,
- changePassNum: 40
+ sceneNum: 0,
+ proNum: 0,
+ changeNum: 0,
+ changePassNum: 0
}
},
computed: {
+ ...mapStores(useSubtaskStore),
proEachSceneNum() {
return Math.round((this.proNum / this.sceneNum) * 10) / 10
},
@@ -38,78 +58,79 @@
if (this.proNum > 0) {
return Math.round((this.changeNum / this.proNum) * 100) + '%'
} else {
- return '/'
+ return '-'
}
},
changePassPer() {
if (this.proNum > 0) {
return Math.round((this.changePassNum / this.proNum) * 100) + '%'
} else {
- return '/'
+ return '-'
}
}
},
methods: {
- refresh() {
- const fontSize = 12
- const option = {
- legend: {
- data: ['闂鏁�', '鏁存敼鏁�'],
- textStyle: {
- fontSize: fontSize,
- color: 'white'
- }
- },
- grid: {
- left: '3%',
- right: '4%',
- bottom: '3%',
- containLabel: true
- },
- xAxis: {
- type: 'category',
- data: ['1鍙�', '2鍙�', '3鍙�', '4鍙�', '5鍙�', '6鍙�', '7鍙�', '8鍙�', '9鍙�'],
- axisLabel: {
- textStyle: {
- fontSize: fontSize
- },
- color: '#ffffff',
- textBorderColor: '#fff'
- }
- },
- yAxis: {
- type: 'value',
- axisLabel: {
- textStyle: {
- fontSize: fontSize,
- color: 'white'
- }
- }
- },
- series: [
+ fetchData() {
+ this.subtaskStore.getSummaryMap((map) => {
+ this.refresh(map)
+ })
+ },
+ refresh(map) {
+ let sceneNum = 0,
+ proNum = 0,
+ changeNum = 0,
+ changePassNum = 0
+ const chartData = {
+ xAxis: [],
+ yAxis: [
{
name: '闂鏁�',
- type: 'bar',
- data: [12, 8, 9, 7, 14, 19, 9, 7, 14]
+ data: []
},
{
name: '鏁存敼鏁�',
- type: 'bar',
- data: [6, 2, 5, 3, 6, 3, 6, 2, 5]
+ data: []
}
- // {
- // name: '鏁存敼鐜�',
- // type: 'bar',
- // data: [820, 832, 901, 934, 1290, 1330, 1320]
- // }
]
}
+ 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.refresh()
+ this.fetchData()
}
}
</script>
--
Gitblit v1.9.3