[Fix 0000]皮带巷导览跳转功能修改

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

@@ -57,381 +57,379 @@
 </template>
 
 <script setup lang="ts">
-  import { onMounted, ref, watch, computed } 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 } from './configurable.api';
-  import { modalAnimate } from './threejs/belt.threejs';
+import { onMounted, ref, watch, computed } 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 } from './configurable.api';
+import { modalAnimate } from './threejs/belt.threejs';
 
-  // 初始化配置
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷智能管控');
-  // const pageType = computed(() => {
-  //   const currentType = route.params.type as string;
-  //   return currentType;
-  // });
-  const pageType = ref('fireMonitor');
+// 初始化配置
+const { configs, fetchConfigs } = useInitConfigs();
+const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷智能管控');
+// const pageType = computed(() => {
+//   const currentType = route.params.type as string;
+//   return currentType;
+// });
+const pageType = ref('fireMonitor');
 
-  // 下拉框选项
-  const beltOptions = [
-    { id: '1', beltName: '主运巷皮带 1' },
-    { id: '2', beltName: '主运巷皮带 2' },
-  ];
+// 下拉框选项
+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' },
-      },
-    ],
-    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: '' },
+// 模拟数据
+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' },
     },
-    vehicleCOAnalysis: {
-      isRisk: true,
-      activityList: [
-        {
-          pos: '1#皮带区域',
-          vehicle: '车辆23425',
-          status: '0',
-          // vehicle2: '车辆53456',
-          // vehicle3: '未通过车辆',
-          // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
-          // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
-          // possibleCause: '皮带摩擦过热或电器设备故障',
-          // recommendation: '立即检查3#皮带区域设备',
-        },
+  ],
+  pdhzfxInfo: [
+    {
+      beltName: '主运巷皮带1',
+      warningLevel: '一般风险',
+      sysList: [
         {
-          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',
+          time: '2026-03-21 13:23:34',
+          area: '3#皮带区域',
+          type: 'CO浓度异常',
+          status: '三级预警',
+          advice: '立即检查该区域设备，启动应急预案',
+          action: '启动喷淋',
         },
-      ],
-      analysisList: [
         {
-          pos: '1#皮带区域',
-          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
+          time: '2026-03-21 13:23:34',
+          area: '3#皮带区域',
+          type: 'CO浓度异常',
+          status: '三级预警',
+          advice: '立即检查该区域设备，启动应急预案',
+          action: '启动喷淋',
         },
         {
-          pos: '1#皮带区域',
-          analysisText: 'CO浓度异常升高，已确认为车辆干扰',
+          time: '2026-03-21 13:23:34',
+          area: '3#皮带区域',
+          type: 'CO浓度异常',
+          status: '三级预警',
+          advice: '立即检查该区域设备，启动应急预案',
+          action: '启动喷淋',
         },
       ],
-      possibleCause: '皮带摩擦过热或电器设备故障',
-      recommendation: '立即检查3#皮带区域设备',
     },
-    sprayData: [
+  ],
+  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: [
       {
-        beltArea: '1#皮带区域',
-        devicePosition: '1#皮带-50m处',
-        netStatus: '0', // 网络状态：0=断开，1=连接
-        runStatus: '1', // 运行状态：0=异常，1=正常
-        waterVolume: 86,
-        waterPressure: 1.4,
+        pos: '1#皮带区域',
+        vehicle: '车辆23425',
+        status: '0',
+        // vehicle2: '车辆53456',
+        // vehicle3: '未通过车辆',
+        // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
+        // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
+        // possibleCause: '皮带摩擦过热或电器设备故障',
+        // recommendation: '立即检查3#皮带区域设备',
       },
       {
-        beltArea: '2#皮带区域',
-        devicePosition: '2#皮带-120m处',
-        netStatus: '1',
-        runStatus: '1',
-        waterVolume: 72,
-        waterPressure: 0.8,
+        pos: '2#皮带区域',
+        vehicle: '车辆53456',
+        status: '1',
       },
       {
-        beltArea: '3#皮带区域',
-        devicePosition: '3#皮带-200m处',
-        netStatus: '1',
-        runStatus: '0',
-        waterVolume: 45,
-        waterPressure: 1.6,
+        pos: '3#皮带区域',
+        vehicle: '未通过车辆',
+        status: '0',
       },
     ],
-  };
+    analysisList: [
+      {
+        pos: '1#皮带区域',
+        analysisText: 'CO浓度异常升高，已确认为车辆干扰',
+      },
+      {
+        pos: '1#皮带区域',
+        analysisText: 'CO浓度异常升高，已确认为车辆干扰',
+      },
+    ],
+    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('belt').then(() => {
-      if (pageType.value == 'fireMonitor') {
-        configs.value = testBeltNew;
-        Promise.resolve(readData).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') {
-        configs.value = testSpary;
-        Promise.resolve(readData).then(updateData);
-      } else {
-        configs.value = testBeltNew;
-      }
-      updateEnhancedConfigs(configs.value);
-    });
-  }
+// 刷新数据
+function refresh() {
+  fetchConfigs('belt').then(() => {
+    if (pageType.value == 'fireMonitor') {
+      configs.value = testBeltNew;
+      Promise.resolve(readData).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') {
+      configs.value = testSpary;
+      Promise.resolve(readData).then(updateData);
+    } else {
+      configs.value = testBeltNew;
+    }
+    updateEnhancedConfigs(configs.value);
+  });
+}
 
