fix: 优化中控台首页的今日小时趋势

src/api/RegistVisitApi/RegistVisitApi.js

@@ -132,4 +132,12 @@ export const getIdCardVisitHistory = (data) => {
         data,
         isEncrypt: false
     })
+}
+
+// 获取当天小时来访趋势
+export const getVisitHourTrend = () => {
+    return request({
+        method: 'get',
+        url: '/visiting/visit/stat_hour',
+    })
 }

src/components/IndexComponents/TodayVisitTrend.vue

@@ -9,16 +9,11 @@
 <script setup>
 import Vechart from 'vue-echarts'
 import * as echarts from 'echarts/core';
-import {
+import {GridComponent, LegendComponent, TitleComponent, ToolboxComponent, TooltipComponent} from 'echarts/components';
-    TitleComponent,
+import {LineChart} from 'echarts/charts';
-    ToolboxComponent,
+import {UniversalTransition} from 'echarts/features';
-    TooltipComponent,
+import {CanvasRenderer} from 'echarts/renderers';
-    GridComponent,
+import {getVisitHourTrend} from '@/api/RegistVisitApi/RegistVisitApi.js';
-    LegendComponent
-} from 'echarts/components';
-import { LineChart } from 'echarts/charts';
-import { UniversalTransition } from 'echarts/features';
-import { CanvasRenderer } from 'echarts/renderers';
 
 
 defineOptions({
@@ -37,73 +32,91 @@ echarts.use([
 ]);
 
 
-const times = Array.from({length: 24}, (_, i) => `${i}:00`)
+const options = ref({})
-const data = Array.from({length: 24}, (_, i) => Math.floor(Math.random() * 100))
+
-const options = {
+onMounted(() => {
-    tooltip: {
+    getData()
-        trigger: 'axis',
+})
-        axisPointer: {
+
-            type: 'cross',
+const getData = async () => {
-            crossStyle: {
+    const res = await getVisitHourTrend()
-                color: '#999'
+    const data = res.data.map(item => {
+        return {
+            ...item,
+            name: item.hour,
+            value: item.count
+        }
+    })
+    setChartOptions(data)
+}
+
+const setChartOptions = (data) => {
+    options.value = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: {
+                type: 'cross',
+                crossStyle: {
+                    color: '#999'
+                }
             }
-        }
-    },
-    grid: {
-        top: '10%',
-        left: '3%',
-        right: '3%',
-        bottom: '10%',
-    },
-    xAxis: {
-        type: 'category',
-        data: times,
-        axisTick: {
-            show: false
         },
-        axisLine: {
+        grid: {
-            show: false
+            top: '10%',
-        }
+            left: '3%',
-    },
+            right: '3%',
-    yAxis: {
+            bottom: '10%',
-        type: 'value'
+        },
-    },
+        xAxis: {
-    series: [
+            type: 'category',
-        {
+            data: times,
-            name: 'Line 1',
+            axisTick: {
-            type: 'line',
+                show: false
-            stack: 'Total',
-            smooth: true,
-            lineStyle: {
-                width: 0
             },
-            showSymbol: false,
+            axisLine: {
-            areaStyle: {
+                show: false
-                opacity: 0.8,
+            }
-                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+        },
-                    {
+        yAxis: {
-                        offset: 0,
+            type: 'value'
-                        color: '#004564'
+        },
-                    },
+        series: [
-                    {
+            {
-                        offset: 1,
+                name: '今日来访',
-                        color: '#00a0df'
+                type: 'line',
-                    }
+                stack: 'Total',
-                ])
+                smooth: true,
-            },
+                lineStyle: {
-            emphasis: {
+                    width: 0
-                focus: 'series'
+                },
-            },
+                showSymbol: false,
-            // name: '今日来访',
+                areaStyle: {
-            data: data,
+                    opacity: 0.8,
-            // type: 'line',
+                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-            // smooth: true
+                        {
-            // barWidth: '35%',
+                            offset: 0,
-            // itemStyle: {
+                            color: '#004564'
-            //     color: '#004564'
+                        },
-            // }
+                        {
-        }
+                            offset: 1,
-    ]
+                            color: '#00a0df'
+                        }
+                    ])
+                },
+                emphasis: {
+                    focus: 'series'
+                },
+                // name: '今日来访',
+                data: data,
+                // type: 'line',
+                // smooth: true
+                // barWidth: '35%',
+                // itemStyle: {
+                //     color: '#004564'
+                // }
+            }
+        ]
+    }
 }
 </script>