[Mod 0000] 优化皮带子页面头样式错乱问题

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

@@ -57,379 +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' },
+  // 模拟数据
+  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: [
+        {
+          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浓度异常升高，已确认为车辆干扰',
         },
         {
-          time: '2026-03-21 13:23:34',
-          area: '3#皮带区域',
-          type: 'CO浓度异常',
-          status: '三级预警',
-          advice: '立即检查该区域设备，启动应急预案',
-          action: '启动喷淋',
+          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: [
+    sprayData: [
       {
-        pos: '1#皮带区域',
-        vehicle: '车辆23425',
-        status: '0',
-        // vehicle2: '车辆53456',
-        // vehicle3: '未通过车辆',
-        // coReason1: 'CO浓度异常升高，已确认为车辆干扰',
-        // coReason3: 'CO浓度异常升高，已确认非车辆干扰',
-        // possibleCause: '皮带摩擦过热或电器设备故障',
-        // recommendation: '立即检查3#皮带区域设备',
+        beltArea: '1#皮带区域',
+        devicePosition: '1#皮带-50m处',
+        netStatus: '0', // 网络状态：0=断开，1=连接
+        runStatus: '1', // 运行状态：0=异常，1=正常
+        waterVolume: 86,
+        waterPressure: 1.4,
       },
       {
-        pos: '2#皮带区域',
-        vehicle: '车辆53456',
-        status: '1',
+        beltArea: '2#皮带区域',
+        devicePosition: '2#皮带-120m处',
+        netStatus: '1',
+        runStatus: '1',
+        waterVolume: 72,
+        waterPressure: 0.8,
       },
       {
-        pos: '3#皮带区域',
-        vehicle: '未通过车辆',
-        status: '0',
+        beltArea: '3#皮带区域',
+        devicePosition: '3#皮带-200m处',
+        netStatus: '1',
+        runStatus: '0',
+        waterVolume: 45,
+        waterPressure: 1.6,
       },
     ],
-    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 getLevelClass(level: string) {
-  switch (level) {
-    case '重大风险':
-      return 'level-critical';
-    case '高风险':
-      return 'level-high';
-    case '一般风险':
-      return 'level-normal';
-    default:
-      return '';
+  // 下拉框切换处理
+  function handleBeltChange(id: string) {
+    selectedBeltId.value = id;
+    refresh();
   }
-}
 
-// 刷新数据
-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;
+  // 风险等级样式映射
+  function getLevelClass(level: string) {
+    switch (level) {
+      case '重大风险':
+        return 'level-critical';
+      case '高风险':
+        return 'level-high';
+      case '一般风险':
+        return 'level-normal';
+      default:
+        return '';
     }
-    updateEnhancedConfigs(configs.value);
-  });
-}
+  }
 
-// // 定时刷新
-// function initInterval() {
-//   setInterval(() => {
-//     refresh();
-//   }, 60000);
-// }
+  // 刷新数据
+  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 changePage(pageTypeStr: string) {
-  pageType.value = pageTypeStr;
-  refresh();
-}
+  // // 定时刷新
+  // function initInterval() {
+  //   setInterval(() => {
+  //     refresh();
+  //   }, 60000);
+  // }
 
-// watch(
-//   // 监听动态路由参数 :type
-//   () => route.params.type,
-//   (newVal) => {
-//     if (newVal) {
-//       console.log('切换页面类型：', newVal);
-//       refresh(); // 切换路由自动刷新
-//     }
-//   }
-// );
+  function changePage(pageTypeStr: string) {
+    pageType.value = pageTypeStr;
+    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(() => {
-  refresh();
-  // initInterval();
-});
+  onMounted(() => {
+    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/belt/belt.vue

@@ -24,323 +24,323 @@
   </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(() => {
+  function initInterval() {
+    setInterval(() => {
+      refresh();
+    }, 60000);
+  }
+  onMounted(() => {
     refresh();
-  }, 60000);
-}
-onMounted(() => {
-  refresh();
-  initInterval();
-});
+    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 {
-    margin-top: 50px;
+  .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');
   }
-  .test {
-    background: url('./test.png') no-repeat;
-    background-size: 100% 100%;
+  .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;
+      background-size: 100% 100%;
+    }
   }
-}
 </style>

src/views/vent/home/configurable/belt/beltYjkf.vue

@@ -1,128 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="company-home">
-    <div class="border">
-      <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }">皮带巷智能管控</customHeader>
-      <div class="top-bg">
-        <BeltNav />
-      </div>
-      <div class="box-container">
-        <ModuleCommon
-          v-for="cfg in configs"
-          :key="cfg.deviceType"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :page-type="cfg.pageType"
-          :data="data"
-          :visible="true"
-        />
-      </div>
-      <!-- 巷道模型组件 -->
-    </div>
-  </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 { testYjkf } from './configurable.data';
-import ModuleCommon from './components/ModuleCommonBelt.vue';
-import { getSystem } from './configurable.api';
-import { message, Modal } from 'ant-design-vue';
-import BeltNav from './components/BeltNav.vue';
-import { doorMock } from './mock.ts';
-// import { BDFireMock } from './mock';
-const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, data, updateData } = useInitPage('皮带巷智能管控');
-const readData = ref([
-  {
-    id: 1,
-    position: '16联巷短路风门',
-    frontStatus: '关闭',
-    backStatus: '关闭',
-    networkStatus: '在线',
-    modelImg: '',
-    open: true,
-  },
-  {
-    id: 2,
-    position: '18联巷短路风门',
-    frontStatus: '打开',
-    backStatus: '打开',
-    networkStatus: '在线',
-    modelImg: '',
-    open: true,
-  },
-  {
-    id: 3,
-    position: '23联巷短路风门',
-    frontStatus: '关闭',
-    backStatus: '关闭',
-    networkStatus: '在线',
-    modelImg: '',
-    open: false,
-  },
-]);
-function refresh() {
-  fetchConfigs('belt').then(() => {
-    configs.value = testYjkf;
-    getSystem({}).then(updateData);
-    // getDataSource();
-  });
-}
-function initInterval() {
-  setInterval(() => {
-    getSystem({}).then(updateData);
-  }, 60000);
-}
-onMounted(async () => {
-  refresh();
-  initInterval();
-});
-</script>
-
-<style lang="less" scoped>
-.spray-wrapper {
-  width: 100%;
-  height: 100%;
-  background-image: url('/@/assets/images/beltFire/baseMap.png');
-  background-size: cover;
-}
-
-#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 {
-    width: 100%;
-    height: 94%;
-    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
-    background-size: 100% 100%;
-    margin-top: 55px;
-  }
-  .top-bg {
-    width: 100%;
-    height: 56px;
-    position: absolute;
-    margin-top: -20px;
-    z-index: 1;
-  }
-}
-</style>

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

