在线监测

src/components/MineMonitor/LeftOnlineMonitor.vue

 <template>
-  <n-card :bordered="false" class="online-monitor-card">
-    <div class="card-header">
+    <div class="wrapper">
       <h2 class="card-title">在线监测实时数据</h2>
+        <!-- SOS报警列表 -->
+
+        <div class="list-container">
+      <div class="scroll-wrapper" ref="vehicleScrollWrapper">
+        <dl class="alarm-list">
+          <dt class="list-header">
+            <span>设备名称</span>
+            <span>监测值</span>
+            <span>监测时间</span>
+          </dt>
+          <template v-for="(item, index) in tableData" :key="index">
+            <dd class="list-item" :class="getItemClass(item)">
+              <span>{{ item.name }}</span>
+              <span>{{ item.value }}</span>
+              <span>{{ item.time }}</span>
+            </dd>
+          </template>
+        </dl>
+      </div>
+    </div>
     </div>
-    <n-table
-      :columns="columns"
-      :data="tableData"
-      size="small"
-      :pagination="false"
-      class="monitor-table"
-    />
-  </n-card>
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+
+
+// 根据status获取对应的class
+const getItemClass = (item) => {
+  if (item.status === 'chengse') {
+    return 'status-chengse'
+  } else if (item.status === 'lanse') {
+    return 'status-lanse'
+  } else if (item.status === 'huangse') {
+    return 'status-huangse'
+  }
+  return ''
+}
+
+
 
 const columns = ref([
   { title: '设备名称', key: 'name', align: 'left' },
@@ -26,31 +52,143 @@ const tableData = ref([
   { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
   { name: '降雨量', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
   { name: '排土场表面位移03', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '预警' },
+  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
+  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
+  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
+  { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' },
   { name: '边坡表面位移01', value: '0.0047mm', time: '2025-01-10 14:21:31', status: '正常' }
+
 ]);
+
+
 </script>
 
 <style scoped lang="scss">
-.online-monitor-card {
+.wrapper {
+  overflow: visible;
+  width: 4.6rem;
+  height: 3rem;
+  position: relative;
   padding: 0.15rem;
-  background: var(--n-bg-color-secondary);
-
-  .card-header {
-    margin-bottom: 0.15rem;
-    .card-title {
-      font-size: 0.18rem;
-      font-weight: 600;
-      color: var(--n-text-color-primary);
-    }
+  background-size: contain;
+  width: 100%;
+  margin-top: 0.3rem;
+  background-image: url("@/assets/jinrun/module-bg.png");
+background-size: cover;
+  background-repeat: no-repeat;
+
+      margin-top: .26rem;
+  .card-title {
+    position: absolute;
+    left: 0.25rem;
+    top: -0.15rem;
+    font-weight: 500;
+    font-size: 0.2rem;
+    color: #ffffff;
+    text-shadow: 0rem 0rem 0rem rgba(5, 38, 68, 0.5);
   }
+}
 
-  .monitor-table {
-    max-height: 1.5rem;
-    overflow-y: auto;
-    --n-table-row-hover-bg-color: rgba(10, 25, 71, 0.4);
+.list-container {
+  height: 2.2rem;
+  overflow: hidden;
+}
 
-    .normal { color: #6dd230; }
-    .warning { color: #facc15; }
+.scroll-wrapper {
+  height: 100%;
+  overflow-y: auto;
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE 10+ */
+  
+  &::-webkit-scrollbar {
+    display: none; /* Chrome Safari */
   }
 }
+
+
+.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;
+    
+    &:first-child {
+      text-align: left;
+    }
+    
+    &:last-child {
+      text-align: right;
+    }
+  }
+}
+
+.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;
+    }
+  }
+  
+  &.status-chengse {
+    span {
+      color: #FF852B;
+    }
+  }
+  
+  &.status-lanse {
+    span {
+      color: #28CAFF;
+    }
+  }
+  
+  &.status-huangse {
+    span {
+      color: #FFD118;
+    }
+  }
+}
+
+.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

src/views/_builtin/cesiumDeom/index.vue

@@ -80,8 +80,7 @@
     <div class="left-modules" v-show="isLeftModulesVisible">
       <LeftDeviceStatus />
       <LeftRainfallTrend />
-      <!-- 
-      <LeftOnlineMonitor /> -->
+      <LeftOnlineMonitor />
     </div>
   </transition>
 
@@ -90,8 +89,6 @@
     <div class="right-modules" v-show="isRightModulesVisible">
       <RightAiWarning />
       <RightEnvMonitor />
-      
-      
       <RightTodayAlarm />
     </div>
   </transition>