From 91513e171078ed6b0887f87b9fced33895d6d3fb Mon Sep 17 00:00:00 2001
From: riku <risaku@163.com>
Date: 星期二, 08 七月 2025 08:35:50 +0800
Subject: [PATCH] 2025.7.8

---
 src/views/inspection/problem/component/ProblemSummary.vue |  135 +++++++++++++++++++++++++++++++++++++++------
 1 files changed, 117 insertions(+), 18 deletions(-)

diff --git a/src/views/inspection/problem/component/ProblemSummary.vue b/src/views/inspection/problem/component/ProblemSummary.vue
index 5d75bc9..ea39f2d 100644
--- a/src/views/inspection/problem/component/ProblemSummary.vue
+++ b/src/views/inspection/problem/component/ProblemSummary.vue
@@ -1,20 +1,81 @@
 <template>
-  <div class="font-small">
-    浠婃棩缁熻锛氶棶棰樻暟: {{ summary.proNum }}锛屾暣鏀规暟: {{ summary.changeNum }}锛屾暣鏀圭巼:
-    {{ summary.changePer }}
-  </div>
-  <div class="font-small">绐佸嚭闂锛氳矾闈㈢Н灏橈紝闂鏁帮細13锛屽崰姣旓細81%</div>
+  <el-row>
+    <el-col :xs="24" :sm="24" :md="24" :lg="9" :xl="9">
+      <div v-show="mainProType">
+        <el-text>绐佸嚭闂</el-text>
+        <div ref="echartRef" class="pie-chart"></div>
+      </div>
+      <template v-if="mainProType">
+        <div v-show="false" class="font-small">
+          绐佸嚭闂锛歿{ mainProType.name }}锛岄棶棰樻暟锛歿{ mainProType.count }}锛屽崰姣攞{
+            mainProType.per
+          }}
+        </div>
+      </template>
+    </el-col>
+    <el-col :xs="24" :sm="24" :md="24" :lg="colSpanLarge" :xl="colSpanLarge">
+      <el-text>鍗曟棩姹囨��</el-text>
+      <BaseTable :data="summary">
+        <el-table-column
+          label="闂鏁�"
+          prop="proNum"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          label="鏁存敼鏁�"
+          prop="changeNum"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+        <el-table-column
+          label="鏁存敼鐜�"
+          prop="changePer"
+          :show-overflow-tooltip="true"
+        ></el-table-column>
+      </BaseTable>
+    </el-col>
+  </el-row>
 </template>
 <script setup>
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
+import dayjs from 'dayjs'
+import * as echarts from 'echarts'
+import { pieChartOption } from '@/utils/echart/chart-option'
 
 const props = defineProps({
+  date: {
+    type: Date,
+    default: new Date()
+  },
   data: {
-    type: Array
+    type: Array,
+    default: () => []
+  },
+  proStatistic: {
+    type: Array,
+    default: () => []
   },
   loading: Boolean
 })
 
+const colSpanLarge = computed(() => {
+  return mainProType.value ? 15 : 24
+})
+
+// 楗煎浘
+let echart
+const echartRef = ref(null)
+
+// 褰撴棩鏃堕棿
+const timeObj = computed(() => {
+  const d = dayjs(props.date)
+  return {
+    year: d.year(),
+    month: d.month(),
+    date: d.date()
+  }
+})
+
+// 闂鍜屾暣鏀规暟閲忕粺璁�
 const summary = computed(() => {
   let proNum = 0,
     changeNum = 0,
@@ -28,26 +89,22 @@
     changePer = Math.round((changeNum / proNum) * 100) + '%'
   }
 
-  return { proNum, changeNum, changePer }
+  return [{ proNum, changeNum, changePer }]
 })
 
-const mainPro = computed(() => {
+// 绐佸嚭闂缁熻
+const mainProType = computed(() => {
   let res
   let total = 0,
     max = 0
-  props.data.forEach((d) => {
-    total += d.proNum
+  props.proStatistic.forEach((d) => {
+    total += d.count
   })
-  props.data.forEach((d) => {
+  props.proStatistic.forEach((d) => {
     if (total > 0) {
-      const per = d.proNum / total
+      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,
@@ -56,6 +113,48 @@
       }
     }
   })
+  refreshChart(props.proStatistic)
   return res
 })
+
+function refreshChart(data) {
+  if (!data || !echart) return
+  const chartData = data
+    .map((item) => {
+      return {
+        value: item.count,
+        name: item.name
+      }
+    })
+    // 姝ｅ簭鎺掑垪
+    .sort(function (a, b) {
+      return b.value - a.value
+    })
+  const option = pieChartOption('闂鍒嗗竷', chartData, 1)
+  const series = option.series[0]
+  // series.radius = '50%'
+  series.center = ['15%', '50%']
+  series.label.formatter = '{b}\n{c}涓�({d}%)'
+  echart.setOption(option)
+  setTimeout(() => {
+    echart.resize()
+  }, 100)
+}
+
+// watch(props.proStatistic, (nV, oV) => {
+//   if (nV != oV) {
+//     refreshChart(nV)
+//   }
+// })
+
+onMounted(() => {
+  echart = echarts.init(echartRef.value)
+})
 </script>
+<style scoped>
+.pie-chart {
+  /* width: 200px; */
+  height: 100px;
+  /* background-color: aliceblue; */
+}
+</style>

--
Gitblit v1.9.3