-  // // 定时刷新
-  // function initInterval() {
-  //   setInterval(() => {
-  //     refresh();
-  //   }, 60000);
-  // }
+// // 定时刷新
+// function initInterval() {
+//   setInterval(() => {
+//     refresh();
+//   }, 60000);
+// }
 
-  function changePage(pageTypeStr: string) {
-    debugger;
-    pageType.value = pageTypeStr;
-    refresh();
-  }
+function changePage(pageTypeStr: string) {
+  pageType.value = pageTypeStr;
+  refresh();
+}
 
-  // watch(
-  //   // 监听动态路由参数 :type
-  //   () => route.params.type,
-  //   (newVal) => {
-  //     if (newVal) {
-  //       console.log('切换页面类型：', newVal);
-  //       refresh(); // 切换路由自动刷新
-  //     }
-  //   }
-  // );
+// watch(
+//   // 监听动态路由参数 :type
+//   () => route.params.type,
+//   (newVal) => {
+//     if (newVal) {
+//       console.log('切换页面类型：', newVal);
+//       refresh(); // 切换路由自动刷新
+//     }
+//   }
+// );
 
-  function initModalAnimate(modal) {
-    console.log('初始化模型', modal);
-    modal.isRender = true;
+function initModalAnimate(modal) {
+  console.log('初始化模型', modal);
+  modal.isRender = true;
 
-    modalAnimate(modal);
-  }
+  modalAnimate(modal);
+}
 
-  onMounted(() => {
-    console.log(pageType, '123');
-    refresh();
-    // initInterval();
-  });
+onMounted(() => {
+  refresh();
+  // initInterval();
+});
 </script>
 
 <style lang="less" scoped>
