[Feat 0000]皮带巷三级防灭火子页面

src/assets/images/beltFire/yjkf/1-1-1.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16.017" height="22.702" viewBox="0 0 16.017 22.702">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abdcff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57957" data-name="路径 57957" d="M161.109,0A7.462,7.462,0,0,0,153.6,7.509c0,5.578,7.509,13.945,7.509,13.945s7.509-8.367,7.509-13.945A7.462,7.462,0,0,0,161.109,0Zm0,10.19a2.682,2.682,0,1,1,2.682-2.682A2.656,2.656,0,0,1,161.109,10.19Z" transform="translate(-153.1 0.5)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/beltFire/yjkf/1-4wz.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20.546" height="20.566" viewBox="0 0 20.546 20.566">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" y1="1" x2="0.5" y2="0.083" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#abffff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57955" data-name="路径 57955" d="M10.821,9.986a4.772,4.772,0,0,1,1.9.38,4.867,4.867,0,0,1,2.592,2.592,4.772,4.772,0,0,1,.38,1.9,4.895,4.895,0,0,1-1.423,3.469,4.894,4.894,0,0,1-1.549,1.043,4.94,4.94,0,0,1-3.8,0,4.841,4.841,0,0,1-2.592-2.6,4.842,4.842,0,0,1-.38-1.91,4.772,4.772,0,0,1,.38-1.9,4.867,4.867,0,0,1,2.592-2.592A4.772,4.772,0,0,1,10.821,9.986Zm9.744,3.644v2.455H19.4a8.624,8.624,0,0,1-2.446,4.96,8.845,8.845,0,0,1-2.241,1.627,8.329,8.329,0,0,1-2.7.838v1.13H9.574V23.51a8.427,8.427,0,0,1-2.689-.867,8.893,8.893,0,0,1-2.212-1.627,8.735,8.735,0,0,1-1.6-2.231,8.131,8.131,0,0,1-.809-2.7H1.019V13.63H2.286a8.235,8.235,0,0,1,.857-2.621A8.856,8.856,0,0,1,4.751,8.836,8.689,8.689,0,0,1,9.574,6.419V5.075H12.01V6.4a8.252,8.252,0,0,1,2.66.828,8.993,8.993,0,0,1,2.212,1.588A8.663,8.663,0,0,1,18.5,11a8.344,8.344,0,0,1,.857,2.631h1.208Zm-9.744,7.347a6.077,6.077,0,0,0,4.336-1.793,6.37,6.37,0,0,0,1.315-1.959,6.092,6.092,0,0,0,0-4.775,6.172,6.172,0,0,0-3.264-3.264,6.092,6.092,0,0,0-4.775,0A6.37,6.37,0,0,0,6.476,10.5,6.162,6.162,0,0,0,5.16,17.225,6.12,6.12,0,0,0,8.434,20.5a6.026,6.026,0,0,0,2.387.477Z" transform="translate(-0.519 -4.575)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/beltFire/yjkf/2-5.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24.365" height="27.914" viewBox="0 0 24.365 27.914">
+  <defs>
+    <filter id="多边形_5" x="0" y="0" width="24.365" height="27.914" filterUnits="userSpaceOnUse">
+      <feOffset input="SourceAlpha"/>
+      <feGaussianBlur stdDeviation="3" result="blur"/>
+      <feFlood flood-color="#3df6ff"/>
+      <feComposite operator="in" in2="blur"/>
+      <feComposite in="SourceGraphic"/>
+    </filter>
+  </defs>
+  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#多边形_5)">
+    <path id="多边形_5-2" data-name="多边形 5" d="M4.957,0,9.914,6.365H0Z" transform="translate(15.37 9) rotate(90)" fill="#3df6ff"/>
+  </g>
+</svg>

