From ff82e86becbd200adabd2ce56fba1f6b3c6c37e1 Mon Sep 17 00:00:00 2001
From: Riku <risaku@163.com>
Date: 星期一, 23 六月 2025 23:10:49 +0800
Subject: [PATCH] 2025.6.23

---
 src/views/inspection/problem/component/ProblemType.vue |  155 +++++++++++++++++++++++++++++++--------------------
 1 files changed, 94 insertions(+), 61 deletions(-)

diff --git a/src/views/inspection/problem/component/ProblemType.vue b/src/views/inspection/problem/component/ProblemType.vue
index fe6d2d9..7b40def 100644
--- a/src/views/inspection/problem/component/ProblemType.vue
+++ b/src/views/inspection/problem/component/ProblemType.vue
@@ -1,80 +1,113 @@
 <template>
   <el-row justify="space-between">
-    <div>闂鍒嗗竷</div>
-    <OptionTime v-model="time"></OptionTime>
+    <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 }}
+      </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: '鍑哄叆鍙o紙閬撹矾锛夋壃灏�' },
-              { value: 20, name: '宸ョ▼杞﹁締' },
-              { value: 18, name: '閬撹矾鎵皹' },
-              { value: 26, name: '璺潰纭寲' },
-              { value: 30, name: '娓e湡' }
-            ].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
+    }
+  },
+  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(() => {
+        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.area = this.areaStore.area
+    // this.fetchProblemsStatistic()
   }
 }
 </script>

--
Gitblit v1.9.3