From 411815a248212def32c956ec163d6fd35c9be876 Mon Sep 17 00:00:00 2001
From: lonewolfyx <877085893@qq.com>
Date: Fri, 27 Mar 2026 10:12:28 +0800
Subject: [PATCH] feat(inspector): add interactive statistics cards with
 dynamic chart updates

---
 src/views/inspector/components/Card.vue | 20 ++++++--
 src/views/inspector/index.vue           | 66 +++++++++++++++----------
 vue.config.js                           |  2 +-
 3 files changed, 57 insertions(+), 31 deletions(-)

diff --git a/src/views/inspector/components/Card.vue b/src/views/inspector/components/Card.vue
index c87754f..bf5e710 100644
--- a/src/views/inspector/components/Card.vue
+++ b/src/views/inspector/components/Card.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="card">
+  <div class="card" v-bind="$attrs">
     <div class="title">
       {{ title }}
     </div>
@@ -12,10 +12,19 @@
 <script>
 export default {
   name: 'Card',
-  props:{
+  inheritAttrs:false,
+  props: {
     title: {
       type: String,
       default: '标题'
+    },
+    click:{
+      type: Function,
+    }
+  },
+  methods: {
+    handleChangeStatistics() {
+      console.log(123)
     }
   }
 }
@@ -29,14 +38,17 @@ export default {
   height: 100%;
   padding: 10px;
   border-radius: 15px;
+  cursor: pointer;
 }
-.title{
+
+.title {
   font-size: 20px;
   font-weight: bolder;
   color: #fff1cc;
   margin-bottom: 10px;
 }
-.body{
+
+.body {
   position: relative;
   z-index: 20;
 }
diff --git a/src/views/inspector/index.vue b/src/views/inspector/index.vue
index b222f63..fb9d6e3 100644
--- a/src/views/inspector/index.vue
+++ b/src/views/inspector/index.vue
@@ -5,40 +5,40 @@
     </div>
     <div class="inspector-container">
       <div style="display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
-        <Card title="总同录数量">
+        <Card title="总同录数量" @click.native="handleChangeStatistics(0)">
           <div class="shu">
             <span>{{ tongji.totalCount }}</span>
           </div>
         </Card>
-        <Card title="本年同录数量">
+        <Card title="本年同录数量" @click.native="handleChangeStatistics(1)">
           <div class="shu">
             <span>{{ tongji.yearCount }}</span>
           </div>
         </Card>
-        <Card title="本季度同录数量">
+        <Card title="本季度同录数量" @click.native="handleChangeStatistics(2)">
           <div class="shu">
             <span>{{ tongji.monthCount }}</span>
           </div>
         </Card>
-        <Card title="本月同录数量">
+        <Card title="本月同录数量" @click.native="handleChangeStatistics(3)">
           <div class="shu">
             <span>{{ tongji.weekCount }}</span>
           </div>
         </Card>
       </div>
-      <div style="flex:1;display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
-        <Card title="总同录数量">
+      <div style="flex:1;display: flex;justify-content: center;align-items: center;">
+        <Card :title="title">
           <div id="total" style="width: 100%;height: 500px"/>
         </Card>
-        <Card title="本年同录数量">
-          <div id="year" style="width: 100%;height: 500px"/>
-        </Card>
-        <Card title="本月同录数量">
-          <div id="month" style="width: 100%;height: 500px"/>
-        </Card>
-        <Card title="本周同录数量">
-          <div id="week" style="width: 100%;height: 500px"/>
-        </Card>
+        <!--        <Card title="本年同录数量">-->
+        <!--          <div id="year" style="width: 100%;height: 500px"/>-->
+        <!--        </Card>-->
+        <!--        <Card title="本月同录数量">-->
+        <!--          <div id="month" style="width: 100%;height: 500px"/>-->
+        <!--        </Card>-->
+        <!--        <Card title="本周同录数量">-->
+        <!--          <div id="week" style="width: 100%;height: 500px"/>-->
+        <!--        </Card>-->
       </div>
     </div>
   </div>
@@ -55,27 +55,41 @@ export default {
   components: {Card},
   data() {
     return {
-      tongji: {}
+      title: '总同录数量',
+      tongji: {},
+      chart: null
     }
   },
   async mounted() {
+    this.initialEcharts()
     await this.getTongJi()
-    await this.getPinTongJiData(document.getElementById('total'), 0)
-    await this.getPinTongJiData(document.getElementById('year'), 1)
-    await this.getPinTongJiData(document.getElementById('month'), 3)
-    await this.getPinTongJiData(document.getElementById('week'), 2)
+    await this.getPinTongJiData(0)
+    // await this.getPinTongJiData(document.getElementById('year'), 1)
+    // await this.getPinTongJiData(document.getElementById('month'), 3)
+    // await this.getPinTongJiData(document.getElementById('week'), 2)
   },
   methods: {
+    initialEcharts() {
+      if (this.chart) return
+      const dom = document.getElementById('total')
+      this.chart = echarts.init(dom)
+
+      this.chatOptions = this.getEchartsOptions([])
+
+      this.chart.setOption(this.chatOptions)
+    },
+    async handleChangeStatistics(type) {
+      this.title = ['总同录数量', '本年同录数量', '本季度同录数量', '本月同录数量'][type]
+      await this.getPinTongJiData(type)
+    },
     async getTongJi() {
       const data = await getTongJiData()
       this.tongji = data.data
     },
-    async getPinTongJiData(documentSelect, period) {
-      const charts = echarts.init(documentSelect)
-
+    async getPinTongJiData(period) {
       const {data} = await getPieData(period)
 
-      charts.setOption(this.getEchartsOptions(data))
+      this.chart.setOption(this.getEchartsOptions(data))
     },
     getEchartsOptions(data) {
       return {
@@ -100,10 +114,10 @@ export default {
             //   borderColor: 'transparent',
             //   borderWidth: 10
             // },
-            data: data.map(r => ({
+            data: data?.map(r => ({
               value: r.num,
               name: r.clerk
-            }))
+            })) ?? []
           }
         ]
       }
diff --git a/vue.config.js b/vue.config.js
index 25748aa..c453ca3 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -46,7 +46,7 @@ module.exports = {
         // target: `http://120.79.202.7:443`,
         // target: `http://100.100.10.216:8099`,
         // target: 'http://106.15.139.36:18090',
-        target: 'http://192.168.3.12:18098/',   //小乌龟本地
+        target: 'http://127.0.0.1:18098/',   //小乌龟本地
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''