大屏接口对接-alarm scroll auto header better

src/components/MineMonitor/LeftOnlineMonitor.vue

@@ -15,6 +15,7 @@
             
             <div class="scroll-wrapper" ref="vehicleScrollWrapper">
                 <dl class="alarm-list">
+                    <template v-if="tableData.length > 0">
                         <template v-for="(item, index) in tableData" :key="index">
                             <dd class="list-item" :class="getItemClass(item)">
                                 <span>{{ item.sensorname }}</span>
@@ -29,6 +30,10 @@
                                 <span>{{ item.state == 1 ? '报警' : '正常' }}</span>
                             </dd>
                         </template>
+                    </template>
+                    <template v-else>
+                        <dd class="no-data">暂无数据</dd>
+                    </template>
                 </dl>
             </div>
         </div>
@@ -36,16 +41,21 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue'
 import { getOnlineData } from '@/api/index-dp';
 
- import {
+import {
  useMessage
 } from 'naive-ui';
 
-
 const message = useMessage();
 
+// 滚动相关的引用
+const vehicleScrollWrapper = ref(null)
+
+// 滚动定时器
+let scrollTimer = null
+
 // 根据status获取对应的class
 const getItemClass = (item) => {
   if (item.state == 1) {
@@ -68,7 +78,6 @@ const getZValue = (value) => {
   return parts.length >= 3 ? `${parts[2]}  ${parts[3] || ''}` : '';
 }
 
-
 const columns = ref([
   { title: '设备名称', key: 'name', align: 'left' },
   { title: '监测值', key: 'value', align: 'center' },
@@ -76,34 +85,82 @@ const columns = ref([
   { title: '状态', key: 'status', align: 'center' },
 ]);
 
-// const tableData = ref([
-//   { name: '边坡表面位移01', value: 'x:0.047  y:0.047  z:0.047  mm', time: '2025-01-10 14:21:31', status: '正常' },
-//   { name: '降雨量', value: 'x:0.047  y:0.047  z:0.047  mm', time: '2025-01-10 14:21:31', status: '正常' },
-//   { name: '排土场表面位移03', value: 'x:0.047  y:0.047  z:0.047  mm', time: '2025-01-10 14:21:31', status: '报警' },
-//   { name: '边坡表面位移01', value: 'x:0.047  y:0.047  z:0.047  mm', time: '2025-01-10 14:21:31', status: '正常' },
-//   { name: '边坡表面位移01', value: 'x:0.047  y:0.047  z:0.047  mm', time: '2025-01-10 14:21:31', status: '正常' },
-//   { name: '边坡表面位移01', value: 'x:0.047  y:0.047  z:0.047  mm', time: '2025-01-10 14:21:31', status: '正常' },
-//   { name: '边坡表面位移01', value: 'x:0.047  y:0.047  z:0.047  mm', time: '2025-01-10 14:21:31', status: '正常' },
-//   { name: '边坡表面位移01', value: 'x:0.047  y:0.047  z:0.047  mm', time: '2025-01-10 14:21:31', status: '正常' }
-
-// ]);
 const tableData = ref([]);
 
+// 初始化滚动
+const initScroll = () => {
+  // 清除之前的定时器
+  if (scrollTimer) {
+    clearInterval(scrollTimer)
+    scrollTimer = null
+  }
+  
+  const wrapper = vehicleScrollWrapper.value
+  
+  // 如果没有数据或容器不存在，则不启动滚动
+  if (!wrapper || !tableData.value.length || wrapper.scrollHeight <= wrapper.clientHeight) {
+    console.log("不满足滚动条件：wrapper存在?", !!wrapper, "数据长度:", tableData.value.length, "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)
+    
+    // 判断是否到达顶部或底部
+    if (newScrollTop <= 0) {
+      // 到达顶部，改变方向向下
+      direction = 1
+      wrapper.scrollTop = 1
+    } else if (newScrollTop >= wrapper.scrollHeight - wrapper.clientHeight) {
+      // 到达底部，改变方向向上
+      direction = -1
+      wrapper.scrollTop = wrapper.scrollHeight - wrapper.clientHeight - 1
+    } else {
+      // 正常滚动
+      wrapper.scrollTop = newScrollTop
+    }
+  }, 50)
+}
+
 const fetchData = async () => {
   const response = await getOnlineData();
   if (response.data.code == 200) {
     tableData.value = response.data.data
+    
+    // 数据更新后，等待DOM更新再初始化滚动
+    nextTick(() => {
+      initScroll()
+    })
   } else {
     message.error(response.data.msg)
   }
 }
 
-
-  // 组件挂载时获取数据
+// 组件挂载时获取数据
 onMounted(() => {
   fetchData();
 });
 
+// 组件卸载前清除定时器
+onBeforeUnmount(() => {
+  if (scrollTimer) {
+    clearInterval(scrollTimer)
+  }
+});
 </script>
 
 <style scoped lang="scss">
@@ -265,4 +322,13 @@ onMounted(() => {
     }
   }
 }
+
+.no-data {
+  text-align: center;
+  color: #fff;
+  padding: 0.2rem;
+  background: rgba(10, 25, 71, 0.3);
+  border-radius: 0.05rem;
+  margin: 0.1rem;
+}
 </style>
\ No newline at end of file

src/components/MineMonitor/RightTodayAlarm.vue

@@ -15,13 +15,15 @@
     
     <!-- SOS报警列表 -->
     <div v-show="activeTab === 0" class="list-container">
-      <div class="scroll-wrapper" ref="sosScrollWrapper">
       <dl class="alarm-list">
         <dt class="list-header">
           <span>人员姓名</span>
           <span>定位卡号</span>
           <span>报警时间</span>
         </dt>
+      </dl>
+      <div class="scroll-wrapper" ref="sosScrollWrapper">
+        <dl class="alarm-list">
           <template v-if="sosData.length > 0">
             <template v-for="(item, index) in sosData" :key="index">
               <dd class="list-item" :class="getItemClass(item)">
@@ -43,7 +45,6 @@
     
     <!-- 车辆报警列表 -->
     <div v-show="activeTab === 1" class="list-container">
-      <div class="scroll-wrapper" ref="vehicleScrollWrapper">
       <dl class="alarm-list">
         <dt class="list-header">
           <span>车辆/司机名称</span>
@@ -51,6 +52,9 @@
           <span>报警类型</span>
           <span>报警时间</span>
         </dt>
+      </dl>
+      <div class="scroll-wrapper" ref="vehicleScrollWrapper">
+        <dl class="alarm-list">
           <template v-if="vehicleData.length > 0">
             <template v-for="(item, index) in vehicleData" :key="index">
               <dd class="list-item" :class="getItemClass(item)">
@@ -73,13 +77,15 @@
     
     <!-- 越界开采列表 -->
     <div v-show="activeTab === 2" class="list-container">
-      <div class="scroll-wrapper" ref="boundaryScrollWrapper">
       <dl class="alarm-list">
         <dt class="list-header">
           <span>人员/车辆名称</span>
           <span>定位卡号/车牌号</span>
           <span>越界时间</span>
         </dt>
+      </dl>
+      <div class="scroll-wrapper" ref="boundaryScrollWrapper">
+        <dl class="alarm-list">
           <template v-if="boundaryData.length > 0">
             <template v-for="(item, index) in boundaryData" :key="index">
               <dd class="list-item" :class="getItemClass(item)">
@@ -101,7 +107,6 @@
     
     <!-- 在线监测列表 -->
     <div v-show="activeTab === 3" class="list-container">
-      <div class="scroll-wrapper" ref="monitorScrollWrapper">
       <dl class="alarm-list">
         <dt class="list-header">
           <span>设备名称</span>
@@ -109,6 +114,9 @@
           <span>报警级别</span>
           <span>报警时间</span>
         </dt>
+      </dl>
+      <div class="scroll-wrapper" ref="monitorScrollWrapper">
+        <dl class="alarm-list">
           <template v-if="monitorData.length > 0">
             <template v-for="(item, index) in monitorData" :key="index">
               <dd class="list-item" :class="getItemClass(item)">
@@ -331,10 +339,10 @@ onBeforeUnmount(() => {
   width: 100%;
   margin-top: 0.3rem;
   background-image: url("@/assets/jinrun/module-bg.png");
-background-size: cover;
+  background-size: cover;
   background-repeat: no-repeat;
-
   margin-top: .26rem;
+  
   .card-title {
     position: absolute;
     left: 0.25rem;
@@ -384,17 +392,7 @@ background-size: cover;
 .list-container {
   height: 2.2rem;
   overflow: hidden;
-}
-
-.scroll-wrapper {
-  height: 100%;
-  overflow-y: auto;
-  scrollbar-width: none; /* Firefox */
-  -ms-overflow-style: none; /* IE 10+ */
-  
-  &::-webkit-scrollbar {
-    display: none; /* Chrome Safari */
-  }
+  margin-top: .2rem;
 }
 
 .alarm-list {
@@ -408,19 +406,11 @@ background-size: cover;
   padding: 0.1rem;
   // background: rgba(10, 25, 71, 0.8);
   background-image: url("@/assets/jinrun/table-header-bg.png");
-  // border-radius: 0.05rem;
-     /* margin-bottom: 0.05rem; */
   background-repeat: no-repeat;
   
-
-  position: sticky;
-  top: 0;
-  z-index: 10;
-  
   span {
     font-weight: 500;
     font-size: 0.14rem;
-    // color: #fff;
     color: #36F3FF;
     flex: 1;
     text-align: center;
@@ -435,16 +425,24 @@ background-size: cover;
   }
 }
 
+.scroll-wrapper {
+  height: calc(100% - 0.45rem); /* 减去header的高度 */
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  
+  &::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
+  }
+}
+
 .list-item {
   display: flex;
   justify-content: space-between;
   padding: 0.1rem;
   margin-bottom: 0.05rem;
   margin-top: .13rem;
-  // background: rgba(10, 25, 71, 0.6);
   background-color: #2a496d78;
-  // border-radius: 0.05rem;
-  // border-left: 0.03rem solid #36a2eb;
   
   span {
     font-size: 0.14rem;
@@ -496,6 +494,7 @@ background-size: cover;
       color: #FFD118;
     }
   }
+  
   &.status-hongse {
     span {
       color: #FF2C2C;