大屏数据实时

src/views/homeIndex/components/DeviceUsage.vue

@@ -12,9 +12,11 @@
 <script setup lang="ts">
 import * as echarts from 'echarts';
 import { getDeviceUsageFrequency } from '@/api/homeIndex/index';
+
 const chartRef = ref<HTMLDivElement | null>(null);
 const activeTab = ref('month');
 let myChart: echarts.ECharts | null = null; // 保存图表实例
+let dataTimer: NodeJS.Timeout | null = null; // 数据更新定时器
 
 // 根据天数获取数据并更新图表
 const fetchDataAndUpdate = (days: number) => {
@@ -43,78 +45,126 @@ const fetchDataAndUpdate = (days: number) => {
 // 切换标签逻辑
 const switchTab = (tab: string) => {
     activeTab.value = tab;
-    // 根据标签切换天数（近半月=15天，近半年=180天，按实际需求调整）
+    // 根据标签切换天数（近一月=30天，近半年=180天）
     const days = tab === 'month' ? 30 : 180;
     fetchDataAndUpdate(days);
+    
+    // 切换标签后重新启动定时器
+    startDataTimer();
+};
+
+// 开始数据定时器
+const startDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+    }
+    // 每300秒（5分钟）更新一次数据
+    dataTimer = setInterval(() => {
+        const days = activeTab.value === 'month' ? 30 : 180;
+        fetchDataAndUpdate(days);
+    }, 300000);
+};
+
+// 清除数据定时器
+const clearDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+        dataTimer = null;
+    }
+};
+
+// 初始化图表
+const initChart = () => {
+    if (!chartRef.value) return;
+    
+    myChart = echarts.init(chartRef.value);
+    
+    // 初始图表配置（空数据占位）
+    const option = {
+        tooltip: {
+            trigger: 'axis',
+            axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
+        },
+        grid: {
+            left: '5%',
+            right: '10%',
+            bottom: '3%',
+            top: '20%',
+            containLabel: true
+        },
+        yAxis: {
+            type: 'category',
+            data: [], // 初始空数据
+            axisLine: {
+                lineStyle: {
+                    color: '#1e3a8a',
+                    show: false
+                }
+            },
+            axisLabel: {
+                color: '#DEEFFF'
+            }
+        },
+        xAxis: {
+            type: 'value',
+            axisLine: { show: false },
+            axisLabel: { show: false },
+            splitLine: { show: false }
+        },
+        series: [{
+            name: '使用频次',
+            type: 'bar',
+            data: [], // 初始空数据
+            barWidth: '14px',
+            stack: 'total',
+            label: {
+                show: true,
+                position: 'right',
+                valueAnimation: true,
+                color: '#DEEFFF'
+            },
+            itemStyle: {
+                color: new echarts.graphic.LinearGradient(
+                    0, 0, 1, 0,
+                    [
+                        { offset: 0, color: '#0768D4' },
+                        { offset: 1, color: '#0EC4DF' }
+                    ]
+                ),
+                borderRadius: 4
+            }
+        }]
+    };
+    myChart.setOption(option);
+    
+    // 初始化数据
+    fetchDataAndUpdate(30);
+    
+    // 启动定时器
+    startDataTimer();
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+    if (myChart) {
+        myChart.resize();
+    }
 };
 
 onMounted(() => {
-    if (chartRef.value) {
-        // 初始化图表实例
-        myChart = echarts.init(chartRef.value);
-        
-        // 初始图表配置（空数据占位）
-        const option = {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
-            },
-            grid: {
-                left: '5%',
-                right: '10%',
-                bottom: '3%',
-                top: '20%',
-                containLabel: true
-            },
-            yAxis: {
-                type: 'category',
-                data: [], // 初始空数据
-                axisLine: {
-                    lineStyle: {
-                        color: '#1e3a8a',
-                        show: false
-                    }
-                },
-                axisLabel: {
-                    color: '#DEEFFF'
-                }
-            },
-            xAxis: {
-                type: 'value',
-                axisLine: { show: false },
-                axisLabel: { show: false },
-                splitLine: { show: false }
-            },
-            series: [{
-                name: '使用频次',
-                type: 'bar',
-                data: [], // 初始空数据
-                barWidth: '14px',
-                stack: 'total',
-                label: {
-                    show: true,
-                    position: 'right',
-                    valueAnimation: true,
-                    color: '#DEEFFF'
-                },
-                itemStyle: {
-                    color: new echarts.graphic.LinearGradient(
-                        0, 0, 1, 0,
-                        [
-                            { offset: 0, color: '#0768D4' },
-                            { offset: 1, color: '#0EC4DF' }
-                        ]
-                    ),
-                    borderRadius: 4
-                }
-            }]
-        };
-        myChart.setOption(option);
-        fetchDataAndUpdate(30);
-        // 窗口resize自适应
-        window.addEventListener('resize', () => {
-            myChart?.resize();
-        });
+    initChart();
+    window.addEventListener('resize', handleResize);
+});
+
+onUnmounted(() => {
+    // 清除定时器
+    clearDataTimer();
+    // 移除事件监听
+    window.removeEventListener('resize', handleResize);
+    // 销毁图表实例
+    if (myChart) {
+        myChart.dispose();
+        myChart = null;
     }
 });
 </script>
@@ -122,7 +172,7 @@ onMounted(() => {
 <style scoped lang="scss">
 .vchartPage {
     margin-top: 4.8vh;
-    position: relative; // 新增：确保按钮定位正确
+    position: relative; // 确保按钮定位正确
 }
 
 .btn_mounth_box {
@@ -143,7 +193,7 @@ onMounted(() => {
     color: #fff;
     font-size: 0.8vw;
     cursor: pointer;
-    margin-left: 0.5vw; // 新增：按钮间距
+    margin-left: 0.5vw; // 按钮间距
 }
 
 .cur {