-  .company-home {
-    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
+.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 {
     width: 100%;
-    height: 100%;
-    color: @white;
+    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%;
     position: relative;
-    font-family: 'Microsoft YaHei', sans-serif;
-    .top-bg {
+    overflow: hidden;
+
+    .box-container {
+      position: relative;
       width: 100%;
-      height: 56px;
-      position: absolute;
-      margin-top: 10px;
-      z-index: 1;
-    }
-    .header-container {
-      position: absolute;
-      top: 20px;
-      left: 20px;
-      z-index: 10;
+      height: 100%;
     }
+  }
 
-    .border {
-      width: 100%;
-      height: 94%;
-      background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
-      background-size: 100% 100%;
-      position: relative;
-      overflow: hidden;
+  // 中间预警结果区
+  .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;
 
-      .box-container {
-        position: relative;
-        width: 100%;
-        height: 100%;
-      }
+    .warning-header {
+      font-size: 18px;
+      font-weight: bold;
+      margin-bottom: 10px;
+      color: #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-list {
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
 
-      .warning-header {
-        font-size: 18px;
-        font-weight: bold;
-        margin-bottom: 10px;
-        color: #ff6b6b;
-      }
+    .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-list {
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
+      .warning-time {
+        font-size: 14px;
+        color: #ccc;
       }
 
-      .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;
+        &.level-critical {
+          background-color: #ff6b6b;
+          color: white;
         }
-
-        .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;
-          }
+        &.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;
-            }
+      .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/belt/belt.vue

@@ -24,318 +24,319 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { onMounted, ref } from 'vue';
-  import customHeader from './components/customHeader-belt.vue';
-  import { useInitConfigs, useInitPage } from '../hooks/useInit';
-  import { testBeltLaneFire } from './configurable.data';
-  import ModuleCommon from './components/ModuleCommon.vue';
-  import SubApp from '/@/components/vent/micro/createSubApp.vue';
-  // import { BDFireMock } from './mock';
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
-  const readData = {
-    pdhzfxInfo: [
-      {
-        beltName: '测试1',
-        sysList: [
-          {
-            beltName: '东翼胶带运输大巷皮带',
-            warnlevel: '重大风险',
-          },
-          {
-            beltName: '1102主运顺槽皮带',
-            warnlevel: '报警',
-          },
-          {
-            beltName: '1101主运顺槽皮带',
-            warnlevel: '低分险',
-          },
-          {
-            beltName: '东翼胶带运输大巷皮带',
-            warnlevel: '一般风险',
-          },
-          {
-            beltName: '东翼胶带运输大巷皮带',
-            warnlevel: '较大风险',
-          },
-        ],
-      },
-    ],
-    plmhInfo: [
-      {
-        beltName: '测试1',
-        sysList: [
-          {
-            netstatus: '1',
-            yxzt: '1',
-            plsy: '1#区域 1.4MPa',
-            kzms: '手动',
-          },
-        ],
-      },
-      {
-        beltName: '测试2',
-        sysList: [
-          {
-            netstatus: '1',
-            yxzt: '1',
-            plqy: '2#区域',
-            plsy: '1.6MPa',
-            kzms: '自动',
-          },
-        ],
-      },
-    ],
-    fmhjcInfo: [
-      {
-        beltName: '测试1',
-        sysList: [
-          {
-            warnLevel: '一般风险',
-            deviceType: '微震测声传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: '光纤测温传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: 'HCI传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: '烟雾传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: 'CO传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: '火焰传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: '温度传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: '多参数传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: 'AI视频火焰分析',
-          },
-        ],
-      },
-      {
-        beltName: '测试2',
-        sysList: [
-          {
-            warnLevel: '一般风险',
-            deviceType: '微震测声传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: '光纤测温传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: 'HCI传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: '烟雾传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: 'CO传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: '火焰传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: '温度传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: '多参数传感器',
-          },
-          {
-            warnLevel: '一般风险',
-            deviceType: 'AI视频火焰分析',
-          },
-        ],
-      },
-    ],
-    yjkfArray: [
-      {
-        aqjkData: [
-          {
-            deviceName: '风门1',
-            frontDoorStatus: '关闭',
-            backDoorStatus: '开启',
-            netStatus: '在线',
-          },
-          {
-            deviceName: '风门2',
-            frontDoorStatus: '关闭',
-            backDoorStatus: '开启',
-            netStatus: '在线',
-          },
-          {
-            deviceName: '风门3',
-            frontDoorStatus: '关闭',
-            backDoorStatus: '开启',
-            netStatus: '在线',
-          },
-          {
-            deviceName: '风门4',
-            frontDoorStatus: '开启',
-            backDoorStatus: '开启',
-            netStatus: '在线',
-          },
-          {
-            deviceName: '风门5',
-            frontDoorStatus: '开启',
-            backDoorStatus: '开启',
-            netStatus: '在线',
-          },
-          {
-            deviceName: '风门6',
-            frontDoorStatus: '开启',
-            backDoorStatus: '开启',
-            netStatus: '在线',
-          },
-          {
-            deviceName: '风门7',
-            frontDoorStatus: '关闭',
-            backDoorStatus: '关闭',
-            netStatus: '在线',
-          },
-          {
-            deviceName: '风门8',
-            frontDoorStatus: '关闭',
-            backDoorStatus: '关闭',
-            netStatus: '在线',
-          },
-          {
-            deviceName: '风门9',
-            frontDoorStatus: '关闭',
-            backDoorStatus: '关闭',
-            netStatus: '在线',
-          },
-        ],
-      },
-    ],
-    aqjkData: [
-      {
-        deviceName: '风门1',
-        frontDoorStatus: '关闭',
-        backDoorStatus: '开启',
-        netStatus: '在线',
-      },
-      {
-        deviceName: '风门2',
-        frontDoorStatus: '关闭',
-        backDoorStatus: '开启',
-        netStatus: '在线',
-      },
-      {
-        deviceName: '风门3',
-        frontDoorStatus: '关闭',
-        backDoorStatus: '开启',
-        netStatus: '在线',
-      },
-      {
-        deviceName: '风门4',
-        frontDoorStatus: '开启',
-        backDoorStatus: '开启',
-        netStatus: '在线',
-      },
-      {
-        deviceName: '风门5',
-        frontDoorStatus: '开启',
-        backDoorStatus: '开启',
-        netStatus: '在线',
-      },
-      {
-        deviceName: '风门6',
-        frontDoorStatus: '开启',
-        backDoorStatus: '开启',
-        netStatus: '在线',
-      },
-      {
-        deviceName: '风门7',
-        frontDoorStatus: '关闭',
-        backDoorStatus: '关闭',
-        netStatus: '在线',
-      },
-      {
-        deviceName: '风门8',
-        frontDoorStatus: '关闭',
-        backDoorStatus: '关闭',
-        netStatus: '在线',
-      },
-      {
-        deviceName: '风门9',
-        frontDoorStatus: '关闭',
-        backDoorStatus: '关闭',
-        netStatus: '在线',
-      },
-    ],
-  };
-  // const readData = ref({});
-  function refresh() {
-    fetchConfigs('belt').then(() => {
-      configs.value = testBeltLaneFire;
-      Promise.resolve(readData).then(updateData);
-      // updateEnhancedConfigs(configs.value);
-      // getDataSource();
-    });
-  }
+import { onMounted, ref } from 'vue';
+import customHeader from './components/customHeader-belt.vue';
+import { useInitConfigs, useInitPage } from '../hooks/useInit';
+import { testBeltLaneFire } from './configurable.data';
+import ModuleCommon from './components/ModuleCommon.vue';
+import SubApp from '/@/components/vent/micro/createSubApp.vue';
+// import { BDFireMock } from './mock';
+const { configs, fetchConfigs } = useInitConfigs();
+const { updateEnhancedConfigs, updateData, data } = useInitPage('皮带巷三级防灭火系统');
+const readData = {
+  pdhzfxInfo: [
+    {
+      beltName: '测试1',
+      sysList: [
+        {
+          beltName: '东翼胶带运输大巷皮带',
+          warnlevel: '重大风险',
+        },
+        {
+          beltName: '1102主运顺槽皮带',
+          warnlevel: '报警',
+        },
+        {
+          beltName: '1101主运顺槽皮带',
+          warnlevel: '低分险',
+        },
+        {
+          beltName: '东翼胶带运输大巷皮带',
+          warnlevel: '一般风险',
+        },
+        {
+          beltName: '东翼胶带运输大巷皮带',
+          warnlevel: '较大风险',
+        },
+      ],
+    },
+  ],
+  plmhInfo: [
+    {
+      beltName: '测试1',
+      sysList: [
+        {
+          netstatus: '1',
+          yxzt: '1',
+          plsy: '1#区域 1.4MPa',
+          kzms: '手动',
+        },
+      ],
+    },
+    {
+      beltName: '测试2',
+      sysList: [
+        {
+          netstatus: '1',
+          yxzt: '1',
+          plqy: '2#区域',
+          plsy: '1.6MPa',
+          kzms: '自动',
+        },
+      ],
+    },
+  ],
+  fmhjcInfo: [
+    {
+      beltName: '测试1',
+      sysList: [
+        {
+          warnLevel: '一般风险',
+          deviceType: '微震测声传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: '光纤测温传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: 'HCI传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: '烟雾传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: 'CO传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: '火焰传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: '温度传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: '多参数传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: 'AI视频火焰分析',
+        },
+      ],
+    },
+    {
+      beltName: '测试2',
+      sysList: [
+        {
+          warnLevel: '一般风险',
+          deviceType: '微震测声传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: '光纤测温传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: 'HCI传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: '烟雾传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: 'CO传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: '火焰传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: '温度传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: '多参数传感器',
+        },
+        {
+          warnLevel: '一般风险',
+          deviceType: 'AI视频火焰分析',
+        },
+      ],
+    },
+  ],
+  yjkfArray: [
+    {
+      aqjkData: [
+        {
+          deviceName: '风门1',
+          frontDoorStatus: '关闭',
+          backDoorStatus: '开启',
+          netStatus: '在线',
+        },
+        {
+          deviceName: '风门2',
+          frontDoorStatus: '关闭',
+          backDoorStatus: '开启',
+          netStatus: '在线',
+        },
+        {
+          deviceName: '风门3',
+          frontDoorStatus: '关闭',
+          backDoorStatus: '开启',
+          netStatus: '在线',
+        },
+        {
+          deviceName: '风门4',
+          frontDoorStatus: '开启',
+          backDoorStatus: '开启',
+          netStatus: '在线',
+        },
+        {
+          deviceName: '风门5',
+          frontDoorStatus: '开启',
+          backDoorStatus: '开启',
+          netStatus: '在线',
+        },
+        {
+          deviceName: '风门6',
+          frontDoorStatus: '开启',
+          backDoorStatus: '开启',
+          netStatus: '在线',
+        },
+        {
+          deviceName: '风门7',
+          frontDoorStatus: '关闭',
+          backDoorStatus: '关闭',
+          netStatus: '在线',
+        },
+        {
+          deviceName: '风门8',
+          frontDoorStatus: '关闭',
+          backDoorStatus: '关闭',
+          netStatus: '在线',
+        },
+        {
+          deviceName: '风门9',
+          frontDoorStatus: '关闭',
+          backDoorStatus: '关闭',
+          netStatus: '在线',
+        },
+      ],
+    },
+  ],
+  aqjkData: [
+    {
+      deviceName: '风门1',
+      frontDoorStatus: '关闭',
+      backDoorStatus: '开启',
+      netStatus: '在线',
+    },
+    {
+      deviceName: '风门2',
+      frontDoorStatus: '关闭',
+      backDoorStatus: '开启',
+      netStatus: '在线',
+    },
+    {
+      deviceName: '风门3',
+      frontDoorStatus: '关闭',
+      backDoorStatus: '开启',
+      netStatus: '在线',
+    },
+    {
+      deviceName: '风门4',
+      frontDoorStatus: '开启',
+      backDoorStatus: '开启',
+      netStatus: '在线',
+    },
+    {
+      deviceName: '风门5',
+      frontDoorStatus: '开启',
+      backDoorStatus: '开启',
+      netStatus: '在线',
+    },
+    {
+      deviceName: '风门6',
+      frontDoorStatus: '开启',
+      backDoorStatus: '开启',
+      netStatus: '在线',
+    },
+    {
+      deviceName: '风门7',
+      frontDoorStatus: '关闭',
+      backDoorStatus: '关闭',
+      netStatus: '在线',
+    },
+    {
+      deviceName: '风门8',
+      frontDoorStatus: '关闭',
+      backDoorStatus: '关闭',
+      netStatus: '在线',
+    },
+    {
+      deviceName: '风门9',
+      frontDoorStatus: '关闭',
+      backDoorStatus: '关闭',
+      netStatus: '在线',
+    },
+  ],
+};
+// const readData = ref({});
+function refresh() {
+  fetchConfigs('belt').then(() => {
+    configs.value = testBeltLaneFire;
+    Promise.resolve(readData).then(updateData);
+    // updateEnhancedConfigs(configs.value);
+    // getDataSource();
+  });
+}
 
-  function initInterval() {
-    setInterval(() => {
-      refresh();
-    }, 60000);
-  }
-  onMounted(() => {
+function initInterval() {
+  setInterval(() => {
     refresh();
-    initInterval();
-  });
+  }, 60000);
+}
+onMounted(() => {
+  refresh();
+  initInterval();
+});
 </script>
 
 <style lang="less" scoped>
-  .spray-wrapper {
-    width: 100%;
-    height: 100%;
-    background-image: url('/@/assets/images/beltFire/baseMap.png');
-    background-size: cover;
-  }
+.spray-wrapper {
+  width: 100%;
+  height: 100%;
+  background-image: url('/@/assets/images/beltFire/baseMap.png');
+  background-size: cover;
+}
 
-  #spray3D {
-    pointer-events: all;
-  }
+#spray3D {
+  pointer-events: all;
+}
 
-  .spray-wrapper :deep(.list-item_L .list-item__icon_L) {
-    background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
-  }
-  .spray-wrapper :deep(.list-item_N:nth-child(1)) {
-    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
-  }
-  .spray-wrapper :deep(.list-item_N:nth-child(2)) {
-    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
-  }
-  .company-home {
-    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
-    width: 100%;
-    height: 100%;
-    color: @white;
-    position: relative;
-    .border {
+.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
+  background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
+}
+.spray-wrapper :deep(.list-item_N:nth-child(1)) {
+  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
+}
+.spray-wrapper :deep(.list-item_N:nth-child(2)) {
+  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
+}
+.company-home {
+  background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
+  width: 100%;
+  height: 100%;
+  color: @white;
+  position: relative;
+  .border {
+    margin-top: 50px;
   }
   .test {
     background: url('./test.png') no-repeat;

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

@@ -28,152 +28,173 @@
 </template>
 
 <script setup lang="ts">
-  import { ref, onMounted, defineEmits, defineProps } from 'vue';
-  const emit = defineEmits(['changePage']);
-  const props = defineProps({
-    pageType: {
-      type: String,
-      default: '',
-    },
-  });
+import { ref, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+const emit = defineEmits(['changePage']);
+const props = defineProps({
+  pageType: {
+    type: String,
+    default: '',
+  },
+});
+const route = useRoute(); // 获取路由实例
+// 当前激活菜单
+const activeType = ref('');
 
-  // 当前激活菜单
-  const activeType = ref(props.pageType);
+// 导航菜单列表
+const menuList = ref([
+  {
+    name: '防灭火监测与预警',
+    position: 'left',
+    pageType: 'fireMonitor',
+  },
+  {
+    name: '喷淋系统管控',
+    position: 'center',
+    pageType: 'sprayControl',
+  },
+  {
+    name: '应急控风减灾',
+    position: 'right',
+    pageType: 'emergencyControl',
+  },
+]);
 
-  const menuList = ref([
-    {
-      name: '防灭火监测与预警',
-      position: 'left',
-      pageType: 'fireMonitor',
-    },
-    {
-      name: '喷淋系统管控',
-      position: 'center',
-      pageType: 'sprayControl',
-    },
-    {
-      name: '应急控风减灾',
-      position: 'right',
-      pageType: 'emergencyControl',
-    },
-  ]);
-  function handleNavClick(data: any) {
-    const pageType = data.item.pageType;
-    emit('changePage', pageType);
-  }
+watch(
+  [() => props.pageType, () => route.query.pageType],
+  ([newProp, newRoute]) => {
+    let currentType = '';
+    if (newProp) {
+      currentType = newProp;
+    } else if (newRoute) {
+      currentType = newRoute as string;
+    }
+    if (currentType) {
+      activeType.value = currentType;
+    }
+  },
+  { immediate: true }
+);
+
+// 导航点击
+function handleNavClick(data) {
+  const pageType = data.item.pageType;
+  activeType.value = pageType; // 点击立刻更新
+  emit('changePage', pageType);
+}
 </script>
 
 <style scoped lang="less">
-  .tech-nav-container {
+.tech-nav-container {
+  width: 100%;
+  max-width: 800px;
+  margin: 0 auto;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 60px;
+  position: relative;
+  box-sizing: border-box;
+  height: 50px;
+}
+
+/* 左侧图标容器 */
+.icon-left,
+.icon-right {
+  width: 50px;
+  height: 50px;
+  position: relative;
+  z-index: 2; /* 关键：设置为最高层级，确保浮在背景图之上 */
+  flex-shrink: 0; /* 防止被压缩 */
+  margin-top: 12px;
+  .icon-circle {
     width: 100%;
-    max-width: 800px;
-    margin: 0 auto;
+    height: 100%;
+    background: url('/@/assets/images/beltFire/yjkf/1-3.png') center / 100% 100% no-repeat;
     display: flex;
     align-items: center;
-    justify-content: space-between;
-    padding: 12px 60px;
-    position: relative;
-    box-sizing: border-box;
-    height: 50px;
-  }
+    justify-content: center;
 
-  /* 左侧图标容器 */
-  .icon-left,
-  .icon-right {
-    width: 50px;
-    height: 50px;
-    position: relative;
-    z-index: 2; /* 关键：设置为最高层级，确保浮在背景图之上 */
-    flex-shrink: 0; /* 防止被压缩 */
-    margin-top: 12px;
-    .icon-circle {
-      width: 100%;
-      height: 100%;
-      background: url('/@/assets/images/beltFire/yjkf/1-3.png') center / 100% 100% no-repeat;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .icon {
-        margin-top: 2px;
-        width: 18px;
-        height: 18px;
-        background-size: contain;
-        background-repeat: no-repeat;
-      }
+    .icon {
+      margin-top: 2px;
+      width: 18px;
+      height: 18px;
+      background-size: contain;
+      background-repeat: no-repeat;
     }
   }
+}
 
-  .icon-left .icon {
-    background-image: url('/@/assets/images/beltFire/yjkf/3D.svg');
-  }
-  .icon-right .icon {
-    background-image: url('/@/assets/images/beltFire/yjkf/yjkz.svg');
-  }
+.icon-left .icon {
+  background-image: url('/@/assets/images/beltFire/yjkf/3D.svg');
+}
+.icon-right .icon {
+  background-image: url('/@/assets/images/beltFire/yjkf/yjkz.svg');
+}
 
-  /* 中间按钮组容器 - 核心修改区 */
-  .nav-buttons {
-    display: flex;
-    margin-left: 50px;
-    align-items: center;
-    gap: 5px;
-    position: relative;
-    z-index: 1;
-    flex: 1;
-    padding: 0 20px;
-    box-sizing: border-box;
-  }
-  .top-img {
-    width: 100%;
-    height: 100px;
-    background: url('/@/assets/images/beltFire/yjkf/1-2.png') no-repeat center;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: -1; /* 确保背景图在按钮下方 */
-  }
-  /* 按钮基础样式 */
-  .nav-menu-item,
-  .nav-menu-active {
-    height: 80%;
-    line-height: 35px;
-    padding: 0 20px;
-    font-size: 15px;
-    text-align: center;
-    white-space: nowrap;
-    cursor: pointer;
-    transition: all 0.2s ease;
-  }
+/* 中间按钮组容器 - 核心修改区 */
+.nav-buttons {
+  display: flex;
+  margin-left: 50px;
+  align-items: center;
+  gap: 5px;
+  position: relative;
+  z-index: 1;
+  flex: 1;
+  padding: 0 20px;
+  box-sizing: border-box;
+}
+.top-img {
+  width: 100%;
+  height: 100px;
+  background: url('/@/assets/images/beltFire/yjkf/1-2.png') no-repeat center;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1; /* 确保背景图在按钮下方 */
+}
+/* 按钮基础样式 */
+.nav-menu-item,
+.nav-menu-active {
+  height: 80%;
+  line-height: 35px;
+  padding: 0 20px;
+  font-size: 15px;
+  text-align: center;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
 
-  .nav-menu-item {
-    color: #59acc7;
-  }
-  .nav-menu-item:hover {
-    color: #fff;
-  }
+.nav-menu-item {
+  color: #59acc7;
+}
+.nav-menu-item:hover {
+  color: #fff;
+}
 
-  .nav-menu-active {
-    color: #fff !important;
-    font-weight: 500;
-  }
+.nav-menu-active {
+  color: #fff !important;
+  font-weight: 500;
+}
 
-  /* 按钮背景 */
-  .btn-left {
-    background: url('/@/assets/images/beltFire/yjkf/navBtnLeft-2.png') center / 100% 100% no-repeat;
-  }
-  .btn-center {
-    background: url('/@/assets/images/beltFire/yjkf/navBtnCenter-2.png') center / 100% 100% no-repeat;
-  }
-  .btn-right {
-    background: url('/@/assets/images/beltFire/yjkf/navBtnRight-2.png') center / 100% 100% no-repeat;
-  }
-  .btn-left.nav-menu-active {
-    background-image: url('/@/assets/images/beltFire/yjkf/navBtnLeft-1.png');
-  }
-  .btn-center.nav-menu-active {
-    background-image: url('/@/assets/images/beltFire/yjkf/navBtnCenter-1.png');
-  }
-  .btn-right.nav-menu-active {
-    background-image: url('/@/assets/images/beltFire/yjkf/navBtnRight-1.png');
-  }
+/* 按钮背景 */
+.btn-left {
+  background: url('/@/assets/images/beltFire/yjkf/navBtnLeft-2.png') center / 100% 100% no-repeat;
+}
+.btn-center {
+  background: url('/@/assets/images/beltFire/yjkf/navBtnCenter-2.png') center / 100% 100% no-repeat;
+}
+.btn-right {
+  background: url('/@/assets/images/beltFire/yjkf/navBtnRight-2.png') center / 100% 100% no-repeat;
+}
+.btn-left.nav-menu-active {
+  background-image: url('/@/assets/images/beltFire/yjkf/navBtnLeft-1.png');
+}
+.btn-center.nav-menu-active {
+  background-image: url('/@/assets/images/beltFire/yjkf/navBtnCenter-1.png');
+}
+.btn-right.nav-menu-active {
+  background-image: url('/@/assets/images/beltFire/yjkf/navBtnRight-1.png');
+}
 </style>

src/views/vent/home/configurable/belt/configurable.data.ts

@@ -59,7 +59,7 @@ export const testBeltLaneFire: Config[] = [
         },
       ],
       preset: [],
-      to: '/belt/fireS/fireMonitor',
+      to: '/belt/fireS?pageType=fireMonitor',
     },
     showStyle: {
       size: 'width:430px;height:350px;',
@@ -125,7 +125,7 @@ export const testBeltLaneFire: Config[] = [
         },
       ],
       preset: [],
-      to: '/belt/fireS/fireMonitor',
+      to: '/belt/fireS?pageType=fireMonitor',
     },
     showStyle: {
       size: 'width:430px;height:430px;',
@@ -216,7 +216,7 @@ export const testBeltLaneFire: Config[] = [
           readFrom: '',
         },
       ],
-      to: '/belt/fireS/sprayControl',
+      to: '/belt/fireS?pageType=sprayControl',
     },
     showStyle: {
       size: 'width:430px;height:350px;',
@@ -287,7 +287,7 @@ export const testBeltLaneFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      to: '/belt/fireS/emergencyControl',
+      to: '/belt/fireS?pageType=emergencyControl',
     },
     showStyle: {
       size: 'width:430px;height:430px;',