大屏数据实时

src/views/homeIndex/components/AlarmCount.vue

@@ -3,130 +3,178 @@
         <div ref="chartRef" class="chartRef"></div>
     </div>
 </template>
+
 <script setup lang="ts">
 import * as echarts from 'echarts'
 import { getMonthlyAlarmStatistics } from '@/api/homeIndex';
+
 const chartRef = ref<HTMLDivElement | null>(null);
-onMounted(() => {
+let myChart: echarts.ECharts | null = null;
-    if (chartRef.value) {
+let dataTimer: NodeJS.Timeout | null = null;
-        const myChart = echarts.init(chartRef.value);
-        getMonthlyAlarmStatistics({}).then((res) => {
-            const monthlyData = res.data.monthlyStatistics || {};
-            // 提取1-12月数据并转为数字
-            const alarmData = [
-                monthlyData.m1,
-                monthlyData.m2,
-                monthlyData.m3,
-                monthlyData.m4,
-                monthlyData.m5,
-                monthlyData.m6,
-                monthlyData.m7,
-                monthlyData.m8,
-                monthlyData.m9,
-                monthlyData.m10,
-                monthlyData.m11,
-                monthlyData.m12
-            ].map(Number);
 
-            const maxValue = Math.max(...alarmData);
+// 初始化图表
-            const maxIndex = alarmData.indexOf(maxValue);
+const initChart = () => {
-            const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
+    if (!chartRef.value) return;
+    myChart = echarts.init(chartRef.value);
+    updateChartData();
+    window.addEventListener('resize', handleResize);
+};
+// 更新图表数据
+const updateChartData = () => {
+    if (!myChart) return;
+    getMonthlyAlarmStatistics({}).then((res) => {
+        const monthlyData = res.data.monthlyStatistics || {};
+        // 提取1-12月数据并转为数字
+        const alarmData = [
+            monthlyData.m1,
+            monthlyData.m2,
+            monthlyData.m3,
+            monthlyData.m4,
+            monthlyData.m5,
+            monthlyData.m6,
+            monthlyData.m7,
+            monthlyData.m8,
+            monthlyData.m9,
+            monthlyData.m10,
+            monthlyData.m11,
+            monthlyData.m12
+        ].map(Number);
 
-            const option = {
+        const maxValue = Math.max(...alarmData);
-                tooltip: {
+        const maxIndex = alarmData.indexOf(maxValue);
-                    trigger: 'axis',
+        const months = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'];
-                },
+
-                grid: {
+        const option = {
-                    left: '5%',
+            tooltip: {
-                    right: '5%',
+                trigger: 'axis',
-                    bottom: '10%',
+            },
-                    top: '15%',
+            grid: {
-                    containLabel: true
+                left: '5%',
-                },
+                right: '5%',
-                xAxis: {
+                bottom: '10%',
-                    type: 'category',
+                top: '15%',
-                    data: months,
+                containLabel: true
-                    axisLine: {
+            },
-                        lineStyle: {
+            xAxis: {
-                            color: 'rgba(255, 255, 255, 0.2)'
+                type: 'category',
-                        }
+                data: months,
-                    },
+                axisLine: {
-                    axisLabel: {
+                    lineStyle: {
-                        color: '#DEEFFF',
+                        color: 'rgba(255, 255, 255, 0.2)'
-                        fontSize: 12
-                    },
-                    splitLine: {
-                        show: false
                     }
                 },
-                yAxis: {
+                axisLabel: {
-                    type: 'value',
+                    color: '#DEEFFF',
-                    axisLine: {
+                    fontSize: 12
-                        show: false
-                    },
-                    axisLabel: {
-                        color: '#DEEFFF',
-                        fontSize: 12,
-                        formatter: '{value}'
-                    },
-                    splitLine: {
-                        lineStyle: {
-                            color: 'rgba(255, 255, 255, 0.1)',
-                            type: 'dashed'
-                        }
-                    },
-                    boundaryGap: [0, '30%']
                 },
-                series: [
+                splitLine: {
-                    {
+                    show: false
-                        type: 'line',
+                }
-                        data: alarmData,
+            },
-                        smooth: true,
+            yAxis: {
-                        symbol: 'circle',
+                type: 'value',
-                        symbolSize: 6,
+                axisLine: {
-                        emphasis: {
+                    show: false
-                            showSymbol: true,
+                },
-                            symbolSize: 8
+                axisLabel: {
-                        },
+                    color: '#DEEFFF',
-                        lineStyle: {
+                    fontSize: 12,
-                            color: '#22E1DB',
+                    formatter: '{value}'
-                            width: 2
+                },
-                        },
+                splitLine: {
-                        areaStyle: {
+                    lineStyle: {
-                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                        color: 'rgba(255, 255, 255, 0.1)',
-                                { offset: 0, color: 'rgba(34,225,219, 0.6)' },
+                        type: 'dashed'
-                                { offset: 1, color: 'rgba(34,225,219, 0)' }
+                    }
-                            ])
+                },
-                        },
+                boundaryGap: [0, '30%']
-                        itemStyle: {
+            },
-                            color: (params) => {
+            series: [
-                               if (params.dataIndex === maxIndex) {
+                {
-                                    return '#fff'; // 最大值的点标为白色
+                    type: 'line',
-                                }
+                    data: alarmData,
-                                return '#22E1DB';
+                    smooth: true,
+                    symbol: 'circle',
+                    symbolSize: 6,
+                    emphasis: {
+                        showSymbol: true,
+                        symbolSize: 8
+                    },
+                    lineStyle: {
+                        color: '#22E1DB',
+                        width: 2
+                    },
+                    areaStyle: {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            { offset: 0, color: 'rgba(34,225,219, 0.6)' },
+                            { offset: 1, color: 'rgba(34,225,219, 0)' }
+                        ])
+                    },
+                    itemStyle: {
+                        color: (params: any) => {
+                           if (params.dataIndex === maxIndex) {
+                                return '#fff'; // 最大值的点标为白色
                             }
-                        },
+                            return '#22E1DB';
-                        label: {
-                            show: (params) => params.dataIndex === maxIndex,
-                            position: 'top',
-                            color: '#22E1DB',
-                            formatter: '{c}', // 显示当前数据值
-                            fontSize: 12,
                         }
+                    },
+                    label: {
+                        show: (params: any) => params.dataIndex === maxIndex,
+                        position: 'top',
+                        color: '#22E1DB',
+                        formatter: '{c}', // 显示当前数据值
+                        fontSize: 12,
                     }
-                ],
+                }
-            };
+            ],
+        };
 
-            myChart.setOption(option);
+        myChart.setOption(option);
-        }).catch(err => {
+    }).catch(err => {
-        });
+        console.error('获取月度报警统计数据失败:', err);
+    });
+};
 
-        window.addEventListener('resize', () => {
+const handleResize = () => {
-            myChart.resize();
+    if (myChart) {
-        });
+        myChart.resize();
+    }
+};
+// 开始数据定时器
+const startDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+    }
+    // 每300秒（5分钟
+    dataTimer = setInterval(updateChartData, 300000);
+};
+
+// 清除数据定时器
+const clearDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+        dataTimer = null;
+    }
+};
+
+onMounted(() => {
+    initChart();
+    startDataTimer();
+});
+
+onUnmounted(() => {
+    // 清除定时器
+    clearDataTimer();
+    // 移除事件监听
+    window.removeEventListener('resize', handleResize);
+    // 销毁图表
+    if (myChart) {
+        myChart.dispose();
+        myChart = null;
     }
 });
 </script>
+
 <style scoped lang="scss">
 .vchartPage {
     margin-top: 7.4vh;

src/views/homeIndex/components/AlarmEvent.vue

@@ -11,6 +11,7 @@
 import * as echarts from 'echarts'; // 引入 ECharts
 const chartRef = ref<HTMLDivElement | null>(null); // 图表容器的 ref
 const echartData = ref<any>({});
+let myChart: echarts.ECharts | null = null; // 保存图表实例
 const props = defineProps({
     alarmOverview: {
         type: Object,
@@ -33,7 +34,7 @@ onMounted(() => {
                 geoFenceAlarms
             } = echartData.value;
             // 初始化 ECharts 实例
-            const myChart = echarts.init(chartRef.value);
+            myChart = echarts.init(chartRef.value);
             // 配置图表参数
             const option = {
                 tooltip: {
@@ -113,24 +114,29 @@ onMounted(() => {
                     },
                 ],
             };
-
             // 将配置项设置到图表实例
             myChart.setOption(option);
-
+            window.addEventListener('resize', handleResize);
-            // 窗口resize时，图表自适应
-            window.addEventListener('resize', () => {
-                myChart.resize();
-            });
         }
     }, 200)
 
 
 });
 
+// 处理窗口大小变化
+const handleResize = () => {
+    if (myChart) {
+        myChart.resize();
+    }
+};
+onUnmounted(() => {
+    window.removeEventListener('resize', handleResize);
+})
+
 </script>
 <style scoped lang="scss">
 .vchartPage {
-    margin-top:4.8vh;
+    margin-top: 4.8vh;
 }
 
 .chartRef {

src/views/homeIndex/components/DeviceCategory.vue

@@ -3,111 +3,162 @@
         <div ref="chartRef" class="chartRef"></div>
     </div>
 </template>
+
 <script setup lang="ts">
 import { getDeviceCommunicationModeStatistics } from '@/api/homeIndex/index';
 import * as echarts from 'echarts';
-const chartRef = ref<HTMLDivElement | null>(null);
-onMounted(() => {
-    if (chartRef.value) {
-        const myChart = echarts.init(chartRef.value);
-    
-        getDeviceCommunicationModeStatistics().then((res) => {
-            console.log(res, '接口数据');
-            const dataList = res.data || [];
-            // 1.（通信方式名称）
-            const xAxisData = dataList.map(item => item.communicationModeName);
-            // 2. 总数数据
-            const totalData = dataList.map(item => item.totalDevices);
-            // 3. 异常数数据
-            const abnormalData = dataList.map(item => item.abnormalDevices);
-            // 图表配置）
-            const option = {
-                tooltip: {
-                    trigger: 'axis',
-                    axisPointer: { type: 'shadow' }
-                },
-                legend: {
-                    data: ['总数', '异常'],
-                    right: '20px',
-                    textStyle: { color: '#DEEFFF' },
-                    itemWidth: 12,
-                    itemHeight: 12
-                },
-                grid: {
-                    left: '3%',
-                    right: '4%',
-                    bottom: '3%',
-                    top: '15%',
-                    containLabel: true
-                },
-                xAxis: {
-                    type: 'category',
-                    data: xAxisData, 
-                    axisLine: {
-                        lineStyle: { color: 'rgba(255,255,255,0.1)' }
-                    },
-                    axisLabel: {
-                        color: '#DEEFFF' 
-                    }
-                },
-                yAxis: {
-                    type: 'value',
-                    axisLine: { show: false }, 
-                    axisLabel: { color: '#fff' },
-                    splitLine: {
-                        lineStyle: {
-                            color: 'rgba(255, 255, 255, 0.1)',
-                            type: 'dashed'
-                        }
-                    }
-                },
-                series: [
-                    {
-                        name: '总数',
-                        type: 'bar',
-                        data: totalData,
-                        itemStyle: {
-                            color: new echarts.graphic.LinearGradient(
-                                0, 0, 0, 1,
-                                [
-                                    { offset: 0, color: 'rgba(0,166,255,1)' },
-                                    { offset: 1, color: 'rgba(0,125,221, 0.3)' }
-                                ]
-                            ),
-                            borderRadius: 4
-                        },
-                        barWidth: '20px'
-                    },
-                    {
-                        name: '异常',
-                        type: 'bar',
-                        data: abnormalData,
-                        itemStyle: {
-                            color: new echarts.graphic.LinearGradient(
-                                0, 0, 0, 1,
-                                [
-                                    { offset: 0, color: 'rgba(232,69,37,1)' },
-                                    { offset: 1, color: 'rgba(240,12,12, 0.3)' }
-                                ]
-                            ),
-                            borderRadius: 4
-                        },
-                        barWidth: '20px'
-                    }
-                ]
-            };
 
-            myChart.setOption(option);
+const chartRef = ref<HTMLDivElement | null>(null);
-        }).catch(err => {
+let myChart: echarts.ECharts | null = null; // 保存图表实例
-            console.log('获取数据失败', err);
+let dataTimer: NodeJS.Timeout | null = null;
-        });
+
-        // 窗口 resize 时自适应
+// 更新图表数据
-        window.addEventListener('resize', () => {
+const updateChartData = () => {
-            myChart.resize();
+    if (!myChart) return;
-        });
+    
+    getDeviceCommunicationModeStatistics().then((res) => {
+        console.log(res, '接口数据');
+        const dataList = res.data || [];
+        // 1.（通信方式名称）
+        const xAxisData = dataList.map(item => item.communicationModeName);
+        // 2. 总数数据
+        const totalData = dataList.map(item => item.totalDevices);
+        // 3. 异常数数据
+        const abnormalData = dataList.map(item => item.abnormalDevices);
+        // 图表配置）
+        const option = {
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: { type: 'shadow' }
+            },
+            legend: {
+                data: ['总数', '异常'],
+                right: '20px',
+                textStyle: { color: '#DEEFFF' },
+                itemWidth: 12,
+                itemHeight: 12
+            },
+            grid: {
+                left: '3%',
+                right: '4%',
+                bottom: '3%',
+                top: '15%',
+                containLabel: true
+            },
+            xAxis: {
+                type: 'category',
+                data: xAxisData,
+                axisLine: {
+                    lineStyle: { color: 'rgba(255,255,255,0.1)' }
+                },
+                axisLabel: {
+                    color: '#DEEFFF'
+                }
+            },
+            yAxis: {
+                type: 'value',
+                axisLine: { show: false },
+                axisLabel: { color: '#fff' },
+                splitLine: {
+                    lineStyle: {
+                        color: 'rgba(255, 255, 255, 0.1)',
+                        type: 'dashed'
+                    }
+                }
+            },
+            series: [
+                {
+                    name: '总数',
+                    type: 'bar',
+                    data: totalData,
+                    itemStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [
+                                { offset: 0, color: 'rgba(0,166,255,1)' },
+                                { offset: 1, color: 'rgba(0,125,221, 0.3)' }
+                            ]
+                        ),
+                        borderRadius: 4
+                    },
+                    barWidth: '20px'
+                },
+                {
+                    name: '异常',
+                    type: 'bar',
+                    data: abnormalData,
+                    itemStyle: {
+                        color: new echarts.graphic.LinearGradient(
+                            0, 0, 0, 1,
+                            [
+                                { offset: 0, color: 'rgba(232,69,37,1)' },
+                                { offset: 1, color: 'rgba(240,12,12, 0.3)' }
+                            ]
+                        ),
+                        borderRadius: 4
+                    },
+                    barWidth: '20px'
+                }
+            ]
+        };
+
+        myChart.setOption(option);
+    }).catch(err => {
+        console.log('获取数据失败', err);
+    });
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+    if (myChart) {
+        myChart.resize();
+    }
+};
+
+// 开始数据定时器
+const startDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+    }
+    // 每800秒（8分钟
+    dataTimer = setInterval(updateChartData, 800000);
+};
+
+// 清除数据定时器
+const clearDataTimer = () => {
+    if (dataTimer) {
+        clearInterval(dataTimer);
+        dataTimer = null;
+    }
+};
+
+// 初始化图表
+const initChart = () => {
+    if (!chartRef.value) return;
+    myChart = echarts.init(chartRef.value);
+    // 初始加载数据
+    updateChartData();
+    // 启动定时器
+    startDataTimer();
+    // 窗口 resize 时自适应
+    window.addEventListener('resize', handleResize);
+};
+onMounted(() => {
+    initChart();
+});
+onUnmounted(() => {
+    // 清除定时器
+    clearDataTimer();
+    // 移除事件监听
+    window.removeEventListener('resize', handleResize);
+    // 销毁图表实例
+    if (myChart) {
+        myChart.dispose();
+        myChart = null;
     }
 });
 </script>
+
 <style scoped lang="scss">
 .vchartPage {
     margin-top: 5.8vh;

src/views/homeIndex/components/DeviceOverview.vue

@@ -3,20 +3,20 @@
         <div class="deviceOvery">
             <div class="alarm">
                 <div class="deviceIMG">
-                    <div class="deviceNum">{{DataOverview.totalDevices || '0'}} <span>个</span></div>
+                    <div class="deviceNum">{{ DataOverview.totalDevices || '0' }} <span>个</span></div>
                 </div>
                 <div class="deviceText">设备总数</div>
             </div>
 
             <div class="alarm">
                 <div class="deviceIMG">
-                    <div class="deviceNum">{{DataOverview.onlineDevices || '0'}} <span>个</span></div>
+                    <div class="deviceNum">{{ DataOverview.onlineDevices || '0' }} <span>个</span></div>
                 </div>
                 <div class="deviceText">在线数量</div>
             </div>
             <div class="alarm">
                 <div class="deviceIMG">
-                    <div class="deviceNum">{{DataOverview.deviceTypes || '0'}} <span>种</span></div>
+                    <div class="deviceNum">{{ DataOverview.deviceTypes || '0' }} <span>种</span></div>
                 </div>
                 <div class="deviceText">设备型号</div>
             </div>
@@ -26,15 +26,24 @@
 <script setup lang="ts">
 import { getDeviceOverview } from '@/api/homeIndex'
 const DataOverview = ref<any>({})
+const getData = () => {
+    getDeviceOverview({}).then((res) => {
+        if (res.code == 200) {
+            DataOverview.value = res.data
+        }
+
+    })
+}
 onMounted(() => {
-  getDeviceOverview({}).then((res) => {
+    getData();
-    if (res.code==200) {
-         DataOverview.value = res.data
-    }
-   
-  })
 })
 
+const timerAlarm = setInterval(() => {
+    getData();
+}, 300000);
+onUnmounted(() => {
+    clearInterval(timerAlarm);
+});
 </script>
 <style scoped lang="scss">
 .deviceOvery {
@@ -44,7 +53,7 @@ onMounted(() => {
     align-items: center;
     margin-top: 7.5vh;
     text-align: center;
-    font-size:0.7vw;
+    font-size: 0.7vw;
     color: #DEEFFF;
     padding: 1.5vw;
 }
@@ -57,14 +66,15 @@ onMounted(() => {
     position: relative;
 
 }
-.deviceText{
+
+.deviceText {
     padding-top: 1.5vh;
 }
 
-.deviceNum{
+.deviceNum {
     line-height: 12vh;
     display: inline-block;
-    position: relative; 
+    position: relative;
     background: radial-gradient(circle at center, #00FCFF 0%, #FFFFFF 49%);
     /* 兼容写法 */
     -webkit-background-clip: text;
@@ -75,7 +85,8 @@ onMounted(() => {
     font-size: 1.3vw;
     font-weight: 600;
 }
-.deviceNum span{
+
+.deviceNum span {
     font-size: 0.6vw;
 }
 </style>

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) {
+    initChart();
-        // 初始化图表实例
+    window.addEventListener('resize', handleResize);
-        myChart = echarts.init(chartRef.value);
+});
-        
+
-        // 初始图表配置（空数据占位）
+onUnmounted(() => {
-        const option = {
+    // 清除定时器
-            tooltip: {
+    clearDataTimer();
-                trigger: 'axis',
+    // 移除事件监听
-                axisPointer: { type: 'shadow' } // 柱状图建议使用阴影指示器
+    window.removeEventListener('resize', handleResize);
-            },
+    // 销毁图表实例
-            grid: {
+    if (myChart) {
-                left: '5%',
+        myChart.dispose();
-                right: '10%',
+        myChart = null;
-                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();
-        });
     }
 });
 </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 {

src/views/homeIndex/components/RealTimeAlarm.vue

@@ -5,66 +5,171 @@
             <div class="header-item">设备类型</div>
             <div class="header-item">设备IMEI</div>
             <div class="header-item">报警事件</div>
-            <div class="header-item ">报警位置</div>
+            <div class="header-item">报警位置</div>
         </div>
-        <div class="alarm-table-body" ref="tableBody"
+        <div class="alarm-table-body">
-            :style="{ animationDuration: `${alarmData.length * 2}s`, animationTimingFunction: 'linear' }">
+            <div ref="tableBody" class="alarm-table-body-inner">
-            <div v-for="(item, index) in alarmData" :key="index" class="alarm-item">
+                <!-- 第一份数据 -->
-                <div class="item-cell">{{ item.startTime }}</div>
+                <div v-for="(item, index) in displayData" :key="`first-${getKey(item, index)}`" class="alarm-item">
-                <div class="item-cell">{{ item.deviceTypeName }}</div>
+                    <div class="item-cell">{{ item.startTime }}</div>
-                <div class="item-cell">{{ item.deviceImei }}</div>
+                    <div class="item-cell">{{ item.deviceTypeName }}</div>
-                <div class="item-cell alarm-event">
+                    <div class="item-cell">{{ item.deviceImei }}</div>
-                    {{ {
+                    <div class="item-cell alarm-event">
-                        0: '强制报警',
+                        {{ getEventName(item.deviceAction) }}
-                        1: '撞击闯入',
+                    </div>
-                        2: '自动报警',
+                    <div class="item-cell loaction">{{ item.location }}</div>
-                        3: '电子围栏告警'
+                </div>
-                    }[item.deviceAction] }}
+                <!-- 第二份数据（用于无缝滚动） -->
-
+                <div v-for="(item, index) in displayData" :key="`second-${getKey(item, index)}`" class="alarm-item">
+                    <div class="item-cell">{{ item.startTime }}</div>
+                    <div class="item-cell">{{ item.deviceTypeName }}</div>
+                    <div class="item-cell">{{ item.deviceImei }}</div>
+                    <div class="item-cell alarm-event">
+                        {{ getEventName(item.deviceAction) }}
+                    </div>
+                    <div class="item-cell loaction">{{ item.location }}</div>
                 </div>
-                <div class="item-cell loaction">{{ item.location }}</div>
             </div>
         </div>
     </div>
 </template>
+
 <script setup>
 import { getRealtimeAlarm } from '@/api/homeIndex/index';
+
 let alarmTimer = null;
-// 模拟报警数据
+const alarmData = ref([]);
-const alarmData = ref([
+const displayData = ref([]); // 显示的数据（复制一份用于无缝滚动）
-]);
+const tableBody = ref(null);
+const isScrolling = ref(true);
+const animationId = ref(null);
+const scrollPosition = ref(0);
+const itemHeight = ref(0); // 动态计算每个条目的高度
+
+// 获取报警事件名称
+const getEventName = (action) => {
+    const eventMap = {
+        0: '强制报警',
+        1: '撞击闯入',
+        2: '自动报警',
+        3: '电子围栏告警'
+    };
+    return eventMap[action] || '未知报警';
+};
+
+// 获取实时报警数据
 const getRealtimeAlarmData = () => {
     getRealtimeAlarm().then((res) => {
-        alarmData.value = res.data;
+        if (res.data && res.data.length > 0) {
+            // 新数据插入到最前面
+            alarmData.value = [...res.data, ...alarmData.value];
+            
+            // 限制数据量，避免性能问题
+            if (alarmData.value.length > 10) {
+                alarmData.value = alarmData.value.slice(0, 10);
+            }
+            // 更新显示数据
+            updateDisplayData();
+            // 新数据插入时重置滚动位置
+            scrollPosition.value = 0;
+            if (tableBody.value) {
+                tableBody.value.style.transform = `translateY(0)`;
+            }
+        }
     });
-}
+};
+
+// 更新显示数据（复制一份用于无缝滚动）
+const updateDisplayData = () => {
+    displayData.value = [...alarmData.value];
+    // 计算每个条目的实际高度
+    nextTick(() => {
+        const items = document.querySelectorAll('.alarm-item');
+        if (items.length > 0) {
+            itemHeight.value = items[0].offsetHeight;
+        }
+    });
+};
+
+// 生成唯一的key
+const getKey = (item, index) => {
+    return `${item.deviceImei}_${item.startTime}_${index}`;
+};
+
+// 开始滚动动画
+const startScroll = () => {
+    if (!tableBody.value || displayData.value.length === 0) return;
+    stopScroll(); // 先停止之前的动画
+    const scrollSpeed = 0.3; // 滚动速度
+    const animate = () => {
+        if (!isScrolling.value) {
+            animationId.value = requestAnimationFrame(animate);
+            return;
+        }
+        
+        scrollPosition.value += scrollSpeed;
+        
+        // 当滚动超过一份数据的高度时，重置位置
+        if (itemHeight.value > 0 && scrollPosition.value >= itemHeight.value * displayData.value.length) {
+            scrollPosition.value = 0;
+        }
+        
+        // 应用滚动效果
+        if (tableBody.value) {
+            tableBody.value.style.transform = `translateY(-${scrollPosition.value}px)`;
+        }
+        
+        animationId.value = requestAnimationFrame(animate);
+    };
+    
+    animationId.value = requestAnimationFrame(animate);
+};
+
+// 停止滚动动画
+const stopScroll = () => {
+    if (animationId.value) {
+        cancelAnimationFrame(animationId.value);
+        animationId.value = null;
+    }
+};
+
+// 开始报警定时器
 const startAlarmTimer = () => {
     if (alarmTimer) {
         clearInterval(alarmTimer);
     }
     getRealtimeAlarmData();
-    alarmTimer = setInterval(getRealtimeAlarmData, 60 * 1000);
+    alarmTimer = setInterval(getRealtimeAlarmData, 30 * 10000);
 };
+
+// 清除报警定时器
 const clearAlarmTimer = () => {
     if (alarmTimer) {
         clearInterval(alarmTimer);
         alarmTimer = null;
     }
 };
-const tableBody = ref(null);
+
+// 监听数据变化
+watch(displayData, (newData) => {
+    if (newData.length > 0) {
+        // 延迟一点确保DOM已更新
+        setTimeout(() => {
+            startScroll();
+        }, 100);
+    }
+});
 
 onMounted(() => {
     startAlarmTimer();
-    // 启动滚动动画
-    if (tableBody.value) {
-        tableBody.value.style.animationName = 'scroll';
-        tableBody.value.style.animationIterationCount = 'infinite';
-    }
 });
+
 onUnmounted(() => {
-    clearAlarmTimer(); // 组件销毁时清除定时器
+    clearAlarmTimer();
-})
+    stopScroll();
+});
 </script>
+
 <style scoped lang="scss">
 .alarm-table-container {
     width: 100%;
@@ -90,28 +195,13 @@ onUnmounted(() => {
 
 .alarm-table-body {
     height: 18vh;
-    /* 可根据需求调整高度 */
+    overflow: hidden;
-    overflow: auto;
     color: #fff;
+    position: relative;
 }
 
-/* Webkit浏览器滚动条样式 */
+.alarm-table-body-inner {
-.alarm-table-body::-webkit-scrollbar {
+    transition: transform 0.1s linear;
-    width: 8px;
-}
-
-.alarm-table-body::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 4px;
-}
-
-.alarm-table-body::-webkit-scrollbar-thumb {
-    background: #267AD0;
-    border-radius: 4px;
-}
-
-.alarm-table-body::-webkit-scrollbar-thumb:hover {
-    background: #267AD0;
 }
 
 .alarm-item {
@@ -120,6 +210,8 @@ onUnmounted(() => {
     font-size: 0.6vw;
     align-items: center;
     padding: 0.8vw;
+    height: 7vh;
+    box-sizing: border-box;
 }
 
 .item-cell {
@@ -127,22 +219,17 @@ onUnmounted(() => {
     text-align: center;
 }
 
-// .item-cell.loaction{
-//     color: #267AD0;
-// }
 .alarm-event {
     color: #ff5252;
-    /* 报警事件红色显示 */
 }
 
-/* 滚动动画 */
+/* 隐藏滚动条 */
-@keyframes scroll {
+.alarm-table-body::-webkit-scrollbar {
-    0% {
+    display: none;
-        transform: translateY(0);
+}
-    }
 
-    100% {
+.alarm-table-body {
-        transform: translateY(-50%);
+    -ms-overflow-style: none;
-    }
+    scrollbar-width: none;
 }
 </style>

src/views/homeIndex/index.vue

@@ -105,6 +105,7 @@ const timer = setInterval(() => {
 // 组件卸载时清除定时器
 onUnmounted(() => {
   clearInterval(timer);
+  clearInterval(timerAlarm);
 });
 
 // 格式化时间
@@ -119,6 +120,11 @@ const getData = async () => {
     alarmOverview.value = res.data
   }
 }
+
+const timerAlarm = setInterval(() => {
+  getData();
+}, 300000);
+
 getData()
 onMounted(() => {