@@ -28,173 +28,173 @@
 </template>
 
 <script setup lang="ts">
-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('');
+  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 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',
+    },
+  ]);
 
-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 }
-);
+  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);
-}
+  // 导航点击
+  function handleNavClick(data) {
+    const pageType = data.item.pageType;
+    activeType.value = pageType; // 点击立刻更新
+    emit('changePage', pageType);
+  }
 </script>
 
 <style scoped lang="less">
-.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 {
+  .tech-nav-container {
     width: 100%;
-    height: 100%;
-    background: url('/@/assets/images/beltFire/yjkf/1-3.png') center / 100% 100% no-repeat;
+    max-width: 800px;
+    margin: 0 auto;
     display: flex;
     align-items: center;
-    justify-content: 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%;
+      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/components/Header.vue

@@ -41,82 +41,82 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import { Config } from '../../../../deviceManager/configurationTable/types';
-import { useInitModule } from '../../hooks/useInit';
-import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
-import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
-const props = defineProps<{
-  moduleData: Config['moduleData'];
-  deviceType: Config['deviceType'];
-  data: any;
-}>();
+  import { ref, watch } from 'vue';
+  import { Config } from '../../../../deviceManager/configurationTable/types';
+  import { useInitModule } from '../../hooks/useInit';
+  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+  const props = defineProps<{
+    moduleData: Config['moduleData'];
+    deviceType: Config['deviceType'];
+    data: any;
+  }>();
 
-const emit = defineEmits(['select']);
+  const emit = defineEmits(['select']);
 
-const visible = ref(false);
-const headerConfig = props.moduleData.header;
-const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
-  props.deviceType,
-  props.moduleData
-);
+  const visible = ref(false);
+  const headerConfig = props.moduleData.header;
+  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
+    props.deviceType,
+    props.moduleData
+  );
 
