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

2025-09-30 13:31:30 +08:00
parent 7081f28ee0 cb9ea99008
commit 52d18cf408
7 changed files with 616 additions and 357 deletions
--- a/src/views/homeIndex/components/AlarmCount.vue
+++ b/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(() => {
-    if (chartRef.value) {
-        const myChart = echarts.init(chartRef.value);
+let myChart: echarts.ECharts | null = null;
+let dataTimer: NodeJS.Timeout | null = null;
+
+// 初始化图表
+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;
--- a/src/views/homeIndex/components/AlarmEvent.vue
+++ b/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);
-
-            // 窗口resize时，图表自适应
-            window.addEventListener('resize', () => {
-                myChart.resize();
-            });
+            window.addEventListener('resize', handleResize);
        }
    }, 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 {
--- a/src/views/homeIndex/components/DeviceCategory.vue
+++ b/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(() => {
-    if (chartRef.value) {
-        const myChart = echarts.init(chartRef.value);
+let myChart: echarts.ECharts | null = null; // 保存图表实例
+let dataTimer: NodeJS.Timeout | null = null;
+
+// 更新图表数据
+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;
--- a/src/views/homeIndex/components/DeviceOverview.vue
+++ b/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>
--- a/src/views/homeIndex/components/DeviceUsage.vue
+++ b/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 {
--- a/src/views/homeIndex/components/RealTimeAlarm.vue
+++ b/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"
-            :style="{ animationDuration: `${alarmData.length * 2}s`, animationTimingFunction: 'linear' }">
-            <div v-for="(item, index) in alarmData" :key="index" class="alarm-item">
+        <div class="alarm-table-body">
+            <div ref="tableBody" class="alarm-table-body-inner">
+                <!-- 第一份数据 -->
+                <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">
-                    {{ {
-                        0: '强制报警',
-                        1: '撞击闯入',
-                        2: '自动报警',
-                        3: '电子围栏告警'
-                    }[item.deviceAction] }}
-
+                        {{ getEventName(item.deviceAction) }}
+                    </div>
+                    <div class="item-cell loaction">{{ item.location }}</div>
+                </div>
+                <!-- 第二份数据（用于无缝滚动） -->
+                <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: auto;
+    overflow: hidden;
    color: #fff;
+    position: relative;
 }

-/* Webkit浏览器滚动条样式 */
-.alarm-table-body::-webkit-scrollbar {
-    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-table-body-inner {
+    transition: transform 0.1s linear;
 }

 .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 {
-    0% {
-        transform: translateY(0);
-    }
+/* 隐藏滚动条 */
+.alarm-table-body::-webkit-scrollbar {
+    display: none;
+}

-    100% {
-        transform: translateY(-50%);
-    }
+.alarm-table-body {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 </style>
--- a/src/views/homeIndex/index.vue
+++ b/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(() => {