Merge branch 'main' of http://106.15.139.36:30000/bestunion/Shanghai-SanFenYuan

src/api/inspector.js

@@ -0,0 +1,19 @@
+import request from "@/utils/request";
+
+export const getTongJiData = () => {
+  return request({
+    method: 'post',
+    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')
-    if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
-      cache.session.setJSON('sessionObj', requestObj)
-    } else {
-      const s_url = sessionObj.url;                  // 请求地址
-      const s_data = sessionObj.data;                // 请求数据
-      const s_time = sessionObj.time;                // 请求时间
-      const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
-      if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
-        const message = '数据正在处理，请勿重复提交';
-        console.warn(`[${s_url}]: ` + message)
-        return Promise.reject(new Error(message))
-      } else {
-        cache.session.setJSON('sessionObj', requestObj)
-      }
-    }
+    // const sessionObj = cache.session.getJSON('sessionObj')
+    // if (sessionObj === undefined || sessionObj === null || sessionObj === '') {
+    //   cache.session.setJSON('sessionObj', requestObj)
+    // } else {
+    //   const s_url = sessionObj.url;                  // 请求地址
+    //   const s_data = sessionObj.data;                // 请求数据
+    //   const s_time = sessionObj.time;                // 请求时间
+    //   const interval = 1000;                         // 间隔时间(ms)，小于此时间视为重复提交
+    //   if (s_data === requestObj.data && requestObj.time - s_time < interval && s_url === requestObj.url) {
+    //     const message = '数据正在处理，请勿重复提交';
+    //     console.warn(`[${s_url}]: ` + message)
+    //     return Promise.reject(new Error(message))
+    //   } else {
+    //     cache.session.setJSON('sessionObj', requestObj)
+    //   }
+    // }
   }
   return config
 }, error => {

src/views/inspector/index.vue

@@ -7,45 +7,37 @@
       <div style="display: grid;grid-template-columns: repeat(4,minmax(0,1fr));gap: 20px">
         <Card title="总同录数量">
           <div class="shu">
-            <span>7090</span>
+            <span>{{ tongji.totalCount }}</span>
           </div>
         </Card>
         <Card title="本年同录数量">
           <div class="shu">
-            <span>2235</span>
+            <span>{{ tongji.yearCount }}</span>
           </div>
         </Card>
         <Card title="本季度同录数量">
           <div class="shu">
-            <span>687</span>
+            <span>{{ tongji.monthCount }}</span>
           </div>
         </Card>
         <Card title="本月同录数量">
           <div class="shu">
-            <span>26</span>
+            <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 class="shu">
-            <span>7090</span>
-          </div>
+          <div id="total" style="width: 100%;height: 500px"/>
         </Card>
         <Card title="本年同录数量">
-          <div class="shu">
-            <span>2235</span>
-          </div>
-        </Card>
-        <Card title="本季度同录数量">
-          <div class="shu">
-            <span>687</span>
-          </div>
+          <div id="year" style="width: 100%;height: 500px"/>
         </Card>
         <Card title="本月同录数量">
-          <div class="shu">
-            <span>26</span>
-          </div>
+          <div id="month" style="width: 100%;height: 500px"/>
+        </Card>
+        <Card title="本周同录数量">
+          <div id="week" style="width: 100%;height: 500px"/>
         </Card>
       </div>
     </div>
@@ -55,10 +47,68 @@
 <script>
 
 import Card from "@/views/inspector/components/Card.vue";
+import {getPieData, getTongJiData} from "@/api/inspector";
+import * as echarts from "echarts";
 
 export default {
   name: 'inspector',
   components: {Card},
+  data() {
+    return {
+      tongji: {}
+    }
+  },
+  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
+            }))
+          }
+        ]
+      }
+    }
+  }
 }
 </script>
 
@@ -106,7 +156,7 @@ export default {
   gap: 16px;
 }
 
-.shu{
+.shu {
   position: relative;
   color: rgba(14, 253, 255, 1);
   font-size: 20px;