大屏样式修改

src/components/MineMonitor/LeftDeviceStatus.vue

@@ -105,6 +105,7 @@ onMounted(() => {
   padding-top: 0.45rem;
   // background: var(--n-bg-color-secondary);
   background-image: url("@/assets/jinrun/module-bg.png");
+background-size: cover;
   .card-title {
     position: absolute;
     left: 0.25rem;

src/components/MineMonitor/LeftRainfallTrend.vue

@@ -155,6 +155,7 @@ onUnmounted(() => {
   width: 100%;
   margin-top: 0.3rem;
   background-image: url("@/assets/jinrun/module-bg.png");
+background-size: cover;
   background-repeat: no-repeat;
   .chart-wrapper {
     display: flex;

src/components/MineMonitor/RightAiWarning.vue

@@ -160,6 +160,7 @@ defineExpose({
   width: 100%;
   overflow: auto;
   background-image: url("@/assets/jinrun/module-bg.png");
+background-size: cover;
   background-repeat: no-repeat;
 }
 

src/components/MineMonitor/RightEnvMonitor.vue

@@ -50,6 +50,7 @@
   position: relative;
   padding: 0.15rem;
   padding-top: 0.45rem;
+      margin-top: .26rem;
 
   .card-title {
     position: absolute;
@@ -63,6 +64,7 @@
   width: 100%;
   margin-top: 0.3rem;
   background-image: url("@/assets/jinrun/module-bg.png");
+background-size: cover;
   background-repeat: no-repeat;
 }
 

src/components/MineMonitor/RightTodayAlarm.vue

@@ -23,7 +23,7 @@
             <span>报警时间</span>
           </dt>
           <template v-for="(item, index) in sosData" :key="index">
-            <dd class="list-item">
+            <dd class="list-item" :class="getItemClass(item)">
               <span>{{ item.name }}</span>
               <span>{{ item.cardNumber }}</span>
               <span>{{ item.alarmTime }}</span>
@@ -45,7 +45,7 @@
             <span>报警时间</span>
           </dt>
           <template v-for="(item, index) in vehicleData" :key="index">
-            <dd class="list-item">
+            <dd class="list-item" :class="getItemClass(item)">
               <span>{{ item.vehicleOrDriver }}</span>
               <span>{{ item.plateNumber }}</span>
               <span>{{ item.alarmType }}</span>
@@ -66,7 +66,7 @@
             <span>越界时间</span>
           </dt>
           <template v-for="(item, index) in boundaryData" :key="index">
-            <dd class="list-item">
+            <dd class="list-item" :class="getItemClass(item)">
               <span>{{ item.personOrVehicle }}</span>
               <span>{{ item.cardOrPlate }}</span>
               <span>{{ item.boundaryTime }}</span>
@@ -87,7 +87,7 @@
             <span>报警时间</span>
           </dt>
           <template v-for="(item, index) in monitorData" :key="index">
-            <dd class="list-item">
+            <dd class="list-item" :class="getItemClass(item)">
               <span>{{ item.deviceName }}</span>
               <span>{{ item.monitorValue }}</span>
               <span>{{ item.alarmLevel }}</span>
@@ -128,27 +128,39 @@ 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' }
+  { 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 boundaryData = ref([
-  { personOrVehicle: '李四', cardOrPlate: 'K00123', boundaryTime: '2025-01-10 14:21:31' },
-  { personOrVehicle: '挖掘机01', cardOrPlate: '鲁C56789', boundaryTime: '2025-01-10 13:45:12' },
-  { personOrVehicle: '王五', cardOrPlate: 'K00456', boundaryTime: '2025-01-10 12:30:55' },
-  { personOrVehicle: '卡车02', cardOrPlate: '鲁C98765', boundaryTime: '2025-01-10 11:20:33' }
+  { 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 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' }
+  { 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' }
 ])
 
+// 根据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 initScroll = () => {
   // 清除之前的定时器
@@ -235,8 +247,10 @@ onBeforeUnmount(() => {
   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;
@@ -361,6 +375,24 @@ onBeforeUnmount(() => {
       text-align: right;
     }
   }
+  
+  &.status-chengse {
+    span {
+      color: #FF852B;
+    }
+  }
+  
+  &.status-lanse {
+    span {
+      color: #28CAFF;
+    }
+  }
+  
+  &.status-huangse {
+    span {
+      color: #FFD118;
+    }
+  }
 }
 
 .no-data {

src/typings/components.d.ts

@@ -37,6 +37,7 @@ declare module 'vue' {
     NCard: typeof import('naive-ui')['NCard']
     NCheckbox: typeof import('naive-ui')['NCheckbox']
     NColorPicker: typeof import('naive-ui')['NColorPicker']
+    NDataTable: typeof import('naive-ui')['NDataTable']
     NDialogProvider: typeof import('naive-ui')['NDialogProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NDrawer: typeof import('naive-ui')['NDrawer']
@@ -102,6 +103,7 @@ declare global {
   const NCard: typeof import('naive-ui')['NCard']
   const NCheckbox: typeof import('naive-ui')['NCheckbox']
   const NColorPicker: typeof import('naive-ui')['NColorPicker']
+  const NDataTable: typeof import('naive-ui')['NDataTable']
   const NDialogProvider: typeof import('naive-ui')['NDialogProvider']
   const NDivider: typeof import('naive-ui')['NDivider']
   const NDrawer: typeof import('naive-ui')['NDrawer']

src/views/_builtin/cesiumDeom/index.vue

@@ -115,22 +115,31 @@ const active = ref(false);
 
 // REM自适应配置
 const REM_CONFIG = {
-  // 设计稿宽度
+  // 设计稿尺寸
   designWidth: 1920,
+  designHeight: 1080,
   // 基准值：1rem = 100px
   baseSize: 100,
 };
 
 /**
  * 设置REM单位
- * 根据窗口宽度动态计算根元素font-size
+ * 根据窗口宽度和高度动态计算根元素font-size
+ * 取宽度和高度缩放比例的最小值，确保内容完整显示
  */
 const setRemUnit = () => {
-  const { designWidth, baseSize } = REM_CONFIG;
-  // 获取当前窗口宽度
+  const { designWidth, designHeight, baseSize } = REM_CONFIG;
+  // 获取当前窗口尺寸
   const windowWidth = window.innerWidth;
-  // 计算缩放比例
-  const scale = windowWidth / designWidth;
+  const windowHeight = window.innerHeight;
+  
+  // 计算宽高缩放比例
+  const scaleX = windowWidth / designWidth;
+  const scaleY = windowHeight / designHeight;
+  
+  // 取较小的缩放比例以适应屏幕，确保内容不会被裁剪
+  const scale = Math.min(scaleX, scaleY);
+  
   // 设置根元素font-size，确保最小为50px（可选）
   const fontSize = Math.max(baseSize * scale, 50);
   document.documentElement.style.fontSize = `${fontSize}px`;
@@ -324,7 +333,7 @@ const navTo = () => {
   height: 0.4rem;
   // height: 0.52rem;
   background-image: url("@/assets/jinrun/bottom.png");
-  background-size: contain;
+  background-size: cover;
 }
 .left {
   top: 0rem;
@@ -375,7 +384,7 @@ const navTo = () => {
 
   &.left-toggle {
     // left: 4.65rem; /* 与左侧模块宽度一致 */
-    left: 4.9rem; /* 与左侧模块宽度一致 */
+    left: 5rem; /* 与左侧模块宽度一致 */
 
     background-image: url("@/assets/jinrun/toggle-left.png");
   }
@@ -385,7 +394,7 @@ const navTo = () => {
 
   &.right-toggle {
     // right: 4.65rem;; /* 与右侧模块宽度一致 */
-     right: 4.9rem; /* 与左侧模块宽度一致 */
+     right: 5rem; /* 与左侧模块宽度一致 */
     background-image: url("@/assets/jinrun/toggle-right.png");
   }
   &.right-toggle:hover {
@@ -506,7 +515,7 @@ const navTo = () => {
   width: 4.6rem;
   // background: pink;
   // margin-top: .6rem;
-  padding-top: 1rem;
+  padding-top: .95rem;
   position: absolute;
 }
 
@@ -565,4 +574,11 @@ const navTo = () => {
   display: flex;
   align-items: center;
 }
+
+// 添加全局样式以防止页面出现滚动条
+html, body {
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
 </style>
\ No newline at end of file