-function selectHandler({ key }) {
-  selectedDeviceID.value = key;
-  emit('select', selectedDevice.value);
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
+  function selectHandler({ key }) {
+    selectedDeviceID.value = key;
     emit('select', selectedDevice.value);
-  },
-  {
-    immediate: true,
   }
-);
+
+  watch(
+    () => props.data,
+    (d) => {
+      init(d);
+      emit('select', selectedDevice.value);
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 <style scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-.costume-header {
-  height: 30px;
-  background: url('@/assets/images/beltFire/4-1.png');
-  background-size: 100% 100%;
-}
-.costume-headerToggleIcon {
-  height: 30px;
-  background: url('@/assets/images/beltFire/4-1.png');
-  background-size: 100% 100%;
-}
-.costume-header_left {
-  border-left: 3px solid;
-  border-right: 3px solid;
-  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-  border-image-slice: 1;
-}
-.costume-header_right {
-  border-right: 3px solid;
-  border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
-  border-image-slice: 1;
-}
-img {
-  width: 16px;
-  height: 16px;
-  margin-left: 8px;
-}
-::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
-  /* background-color: transparent; */
-  color: #fff;
-}
-::v-deep .zxm-select-arrow {
-  color: #fff;
-}
-::v-deep .zxm-select-selection-item {
-  color: #fff !important;
-}
-::v-deep .zxm-select-selection-placeholder {
-  color: #fff !important;
-}
+  .costume-header {
+    height: 30px;
+    background: url('@/assets/images/beltFire/4-1.png');
+    background-size: 100% 100%;
+  }
+  .costume-headerToggleIcon {
+    height: 30px;
+    background: url('@/assets/images/beltFire/4-1.png');
+    background-size: 100% 100%;
+  }
+  .costume-header_left {
+    border-left: 3px solid;
+    border-right: 3px solid;
+    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+    border-image-slice: 1;
+  }
+  .costume-header_right {
+    border-right: 3px solid;
+    border-image-source: linear-gradient(to top, #00000033, var(--vent-base-light-bg), #00000033);
+    border-image-slice: 1;
+  }
+  img {
+    width: 16px;
+    height: 16px;
+    margin-left: 8px;
+  }
+  ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
+    /* background-color: transparent; */
+    color: #fff;
+  }
+  ::v-deep .zxm-select-arrow {
+    color: #fff;
+  }
+  ::v-deep .zxm-select-selection-item {
+    color: #fff !important;
+  }
+  ::v-deep .zxm-select-selection-placeholder {
+    color: #fff !important;
+  }
 </style>

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

@@ -10,7 +10,7 @@
       </template>
       <template #container>
         <slot>
-          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event"></Header>
+          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
           <Content
             :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
             :moduleData="moduleData"
@@ -23,105 +23,104 @@
   </Transition>
 </template>
 <script lang="ts" setup>
-import Header from './header.vue';
-import ContentBelt from './contentBelt.vue';
-import Content from '../../components/content.vue';
-// import ModuleLeft from './original/moduleLeft.vue';
-// import ModuleBottom from './original/moduleBottom.vue';
-import { computed, ref, watch } from 'vue';
-import ventBox1 from './ventBoxBelt.vue';
-import { openWindow } from '/@/utils';
-import { getFormattedText } from '../../hooks/helper';
-import { useInitModule } from '../../hooks/useInit';
-// import { ModuleProps } from '../types';
+  import Header from './header.vue';
+  import Content from '../../components/content.vue';
+  // import ModuleLeft from './original/moduleLeft.vue';
+  // import ModuleBottom from './original/moduleBottom.vue';
+  import { computed, ref, watch } from 'vue';
+  import ventBox1 from './ventBoxBelt.vue';
+  import { openWindow } from '/@/utils';
+  import { getFormattedText } from '../../hooks/helper';
+  import { useInitModule } from '../../hooks/useInit';
+  // import { ModuleProps } from '../types';
 
-const props = defineProps<{
-  pageType: string;
-  /** 配置的详细模块信息 */
-  moduleData: any;
-  /** 配置的详细样式信息 */
-  showStyle: any;
-  /** 该模块配置中的设备标识符 */
-  deviceType: string;
-  /** api返回的数据 */
-  data: any;
-  moduleName: string;
-  visible: boolean;
-  chartData?: any;
-}>();
-defineEmits(['close', 'click']);
+  const props = defineProps<{
+    pageType: string;
+    /** 配置的详细模块信息 */
+    moduleData: any;
+    /** 配置的详细样式信息 */
+    showStyle: any;
+    /** 该模块配置中的设备标识符 */
+    deviceType: string;
+    /** api返回的数据 */
+    data: any;
+    moduleName: string;
+    visible: boolean;
+    chartData?: any;
+  }>();
+  defineEmits(['close', 'click']);
 
-const { header } = props.moduleData;
+  const { header } = props.moduleData;
 
-const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+  const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
 
-const selectedData = ref();
+  const selectedData = ref();
 
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
-});
-const pageType = computed(() => {
-  return props.pageType || '';
-});
-const capitalizedPosition = computed(() => {
-  return props.showStyle.position.includes('left') ? 'Left' : 'Right';
-});
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
+  });
+  const pageType = computed(() => {
+    return props.pageType || '';
+  });
+  const capitalizedPosition = computed(() => {
+    return props.showStyle.position.includes('left') ? 'Left' : 'Right';
+  });
 
-// 根据配置里的定位判断应该使用哪个class
-function getModuleClass({ size, position }) {
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'module-common module-common-longer';
+  // 根据配置里的定位判断应该使用哪个class
+  function getModuleClass({ size, position }) {
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return 'module-common module-common-longer';
+    }
+    return 'module-common';
   }
