fix: 大屏同录数量饼图数据对接

src/api/inspector.js

@@ -6,3 +6,14 @@ export const getTongJiData = () => {
     url: '/caserecord/countByPeriod',
   })
 }
+
+// 获取饼图
+export const getPieData = (period) => {
+  return request({
+    method: 'post',
+    url: '/caserecord/countByClerkByPeriod',
+    params: {
+      period
+    }
+  })
+}

src/utils/request.js

@@ -42,22 +42,22 @@ service.interceptors.request.use(config => {
       data: typeof config.data === 'object' ? JSON.stringify(config.data) : config.data,
       time: new Date().getTime()
     }
-    const sessionObj = cache.session.getJSON('sessionObj')
+    // const sessionObj = cache.session.getJSON('sessionObj')
-    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+    // if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-      cache.session.setJSON('sessionObj', requestObj)
+    //   cache.session.setJSON('sessionObj', requestObj)
-    } else {
+    // } else {
-      const s_url = sessionObj.url;                  // 请求地址
+    //   const s_url = sessionObj.url;                  // 请求地址
-      const s_data = sessionObj.data;                // 请求数据
+    //   const s_data = sessionObj.data;                // 请求数据
-      const s_time = sessionObj.time;                // 请求时间
+    //   const s_time = sessionObj.time;                // 请求时间
-      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
+    //   const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+    //   if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交';
+    //     const message = '数据正在处理，请勿重复提交';
-        console.warn(`[${s_url}]: ` + message)
+    //     console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
+    //     return Promise.reject(new Error(message))
-      } else {
+    //   } else {
-        cache.session.setJSON('sessionObj', requestObj)
+    //     cache.session.setJSON('sessionObj', requestObj)
-      }
+    //   }
-    }
+    // }
   }
   return config
 }, error => {

src/views/inspector/index.vue

@@ -17,7 +17,7 @@
         </Card>
         <Card title="本月同录数量">
           <div class="shu">
-            <span>{{tongji.monthCount}}</span>
+            <span>{{ tongji.monthCount }}</span>
           </div>
         </Card>
         <Card title="本周同录数量">
@@ -28,24 +28,16 @@
       </div>
       <div style="flex:1;display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
         <Card title="总同录数量">
-          <div class="shu">
+          <div id="total" style="width: 100%;height: 500px"/>
-            <span>6090.99</span>
-          </div>
         </Card>
         <Card title="本年同录数量">
-          <div class="shu">
+          <div id="year" style="width: 100%;height: 500px"/>
-            <span>6090.99</span>
-          </div>
         </Card>
         <Card title="本月同录数量">
-          <div class="shu">
+          <div id="month" style="width: 100%;height: 500px"/>
-            <span>6090.99</span>
-          </div>
         </Card>
         <Card title="本周同录数量">
-          <div class="shu">
+          <div id="week" style="width: 100%;height: 500px"/>
-            <span>6090.99</span>
-          </div>
         </Card>
       </div>
     </div>
@@ -55,7 +47,8 @@
 <script>
 
 import Card from "@/views/inspector/components/Card.vue";
-import {getTongJiData} from "@/api/inspector";
+import {getPieData, getTongJiData} from "@/api/inspector";
+import * as echarts from "echarts";
 
 export default {
   name: 'inspector',
@@ -67,11 +60,53 @@ export default {
   },
   async mounted() {
     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)
   },
   methods: {
     async getTongJi() {
       const data = await getTongJiData()
       this.tongji = data.data
+    },
+    async getPinTongJiData(documentSelect, period) {
+      const charts = echarts.init(documentSelect)
+
+      const {data} = await getPieData(period)
+
+      charts.setOption(this.getEchartsOptions(data))
+    },
+    getEchartsOptions(data) {
+      return {
+        tooltip: {
+          trigger: 'item'
+        },
+        legend: {
+          top: '5%',
+          left: 'center',
+          textStyle: {
+            color: "rgba(14, 253, 255, 1)"
+          }
+        },
+        series: [
+          {
+            // name: 'Access From',
+            type: 'pie',
+            radius: ['20%', '50%'],
+            avoidLabelOverlap: false,
+            // itemStyle: {
+            //   borderRadius: 10,
+            //   borderColor: 'transparent',
+            //   borderWidth: 10
+            // },
+            data: data.map(r => ({
+              value: r.num,
+              name: r.clerk
+            }))
+          }
+        ]
+      }
     }
   }
 }