src/assets/images/beltFire/yjkf/2-6.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="25.71" height="25.198" viewBox="0 0 25.71 25.198">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#fff"/>
+      <stop offset="1" stop-color="#ff5353"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57940" data-name="路径 57940" d="M20.831,23.127a1.543,1.543,0,0,0-.782-.411.376.376,0,0,1-.311-.366V13.663a6.955,6.955,0,0,0-13.908-.052V22.35a.376.376,0,0,1-.311.366A1.522,1.522,0,0,0,4.283,24.2h17a1.5,1.5,0,0,0-.452-1.07ZM14.118,10.965l-.468,4.1h1.838L11.45,20.795l.468-4.1h-1.84ZM12.783,4.915a.764.764,0,0,1-.773-.756V.756a.773.773,0,0,1,1.545,0v3.4A.764.764,0,0,1,12.783,4.915ZM7.181,7a.782.782,0,0,1-1.055-.276L4.387,3.774a.748.748,0,0,1,.283-1.033.782.782,0,0,1,1.055.276L7.463,5.964A.748.748,0,0,1,7.181,7Zm11.2,0a.782.782,0,0,0,1.055-.276l1.739-2.947A.748.748,0,0,0,20.9,2.741a.782.782,0,0,0-1.055.276L18.1,5.964A.748.748,0,0,0,18.385,7ZM5.309,10.513a.773.773,0,0,1-.947.534L1,10.168a.757.757,0,0,1-.548-.926A.773.773,0,0,1,1.4,8.708l3.359.881A.753.753,0,0,1,5.309,10.513Zm14.947,0a.773.773,0,0,0,.947.534l3.359-.881a.753.753,0,0,0,.546-.926.773.773,0,0,0-.947-.534L20.8,9.587A.757.757,0,0,0,20.256,10.513Z" transform="translate(0.073 0.5)" stroke="rgba(0,0,0,0)" stroke-miterlimit="10" stroke-width="1" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/beltFire/yjkf/3D.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="22.634" height="17.184" viewBox="0 0 22.634 17.184">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#36c7ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57956" data-name="路径 57956" d="M33.2,100.155a3.409,3.409,0,0,0-2.482,1.035h0a7.045,7.045,0,0,0-1.525,2.645l-.284.813,1.573.923.366-.706c.533-1.029,1.023-1.371,1.679-1.371a1.032,1.032,0,0,1,.9.424l0,.005,0,0a1.574,1.574,0,0,1,.351,1.14,2.667,2.667,0,0,1-.23,1.134,2.159,2.159,0,0,1-.758.874h0a2.6,2.6,0,0,1-1.125.5l-.671.1v2.074h1.055a2.223,2.223,0,0,1,1.067.281l0,0,0,0a2.928,2.928,0,0,1,.839.609,2.248,2.248,0,0,1,.34.637h0a3.493,3.493,0,0,1,.243,1.283,2.046,2.046,0,0,1-.469,1.392l0,0,0,0a1.21,1.21,0,0,1-1.035.57,1.433,1.433,0,0,1-.492-.081l-.012,0-.013,0c.017.005-.245-.115-.587-.329a3.847,3.847,0,0,0-.826-.467,1.96,1.96,0,0,0-.679-.127,1.432,1.432,0,0,0-1.031.484l-.006.007-.006.007a1.963,1.963,0,0,0-.444,1.226,2.061,2.061,0,0,0,.771,1.558l0,0,0,0a3.067,3.067,0,0,0,2.113.531,5.162,5.162,0,0,0,4.384-2.148h0a6.683,6.683,0,0,0,1.2-3.929,5.685,5.685,0,0,0-.715-2.864,4.473,4.473,0,0,0-1.034-1.211,5.177,5.177,0,0,0,1.146-3.109,4.3,4.3,0,0,0-.77-2.432,3.341,3.341,0,0,0-2.839-1.49Zm4.521.3v2.26h1.226c.261,0,.363.052.429.121a1.075,1.075,0,0,1,.047.2,7.234,7.234,0,0,1,.051.963v9.535c0,.775-.165,1.271-.069,1.1l0,0,0,0c-.062.116-.1.178-.455.178H37.717v2.261h6.218a6.922,6.922,0,0,0,5.856-2.611h0a9.487,9.487,0,0,0,1.746-5.772,10.1,10.1,0,0,0-.982-4.526,6.279,6.279,0,0,0-2.645-2.878,9.587,9.587,0,0,0-4.462-.828Zm6.092,2.685a3.516,3.516,0,0,1,2.977,1.472,8.066,8.066,0,0,1,0,8.36,3.437,3.437,0,0,1-2.9,1.481,5.888,5.888,0,0,1-1.148-.141V103.281a5.022,5.022,0,0,1,1.076-.136Z" transform="translate(-28.904 -100.155)" fill="url(#linear-gradient)"/>
+</svg>

src/assets/images/beltFire/yjkf/yjkz.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="23.533" height="23.533" viewBox="0 0 23.533 23.533">
+  <defs>
+    <linearGradient id="linear-gradient" x1="0.5" x2="0.5" y2="1" gradientUnits="objectBoundingBox">
+      <stop offset="0" stop-color="#36c7ff"/>
+      <stop offset="1" stop-color="#fff"/>
+    </linearGradient>
+  </defs>
+  <path id="路径_57958" data-name="路径 57958" d="M74.231,62.464A11.767,11.767,0,1,0,86,74.231,11.772,11.772,0,0,0,74.231,62.464Zm6.666,10.3-8.322,8.869,1.765-5.83H67.531l8.322-8.868-1.766,5.828H80.9Z" transform="translate(-62.464 -62.464)" fill="url(#linear-gradient)"/>
+</svg>

src/views/vent/BeltLaneThreeLevelFire/WindControl/index.vue

@@ -4,7 +4,6 @@
       <!-- 左侧面板：短路风门管控 -->
       <div class="left-panel">
         <div class="panel-title">短路风门管控详情</div>
-
         <!-- 风门数据列表 -->
         <div class="door-list">
           <div class="door-card" v-for="item in doorList" :key="item.id">

src/views/vent/deviceManager/configurationTable/types.ts

