2024.7.16

riku

2024-07-16 d00a9f035aec50c37c8e0a1363a1968672fb875f

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

@@ -1,80 +1,99 @@
<template>
  <el-row justify="space-between">
    <div>问题分布</div>
    <OptionTime v-model="time"></OptionTime>
    <el-col :span="18">
      <el-text v-if="mainProType">
        突出问题：{{ mainProType.name }}，问题数：{{ mainProType.count }}，占比{{ mainProType.per }}
      </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 { 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'
import { mapStores } from 'pinia'

export default {
  methods: {
    refresh() {
      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: [
              { 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.3)'
            },
            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
  setup() {
    const { loading, fetchData } = useFetchData()
    return { loading, fetchData }
  },
  data() {
    return {
      dataList: []
    }
  },
  computed: {
    ...mapStores(useAreaStore),
    mainProType() {
      let res
      let total = 0,
        max = 0
      this.dataList.forEach((d) => {
        total += d.count
      })
      this.dataList.forEach((d) => {
        if (total > 0) {
          const per = d.count / total
          if (per >= max) {
            max = per
            // res.push({
            //   name: d.name,
            //   count: d.count,
            //   per: Math.round(per * 100) + '%'
            // })
            res = {
              name: d.name,
              count: d.count,
              per: Math.round(per * 100) + '%'
            }
          }
        ]
      }
        }
      })
      return res
    }
  },
  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(() => {
        return problemApi.fetchProblemsStatistic(param).then((res) => {
          this.dataList = res
          const chartData = res
            .map((item) => {
              return {
                value: item.count,
                name: item.name
              }
            })
            .sort(function (a, b) {
              return a.value - b.value
            })

          this.refresh(chartData)
        })
      })
    },
    refresh(chartData) {
      const option = pieChartOption('问题分布', chartData)
      this.echart.setOption(option)
    }
  },
  mounted() {
    this.echart = echarts.init(this.$refs.echart)
    this.refresh()
    this.fetchProblemsStatistic()
  }
}
</script>