2025.6.9（功能编写中）

Riku

2025-06-09 2547159bbd781c8e1a41ecc939385396c85f9766

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

@@ -1,75 +1,136 @@
<template>
  <el-row justify="space-between">
    <div>分期趋势</div>
    <OptionTime v-model="time"></OptionTime>
    <el-col :span="24">
      <el-row justify="space-between" class="p-h-16">
        <el-statistic title="场景数" :value="sceneNum" />
        <el-statistic title="问题数" :value="proNum" />
        <!-- <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" />
      </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: {
    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>