-  return 'module-common';
-}
 
-function redirectTo() {
-  const { to } = props.moduleData;
-  if (!to) return;
-  openWindow(getFormattedText(props.data, to));
-}
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(getFormattedText(props.data, to));
+  }
 
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
-    if (!selectedDeviceID.value) {
-      console.log(selectedDeviceID.value, '------');
+  watch(
+    () => props.data,
+    (d) => {
+      init(d);
+      if (!selectedDeviceID.value) {
+        console.log(selectedDeviceID.value, '------');
 
-      selectedDeviceID.value = options.value[0]?.value;
+        selectedDeviceID.value = options.value[0]?.value;
+      }
+    },
+    {
+      immediate: true,
     }
-  },
-  {
-    immediate: true,
-  }
-);
+  );
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-.module-common .box1-center {
-  height: calc(100% - 48px);
-}
+  .module-common .box1-center {
+    height: calc(100% - 48px);
+  }
 
-:deep(.box1-center) {
-  height: calc(100% - 48px);
-}
-:deep(.box1-center > .box-container) {
-  height: 100%;
-  padding: 0 !important;
-  width: 100% !important;
-}
-.module-common-longer {
-  :deep(.box1-top) {
-    --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
-    background-image: url('/@/assets/images/beltFire/1-1.png');
+  :deep(.box1-center) {
+    height: calc(100% - 48px);
   }
-  :deep(.box1-bottom) {
-    --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
-    background-image: url('/@/assets/images/beltFire/1-2.png');
+  :deep(.box1-center > .box-container) {
+    height: 100%;
+    padding: 0 !important;
+    width: 100% !important;
+  }
+  .module-common-longer {
+    :deep(.box1-top) {
+      --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
+      background-image: url('/@/assets/images/beltFire/1-1.png');
+    }
+    :deep(.box1-bottom) {
+      --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
+      background-image: url('/@/assets/images/beltFire/1-2.png');
+    }
   }
-}
 </style>

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

@@ -1,125 +0,0 @@
-<template>
-  <!-- 常用模块 -->
-  <Transition
-    :enter-active-class="`animate__animated  animate__fadeIn${capitalizedPosition}`"
-    :leave-active-class="`animate__animated  animate__fadeOut${capitalizedPosition}`"
-  >
-    <ventBox1 v-if="visible" :class="getModuleClass(showStyle)" :style="style" :pageType="pageType">
-      <template v-if="moduleName" #title>
-        <div :class="{ 'cursor-pointer': !!moduleData.to }" style="font-weight: bold; font-style: italic" @click="redirectTo">{{ moduleName }}</div>
-      </template>
-      <template #container>
-        <slot>
-          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
-          <Content
-            :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
-            :moduleData="moduleData"
-            :data="selectedData"
-            :chartData="chartData"
-          />
-        </slot>
-      </template>
-    </ventBox1>
-  </Transition>
-</template>
-<script lang="ts" setup>
-import Header from './headerBelt.vue';
-// import Content from './contentBelt.vue';
-import Content from '../../components/content.vue';
-// import ModuleLeft from './original/moduleLeft.vue';
-// import ModuleBottom from './original/moduleBottom.vue';
-import { computed, ref, watch } from 'vue';
-import ventBox1 from './ventBoxBelt.vue';
-import { openWindow } from '/@/utils';
-import { getFormattedText } from '../../hooks/helper';
-import { useInitModule } from '../../hooks/useInit';
-// import { ModuleProps } from '../types';
-
-const props = defineProps<{
-  pageType: string;
-  /** 配置的详细模块信息 */
-  moduleData: any;
-  /** 配置的详细样式信息 */
-  showStyle: any;
-  /** 该模块配置中的设备标识符 */
-  deviceType: string;
-  /** api返回的数据 */
-  data: any;
-  moduleName: string;
-  visible: boolean;
-  chartData?: any;
-}>();
-defineEmits(['close', 'click']);
-
-const { header } = props.moduleData;
-
-const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
-
-const selectedData = ref();
-
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
-});
-const pageType = computed(() => {
-  return props.pageType || '';
-});
-const capitalizedPosition = computed(() => {
-  return props.showStyle.position.includes('left') ? 'Left' : 'Right';
-});
-
-// 根据配置里的定位判断应该使用哪个class
-function getModuleClass({ size, position }) {
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'module-common module-common-longer';
-  }
-  return 'module-common';
-}
-
-function redirectTo() {
-  const { to } = props.moduleData;
-  if (!to) return;
-  openWindow(getFormattedText(props.data, to));
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
-    if (!selectedDeviceID.value) {
-      selectedDeviceID.value = options.value[0]?.value;
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-</script>
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-.module-common .box1-center {
-  height: calc(100% - 48px);
-}
-
-:deep(.box1-center) {
-  height: calc(100% - 48px);
-}
-:deep(.box1-center > .box-container) {
-  height: 100%;
-  padding: 0 !important;
-  width: 100% !important;
-}
-.module-common-longer {
-  :deep(.box1-top) {
-    --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
-    background-image: url('/@/assets/images/beltFire/1-1.png');
-  }
-  :deep(.box1-bottom) {
-    --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
-    background-image: url('/@/assets/images/beltFire/1-2.png');
-  }
-}
-</style>

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

@@ -73,128 +73,166 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue';
-import { CommonItem, Config } from '../../../../deviceManager/configurationTable/types';
-import CustomListBelt from './detail/CustomListBelt.vue';
-import ComplexListBelt from './detail/ComplexListBelt.vue';
-import ComplexList1Belt from './detail/ComplexList-Belt1.vue';
-import CustomTableBelt from './detail/CustomTableBelt.vue';
-import GateBoard from './detail/gateBoard.vue';
+  import { computed } from 'vue';
+  import { CommonItem, Config } from '../../../../deviceManager/configurationTable/types';
+  import CustomListBelt from './detail/CustomListBelt.vue';
+  import ComplexListBelt from './detail/ComplexListBelt.vue';
+  import ComplexList1Belt from './detail/ComplexList-Belt1.vue';
+  import CustomTableBelt from './detail/CustomTableBelt.vue';
+  import GateBoard from './detail/gateBoard.vue';
 
-import { clone } from 'lodash-es';
-import { getData, getFormattedText } from '../../hooks/helper';
+  import { clone } from 'lodash-es';
+  import { getData, getFormattedText } from '../../hooks/helper';
 
-const props = defineProps<{
-  data: any;
-  moduleData: Config['moduleData'];
-  chartData: any;
-}>();
+  const props = defineProps<{
+    data: any;
+    moduleData: Config['moduleData'];
+    chartData: any;
+  }>();
 
-const { background, layout } = props.moduleData;
+  const { background, layout } = props.moduleData;
 
-// 获取当原始配置带 items 项时的最终 items 配置
-function getItems(raw, items: CommonItem[]) {
-  return items.map((i) => {
-    return {
-      ...i,
-      label: getFormattedText(raw, i.label, i.trans),
-      value: getFormattedText(raw, i.value, i.trans),
-    };
-  });
-}
-
-// 获取当 List 组件配置带 items 项时的最终 items 配置
-function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
-  if (mapFromData && Array.isArray(raw)) {
-    return raw.map((data) => {
-      const item = items[0];
+  // 获取当原始配置带 items 项时的最终 items 配置
+  function getItems(raw, items: CommonItem[]) {
+    return items.map((i) => {
       return {
-        ...item,
-        label: getFormattedText(data, item.label, item.trans),
-        value: getFormattedText(data, item.value, item.trans),
+        ...i,
+        label: getFormattedText(raw, i.label, i.trans),
+        value: getFormattedText(raw, i.value, i.trans),
       };
     });
   }
-  return getItems(raw, items);
-}
-
-/** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
-const layoutConfig = computed(() => {
-  const refData = props.data;
-  const list = clone(props.moduleData.list) || [];
-  const complex_list = clone(props.moduleData.complex_list) || [];
-  const complex_list1 = clone(props.moduleData.complex_list1) || [];
-  const table = clone(props.moduleData.table) || [];
-  const board = clone(props.moduleData.board) || [];
-  const gallery = clone(props.moduleData.gallery) || [];
-  const gallery_list = clone(props.moduleData.gallery_list) || [];
-  const preset = clone(props.moduleData.preset) || [];
-  return layout.items.reduce((arr: any[], item) => {
-    switch (item.name) {
-      case 'board': {
-        const cfg = board.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          overflow: true,
+  // 获取当 List 组件配置带 items 项时的最终 items 配置
+  function getListItems(raw: any, items: CommonItem[], mapFromData?: boolean) {
+    if (mapFromData && Array.isArray(raw)) {
+      return raw.map((data) => {
+        const item = items[0];
+        return {
           ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'gallery': {
-        const cfg = gallery.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          label: getFormattedText(data, item.label, item.trans),
+          value: getFormattedText(data, item.value, item.trans),
+        };
+      });
+    }
+    return getItems(raw, items);
+  }
 
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'list': {
-        const cfg = list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+  /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
+  const layoutConfig = computed(() => {
+    const refData = props.data;
+    const list = clone(props.moduleData.list) || [];
+    const complex_list = clone(props.moduleData.complex_list) || [];
+    const complex_list1 = clone(props.moduleData.complex_list1) || [];
+    const table = clone(props.moduleData.table) || [];
+    const board = clone(props.moduleData.board) || [];
+    const gallery = clone(props.moduleData.gallery) || [];
+    const gallery_list = clone(props.moduleData.gallery_list) || [];
+    const preset = clone(props.moduleData.preset) || [];
+    return layout.items.reduce((arr: any[], item) => {
+      switch (item.name) {
+        case 'board': {
+          const cfg = board.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getListItems(data, cfg.items, cfg.mapFromData),
-        });
-        break;
-      }
-      case 'complex_list': {
-        const cfg = complex_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: getItems(data, cfg.items),
+          });
+          break;
+        }
+        case 'gallery': {
+          const cfg = gallery.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        if (cfg.mapFromData) {
-          const firstListItem = cfg.items[0];
           arr.push({
             overflow: true,
             ...item,
             ...cfg,
-            items: (data || []).map((d) => {
-              return {
-                title: getFormattedText(d, firstListItem.title, firstListItem.trans),
-                contents: firstListItem.contents.map((e) => {
-                  return {
-                    ...e,
-                    label: getFormattedText(d, e.label, e.trans),
-                    value: getFormattedText(d, e.value, e.trans),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
           });
-        } else {
+          break;
+        }
+        case 'list': {
+          const cfg = list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: getListItems(data, cfg.items, cfg.mapFromData),
+          });
+          break;
+        }
+        case 'complex_list': {
+          const cfg = complex_list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
+          if (cfg.mapFromData) {
+            const firstListItem = cfg.items[0];
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: (data || []).map((d) => {
+                return {
+                  title: getFormattedText(d, firstListItem.title, firstListItem.trans),
+                  contents: firstListItem.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(d, e.label, e.trans),
+                      value: getFormattedText(d, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          } else {
+            arr.push({
+              overflow: true,
+              ...item,
+              ...cfg,
+              items: cfg.items.map((i) => {
+                return {
+                  title: getFormattedText(data, i.title, i.trans),
+                  contents: i.contents.map((e) => {
+                    return {
+                      ...e,
+                      label: getFormattedText(data, e.label, e.trans),
+                      value: getFormattedText(data, e.value, e.trans),
+                    };
+                  }),
+                };
+              }),
+            });
+          }
+          break;
+        }
+        case 'gallery_list': {
+          const cfg = gallery_list.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            items: getItems(data, cfg.items),
+            galleryItems: getItems(data, cfg.galleryItems),
+          });
+          break;
+        }
+        case 'complex_list1': {
+          const cfg = complex_list1.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
           arr.push({
             overflow: true,
             ...item,
@@ -212,190 +250,152 @@ const layoutConfig = computed(() => {
               };
             }),
           });
-        }
-        break;
-      }
-      case 'gallery_list': {
-        const cfg = gallery_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          console.log(refData, 'refData');
 
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-          galleryItems: getItems(data, cfg.galleryItems),
-        });
-        break;
-      }
-      case 'complex_list1': {
-        const cfg = complex_list1.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: cfg.items.map((i) => {
-            return {
-              title: getFormattedText(data, i.title, i.trans),
-              contents: i.contents.map((e) => {
-                return {
-                  ...e,
-                  label: getFormattedText(data, e.label, e.trans),
-                  value: getFormattedText(data, e.value, e.trans),
-                };
-              }),
-            };
-          }),
-        });
-        console.log(refData, 'refData');
-
-        break;
-      }
-      case 'table': {
-        const cfg = table.shift();
-        console.log(cfg, '111');
-        if (!cfg) break;
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          columns: cfg.columns,
-          data: refData,
-        });
-        break;
-      }
-      default: {
-        const cfg = preset.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          break;
+        }
+        case 'table': {
+          const cfg = table.shift();
+          console.log(cfg, '111');
+          if (!cfg) break;
+          arr.push({
+            overflow: true,
+            ...item,
+            ...cfg,
+            columns: cfg.columns,
+            data: refData,
+          });
+          break;
+        }
+        default: {
+          const cfg = preset.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...item,
-          data,
-          config: cfg,
-        });
-        break;
+          arr.push({
+            ...item,
+            data,
+            config: cfg,
+          });
+          break;
+        }
       }
-    }
-    return arr;
-  }, []);
-});
+      return arr;
+    }, []);
+  });
 </script>
 <style lang="less" scoped>
-@import '@/design/theme.less';
+  @import '@/design/theme.less';
 
-.content {
-  position: relative;
-  // z-index: -2;
-  display: flex;
-  flex-direction: column;
-  overflow-y: auto; // 这里会导致样式无故添加滚动条
-  overflow-x: hidden;
-}
+  .content {
+    position: relative;
+    // z-index: -2;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto; // 这里会导致样式无故添加滚动条
+    overflow-x: hidden;
+  }
 
-.content__background {
-  width: 100%;
-  // height: 100%;
-  height: calc(100% - 65px);
-  position: absolute;
-  top: 65px;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-  padding: 5px;
-  box-sizing: border-box;
-}
-.content__background_1 {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0px;
-  left: 0;
-  z-index: 0;
-  object-fit: fill;
-}
+  .content__background {
+    width: 100%;
+    // height: 100%;
+    height: calc(100% - 65px);
+    position: absolute;
+    top: 65px;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+    padding: 5px;
+    box-sizing: border-box;
+  }
+  .content__background_1 {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0px;
+    left: 0;
+    z-index: 0;
+    object-fit: fill;
+  }
 
-.image__background {
-  width: 35%;
-  height: 61%;
-  left: 30%;
-}
+  .image__background {
+    width: 35%;
+    height: 61%;
+    left: 30%;
+  }
 
-.content__module {
-  // margin-top: 5px;
-  // margin-bottom: 5px;
-  width: 100%;
-  height: 100%;
-}
+  .content__module {
+    // margin-top: 5px;
+    // margin-bottom: 5px;
+    width: 100%;
+    height: 100%;
+  }
 
-.content__module1 {
-  background: url('@/assets/images/beltFire/yjkf/2-1.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  height: 30%;
-  margin-top: 20%;
-}
+  .content__module1 {
+    background: url('@/assets/images/beltFire/yjkf/2-1.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    height: 30%;
+    margin-top: 20%;
+  }
 
-.content__moduleFire {
-  width: 100%;
-  height: 100%;
-  margin-left: -24% !important;
-}
+  .content__moduleFire {
+    width: 100%;
+    height: 100%;
+    margin-left: -24% !important;
+  }
 
-.content__module_dust {
-  background: url('@/assets/images/vent/homeNew/bottomBg.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-}
+  .content__module_dust {
+    background: url('@/assets/images/vent/homeNew/bottomBg.png');
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+  }
 
-// .content__module:first-of-type {
-//   margin-top: 0;
-// }
-// .content__module:last-of-type {
-//   margin-bottom: 0;
-// }
-::-webkit-scrollbar {
-  width: 5px !important;
-}
+  // .content__module:first-of-type {
+  //   margin-top: 0;
+  // }
+  // .content__module:last-of-type {
+  //   margin-bottom: 0;
+  // }
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
 
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
 
-:deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
-  /* background-color: transparent; */
-  color: #fff;
-}
+  :deep(.zxm-select:not(.zxm-select-customize-input) .zxm-select-selector) {
+    /* background-color: transparent; */
+    color: #fff;
+  }
 
-:deep(.zxm-select-arrow) {
-  color: #fff;
-}
+  :deep(.zxm-select-arrow) {
+    color: #fff;
+  }
 
-:deep(.zxm-select-selection-item) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-selection-item) {
+    color: #fff !important;
+  }
 
-:deep(.zxm-select-selection-placeholder) {
-  color: #fff !important;
-}
+  :deep(.zxm-select-selection-placeholder) {
+    color: #fff !important;
+  }
 
-:deep(.dialog-overlay) {
-  width: 100%;
-  height: 100%;
-  position: unset;
-  box-shadow: unset;
-}
+  :deep(.dialog-overlay) {
+    width: 100%;
+    height: 100%;
+    position: unset;
+    box-shadow: unset;
+  }
 
-::-webkit-scrollbar {
-  width: 5px !important;
-}
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
 
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
 </style>

src/views/vent/home/configurable/belt/components/customHeader-belt.vue

@@ -22,134 +22,135 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { Decoration5 } from '@kjgl77/datav-vue3';
-export default defineComponent({
-  name: 'CustomHeader',
-  components: { Decoration5 },
-  props: {
-    optionValue: {
-      type: String,
+  import { defineComponent, computed } from 'vue';
+  import { Decoration5 } from '@kjgl77/datav-vue3';
+  export default defineComponent({
+    name: 'CustomHeader',
+    components: { Decoration5 },
+    props: {
+      optionValue: {
+        type: String,
+      },
+      fieldNames: {
+        type: Object,
+        default: () => {},
+      },
+      options: {
+        type: Array,
+        default: () => [],
+      },
     },
-    fieldNames: {
-      type: Object,
-      default: () => {},
+    emits: ['change'],
+    setup(props, { emit }) {
+      const currentTitleValue = computed(() => props.optionValue);
+      // 标题选择
+      function handleTitleChange(value) {
+        emit('change', value);
+      }
+      return {
+        currentTitleValue,
+        handleTitleChange,
+      };
     },
-    options: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    const currentTitleValue = computed(() => props.optionValue);
-    // 标题选择
-    function handleTitleChange(value) {
-      emit('change', value);
-    }
-    return {
-      currentTitleValue,
-      handleTitleChange,
-    };
-  },
-});
+  });
 </script>
 <style lang="less">
-@import '/@/design/vent/modal.less';
+  @import '/@/design/vent/modal.less';
 
-.@{ventSpace}-select-dropdown.drop {
-  background-color: transparent !important;
+  .@{ventSpace}-select-dropdown.drop {
+    background-color: transparent !important;
 
-  .@{ventSpace}-select-item-option-selected,
-  .@{ventSpace}-select-item-option-active {
-    background-color: #ffffff33 !important;
-  }
-  .@{ventSpace}-select-item {
-    color: inherit;
-    &:hover {
+    .@{ventSpace}-select-item-option-selected,
+    .@{ventSpace}-select-item-option-active {
       background-color: #ffffff33 !important;
     }
-  }
-  .@{ventSpace}-select-tree {
-    .@{ventSpace}-select-tree-treenode {
+    .@{ventSpace}-select-item {
       color: inherit;
+      &:hover {
+        background-color: #ffffff33 !important;
+      }
     }
-    .@{ventSpace}-select-tree-switcher-icon {
-      color: inherit;
+    .@{ventSpace}-select-tree {
+      .@{ventSpace}-select-tree-treenode {
+        color: inherit;
+      }
+      .@{ventSpace}-select-tree-switcher-icon {
+        color: inherit;
+      }
     }
   }
-}
 </style>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@ventSpace: zxm;
+  @import '/@/design/theme.less';
+  @ventSpace: zxm;
 
-.vent-custom-header {
-  --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
-  --image-select-bg: url('/@/assets/images/vent/home/select-bg.png');
-  width: 100%;
-  position: relative;
-  z-index: 9999;
-  pointer-events: none;
-  .vent-home-header {
+  .vent-custom-header {
+    --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
+    --image-select-bg: url('/@/assets/images/vent/home/select-bg.png');
     width: 100%;
-    position: fixed;
-    top: 0;
-    background: var(--image-vent-header1) no-repeat;
-    height: 89px;
-    background-size: contain;
-    display: flex;
-    justify-content: center;
-    .header-icon {
-      margin-top: 45px;
-    }
-    .header-text {
-      position: fixed;
-      top: 5px;
-      color: #fff;
-      font-size: 32px;
-      font-family: 'ysbtFont';
-      background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
-      -webkit-background-clip: text;
-      color: transparent;
-    }
-  }
-  .container-title {
-    width: 380px;
-    height: 34px;
-    top: 0px;
-    left: 20px;
-    // background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
-    background: var(--image-select-bg) no-repeat;
-    background-size: contain;
-    padding: 0 0 0 20px;
-    // padding: 0 0 0 180px;
-    font-size: 20px;
-    pointer-events: auto;
     position: relative;
     z-index: 9999;
-    .title-select {
-      width: 340px;
-      position: absolute;
-
+    pointer-events: none;
+    height: 60px;
+    .vent-home-header {
+      width: 100%;
+      position: fixed;
       top: 0;
-      // left: 160px;
+      background: var(--image-vent-header1) no-repeat;
+      height: 89px;
+      background-size: contain;
+      display: flex;
+      justify-content: center;
+      .header-icon {
+        margin-top: 45px;
+      }
+      .header-text {
+        position: fixed;
+        top: 5px;
+        color: #fff;
+        font-size: 32px;
+        font-family: 'ysbtFont';
+        background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
+        -webkit-background-clip: text;
+        color: transparent;
+      }
     }
-  }
-}
-:deep(.zxm-select) {
-  width: 300px;
-  .@{ventSpace}-select-selector {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    .zxm-select-selection-item {
-      color: #fff !important;
+    .container-title {
+      width: 380px;
+      height: 34px;
+      top: 0px;
+      left: 20px;
+      // background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+      background: var(--image-select-bg) no-repeat;
+      background-size: contain;
+      padding: 0 0 0 20px;
+      // padding: 0 0 0 180px;
       font-size: 20px;
+      pointer-events: auto;
+      position: relative;
+      z-index: 9999;
+      .title-select {
+        width: 340px;
+        position: absolute;
+
+        top: 0;
+        // left: 160px;
+      }
     }
   }
-  .@{ventSpace}-select-arrow {
-    color: #fff !important;
+  :deep(.zxm-select) {
+    width: 300px;
+    .@{ventSpace}-select-selector {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      .zxm-select-selection-item {
+        color: #fff !important;
+        font-size: 20px;
+      }
+    }
+    .@{ventSpace}-select-arrow {
+      color: #fff !important;
+    }
   }
-}
 </style>

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

@@ -6004,6 +6004,7 @@ function getTunPath(beltModal) {
             point.getWorldPosition(pos);
             pos.applyMatrix4(beltModal.matrixWorld.clone().invert());
             posList.push(pos);
+            point.visible = false;
           } else {
             break;
           }