Merge branch 'main' of http://47.107.152.87:3000/liubiao/dyf-vue-ui

src/views/homeIndex/components/AlarmCount.vue

@@ -3,13 +3,25 @@
         <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);
+
+// 初始化图表
+const initChart = () => {
+    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月数据并转为数字
@@ -99,7 +111,7 @@ onMounted(() => {
                         ])
                     },
                     itemStyle: {
-                            color: (params) => {
+                        color: (params: any) => {
                            if (params.dataIndex === maxIndex) {
                                 return '#fff'; // 最大值的点标为白色
                             }
@@ -107,7 +119,7 @@ onMounted(() => {
                         }
                     },
                     label: {
-                            show: (params) => params.dataIndex === maxIndex,
+                        show: (params: any) => params.dataIndex === maxIndex,
                         position: 'top',
                         color: '#22E1DB',
                         formatter: '{c}', // 显示当前数据值
@@ -119,14 +131,50 @@ onMounted(() => {
 
         myChart.setOption(option);
     }).catch(err => {
+        console.error('获取月度报警统计数据失败:', err);
     });
+};
 
-        window.addEventListener('resize', () => {
+const handleResize = () => {
+    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,13 +3,18 @@
         <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(() => {
+let myChart: echarts.ECharts | null = null; // 保存图表实例
-    if (chartRef.value) {
+let dataTimer: NodeJS.Timeout | null = null;
-        const myChart = echarts.init(chartRef.value);
+
+// 更新图表数据
+const updateChartData = () => {
+    if (!myChart) return;
     
     getDeviceCommunicationModeStatistics().then((res) => {
         console.log(res, '接口数据');
@@ -101,13 +106,59 @@ onMounted(() => {
     }).catch(err => {
         console.log('获取数据失败', err);
     });
-        // 窗口 resize 时自适应
+};
-        window.addEventListener('resize', () => {
+
+// 处理窗口大小变化
+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>({})
-onMounted(() => {
+const getData = () => {
     getDeviceOverview({}).then((res) => {
-    if (res.code==200) {
+        if (res.code == 200) {
             DataOverview.value = res.data
         }
 
     })
+}
+onMounted(() => {
+    getData();
 })
 
+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,11 +66,12 @@ onMounted(() => {
     position: relative;
 
 }
-.deviceText{
+
+.deviceText {
     padding-top: 1.5vh;
 }
 
-.deviceNum{
+.deviceNum {
     line-height: 12vh;
     display: inline-block;
     position: relative;
@@ -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,14 +45,38 @@ const fetchDataAndUpdate = (days: number) => {
 // 切换标签逻辑
 const switchTab = (tab: string) => {
     activeTab.value = tab;
-    // 根据标签切换天数（近半月=15天，近半年=180天，按实际需求调整）
+    // 根据标签切换天数（近一月=30天，近半年=180天）
     const days = tab === 'month' ? 30 : 180;
     fetchDataAndUpdate(days);
+    
+    // 切换标签后重新启动定时器
+    startDataTimer();
 };
 
-onMounted(() => {
+// 开始数据定时器
-    if (chartRef.value) {
+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);
     
     // 初始图表配置（空数据占位）
@@ -110,11 +136,35 @@ onMounted(() => {
         }]
     };
     myChart.setOption(option);
+    
+    // 初始化数据
     fetchDataAndUpdate(30);
-        // 窗口resize自适应
+    
-        window.addEventListener('resize', () => {
+    // 启动定时器
-            myChart?.resize();
+    startDataTimer();
-        });
+};
+
+// 处理窗口大小变化
+const handleResize = () => {
+    if (myChart) {
+        myChart.resize();
+    }
+};
+
+onMounted(() => {
+    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 {

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 v-for="(item, index) in displayData" :key="`first-${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) }}
-                        0: '强制报警',
+                    </div>
-                        1: '撞击闯入',
+                    <div class="item-cell loaction">{{ item.location }}</div>
-                        2: '自动报警',
+                </div>
-                        3: '电子围栏告警'
+                <!-- 第二份数据（用于无缝滚动） -->
-                    }[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>
         </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(() => {