2024.7.16

riku

2024-07-16 d00a9f035aec50c37c8e0a1363a1968672fb875f

 src/views/inspection/problem/component/ProblemChangeChart.vue

@@ -1,18 +1,18 @@
<template>
  <el-row justify="space-between">
    <el-col :span="18">
      <div>
      <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">
        <OptionTime v-model="time"></OptionTime>
        <!-- <OptionTime v-model="time"></OptionTime> -->
      </el-row>
    </el-col>
  </el-row>
@@ -20,17 +20,22 @@
</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
    },
@@ -50,66 +55,67 @@
    }
  },
  methods: {
    refresh() {
      const fontSize = 12
      const option = {
        legend: {
          data: ['问题数', '整改数'],
          textStyle: {
            fontSize: fontSize,
            color: 'white'
          }
    fetchData() {
      this.subtaskStore.getSummaryMap((map) => {
        this.refresh(map)
      })
        },
        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: [
    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>