今日报警信息 表格样式调整

src/components/MineMonitor/RightTodayAlarm.vue

 <template>
-   <div class="wrapper">
+  <div class="wrapper">
     <h2 class="card-title">今日报警信息</h2>
-      <div class="alarm-tabs">
+    <div class="alarm-tabs">
       <div 
         v-for="(tab, index) in tabs" 
         :key="index"
@@ -13,50 +13,95 @@
       </div>
     </div>
     
-    <!-- SOS报警表格 -->
-    <div v-show="activeTab === 0" class="table-container">
-      <n-data-table
-        :columns="sosColumns"
-        :data="sosData"
-        :bordered="false"
-        size="small"
-      />
+    <!-- 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>
+          <template v-for="(item, index) in sosData" :key="index">
+            <dd class="list-item">
+              <span>{{ item.name }}</span>
+              <span>{{ item.cardNumber }}</span>
+              <span>{{ item.alarmTime }}</span>
+            </dd>
+          </template>
+          <dd v-if="sosData.length === 0" class="no-data">暂无SOS报警数据</dd>
+        </dl>
+      </div>
     </div>
     
-    <!-- 车辆报警表格 -->
-    <div v-show="activeTab === 1" class="table-container">
-      <n-data-table
-        :columns="vehicleColumns"
-        :data="vehicleData"
-        :bordered="false"
-        size="small"
-      />
+    <!-- 车辆报警列表 -->
+    <div v-show="activeTab === 1" class="list-container">
+      <div class="scroll-wrapper" ref="vehicleScrollWrapper">
+        <dl class="alarm-list">
+          <dt class="list-header">
+            <span>车辆/司机名称</span>
+            <span>车牌号</span>
+            <span>报警类型</span>
+            <span>报警时间</span>
+          </dt>
+          <template v-for="(item, index) in vehicleData" :key="index">
+            <dd class="list-item">
+              <span>{{ item.vehicleOrDriver }}</span>
+              <span>{{ item.plateNumber }}</span>
+              <span>{{ item.alarmType }}</span>
+              <span>{{ item.alarmTime }}</span>
+            </dd>
+          </template>
+        </dl>
+      </div>
     </div>
     
-    <!-- 越界开采表格 -->
-    <div v-show="activeTab === 2" class="table-container">
-      <n-data-table
-        :columns="boundaryColumns"
-        :data="boundaryData"
-        :bordered="false"
-        size="small"
-      />
+    <!-- 越界开采列表 -->
+    <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>
+          <template v-for="(item, index) in boundaryData" :key="index">
+            <dd class="list-item">
+              <span>{{ item.personOrVehicle }}</span>
+              <span>{{ item.cardOrPlate }}</span>
+              <span>{{ item.boundaryTime }}</span>
+            </dd>
+          </template>
+        </dl>
+      </div>
     </div>
     
