[Model0000] 给模型添加监测数据，进行风门监测

src/views/vent/home/configurable/belt/belt-new.vue

@@ -3,7 +3,7 @@
   <div class="company-home">
     <!-- 顶部标题栏 + 下拉选择 -->
     <customHeader> 皮带巷智能管控 </customHeader>
-    <div class="modal-box" id="modalBox" v-if="pageType !== 'history'">
+    <div class="modal-box" id="modalBox" v-if="pageType !== 'history' && isInitModal">
       <Three3D ref="three3D" :modalName="'pidai'" class="modal-3d" @success="initModalAnimate" />
       <div class="modal-css3d" id="css3dContainer"> </div>
     </div>
@@ -60,194 +60,246 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref, watch, nextTick } from 'vue';
-import customHeader from './components/customHeader-belt.vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import { testBeltNew, testYjkf, testSpary } from './configurable.data';
-import ModuleCommon from './components/ModuleCommon.vue';
-import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
-import BeltNav from './components/BeltNav.vue';
-import { useRouter, useRoute } from 'vue-router';
-import { getSystem, getMonitorAndAlertBelt, getDevice } from './configurable.api';
-import { modalAnimate } from './threejs/belt.threejs';
-import History from './components/detail/history.vue';
-// 初始化配置
-const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
-// const pageType = computed(() => {
-//   const currentType = route.params.type as string;
-//   return currentType;
-// });
-const pageType = ref('');
-const route = useRoute();
-// 下拉框选项
-const beltOptions = [
-  { id: '1', beltName: '主运巷皮带 1' },
-  { id: '2', beltName: '主运巷皮带 2' },
-];
+  import { onMounted, ref, watch, nextTick } from 'vue';
+  import customHeader from './components/customHeader-belt.vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import { testBeltNew, testYjkf, testSpary } from './configurable.data';
+  import ModuleCommon from './components/ModuleCommon.vue';
+  import Three3D from '/@/views/vent/home/configurable/components/three3D.vue';
+  import BeltNav from './components/BeltNav.vue';
+  import { useRouter, useRoute } from 'vue-router';
+  import { getSystem, getMonitorAndAlertBelt, getDevice } from './configurable.api';
+  import { modalAnimate } from './threejs/belt.threejs';
+  import History from './components/detail/history.vue';
+  // 初始化配置
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
+  const isInitModal = ref(false);
+  // const pageType = computed(() => {
+  //   const currentType = route.params.type as string;
+  //   return currentType;
+  // });
+  const pageType = ref('fire_risk_warn');
+  const route = useRoute();
+  const modalMonitorData = ref({});
+  // 下拉框选项
+  const beltOptions = [
+    { id: '1', beltName: '主运巷皮带 1' },
+    { id: '2', beltName: '主运巷皮带 2' },
+  ];
 
-const selectedBeltId = ref('1');
+  const selectedBeltId = ref('1');
 
