2025.6.9（功能编写中）

Riku

2025-06-09 2547159bbd781c8e1a41ecc939385396c85f9766

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

@@ -1,16 +1,18 @@
<template>
  <el-row justify="space-between">
    <el-col :span="18">
      <div v-if="mainProType">
    <el-col :span="24">
      <el-row v-if="mainProType" justify="space-between" class="p-h-16">
        <el-statistic title="突出问题" :value="mainProType.name" />
        <el-statistic title="问题数" :value="mainProType.count" />
        <el-statistic title="占比" :value="mainProType.per" />
      </el-row>
      <!-- <el-text v-if="mainProType">
        突出问题：{{ mainProType.name }}，问题数：{{ mainProType.count }}，占比{{ mainProType.per }}
        <!-- <span v-for="item in mainProType" :key="item.name">
          {{ item.name }}，问题数：{{ item.count }}，占比{{ item.per }}
        </span> -->
      </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>
@@ -18,9 +20,9 @@
</template>
<script>
import * as echarts from 'echarts'
import { pieChartOption } from '@/utils/echart/chart-option'
import { unref } from 'vue'
import dayjs from 'dayjs'

import problemApi from '@/api/fysp/problemApi.js'
import { useFetchData } from '@/composables/fetchData'
import { useAreaStore } from '@/stores/area.js'
@@ -66,12 +68,20 @@
      return res
    }
  },
  watch: {
    'areaStore.area': {
      handler(nV, oV) {
        this.fetchProblemsStatistic()
      },
      deep: true
    }
  },
  methods: {
    fetchProblemsStatistic() {
      const param = unref(this.areaStore.area)
      param.starttime = dayjs(param.starttime).startOf('month').format('YYYY-MM-DD HH:mm:ss')
      param.endtime = dayjs(param.endtime).endOf('month').format('YYYY-MM-DD HH:mm:ss')
      this.fetchData((page, pageSize) => {
      this.fetchData(() => {
        return problemApi.fetchProblemsStatistic(param).then((res) => {
          this.dataList = res
          const chartData = res
@@ -90,71 +100,14 @@
      })
    },
    refresh(chartData) {
      const fontSize = 12
      const option = {
        legend: {
          data: ['问题', '整改'],
          textStyle: {
            fontSize: fontSize,
            color: 'white'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '问题分布',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: chartData,
            // data: [
            //   { value: 24, name: '出入口（道路）扬尘' },
            //   { value: 20, name: '工程车辆' },
            //   { value: 18, name: '道路扬尘' },
            //   { value: 26, name: '路面硬化' },
            //   { value: 30, name: '渣土' }
            // ].sort(function (a, b) {
            //   return a.value - b.value
            // }),
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.8)'
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200
            }
          }
        ]
      }
      const option = pieChartOption('问题分布', chartData)
      this.echart.setOption(option)
    }
  },
  mounted() {
    this.echart = echarts.init(this.$refs.echart)
    this.fetchProblemsStatistic()
    // this.area = this.areaStore.area
    // this.fetchProblemsStatistic()
  }
}
</script>