2024.7.16

riku

2024-07-16 d00a9f035aec50c37c8e0a1363a1968672fb875f

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

@@ -1,12 +1,9 @@
<template>
  <el-row justify="space-between">
    <el-col :span="18">
      <div v-if="mainProType">
      <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">
@@ -18,9 +15,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'
@@ -71,7 +68,7 @@
      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,65 +87,7 @@
      })
    },
    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)
    }
  },