-// 模拟数据
-const readData = {
-  fmhjcInfo: [
-    {
-      beltName: '主运巷皮带1',
-      wz: { strtype: 'wz', avg: '111', max: '222', min: '333', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-      hcl: { strtype: 'HCl', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-      gx: { strtype: 'gx', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-      co: { strtype: 'CO', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: true, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
-      wd: { strtype: 'wd', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+  // 模拟数据
+  const readData = {
+    fmhjcInfo: [
+      {
+        beltName: '主运巷皮带1',
+        wz: { strtype: 'wz', avg: '111', max: '222', min: '333', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+        hcl: { strtype: 'HCl', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+        gx: { strtype: 'gx', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+        co: { strtype: 'CO', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: true, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+        wd: { strtype: 'wd', avg: 'XXX', max: 'XXX', min: 'XXX', alarm: false, pos: 'AAAA', maxTime: '2013-05-24 15:52:42' },
+      },
+    ],
+    pdhzfxInfo: [
+      {
+        beltName: '主运巷皮带1',
+        warningLevel: '一般风险',
+        sysList: [
+          {
+            time: '2026-03-21 13:23:34',
+            area: '3#皮带区域',
+            type: 'CO浓度异常',
+            status: '三级预警',
+            advice: '立即检查该区域设备，启动应急预案',
+            action: '启动喷淋',
+          },
+          {
+            time: '2026-03-21 13:23:34',
+            area: '3#皮带区域',
+            type: 'CO浓度异常',
+            status: '三级预警',
+            advice: '立即检查该区域设备，启动应急预案',
+            action: '启动喷淋',
+          },
+          {
+            time: '2026-03-21 13:23:34',
+            area: '3#皮带区域',
+            type: 'CO浓度异常',
+            status: '三级预警',
+            advice: '立即检查该区域设备，启动应急预案',
+            action: '启动喷淋',
+          },
+          {
+            time: '2026-03-21 13:23:34',
+            area: '3#皮带区域',
+            type: 'CO浓度异常',
+            status: '三级预警',
+            advice: '立即检查该区域设备，启动应急预案',
+            action: '启动喷淋',
+          },
+        ],
+      },
+    ],
+    sensorAnalysis: {
+      hy: { name: '火焰传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
+      wd: { name: '温度传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
+      yw: { name: '烟雾传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
     },
-  ],
-  pdhzfxInfo: [
-    {
-      beltName: '主运巷皮带1',
-      warningLevel: '一般风险',
-      sysList: [
+    vehicleCOAnalysis: {
+      isRisk: true,
+      activityList: [
         {
-          time: '2026-03-21 13:23:34',
-          area: '3#皮带区域',
-          type: 'CO浓度异常',
-          status: '三级预警',
-          advice: '立即检查该区域设备，启动应急预案',
-          action: '启动喷淋',
+          pos: '1#皮带区域',
+          vehicle: '车辆23425',
+          status: '0',
+          // vehicle2: '车辆53456',
+          // vehicle3: '未通过车辆',
+          // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
+          // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
+          // possibleCause: '皮带摩擦过热或电器设备故障',
+          // recommendation: '立即检查3#皮带区域设备',
         },
         {
-          time: '2026-03-21 13:23:34',
-          area: '3#皮带区域',
-          type: 'CO浓度异常',
-          status: '三级预警',
-          advice: '立即检查该区域设备，启动应急预案',
-          action: '启动喷淋',
+          pos: '2#皮带区域',
+          vehicle: '车辆53456',
+          status: '1',
         },
         {
-          time: '2026-03-21 13:23:34',
-          area: '3#皮带区域',
-          type: 'CO浓度异常',
-          status: '三级预警',
-          advice: '立即检查该区域设备，启动应急预案',
-          action: '启动喷淋',
+          pos: '3#皮带区域',
+          vehicle: '未通过车辆',
+          status: '0',
         },
+      ],
+      analysisList: [
         {
-          time: '2026-03-21 13:23:34',
-          area: '3#皮带区域',
-          type: 'CO浓度异常',
-          status: '三级预警',
-          advice: '立即检查该区域设备，启动应急预案',
-          action: '启动喷淋',
+          pos: '1#皮带区域',
+          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
+        },
+        {
+          pos: '1#皮带区域',
+          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
         },
       ],
+      possibleCause: '皮带摩擦过热或电器设备故障',
+      recommendation: '立即检查3#皮带区域设备',
     },
-  ],
-  sensorAnalysis: {
-    hy: { name: '火焰传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
-    wd: { name: '温度传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
-    yw: { name: '烟雾传感器', alarm: false, maxTime: '2013-05-24 15:52:42', pos: '' },
-  },
-  vehicleCOAnalysis: {
-    isRisk: true,
-    activityList: [
-      {
-        pos: '1#皮带区域',
-        vehicle: '车辆23425',
-        status: '0',
-        // vehicle2: '车辆53456',
-        // vehicle3: '未通过车辆',
-        // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
-        // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
-        // possibleCause: '皮带摩擦过热或电器设备故障',
-        // recommendation: '立即检查3#皮带区域设备',
-      },
+    sprayData: [
       {
-        pos: '2#皮带区域',
-        vehicle: '车辆53456',
-        status: '1',
+        beltArea: '1#皮带区域',
+        devicePosition: '1#皮带-50m处',
+        netStatus: '0', // 网络状态：0=断开，1=连接
+        runStatus: '1', // 运行状态：0=异常，1=正常
+        waterVolume: 86,
+        waterPressure: 1.4,
       },
       {
-        pos: '3#皮带区域',
-        vehicle: '未通过车辆',
-        status: '0',
+        beltArea: '2#皮带区域',
+        devicePosition: '2#皮带-120m处',
+        netStatus: '1',
+        runStatus: '1',
+        waterVolume: 72,
+        waterPressure: 0.8,
       },
-    ],
-    analysisList: [
       {
-        pos: '1#皮带区域',
-        analysisText: 'CO浓度异常升高，已确认为车辆干扰',
-      },
-      {
-        pos: '1#皮带区域',
-        analysisText: 'CO浓度异常升高，已确认为车辆干扰',
+        beltArea: '3#皮带区域',
+        devicePosition: '3#皮带-200m处',
+        netStatus: '1',
+        runStatus: '0',
+        waterVolume: 45,
+        waterPressure: 1.6,
       },
     ],
-    possibleCause: '皮带摩擦过热或电器设备故障',
-    recommendation: '立即检查3#皮带区域设备',
-  },
-  sprayData: [
-    {
-      beltArea: '1#皮带区域',
-      devicePosition: '1#皮带-50m处',
-      netStatus: '0', // 网络状态：0=断开，1=连接
-      runStatus: '1', // 运行状态：0=异常，1=正常
-      waterVolume: 86,
-      waterPressure: 1.4,
-    },
-    {
-      beltArea: '2#皮带区域',
-      devicePosition: '2#皮带-120m处',
-      netStatus: '1',
-      runStatus: '1',
-      waterVolume: 72,
-      waterPressure: 0.8,
-    },
-    {
-      beltArea: '3#皮带区域',
-      devicePosition: '3#皮带-200m处',
-      netStatus: '1',
-      runStatus: '0',
-      waterVolume: 45,
-      waterPressure: 1.6,
-    },
-  ],
-};
+  };
 
-// 下拉框切换处理
-function handleBeltChange(id: string) {
-  selectedBeltId.value = id;
-  refresh();
-}
+  // 下拉框切换处理
+  function handleBeltChange(id: string) {
+    selectedBeltId.value = id;
+    refresh();
+  }
 
-// 风险等级样式映射
-function getLevelClass(level: string) {
-  switch (level) {
-    case '重大风险':
-      return 'level-critical';
-    case '高风险':
-      return 'level-high';
-    case '一般风险':
-      return 'level-normal';
-    default:
-      return '';
+  // 风险等级样式映射
+  function getLevelClass(level: string) {
+    switch (level) {
+      case '重大风险':
+        return 'level-critical';
+      case '高风险':
+        return 'level-high';
+      case '一般风险':
+        return 'level-normal';
+      default:
+        return '';
+    }
   }
-}
-// 刷新数据
-function refresh() {
-  fetchConfigs('sys_Leather').then(() => {
-    console.log(pageType.value, '========');
+  // 刷新数据
+  async function refresh() {
+    // fetchConfigs('sys_Leather').then(() => {
+    //   console.log(pageType.value, '========');
+    //   if (pageType.value == 'fire_risk_warn') {
+    //     configs.value = testBeltNew;
+    //     const params = {
+    //       sysId: '1637983899775242242',
+    //       dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
+    //     };
+    //     Promise.resolve(getMonitorAndAlertBelt(params)).then(updateData);
+    //   } else if (pageType.value == 'emergencyControl') {
+    //     const params = {
+    //       devicetype: 'sys',
+    //       systemID: '1637983899775242242',
+    //       type: 'ventS',
+    //     };
+    //     Promise.resolve(getSystem(params)).then(updateData);
+    //     configs.value = testYjkf;
+    //   } else if (pageType.value == 'sprayControl') {
+    //     const params = {
+    //       devicetype: 'sys',
+    //       systemID: '2028657172566073346',
+    //     };
+    //     Promise.resolve(getDevice(params)).then((originalData) => {
+    //       updateData(originalData);
+    //       const sprayData: any[] = [];
+    //       if (data.value?.msgTxt) {
+    //         data.value.msgTxt.forEach((item) => {
+    //           const hasSprayAuto = item.type && item.type.toLowerCase().includes('spray_auto');
+    //           if (hasSprayAuto) {
+    //             sprayData.push({
+    //               ...item,
+    //               ...item.readData,
+    //             });
+    //           }
+    //         });
+    //       }
+    //       data.value.sprayData = sprayData;
+    //       updateData(data.value);
+    //     });
+    //     configs.value = testSpary;
+    //   } else {
+    //     configs.value = testBeltNew;
+    //   }
+    // });
+
+    // 由于模型中需要用到风门的监测数据，这里进行公共调用（后期精确调用风门）
+    const modalRes = {};
+    const systemParams = {
+      devicetype: 'sys',
+      systemID: '1637983899775242242',
+      type: 'ventS',
+    };
+    const resSys = await getSystem(systemParams);
+    Object.assign(modalRes, resSys);
     if (pageType.value == 'fire_risk_warn') {
       configs.value = testBeltNew;
       const params = {
         sysId: '1637983899775242242',
         dataList: 'fire_risk_warn,warn_result,vehicle_co_correlate',
       };
-      Promise.resolve(getMonitorAndAlertBelt(params)).then(updateData);
+      const resWarn = await getMonitorAndAlertBelt(params);
+      updateData(resWarn);
+      Object.assign(modalRes, resWarn);
     } else if (pageType.value == 'emergencyControl') {
-      const params = {
-        devicetype: 'sys',
-        systemID: '1637983899775242242',
-        type: 'ventS',
-      };
-      Promise.resolve(getSystem(params)).then(updateData);
+      //
+      updateData(resSys);
       configs.value = testYjkf;
     } else if (pageType.value == 'sprayControl') {
       const params = {
@@ -275,197 +327,208 @@ function refresh() {
     } else {
       configs.value = testBeltNew;
     }
-  });
-}
+    modalMonitorData.value = modalRes;
+  }
 
-// // 定时刷新
-function initInterval() {
-  setInterval(() => {
-    refresh();
-  }, 60000);
-}
+  // // 定时刷新
+  function initInterval() {
+    setInterval(() => {
+      refresh();
+    }, 60000);
+  }
 
-async function changePage(pageTypeStr: string) {
-  const finalPageType = pageTypeStr || (route.query.pageType as string) || '';
-  pageType.value = finalPageType;
-  await refresh();
-}
+  async function changePage(pageTypeStr: string) {
+    const finalPageType = pageTypeStr || (route.query.pageType as string) || '';
+    pageType.value = finalPageType;
 
-// watch(
-//   // 监听动态路由参数 :type
-//   () => route.params.type,
-//   (newVal) => {
-//     if (newVal) {
-//       console.log('切换页面类型：', newVal);
-//       refresh(); // 切换路由自动刷新
-//     }
-//   }
-// );
+    // 这里进行配置数据的查询，不实时查询，只在页面切换或默认时进行查询
 
-function initModalAnimate(modal) {
-  console.log('初始化模型', modal);
-  modal.isRender = true;
+    await refresh();
+  }
 
-  modalAnimate(modal);
-}
+  // watch(
+  //   // 监听动态路由参数 :type
+  //   () => route.params.type,
+  //   (newVal) => {
+  //     if (newVal) {
+  //       console.log('切换页面类型：', newVal);
+  //       refresh(); // 切换路由自动刷新
+  //     }
+  //   }
+  // );
 
-watch(
-  () => route.query.pageType,
-  (newQueryType) => {
-    if (newQueryType) {
-      changePage(newQueryType as string);
+  function initModalAnimate(modal) {
+    console.log('初始化模型', modal);
+    modal.isRender = true;
+    modalAnimate(modal, modalMonitorData);
+  }
+
+  watch(
+    () => route.query.pageType,
+    (newQueryType) => {
+      if (newQueryType) {
+        changePage(newQueryType as string);
+      }
+    },
+    { immediate: true } // 初始化立刻执行
+  );
+
+  watch(
+    () => modalMonitorData.value,
+    (newData, oldData) => {
+      if (newData && !Object.keys(oldData).length) {
+        isInitModal.value = true;
+      }
     }
-  },
-  { immediate: true } // 初始化立刻执行
-);
+  );
 
-onMounted(() => {
-  refresh();
-  initInterval();
-});
+  onMounted(async () => {
+    await refresh();
+    initInterval();
+  });
 </script>
 
 <style lang="less" scoped>
-.company-home {
-  background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  font-family: 'Microsoft YaHei', sans-serif;
-  .top-bg {
+  .company-home {
+    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
     width: 100%;
-    height: 56px;
-    position: absolute;
-    margin-top: 10px;
-    z-index: 1;
-  }
-  .header-container {
-    position: absolute;
-    top: 20px;
-    left: 20px;
-    z-index: 10;
-  }
-
-  .border {
-    width: 100%;
-    height: 94%;
-    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
-    background-size: 100% 100%;
+    height: 100%;
+    color: @white;
     position: relative;
-    overflow: hidden;
-    .box-container {
-      position: relative;
+    font-family: 'Microsoft YaHei', sans-serif;
+    .top-bg {
       width: 100%;
-      height: 100%;
+      height: 56px;
+      position: absolute;
+      margin-top: 10px;
+      z-index: 1;
     }
-  }
-
-  // 中间预警结果区
-  .center-warning-container {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    top: 50%;
-    width: 600px;
-    height: 200px;
-    background-color: rgba(0, 0, 0, 0.7);
-    border-radius: 10px;
-    padding: 15px;
-    box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
-    z-index: 5;
-    color: #fff;
-
-    .warning-header {
-      font-size: 18px;
-      font-weight: bold;
-      margin-bottom: 10px;
-      color: #ff6b6b;
+    .header-container {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      z-index: 10;
     }
 
-    .warning-list {
+    .border {
       width: 100%;
-      height: 100%;
-      overflow-y: auto;
-      display: flex;
-      flex-direction: column;
-      gap: 8px;
+      height: 94%;
+      background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      overflow: hidden;
+      .box-container {
+        position: relative;
+        width: 100%;
+        height: 100%;
+      }
     }
 
-    .warning-item {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 8px;
-      background-color: rgba(0, 0, 0, 0.5);
-      border-radius: 5px;
-      border-left: 4px solid #ff6b6b;
+    // 中间预警结果区
+    .center-warning-container {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      top: 50%;
+      width: 600px;
+      height: 200px;
+      background-color: rgba(0, 0, 0, 0.7);
+      border-radius: 10px;
+      padding: 15px;
+      box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
+      z-index: 5;
+      color: #fff;
 
-      .warning-time {
-        font-size: 14px;
-        color: #ccc;
+      .warning-header {
+        font-size: 18px;
+        font-weight: bold;
+        margin-bottom: 10px;
+        color: #ff6b6b;
       }
 
-      .warning-level {
-        font-size: 14px;
-        font-weight: bold;
-        padding: 4px 8px;
-        border-radius: 4px;
-        &.level-critical {
-          background-color: #ff6b6b;
-          color: white;
-        }
-        &.level-high {
-          background-color: #ffcc00;
-          color: black;
-        }
-        &.level-normal {
-          background-color: #66cc66;
-          color: white;
-        }
+      .warning-list {
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
       }
 
-      .warning-action {
-        .btn-start-spray {
-          background-color: #00e1ff;
-          color: #000;
-          border: none;
-          padding: 4px 10px;
+      .warning-item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 8px;
+        background-color: rgba(0, 0, 0, 0.5);
+        border-radius: 5px;
+        border-left: 4px solid #ff6b6b;
+
+        .warning-time {
+          font-size: 14px;
+          color: #ccc;
+        }
+
+        .warning-level {
+          font-size: 14px;
+          font-weight: bold;
+          padding: 4px 8px;
           border-radius: 4px;
-          cursor: pointer;
-          font-size: 12px;
-          transition: all 0.3s;
-          &:hover {
-            background-color: #00c3e6;
+          &.level-critical {
+            background-color: #ff6b6b;
+            color: white;
+          }
+          &.level-high {
+            background-color: #ffcc00;
+            color: black;
+          }
+          &.level-normal {
+            background-color: #66cc66;
+            color: white;
+          }
+        }
+
+        .warning-action {
+          .btn-start-spray {
+            background-color: #00e1ff;
+            color: #000;
+            border: none;
+            padding: 4px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 12px;
+            transition: all 0.3s;
+            &:hover {
+              background-color: #00c3e6;
+            }
           }
         }
       }
     }
-  }
 
-  // 巷道示意图
-  .belt-diagram {
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    bottom: 50px;
-    width: 800px;
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+    // 巷道示意图
+    .belt-diagram {
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom: 50px;
+      width: 800px;
+      height: 100px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
 
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+      }
     }
   }
-}
-.modal-box {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  z-index: 1;
-}
+  .modal-box {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+  }
 </style>

src/views/vent/home/configurable/components/belt/FireSensorAnalysis.vue

@@ -36,167 +36,167 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue';
-import { getFormattedText } from '../../hooks/helper';
+  import { computed } from 'vue';
+  import { getFormattedText } from '../../hooks/helper';
 
-const props = defineProps<{
-  config: Array<{
-    title: string;
-    readFrom: string;
-    items: Array<{
-      label: string;
-      code: string;
-      trans?: String;
-      status?: string;
-      info?: string;
+  const props = defineProps<{
+    config: Array<{
+      title: string;
+      readFrom: string;
+      items: Array<{
+        label: string;
+        code: string;
+        trans?: String;
+        status?: string;
+        info?: string;
+      }>;
     }>;
-  }>;
-  data: {
-    [key: string]: any;
-  };
-}>();
+    data: {
+      [key: string]: any;
+    };
+  }>();
 
-/**
- * 解析状态并返回对应的 CSS 类名
- */
-const parseStatus = (statusStr: string) => {
-  return statusStr === 'true' ? 'status-danger' : 'status-normal';
-};
+  /**
+   * 解析状态并返回对应的 CSS 类名
+   */
+  const parseStatus = (statusStr: string) => {
+    return statusStr === 'true' ? 'status-danger' : 'status-normal';
+  };
 </script>
 
 <style scoped lang="less">
-/* 全局面板样式 */
-.fire-safety-panel {
-  border-radius: 8px;
-  padding: 15px;
-  color: #fff;
-  font-family: 'Microsoft YaHei', sans-serif;
-  padding-top: 10px;
-}
-/* 列表容器 */
-.sensor-list {
-  display: flex;
-  flex-direction: column;
-  gap: 15px; /* 组间距 */
-}
-
-/* 分组卡片 */
-.sensor-group {
-  background: url('@/assets/images/beltFire/fireMonitor/2-1.png') no-repeat;
-  background-size: 100% 100%;
-}
-
-/* 组标题 */
-.group-title {
-  background: url('@/assets/images/beltFire/fireMonitor/2-2.png') no-repeat;
-  background-size: 35% 100%;
-  color: #fff;
-  font-size: 12px;
-  font-weight: bold;
-  font-style: italic;
-  margin-bottom: 8px;
-  padding-bottom: 5px;
-  padding-left: 10px;
-}
-
-/* 列表项 */
-.sensor-item {
-  background: url('@/assets/images/beltFire/fireMonitor/2-4.png') no-repeat;
-  background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-  margin-bottom: 5px;
-  font-size: 13px;
-  color: #c0d0e0;
-  overflow-y: auto;
-}
-.item-status {
-  width: 90%;
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-}
-.item-icon {
-  background: url('@/assets/images/beltFire/fireMonitor/2-5.svg') no-repeat;
-  background-size: 100% 100%;
-  width: 20px;
-  height: 20px;
-  margin-left: -7px;
-}
-.item-label {
-  height: 30px;
-  line-height: 30px;
-  text-align: right;
-  color: #fff;
-  font-size: 11px;
-}
-
-.item-content {
-  flex: 1;
-  display: flex;
-  align-items: center;
-  .label {
-    color: #fafafa;
+  /* 全局面板样式 */
+  .fire-safety-panel {
+    border-radius: 8px;
+    padding: 15px;
+    color: #fff;
+    font-family: 'Microsoft YaHei', sans-serif;
+    padding-top: 10px;
+  }
+  /* 列表容器 */
+  .sensor-list {
+    display: flex;
+    flex-direction: column;
+    gap: 15px; /* 组间距 */
   }
-}
-
-.item-value {
-  margin-right: 10px;
-  font-size: 12px;
-  color: #36dae7;
-}
-.item-info {
-  color: #889db0;
-  font-size: 11px;
-}
 
-/* 状态指示灯 */
-.status-dot {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
-  margin-left: 5px;
-  margin-top: 10px;
-  animation: pulse 2s infinite;
+  /* 分组卡片 */
+  .sensor-group {
+    background: url('@/assets/images/beltFire/fireMonitor/2-1.png') no-repeat;
+    background-size: 100% 100%;
+  }
 
-  &.status-normal {
-    background-color: #00ff00;
-    box-shadow: 0 0 6px 2px rgba(104, 255, 45, 0.6);
+  /* 组标题 */
+  .group-title {
+    background: url('@/assets/images/beltFire/fireMonitor/2-2.png') no-repeat;
+    background-size: 35% 100%;
+    color: #fff;
+    font-size: 12px;
+    font-weight: bold;
+    font-style: italic;
+    margin-bottom: 8px;
+    padding-bottom: 5px;
+    padding-left: 10px;
   }
 
-  &.status-danger {
-    background-color: #ff4d4d;
-    box-shadow: 0 0 6px 2px rgb(255, 0, 0);
-    animation: flash 1s infinite;
+  /* 列表项 */
+  .sensor-item {
+    background: url('@/assets/images/beltFire/fireMonitor/2-4.png') no-repeat;
+    background-size: 100% 100%;
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+    font-size: 13px;
+    color: #c0d0e0;
+    overflow-y: auto;
+  }
+  .item-status {
+    width: 90%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+  }
+  .item-icon {
+    background: url('@/assets/images/beltFire/fireMonitor/2-5.svg') no-repeat;
+    background-size: 100% 100%;
+    width: 20px;
+    height: 20px;
+    margin-left: -7px;
+  }
+  .item-label {
+    height: 30px;
+    line-height: 30px;
+    text-align: right;
+    color: #fff;
+    font-size: 11px;
   }
-}
 
-/* 动画效果 */
-@keyframes pulse {
-  0% {
-    transform: scale(1);
-    opacity: 1;
+  .item-content {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    .label {
+      color: #fafafa;
+    }
   }
-  50% {
-    transform: scale(1.2);
-    opacity: 0.8;
+
+  .item-value {
+    margin-right: 10px;
+    font-size: 12px;
+    color: #36dae7;
   }
-  100% {
-    transform: scale(1);
-    opacity: 1;
+  .item-info {
+    color: #889db0;
+    font-size: 11px;
   }
-}
 
-@keyframes flash {
-  0% {
-    opacity: 1;
+  /* 状态指示灯 */
+  .status-dot {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    margin-left: 5px;
+    margin-top: 10px;
+    animation: pulse 2s infinite;
+
+    &.status-normal {
+      background-color: #00ff00;
+      box-shadow: 0 0 6px 2px rgba(104, 255, 45, 0.6);
+    }
+
+    &.status-danger {
+      background-color: #ff4d4d;
+      box-shadow: 0 0 6px 2px rgb(255, 0, 0);
+      animation: flash 1s infinite;
+    }
   }
-  50% {
-    opacity: 0.5;
+
+  /* 动画效果 */
+  @keyframes pulse {
+    0% {
+      transform: scale(1);
+      opacity: 1;
+    }
+    50% {
+      transform: scale(1.2);
+      opacity: 0.8;
+    }
+    100% {
+      transform: scale(1);
+      opacity: 1;
+    }
   }
-  100% {
-    opacity: 1;
+
+  @keyframes flash {
+    0% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.5;
+    }
+    100% {
+      opacity: 1;
+    }
   }
-}
 </style>