From d00a9f035aec50c37c8e0a1363a1968672fb875f Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 16 七月 2024 16:58:39 +0800
Subject: [PATCH] 2024.7.16
---
src/views/inspection/problem/component/ProblemChangeChart.vue | 148 ++++++++++++++++++++++++++++++++-----------------
1 files changed, 97 insertions(+), 51 deletions(-)
diff --git a/src/views/inspection/problem/component/ProblemChangeChart.vue b/src/views/inspection/problem/component/ProblemChangeChart.vue
index a033240..73703d6 100644
--- a/src/views/inspection/problem/component/ProblemChangeChart.vue
+++ b/src/views/inspection/problem/component/ProblemChangeChart.vue
@@ -1,75 +1,121 @@
<template>
<el-row justify="space-between">
- <div>鍒嗘湡瓒嬪娍</div>
- <OptionTime v-model="time"></OptionTime>
+ <el-col :span="18">
+ <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-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: {
- 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鍙�'],
- 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: [67, 45, 90, 67, 45, 90]
+ name: '闂鏁�',
+ data: []
},
{
- name: '鏁存敼',
- type: 'bar',
- data: [67, 45, 90, 67, 40, 81]
+ name: '鏁存敼鏁�',
+ 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