-    <!-- 在线监测表格 -->
-    <div v-show="activeTab === 3" class="table-container">
-      <n-data-table
-        :columns="monitorColumns"
-        :data="monitorData"
-        :bordered="false"
-        size="small"
-      />
+    <!-- 在线监测列表 -->
+    <div v-show="activeTab === 3" class="list-container">
+      <div class="scroll-wrapper" ref="monitorScrollWrapper">
+        <dl class="alarm-list">
+          <dt class="list-header">
+            <span>设备名称</span>
+            <span>监测值</span>
+            <span>报警级别</span>
+            <span>报警时间</span>
+          </dt>
+          <template v-for="(item, index) in monitorData" :key="index">
+            <dd class="list-item">
+              <span>{{ item.deviceName }}</span>
+              <span>{{ item.monitorValue }}</span>
+              <span>{{ item.alarmLevel }}</span>
+              <span>{{ item.alarmTime }}</span>
+            </dd>
+          </template>
+        </dl>
+      </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 
 // 定义tabs
 const tabs = ref([
@@ -69,39 +114,26 @@ const tabs = ref([
 // 激活的tab索引
 const activeTab = ref(0)
 
-// SOS报警表格列
-const sosColumns = ref([
-  { title: '人员姓名', key: 'name' },
-  { title: '定位卡号', key: 'cardNumber' },
-  { title: '报警时间', key: 'alarmTime' }
-])
+// 滚动相关的引用
+const sosScrollWrapper = ref(null)
+const vehicleScrollWrapper = ref(null)
+const boundaryScrollWrapper = ref(null)
+const monitorScrollWrapper = ref(null)
 
-// SOS报警表格数据
-const sosData = ref([])
+// 滚动定时器
+let scrollTimer = null
 
-// 车辆报警表格列
-const vehicleColumns = ref([
-  { title: '车辆/司机名称', key: 'vehicleOrDriver' },
-  { title: '车牌号', key: 'plateNumber' },
-  { title: '报警类型', key: 'alarmType' },
-  { title: '报警时间', key: 'alarmTime' }
-])
+// SOS报警数据
+const sosData = ref([])
 
-// 车辆报警表格数据
+// 车辆报警数据
 const vehicleData = ref([
   { vehicleOrDriver: '货车01', plateNumber: '鲁C12345', alarmType: '超速', alarmTime: '2025-01-10 14:21:31' },
   { vehicleOrDriver: '货车02', plateNumber: '鲁C12346', alarmType: '偏离路线', alarmTime: '2025-01-10 13:15:22' },
   { vehicleOrDriver: '张三', plateNumber: '鲁C12347', alarmType: '疲劳驾驶', alarmTime: '2025-01-10 12:05:47' }
 ])
 
-// 越界开采表格列
-const boundaryColumns = ref([
-  { title: '人员/车辆名称', key: 'personOrVehicle' },
-  { title: '定位卡号/车牌号', key: 'cardOrPlate' },
-  { title: '越界时间', key: 'boundaryTime' }
-])
-
-// 越界开采表格数据
+// 越界开采数据
 const boundaryData = ref([
   { personOrVehicle: '李四', cardOrPlate: 'K00123', boundaryTime: '2025-01-10 14:21:31' },
   { personOrVehicle: '挖掘机01', cardOrPlate: '鲁C56789', boundaryTime: '2025-01-10 13:45:12' },
@@ -109,21 +141,87 @@ const boundaryData = ref([
   { personOrVehicle: '卡车02', cardOrPlate: '鲁C98765', boundaryTime: '2025-01-10 11:20:33' }
 ])
 
-// 在线监测表格列
-const monitorColumns = ref([
-  { title: '设备名称', key: 'deviceName' },
-  { title: '监测值', key: 'monitorValue' },
-  { title: '报警级别', key: 'alarmLevel' },
-  { title: '报警时间', key: 'alarmTime' }
-])
-
-// 在线监测表格数据
+// 在线监测数据
 const monitorData = ref([
   { deviceName: '边坡表面位移01', monitorValue: '0.0047mm', alarmLevel: '橙色预警', alarmTime: '2025-01-10 14:21:31' },
   { deviceName: '降雨量', monitorValue: '50.2mm', alarmLevel: '蓝色预警', alarmTime: '2025-01-10 13:15:22' },
   { deviceName: '温度传感器01', monitorValue: '38.5℃', alarmLevel: '黄色预警', alarmTime: '2025-01-10 12:05:47' },
   { deviceName: '湿度传感器02', monitorValue: '85%RH', alarmLevel: '蓝色预警', alarmTime: '2025-01-10 11:30:15' }
 ])
+
+// 初始化滚动
+const initScroll = () => {
+  // 清除之前的定时器
+  if (scrollTimer) {
+    clearInterval(scrollTimer)
+    scrollTimer = null
+  }
+  
+  // 获取当前激活的滚动容器
+  let wrapper = null
+  switch(activeTab.value) {
+    case 0:
+      wrapper = sosScrollWrapper.value
+      break
+    case 1:
+      wrapper = vehicleScrollWrapper.value
+      break
+    case 2:
+      wrapper = boundaryScrollWrapper.value
+      break
+    case 3:
+      wrapper = monitorScrollWrapper.value
+      break
+  }
+  
+  // 如果没有数据或容器不存在，则不启动滚动
+  if (!wrapper || wrapper.scrollHeight <= wrapper.clientHeight) {
+    return
+  }
+  
+  // 设置初始滚动方向为向下
+  let direction = 1
+  const step = 1
+  
+  // 启动自动滚动
+  scrollTimer = setInterval(() => {
+    // 计算新的滚动位置
+    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)
+}
+
+// 当tab切换时重新初始化滚动
+const handleTabChange = (index) => {
+  activeTab.value = index
+  // 延迟执行以确保DOM更新完成
+  setTimeout(initScroll, 100)
+}
+
+// 组件挂载时初始化滚动
+onMounted(() => {
+  initScroll()
+})
+
+// 组件卸载前清除定时器
+onBeforeUnmount(() => {
+  if (scrollTimer) {
+    clearInterval(scrollTimer)
+  }
+})
 </script>
 
 <style scoped lang="scss">
@@ -133,8 +231,11 @@ const monitorData = ref([
   height: 3rem;
   position: relative;
   padding: 0.15rem;
-      background-size: contain;
-  // padding-top: 0.45rem;
+  background-size: contain;
+  width: 100%;
+  margin-top: 0.3rem;
+  background-image: url("@/assets/jinrun/module-bg.png");
+  background-repeat: no-repeat;
 
   .card-title {
     position: absolute;
@@ -145,73 +246,129 @@ const monitorData = ref([
     color: #ffffff;
     text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
   }
-  width: 100%;
-  margin-top: 0.3rem;
-  background-image: url("@/assets/jinrun/module-bg.png");
-  background-repeat: no-repeat;
-  .chart-wrapper {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    width: 100%;
-    height: 100%;
-  }
-  .chart-container{
-    width: 100%;
-    height: 100%;
+}
+
+.alarm-tabs {
+  width: 4.4rem;
+  display: flex;
+  gap: 0.05rem;
+  margin-top: 0.18rem;
+  margin-bottom: 0.15rem;
+  flex-wrap: wrap;
+  color: #fff;
+}
+
+.tab-item {
+  padding: 0.05rem 0.1rem;
+  background: transparent;
+  cursor: pointer;
+  position: relative;
+  font-weight: 400;
+  font-size: 0.16rem;
+  color: #88DBBD;
+  
+  &.active {
+    color: var(--n-text-color-primary);
+    
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 80%;
+      height: 0.02rem;
+      background-color: #36a2eb;
+    }
   }
+}
 
+.list-container {
+  height: 2.2rem;
+  overflow: hidden;
 }
 
-  .alarm-tabs {
-    width: 4.4rem;
-    display: flex;
-    gap: 0.05rem;
-    margin-top: .18rem;
-    margin-bottom: 0.15rem;
-    flex-wrap: wrap;
-    color: #fff;
+.scroll-wrapper {
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  
+  &::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
   }
+}
 
-  .tab-item {
-    padding: 0.05rem 0.1rem;
-    background: transparent; // 背景色透明
-    cursor: pointer;
-    position: relative;
-    font-weight: 400;
-font-size: 0.16rem;
-color: #88DBBD;
+.alarm-list {
+  margin: 0;
+  padding: 0;
+}
+
+.list-header {
+  display: flex;
+  justify-content: space-between;
+  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;
+
+  position: sticky;
+  top: 0;
+  z-index: 10;
+  
+  span {
+    font-weight: 500;
+    font-size: 0.14rem;
+    color: #fff;
+    flex: 1;
+    text-align: center;
     
-    &.active {
-      color: var(--n-text-color-primary);
-      
-      &::after {
-        content: "";
-        position: absolute;
-        bottom: 0;
-        left: 50%;
-        transform: translateX(-50%);
-        width: 80%;
-        height: 0.02rem;
-        background-color: #36a2eb;
-      }
+    &:first-child {
+      text-align: left;
+    }
+    
+    &:last-child {
+      text-align: right;
     }
   }
+}
 
-  .table-container {
-    :deep(.n-data-table) {
-      background-color: transparent;
-      
-      .n-data-table-th,
-      .n-data-table-td {
-        background-color: transparent !important;
-        color: var(--n-text-color-primary);
-        border: none;
-      }
-      
-      .n-data-table-tr:hover .n-data-table-td {
-        background-color: rgba(50, 50, 50, 0.3) !important;
-      }
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 0.1rem;
+  margin-bottom: 0.05rem;
+  // 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;
+    color: #fff;
+    flex: 1;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    
+    &:first-child {
+      text-align: left;
+    }
+    
+    &:last-child {
+      text-align: right;
     }
   }
+}
+
+.no-data {
+  text-align: center;
+  color: var(--n-text-color-secondary);
+  padding: 0.2rem;
+  background: rgba(10, 25, 71, 0.3);
+  border-radius: 0.05rem;
+  margin: 0.1rem;
+}
 </style>
\ No newline at end of file