大屏接口对接-alarm scroll auto

src/components/MineMonitor/RightTodayAlarm.vue

@@ -7,7 +7,7 @@
         :key="index"
         class="tab-item"
         :class="{ active: activeTab === index }"
-        @click="activeTab = index"
+        @click="handleTabChange(index)"
       >
         {{ tab.name }}({{ tab.count }})
       </div>
@@ -22,6 +22,7 @@
             <span>定位卡号</span>
             <span>报警时间</span>
           </dt>
+          <template v-if="sosData.length > 0">
             <template v-for="(item, index) in sosData" :key="index">
               <dd class="list-item" :class="getItemClass(item)">
                 <span>{{ item.realName }}</span>
@@ -32,6 +33,10 @@
                 </span>
               </dd>
             </template>
+          </template>
+          <template v-else>
+            <dd class="no-data">暂无数据</dd>
+          </template>
         </dl>
       </div>
     </div>
@@ -46,6 +51,7 @@
             <span>报警类型</span>
             <span>报警时间</span>
           </dt>
+          <template v-if="vehicleData.length > 0">
             <template v-for="(item, index) in vehicleData" :key="index">
               <dd class="list-item" :class="getItemClass(item)">
                 <span>{{ item.driver }}</span>
@@ -57,6 +63,10 @@
                 </span>
               </dd>
             </template>
+          </template>
+          <template v-else>
+            <dd class="no-data">暂无数据</dd>
+          </template>
         </dl>
       </div>
     </div>
@@ -70,6 +80,7 @@
             <span>定位卡号/车牌号</span>
             <span>越界时间</span>
           </dt>
+          <template v-if="boundaryData.length > 0">
             <template v-for="(item, index) in boundaryData" :key="index">
               <dd class="list-item" :class="getItemClass(item)">
                 <span>{{ item.driver }}</span>
@@ -80,6 +91,10 @@
                 </span>
               </dd>
             </template>
+          </template>
+          <template v-else>
+            <dd class="no-data">暂无数据</dd>
+          </template>
         </dl>
       </div>
     </div>
@@ -94,6 +109,7 @@
             <span>报警级别</span>
             <span>报警时间</span>
           </dt>
+          <template v-if="monitorData.length > 0">
             <template v-for="(item, index) in monitorData" :key="index">
               <dd class="list-item" :class="getItemClass(item)">
                 <span>{{ item.equipname }}</span>
@@ -105,6 +121,10 @@
                 </span>
               </dd>
             </template>
+          </template>
+          <template v-else>
+            <dd class="no-data">暂无数据</dd>
+          </template>
         </dl>
       </div>
     </div>
@@ -112,15 +132,14 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount, computed } from 'vue'
+import { ref, onMounted, onBeforeUnmount, computed, watch, nextTick } from 'vue'
 import { getSosList, getCarAlarmList, getFenceLogList, getOnlineAlarmList } from '@/api/index-dp';