@@ -101,7 +101,8 @@ export interface ModuleData {
         | 'card_list'
         | 'generalist'
         | 'nitrogenBtnList'
-        | 'complex_list1';
+        | 'complex_list1'
+        | 'gateBoard';
       /** 分区大小 */
       basis: string;
       overflow?: boolean;

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

@@ -1,375 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="company-home">
-    <div class="border">
-      <customHeader>皮带巷三级防灭火系统</customHeader>
-      <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-        <SubApp />
-      </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"
-          :data="readData"
-          :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 '../../home/configurable/hooks/useInit';
-  import { testBeltLaneFire } from './configurable.data.Belt';
-  import ModuleCommon from './components/ModuleCommonBelt.vue';
-  import SubApp from '/@/components/vent/micro/createSubApp.vue';
-  // import { BDFireMock } from './mock';
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { updateEnhancedConfigs, updateData } = 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: '1#区域',
-            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: [
-      {
-        beltName: '测试1',
-        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: '在线',
-          },
-        ],
-      },
-      {
-        beltName: '测试2',
-        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();
-    });
-  }
-  // async function getDataSource() {
-  //   const res = await list({ devicetype: 'belt', pagetype: 'normal' });
-  //   let dataSource: any = [];
-  //   dataSource = res.msgTxt[0] && res.msgTxt[0].datalist ? res.msgTxt[0].datalist[0] : {};
-  //   if (dataSource) {
-  //     readData.value = Object.assign(dataSource, dataSource.readData);
-  //   }
-  // }
-
-  // 查询关联设备列表
-  // async function getDeviceList() {
-  //   const res = await systemList({ devicetype: 'sys', systemID: optionValue.value });
-  //   const result = res.msgTxt;
-  //   const deviceArr = <DeviceType[]>[];
-  //   result.forEach((item) => {
-  //     const data = item['datalist'].filter((data: any) => {
-  //       const readData = data.readData;
-  //       return Object.assign(data, readData);
-  //     });
-  //     if (item.type != 'sys') {
-  //       deviceArr.unshift({ deviceType: item.type, deviceName: item['typeName'] ? item['typeName'] : item['datalist'][0]['typeName'], datalist: data });
-  //     }
-  //   });
-  //   deviceList.value = deviceArr;
-  //   deviceActive.value = deviceArr[0].deviceType;
-  //   deviceChange(0);
-  // }
-
-  function initInterval() {
-    setInterval(() => {
-      refresh();
-    }, 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;
-  }
-
-  #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%;
-    }
-  }
-</style>

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

@@ -26,7 +26,7 @@
 import { onMounted, ref } from 'vue';
 import customHeader from './components/customHeader-belt.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import { testBeltLaneFire } from './configurable.data.Belt';
+import { testBeltLaneFire } from './configurable.data';
 import ModuleCommon from './components/ModuleCommonBelt.vue';
 import SubApp from '/@/components/vent/micro/createSubApp.vue';
 import { read } from 'fs';

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

@@ -2,7 +2,10 @@
 <template>
   <div class="company-home">
     <div class="border">
-      <customHeader>皮带巷智能管控</customHeader>
+      <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"
@@ -24,29 +27,57 @@
 import { onMounted, ref } from 'vue';
 import customHeader from './components/customHeader-belt.vue';
 import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import { testYjkf } from './configurable.data.Belt';
+import { testYjkf } from './configurable.data';
 import ModuleCommon from './components/ModuleCommonBelt.vue';
-
-import { read } from 'fs';
+import { getDevice, sysList } from './configurable.api';
+import { message, Modal } from 'ant-design-vue';
+import BeltNav from './components/BeltNav.vue';
 // import { BDFireMock } from './mock';
 const { configs, fetchConfigs } = useInitConfigs();
 const { updateEnhancedConfigs, updateData } = useInitPage('皮带巷智能管控');
-// const readData = ref({});
+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;
-    // Promise.resolve(readData).then(updateData);
+    Promise.resolve(readData).then(updateData);
     // updateEnhancedConfigs(configs.value);
     // getDataSource();
   });
 }
-
 function initInterval() {
   setInterval(() => {
     refresh();
   }, 60000);
 }