- import {
+import {
   useMessage
 } from 'naive-ui';
 
 const message = useMessage();
 
-
 // 激活的tab索引
 const activeTab = ref(0)
 
@@ -137,28 +156,13 @@ let scrollTimer = null
 const sosData = ref([])
 
 // 车辆报警数据
-const vehicleData = ref([
-  // { vehicleOrDriver: '货车01', plateNumber: '鲁C12345', alarmType: '超速', alarmTime: '2025-01-10 14:21:31', status: 'chengse' },
-  // { vehicleOrDriver: '货车02', plateNumber: '鲁C12346', alarmType: '偏离路线', alarmTime: '2025-01-10 13:15:22', status: 'lanse' },
-  // { vehicleOrDriver: '张三', plateNumber: '鲁C12347', alarmType: '疲劳驾驶', alarmTime: '2025-01-10 12:05:47', status: 'huangse' }
-])
-
+const vehicleData = ref([])
 
 // 越界开采数据
-const boundaryData = ref([
-  // { personOrVehicle: '李四', cardOrPlate: 'K00123', boundaryTime: '2025-01-10 14:21:31', status: 'chengse' },
-  // { personOrVehicle: '挖掘机01', cardOrPlate: '鲁C56789', boundaryTime: '2025-01-10 13:45:12', status: 'lanse' },
-  // { personOrVehicle: '王五', cardOrPlate: 'K00456', boundaryTime: '2025-01-10 12:30:55', status: 'huangse' },
-  // { personOrVehicle: '卡车02', cardOrPlate: '鲁C98765', boundaryTime: '2025-01-10 11:20:33', status: 'chengse' }
-])
+const boundaryData = ref([])
 
 // 在线监测数据
-const monitorData = ref([
-  // { deviceName: '边坡表面位移01', monitorValue: '0.0047mm', alarmLevel: '橙色预警', alarmTime: '2025-01-10 14:21:31', status: 'chengse' },
-  // { deviceName: '降雨量', monitorValue: '50.2mm', alarmLevel: '蓝色预警', alarmTime: '2025-01-10 13:15:22', status: 'lanse' },
-  // { deviceName: '温度传感器01', monitorValue: '38.5℃', alarmLevel: '黄色预警', alarmTime: '2025-01-10 12:05:47', status: 'huangse' },
-  // { deviceName: '湿度传感器02', monitorValue: '85%RH', alarmLevel: '蓝色预警', alarmTime: '2025-01-10 11:30:15', status: 'lanse' }
-])
+const monitorData = ref([])
 
 const fetchSosData = async () => {
   const response = await getSosList();
@@ -170,6 +174,7 @@ const fetchSosData = async () => {
     message.error(response.data.msg)
   }
 }
+
 const fetchvehicleData = async () => {
   const response = await getCarAlarmList();
   if (response.data.code == 200) {
@@ -178,6 +183,7 @@ const fetchvehicleData = async () => {
     message.error(response.data.msg)
   }
 }
+
 const fetchFenceData = async () => {
   const response = await getFenceLogList();
   if (response.data.code == 200) {
@@ -186,6 +192,7 @@ const fetchFenceData = async () => {
     message.error(response.data.msg)
   }
 }
+
 const fetchMonitorData = async () => {
   const response = await getOnlineAlarmList();
   if (response.data.code == 200) {
@@ -195,7 +202,6 @@ const fetchMonitorData = async () => {
   }
 }
 
-
 // 定义tabs 使用computed使其具有响应性
 const tabs = computed(() => [
   { name: 'SOS报警', count: sosData.value.length },
@@ -204,10 +210,6 @@ const tabs = computed(() => [
   { name: '在线监测', count: monitorData.value.length }
 ])
 
-
-
-
-
 // 根据status获取对应的class
 const getItemClass = (item) => {
   if (item.alarmlevel === '橙色预警') {
@@ -249,15 +251,24 @@ const initScroll = () => {
   
   // 如果没有数据或容器不存在，则不启动滚动
   if (!wrapper || wrapper.scrollHeight <= wrapper.clientHeight) {
+    console.log("不满足滚动条件：wrapper存在?", !!wrapper, "scrollHeight:", wrapper ? wrapper.scrollHeight : "N/A", "clientHeight:", wrapper ? wrapper.clientHeight : "N/A")
     return
   }
   
+  console.log("开始滚动，容器:", wrapper, "scrollHeight:", wrapper.scrollHeight, "clientHeight:", wrapper.clientHeight)
+  
   // 设置初始滚动方向为向下
   let direction = 1
   const step = 1
   
   // 启动自动滚动
   scrollTimer = setInterval(() => {
+    // 确保元素仍然存在
+    if (!wrapper) {
+      clearInterval(scrollTimer)
+      return
+    }
+    
     // 计算新的滚动位置
     const newScrollTop = wrapper.scrollTop + (step * direction)
     
@@ -281,17 +292,24 @@ const initScroll = () => {
 const handleTabChange = (index) => {
   activeTab.value = index
   // 延迟执行以确保DOM更新完成
-  setTimeout(initScroll, 100)
+  nextTick(() => {
+    initScroll()
+  })
 }
 
+// 监听数据变化，重新初始化滚动
+watch([sosData, vehicleData, boundaryData, monitorData], () => {
+  nextTick(() => {
+    initScroll()
+  })
+})
+
 // 组件挂载时初始化滚动
 onMounted(() => {
-  initScroll()
   fetchSosData()
   fetchvehicleData()
   fetchFenceData()
   fetchMonitorData()
-
 })
 
 // 组件卸载前清除定时器