-onMounted(() => {
+onMounted(async () => {
   refresh();
   initInterval();
 });
@@ -86,5 +117,12 @@ onMounted(() => {
     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

@@ -0,0 +1,183 @@
+<template>
+  <div class="tech-nav-container">
+    <!-- 左侧圆形图标 -->
+    <div class="icon-left">
+      <div class="icon-circle">
+        <div class="icon"></div>
+      </div>
+    </div>
+    <!-- 中间按钮组 -->
+    <div class="top-img"></div>
+    <div class="nav-buttons">
+      <div
+        v-for="(item, index) in menuList"
+        :key="index"
+        :class="[activeIndex === index ? 'nav-menu-active' : 'nav-menu-item', `btn-${item.position}`]"
+        @click="handleNavClick({ item, index })"
+      >
+        <span>{{ item.name }}</span>
+      </div>
+    </div>
+    <!-- 右侧圆形图标 -->
+    <div class="icon-right">
+      <div class="icon-circle">
+        <div class="icon"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+const router = useRouter();
+const route = useRoute();
+
+// 当前激活菜单
+const activeIndex = ref(0);
+
+const menuList = ref([
+  {
+    name: '防灭火监测与预警',
+    targatUrl: '/BeltMonitorWarn/index',
+    position: 'left',
+  },
+  {
+    name: '喷淋系统管控',
+    targatUrl: '/SprySystem/index',
+    position: 'center',
+  },
+  {
+    name: '应急控风减灾',
+    targatUrl: '/micro-vent-3dModal/beltYjkf/index',
+    position: 'right',
+  },
+]);
+
+// 点击事件
+function handleNavClick(data: any) {
+  activeIndex.value = data.index;
+  router.push({ path: data.item.targatUrl });
+}
+
+onMounted(() => {
+  const currentPath = route.path;
+  const idx = menuList.value.findIndex((item) => item.targatUrl === currentPath);
+  if (idx !== -1) activeIndex.value = idx;
+});
+</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 {
+    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-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-menu-item {
+  color: #59acc7;
+}
+.nav-menu-item:hover {
+  color: #fff;
+}
+
+.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');
+}
+</style>

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

@@ -24,7 +24,7 @@
 </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 } from 'vue';

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

@@ -32,6 +32,18 @@
     </video>
     <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
       <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
+        <template v-if="config.name === 'board'">
+          <div class="content__module content__module1 flex flex-justify-around flex-items-center flex-wrap">
+            <MiniBoard
+              v-for="item in config.items"
+              :key="item.prop"
+              :label="item.label"
+              :value="item.value"
+              :type="config.type"
+              :layout="config.layout"
+            />
+          </div>
+        </template>
         <!-- 通常列表部分 -->
         <template v-if="config.name === 'list'">
           <CustomListBelt class="content__module" :type="config.type" :list-config="config.items" />
@@ -64,6 +76,8 @@ 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';
 
@@ -108,9 +122,39 @@ const layoutConfig = computed(() => {
   const complex_list = clone(props.moduleData.complex_list) || [];
   const complex_list1 = clone(props.moduleData.complex_list1) || [];
   const table = clone(props.moduleData.table) || [];
-  const mockData = clone(props.chartData) || [];
+  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: getItems(data, cfg.items),
+        });
+        break;
+      }
+      case 'gallery': {
+        const cfg = gallery.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 'list': {
         const cfg = list.shift();
         if (!cfg) break;
@@ -308,10 +352,10 @@ const layoutConfig = computed(() => {
 }
 
 .content__module1 {
-  background: url('@/assets/images/vent/homeNew/databg/4.png');
+  background: url('@/assets/images/beltFire/yjkf/2-1.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  height: 129px;
+  height: 30%;
   margin-top: 20%;
 }
 

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

@@ -3,6 +3,22 @@
     <div class="vent-home-header">
       <div class="header-text"><slot></slot></div>
     </div>
+    <div class="container-title" v-if="fieldNames">
+      <a-select
+        class="title-select"
+        ref="select"
+        v-model:value="currentTitleValue"
+        @change="handleTitleChange"
+        dropdownClassName="drop"
+        :field-names="fieldNames"
+        :options="options"
+        :dropdownStyle="{ background: 'transparent', borderBottom: '1px solid #ececec66', backdropFilter: 'blur(50px)', color: '#fff' }"
+      >
+        <a-select-option value="2">15212工作面</a-select-option>
+        <a-select-option value="1598491318007898113">采煤工作面</a-select-option>
+        <a-select-option value="3">掘进工作面</a-select-option>
+      </a-select>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -11,8 +27,31 @@ import { Decoration5 } from '@kjgl77/datav-vue3';
 export default defineComponent({
   name: 'CustomHeader',
   components: { Decoration5 },
-  props: {},
+  props: {
+    optionValue: {
+      type: String,
+    },
+    fieldNames: {
+      type: Object,
+      default: () => {},
+    },
+    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">
@@ -46,7 +85,8 @@ export default defineComponent({
 @ventSpace: zxm;
 
 .vent-custom-header {
-  --image-vent-header1: url('/@/assets/images/beltFire/top.png');
+  --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;
@@ -55,8 +95,6 @@ export default defineComponent({
     width: 100%;
     position: fixed;
     top: 0;
-    // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
-    // height: 100px;
     background: var(--image-vent-header1) no-repeat;
     height: 89px;
     background-size: contain;
@@ -76,6 +114,28 @@ export default defineComponent({
       color: transparent;
     }
   }
+  .container-title {
+    width: 380px;
+    height: 34px;
+    top: 20px;
+    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;
+    }
+  }
 }
 :deep(.zxm-select) {
   width: 300px;

src/views/vent/home/configurable/belt/components/detail/CustomTableBelt.vue

@@ -146,7 +146,6 @@ function get(o, p) {
       background-image: var(--image-content-text);
     }
   }
-
   .status-dot {
     display: inline-block;
     width: 8px;
@@ -157,15 +156,18 @@ function get(o, p) {
 
   .status-dot.online {
     background-color: #46ff9c;
+    box-shadow: 0 0 6px 2px rgba(76, 248, 142, 0.6);
   }
 
   .status-dot.open {
     background-color: #2cb6ff;
+    box-shadow: 0 0 6px 2px rgba(34, 125, 245, 0.425);
   }
 
   .status-dot.offline,
   .status-dot.closed {
     background-color: gray;
+    box-shadow: 0 0 6px 2px rgba(105, 105, 105, 0.6);
   }
 }
 </style>

src/views/vent/home/configurable/belt/components/detail/gateBoard.vue

@@ -0,0 +1,287 @@
+<template>
+  <div class="wind-control-page">
+    <div class="title">
+      <div class="panel-title"><span>短路风门管控详情</span></div>
+    </div>
+    <div class="content-layout">
+      <!-- 左侧面板：短路风门管控 -->
+      <div class="left-panel">
+        <!-- 风门数据列表 -->
+        <div class="door-list">
+          <div class="door-card" v-for="item in gateData" :key="item.id">
+            <div class="door-position">
+              <div class="position"></div>
+              <div class="door-name"
+                ><span>位置</span><span>{{ item.position }}</span></div
+              >
+              <a-button class="door-btn">一键双开</a-button>
+            </div>
+            <div class="door-header">
+              <div class="info-column" v-for="(item, index) in gateData" :key="index">
+                <span class="col-label">{{ item.label }}</span>
+                <span class="col-value" :class="[item.value === '打开' || item.value === '在线' ? 'status-open' : 'status-close', 'status-dot']">
+                  {{ item.value }}
+                </span>
+              </div>
+            </div>
+            <!-- 模型展示占位div -->
+            <div class="model-placeholder">
+              <img :src="item.modelImg" alt="风门模型" class="model-img" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, nextTick, defineProps, watch } from 'vue';
+import * as echarts from 'echarts';
+import { get } from 'lodash-es';
+
+let props = defineProps({
+  devicedata: {
+    type: Object,
+    default: () => {
+      return {};
+    },
+  },
+  gateData: {
+    type: Object,
+    default: () => {
+      return [];
+    },
+  },
+});
+</script>
+
+<style scoped lang="less">
+.wind-control-page {
+  width: 100%;
+  height: 100%;
+  margin-top: -20px;
+}
+
+.title {
+  margin-top: 20px;
+  background: url('/@/assets/images/beltFire/yjkf/1-2title.png') no-repeat;
+  background-size: 100% 100%;
+  height: 50px;
+}
+
+.panel-title {
+  width: 200px;
+  height: 40px;
+  color: #fff;
+  border-radius: 4px;
+  font-size: 14px;
+  line-height: 50px;
+  margin: 0 20px;
+}
+.panel-title span {
+  background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
+  border: 1px solid #40c4ff;
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  height: 24px;
+  margin: auto;
+  box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.content-layout {
+  display: flex;
+  height: calc(100% - 54px);
+  width: 100%;
+}
+
+.center-panel {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.left-panel {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding: 10px;
+}
+
+.door-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+}
+
+.door-card {
+  background: url('/@/assets/images/beltFire/yjkf/2-1.png') no-repeat;
+  background-size: 100% 100%;
+  border-radius: 4px;
+  padding: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.door-position {
+  background: url('/@/assets/images/beltFire/yjkf/1-5.png') no-repeat;
+  background-size: 100% 100%;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  color: #fff;
+}
+.door-position .position {
+  background: url('/@/assets/images/beltFire/yjkf/1-1-1.svg') no-repeat;
+  background-size: 100% 100%;
+  width: 16px;
+  height: 16px;
+  margin-top: 8px;
+  margin-left: 8px;
+}
+.door-position .door-name {
+  flex: 1;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  font-size: 14px;
+  font-weight: bold;
+  color: #c4ebff;
+  margin: 0 25px 0 25px;
+  line-height: 33px;
+  font-style: italic;
+}
+.door-btn {
+  background: linear-gradient(180deg, #34b7f1 0%, #1890ff 100%);
+  border: 1px solid #40c4ff;
+  color: #fff;
+  font-size: 12px;
+  padding: 2px 8px;
+  height: 24px;
+  margin: auto;
+  box-shadow: 0 0 6px 2px rgba(24, 144, 255, 0.4);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.door-header {
+  display: flex;
+  flex-direction: row;
+  gap: 6px;
+}
+.info-column {
+  background: url('/@/assets/images/beltFire/yjkf/1-3-1.png') no-repeat;
+  background-size: 100% 100%;
+  height: 60px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 6px;
+  flex: 1;
+}
+.col-label {
+  padding-top: 5px;
+  font-size: 12px;
+  color: #fff;
+  font-weight: normal;
+}
+.col-value {
+  font-size: 12px;
+  font-weight: bold;
+  font-style: italic;
+  color: #fff;
+}
+.col {
+  flex: 1;
+  padding: 0 4px;
+}
+.status-dot {
+  position: relative;
+  padding-left: 12px;
+}
+.status-open::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #52c41a;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  box-shadow: 0 0 6px 2px rgba(82, 196, 26, 0.6);
+}
+.status-close::before {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #3a3a3a;
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  box-shadow: 0 0 6px 2px rgba(90, 90, 90, 0.6);
+}
+.one-key-btn {
+  padding: 2px 8px;
+  font-size: 12px;
+  background: #1890ff;
+  border-color: #1890ff;
+}
+.model-placeholder {
+  width: 100%;
+  height: 120px;
+  background: url('/@/assets/images/beltFire/yjkf/1-4-1.png') no-repeat;
+  background-size: 100% 100%;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.model-img {
+  width: 22%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  gap: 10px;
+  object-fit: cover;
+}
+.right-panel {
+  width: 22%;
+  display: flex;
+  flex-direction: column;
+}
+.video-card {
+  background: rgba(15, 36, 87, 0.6);
+  border: 1px solid #2a52be;
+  border-radius: 4px;
+  padding: 12px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.video-title {
+  margin: 0;
+  font-size: 18px;
+  color: #fff;
+  text-align: center;
+}
+.video-placeholder {
+  flex: 1;
+}
+.video-frame {
+  width: 100%;
+  height: 100%;
+  border: 2px solid #2a52be;
+  border-radius: 4px;
+  background: transparent;
+  position: relative;
+}
+</style>

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

@@ -57,7 +57,6 @@ export default defineComponent({
     top: 0;
     // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
     // height: 100px;
-    background: var(--image-vent-header1) no-repeat;
     height: 89px;
     background-size: contain;
     display: flex;

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

@@ -1,6 +1,6 @@
 <template>
   <div class="vent-box1-bg">
-    <div class="box1-top" v-if="pageType !== 'beltYjkf1'">
+    <div class="box1-top" v-if="pageType !== 'beltYjkf1'" :class="`box1-top-${pageType}`">
       <div class="title">
         <slot name="title"></slot>
       </div>
@@ -53,6 +53,9 @@ export default defineComponent({
       color: #fff;
     }
   }
+  .box1-top-beltYjkf {
+    margin-top: 13px;
+  }
   .box1-center {
     width: 93%;
     margin-left: 15px;

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

@@ -1,12 +1,14 @@
 import { floor, isArray, random, slice } from 'lodash-es';
 import { defHttp } from '/@/utils/http/axios';
-import { get } from '../billboard/utils';
+import { get } from '../../billboard/utils';
 import { useGlobSetting } from '/@/hooks/setting';
 import { reactive } from 'vue';
 import _ from 'lodash';
 
 enum Api {
   list = '/safety/ventanalyDevice/homedata2',
+  getDevice = '/monitor/device', //实时数据
+  sysList = '/safety/ventanalyManageSystem/list',
   getHomeData = '/safety/ventanalyDevice/homedata',
   getDisHome = '/monitor/disaster/getDisHome',
   getBDDustData = '/monitor/disaster/getDisDustHome',
@@ -19,6 +21,9 @@ enum Api {
   system = '/ventanaly-device/monitor/device',
 }
 
+export const sysList = (params) => defHttp.get({ url: Api.sysList, params });
+export const getDevice = (params) => defHttp.post({ url: Api.getDevice, params });
+
 // 搞这个缓存是由于：目前代码上的设计是多个模块发出多次请求，每个模块自己负责消费前者的响应。
 // 这会导致相同的请求被同时发送多次。
 const cache = new Map<string, Promise<any>>();

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

@@ -1,5 +1,5 @@
 import { Config } from '../../deviceManager/configurationTable/types';
-
+// import Mock from 'mock.ts';
 // 皮带巷三级防灭火首页
 export const testBeltLaneFire: Config[] = [
   {
@@ -317,15 +317,16 @@ export const testYjkf: Config[] = [
     pageType: 'beltYjkf1',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
-          show: true,
-          value: '${beltName}',
+          show: false,
+          value: '',
         },
         slot: {
           show: false,
-          value: '',
+          value: '短路风门管控详情',
+          trans: {},
         },
       },
       background: {
@@ -337,7 +338,7 @@ export const testYjkf: Config[] = [
         direction: 'column',
         items: [
           {
-            name: 'list',
+            name: 'gateBoard',
             basis: '100%',
           },
         ],
@@ -347,25 +348,45 @@ export const testYjkf: Config[] = [
       gallery: [],
       gallery_list: [],
       table: [],
-      list: [
-        {
-          type: 'B',
-          readFrom: 'sysList',
-          items: [],
-        },
-      ],
+      list: [],
       complex_list: [],
       preset: [
         {
           readFrom: '',
+          gateData: [
+            {
+              label: '前门状态',
+              value: '${frontStatus}',
+              trans: {
+                '0': '关闭',
+                '1': '打开',
+              },
+            },
+            {
+              label: '后门状态',
+              value: '${backStatus}',
+              trans: {
+                '0': '关闭',
+                '1': '打开',
+              },
+            },
+            {
+              label: '网络状态',
+              value: '${networkStatus}',
+              trans: {
+                '0': '离线',
+                '1': '在线',
+              },
+            },
+          ],
         },
       ],
-      // mock: BDfireMock,
+      mock: Mock,
     },
     showStyle: {
-      size: 'width:440px;height:830px;',
+      size: 'width:440px;height:810px;',
       version: '原版',
-      position: 'top:10px;left:25px;',
+      position: 'top:40px;left:25px;',
     },
   },
   {
@@ -374,7 +395,7 @@ export const testYjkf: Config[] = [
     pageType: 'beltYjkf',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         readFrom: '',
         selector: {
           show: true,
@@ -386,7 +407,7 @@ export const testYjkf: Config[] = [
         },
       },
       background: {
-        show: false,
+        show: true,
         type: 'video',
         link: '',
       },
@@ -394,7 +415,7 @@ export const testYjkf: Config[] = [
         direction: 'row',
         items: [
           {
-            name: 'table',
+            name: 'list',
             basis: '100%',
           },
         ],
@@ -403,30 +424,7 @@ export const testYjkf: Config[] = [
       chart: [],
       gallery: [],
       gallery_list: [],
-      table: [
-        {
-          type: 'C',
-          readFrom: 'aqjkData',
-          columns: [
-            {
-              name: '设备位置',
-              prop: 'deviceName',
-            },
-            {
-              name: '前门状态',
-              prop: 'frontDoorStatus',
-            },
-            {
-              name: '后门状态',
-              prop: 'backDoorStatus',
-            },
-            {
-              name: '网络状态',
-              prop: 'netStatus',
-            },
-          ],
-        },
-      ],
+      table: [],
       list: [],
       complex_list: [],
       preset: [],

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

@@ -1,88 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="company-home">
-    <div class="border">
-      <customHeader>皮带巷智能管控</customHeader>
-      <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="readData"
-          :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 '../../home/configurable/hooks/useInit';
-  import { testYjkf } from './configurable.data.Belt';
-  import ModuleCommon from './components/ModuleCommonBelt.vue';
-  import { read } from 'fs';
-  // import { BDFireMock } from './mock';
-  const { configs, fetchConfigs } = useInitConfigs();
-  const { updateEnhancedConfigs, updateData } = useInitPage('皮带巷智能管控');
-  // const readData = ref({});
-  function refresh() {
-    fetchConfigs('belt').then(() => {
-      configs.value = testYjkf;
-      // Promise.resolve(readData).then(updateData);
-      // updateEnhancedConfigs(configs.value);
-      // getDataSource();
-    });
-  }
-
-  function initInterval() {
-    setInterval(() => {
-      refresh();
-    }, 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;
-  }
-
-  #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%;
-    }
-  }
-</style>

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

@@ -1,108 +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 ModuleLeft from './original/moduleLeft.vue';
-  // import ModuleBottom from './original/moduleBottom.vue';
-  import { computed, ref } from 'vue';
-  import ventBox1 from './ventBoxBelt.vue';
-  import { openWindow } from '/@/utils';
-  import { getFormattedText } from '../hooks/helper';
-  // 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 selectedData = ref();
-
-  const style = computed(() => {
-    const size = props.showStyle.size;
-    const position = props.showStyle.position;
-    console.log(props.showStyle, '123123');
-    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(selectedData.value, to));
-  }
-</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/components/content.vue

@@ -17,8 +17,8 @@
       <source :src="background.link" />
       Not Supportted Link Or Browser
     </video>
-     <video
-     v-if="background.show && background.type === 'video' && !background.isBoard"
+    <video
+      v-if="background.show && background.type === 'video' && !background.isBoard"
       class="content__background_1"
       width="100%"
       autoplay
@@ -166,6 +166,9 @@
         <template v-if="config.name === 'nitrogenBtnList'">
           <NitrogenBtnList class="content__module" :type="config.config.type" :config="config.config" :buttonList="config.config.buttonList" />
         </template>
+        <template v-if="config.name === 'gateBoard'">
+          <GateBoard class="content__module" :devicedata="config.data" :gateData="config.config.gateData" />
+        </template>
         <!-- <template v-if="config.key === 'fire_control'">
         <FIreControl class="content__module" />
       </template>
@@ -489,27 +492,27 @@ const layoutConfig = computed(() => {
   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%;

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

@@ -1,378 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <!-- 主体内容部分 -->
-  <div class="content">
-    <!-- 背景 -->
-    <img v-if="background.show && background.type === 'image'" class="content__background" :src="background.link" />
-    <video
-      v-if="background.show && background.type === 'video' && background.isBoard"
-      class="content__background"
-      width="100%"
-      autoplay
-      loop
-      muted
-      disablepictureinpicture
-      playsinline
-    >
-      <source :src="background.link" />
-      Not Supportted Link Or Browser
-    </video>
-    <video
-      v-if="background.show && background.type === 'video' && !background.isBoard"
-      class="content__background_1"
-      width="100%"
-      autoplay
-      loop
-      muted
-      disablepictureinpicture
-      playsinline
-    >
-      <source :src="background.link" />
-      Not Supportted Link Or Browser
-    </video>
-    <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
-      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'auto' : 'none' }">
-        <!-- 通常列表部分 -->
-        <template v-if="config.name === 'list'">
-          <CustomListBelt class="content__module" :type="config.type" :list-config="config.items" />
-        </template>
-        <!-- 复杂列表部分 -->
-        <template v-if="config.name === 'complex_list'">
-          <ComplexListBelt class="content__module" :type="config.type" :list-config="config.items" />
-        </template>
-        <template v-if="config.name === 'complex_list1'">
-          <ComplexList1Belt class="content__module" :type="config.type" :list-config="config.items" />
-        </template>
-        <!-- 表格部分，这部分通常是占一整个模块的 -->
-        <template v-if="config.name === 'table'">
-          <CustomTableBelt
-            class="content__module text-center overflow-auto"
-            :type="config.type"
-            :columns="config.columns"
-            :auto-scroll="config.autoScroll"
-            :data="config.data"
-          />
-        </template>
-      </div>
-    </div>
-  </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 { clone } from 'lodash-es';
-import { getData, getFormattedText } from '../hooks/helper';
-
-const props = defineProps<{
-  data: any;
-  moduleData: Config['moduleData'];
-  chartData: any;
-}>();
-
-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];
-      return {
-        ...item,
-        label: getFormattedText(data, item.label, item.trans),
-        value: getFormattedText(data, item.value, item.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 mockData = clone(props.chartData) || [];
-  return layout.items.reduce((arr: any[], item) => {
-    switch (item.name) {
-      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);
-
-        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 'table': {
-        const cfg = table.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          ...cfg,
-          ...item,
-          columns: cfg.columns,
-          data,
-        });
-        console.log(arr, '11111111111');
-        break;
-      }
-      default: {
-        const cfg = preset.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
-
-        arr.push({
-          ...item,
-          data,
-          config: cfg,
-        });
-        break;
-      }
-    }
-    // console.log(arr,'arr---')
-    return arr;
-  }, []);
-});
-</script>
-<style lang="less" scoped>
-@import '@/design/theme.less';
-
-.content {
-  height: calc(100% - 30px);
-  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;
-}
-
-.image__background {
-  width: 35%;
-  height: 61%;
-  left: 30%;
-}
-
-.content__module {
-  // margin-top: 5px;
-  // margin-bottom: 5px;
-  width: 100%;
-  height: 100%;
-}
-
-.content__module1 {
-  background: url('@/assets/images/vent/homeNew/databg/4.png');
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-  height: 129px;
-  margin-top: 20%;
-}
-
-.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: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;
-}
-
-: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-selection-item) {
-  color: #fff !important;
-}
-
-:deep(.zxm-select-selection-placeholder) {
-  color: #fff !important;
-}
-
-:deep(.dialog-overlay) {
-  width: 100%;
-  height: 100%;
-  position: unset;
-  box-shadow: unset;
-}
-
-::-webkit-scrollbar {
-  width: 5px !important;
-}
-
-::-webkit-scrollbar-thumb {
-  width: 5px !important;
-}
-</style>

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

@@ -1,95 +0,0 @@
-<template>
-  <div class="vent-custom-header">
-    <div class="vent-home-header">
-      <div class="header-text"><slot></slot></div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { Decoration5 } from '@kjgl77/datav-vue3';
-export default defineComponent({
-  name: 'CustomHeader',
-  components: { Decoration5 },
-  props: {},
-  emits: ['change'],
-});
-</script>
-<style lang="less">
-@import '/@/design/vent/modal.less';
-
-.@{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 {
-      background-color: #ffffff33 !important;
-    }
-  }
-  .@{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;
-
-.vent-custom-header {
-  --image-vent-header1: url('/@/assets/images/beltFire/top.png');
-  width: 100%;
-  position: relative;
-  z-index: 9999;
-  pointer-events: none;
-  .vent-home-header {
-    width: 100%;
-    position: fixed;
-    top: 0;
-    // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
-    // height: 100px;
-    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;
-      font-size: 20px;
-    }
-  }
-  .@{ventSpace}-select-arrow {
-    color: #fff !important;
-  }
-}
-</style>

src/views/vent/home/configurable/components/headerBelt.vue

@@ -1,95 +0,0 @@
-<template>
-  <div class="vent-custom-header">
-    <div class="vent-home-header">
-      <div class="header-text"><slot></slot></div>
-    </div>
-  </div>
-</template>
-<script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { Decoration5 } from '@kjgl77/datav-vue3';
-export default defineComponent({
-  name: 'CustomHeader',
-  components: { Decoration5 },
-  props: {},
-  emits: ['change'],
-});
-</script>
-<style lang="less">
-@import '/@/design/vent/modal.less';
-
-.@{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 {
-      background-color: #ffffff33 !important;
-    }
-  }
-  .@{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;
-
-.vent-custom-header {
-  --image-vent-header1: url('/@/assets/images/beltFire/top.png');
-  width: 100%;
-  position: relative;
-  z-index: 9999;
-  pointer-events: none;
-  .vent-home-header {
-    width: 100%;
-    position: fixed;
-    top: 0;
-    // background: url('/@/assets/images/vent/new-home/header-bg.png') no-repeat;
-    // height: 100px;
-    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;
-      font-size: 20px;
-    }
-  }
-  .@{ventSpace}-select-arrow {
-    color: #fff !important;
-  }
-}
-</style>

src/views/vent/home/configurable/components/ventBoxBelt.vue

@@ -1,104 +0,0 @@
-<template>
-  <div class="vent-box1-bg">
-    <div class="box1-top" v-if="pageType !== 'beltYjkf1'">
-      <div class="title">
-        <slot name="title"></slot>
-      </div>
-    </div>
-    <div class="box1-center" :class="`box1-center-${pageType}`">
-      <div class="box-container">
-        <slot name="container"></slot>
-      </div>
-    </div>
-    <div class="box1-bottom" :class="`box1-bottom-${pageType}`"></div>
-  </div>
-</template>
-<script>
-import { defineComponent } from 'vue';
-export default defineComponent({
-  name: 'VentBox1',
-  props: {
-    pageType: {
-      type: String,
-    },
-  },
-  setup() {},
-});
-</script>
-
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-.vent-box1-bg {
-  --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
-  --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
-  --image-box1-bottom1: url('/@/assets/images/beltFire/1-3.png');
-  --container-color: #00213236;
-  --container-image: linear-gradient(#3df6ff00, #3df6ff, #3df6ff00);
-  width: 100%;
-  min-height: 80px;
-  .box1-top {
-    width: 65%;
-    height: 35px;
-    margin-left: 20px;
-    background: var(--image-box1-top) no-repeat;
-    background-size: 100% 100%;
-    z-index: 2;
-    position: relative;
-    .title {
-      width: 100%;
-      height: 35px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      color: #fff;
-    }
-  }
-  .box1-center {
-    width: 93%;
-    margin-left: 15px;
-    position: relative;
-    .box-container {
-      position: relative;
-      min-height: 50px;
-      padding: 10px;
-      color: #fff;
-      height: calc(100% - 73px);
-      background-color: var(--container-color);
-      backdrop-filter: blur(5px);
-    }
-  }
-  .box1-top-beltYjkf1 {
-    margin-top: 12px;
-  }
-  .box1-center-beltYjkf {
-    height: calc(100% - 50px);
-    margin-top: 10px;
-  }
-  .box1-center-beltYjkf1 {
-    height: calc(100% - 73px);
-
-    margin-top: 50px;
-  }
-  .box1-bottom {
-    width: 100%;
-    height: 97%;
-    position: absolute;
-    bottom: 0px;
-    pointer-events: none;
-    z-index: -1 !important;
-  }
-  // 默认样式
-  .box1-bottom {
-    background: var(--image-box1-bottom) no-repeat;
-    background-size: 100% 100%;
-  }
-  .box1-bottom-beltYjkf1 {
-    background: var(--image-box1-bottom1) no-repeat;
-    background-size: 100% 100%;
-  }
-  .box1-bottom-beltYjkf {
-    background: var(--image-box1-bottom1) no-repeat;
-    background-size: 100% 100%;
-  }
-}
-</style>

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

@@ -2755,9 +2755,21 @@ export const testConfigVentRealtime: Config[] = [
       gallery_list: [],
       preset: [
         {
-          readFrom: '',
-          fan1Prop: ['readData.Fan1_FanFlow', 'readData.Fan1FanPre'],
-          fan2Prop: ['readData.Fan2_FanFlow', 'readData.Fan2FanPre'],
+          readFrom: 'gateData',
+          columns: [
+            {
+              name: '前门状态',
+              prop: 'strinstallpos',
+            },
+            {
+              name: '后门状态',
+              prop: 'airStatus_str',
+            },
+            {
+              name: '网络状态',
+              prop: 'appScenes_str',
+            },
+          ],
         },
       ],
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=fanmain',