合并冲突

package.json

@@ -1,6 +1,7 @@
 {
   "name": "jeecgboot-vue3",
-  "version": "6.0.0.1",
+  "version": "6.0.0",
+  "projectVersion": "6.0.0.1",
   "author": {
     "name": "jeecg",
     "email": "jeecgos@163.com",

src/design/themify/default.less

@@ -39,7 +39,7 @@ html {
 
   --vent-configurable-bg: #09316a;
   --vent-configurable-module-bg: #3df6ff11;
-  --vent-configurable-original-module-bg: #00336655;
+  --vent-configurable-original-module-bg: #00466633;
   --vent-configurable-module-border-bd: linear-gradient(#1dabeb 0%, #1dabeb 60%, #000723);
   --vent-configurable-dropdown: linear-gradient(to bottom, #036886, #072a40);
   --vent-configurable-home-bg-img: linear-gradient(to top, #39a3ff00, #0091ff99);

src/utils/http/axios/index.ts

@@ -49,6 +49,7 @@ const transform: AxiosTransform = {
       // throw new Error(t('sys.api.apiRequestFailed'));
     }
     //  这里 code，result，message为 后台统一的字段，需要在 types.ts内修改为项目自己的接口返回格式
+    debugger;
     if (data.result) {
       //lxh
       const { code, result, message, success } = data;
@@ -69,6 +70,9 @@ const transform: AxiosTransform = {
         throw new Error(message);
       }
     } else {
+      if (data['code'] !== 0 && data.code != 200) {
+        createMessage.error(data.message);
+      }
       return data;
     }
 

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

@@ -152,7 +152,31 @@ export interface CommonItem {
 
 export interface ModuleDataBoard extends ReadFrom {
   /** 展示牌预设的背景类型 */
-  type: 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'New' | 'New1' | 'New2' | 'New3' | 'J' | 'K' | 'L' | 'M' | 'N' | 'O';
+  type:
+    | 'A'
+    | 'B'
+    | 'C'
+    | 'D'
+    | 'E'
+    | 'F'
+    | 'G'
+    | 'H'
+    | 'I'
+    | 'New'
+    | 'New1'
+    | 'New2'
+    | 'New3'
+    | 'J'
+    | 'K'
+    | 'L'
+    | 'M'
+    | 'N'
+    | 'O'
+    | 'P'
+    | 'Q'
+    | 'R'
+    | 'S'
+    | 'T';
   /** 展示牌布局，决定是 label 部分在上方或是 value 在上方 */
   layout: 'val-top' | 'label-top' | 'new-top' | 'new1-top' | 'new2-top' | 'new3-top';
   /** 核心配置，每个展示牌对应一项 */
@@ -161,7 +185,30 @@ export interface ModuleDataBoard extends ReadFrom {
 
 export interface ModuleDataList extends ReadFrom {
   /** 列表预设的背景类型 */
-  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E' | 'F' | 'G' | 'H' | 'I' | 'J' | 'K' | 'timelineNew' | 'fireList' | 'L' | 'M' | 'N';
+  type:
+    | 'timeline'
+    | 'A'
+    | 'B'
+    | 'C'
+    | 'D'
+    | 'E'
+    | 'F'
+    | 'G'
+    | 'H'
+    | 'I'
+    | 'J'
+    | 'K'
+    | 'timelineNew'
+    | 'fireList'
+    | 'L'
+    | 'M'
+    | 'N'
+    | 'O'
+    | 'P'
+    | 'Q'
+    | 'R'
+    | 'S'
+    | 'T';
   /** 是否需要根据数据来决定所展示的项目数量，需要确保 items 至少有一项，且 readFrom 指向数组 */
   mapFromData?: boolean;
   /** 核心配置，每个列表项对应一项 */

src/views/vent/home/configurable/common-green.vue

@@ -5,237 +5,248 @@
       <div class="main-container">
         <div class="left-area">
           <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-          <template v-if="isOriginal">
-            <ModuleOriginal v-for="cfg in configsLeft" :key="cfg.deviceType" :show-style="cfg.showStyle"
-              :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
-              :visible="true" />
-          </template>
+          <ModuleOriginal
+            v-for="cfg in configsLeft"
+            :key="cfg.deviceType"
+            :show-style="cfg.showStyle"
+            :module-data="cfg.moduleData"
+            :module-name="cfg.moduleName"
+            :device-type="cfg.deviceType"
+            :data="data"
+            :visible="true"
+          />
         </div>
         <div class="bottom-area">
           <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-          <template v-if="isOriginal">
-            <ModuleOriginal v-for="cfg in configsBottom" :key="cfg.deviceType" :show-style="cfg.showStyle"
-              :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
-              :visible="true" />
-          </template>
+          <ModuleOriginal
+            v-for="cfg in configsBottom"
+            :key="cfg.deviceType"
+            :show-style="cfg.showStyle"
+            :module-data="cfg.moduleData"
+            :module-name="cfg.moduleName"
+            :device-type="cfg.deviceType"
+            :data="data"
+            :visible="true"
+          />
         </div>
         <div class="right-area">
-          <greenRightTag></greenRightTag>
+          <greenRightTag />
         </div>
       </div>
     </template>
+
+    <div style="width: 1300px; height: 530px; position: absolute; left: 436px; top: 0">
+      <VentModal />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleOriginal from './components/ModuleOriginal-green.vue';
-import greenRightTag from './components/green-right-tag.vue';
-import { list } from './configurable.api';
-import { useRoute, useRouter } from 'vue-router';
-import { useGlobSetting } from '/@/hooks/setting';
-import { testConfigVent, testConfigVentRealtime } from './configurable.data';
-
-const { title = '智能通风管控系统' } = useGlobSetting();
-//   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-const { isOriginal, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage(title);
-const route = useRoute();
-
-let interval: number | undefined;
-let configs = ref<any[]>([]);
-
-let configsLeft = computed(() => {
-  return configs.value.filter((v) => v.showStyle.position.includes('top'));
-});
-let configsBottom = computed(() => {
-  return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
-});
-
-
-function refresh() {
-  fetchConfigs('vent').then(() => {
-    configs.value = testConfigVent;
-    updateEnhancedConfigs(configs.value);
-
-    // 测风装置	windrect
-    // 自动风窗	window
-    // 自动风门	gate
-    // 传感器	modelsensor
-    // 局部通风机	fanlocal
-    // 主通风机	fanmain
-    // 密闭	obfurage
-    // 安全监控	safetymonitor
-    // 光纤测温	fiber
-    // 束管监测	bundletube
-    // 制氮	nitrogen
-    // 制浆	pulping
-    // 喷淋	spray
-    // 喷粉	dustdev
-    // 喷雾设备	atomizing
-    // 除尘风机	dedustefan
-    // 粉尘传感器	dustsensor
-    // 转载点	transferpoint
-    // 瓦斯抽采泵	pump
-    // 粉尘	dusting
-    // 瓦斯监测	gasmonitor
-    // 球阀	ballvalve
-    // 压风机	forcFan
-    // 瓦斯巡检	gaspatrol
-    // 防火门	firedoor
-    // 隔爆设施	explosionProof
-    // 瓦斯管道阀门	gasvalve
-    list({
-      types: configs.value
-        .filter((e) => e.deviceType)
-        .map((e) => e.deviceType)
-        .join(','),
-    }).then(updateData);
+  import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import ModuleOriginal from './components/ModuleOriginal-green.vue';
+  import greenRightTag from './components/green-right-tag.vue';
+  import { list } from './configurable.api';
+  import { useRoute, useRouter } from 'vue-router';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { testConfigVent, testConfigVentRealtime } from './configurable.data';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+
+  const { title = '智能通风管控系统' } = useGlobSetting();
+  //   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { isOriginal, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage(title);
+  const route = useRoute();
+
+  let interval: number | undefined;
+  let configs = ref<any[]>([]);
+
+  let configsLeft = computed(() => {
+    return configs.value.filter((v) => v.showStyle.position.includes('top'));
   });
-}
-
-function initInterval() {
-  setInterval(() => {
-    list({
-      types: configs.value
-        .filter((e) => e.deviceType)
-        .map((e) => e.deviceType)
-        .join(','),
-    }).then(updateData);
-  }, 60000);
-}
-
-watch(
-  () => route.query,
-  () => {
-    if (route.query.deviceType) {
-      // 仅需要展示子应用，模拟 unmounted
-      clearInterval(interval);
-    } else {
-      // 模拟 mounted
-      refresh();
-      initInterval();
-    }
+  let configsBottom = computed(() => {
+    return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
+  });
+
+  function refresh() {
+    fetchConfigs('vent').then(() => {
+      configs.value = testConfigVent;
+      updateEnhancedConfigs(configs.value);
+
+      // 测风装置	windrect
+      // 自动风窗	window
+      // 自动风门	gate
+      // 传感器	modelsensor
+      // 局部通风机	fanlocal
+      // 主通风机	fanmain
+      // 密闭	obfurage
+      // 安全监控	safetymonitor
+      // 光纤测温	fiber
+      // 束管监测	bundletube
+      // 制氮	nitrogen
+      // 制浆	pulping
+      // 喷淋	spray
+      // 喷粉	dustdev
+      // 喷雾设备	atomizing
+      // 除尘风机	dedustefan
+      // 粉尘传感器	dustsensor
+      // 转载点	transferpoint
+      // 瓦斯抽采泵	pump
+      // 粉尘	dusting
+      // 瓦斯监测	gasmonitor
+      // 球阀	ballvalve
+      // 压风机	forcFan
+      // 瓦斯巡检	gaspatrol
+      // 防火门	firedoor
+      // 隔爆设施	explosionProof
+      // 瓦斯管道阀门	gasvalve
+      list({
+        types: configs.value
+          .filter((e) => e.deviceType)
+          .map((e) => e.deviceType)
+          .join(','),
+      }).then(updateData);
+    });
   }
-);
 
-onMounted(() => {
-  refresh();
-  initInterval();
-});
+  function initInterval() {
+    setInterval(() => {
+      list({
+        types: configs.value
+          .filter((e) => e.deviceType)
+          .map((e) => e.deviceType)
+          .join(','),
+      }).then(updateData);
+    }, 60000);
+  }
+
+  watch(
+    () => route.query,
+    () => {
+      if (route.query.deviceType) {
+        // 仅需要展示子应用，模拟 unmounted
+        clearInterval(interval);
+      } else {
+        // 模拟 mounted
+        refresh();
+        initInterval();
+      }
+    }
+  );
+
+  onMounted(() => {
+    refresh();
+    initInterval();
+  });
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
+  @import '/@/design/theme.less';
 
-@{theme-deepblue} {
-  .company-home {
-    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
-}
-
-.company-home {
-  --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-  --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
-  --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
-  --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
 
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: #181b24;
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+    }
+  }
 
- 
+  .company-home {
+    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
+    --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
+    --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
+    --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
 
-  .main-container {
- 
     width: 100%;
     height: 100%;
-    margin: 0px 15px;
-    .left-area {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 420px;
+    color: @white;
+    position: relative;
+    background: #181b24;
+
+    .main-container {
+      width: 100%;
       height: 100%;
-      padding: 15px;
-      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-      overflow-y: auto;
+      margin: 0px 15px;
+      .left-area {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 420px;
+        height: 100%;
+        padding: 15px;
+        background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        overflow-y: auto;
+      }
+
+      .bottom-area {
+        position: absolute;
+        left: 435px;
+        bottom: 0;
+        width: calc(100% - 435px);
+        height: 290px;
+        padding: 15px;
+        background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+      }
+
+      .right-area {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        width: 120px;
+        height: calc(100% - 305px);
+      }
     }
 
-    .bottom-area {
+    .module-dropdown {
+      padding: 5px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
       position: absolute;
-      left: 435px;
-      bottom: 0;
-      width: calc(100% - 435px);
-      height: 290px;
-      padding: 15px;
-      background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
+      top: 60px;
+      right: 480px;
     }
 
-    .right-area {
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
       position: absolute;
-      right: 0px;
-      top: 0px;
-      width: 120px;
-      height: calc(100% - 305px);
+      top: 70px;
+      right: 460px;
     }
-  }
-
-  .module-dropdown {
-    padding: 5px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 60px;
-    right: 480px;
-  }
 
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: @vent-configurable-dropdown;
+      border: none;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+    }
 
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: @vent-configurable-dropdown;
-    border: none;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-  }
+    .realtime-mode {
+      background-image: var(--image-monitor-realtime);
+    }
 
-  .realtime-mode {
-    background-image: var(--image-monitor-realtime);
+    .module-monitor-bar {
+      position: absolute;
+      top: 100px;
+      width: 1000px;
+      height: 200px;
+      left: calc(50% - 500px);
+    }
   }
 
-  .module-monitor-bar {
-    position: absolute;
-    top: 100px;
-    width: 1000px;
-    height: 200px;
-    left: calc(50% - 500px);
+  :deep(.loading-box) {
+    position: unset;
   }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

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

@@ -48,7 +48,7 @@
   const style = computed(() => {
     const size = props.showStyle.size;
     const position = props.showStyle.position;
-    return size + position + 'position: absolute; pointer-events: auto;';
+    return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
   });
 
   const capitalizedPosition = computed(() => {

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

@@ -31,178 +31,177 @@
 </template>
 
 <script setup lang="ts">
-// 引入内容组件
-import Content from './content.vue';
-import { defineProps, defineEmits, computed, watch } from 'vue';
-import { useInitModule } from '../hooks/useInit';
-import { getFormattedText } from '../hooks/helper';
-import { openWindow } from '/@/utils';
-
-// 定义组件接收的属性
-const props = defineProps<{
-  moduleData: any;
-  showStyle: any;
-  deviceType: string;
-  data: any;
-  moduleName: string;
-  visible: boolean;
-}>();
-const emit = defineEmits(['close', 'select']);
-
-// 取出头部配置
-const { header } = props.moduleData;
-
-// 初始化模块相关的下拉、选中项等
-const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
-
-// 计算样式（宽高+定位）
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position;
-});
-
-// 计算不同布局下的class
-const moduleClass = computed(() => {
-  const position = props.showStyle.position;
-  const size = props.showStyle.size;
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'module-wide';
-  }
-  if (position.includes('left')) {
-    return 'module-medium';
-  }
-  if (position.includes('right')) {
+  // 引入内容组件
+  import Content from './content.vue';
+  import { defineProps, defineEmits, computed, watch } from 'vue';
+  import { useInitModule } from '../hooks/useInit';
+  import { getFormattedText } from '../hooks/helper';
+  import { openWindow } from '/@/utils';
+
+  // 定义组件接收的属性
+  const props = defineProps<{
+    moduleData: any;
+    showStyle: any;
+    deviceType: string;
+    data: any;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  const emit = defineEmits(['close', 'select']);
+
+  // 取出头部配置
+  const { header } = props.moduleData;
+
+  // 初始化模块相关的下拉、选中项等
+  const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
+
+  // 计算样式（宽高+定位）
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position;
+  });
+
+  // 计算不同布局下的class
+  const moduleClass = computed(() => {
+    const position = props.showStyle.position;
+    const size = props.showStyle.size;
+    const [_, width] = size.match(/width:([0-9]+)px/) || [];
+    if (position.includes('bottom') || parseInt(width) > 800) {
+      return 'module-wide';
+    }
+    if (position.includes('left')) {
+      return 'module-medium';
+    }
+    if (position.includes('right')) {
+      return 'module-medium';
+    }
     return 'module-medium';
+  });
+
+  // 计算内容区高度样式
+  const contentStyle = computed(() => {
+    if (header.show && header.selector.show) {
+      return 'height: calc(100% - 48px - 40px);'; // 有下拉框的情况
+    }
+    return 'height: calc(100% - 40px);'; // 没有下拉框的情况
+  });
+
+  // 下拉选择事件
+  function selectHandler(id) {
+    selectedDeviceID.value = id;
+    emit('select', selectedDevice);
   }
-  return 'module-medium';
-});
 
-// 计算内容区高度样式
-const contentStyle = computed(() => {
-  if (header.show && header.selector.show) {
-    return 'height: calc(100% - 48px - 40px);'; // 有下拉框的情况
+  // 跳转事件
+  function redirectTo() {
+    const { to } = props.moduleData;
+    if (!to) return;
+    openWindow(to);
   }
-  return 'height: calc(100% - 40px);'; // 没有下拉框的情况
-});
-
-// 下拉选择事件
-function selectHandler(id) {
-  selectedDeviceID.value = id;
-  emit('select', selectedDevice);
-}
-
-// 跳转事件
-function redirectTo() {
-  const { to } = props.moduleData;
-  if (!to) return;
-  openWindow(to);
-}
-
-// 监听数据变化，初始化
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
+
+  // 监听数据变化，初始化
+  watch(
+    () => props.data,
+    (d) => {
+      init(d);
       if (!selectedDeviceID.value) {
         selectedDeviceID.value = options.value[0]?.value;
       }
-  },
-  {
-    immediate: true,
-  }
-);
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 
 <style scoped lang="less">
-    @font-face {
-      font-family: 'douyuFont';
-      src: url('../../../../assets/font/douyuFont.otf');
-    }
-    .module-mine {
-      --image-common-border1: url('@/assets/images/home-container/configurable/minehome/common-border1.png');
-      --image-common-border2: url('@/assets/images/home-container/configurable/minehome/common-border2.png');
-      --image-common-border3: url('@/assets/images/home-container/configurable/minehome/common-border3.png');
-      --image-select-border: url('@/assets/images/home-container/configurable/minehome/select-border.png');
-      position: absolute;
-      //   width: 100%;
-      //   height: 100%;
-      background: var(--image-common-border2) no-repeat center;
-      background-size: 100% 100%;
-      overflow: hidden;
-
-      /* 标题栏样式 */
-      .module-title {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 40px;
-        color: #fff;
-        font-size: 14px;
-        font-weight: bold;
-
-        .title-content {
-          font-family: 'douyuFont';
-          margin-right: 10px;
-          &.cursor-pointer {
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
+  .module-mine {
+    --image-common-border1: url('@/assets/images/home-container/configurable/minehome/common-border1.png');
+    --image-common-border2: url('@/assets/images/home-container/configurable/minehome/common-border2.png');
+    --image-common-border3: url('@/assets/images/home-container/configurable/minehome/common-border3.png');
+    --image-select-border: url('@/assets/images/home-container/configurable/minehome/select-border.png');
+    position: absolute;
+    //   width: 100%;
+    //   height: 100%;
+    background: var(--image-common-border2) no-repeat center;
+    background-size: 100% 100%;
+    overflow: hidden;
+
+    /* 标题栏样式 */
+    .module-title {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 40px;
+      color: #fff;
+      font-size: 14px;
+      font-weight: bold;
+
+      .title-content {
+        font-family: 'douyuFont';
+        margin-right: 10px;
+        &.cursor-pointer {
           cursor: pointer;
           text-decoration: underline;
-          }
         }
       }
+    }
 
-      /* 下拉选择框单独一行样式 */
-      .module-selector-row {
-        display: flex;
-        justify-content: flex-start;
-        align-items: center;
-        padding: 10px 35px 0 35px;
-        width: 100%;
-        min-height: 40px;
-        .custom-select {
-          flex: 1;
-          width: 100% !important;
-          min-width: 0;
-          font-size: 18px;
+    /* 下拉选择框单独一行样式 */
+    .module-selector-row {
+      display: flex;
+      justify-content: flex-start;
+      align-items: center;
+      padding: 10px 35px 0 35px;
+      width: 100%;
+      min-height: 40px;
+      .custom-select {
+        flex: 1;
+        width: 100% !important;
+        min-width: 0;
+        font-size: 18px;
+        color: white !important;
+        ::v-deep .zxm-select-selector {
+          background: var(--image-select-border) no-repeat center/100% 100%;
+          border: none !important;
+          padding: 0 20px;
+        }
+        /* 隐藏默认的下拉箭头 */
+        ::v-deep .zxm-select-arrow {
+          display: none;
+        }
+
+        /* 添加自定义白色下拉三角形 */
+        &::after {
+          content: '';
+          position: absolute;
+          right: 16px;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 0;
+          height: 0;
+          border-left: 6px solid transparent;
+          border-right: 6px solid transparent;
+          border-top: 8px solid white;
+          pointer-events: none;
+        }
+        /* 修复占位符颜色 */
+        ::v-deep .zxm-select-selection-placeholder {
           color: white !important;
-          ::v-deep .zxm-select-selector {
-            background: var(--image-select-border) no-repeat center/100% 100%;
-            border: none !important;
-            padding: 0 20px;
-
-          }
-          /* 隐藏默认的下拉箭头 */
-          ::v-deep .zxm-select-arrow {
-            display: none;
-          }
-          
-          /* 添加自定义白色下拉三角形 */
-          &::after {
-            content: '';
-            position: absolute;
-            right: 16px;
-            top: 50%;
-            transform: translateY(-50%);
-            width: 0;
-            height: 0;
-            border-left: 6px solid transparent;
-            border-right: 6px solid transparent;
-            border-top: 8px solid white;
-            pointer-events: none;
-          }
-          /* 修复占位符颜色 */
-          ::v-deep .zxm-select-selection-placeholder {
-            color: white !important;
-            font-size: 18px;
-          }
+          font-size: 18px;
         }
       }
+    }
 
-      /* 内容区样式 */
-      .module-content {
-        padding: 10px 23px;
-        background: transparent;
-      }
+    /* 内容区样式 */
+    .module-content {
+      padding: 10px 23px;
+      background: transparent;
     }
-</style>
+  }
+</style>

src/views/vent/home/configurable/components/content-New.vue

@@ -141,358 +141,359 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed } from 'vue';
-import {
-  CommonItem,
-  Config,
-  // ModuleDataBoard,
-  // ModuleDataChart,
-  // ModuleDataList,
-  // ModuleDataPreset,
-  // ModuleDataTable,
-} from '../../../deviceManager/configurationTable/types';
-import MiniBoard from './detail/MiniBoard.vue';
-import TimelineList from './detail/TimelineList.vue';
-import TimelineListNew from './detail/TimelineListNew.vue';
-import CustomList from './detail/CustomList.vue';
-import CustomGallery from './detail/CustomGallery.vue';
-import ComplexList from './detail/ComplexList.vue';
-import ComplexListNew from './detail/ComplexList-New.vue';
-import GalleryList from './detail/GalleryList.vue';
-import CustomTable from './detail/CustomTable-New.vue';
-import CustomChart from './detail/CustomChart.vue';
-import { clone } from 'lodash-es';
-import { getData, getFormattedText } from '../hooks/helper';
-import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
-import QHCurve from './preset/QHCurve.vue';
-import MeasureDetail from './preset/MeasureDetail.vue';
-import CustomTabs from './preset/CustomTabs.vue';
-import AIChat from '/@/components/AIChat/MiniChat.vue';
-import DeviceAlarm from './preset/DeviceAlarm.vue';
-import MiniBoardNew from './detail/MiniBoard-New.vue';
-import CustomTableNew from './detail/CustomTable-New.vue';
-// import FIreWarn from './preset/FIreWarn.vue';
-// import FIreControl from './preset/FIreControl.vue';
+  import { computed } from 'vue';
+  import {
+    CommonItem,
+    Config,
+    // ModuleDataBoard,
+    // ModuleDataChart,
+    // ModuleDataList,
+    // ModuleDataPreset,
+    // ModuleDataTable,
+  } from '../../../deviceManager/configurationTable/types';
+  import MiniBoard from './detail/MiniBoard.vue';
+  import TimelineList from './detail/TimelineList.vue';
+  import TimelineListNew from './detail/TimelineListNew.vue';
+  import CustomList from './detail/CustomList.vue';
+  import CustomGallery from './detail/CustomGallery.vue';
+  import ComplexList from './detail/ComplexList.vue';
+  import ComplexListNew from './detail/ComplexList-New.vue';
+  import GalleryList from './detail/GalleryList.vue';
+  import CustomTable from './detail/CustomTable-New.vue';
+  import CustomChart from './detail/CustomChart.vue';
+  import { clone } from 'lodash-es';
+  import { getData, getFormattedText } from '../hooks/helper';
+  import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
+  import QHCurve from './preset/QHCurve.vue';
+  import MeasureDetail from './preset/MeasureDetail.vue';
+  import CustomTabs from './preset/CustomTabs.vue';
+  import AIChat from '/@/components/AIChat/MiniChat.vue';
+  import DeviceAlarm from './preset/DeviceAlarm.vue';
+  import MiniBoardNew from './detail/MiniBoard-New.vue';
+  import CustomTableNew from './detail/CustomTable-New.vue';
+  // import FIreWarn from './preset/FIreWarn.vue';
+  // import FIreControl from './preset/FIreControl.vue';
 
-const props = defineProps<{
-  data: any;
-  moduleData: Config['moduleData'];
-}>();
+  const props = defineProps<{
+    data: any;
+    moduleData: Config['moduleData'];
+  }>();
 
-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 board = clone(props.moduleData.board) || [];
-  const list = clone(props.moduleData.list) || [];
-  const gallery = clone(props.moduleData.gallery) || [];
-  const complex_list = clone(props.moduleData.complex_list) || [];
-  const gallery_list = clone(props.moduleData.gallery_list) || [];
-  const tabs = clone(props.moduleData.tabs) || [];
-  const chart = clone(props.moduleData.chart) || [];
-  const table = clone(props.moduleData.table) || [];
-  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 'list': {
-        const cfg = list.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: getListItems(data, cfg.items, cfg.mapFromData),
-        });
-        break;
-      }
-      case 'gallery': {
-        const cfg = gallery.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 board = clone(props.moduleData.board) || [];
+    const list = clone(props.moduleData.list) || [];
+    const gallery = clone(props.moduleData.gallery) || [];
+    const complex_list = clone(props.moduleData.complex_list) || [];
+    const gallery_list = clone(props.moduleData.gallery_list) || [];
+    const tabs = clone(props.moduleData.tabs) || [];
+    const chart = clone(props.moduleData.chart) || [];
+    const table = clone(props.moduleData.table) || [];
+    const preset = clone(props.moduleData.preset) || [];
 
-        arr.push({
-          overflow: true,
-          ...item,
-          ...cfg,
-          items: getItems(data, cfg.items),
-        });
-        break;
-      }
-      case 'complex_list': {
-        const cfg = complex_list.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+    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);
 
-        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: 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),
-                  };
-                }),
-              };
-            }),
+            items: getListItems(data, cfg.items, cfg.mapFromData),
           });
+          break;
         }
-        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 'tabs': {
-        const cfg = tabs.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+        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 '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: 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),
-                  };
-                }),
-              };
-            }),
+            items: getItems(data, cfg.items),
+            galleryItems: getItems(data, cfg.galleryItems),
           });
+          break;
         }
-        break;
-      }
-      case 'chart': {
-        const cfg = chart.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+        case 'tabs': {
+          const cfg = tabs.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...item,
-          config: cfg,
-          data,
-        });
-        break;
-      }
-      case 'table': {
-        const cfg = table.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 'chart': {
+          const cfg = chart.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...cfg,
-          ...item,
-          columns: cfg.columns,
-          data,
-        });
-        break;
-      }
-      default: {
-        const cfg = preset.shift();
-        if (!cfg) break;
-        const data = getData(refData, cfg.readFrom, cfg.parser);
+          arr.push({
+            ...item,
+            config: cfg,
+            data,
+          });
+          break;
+        }
+        case 'table': {
+          const cfg = table.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
 
-        arr.push({
-          ...item,
-          data,
-          config: cfg,
-        });
-        break;
+          arr.push({
+            ...cfg,
+            ...item,
+            columns: cfg.columns,
+            data,
+          });
+          break;
+        }
+        default: {
+          const cfg = preset.shift();
+          if (!cfg) break;
+          const data = getData(refData, cfg.readFrom, cfg.parser);
+
+          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 {
-  height: calc(100% - 30px);
-  position: relative;
-  // z-index: -2;
-  display: flex;
-  flex-direction: column;
-}
-.content__background {
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  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;
-}
+  .content {
+    height: calc(100% - 30px);
+    position: relative;
+    // z-index: -2;
+    display: flex;
+    flex-direction: column;
+  }
+  .content__background {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    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%;
+    padding: 0 34px;
+  }
+  // .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;
-}
+  :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;
-}
+  ::-webkit-scrollbar {
+    width: 5px !important;
+  }
+  ::-webkit-scrollbar-thumb {
+    width: 5px !important;
+  }
 </style>

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

@@ -233,7 +233,6 @@
     const partition = clone(props.moduleData.partition) || [];
 
     return layout.items.reduce((arr: any[], item) => {
-      // console.log(item.name,'name---')
       switch (item.name) {
         case 'board': {
           const cfg = board.shift();
@@ -442,7 +441,7 @@
     // z-index: -2;
     display: flex;
     flex-direction: column;
-    overflow-y: auto;
+    overflow-y: auto; // 这里会导致样式无故添加滚动条
   }
 
   .content__background {

src/views/vent/home/configurable/components/detail/ComplexList-New.vue

@@ -20,27 +20,27 @@
   </div>
 </template>
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    listConfig: {
-      title: string;
-      contents: {
-        value: string;
-        color: string;
-        label: string;
-        info: string;
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        title: string;
+        contents: {
+          value: string;
+          color: string;
+          label: string;
+          info: string;
+        }[];
       }[];
-    }[];
-    /** A B */
-    type: string;
-  }>(),
-  {
-    listConfig: () => [],
-    type: 'A',
-  }
-);
+      /** A B */
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      type: 'A',
+    }
+  );
 
-//   defineEmits(['click']);
+  //   defineEmits(['click']);
 </script>
 <style lang="less" scoped>
     @import '@/design/theme.less';
@@ -319,6 +319,8 @@ withDefaults(
     display: flex;
     flex-wrap: wrap;
     padding: 0 10px;
+    row-gap: 0;
+    align-content: center;
   }
 
   .list-item_E {

src/views/vent/home/configurable/components/detail/CustomList.vue

@@ -346,6 +346,9 @@
   .list-item_R:last-of-type .list-item__icon_R {
     background-image: var(--image-list_bg_r_icon2);
   }
+  .list_R {
+    background: none;
+  }
   .list-item__content_R {
     height: 52px;
     background-repeat: no-repeat;

src/views/vent/home/configurable/components/detail/MiniBoard.vue

@@ -68,562 +68,562 @@
   </div>
 </template>
 <script lang="ts" setup>
-withDefaults(
-  defineProps<{
-    label: string;
-    value?: string;
-    // 告示牌布局，类型为：'val-top' | 'label-top'
-    layout: string;
-    // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
-    type?: string;
-  }>(),
-  {
-    value: '/',
-    type: 'A',
-    layout: 'val-top',
-  }
-);
+  withDefaults(
+    defineProps<{
+      label: string;
+      value?: string;
+      // 告示牌布局，类型为：'val-top' | 'label-top'
+      layout: string;
+      // 告示牌类型，类型为：'A' | 'B' | 'C' | 'D' | 'E' | 'F' |'New' | 'localFannew'
+      type?: string;
+    }>(),
+    {
+      value: '/',
+      type: 'A',
+      layout: 'val-top',
+    }
+  );
 
-// 获取某些 value 对应的特殊的 装饰用的类名
-function getValueDecoClass(value) {
-  switch (value) {
-    case '低风险':
-      return 'low_risk';
-    case '一般风险':
-      return 'risk';
-    case '较大风险':
-      return 'high_risk';
-    case '报警':
-      return 'warning';
-    default:
-      return '';
-  }
-}
+  // 获取某些 value 对应的特殊的 装饰用的类名
+  function getValueDecoClass(value) {
+    switch (value) {
+      case '低风险':
+        return 'low_risk';
+      case '一般风险':
+        return 'risk';
+      case '较大风险':
+        return 'high_risk';
+      case '报警':
+        return 'warning';
+      default:
+        return '';
+    }
+  }
 
-defineEmits(['click']);
+  defineEmits(['click']);
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .mini-board {
+      --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
+      --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
+      --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
+      --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
+      --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
+      --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
+      --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
+      --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
+      --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
+      --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
+      --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
+      --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
+      --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
+      --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
+      --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
+      --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
+      --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
+      --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
+      --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
+    }
+  }
 
-@{theme-deepblue} {
   .mini-board {
     --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
     --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
     --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
     --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
     --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-    --image-area3: url('/@/assets/images/themify/deepblue/company/area3.png');
-      --image-areaR: url('/@/assets/images/themify/deepblue/company/areaR.png');
-        --image-areaT: url('/@/assets/images/themify/deepblue/company/areaT.png');
-    --image-value-bg: url('/@/assets/images/themify/deepblue/vent/value-bg.png');
-      --image-value-S: url('/@/assets/images/themify/deepblue/vent/value-S.png');
-    --image-vent-param-bg: url('/@/assets/images/themify/deepblue/vent/vent-param-bg.png');
-    --image-mini-board-1: url('/@/assets/images/themify/deepblue/vent/home/mini-board-1.png');
-    --image-board_bg_1: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_1.png');
-    --image-miehuo: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/miehuo.png');
-    --image-value-bg-2: url('/@/assets/images/themify/deepblue/vent/value-bg-2.png');
-    --image-board_bg_3: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_3.png');
-    --image-board_bg_2: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_2.png');
-    --image-board_bg_5: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_5.png');
-    --image-board_bg_4: url('/@/assets/images/themify/deepblue/home-container/configurable/board_bg_4.png');
-  }
-}
-
-.mini-board {
-  --image-areaNew: url('/@/assets/images/vent/homeNew/databg/1.png');
-  --image-areaNew1: url('/@/assets/images/vent/homeNew/databg/2.png');
-  --image-areaNew2: url('/@/assets/images/vent/homeNew/databg/3.png');
-  --image-areaNew3: url('/@/assets/images/vent/homeNew/databg/8.png');
-  --image-areaNew4: url('/@/assets/images/vent/homeNew/databg/7.png');
-  --image-area3: url('/@/assets/images/company/area3.png');
-   --image-areaT: url('/@/assets/images/company/areaT.png');
+    --image-area3: url('/@/assets/images/company/area3.png');
+    --image-areaT: url('/@/assets/images/company/areaT.png');
     --image-areaR: url('/@/assets/images/company/areaR.png');
-  --image-value-bg: url('/@/assets/images/vent/value-bg.png');
+    --image-value-bg: url('/@/assets/images/vent/value-bg.png');
     --image-value-S: url('/@/assets/images/vent/value-S.png');
-  --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
-  --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
-  --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
-  --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
-  --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
-  --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
-  --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
-  --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
-  --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
-  --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
-  --image-board-bg-J: url('/@/assets/images/home-container/configurable/minehome/board-bg-j.png');
-  --image-board-bg-k1: url('/@/assets/images/home-container/configurable/minehome/board-bg-k1.png');
-  --image-board-bg-k2: url('/@/assets/images/home-container/configurable/minehome/board-bg-k2.png');
-  --image-board-bg-l1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l1.png');
-  --image-board-bg-l2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l2.png');
-  --image-board-bg-m1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m1.png');
-  --image-board-bg-m2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m2.png');
-  --image-board-bg-nl1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n1.png');
-  --image-board-bg-nr1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n2.png');
-  --image-board-bg-nl2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n3.png');
-  --image-board-bg-nr2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n4.png');
-  --image-board-bg-o: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-o.png');
+    --image-vent-param-bg: url('/@/assets/images/vent/vent-param-bg.png');
+    --image-mini-board-1: url('/@/assets/images/vent/home/mini-board-1.png');
+    --image-board_bg_1: url('/@/assets/images/home-container/configurable/board_bg_1.png');
+    --image-miehuo: url('/@/assets/images/home-container/configurable/firehome/miehuo.png');
+    --image-value-bg-2: url('/@/assets/images/vent/value-bg-2.png');
+    --image-board_bg_3: url('/@/assets/images/home-container/configurable/board_bg_3.png');
+    --image-board_bg_2: url('/@/assets/images/home-container/configurable/board_bg_2.png');
+    --image-board_bg_5: url('/@/assets/images/home-container/configurable/board_bg_5.png');
+    --image-board_bg_4: url('/@/assets/images/home-container/configurable/board_bg_4.png');
+    --image-board_bg_6: url('/@/assets/images/home-container/configurable/board_bg_6.png');
+    --image-board-bg-J: url('/@/assets/images/home-container/configurable/minehome/board-bg-j.png');
+    --image-board-bg-k1: url('/@/assets/images/home-container/configurable/minehome/board-bg-k1.png');
+    --image-board-bg-k2: url('/@/assets/images/home-container/configurable/minehome/board-bg-k2.png');
+    --image-board-bg-l1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l1.png');
+    --image-board-bg-l2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-l2.png');
+    --image-board-bg-m1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m1.png');
+    --image-board-bg-m2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-m2.png');
+    --image-board-bg-nl1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n1.png');
+    --image-board-bg-nr1: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n2.png');
+    --image-board-bg-nl2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n3.png');
+    --image-board-bg-nr2: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-n4.png');
+    --image-board-bg-o: url('/@/assets/images/home-container/configurable/tashanhome/board-bg-o.png');
 
-  --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
-  --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
-  --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
-  height: 50px;
-  line-height: 25px;
-  width: 130px;
-  padding: 0 5px 0 5px;
-  text-align: center;
-  background-size: 100% 100%;
-  position: relative;
-}
+    --image-hycd: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
+    --image-dyfl: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
+    --image-jdjl: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
+    height: 50px;
+    line-height: 25px;
+    width: 130px;
+    padding: 0 5px 0 5px;
+    text-align: center;
+    background-size: 100% 100%;
+    position: relative;
+  }
 
-.mini-board_New {
-  width: 120px;
-  height: 60px;
-  background-image: var(--image-areaNew);
-  background-size: 100% 100%;
-}
-.mini-board_New1 {
-  width: 118px;
-  height: 60px;
-  background-image: var(--image-areaNew1);
-  background-size: 100% 100%;
-}
-.mini-board_New2 {
-  width: 93px;
-  height: 60px;
-  margin: 0px;
-  background-image: var(--image-areaNew2);
-  background-size: 100% 100%;
-  background-repeat: no-repeat;
-}
-.mini-board_New3 {
-  margin-bottom: 0;
-  width: 170px;
-  height: 50px;
-}
-.mini-board_New3_jin {
-  background-image: var(--image-areaNew3);
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
-.mini-board_New3_hui {
-  background-image: var(--image-areaNew4);
-  background-size: 100% 100%;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-}
+  .mini-board_New {
+    width: 120px;
+    height: 60px;
+    background-image: var(--image-areaNew);
+    background-size: 100% 100%;
+  }
+  .mini-board_New1 {
+    width: 118px;
+    height: 60px;
+    background-image: var(--image-areaNew1);
+    background-size: 100% 100%;
+  }
+  .mini-board_New2 {
+    width: 93px;
+    height: 60px;
+    margin: 0px;
+    background-image: var(--image-areaNew2);
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .mini-board_New3 {
+    margin-bottom: 0;
+    width: 170px;
+    height: 50px;
+  }
+  .mini-board_New3_jin {
+    background-image: var(--image-areaNew3);
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .mini-board_New3_hui {
+    background-image: var(--image-areaNew4);
+    background-size: 100% 100%;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
 
-.mini-board_A {
-  width: 120px;
-  height: 60px;
-  background-image: var(--image-area3);
-  background-size: 100% 100%;
-}
-.mini-board_B {
-  width: 131px;
-  height: 64px;
-  background-image: var(--image-value-bg);
-  background-size: auto 40px;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-.mini-board_R{
-  width: 120px;
-  height: 90px;
-  background-image: var(--image-areaR);
-  background-size: 100% 100%;
-  position: relative;
-  .mini-board__value_R {
-    position: absolute;
-    left: 30%;
-    top: 30%;
+  .mini-board_A {
+    width: 120px;
+    height: 60px;
+    background-image: var(--image-area3);
+    background-size: 100% 100%;
+  }
+  .mini-board_B {
+    width: 131px;
+    height: 64px;
+    background-image: var(--image-value-bg);
+    background-size: auto 40px;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+  .mini-board_R {
+    width: 120px;
+    height: 90px;
+    background-image: var(--image-areaR);
+    background-size: 100% 100%;
+    position: relative;
+    .mini-board__value_R {
+      position: absolute;
+      left: 30%;
+      top: 30%;
+      font-family: 'douyuFont';
+      color: @vent-gas-primary-text;
+    }
+    .mini-board__label_R {
+      position: absolute;
+      right: 0;
+      bottom: 20px;
+      font-size: 15px;
+    }
+  }
+  .mini-board_S {
+    width: 131px;
+    height: 64px;
+    background-image: var(--image-value-S);
+    background-size: auto 40px;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+  .mini-board_T {
+    width: 120px;
+    height: 80px;
+    background-image: var(--image-areaT);
+    background-size: 100% 100%;
+  }
+  .mini-board__label_T {
+    margin-top: 15px;
+  }
+  .mini-board__value_T {
     font-family: 'douyuFont';
     color: @vent-gas-primary-text;
+    font-size: 12px;
+    height: 30px;
+    line-height: 30px;
   }
-  .mini-board__label_R {
-    position: absolute;
-    right: 0;
-    bottom: 20px;
-    font-size: 15px;
-  }
-}
-.mini-board_S {
-  width: 131px;
-  height: 64px;
-  background-image: var(--image-value-S);
-  background-size: auto 40px;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-.mini-board_T {
-  width: 120px;
-  height: 80px;
-  background-image: var(--image-areaT);
-  background-size: 100% 100%;
-}
-.mini-board__label_T {
-  margin-top: 15px;
-}
-.mini-board__value_T {
-  font-family: 'douyuFont';
-  color: @vent-gas-primary-text;
-  font-size: 12px;
-  height: 30px;
-  line-height: 30px;
-}
 
-.mini-board_C {
-  width: 121px;
-  height: 69px;
-  background-image: var(--image-vent-param-bg);
-}
-.mini-board_D {
-  // width: 105px;
-  height: 58px;
-  background-image: var(--image-mini-board-1);
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-.mini-board_E {
-  width: 30%;
-  height: 180px;
-  padding: 20px 5px;
-  background-image: var(--image-board_bg_1);
-  background-position: center bottom;
-  background-repeat: no-repeat;
-  background-size: 100% 100%;
-}
-.mini-board_F {
-  width: 140px;
-  height: 70px;
-  background-image: var(--image-miehuo);
-  background-size: 100% 80%;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-.mini-board_G {
-  width: 98px;
-  height: 70px;
-  background-image: var(--image-value-bg-2);
-  background-size: 100% auto;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-}
-.mini-board_H {
-  width: 174px;
-  height: 104px;
-  background-image: var(--image-board_bg_3);
-  background-size: 100% auto;
-  background-position: center bottom;
-  background-repeat: no-repeat;
-  padding: 45px 0 0 0;
-}
-.mini-board_I {
-  width: 139px;
-  height: 67px;
-  background-image: var(--image-board_bg_6);
-  background-size: 100% 100%;
-}
+  .mini-board_C {
+    width: 121px;
+    height: 69px;
+    background-image: var(--image-vent-param-bg);
+  }
+  .mini-board_D {
+    // width: 105px;
+    height: 58px;
+    background-image: var(--image-mini-board-1);
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+  .mini-board_E {
+    width: 30%;
+    height: 180px;
+    padding: 20px 5px;
+    background-image: var(--image-board_bg_1);
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+  }
+  .mini-board_F {
+    width: 140px;
+    height: 70px;
+    background-image: var(--image-miehuo);
+    background-size: 100% 80%;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+  .mini-board_G {
+    width: 98px;
+    height: 70px;
+    background-image: var(--image-value-bg-2);
+    background-size: 100% auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+  }
+  .mini-board_H {
+    width: 174px;
+    height: 104px;
+    background-image: var(--image-board_bg_3);
+    background-size: 100% auto;
+    background-position: center bottom;
+    background-repeat: no-repeat;
+    padding: 45px 0 0 0;
+  }
+  .mini-board_I {
+    width: 139px;
+    height: 67px;
+    background-image: var(--image-board_bg_6);
+    background-size: 100% 100%;
+  }
 
-.mini-board_J {
-  width: 110px;
-  height: 58px;
-  background-image: var(--image-board-bg-J);
-  background-size: 100% 100%;
-}
-.mini-board_K {
-  width: 170px;
-  height: 70px;
-  background-size: 100% 100%;
-}
-/* 第一个mini-board_K使用k1背景 */
-.mini-board_K:first-of-type {
-  background-image: var(--image-board-bg-k1);
-}
+  .mini-board_J {
+    width: 110px;
+    height: 58px;
+    background-image: var(--image-board-bg-J);
+    background-size: 100% 100%;
+  }
+  .mini-board_K {
+    width: 170px;
+    height: 70px;
+    background-size: 100% 100%;
+  }
+  /* 第一个mini-board_K使用k1背景 */
+  .mini-board_K:first-of-type {
+    background-image: var(--image-board-bg-k1);
+  }
 
-/* 第二个mini-board_K使用k2背景 */
-.mini-board_K:first-of-type + .mini-board_K { 
-  background-image: var(--image-board-bg-k2);
-}
+  /* 第二个mini-board_K使用k2背景 */
+  .mini-board_K:first-of-type + .mini-board_K {
+    background-image: var(--image-board-bg-k2);
+  }
 
-.mini-board_L {
-  width: 120px;
-  height: 100px;
-  background-size: 100% 100%;
-}
-.mini-board_L:nth-child(odd) {
-  background-image: var(--image-board-bg-l1);
-}
-.mini-board_L:nth-child(even) {
-  background-image: var(--image-board-bg-l2);
-}
+  .mini-board_L {
+    width: 120px;
+    height: 100px;
+    background-size: 100% 100%;
+  }
+  .mini-board_L:nth-child(odd) {
+    background-image: var(--image-board-bg-l1);
+  }
+  .mini-board_L:nth-child(even) {
+    background-image: var(--image-board-bg-l2);
+  }
 
-.mini-board_M {
-  width: 180px;
-  height: 60px;
-  background-image: var(--image-board-bg-m1);
-  background-size: 100% 100%;
-  margin: 5px 0 15px 0;
-}
-.mini-board_M:nth-child(2),
-.mini-board_M:nth-child(3),
-.mini-board_M:nth-child(6),
-.mini-board_M:nth-child(7) {
-  background-image: var(--image-board-bg-m2);
-  .mini-board__value_M {
-    color: #27cab7;
+  .mini-board_M {
+    width: 180px;
+    height: 60px;
+    background-image: var(--image-board-bg-m1);
+    background-size: 100% 100%;
+    margin: 5px 0 15px 0;
+  }
+  .mini-board_M:nth-child(2),
+  .mini-board_M:nth-child(3),
+  .mini-board_M:nth-child(6),
+  .mini-board_M:nth-child(7) {
+    background-image: var(--image-board-bg-m2);
+    .mini-board__value_M {
+      color: #27cab7;
+    }
   }
-}
 
-.mini-board_N {
-  width: 200px;
-  height: 68px;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0 25px 0 20px;
-  margin-top: -15px;
-  background-image: var(--image-board-bg-nl1);
-  background-size: 100% 100%;
-}
-.mini-board_N:nth-child(2) {
-  background-image: var(--image-board-bg-nr1);
-}
-.mini-board_N:nth-child(3) {
-  background-image: var(--image-board-bg-nl2);
-}
-.mini-board_N:nth-child(4) {
-  background-image: var(--image-board-bg-nr2);
-}
-.mini-board_N:nth-child(5) {
-  background-image: var(--image-board-bg-nl1);
-}
-.mini-board_N:nth-child(6) {
-  background-image: var(--image-board-bg-nr1);
-}
+  .mini-board_N {
+    width: 200px;
+    height: 68px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 25px 0 20px;
+    margin-top: -15px;
+    background-image: var(--image-board-bg-nl1);
+    background-size: 100% 100%;
+  }
+  .mini-board_N:nth-child(2) {
+    background-image: var(--image-board-bg-nr1);
+  }
+  .mini-board_N:nth-child(3) {
+    background-image: var(--image-board-bg-nl2);
+  }
+  .mini-board_N:nth-child(4) {
+    background-image: var(--image-board-bg-nr2);
+  }
+  .mini-board_N:nth-child(5) {
+    background-image: var(--image-board-bg-nl1);
+  }
+  .mini-board_N:nth-child(6) {
+    background-image: var(--image-board-bg-nr1);
+  }
 
-.mini-board_O {
-  width: 110px;
-  height: 50px;
-  background-image: var(--image-board-bg-o);
-  background-size: 100% 100%;
-}
+  .mini-board_O {
+    width: 110px;
+    height: 50px;
+    background-image: var(--image-board-bg-o);
+    background-size: 100% 100%;
+  }
 
-.mini-board__value_New {
-  color: @vent-gas-primary-text;
-  font-size: 15px;
-  float: left;
-  margin: 0 0 0 13px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-}
-.mini-board__lable_New {
-  line-height: 24px;
-  height: 24px;
-}
-.mini-board__value_New1 {
-  color: @vent-gas-primary-text;
-  font-size: 16px;
-  float: left;
-  margin: 0 0 0 45%;
-  height: 30px;
-  line-height: 30px;
-}
-.mini-board__lable_New1 {
-  line-height: 24px;
-  height: 24px;
-}
-.mini-board__value_New2 {
-  color: @vent-gas-primary-text;
-  font-size: 15px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-}
-.mini-board__lable_New2 {
-  line-height: 24px;
-  height: 24px;
-}
-.mini-board__value_New3 {
-  color: #afe6f2;
-  font-size: 15px;
-  font-weight: bold;
-  margin-left: 10px;
-}
-.mini-board__lable_New3 {
-  color: #afe6f2;
-  height: 30px;
-  font-size: 10px;
-}
-.mini-board__value_A {
-  color: @vent-gas-primary-text;
-  font-size: 20px;
-  font-weight: bold;
-  height: 30px;
-  line-height: 30px;
-}
+  .mini-board__value_New {
+    color: @vent-gas-primary-text;
+    font-size: 15px;
+    float: left;
+    margin: 0 0 0 13px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
+  .mini-board__lable_New {
+    line-height: 24px;
+    height: 24px;
+  }
+  .mini-board__value_New1 {
+    color: @vent-gas-primary-text;
+    font-size: 16px;
+    float: left;
+    margin: 0 0 0 45%;
+    height: 30px;
+    line-height: 30px;
+  }
+  .mini-board__lable_New1 {
+    line-height: 24px;
+    height: 24px;
+  }
+  .mini-board__value_New2 {
+    color: @vent-gas-primary-text;
+    font-size: 15px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
+  .mini-board__lable_New2 {
+    line-height: 24px;
+    height: 24px;
+  }
+  .mini-board__value_New3 {
+    color: #afe6f2;
+    font-size: 15px;
+    font-weight: bold;
+    margin-left: 10px;
+  }
+  .mini-board__lable_New3 {
+    color: #afe6f2;
+    height: 30px;
+    font-size: 10px;
+  }
+  .mini-board__value_A {
+    color: @vent-gas-primary-text;
+    font-size: 20px;
+    font-weight: bold;
+    height: 30px;
+    line-height: 30px;
+  }
 
-.mini-board__value_B {
-  color: @vent-gas-primary-text;
-  font-size: 20px;
-  font-weight: bold;
-  height: 40px;
-  line-height: 40px;
-}
-.mini-board__label_B {
-  line-height: 24px;
-  height: 24px;
-}
+  .mini-board__value_B {
+    color: @vent-gas-primary-text;
+    font-size: 20px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+  }
+  .mini-board__label_B {
+    line-height: 24px;
+    height: 24px;
+  }
 
-.mini-board__value_C {
-  color: @vent-gas-primary-text;
-  height: 40px;
-  line-height: 40px;
-  font-size: 20px;
-  font-weight: bold;
-}
+  .mini-board__value_C {
+    color: @vent-gas-primary-text;
+    height: 40px;
+    line-height: 40px;
+    font-size: 20px;
+    font-weight: bold;
+  }
 
-.mini-board__value_D {
-  font-size: 20px;
-  font-weight: bold;
-  height: 40px;
-  line-height: 40px;
-}
-.mini-board__label_D {
-  line-height: 17px;
-  height: 17px;
-}
-.mini-board__value_E {
-  font-size: 20px;
-  font-weight: bold;
-}
-.mini-board__label_E {
-  line-height: 20px;
-  height: 90px;
-  padding-top: 30%;
-  background-repeat: no-repeat;
-  background-position: center top;
-}
+  .mini-board__value_D {
+    font-size: 20px;
+    font-weight: bold;
+    height: 40px;
+    line-height: 40px;
+  }
+  .mini-board__label_D {
+    line-height: 17px;
+    height: 17px;
+  }
+  .mini-board__value_E {
+    font-size: 20px;
+    font-weight: bold;
+  }
+  .mini-board__label_E {
+    line-height: 20px;
+    height: 90px;
+    padding-top: 30%;
+    background-repeat: no-repeat;
+    background-position: center top;
+  }
 
-.mini-board__value_F {
-  font-size: 20px;
-  font-weight: bold;
-  color: @vent-gas-primary-text;
-}
-.mini-board__label_F {
-  line-height: 50px;
-}
+  .mini-board__value_F {
+    font-size: 20px;
+    font-weight: bold;
+    color: @vent-gas-primary-text;
+  }
+  .mini-board__label_F {
+    line-height: 50px;
+  }
 
-.mini-board__value_G {
-  color: @vent-gas-primary-text;
-  font-size: 20px;
-  font-weight: bold;
-  height: 42px;
-  line-height: 42px;
-}
-.mini-board__label_G {
-  line-height: 20px;
-  height: 20px;
-}
+  .mini-board__value_G {
+    color: @vent-gas-primary-text;
+    font-size: 20px;
+    font-weight: bold;
+    height: 42px;
+    line-height: 42px;
+  }
+  .mini-board__label_G {
+    line-height: 20px;
+    height: 20px;
+  }
 
-.mini-board__value_J {
-  color: #b3ebf7;
-  font-size: 16px;
-  font-weight: bold;
-  height: 25px;
-  line-height: 25px;
-}
-.mini-board__label_J {
-  line-height: 20px;
-  height: 20px;
-}
+  .mini-board__value_J {
+    color: #b3ebf7;
+    font-size: 16px;
+    font-weight: bold;
+    height: 25px;
+    line-height: 25px;
+  }
+  .mini-board__label_J {
+    line-height: 20px;
+    height: 20px;
+  }
 
-.mini-board__value_K {
-  color: #fff;
-  font-family: 'douyuFont';
-  font-size: 16px;
-  // font-weight: bold;
-  height: 55px;
-  line-height: 55px;
-  padding-left: 60px;
-}
-.mini-board__label_K {
-  line-height: 21px;
-  height: 21px;
-  text-align: end;
-  font-size: 13px;
-}
-.mini-board__label_L {
-  line-height: 21px;
-  height: 21px;
-  text-align: center;
-  font-size: 14px;
-  margin-top: 30px;
-}
-.mini-board__value_L {
-  font-family: 'douyuFont';
-  color: @vent-gas-primary-text;
-  font-size: 14px;
-  height: 30px;
-  line-height: 30px;
-}
+  .mini-board__value_K {
+    color: #fff;
+    font-family: 'douyuFont';
+    font-size: 16px;
+    // font-weight: bold;
+    height: 55px;
+    line-height: 55px;
+    padding-left: 60px;
+  }
+  .mini-board__label_K {
+    line-height: 21px;
+    height: 21px;
+    text-align: end;
+    font-size: 13px;
+  }
+  .mini-board__label_L {
+    line-height: 21px;
+    height: 21px;
+    text-align: center;
+    font-size: 14px;
+    margin-top: 30px;
+  }
+  .mini-board__value_L {
+    font-family: 'douyuFont';
+    color: @vent-gas-primary-text;
+    font-size: 14px;
+    height: 30px;
+    line-height: 30px;
+  }
 
-.mini-board__label_M {
-  line-height: 21px;
-  height: 21px;
-  text-align: center;
-  font-size: 14px;
-}
-.mini-board__value_M {
-  font-family: 'douyuFont';
-  color: @vent-gas-primary-text;
-  font-size: 12px;
-  height: 23px;
-  margin-top: 5px;
-}
+  .mini-board__label_M {
+    line-height: 21px;
+    height: 21px;
+    text-align: center;
+    font-size: 14px;
+  }
+  .mini-board__value_M {
+    font-family: 'douyuFont';
+    color: @vent-gas-primary-text;
+    font-size: 12px;
+    height: 23px;
+    margin-top: 5px;
+  }
 
-.mini-board__value_O {
-  font-family: 'douyuFont';
-  font-size: 11px;
-  color:@vent-gas-primary-text
-}
+  .mini-board__value_O {
+    font-family: 'douyuFont';
+    font-size: 11px;
+    color: @vent-gas-primary-text;
+  }
 
-.mini-board_E:nth-child(1) {
-  .mini-board__label_E {
-    background-image: var(--image-hycd);
+  .mini-board_E:nth-child(1) {
+    .mini-board__label_E {
+      background-image: var(--image-hycd);
+    }
   }
-}
-.mini-board_E:nth-child(2) {
-  .mini-board__label_E {
-    background-image: var(--image-dyfl);
+  .mini-board_E:nth-child(2) {
+    .mini-board__label_E {
+      background-image: var(--image-dyfl);
+    }
   }
-}
-.mini-board_E:nth-child(3) {
-  .mini-board__label_E {
-    background-image: var(--image-jdjl);
+  .mini-board_E:nth-child(3) {
+    .mini-board__label_E {
+      background-image: var(--image-jdjl);
+    }
   }
-}
 
-.mini-board_H_low_risk {
-  background-image: var(--image-board_bg_3);
-}
-.mini-board_H_risk {
-  background-image: var(--image-board_bg_2);
-}
-.mini-board_H_high_risk {
-  background-image: var(--image-board_bg_5);
-}
-.mini-board_H_warning {
-  background-image: var(--image-board_bg_4);
-}
+  .mini-board_H_low_risk {
+    background-image: var(--image-board_bg_3);
+  }
+  .mini-board_H_risk {
+    background-image: var(--image-board_bg_2);
+  }
+  .mini-board_H_high_risk {
+    background-image: var(--image-board_bg_5);
+  }
+  .mini-board_H_warning {
+    background-image: var(--image-board_bg_4);
+  }
 </style>

src/views/vent/home/configurable/components/enhanced/moduleBottom.vue

@@ -39,6 +39,7 @@
     color: #fff;
     box-sizing: border-box;
     position: absolute;
+    backdrop-filter: blur(3px);
 
     .module-content {
       width: 100%;

src/views/vent/home/configurable/components/enhanced/moduleLeft.vue

@@ -41,6 +41,7 @@
     color: #fff;
     box-sizing: border-box;
     position: absolute;
+    backdrop-filter: blur(3px);
 
     .module-content {
       width: 100%;

src/views/vent/home/configurable/components/enhanced/moduleRight.vue

@@ -41,6 +41,7 @@
     color: #fff;
     box-sizing: border-box;
     position: absolute;
+    backdrop-filter: blur(3px);
 
     .module-content {
       width: 100%;

src/views/vent/home/configurable/components/originalNew/NewNav.vue

@@ -53,231 +53,243 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-let props = defineProps({
-  Title: {
-    type: String,
-    default: '',
-  },
-});
+  import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  let props = defineProps({
+    Title: {
+      type: String,
+      default: '',
+    },
+  });
 
-let menuList = ref<any[]>([
-  {
-    name: '智能通风',
-    targatUrl: '/configurable/ventNew/home',
-  },
-  {
-    name: '火灾监控',
-    targatUrl: '/configurable/fireNew/home',
-  },
-  {
-    name: '粉尘监控',
-    targatUrl: '/configurable/dustNew/home',
-  },
-  {
-    name: '瓦斯监控',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
-  },
-  {
-    name: '灾害预警',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
-  },
-]); //一级菜单列表
-let activeIndex = ref(0); //当前激活menu索引
-const router = useRouter();
-const route = useRoute();
-let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
-let menuItemActive = ref(0); //menuItem当前激活选项
-const leftMenus = computed(() => menuList.value.slice(0, 4));
-const rightMenus = computed(() => menuList.value.slice(4));
-function menuClick(data) {
-  activeIndex.value = data.index;
-  isShowMenuItem.value = !isShowMenuItem.value;
-  router.push({ path: data.item.targatUrl });
-}
-function menuItemClick(index) {
-  menuItemActive.value = index;
-  isShowMenuItem.value = false;
-}
-function updateActiveState(path: string) {
-  menuList.value.forEach((menu, index) => {
-    // 处理有直接链接的菜单项
-    if (menu.targatUrl === path) {
-      activeIndex.value = index;
-      isShowMenuItem.value = false;
-      return;
-    }
-    // 处理有子菜单的菜单项
-    if (menu.MenuItemList) {
-      const itemIndex = menu.MenuItemList.findIndex((item) => item.targatUrl === path);
-      if (itemIndex !== -1) {
+  let menuList = ref<any[]>([
+    {
+      name: '智能通风',
+      targatUrl: '/micro-vent-3dModal/configurable/ventNew/home',
+    },
+    {
+      name: '火灾监控',
+      targatUrl: '/micro-vent-3dModal/configurable/fireNew/home',
+    },
+    {
+      name: '粉尘监控',
+      targatUrl: '/micro-vent-3dModal/configurable/dustNew/home',
+    },
+    {
+      name: '瓦斯监控',
+      MenuItemList: [
+        { name: '多灾融合预警' },
+        { name: '通风监测预警' },
+        { name: '火灾监测预警' },
+        { name: '粉尘监测预警' },
+        { name: '瓦斯监测预警' },
+      ],
+    },
+    {
+      name: '灾害预警',
+      MenuItemList: [
+        { name: '多灾融合预警' },
+        { name: '通风监测预警' },
+        { name: '火灾监测预警' },
+        { name: '粉尘监测预警' },
+        { name: '瓦斯监测预警' },
+      ],
+    },
+  ]); //一级菜单列表
+  let activeIndex = ref(0); //当前激活menu索引
+  const router = useRouter();
+  const route = useRoute();
+  let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
+  let menuItemActive = ref(0); //menuItem当前激活选项
+  const leftMenus = computed(() => menuList.value.slice(0, 4));
+  const rightMenus = computed(() => menuList.value.slice(4));
+  function menuClick(data) {
+    activeIndex.value = data.index;
+    isShowMenuItem.value = !isShowMenuItem.value;
+    router.push({ path: data.item.targatUrl });
+  }
+  function menuItemClick(index) {
+    menuItemActive.value = index;
+    isShowMenuItem.value = false;
+  }
+  function updateActiveState(path: string) {
+    menuList.value.forEach((menu, index) => {
+      // 处理有直接链接的菜单项
+      if (menu.targatUrl === path) {
         activeIndex.value = index;
-        menuItemActive.value = itemIndex;
-        isShowMenuItem.value = true;
+        isShowMenuItem.value = false;
+        return;
+      }
+      // 处理有子菜单的菜单项
+      if (menu.MenuItemList) {
+        const itemIndex = menu.MenuItemList.findIndex((item) => item.targatUrl === path);
+        if (itemIndex !== -1) {
+          activeIndex.value = index;
+          menuItemActive.value = itemIndex;
+          isShowMenuItem.value = true;
+        }
       }
+    });
+  }
+  watch(
+    () => route.path,
+    (newPath) => {
+      updateActiveState(newPath);
     }
+  );
+  onMounted(() => {
+    updateActiveState(route.path);
   });
-}
-watch(
-  () => route.path,
-  (newPath) => {
-    updateActiveState(newPath);
-  }
-);
-onMounted(() => {
-  updateActiveState(route.path);
-});
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
+  @import '/@/design/theme.less';
 
-.New-nav {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .main-title {
-    width: 518px;
-    height: 100%;
-    display: flex;
-    align-items: center;
+  @font-face {
     font-family: 'douyuFont';
-    font-size: 25px;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: auto;
-    padding: 0;
+    src: url('/@/assets/font/douyuFont.otf');
   }
 
-  .nav-menu {
-    position: absolute;
-    top: 0;
-    left: 675px;
+  .New-nav {
+    position: relative;
+    width: 100%;
     height: 100%;
-    display: flex;
-    position: static; // 移除绝对定位
-    display: flex;
-    width: auto;
-    .nav-menu-left {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      float: left;
-    }
-    .nav-menu-right {
+
+    .main-title {
+      width: 518px;
+      height: 100%;
       display: flex;
-      flex-direction: row;
       align-items: center;
-      float: left;
-      margin-left: 40%;
-    }
-    .nav-menu-active {
-      position: relative;
-      cursor: pointer;
-      width: 120px;
-      height: 60px;
-      margin-top: 20px;
-      line-height: 45px;
-      text-align: center;
-      font-size: 16px;
-      letter-spacing: 2px;
-      background: url('@/assets/images/vent/homeNew/Select-btn.png') no-repeat;
-      background-size: 100% 100%;
-    }
-
-    .nav-menu-unactive {
-      position: relative;
-      width: 120px;
-      height: 60px;
-      line-height: 65px;
-      text-align: center;
-      margin: 0px 10px;
-      font-size: 16px;
-      letter-spacing: 2px;
-      background-size: 100% 100%;
-      cursor: pointer;
+      font-family: 'douyuFont';
+      font-size: 25px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: auto;
+      padding: 0;
     }
 
-    .nav-menu-item {
+    .nav-menu {
       position: absolute;
-      top: 23px;
-      width: 130px;
+      top: 0;
+      left: 675px;
+      height: 100%;
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      box-sizing: border-box;
+      position: static; // 移除绝对定位
+      display: flex;
+      width: auto;
+      .nav-menu-left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        float: left;
+      }
+      .nav-menu-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        float: left;
+        margin-left: 40%;
+      }
+      .nav-menu-active {
+        position: relative;
+        cursor: pointer;
+        width: 120px;
+        height: 60px;
+        margin-top: 20px;
+        line-height: 45px;
+        text-align: center;
+        font-size: 16px;
+        letter-spacing: 2px;
+        background: url('@/assets/images/vent/homeNew/Select-btn.png') no-repeat;
+        background-size: 100% 100%;
+      }
 
-      .nav-menu-content {
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        margin-top: 25%;
-        .nav-menu-List {
-          background: url('@/assets/images/vent/homeNew/menuList.png') no-repeat;
-          background-size: 100% 100%;
-        }
-        .menu-item-active {
-          color: #ddd;
-          z-index: 999;
-          width: 100%;
-          height: 36px;
-          line-height: 36px;
-          font-size: 14px;
-          background: url('@/assets/images/vent/homeNew/selectActive.png') no-repeat;
-          background-size: 100% 100%;
-        }
+      .nav-menu-unactive {
+        position: relative;
+        width: 120px;
+        height: 60px;
+        line-height: 65px;
+        text-align: center;
+        margin: 0px 10px;
+        font-size: 16px;
+        letter-spacing: 2px;
+        background-size: 100% 100%;
+        cursor: pointer;
+      }
+
+      .nav-menu-item {
+        position: absolute;
+        top: 23px;
+        width: 130px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        box-sizing: border-box;
 
-        .menu-item-unactive {
-          color: #ddd;
+        .nav-menu-content {
           width: 100%;
-          height: 40px;
-          line-height: 40px;
-          font-size: 14px;
+          height: 100%;
+          overflow-y: auto;
+          margin-top: 25%;
+          .nav-menu-List {
+            background: url('@/assets/images/vent/homeNew/menuList.png') no-repeat;
+            background-size: 100% 100%;
+          }
+          .menu-item-active {
+            color: #ddd;
+            z-index: 999;
+            width: 100%;
+            height: 36px;
+            line-height: 36px;
+            font-size: 14px;
+            background: url('@/assets/images/vent/homeNew/selectActive.png') no-repeat;
+            background-size: 100% 100%;
+          }
+
+          .menu-item-unactive {
+            color: #ddd;
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            font-size: 14px;
+          }
         }
       }
-    }
 
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
 
-      to {
-        opacity: 1;
+        to {
+          opacity: 1;
+        }
       }
-    }
 
-    /* 定义淡出动画 */
-    @keyframes fadeOut {
-      from {
-        opacity: 1;
-      }
+      /* 定义淡出动画 */
+      @keyframes fadeOut {
+        from {
+          opacity: 1;
+        }
 
-      to {
-        opacity: 0;
+        to {
+          opacity: 0;
+        }
       }
     }
-  }
 
-  .userInfo {
-    width: 120px;
-    float: right;
-    background: url(/src/assets/images/vent/homeNew/user.png) no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 14px;
-    right: 0;
-    .userName {
-      margin-left: 40px;
-      font-size: 20px;
+    .userInfo {
+      width: 120px;
+      float: right;
+      background: url(/src/assets/images/vent/homeNew/user.png) no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 14px;
+      right: 0;
+      .userName {
+        margin-left: 40px;
+        font-size: 20px;
+      }
     }
   }
-}
 </style>

src/views/vent/home/configurable/components/originalNew/NewNavFire.vue

@@ -4,7 +4,7 @@
     <div class="main-title">{{ Title }}</div>
     <!-- menu区域 -->
     <div class="nav-menu">
-      <div class="nav-menu-left">
+      <div v-if="!disabled" class="nav-menu-left">
         <div v-for="(item, index) in leftMenus" :key="index">
           <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" :key="index" @click="menuClick({ item, index })">
             <div style="color: #ddd">{{ item.name }}</div>
@@ -25,7 +25,7 @@
           </div>
         </div>
       </div>
-      <div class="nav-menu-right">
+      <div v-if="!disabled" class="nav-menu-right">
         <div v-for="(item, index) in rightMenus" :key="index + 4">
           <div
             :class="activeIndex == index + 4 ? 'nav-menu-active' : 'nav-menu-unactive'"
@@ -33,7 +33,7 @@
             @click="menuClick({ item, index: index + 4 })"
           >
             <div style="color: #ddd">{{ item.name }}</div>
-            <div v-if="activeIndex == index + 4 && isShowMenuItem" class="nav-menu-item">
+            <div v-if="activeIndex == index + 4 && isShowMenuItem && !disabled" class="nav-menu-item">
               <div class="nav-menu-content">
                 <div class="nav-menu-List">
                   <div
@@ -53,259 +53,278 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-import { useRouter, useRoute } from 'vue-router';
-let props = defineProps({
-  Title: {
-    type: String,
-    default: '',
-  },
-});
+  import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+  import { useRouter, useRoute } from 'vue-router';
+  let props = defineProps({
+    Title: {
+      type: String,
+      default: '',
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  });
 
-let menuList = ref<any[]>([
-  {
-    name: '智能通风',
-    targatUrl: '/configurable/ventNew/home',
-  },
-  {
-    name: '火灾监控',
-    targatUrl: '/configurable/fireNew/home',
-  },
-  {
-    name: '粉尘监控',
-    targatUrl: '/configurable/dustNew/home',
-  },
-  {
-    name: '瓦斯监控',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
-  },
-  {
-    name: '灾害预警',
-    MenuItemList: [{ name: '多灾融合预警' }, { name: '通风监测预警' }, { name: '火灾监测预警' }, { name: '粉尘监测预警' }, { name: '瓦斯监测预警' }],
-  },
-]); //一级菜单列表
-let activeIndex = ref(0); //当前激活menu索引
-const router = useRouter();
-const route = useRoute();
-let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
-let menuItemActive = ref(0); //menuItem当前激活选项
-const leftMenus = computed(() => menuList.value.slice(0, 4));
-const rightMenus = computed(() => menuList.value.slice(4));
-function menuClick(data) {
-  activeIndex.value = data.index;
-  isShowMenuItem.value = !isShowMenuItem.value;
-  router.push({ path: data.item.targatUrl });
-}
-function menuItemClick(index) {
-  menuItemActive.value = index;
-  isShowMenuItem.value = false;
-}
-function updateActiveState(path: string) {
-  menuList.value.forEach((menu, index) => {
-    // 处理有直接链接的菜单项
-    if (menu.targatUrl === path) {
-      activeIndex.value = index;
-      isShowMenuItem.value = false;
-      return;
-    }
-    // 处理有子菜单的菜单项
-    if (menu.MenuItemList) {
-      const itemIndex = menu.MenuItemList.findIndex((item) => item.targatUrl === path);
-      if (itemIndex !== -1) {
+  let menuList = ref<any[]>([
+    {
+      name: '智能通风',
+      targatUrl: '/micro-vent-3dModal/configurable/ventNew/home',
+    },
+    {
+      name: '火灾监控',
+      targatUrl: '/micro-vent-3dModal/configurable/fireNew/home',
+    },
+    {
+      name: '粉尘监控',
+      targatUrl: '/micro-vent-3dModal/configurable/dustNew/home',
+    },
+    {
+      name: '瓦斯监控',
+      MenuItemList: [
+        { name: '多灾融合预警' },
+        { name: '通风监测预警' },
+        { name: '火灾监测预警' },
+        { name: '粉尘监测预警' },
+        { name: '瓦斯监测预警' },
+      ],
+    },
+    {
+      name: '灾害预警',
+      MenuItemList: [
+        { name: '多灾融合预警' },
+        { name: '通风监测预警' },
+        { name: '火灾监测预警' },
+        { name: '粉尘监测预警' },
+        { name: '瓦斯监测预警' },
+      ],
+    },
+  ]); //一级菜单列表
+  let activeIndex = ref(0); //当前激活menu索引
+  const router = useRouter();
+  const route = useRoute();
+  let isShowMenuItem = ref(false); //是否显示menuItem下拉选项菜单
+  let menuItemActive = ref(0); //menuItem当前激活选项
+  const leftMenus = computed(() => menuList.value.slice(0, 4));
+  const rightMenus = computed(() => menuList.value.slice(4));
+  function menuClick(data) {
+    activeIndex.value = data.index;
+    isShowMenuItem.value = !isShowMenuItem.value;
+    router.push({ path: data.item.targatUrl });
+  }
+  function menuItemClick(index) {
+    menuItemActive.value = index;
+    isShowMenuItem.value = false;
+  }
+  function updateActiveState(path: string) {
+    menuList.value.forEach((menu, index) => {
+      // 处理有直接链接的菜单项
+      if (menu.targatUrl === path) {
         activeIndex.value = index;
-        menuItemActive.value = itemIndex;
-        isShowMenuItem.value = true;
+        isShowMenuItem.value = false;
+        return;
+      }
+      // 处理有子菜单的菜单项
+      if (menu.MenuItemList) {
+        const itemIndex = menu.MenuItemList.findIndex((item) => item.targatUrl === path);
+        if (itemIndex !== -1) {
+          activeIndex.value = index;
+          menuItemActive.value = itemIndex;
+          isShowMenuItem.value = true;
+        }
       }
+    });
+  }
+  watch(
+    () => route.path,
+    (newPath) => {
+      updateActiveState(newPath);
+    },
+    {
+      immediate: true,
     }
+  );
+  onMounted(() => {
+    updateActiveState(route.path);
   });
-}
-watch(
-  () => route.path,
-  (newPath) => {
-    updateActiveState(newPath);
-  }
-);
-onMounted(() => {
-  updateActiveState(route.path);
-});
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
+  @import '/@/design/theme.less';
 
-.New-nav {
-  position: relative;
-  width: 100%;
-  height: 100%;
-
-  .main-title {
-    width: 518px;
-    height: 100%;
-    display: flex;
-    align-items: center;
+  @font-face {
     font-family: 'douyuFont';
-    font-size: 25px;
-    position: absolute;
-    left: 50%;
-    transform: translateX(-50%);
-    width: auto;
-    padding: 0;
+    src: url('/@/assets/font/douyuFont.otf');
   }
 
-  .nav-menu {
-    position: absolute;
-    top: 0;
-    left: 675px;
+  .New-nav {
+    position: relative;
+    width: 100%;
     height: 100%;
-    display: flex;
-    position: static; // 移除绝对定位
-    display: flex;
-    width: auto;
-    .nav-menu-left {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      float: left;
-      .nav-menu-active {
-        position: relative;
-        cursor: pointer;
-        width: 100px;
-        height: 40px;
-        margin-top: 10px;
-        margin-right: 40px;
-        line-height: 35px;
-        text-align: center;
-        font-size: 16px;
-        background: url(/src/assets/images/fireNew/2-1.png) no-repeat;
-        background-size: 100% 100%;
-      }
 
-      .nav-menu-unactive {
-        position: relative;
-        cursor: pointer;
-        width: 100px;
-        height: 40px;
-        margin-top: 10px;
-        margin-right: 40px;
-        line-height: 35px;
-        text-align: center;
-        font-size: 16px;
-        background: url(/src/assets/images/fireNew/2-2.png) no-repeat;
-        background-size: 100% 100%;
-      }
-    }
-    .nav-menu-right {
+    .main-title {
+      width: 518px;
+      height: 100%;
       display: flex;
-      flex-direction: row;
       align-items: center;
-      float: left;
-      margin-left: 42%;
-      .nav-menu-active {
-        position: relative;
-        cursor: pointer;
-        width: 100px;
-        height: 40px;
-        margin-top: 10px;
-        margin-right: 40px;
-        line-height: 35px;
-        text-align: center;
-        font-size: 16px;
-        background: url(/src/assets/images/fireNew/2-3.png) no-repeat;
-        background-size: 100% 100%;
-      }
-
-      .nav-menu-unactive {
-        position: relative;
-        cursor: pointer;
-        width: 100px;
-        height: 40px;
-        margin-top: 10px;
-        margin-right: 40px;
-        line-height: 35px;
-        text-align: center;
-        font-size: 16px;
-        background: url(/src/assets/images/fireNew/2-4.png) no-repeat;
-        background-size: 100% 100%;
-      }
+      font-family: 'douyuFont';
+      font-size: 25px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: auto;
+      padding: 0;
     }
 
-    .nav-menu-item {
+    .nav-menu {
       position: absolute;
-      top: 23px;
-      width: 130px;
+      top: 0;
+      left: 675px;
+      height: 100%;
       display: flex;
-      flex-direction: column;
-      align-items: center;
-      box-sizing: border-box;
+      position: static; // 移除绝对定位
+      display: flex;
+      width: auto;
+      .nav-menu-left {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        float: left;
+        .nav-menu-active {
+          position: relative;
+          cursor: pointer;
+          width: 100px;
+          height: 40px;
+          margin-top: 10px;
+          margin-right: 40px;
+          line-height: 35px;
+          text-align: center;
+          font-size: 16px;
+          background: url(/src/assets/images/fireNew/2-1.png) no-repeat;
+          background-size: 100% 100%;
+        }
 
-      .nav-menu-content {
-        width: 100%;
-        height: 100%;
-        overflow-y: auto;
-        margin-top: 25%;
-        .nav-menu-List {
-          background: url('@/assets/images/vent/homeNew/menuList.png') no-repeat;
+        .nav-menu-unactive {
+          position: relative;
+          cursor: pointer;
+          width: 100px;
+          height: 40px;
+          margin-top: 10px;
+          margin-right: 40px;
+          line-height: 35px;
+          text-align: center;
+          font-size: 16px;
+          background: url(/src/assets/images/fireNew/2-2.png) no-repeat;
           background-size: 100% 100%;
         }
-        .menu-item-active {
-          color: #ddd;
-          z-index: 999;
-          width: 100%;
-          height: 36px;
-          line-height: 36px;
-          font-size: 14px;
-          background: url('@/assets/images/fireNew/2-2.png') no-repeat;
+      }
+      .nav-menu-right {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        float: left;
+        margin-left: 42%;
+        .nav-menu-active {
+          position: relative;
+          cursor: pointer;
+          width: 100px;
+          height: 40px;
+          margin-top: 10px;
+          margin-right: 40px;
+          line-height: 35px;
+          text-align: center;
+          font-size: 16px;
+          background: url(/src/assets/images/fireNew/2-3.png) no-repeat;
           background-size: 100% 100%;
         }
 
-        .menu-item-unactive {
-          color: #ddd;
-          width: 100%;
+        .nav-menu-unactive {
+          position: relative;
+          cursor: pointer;
+          width: 100px;
           height: 40px;
-          line-height: 40px;
-          font-size: 14px;
+          margin-top: 10px;
+          margin-right: 40px;
+          line-height: 35px;
+          text-align: center;
+          font-size: 16px;
+          background: url(/src/assets/images/fireNew/2-4.png) no-repeat;
+          background-size: 100% 100%;
         }
       }
-    }
 
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
+      .nav-menu-item {
+        position: absolute;
+        top: 23px;
+        width: 130px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        box-sizing: border-box;
+
+        .nav-menu-content {
+          width: 100%;
+          height: 100%;
+          overflow-y: auto;
+          margin-top: 25%;
+          .nav-menu-List {
+            background: url('@/assets/images/vent/homeNew/menuList.png') no-repeat;
+            background-size: 100% 100%;
+          }
+          .menu-item-active {
+            color: #ddd;
+            z-index: 999;
+            width: 100%;
+            height: 36px;
+            line-height: 36px;
+            font-size: 14px;
+            background: url('@/assets/images/fireNew/2-2.png') no-repeat;
+            background-size: 100% 100%;
+          }
 
-      to {
-        opacity: 1;
+          .menu-item-unactive {
+            color: #ddd;
+            width: 100%;
+            height: 40px;
+            line-height: 40px;
+            font-size: 14px;
+          }
+        }
       }
-    }
 
-    /* 定义淡出动画 */
-    @keyframes fadeOut {
-      from {
-        opacity: 1;
+      @keyframes fadeIn {
+        from {
+          opacity: 0;
+        }
+
+        to {
+          opacity: 1;
+        }
       }
 
-      to {
-        opacity: 0;
+      /* 定义淡出动画 */
+      @keyframes fadeOut {
+        from {
+          opacity: 1;
+        }
+
+        to {
+          opacity: 0;
+        }
       }
     }
-  }
 
-  .userInfo {
-    width: 120px;
-    float: right;
-    background: url(/src/assets/images/vent/homeNew/user.png) no-repeat;
-    background-size: 100% 100%;
-    position: absolute;
-    top: 14px;
-    right: 0;
-    .userName {
-      margin-left: 40px;
-      font-size: 20px;
+    .userInfo {
+      width: 120px;
+      float: right;
+      background: url(/src/assets/images/vent/homeNew/user.png) no-repeat;
+      background-size: 100% 100%;
+      position: absolute;
+      top: 14px;
+      right: 0;
+      .userName {
+        margin-left: 40px;
+        font-size: 20px;
+      }
     }
   }
-}
 </style>

src/views/vent/home/configurable/components/originalNew/moduleBottom.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div v-if="visible" class="module-content">
     <div class="left-solt" @click="scrollLeft"></div>
@@ -12,123 +11,123 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, computed } from 'vue';
+  import { ref, computed } from 'vue';
 
-defineProps<{ title: string; visible: boolean }>();
-const emit = defineEmits(['close', 'click']);
+  defineProps<{ title: string; visible: boolean }>();
+  const emit = defineEmits(['close', 'click']);
 
-const tabList = ['Tab标题名称 1', 'Tab标题名称 2', 'Tab标题名称 3', 'Tab标题名称 4', 'Tab标题名称 5', 'Tab标题名称 6'];
-const activeIndex = ref(0);
-const currentStart = ref(0);
-const visibleCount = 4;
+  const tabList = ['Tab标题名称 1', 'Tab标题名称 2', 'Tab标题名称 3', 'Tab标题名称 4', 'Tab标题名称 5', 'Tab标题名称 6'];
+  const activeIndex = ref(0);
+  const currentStart = ref(0);
+  const visibleCount = 4;
 
-const visibleTabs = computed(() => {
-  return tabList.slice(currentStart.value, currentStart.value + visibleCount);
-});
+  const visibleTabs = computed(() => {
+    return tabList.slice(currentStart.value, currentStart.value + visibleCount);
+  });
 
-function closeModel() {
-  emit('close');
-}
+  function closeModel() {
+    emit('close');
+  }
 
-function clickHandler() {
-  emit('click');
-}
+  function clickHandler() {
+    emit('click');
+  }
 
-function selectTab(index: number) {
-  activeIndex.value = index;
-}
+  function selectTab(index: number) {
+    activeIndex.value = index;
+  }
 
-function scrollLeft() {
-  if (currentStart.value > 0) {
-    currentStart.value--;
+  function scrollLeft() {
+    if (currentStart.value > 0) {
+      currentStart.value--;
+    }
   }
-}
 
-function scrollRight() {
-  if (currentStart.value + visibleCount < tabList.length) {
-    currentStart.value++;
+  function scrollRight() {
+    if (currentStart.value + visibleCount < tabList.length) {
+      currentStart.value++;
+    }
   }
-}
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-.module-content {
-  color: #fff;
-  box-sizing: border-box;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.left-solt,
-.right-solt {
-  width: 15%;
-  height: 60%;
-  cursor: pointer;
-  position: relative;
-  z-index: 1;
-}
-
-.left-solt {
-  background: url('@/assets/images/vent/homeNew/Bottom-left.png') no-repeat;
-  background-size: 100% 100%;
-}
-
-.right-solt {
-  background: url('@/assets/images/vent/homeNew/Bottom_right.png') no-repeat;
-  background-size: 100% 100%;
-}
-
-.center-solt {
-  display: flex;
-  width: 70%;
-  height: 60%;
-  justify-content: space-between;
-}
-
-.tab-item {
-  flex: 1;
-  text-align: center;
-  line-height: 60px;
-  cursor: pointer;
-  background: url('@/assets/images/vent/homeNew/tab-defult.png') no-repeat;
-  background-size: 100% 100%;
-  transition: all 0.3s;
-  margin: 0 5px;
-  color: #999;
-}
-.tab-name {
-  font-size: 14px;
-  display: inline-block;
-  float: right;
-  margin-right: 13px;
-}
-.tab-item.active {
-  background: url('@/assets/images/vent/homeNew/tab-active.png') no-repeat;
-  background-size: 100% 100%;
-  font-weight: bold;
-  color: #fff;
-  transform: translateY(-5px);
-}
-
-.module-slot {
-  height: calc(100% - 33px);
-  width: calc(100% - 15px);
-  margin-left: 10px;
-}
-
-.v-enter-active,
-.v-leave-active {
-  transition: all 0.3s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-  opacity: 0;
-  transform: translateY(-33px);
-}
+  @import '/@/design/theme.less';
+
+  .module-content {
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .left-solt,
+  .right-solt {
+    width: 15%;
+    height: 60%;
+    cursor: pointer;
+    position: relative;
+    z-index: 1;
+  }
+
+  .left-solt {
+    background: url('@/assets/images/vent/homeNew/Bottom-left.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .right-solt {
+    background: url('@/assets/images/vent/homeNew/Bottom_right.png') no-repeat;
+    background-size: 100% 100%;
+  }
+
+  .center-solt {
+    display: flex;
+    width: 70%;
+    height: 60%;
+    justify-content: space-between;
+  }
+
+  .tab-item {
+    flex: 1;
+    text-align: center;
+    line-height: 60px;
+    cursor: pointer;
+    background: url('@/assets/images/vent/homeNew/tab-defult.png') no-repeat;
+    background-size: 100% 100%;
+    transition: all 0.3s;
+    margin: 0 5px;
+    color: #999;
+  }
+  .tab-name {
+    font-size: 14px;
+    display: inline-block;
+    float: right;
+    margin-right: 13px;
+  }
+  .tab-item.active {
+    background: url('@/assets/images/vent/homeNew/tab-active.png') no-repeat;
+    background-size: 100% 100%;
+    font-weight: bold;
+    color: #fff;
+    transform: translateY(-5px);
+  }
+
+  .module-slot {
+    height: calc(100% - 33px);
+    width: calc(100% - 15px);
+    margin-left: 10px;
+  }
+
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+    transform: translateY(-33px);
+  }
 </style>

src/views/vent/home/configurable/components/originalNew/moduleLeftBottom.vue

@@ -10,95 +10,95 @@
   </div>
 </template>
 <script lang="ts" setup>
-defineProps<{ title: string; visible: boolean }>();
-const emit = defineEmits(['close', 'click']);
+  defineProps<{ title: string; visible: boolean }>();
+  const emit = defineEmits(['close', 'click']);
 
-function closeModel() {
-  emit('close');
-}
-function clickHandler() {
-  emit('click');
-}
+  function closeModel() {
+    emit('close');
+  }
+  function clickHandler() {
+    emit('click');
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .module-content {
+      --image-model_original_title_bg: url('@/assets/images/vent/homeNew/left3.png');
+    }
+  }
 
-@{theme-deepblue} {
   .module-content {
     --image-model_original_title_bg: url('@/assets/images/vent/homeNew/left3.png');
+    --bg-height: 40px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
   }
-}
-
-.module-content {
-  --image-model_original_title_bg: url('@/assets/images/vent/homeNew/left3.png');
-  --bg-height: 40px;
-  color: #fff;
-  box-sizing: border-box;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #fff;
-  float: right;
-  padding-right: 25px;
-  font-family: 'douyuFont';
-  line-height: 30px;
-}
-.module-content__title__expand {
-  width: 100%;
-  height: var(--bg-height);
-  background: var(--image-model_original_title_bg) no-repeat;
-  background-size: 100% 100%;
-  position: relative;
-  text-align: center;
+  .title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    float: right;
+    padding-right: 25px;
+    font-family: 'douyuFont';
+    line-height: 30px;
+  }
+  .module-content__title__expand {
+    width: 100%;
+    height: var(--bg-height);
+    background: var(--image-model_original_title_bg) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    text-align: center;
 
-  line-height: var(--bg-height);
-}
+    line-height: var(--bg-height);
+  }
 
-// .module-content__title {
-//   width: 50%;
-//   height: var(--bg-height);
-//   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
-//   background-size: 100% 100%;
-//   position: relative;
-//   text-align: right;
-//   padding: 4px 10% 0 0;
-// }
+  // .module-content__title {
+  //   width: 50%;
+  //   height: var(--bg-height);
+  //   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
+  //   background-size: 100% 100%;
+  //   position: relative;
+  //   text-align: right;
+  //   padding: 4px 10% 0 0;
+  // }
 
-// 固定在父容器右上角的按钮图标
-// .action-btn {
-//   width: 18px;
-//   height: 18px;
-//   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
-//   position: absolute;
-//   right: 0;
-//   top: 0;
-// }
-// .close-btn {
-//   transform: rotate(-90deg);
-// }
+  // 固定在父容器右上角的按钮图标
+  // .action-btn {
+  //   width: 18px;
+  //   height: 18px;
+  //   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
+  //   position: absolute;
+  //   right: 0;
+  //   top: 0;
+  // }
+  // .close-btn {
+  //   transform: rotate(-90deg);
+  // }
 
-.module-slot {
-  height: calc(100% - 33px);
-  width: calc(100% - 20px);
-  backdrop-filter: blur(5px);
-  margin-left: 10px;
-}
+  .module-slot {
+    height: calc(100% - 33px);
+    width: calc(100% - 20px);
+    backdrop-filter: blur(5px);
+    margin-left: 10px;
+  }
 
-// Transition动画相关
-.v-enter-active,
-.v-leave-active {
-  transition: all 0.3s ease;
-}
+  // Transition动画相关
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
 
-.v-enter-from,
-.v-leave-to {
-  // opacity: 1;
-  transform: translateX(-100%);
-  // transform: scaleY(0);
-  // transform-origin: center top;
-}
+  .v-enter-from,
+  .v-leave-to {
+    // opacity: 1;
+    transform: translateX(-100%);
+    // transform: scaleY(0);
+    // transform-origin: center top;
+  }
 </style>

src/views/vent/home/configurable/components/originalNew/moduleLeftCenter.vue

@@ -10,93 +10,94 @@
   </div>
 </template>
 <script lang="ts" setup>
-defineProps<{ title: string; visible: boolean }>();
-const emit = defineEmits(['close', 'click']);
+  defineProps<{ title: string; visible: boolean }>();
+  const emit = defineEmits(['close', 'click']);
 
-function closeModel() {
-  emit('close');
-}
-function clickHandler() {
-  emit('click');
-}
+  function closeModel() {
+    emit('close');
+  }
+  function clickHandler() {
+    emit('click');
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .module-content {
+      --image-model_original_title_bg: url('@/assets/images/vent/homeNew/left2.png');
+    }
+  }
 
-@{theme-deepblue} {
   .module-content {
     --image-model_original_title_bg: url('@/assets/images/vent/homeNew/left2.png');
+    --bg-height: 40px;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+  .title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #fff;
+    float: right;
+    padding-right: 25px;
+    line-height: 30px;
+    font-family: 'douyuFont';
+  }
+  .module-content__title__expand {
+    width: 100%;
+    height: var(--bg-height);
+    background: var(--image-model_original_title_bg) no-repeat;
+    background-size: 100% 100%;
+    position: relative;
+    text-align: center;
+    line-height: var(--bg-height);
   }
-}
-
-.module-content {
-  --image-model_original_title_bg: url('@/assets/images/vent/homeNew/left2.png');
-  --bg-height: 40px;
-  color: #fff;
-  box-sizing: border-box;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-}
-.title {
-  font-size: 14px;
-  font-weight: 500;
-  color: #fff;
-  float: right;
-  padding-right: 25px;
-  line-height: 30px;    font-family: 'douyuFont';
-}
-.module-content__title__expand {
-  width: 100%;
-  height: var(--bg-height);
-  background: var(--image-model_original_title_bg) no-repeat;
-  background-size: 100% 100%;
-  position: relative;
-  text-align: center;
-  line-height: var(--bg-height);
-}
 
-// .module-content__title {
-//   width: 50%;
-//   height: var(--bg-height);
-//   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
-//   background-size: 100% 100%;
-//   position: relative;
-//   text-align: right;
-//   padding: 4px 10% 0 0;
-// }
+  // .module-content__title {
+  //   width: 50%;
+  //   height: var(--bg-height);
+  //   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
+  //   background-size: 100% 100%;
+  //   position: relative;
+  //   text-align: right;
+  //   padding: 4px 10% 0 0;
+  // }
 
-// 固定在父容器右上角的按钮图标
-// .action-btn {
-//   width: 18px;
-//   height: 18px;
-//   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
-//   position: absolute;
-//   right: 0;
-//   top: 0;
-// }
-// .close-btn {
-//   transform: rotate(-90deg);
-// }
+  // 固定在父容器右上角的按钮图标
+  // .action-btn {
+  //   width: 18px;
+  //   height: 18px;
+  //   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
+  //   position: absolute;
+  //   right: 0;
+  //   top: 0;
+  // }
+  // .close-btn {
+  //   transform: rotate(-90deg);
+  // }
 
-.module-slot {
-  height: calc(100% - 33px);
-  width: calc(100% - 20px);
-  backdrop-filter: blur(5px);
-  margin-left: 10px;
-}
+  .module-slot {
+    height: calc(100% - 33px);
+    width: calc(100% - 20px);
+    backdrop-filter: blur(5px);
+    margin-left: 10px;
+  }
 
-// Transition动画相关
-.v-enter-active,
-.v-leave-active {
-  transition: all 0.3s ease;
-}
+  // Transition动画相关
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
 
-.v-enter-from,
-.v-leave-to {
-  // opacity: 1;
-  transform: translateX(-100%);
-  // transform: scaleY(0);
-  // transform-origin: center top;
-}
+  .v-enter-from,
+  .v-leave-to {
+    // opacity: 1;
+    transform: translateX(-100%);
+    // transform: scaleY(0);
+    // transform-origin: center top;
+  }
 </style>

src/views/vent/home/configurable/components/originalNew/moduleTop.vue

@@ -1,4 +1,3 @@
-
 <template>
   <div v-if="visible" class="module-content">
     <div class="left-solt"></div>
@@ -32,92 +31,92 @@
 </template>
 
 <script lang="ts" setup>
-defineProps<{ title: string; visible: boolean }>();
-const emit = defineEmits(['close', 'click']);
+  defineProps<{ title: string; visible: boolean }>();
+  const emit = defineEmits(['close', 'click']);
 </script>
 
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-.module-content {
-  background: url('@/assets/images/vent/homeNew/content.png') no-repeat;
-  background-size: 100% 100%;
-  color: #fff;
-  box-sizing: border-box;
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
+  @import '/@/design/theme.less';
 
-.left-solt {
-  left: 8%;
-  top: 13%;
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-  position: absolute;
-  background: url('@/assets/images/vent/homeNew/Top-left.png') no-repeat;
-  background-size: 100% 100%;
-}
+  .module-content {
+    background: url('@/assets/images/vent/homeNew/content.png') no-repeat;
+    background-size: 100% 100%;
+    color: #fff;
+    box-sizing: border-box;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
 
-.right-solt {
-  right: 8%;
-  top: 13%;
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-  position: absolute;
-  background: url('@/assets/images/vent/homeNew/Top-right.png') no-repeat;
-  background-size: 100% 100%;
-}
+  .left-solt {
+    left: 8%;
+    top: 13%;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    position: absolute;
+    background: url('@/assets/images/vent/homeNew/Top-left.png') no-repeat;
+    background-size: 100% 100%;
+  }
 
-.center-solt {
-  display: flex;
-  position: absolute;
-  left: 15%;
-  bottom: 50%;
-  width: 70%;
-  height: 60%;
-  align-items: center;
-  justify-content: space-around;
-}
+  .right-solt {
+    right: 8%;
+    top: 13%;
+    width: 30px;
+    height: 30px;
+    cursor: pointer;
+    position: absolute;
+    background: url('@/assets/images/vent/homeNew/Top-right.png') no-repeat;
+    background-size: 100% 100%;
+  }
 
-.data-item {
-  left: 10%;
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  .data-icon {
-    width: 60px;
-    height: 100%;
+  .center-solt {
+    display: flex;
+    position: absolute;
+    left: 15%;
+    bottom: 50%;
+    width: 70%;
+    height: 60%;
+    align-items: center;
+    justify-content: space-around;
   }
-  .data-content {
+
+  .data-item {
+    left: 10%;
     display: flex;
-    flex-direction: column;
-    .title {
-      font-size: 16px;
-      font-weight: bold;
-      color: #999999;
+    align-items: center;
+    gap: 5px;
+    .data-icon {
+      width: 60px;
+      height: 100%;
     }
-    .air-num {
-      font-size: 25px;
+    .data-content {
+      display: flex;
+      flex-direction: column;
+      .title {
+        font-size: 16px;
+        font-weight: bold;
+        color: #999999;
+      }
+      .air-num {
+        font-size: 25px;
+      }
     }
   }
-}
-.air-num1 {
-  color: #4ca8d5;
-}
-.air-num2 {
-  color: #b9f3fc;
-}
-.air-num3 {
-  color: #4ad1cc;
-}
-.divider {
-  width: 1px;
-  height: 40px;
-  background: url('@/assets/images/vent/homeNew/Top-divider.png') no-repeat;
-}
+  .air-num1 {
+    color: #4ca8d5;
+  }
+  .air-num2 {
+    color: #b9f3fc;
+  }
+  .air-num3 {
+    color: #4ad1cc;
+  }
+  .divider {
+    width: 1px;
+    height: 40px;
+    background: url('@/assets/images/vent/homeNew/Top-divider.png') no-repeat;
+  }
 </style>

src/views/vent/home/configurable/components/preset/buttonList.vue

@@ -3,30 +3,34 @@
     <div :class="`button-block_${type}`" v-if="type === 'A'">
       <div :class="`button-item_${type}`" v-for="button in buttonList" :key="button.value">
         <div v-if="button.isShowInput" :class="`input-area_${type}`">
-          <a-input v-model:value="inputValue" :placeholder="button.input" />
-          <a-button type="primary">{{ button.label }}</a-button>
+          <a-input v-model:value="button.inputValue" :placeholder="button.inputContent" />
+          <a-button type="primary" @click="handleData(button)">{{ button.label }}</a-button>
         </div>
         <div v-else>
-          <a-button type="primary">{{ button.label }}</a-button>
+          <a-button type="primary" @click="handleData(button)">{{ button.label }}</a-button>
         </div>
       </div>
     </div>
-  </div>
-  <div :class="`button-block_${type}`" v-if="type === 'B'">
-    <!-- 遍历分组后的按钮组 -->
-    <div :class="`button-group_${type}`" v-for="(group, groupIndex) in groupedButtons" :key="groupIndex">
-      <!-- 遍历每组中的按钮 -->
-      <div :class="`button-item_${type}`" v-for="button in group" :key="button.value">
-        <a-button type="primary">{{ button.label }}</a-button>
+    <div :class="`button-block_${type}`" v-if="type === 'B'">
+      <!-- 遍历分组后的按钮组 -->
+      <div :class="`button-group_${type}`" v-for="(group, groupIndex) in groupedButtons" :key="groupIndex">
+        <!-- 遍历每组中的按钮 -->
+        <div :class="`button-item_${type}`" v-for="button in group" :key="button.value">
+          <a-button type="primary" @click="handleData(button)">{{ button.label }}</a-button>
+        </div>
       </div>
     </div>
   </div>
+  <ConfirmModal v-model:visible="modalVisible" @ok="handleConfirm">
+    <SvgIcon class="icon" size="34" name="warning-icon-gas" />
+    <span> {{ currentButton?.content }} </span>
+  </ConfirmModal>
 </template>
 
 <script lang="ts" setup>
   defineOptions({ name: 'ButtonList' });
-
-  import { computed, onMounted, ref, watch } from 'vue';
+  import ConfirmModal from '@/views/vent/gas/components/modal/confirmModal.vue';
+  import { computed, ref, inject } from 'vue';
   // 定义组件属性
   const props = defineProps<{
     type: string;
@@ -36,17 +40,16 @@
   // 定义按钮项的类型
   interface ButtonItem {
     isShowInput: boolean;
-    input: string;
+    inputContent: string;
+    inputValue: string | number;
     value: string | number;
     label: string;
+    content: string;
     // 可以根据实际需求添加其他属性
   }
-  const inputValue = ref<string>('');
-  // 组件挂载时初始化一次
-  onMounted(() => {
-    console.log(props);
-    // 设置默认选中项
-  });
+  const modalVisible = ref(false);
+  const currentButton = ref<ButtonItem | null>(null); // 记录当前点击的按钮
+
   const groupedButtons = computed<ButtonItem[][]>(() => {
     if (props.type !== 'B') return [];
     const groups: ButtonItem[][] = [];
@@ -55,17 +58,19 @@
     }
     return groups;
   });
-
-  watch(
-    () => props.config,
-    (newV) => {
-      console.log(newV, 'debuger---');
-    },
-    {
-      deep: true,
-      immediate: true,
-    }
+  // 注入祖父组件提供的处理函数
+  const handleButtonConfirm = inject<(button: ButtonItem) => void>(
+    'handleButtonConfirm',
+    () => console.warn('未提供handleButtonConfirm函数') // 默认值，避免报错
   );
+  const handleData = (button: ButtonItem) => {
+    modalVisible.value = !modalVisible.value;
+    currentButton.value = button;
+  };
+  const handleConfirm = () => {
+    if (!currentButton.value) return;
+    handleButtonConfirm(currentButton.value);
+  };
 </script>
 
 <style lang="less" scoped>

src/views/vent/home/configurable/components/preset/radioLabel.vue

@@ -5,7 +5,7 @@
         <span>{{ props.config.leftLabel }}</span>
       </div>
       <div :class="`left-label_${type}`" v-if="props.config.isShowRadio">
-        <a-radio-group v-model:value="defaultValue" :options="options" @change="handleRadioChange" />
+        <a-radio-group v-model:value="defaultValue" :options="options" @change="handleChange" />
       </div>
       <div :class="`right-label_${type}`" v-else>
         <span>{{ props.config.rightLbel }}</span>
@@ -15,10 +15,9 @@
 </template>
 
 <script lang="ts" setup>
-  // Set a multi-word component name to follow Vue style guide
   defineOptions({ name: 'PresetRadio' });
 
-  import { onMounted, ref, watch } from 'vue';
+  import { onMounted, ref, inject } from 'vue';
   import { RadioGroupProps } from 'ant-design-vue';
   // 定义组件属性
   const props = defineProps<{
@@ -26,8 +25,6 @@
     config: any;
   }>();
 
-  // 获取组件根DOM元素
-  const radioContainer = ref<HTMLDivElement>();
   // 定义选项数据
   let options: RadioGroupProps['options'] = [];
   // 定义各个单选组的默认值
@@ -35,7 +32,6 @@
   // 组件挂载时初始化一次
   onMounted(() => {
     initData();
-    console.log(props);
     // 设置默认选中项
   });
   // 初始化数据
@@ -47,33 +43,16 @@
       defaultValue.value = props.config.defaultValue || '';
     }
   };
+  // 注入祖父组件提供的处理函数（关键：跨层级获取）
+  const handleRadioChange = inject<(value: string) => void>(
+    'handleRadioChange', // 注入的key，需与祖父组件保持一致
+    () => console.warn('未提供handleRadioChange函数') // 默认值，避免报错
+  );
+
   // 处理单选框变化，触发原生DOM事件
-  const handleRadioChange = (value: string) => {
-    if (radioContainer.value) {
-      // 创建自定义原生事件，携带选中值（通过event.detail传递）
-      const event = new CustomEvent('radio-value-change', {
-        detail: {
-          value,
-        },
-        bubbles: true, // 允许事件冒泡
-        cancelable: true,
-      });
-      console.log('debuger', event);
-      // 触发事件
-      radioContainer.value.dispatchEvent(event);
-    }
+  const handleChange = (value: string) => {
+    handleRadioChange(value);
   };
-
-  watch(
-    () => props.config,
-    (newV) => {
-      console.log(newV, 'debuger---');
-    },
-    {
-      deep: true,
-      immediate: true,
-    }
-  );
 </script>
 
 <style lang="less" scoped>

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

@@ -0,0 +1,119 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <div id="three3D"></div>
+</template>
+<script lang="ts" setup>
+  import { ref, watch, onMounted, onUnmounted } from 'vue';
+  import UseThree from '/@/utils/threejs/useThree';
+  import { animateCamera } from '/@/utils/threejs/util';
+  import * as THREE from 'three';
+  import useEvent from '/@/utils/threejs/useEvent';
+
+  const props = defineProps<{
+    modalName: string;
+  }>();
+
+  let modal, modalGroup;
+
+  const mouseEvent = () => {
+    console.log(modal.camera, modal.orbitControls);
+  };
+  const addMouseEvent = () => {
+    // 定义鼠标点击事件
+    modal.canvasContainer?.addEventListener('mousedown', mouseEvent.bind(null));
+  };
+  const addLight = () => {
+    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
+    directionalLight.position.set(-110, 150, 647);
+    modalGroup?.add(directionalLight);
+  };
+  const setModelType = () => {
+    return new Promise(async (resolve) => {
+      const modalConfigurations = {
+        workFace11: {
+          render: null,
+          group: modalGroup ? modalGroup : null,
+          newP: { x: -2.211555197992825, y: 27.130029732875393, z: 2.3018919451652007 },
+          newT: { x: -2.211555197992825, y: -8.604453425019353, z: 2.301856157557903 },
+        },
+      };
+      await initModal();
+      if (modalConfigurations[props.modalName]) {
+        const oldCameraPosition = { x: 100, y: 0, z: 10 };
+        const config = modalConfigurations[props.modalName];
+
+        setTimeout(async () => {
+          await animateCamera(oldCameraPosition, { x: 0, y: 0, z: 0 }, config.newP, config.newT, modal);
+          modal.scene?.add(modalGroup);
+          resolve(null);
+        }, 1000);
+      }
+    });
+  };
+
+  const customModal = () => {
+    if (props.modalName == 'workFace11') {
+      const DiXing = modalGroup.getObjectByName('PouMian01')?.getObjectByName('DiXing')?.getObjectByName('DiXing_1');
+      if (DiXing) {
+        DiXing.visible = false;
+      }
+    }
+  };
+
+  const initModal = () => {
+    return new Promise((resolve) => {
+      modal.setGLTFModel(props.modalName).then(async (gltf) => {
+        const gltfModal = gltf[0];
+        modalGroup = gltfModal;
+        console.log('模型文件', gltfModal);
+        addLight();
+        customModal();
+        modal.animate();
+        addMouseEvent();
+        // this.group.name = this.modelName;
+        // setModalCenter(this.group);
+        // this.group.scale.set(2.5, 2.5, 2.5);
+        // this.setThreePlane();
+        // this.setControls();
+        resolve(null);
+      });
+    });
+  };
+
+  watch(
+    () => props.modalName,
+    async (val) => {
+      if (val) {
+        await setModelType();
+      }
+    }
+  );
+
+  onMounted(async () => {
+    modal = new UseThree('#three3D', '');
+    if (modal) {
+      modal.setEnvMap('test1.hdr');
+      modal.renderer.toneMappingExposure = 1.0;
+      modal.renderer.sortObjects = true;
+      modal.orbitControls.update();
+      await setModelType();
+    }
+  });
+
+  onUnmounted(() => {
+    modal.clearGroup(modalGroup);
+    modal.destroy();
+    modalGroup = null;
+    modal = null;
+  });
+</script>
+<style lang="less" scoped>
+  #three3D {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 0;
+  }
+</style>

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

@@ -1042,7 +1042,7 @@ export const testConfigBDFire: Config[] = [
     },
   },
   {
-    deviceType: 'aqjkArray',
+    deviceType: '',
     moduleName: '安全监控系统',
     pageType: 'BD_fire',
     moduleData: {
@@ -1103,6 +1103,30 @@ export const testConfigBDFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
+      mock: {
+        aqjkArray: [
+          {
+            strinstallpos: '安全监控A',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+          {
+            strinstallpos: '安全监控B',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+          {
+            strinstallpos: '安全监控C',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+          {
+            strinstallpos: '安全监控D',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+        ],
+      },
     },
     showStyle: {
       size: 'width:440px;height:260px;',

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

@@ -173,12 +173,12 @@ export const testConfigDustControl: Config[] = [
           readFrom: '',
           type: 'A',
           buttonList: [
-            { isShowInput: true, input: '水位设置', label: '保存', value: 'save' },
-            { label: '自动补水', value: 'zdbs' },
-            { label: '喷头清洁', value: 'ptqj' },
-            { label: '沉淀清洁', value: 'cdqj' },
-            { label: '开启喷雾', value: 'kqpw' },
-            { label: '停止喷雾', value: 'tzpw' },
+            { isShowInput: true, inputContent: '水位设置', inputValue: '', label: '保存', value: 'save', content: '是否进行保存设置' },
+            { label: '自动补水', value: 'zdbs', content: '是否自动补水' },
+            { label: '喷头清洁', value: 'ptqj', content: '是否喷头清洁' },
+            { label: '沉淀清洁', value: 'cdqj', content: '是否沉淀清洁' },
+            { label: '开启喷雾', value: 'kqpw', content: '是否开启喷雾' },
+            { label: '停止喷雾', value: 'tzpw', content: '是否停止喷雾' },
           ],
         },
       ],
@@ -314,12 +314,12 @@ export const testConfigDustControl: Config[] = [
           readFrom: '',
           type: 'B',
           buttonList: [
-            { label: '自动运行', value: 'ZDYX' },
-            { label: '手动运行', value: 'SDYX' },
-            { label: '就地控制', value: 'JDKZ' },
-            { label: '远程控制', value: 'YCKZ' },
-            { label: '启动风机', value: 'QDKJ' },
-            { label: '停止风机', value: 'TZFJ' },
+            { label: '自动运行', value: 'ZDYX', content: '是否自动运行' },
+            { label: '手动运行', value: 'SDYX', content: '是否手动运行' },
+            { label: '就地控制', value: 'JDKZ', content: '是否就地控制' },
+            { label: '远程控制', value: 'YCKZ', content: '是否远程控制' },
+            { label: '启动风机', value: 'QDKJ', content: '是否启动风机' },
+            { label: '停止风机', value: 'TZFJ', content: '是否停止风机' },
           ],
         },
       ],

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

@@ -517,7 +517,6 @@ export const testConfigTSFire: Config[] = [
             options: [{}],
           },
           chartConfig: {
-            clear: true,
             type: 'line_smooth',
             readFrom: 'chartData',
             legend: { show: false },

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

@@ -2141,18 +2141,17 @@ export const testConfigFireGreen: Config[] = [
         items: [
           {
             name: 'gallery_list',
-            basis: '40%',
+            basis: '42%',
           },
           {
             name: 'blast_delta',
-            basis: '52%',
+            basis: '58%',
             overflow: false,
           },
         ],
       },
       board: [],
       chart: [],
-
       gallery: [],
       gallery_list: [
         {
@@ -2571,6 +2570,12 @@ export const testConfigVentRealtime: Config[] = [
             { show: true, name: '风量(m³/min)', position: 'left' },
             { show: true, name: '风速(m/s)', position: 'right' },
           ],
+          dataZoom: [
+            {
+              show: true,
+              end: 20,
+            },
+          ],
           series: [
             { readFrom: 'sys_wind', xprop: 'strinstallpos', yprop: 'readData.m3', label: '风量' },
             { readFrom: 'sys_wind', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
@@ -3088,7 +3093,7 @@ export const testConfigVentNew: Config[] = [
       background: {
         show: true,
         type: 'video',
-        link: '/video/gate.mp4',
+        link: '/video/fanLocal.webm',
       },
       layout: {
         direction: 'row',

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

@@ -86,7 +86,24 @@ export const testConfigWZFire: Config[] = [
         },
       ],
       preset: [],
-      // mock: WZfireMock,
+      mock: {
+        fireManageInfo: {
+          nyWarnLevel: '低',
+          wyWarnLevel: '高',
+          sysList: [
+            {
+              sysNamme: '1号系统',
+              warnLevel: '低',
+              maxVal: '30℃',
+            },
+            {
+              sysNamme: '2号系统',
+              warnLevel: '高',
+              maxVal: '30℃',
+            },
+          ],
+        },
+      },
     },
     showStyle: {
       size: 'width:450px;height:310px;',
@@ -174,7 +191,40 @@ export const testConfigWZFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: WZfireMock,
+      mock: {
+        arrayCount: [
+          {
+            val: 40,
+          },
+          {
+            val: 1,
+          },
+          {
+            val: 0,
+          },
+        ],
+        arrayFiber: {
+          strinstallpos: '带式传输机A01',
+          fibreTemperatureArr: [
+            {
+              pos: 1,
+              value: 20,
+            },
+            {
+              pos: 2,
+              value: 23,
+            },
+            {
+              pos: 3,
+              value: 14,
+            },
+            {
+              pos: 4,
+              value: 20,
+            },
+          ],
+        },
+      },
     },
     showStyle: {
       size: 'width:450px;height:430px;',
@@ -238,7 +288,77 @@ export const testConfigWZFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: WZfireMock,
+      mock: {
+        arrayFiber: {
+          strinstallpos: '光纤测温A01',
+          fibreTemperatureArr: [
+            {
+              pos: 'A1',
+              value: 20,
+            },
+            {
+              pos: 'A2',
+              value: 23,
+            },
+            {
+              pos: 'A3',
+              value: 22,
+            },
+            {
+              pos: 'A4',
+              value: 22,
+            },
+            {
+              pos: 'B1',
+              value: 21,
+            },
+            {
+              pos: 'B2',
+              value: 22,
+            },
+            {
+              pos: 'B3',
+              value: 20,
+            },
+            {
+              pos: 'B4',
+              value: 23,
+            },
+            {
+              pos: 'C1',
+              value: 22,
+            },
+            {
+              pos: 'C2',
+              value: 22,
+            },
+            {
+              pos: 'C3',
+              value: 21,
+            },
+            {
+              pos: 'C4',
+              value: 22,
+            },
+            {
+              pos: 'D1',
+              value: 20,
+            },
+            {
+              pos: 'D2',
+              value: 23,
+            },
+            {
+              pos: 'D3',
+              value: 22,
+            },
+            {
+              pos: 'D4',
+              value: 22,
+            },
+          ],
+        },
+      },
     },
     showStyle: {
       size: 'width:1000px;height:300px;',
@@ -308,7 +428,25 @@ export const testConfigWZFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: WZfireMock,
+      mock: {
+        sensorArray: [
+          {
+            strinstallpos: '硐室A',
+            value: '正常',
+            strname: '烟雾探测器',
+          },
+          {
+            strinstallpos: '硐室B',
+            value: '正常',
+            strname: '烟雾探测器',
+          },
+          {
+            strinstallpos: '硐室C',
+            value: '正常',
+            strname: '烟雾探测器',
+          },
+        ],
+      },
     },
     showStyle: {
       size: 'width:450px;height:230px;',
@@ -483,7 +621,30 @@ export const testConfigWZFire: Config[] = [
       list: [],
       complex_list: [],
       preset: [],
-      // mock: WZfireMock,
+      mock: {
+        aqjkArray: [
+          {
+            strinstallpos: '安全监控A',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+          {
+            strinstallpos: '安全监控B',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+          {
+            strinstallpos: '安全监控C',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+          {
+            strinstallpos: '安全监控D',
+            nowVal: '33',
+            warnLevel: '低',
+          },
+        ],
+      },
     },
     showStyle: {
       size: 'width:450px;height:260px;',
@@ -493,6 +654,7 @@ export const testConfigWZFire: Config[] = [
   },
 ];
 
+/** 三元可配置首页配置示例 */
 export const testConfigSY: Config[] = [
   {
     deviceType: 'fanmain',
@@ -518,7 +680,7 @@ export const testConfigSY: Config[] = [
       background: {
         show: true,
         type: 'video',
-        link: '/video/mainFan.mp4',
+        link: '/video/fanLocal.webm',
       },
       layout: {
         direction: 'column',
@@ -563,7 +725,7 @@ export const testConfigSY: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
+      size: 'width:450px;height:280px;',
       version: '普通版',
       position: 'top:60px;left:0;',
     },
@@ -592,7 +754,7 @@ export const testConfigSY: Config[] = [
       background: {
         show: true,
         type: 'video',
-        link: '/video/fanLocal.mp4',
+        link: '/video/fanLocal.webm',
       },
       layout: {
         direction: 'column',
@@ -654,7 +816,7 @@ export const testConfigSY: Config[] = [
       background: {
         show: true,
         type: 'video',
-        link: '/video/gate.mp4',
+        link: '/video/fanLocal.webm',
       },
       layout: {
         direction: 'row',
@@ -671,7 +833,7 @@ export const testConfigSY: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gate_xinJianFuXieJin',
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
+      size: 'width:450px;height:280px;',
       version: '普通版',
       position: 'top:640px;left:0;',
     },
@@ -724,6 +886,12 @@ export const testConfigSY: Config[] = [
             { show: true, name: '风量(m³/min)', position: 'left' },
             { show: true, name: '风速(m/s)', position: 'right' },
           ],
+          dataZoom: [
+            {
+              show: true,
+              end: 20,
+            },
+          ],
           series: [
             { readFrom: 'sys_wind', xprop: 'strinstallpos', yprop: 'readData.m3', label: '风量' },
             { readFrom: 'sys_wind', xprop: 'strinstallpos', yprop: 'readData.va', label: '风速' },
@@ -813,7 +981,7 @@ export const testConfigSY: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_majorpath',
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
+      size: 'width:450px;height:280px;',
       version: '普通版',
       position: 'top:60px;right:0;',
     },
@@ -896,7 +1064,7 @@ export const testConfigSY: Config[] = [
       to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=sys_surface_caimei&deviceid=${deviceID}',
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
+      size: 'width:450px;height:280px;',
       version: '普通版',
       position: 'top:350px;right:0;',
     },
@@ -980,7 +1148,594 @@ export const testConfigSY: Config[] = [
       to: '/monitorChannel/monitor-alarm-home',
     },
     showStyle: {
-      size: 'width:470px;height:280px;',
+      size: 'width:450px;height:280px;',
+      version: '普通版',
+      position: 'top:640px;right:0;',
+    },
+  },
+];
+
+export const testConfigSDG: Config[] = [
+  {
+    deviceType: '',
+    pageType: 'vent',
+    moduleName: '智能均压风机',
+    moduleData: {
+      to: '/monitorChannel/monitor-fanlocal?deviceType=fanlocal',
+      list: [],
+      board: [
+        {
+          type: 'R',
+          items: [
+            {
+              label: '主机状态',
+              value: '停机',
+            },
+            {
+              label: '运行频率(Hz)',
+              value: '0.00',
+            },
+            {
+              label: '输出电压(V)',
+              value: '0.00',
+            },
+            {
+              label: '备机状态',
+              value: '停机',
+            },
+            {
+              label: '运行频率(Hz)',
+              value: '0.00',
+            },
+            {
+              label: '输出电压(V)',
+              value: '0.00',
+            },
+          ],
+          layout: 'val-top',
+          readFrom: '',
+        },
+      ],
+      chart: [],
+      table: [],
+      header: {
+        show: false,
+        slot: {
+          show: true,
+          trans: {
+            '0': '离线',
+            '1': '正常',
+          },
+          value: '网络状态：${netStatus}',
+        },
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+      },
+      layout: {
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
+        direction: 'row',
+      },
+      preset: [],
+      gallery: [],
+      background: {
+        link: '',
+        show: false,
+        type: 'image',
+      },
+      complex_list: [],
+      gallery_list: [],
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '普通版',
+      position: 'top:350px;left:0;',
+    },
+  },
+  {
+    deviceType: 'modelsensor',
+    pageType: 'vent',
+    moduleName: '大气压智能监测预警调控',
+    moduleData: {
+      to: '/monitorChannel/monitor-sensorMonitor',
+      list: [],
+      board: [
+        {
+          type: 'N',
+          items: [
+            {
+              label: '气压(Pa)',
+              value: '${readData.pa}',
+            },
+            {
+              label: '温度(℃)',
+              value: '${readData.temperature}',
+            },
+            {
+              label: '相对湿度(%)',
+              value: '${readData.humidity}',
+            },
+            {
+              label: '差压(Pa)',
+              value: '${readData.dp}',
+            },
+            {
+              label: '网络状态',
+              trans: {
+                '0': '离线',
+                '1': '正常',
+              },
+              value: '${netStatus}',
+            },
+          ],
+          layout: 'label-top',
+          readFrom: '',
+        },
+      ],
+      chart: [],
+      table: [],
+      header: {
+        show: true,
+        slot: {
+          show: false,
+          value: '',
+        },
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+      },
+      layout: {
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
+        direction: 'row',
+      },
+      preset: [],
+      gallery: [],
+      background: {
+        link: '/video/gate.mp4',
+        show: false,
+        type: 'video',
+      },
+      complex_list: [],
+      gallery_list: [],
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '普通版',
+      position: 'top:640px;left:0;',
+    },
+  },
+  {
+    deviceType: 'gate',
+    pageType: 'vent',
+    moduleName: '平衡风门',
+    moduleData: {
+      to: '/monitorChannel/monitor-gate?deviceType=gate',
+      list: [
+        {
+          type: 'R',
+          items: [
+            {
+              label: '前门状态',
+              value: '${readData.frontGateOpen_str}',
+            },
+            {
+              label: '中门状态',
+              value: '${readData.midGateOpen_str}',
+            },
+            {
+              label: '后门状态',
+              value: '${readData.rearGateOpen_str}',
+            },
+            {
+              label: '网络状态',
+              trans: {
+                '0': '离线',
+                '1': '正常',
+              },
+              value: '${netStatus}',
+            },
+          ],
+          readFrom: '',
+        },
+      ],
+      board: [],
+      chart: [],
+      table: [],
+      header: {
+        show: true,
+        slot: {
+          show: false,
+          value: '',
+        },
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+      },
+      layout: {
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+          },
+        ],
+        direction: 'column',
+      },
+      preset: [],
+      gallery: [],
+      background: {
+        link: '',
+        show: false,
+        type: 'image',
+      },
+      complex_list: [],
+      gallery_list: [],
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '普通版',
+      position: 'top:60px;left:0;',
+    },
+  },
+  {
+    deviceType: 'windrect',
+    pageType: 'vent',
+    moduleName: '风量监测',
+    moduleData: {
+      to: '/monitorChannel/monitor-windrect?deviceType=windrect',
+      list: [],
+      board: [],
+      chart: [
+        {
+          type: 'bar',
+          xAxis: [
+            {
+              show: true,
+            },
+          ],
+          yAxis: [
+            {
+              name: '风量(m³/min)',
+              show: true,
+              position: 'left',
+            },
+            {
+              name: '风速(m/s)',
+              show: true,
+              position: 'right',
+            },
+          ],
+          legend: {
+            show: true,
+          },
+          dataZoom: [
+            {
+              show: true,
+              end: 20,
+            },
+          ],
+          series: [
+            {
+              label: '风量',
+              xprop: 'strinstallpos',
+              yprop: 'readData.m3',
+              readFrom: 'windrect',
+            },
+            {
+              label: '风速',
+              xprop: 'strinstallpos',
+              yprop: 'readData.va',
+              readFrom: 'windrect',
+            },
+          ],
+          readFrom: '',
+        },
+      ],
+      table: [],
+      header: {
+        show: false,
+        slot: {
+          show: false,
+          value: '',
+        },
+        readFrom: '',
+        selector: {
+          show: false,
+          value: '',
+        },
+      },
+      layout: {
+        items: [
+          {
+            name: 'chart',
+            basis: '100%',
+          },
+        ],
+        direction: 'row',
+      },
+      preset: [],
+      gallery: [],
+      background: {
+        link: '',
+        show: false,
+        type: 'video',
+      },
+      complex_list: [],
+      gallery_list: [],
+    },
+    showStyle: {
+      size: 'width:1000px;height:280px;',
+      version: '普通版',
+      position: 'top:640px;left:460px;',
+    },
+  },
+  {
+    deviceType: 'window',
+    pageType: 'vent',
+    moduleName: '自动风窗',
+    moduleData: {
+      to: '/monitorChannel/monitor-window?deviceType=window',
+      list: [
+        {
+          type: 'S',
+          items: [
+            {
+              label: '网络状态',
+              trans: {
+                '0': '离线',
+                '1': '正常',
+              },
+              value: '${netStatus}',
+            },
+            {
+              label: '最大面积(㎡)',
+              value: '${maxarea}',
+            },
+            {
+              label: 'A窗面积(㎡)',
+              value: '${readData.forntArea}',
+            },
+            {
+              label: 'A窗角度',
+              value: '${readData.frontPresentValue}',
+            },
+            {
+              label: 'B窗面积(㎡)',
+              value: '${readData.middleArea}',
+            },
+            {
+              label: 'B窗角度',
+              value: '${readData.middlePresentValue}',
+            },
+            {
+              label: 'C窗面积(㎡)',
+              value: '${readData.rearArea}',
+            },
+            {
+              label: 'C窗角度',
+              value: '${readData.rearPresentValue}',
+            },
+          ],
+          readFrom: '',
+        },
+      ],
+      board: [],
+      chart: [],
+      table: [],
+      header: {
+        show: true,
+        slot: {
+          show: false,
+          value: '',
+        },
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+      },
+      layout: {
+        items: [
+          {
+            name: 'list',
+            basis: '100%',
+          },
+        ],
+        direction: 'column',
+      },
+      preset: [],
+      gallery: [],
+      background: {
+        link: '',
+        show: false,
+        type: 'image',
+      },
+      complex_list: [],
+      gallery_list: [],
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '普通版',
+      position: 'top:60px;right:0;',
+    },
+  },
+  {
+    deviceType: 'gaspatrol',
+    pageType: 'vent',
+    moduleName: '瓦斯巡检',
+    moduleData: {
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=gaspatrol',
+      list: [],
+      board: [
+        {
+          type: 'T',
+          items: [
+            {
+              label: '一氧化碳(ppm)',
+              value: '${readData.co}',
+            },
+            {
+              label: '甲烷(%)',
+              value: '${readData.ch4}',
+            },
+            {
+              label: '氧气(%)',
+              value: '${readData.o2}',
+            },
+            {
+              label: '温度(℃)',
+              value: '${readData.temperature}',
+            },
+            {
+              label: '湿度(%)',
+              value: '${readData.humidity}',
+            },
+            {
+              label: '二氧化碳(%)',
+              value: '${readData.co2}',
+            },
+          ],
+          layout: 'label-top',
+          readFrom: '',
+        },
+      ],
+      chart: [],
+      table: [],
+      header: {
+        show: true,
+        slot: {
+          show: true,
+          trans: {
+            '0': '离线',
+            '1': '正常',
+          },
+          value: '网络状态：${netStatus}',
+        },
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+      },
+      layout: {
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
+        direction: 'row',
+      },
+      preset: [],
+      gallery: [],
+      background: {
+        link: '/video/gate.mp4',
+        show: false,
+        type: 'video',
+      },
+      complex_list: [],
+      gallery_list: [],
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+      version: '普通版',
+      position: 'top:350px;right:0;',
+    },
+  },
+  {
+    deviceType: 'bundletube',
+    pageType: 'vent',
+    moduleName: '束管监测',
+    moduleData: {
+      to: '/micro-vent-3dModal/dashboard/analysis?type=tunMonitor&deviceType=bundletube',
+      list: [],
+      board: [
+        {
+          type: 'N',
+          items: [
+            {
+              label: '一氧化碳(%)',
+              value: '${readData.coval}',
+            },
+            {
+              label: '甲烷(%)',
+              value: '${readData.gasval}',
+            },
+            {
+              label: '氧气(%)',
+              value: '${readData.o2val}',
+            },
+            {
+              label: '氮气(%)',
+              value: '${readData.n2val}',
+            },
+            {
+              label: '二氧化碳(%)',
+              value: '${readData.co2val}',
+            },
+            {
+              label: '网络状态',
+              trans: {
+                '0': '离线',
+                '1': '正常',
+              },
+              value: '${netStatus}',
+            },
+          ],
+          layout: 'label-top',
+          readFrom: '',
+        },
+      ],
+      chart: [],
+      table: [],
+      header: {
+        show: true,
+        slot: {
+          show: false,
+          value: '',
+        },
+        readFrom: '',
+        selector: {
+          show: true,
+          value: '${strinstallpos}',
+        },
+      },
+      layout: {
+        items: [
+          {
+            name: 'board',
+            basis: '100%',
+          },
+        ],
+        direction: 'row',
+      },
+      preset: [],
+      gallery: [],
+      background: {
+        link: '/video/gate.mp4',
+        show: false,
+        type: 'video',
+      },
+      complex_list: [],
+      gallery_list: [],
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
       version: '普通版',
       position: 'top:640px;right:0;',
     },

src/views/vent/home/configurable/dust-green.vue

@@ -3,253 +3,264 @@
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
       <div class="main-container">
-        <ModuleOriginal 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="data"
-          :visible="true" />
+        <ModuleOriginal
+          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="data"
+          :visible="true"
+        />
         <div class="left-area"></div>
         <div class="right-area"></div>
         <div class="bottom-area"></div>
       </div>
     </template>
+    <div style="width: 1020px; height: 530px; position: absolute; left: 436px; top: 0">
+      <VentModal />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleOriginal from './components/ModuleOriginal-green.vue';
-// import { list } from './configurable.api';
-import { useRoute, useRouter } from 'vue-router';
-import { useGlobSetting } from '/@/hooks/setting';
-import { BDDustMock } from './mock';
-import { testConfigDustGreen } from './configurable.data';
-
-const { title = '智能通风管控系统' } = useGlobSetting();
-const { configs, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage(title);
-const route = useRoute();
-let interval: number | undefined;
-// let configs = ref<any[]>([]);
-
-// let configsLeft = computed(() => {
-//   return configs.value.filter((v) => v.showStyle.position.includes('top') && v.showStyle.position.includes('left'));
-// });
-// let configsBottom = computed(() => {
-//   return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
-// });
-// let configsRight = computed(() => {
-//   return configs.value.filter((v) => v.showStyle.position.includes('right'));
-// });
-// function refresh() {
-//   fetchConfigs('dust-green').then(() => {
-//     console.log('debug r.', configs.value, configsBottom.value, isOriginal)
-//     // configs.value = testConfigDustGreen
-//     // updateEnhancedConfigs(configs.value);
-
-//     // 测风装置	windrect
-//     // 自动风窗	window
-//     // 自动风门	gate
-//     // 传感器	modelsensor
-//     // 局部通风机	fanlocal
-//     // 主通风机	fanmain
-//     // 密闭	obfurage
-//     // 安全监控	safetymonitor
-//     // 光纤测温	fiber
-//     // 束管监测	bundletube
-//     // 制氮	nitrogen
-//     // 制浆	pulping
-//     // 喷淋	spray
-//     // 喷粉	dustdev
-//     // 喷雾设备	atomizing
-//     // 除尘风机	dedustefan
-//     // 粉尘传感器	dustsensor
-//     // 转载点	transferpoint
-//     // 瓦斯抽采泵	pump
-//     // 粉尘	dusting
-//     // 瓦斯监测	gasmonitor
-//     // 球阀	ballvalve
-//     // 压风机	forcFan
-//     // 瓦斯巡检	gaspatrol
-//     // 防火门	firedoor
-//     // 隔爆设施	explosionProof
-//     // 瓦斯管道阀门	gasvalve
-//     list({
-//       types: configs.value
-//         .filter((e) => e.deviceType)
-//         .map((e) => e.deviceType)
-//         .join(','),
-//     }).then(updateData);
-//   });
-// }
-
-// function initInterval() {
-//   setInterval(() => {
-//     list({
-//       types: configs.value
-//         .filter((e) => e.deviceType)
-//         .map((e) => e.deviceType)
-//         .join(','),
-//     }).then(updateData);
-//   }, 60000);
-// }
-
-// watch(
-//   () => route.query,
-//   () => {
-//     if (route.query.deviceType) {
-//       // 仅需要展示子应用，模拟 unmounted
-//       clearInterval(interval);
-//     } else {
-//       // 模拟 mounted
-//       refresh();
-//       initInterval();
-//     }
-//   }
-// );
-
-onMounted(() => {
-  fetchConfigs('dust-green').then(() => {
-    configs.value = testConfigDustGreen;
-    updateEnhancedConfigs(configs.value);
-    Promise.resolve(BDDustMock).then(updateData);
-    // getHomeData({}).then(updateData);
+  import { onMounted, onUnmounted } from 'vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import ModuleOriginal from './components/ModuleOriginal-green.vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  // import { list } from './configurable.api';
+  import { useRoute } from 'vue-router';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { BDDustMock } from './mock';
+  import { testConfigDustGreen } from './configurable.data';
+
+  const { title = '智能通风管控系统' } = useGlobSetting();
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { data, updateData, updateEnhancedConfigs } = useInitPage(title);
+  const route = useRoute();
+  let interval: number | undefined;
+  // let configs = ref<any[]>([]);
+
+  // let configsLeft = computed(() => {
+  //   return configs.value.filter((v) => v.showStyle.position.includes('top') && v.showStyle.position.includes('left'));
+  // });
+  // let configsBottom = computed(() => {
+  //   return configs.value.filter((v) => v.showStyle.position.includes('bottom'));
+  // });
+  // let configsRight = computed(() => {
+  //   return configs.value.filter((v) => v.showStyle.position.includes('right'));
+  // });
+  // function refresh() {
+  //   fetchConfigs('dust-green').then(() => {
+  //     console.log('debug r.', configs.value, configsBottom.value, isOriginal)
+  //     // configs.value = testConfigDustGreen
+  //     // updateEnhancedConfigs(configs.value);
+
+  //     // 测风装置	windrect
+  //     // 自动风窗	window
+  //     // 自动风门	gate
+  //     // 传感器	modelsensor
+  //     // 局部通风机	fanlocal
+  //     // 主通风机	fanmain
+  //     // 密闭	obfurage
+  //     // 安全监控	safetymonitor
+  //     // 光纤测温	fiber
+  //     // 束管监测	bundletube
+  //     // 制氮	nitrogen
+  //     // 制浆	pulping
+  //     // 喷淋	spray
+  //     // 喷粉	dustdev
+  //     // 喷雾设备	atomizing
+  //     // 除尘风机	dedustefan
+  //     // 粉尘传感器	dustsensor
+  //     // 转载点	transferpoint
+  //     // 瓦斯抽采泵	pump
+  //     // 粉尘	dusting
+  //     // 瓦斯监测	gasmonitor
+  //     // 球阀	ballvalve
+  //     // 压风机	forcFan
+  //     // 瓦斯巡检	gaspatrol
+  //     // 防火门	firedoor
+  //     // 隔爆设施	explosionProof
+  //     // 瓦斯管道阀门	gasvalve
+  //     list({
+  //       types: configs.value
+  //         .filter((e) => e.deviceType)
+  //         .map((e) => e.deviceType)
+  //         .join(','),
+  //     }).then(updateData);
+  //   });
+  // }
+
+  // function initInterval() {
+  //   setInterval(() => {
+  //     list({
+  //       types: configs.value
+  //         .filter((e) => e.deviceType)
+  //         .map((e) => e.deviceType)
+  //         .join(','),
+  //     }).then(updateData);
+  //   }, 60000);
+  // }
+
+  // watch(
+  //   () => route.query,
+  //   () => {
+  //     if (route.query.deviceType) {
+  //       // 仅需要展示子应用，模拟 unmounted
+  //       clearInterval(interval);
+  //     } else {
+  //       // 模拟 mounted
+  //       refresh();
+  //       initInterval();
+  //     }
+  //   }
+  // );
+
+  onMounted(() => {
+    fetchConfigs('dust-green').then(() => {
+      configs.value = testConfigDustGreen;
+      updateEnhancedConfigs(configs.value);
+      Promise.resolve(BDDustMock).then(updateData);
+      // getHomeData({}).then(updateData);
+    });
+    // setInterval(() => {
+    //   getHomeData({}).then(updateData);
+    // }, 60000);
+  });
+
+  onUnmounted(() => {
+    clearInterval(interval);
   });
-  // setInterval(() => {
-  //   getHomeData({}).then(updateData);
-  // }, 60000);
-});
-
-onUnmounted(() => {
-  clearInterval(interval);
-});
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-
-@{theme-deepblue} {
-  .company-home {
-    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
-}
 
-.company-home {
-  --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-  --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
-  --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
-  --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+    }
+  }
 
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: #181b24;
+  .company-home {
+    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
+    --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
+    --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
+    --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
 
-  .main-container {
     width: 100%;
     height: 100%;
-    margin: 0px 15px;
+    color: @white;
+    position: relative;
+    background: #181b24;
 
-    .left-area {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 420px;
+    .main-container {
+      width: 100%;
       height: 100%;
-      padding: 15px;
-      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-      overflow-y: auto;
+      margin: 0px 15px;
+
+      .left-area {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 420px;
+        height: 100%;
+        padding: 15px;
+        background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        overflow-y: auto;
+      }
+
+      .bottom-area {
+        position: absolute;
+        left: 435px;
+        bottom: 0;
+        width: calc(100% - 435px);
+        height: 290px;
+        padding: 15px;
+        background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+      }
+
+      .right-area {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        width: 420px;
+        height: calc(100% - 305px);
+        padding: 15px 15px 0px 15px;
+        background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        overflow-y: auto;
+      }
     }
 
-    .bottom-area {
+    // .module-left {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   left: 0;
+    // }
+    // .module-right {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   right: 0;
+    // }
+    // .module-bottom {
+    //   position: absolute;
+    //   width: 1000px;
+    //   height: 280px;
+    // }
+    .module-dropdown {
+      padding: 5px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
       position: absolute;
-      left: 435px;
-      bottom: 0;
-      width: calc(100% - 435px);
-      height: 290px;
-      padding: 15px;
-      background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
+      top: 60px;
+      right: 480px;
     }
 
-    .right-area {
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
       position: absolute;
-      right: 0px;
-      top: 0px;
-      width: 420px;
-      height: calc(100% - 305px);
-      padding: 15px 15px 0px 15px;
-      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-      overflow-y: auto;
+      top: 70px;
+      right: 460px;
     }
-  }
-
-  // .module-left {
-  //   position: absolute;
-  //   width: 450px;
-  //   height: 280px;
-  //   left: 0;
-  // }
-  // .module-right {
-  //   position: absolute;
-  //   width: 450px;
-  //   height: 280px;
-  //   right: 0;
-  // }
-  // .module-bottom {
-  //   position: absolute;
-  //   width: 1000px;
-  //   height: 280px;
-  // }
-  .module-dropdown {
-    padding: 5px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 60px;
-    right: 480px;
-  }
 
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: @vent-configurable-dropdown;
+      border: none;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+    }
 
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: @vent-configurable-dropdown;
-    border: none;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-  }
+    .realtime-mode {
+      background-image: var(--image-monitor-realtime);
+    }
 
-  .realtime-mode {
-    background-image: var(--image-monitor-realtime);
+    .module-monitor-bar {
+      position: absolute;
+      top: 100px;
+      width: 1000px;
+      height: 200px;
+      left: calc(50% - 500px);
+    }
   }
 
-  .module-monitor-bar {
-    position: absolute;
-    top: 100px;
-    width: 1000px;
-    height: 200px;
-    left: calc(50% - 500px);
+  :deep(.loading-box) {
+    position: unset;
   }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

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

@@ -57,7 +57,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -75,7 +75,7 @@
   import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getDisHome } from './configurable.api';
   import { EyeFilled } from '@ant-design/icons-vue';
-  // import { testConfigBDDust } from './configurable.data.bd';
+  import { testConfigBDDust } from './configurable.data.bd';
   // import { getToken } from '/@/utils/auth';
 
   const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
@@ -86,7 +86,7 @@
   // }
   onMounted(() => {
     fetchConfigs('BD_dust').then(() => {
-      // configs.value = testConfigBDDust;
+      configs.value = testConfigBDDust;
 
       getDisHome({
         dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),

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

@@ -5,6 +5,17 @@
     <div class="top-bg">
       <div class="main-title">{{ mainTitle }}</div>
     </div>
+
+    <div id="dedust3D" style="width: 100%; height: 100%; position: absolute; overflow: hidden"> </div>
+    <div
+      v-show="!loading"
+      id="dedustCss"
+      style="width: 100%; height: 100%; position: absolute; pointer-events: none; overflow: hidden; z-index: 2; top: 0px; left: 0px"
+    >
+      <div id="dedustEnvA"> </div>
+      <div id="dedustEnvB"> </div>
+    </div>
+
     <!-- 渲染所有模块 -->
     <ModuleCommon
       v-for="cfg in cfgs"
@@ -19,25 +30,26 @@
   </div>
 </template>
 <script lang="ts" setup>
-  import { computed, onMounted, onUnmounted, ref } from 'vue';
+  import { computed, onMounted, onUnmounted, ref, provide } from 'vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import { testConfigDustControl } from './configurable.data.dustControl';
   import ModuleCommon from './components/ModuleCommon.vue';
+  import { mountedThree, destroy, setModelType } from '/@/views/vent/monitorManager/dedustMonitor/dedust.threejs';
+
   const cfgs = computed(() => configs.value);
+  const loading = ref(false);
   const { configs, fetchConfigs } = useInitConfigs();
   const { mainTitle, data } = useInitPage('除尘装置控制系统');
   let interval: ReturnType<typeof setInterval> | undefined;
   // 新增：获取容器DOM元素
   const dustControlContainer = ref<HTMLDivElement>();
-  const handleRadioChange = (event: Event) => {
-    // 类型断言，获取事件详情
-    const detail = (event as CustomEvent).detail;
-    if (detail) {
-      console.log('监听到radio切换：', detail.value);
-      // 这里处理业务逻辑
-    }
-  };
   onMounted(() => {
+    loading.value = true;
+    mountedThree('#dedust3D', ['#dedustCss', '#dedustEnvA', '#dedustEnvB']).then(() => {
+      setModelType('dedust').finally(() => {
+        loading.value = false;
+      });
+    });
     fetchConfigs('mine_fire').then(() => {
       configs.value = testConfigDustControl;
       // getDisHome({
@@ -49,18 +61,19 @@
       //   dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
       // }).then(updateData);
     }, 2000);
-    // 监听自定义原生事件
-    // 在容器上监听事件（事件会从radio组件冒泡到这里）
-    if (dustControlContainer.value) {
-      dustControlContainer.value.addEventListener('radio-value-change', handleRadioChange);
-    }
   });
-
+  // 提供处理函数（关键：跨层级传递给buttonList）
+  provide('handleButtonConfirm', (button) => {
+    console.log('祖父组件收到数据：', button);
+    // 对按钮事件进行处理
+  });
+  provide('handleRadioChange', (value) => {
+    console.log('祖父组件收到数据：', value);
+    // 对切换事件进行处理
+  });
   onUnmounted(() => {
+    destroy();
     clearInterval(interval);
-    if (dustControlContainer.value) {
-      dustControlContainer.value.removeEventListener('radio-value-change', handleRadioChange);
-    }
   });
 </script>
 <style lang="less" scoped>

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

@@ -32,158 +32,158 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted } from 'vue';
-// import { CaretDownOutlined } from '@ant-design/icons-vue';
-import NewNav from './components/originalNew/NewNav.vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleDustNew from './components/ModuleDustNew.vue';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-import { getDisHome } from './configurable.api';
-import { EyeFilled } from '@ant-design/icons-vue';
-import { testConfigNewDust } from './configurable.data.New';
-const cfgs = computed(() =>
-  configs.value.filter((_, index) => {
-    return index !== 4 && index !== 3;
-  })
-);
-const cfgA = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 3;
-  })
-);
-const cfgB = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 4;
-  })
-);
-const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData } = useInitPage('粉尘预警系统');
-let interval: number | undefined;
-onMounted(() => {
-  fetchConfigs('New_dust').then(() => {
-    configs.value = testConfigNewDust;
-    getDisHome({
-      dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
-    }).then(updateData);
+  import { onMounted, onUnmounted } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  import NewNav from './components/originalNew/NewNav.vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import ModuleDustNew from './components/ModuleDustNew.vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getDisHome } from './configurable.api';
+  import { EyeFilled } from '@ant-design/icons-vue';
+  import { testConfigNewDust } from './configurable.data.New';
+  // const cfgs = computed(() =>
+  //   configs.value.filter((_, index) => {
+  //     return index !== 4 && index !== 3;
+  //   })
+  // );
+  // const cfgA = computed<any>(() =>
+  //   configs.value.find((_, index) => {
+  //     return index === 3;
+  //   })
+  // );
+  // const cfgB = computed<any>(() =>
+  //   configs.value.find((_, index) => {
+  //     return index === 4;
+  //   })
+  // );
+  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('粉尘预警系统');
+  let interval: number | undefined;
+  onMounted(() => {
+    fetchConfigs('New_dust').then(() => {
+      configs.value = testConfigNewDust;
+      getDisHome({
+        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
+      }).then(updateData);
+    });
+    setInterval(() => {
+      getDisHome({
+        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
+      }).then(updateData);
+    }, 2000);
   });
-  setInterval(() => {
-    getDisHome({
-      dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
-    }).then(updateData);
-  }, 2000);
-});
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 
-function redirectTo(url) {
-  window.open(url);
-}
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-@{theme-deepblue} {
-  .company-home {
-    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
   }
-}
 
-.company-home {
-  --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+    }
+  }
 
-  .top-bg {
+  .company-home {
+    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
     width: 100%;
-    height: 56px;
-    background: var(--image-modal-top) no-repeat center;
-    position: absolute;
-    z-index: 1;
-    .main-title {
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+
+    .top-bg {
+      width: 100%;
       height: 56px;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      background: var(--image-modal-top) no-repeat center;
+      position: absolute;
+      z-index: 1;
+      .main-title {
+        height: 56px;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .top-nav {
+        position: absolute;
+        top: 0;
+        width: 880px;
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+      }
     }
-    .top-nav {
+    .left-t {
       position: absolute;
-      top: 0;
-      width: 880px;
+      width: 28%;
       height: 100%;
-      display: flex;
-      justify-content: flex-start;
+      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+      z-index: 0;
+    }
+    .right-t {
+      position: absolute;
+      width: 172%;
+      height: 100%;
+      background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+      z-index: 0;
+    }
+    // .module-left {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   left: 0;
+    // }
+    // .module-right {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   right: 0;
+    // }
+    // .module-bottom {
+    //   position: absolute;
+    //   width: 1000px;
+    //   height: 280px;
+    // }
+    .module-dropdown {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: @vent-configurable-dropdown;
+      border: none;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
     }
   }
-  .left-t {
-    position: absolute;
-    width: 28%;
-    height: 100%;
-    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-    z-index: 0;
-  }
-  .right-t {
-    position: absolute;
-    width: 172%;
-    height: 100%;
-    background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
-    z-index: 0;
-  }
-  // .module-left {
-  //   position: absolute;
-  //   width: 450px;
-  //   height: 280px;
-  //   left: 0;
-  // }
-  // .module-right {
-  //   position: absolute;
-  //   width: 450px;
-  //   height: 280px;
-  //   right: 0;
-  // }
-  // .module-bottom {
-  //   position: absolute;
-  //   width: 1000px;
-  //   height: 280px;
-  // }
-  .module-dropdown {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: @vent-configurable-dropdown;
-    border: none;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
+  :deep(.loading-box) {
+    position: unset;
   }
-}
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

src/views/vent/home/configurable/fire-green.vue

@@ -3,179 +3,186 @@
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
       <div class="main-container">
-        <ModuleOriginal 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="data"
-          :visible="true" />
-          <div class="left-area"></div>
-          <div class="right-area"></div>
-          <div class="bottom-area"></div>
+        <ModuleOriginal
+          v-for="(cfg, index) in configs"
+          :key="cfg.deviceType + index"
+          :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData"
+          :module-name="cfg.moduleName"
+          :device-type="cfg.deviceType"
+          :data="data"
+          :visible="true"
+        />
+        <div class="left-area"></div>
+        <div class="right-area"></div>
+        <div class="bottom-area"></div>
       </div>
     </template>
+
+    <div style="width: 1020px; height: 530px; position: absolute; left: 436px; top: 0">
+      <VentModal />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleOriginal from './components/ModuleOriginal-green.vue';
-
-import { useRoute, useRouter } from 'vue-router';
-import { useGlobSetting } from '/@/hooks/setting';
-// import { testConfigFireGreen } from './configurable.data';
-import { BDFireMock } from './mock';
-const { title = '智能通风管控系统' } = useGlobSetting();
-const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage(title);
-const route = useRoute();
-let interval: number | undefined;
-
-
-
-
-
-onMounted(() => {
-  fetchConfigs('fire-green').then(() => {
-    // configs.value = testConfigFireGreen;
-    updateEnhancedConfigs(configs.value);
+  import { onMounted, onUnmounted } from 'vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import ModuleOriginal from './components/ModuleOriginal-green.vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { useRoute } from 'vue-router';
+  import { useGlobSetting } from '/@/hooks/setting';
+  import { testConfigFireGreen } from './configurable.data';
+  import { BDFireMock } from './mock';
+  const { title = '智能通风管控系统' } = useGlobSetting();
+  const { configs, fetchConfigs } = useInitConfigs();
+  const { data, updateData } = useInitPage(title);
+  const route = useRoute();
+  let interval: number | undefined;
+
+  onMounted(() => {
+    fetchConfigs('fire-green').then(() => {
+      configs.value = testConfigFireGreen;
+      // updateEnhancedConfigs(configs.value);
+
+      Promise.resolve(BDFireMock).then(updateData);
+      // getHomeData({}).then(updateData);
+    });
+    // setInterval(() => {
+    //   getHomeData({}).then(updateData);
+    // }, 60000);
+  });
 
-    Promise.resolve(BDFireMock).then(updateData);
-    // getHomeData({}).then(updateData);
+  onUnmounted(() => {
+    clearInterval(interval);
   });
-  // setInterval(() => {
-  //   getHomeData({}).then(updateData);
-  // }, 60000);
-});
-
-onUnmounted(() => {
-  clearInterval(interval);
-});
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
+  }
 
-@{theme-deepblue} {
-  .company-home {
-    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+    }
   }
-}
-
-.company-home {
-  --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-  --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
-  --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
-  --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
-
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: #181b24;
-
-  .main-container {
-    width:100%;
+
+  .company-home {
+    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
+    --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
+    --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
+    --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
+
+    width: 100%;
     height: 100%;
-    margin: 0px 15px;
-    .left-area {
-      position: absolute;
-      left: 0;
-      top: 0;
-      width: 420px;
+    color: @white;
+    position: relative;
+    background: #181b24;
+
+    .main-container {
+      width: 100%;
       height: 100%;
-      padding: 15px;
-      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-      overflow-y: auto;
+      margin: 0px 15px;
+      .left-area {
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 420px;
+        height: 100%;
+        padding: 15px;
+        background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        overflow-y: auto;
+      }
+
+      .bottom-area {
+        position: absolute;
+        left: 435px;
+        bottom: 0;
+        width: calc(100% - 435px);
+        height: 290px;
+        padding: 15px;
+        background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+      }
+
+      .right-area {
+        position: absolute;
+        right: 0px;
+        top: 0px;
+        width: 420px;
+        height: calc(100% - 305px);
+        padding: 15px 15px 0px 15px;
+        background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
+        background-size: 100% 100%;
+        box-sizing: border-box;
+        overflow-y: auto;
+      }
     }
 
-    .bottom-area {
+    // .module-left {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   left: 0;
+    // }
+    // .module-right {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   right: 0;
+    // }
+    // .module-bottom {
+    //   position: absolute;
+    //   width: 1000px;
+    //   height: 280px;
+    // }
+    .module-dropdown {
+      padding: 5px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
       position: absolute;
-      left: 435px;
-      bottom: 0;
-      width: calc(100% - 435px);
-      height: 290px;
-      padding: 15px;
-      background: url('../../../../assets/images/home-green/green-bd-bottom.png') no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
+      top: 60px;
+      right: 480px;
     }
 
-    .right-area {
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
       position: absolute;
-      right: 0px;
-      top: 0px;
-      width: 420px;
-      height: calc(100% - 305px);
-      padding: 15px 15px 0px 15px;
-      background: url('../../../../assets/images/home-green/green-bd-left.png') no-repeat;
-      background-size: 100% 100%;
-      box-sizing: border-box;
-      overflow-y: auto;
+      top: 70px;
+      right: 460px;
     }
-  }
 
-  // .module-left {
-  //   position: absolute;
-  //   width: 450px;
-  //   height: 280px;
-  //   left: 0;
-  // }
-  // .module-right {
-  //   position: absolute;
-  //   width: 450px;
-  //   height: 280px;
-  //   right: 0;
-  // }
-  // .module-bottom {
-  //   position: absolute;
-  //   width: 1000px;
-  //   height: 280px;
-  // }
-  .module-dropdown {
-    padding: 5px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 60px;
-    right: 480px;
-  }
-
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: @vent-configurable-dropdown;
+      border: none;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+    }
 
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: @vent-configurable-dropdown;
-    border: none;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-  }
+    .realtime-mode {
+      background-image: var(--image-monitor-realtime);
+    }
 
-  .realtime-mode {
-    background-image: var(--image-monitor-realtime);
+    .module-monitor-bar {
+      position: absolute;
+      top: 100px;
+      width: 1000px;
+      height: 200px;
+      left: calc(50% - 500px);
+    }
   }
 
-  .module-monitor-bar {
-    position: absolute;
-    top: 100px;
-    width: 1000px;
-    height: 200px;
-    left: calc(50% - 500px);
+  :deep(.loading-box) {
+    position: unset;
   }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

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

@@ -57,7 +57,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
@@ -78,7 +78,7 @@
   // import { getHomeData } from './configurable.api';
   import { BDFireMock } from './mock';
   import { useRoute } from 'vue-router';
-  // import { testConfigFire } from './configurable.data';
+  import { testConfigFire } from './configurable.data';
 
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
   const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能防灭火管控系统');
@@ -87,7 +87,7 @@
 
   onMounted(() => {
     fetchConfigs('fire').then(() => {
-      // configs.value = testConfigFire;
+      configs.value = testConfigFire;
       updateEnhancedConfigs(configs.value);
 
       Promise.resolve(BDFireMock).then(updateData);

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

@@ -86,7 +86,7 @@
   import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getDisHome } from './configurable.api';
   import { EyeFilled } from '@ant-design/icons-vue';
-  // import { testConfigBDFire } from './configurable.data.bd';
+  import { testConfigBDFire } from './configurable.data.bd';
   // import { getToken } from '/@/utils/auth';
 
   const cfgs = computed(() =>
@@ -112,7 +112,7 @@
   // }
   onMounted(() => {
     fetchConfigs('BD_fire').then(() => {
-      // configs.value = testConfigBDFire;
+      configs.value = testConfigBDFire;
 
       getDisHome({
         dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),

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

@@ -4,7 +4,7 @@
     <!-- 顶部标题样式块 -->
     <div class="top-bg">
       <!-- <div class="main-title">{{ mainTitle }}</div> -->
-      <NewNav :Title="mainTitle" />
+      <NewNav disabled :Title="mainTitle" />
     </div>
     <!-- 中间样式块 -->
     <div class="center-info-bar">
@@ -45,6 +45,7 @@
       :device-type="cfg.deviceType"
       :data="data"
       :visible="true"
+      style="z-index: 20"
     />
     <ModuleBDDual
       v-if="cfgA && cfgB"
@@ -58,6 +59,9 @@
       :data="data"
       :visible="true"
     />
+    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0">
+      <VentModal />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -68,6 +72,7 @@
   import NewNav from './components/originalNew/NewNavFire.vue';
   import { getDisHome } from './configurable.api';
   import { testConfigMineFire } from './configurable.data.mine';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
 
   const cfgs = computed(() => configs.value.filter((_, index) => index !== 6 && index !== 7));
   const cfgA = computed<any>(() => configs.value[6]);

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

@@ -51,173 +51,173 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted } from 'vue';
-// import { CaretDownOutlined } from '@ant-design/icons-vue';
-import NewNav from './components/originalNew/NewNavFire.vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleNew from './components/ModuleNew.vue';
-import ModuleFireNew from './components/ModuleFireNew.vue';
-import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-import { BDFireMock } from './mock';
-import { getDisHome } from './configurable.api';
-import { EyeFilled } from '@ant-design/icons-vue';
-import { testConfigNewFire } from './configurable.data.New';
-const cfgs = computed(() =>
-  configs.value.filter((_, index) => {
-    return index !== 4 && index !== 3 && index !== 5;
-  })
-);
-const cfgA = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 3;
-  })
-);
-const cfgB = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 4;
-  })
-);
-const cfgTop = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 5;
-  })
-);
-const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage('火灾预警系统');
-let interval: number | undefined;
-onMounted(() => {
-  // fetchConfigs('New_fire').then(() => {
-  //   configs.value = testConfigNewFire;
-  //   Promise.resolve(BDFireMock).then(updateData);
-  // });
-  // setInterval(() => {
-  //   Promise.resolve(BDFireMock).then(updateData);
-  // }, 2000);
-  fetchConfigs('New_fire').then(() => {
-    configs.value = testConfigNewFire;
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
+  import { computed, onMounted, onUnmounted } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  import NewNav from './components/originalNew/NewNavFire.vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import ModuleNew from './components/ModuleNew.vue';
+  import ModuleFireNew from './components/ModuleFireNew.vue';
+  import ModuleFireNewDual from './components/ModuleFireNewDual.vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  // import { BDFireMock } from './mock';
+  import { getDisHome } from './configurable.api';
+  // import { EyeFilled } from '@ant-design/icons-vue';
+  import { testConfigNewFire } from './configurable.data.New';
+  const cfgs = computed(() =>
+    configs.value.filter((_, index) => {
+      return index !== 4 && index !== 3 && index !== 5;
+    })
+  );
+  const cfgA = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 3;
+    })
+  );
+  const cfgB = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 4;
+    })
+  );
+  const cfgTop = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 5;
+    })
+  );
+  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData /** updateEnhancedConfigs */ } = useInitPage('火灾预警系统');
+  let interval: number | undefined;
+  onMounted(() => {
+    // fetchConfigs('New_fire').then(() => {
+    //   configs.value = testConfigNewFire;
+    //   Promise.resolve(BDFireMock).then(updateData);
+    // });
+    // setInterval(() => {
+    //   Promise.resolve(BDFireMock).then(updateData);
+    // }, 2000);
+    fetchConfigs('New_fire').then(() => {
+      configs.value = testConfigNewFire;
+      getDisHome({
+        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+      }).then(updateData);
+    });
+    setInterval(() => {
+      getDisHome({
+        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+      }).then(updateData);
+    }, 2000);
   });
-  setInterval(() => {
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
-  }, 2000);
-});
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 
-function redirectTo(url) {
-  window.open(url);
-}
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
-
-@{theme-deepblue} {
-  .company-home {
-    --image-modal-top: url('@/assets/images/fireNew/1.png');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
   }
-}
 
-.company-home {
-  --image-modal-top: url('@/assets/images/fireNew/1.png');
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: url('@/assets/images/fireNew/FireBj.png') no-repeat center;
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/fireNew/1.png');
+    }
+  }
 
-  .top-bg {
+  .company-home {
+    --image-modal-top: url('@/assets/images/fireNew/1.png');
     width: 100%;
-    height: 56px;
-    background: var(--image-modal-top) no-repeat center;
-    position: absolute;
-    z-index: 1;
-    .main-title {
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: url('@/assets/images/fireNew/FireBj.png') no-repeat center;
+
+    .top-bg {
+      width: 100%;
       height: 56px;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      background: var(--image-modal-top) no-repeat center;
+      position: absolute;
+      z-index: 1;
+      .main-title {
+        height: 56px;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .top-nav {
+        position: absolute;
+        top: 0;
+        width: 880px;
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+      }
     }
-    .top-nav {
+    .left-t {
       position: absolute;
-      top: 0;
-      width: 880px;
+      width: 28%;
       height: 100%;
-      display: flex;
-      justify-content: flex-start;
+      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+      z-index: 0;
+    }
+    .right-t {
+      position: absolute;
+      width: 172%;
+      height: 100%;
+      background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+      z-index: 0;
+    }
+    // .module-left {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   left: 0;
+    // }
+    // .module-right {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   right: 0;
+    // }
+    // .module-bottom {
+    //   position: absolute;
+    //   width: 1000px;
+    //   height: 280px;
+    // }
+    .module-dropdown {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: @vent-configurable-dropdown;
+      border: none;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
     }
   }
-  .left-t {
-    position: absolute;
-    width: 28%;
-    height: 100%;
-    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-    z-index: 0;
-  }
-  .right-t {
-    position: absolute;
-    width: 172%;
-    height: 100%;
-    background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
-    z-index: 0;
-  }
-  // .module-left {
-  //   position: absolute;
-  //   width: 450px;
-  //   height: 280px;
-  //   left: 0;
-  // }
-  // .module-right {
-  //   position: absolute;
-  //   width: 450px;
-  //   height: 280px;
-  //   right: 0;
-  // }
-  // .module-bottom {
-  //   position: absolute;
-  //   width: 1000px;
-  //   height: 280px;
-  // }
-  .module-dropdown {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: @vent-configurable-dropdown;
-    border: none;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
+  :deep(.loading-box) {
+    position: unset;
   }
-}
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

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

@@ -67,6 +67,7 @@
       :visible="true"
       :common-title="commonTitle"
     />
+    <Three3D :modal-name="modalName" />
   </div>
 </template>
 <script lang="ts" setup>
@@ -76,7 +77,9 @@
   import { testConfigTSFire } from './configurable.data.tashan';
   import ModuleCommon from './components/ModuleCommon.vue';
   import ModuleCommonDual from './components/ModuleCommonDual.vue';
+  import Three3D from './components/three3D.vue';
 
+  const modalName = ref('workFace11');
   const cfgs = computed(() => configs.value.filter((_, index) => index !== 6 && index !== 7 && index !== 8));
   const cfgA = computed<any>(() => configs.value[6]);
   const cfgB = computed<any>(() => configs.value[7]);

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

@@ -35,12 +35,12 @@
     </div>
     <div class="right-t">
       <div class="tcontent-l">
-        <div>智能</div>
-        <div>灌浆系统</div>
+        <div>智能灌浆系统</div>
+        <div></div>
       </div>
       <div class="tcontent-r">
-        <div>智能</div>
-        <div>注氟系统</div>
+        <div>智能注氟系统</div>
+        <div></div>
       </div>
     </div>
     <ModuleBD
@@ -66,7 +66,7 @@
   import ModuleBD from './components/ModuleBD.vue';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getDisHome } from './configurable.api';
-  // import { testConfigWZFire } from './configurable.data.wz';
+  import { testConfigWZFire } from './configurable.data.wz';
   // import { getToken } from '/@/utils/auth';
 
   const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
@@ -77,7 +77,7 @@
   // }
   onMounted(() => {
     fetchConfigs('WZ_fire').then(() => {
-      // configs.value = testConfigWZFire;
+      configs.value = testConfigWZFire;
       updateEnhancedConfigs(configs.value);
 
       getDisHome({

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

@@ -53,7 +53,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -1,9 +1,9 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="company-home">
-    <!-- <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
       <VentModal />
-    </div> -->
+    </div>
     <div v-if="!route.query.embed" class="top-bg">
       <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
       <div class="main-title">{{ mainTitle }}</div>
@@ -57,7 +57,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
@@ -74,24 +74,28 @@
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
   // import { useRoute } from 'vue-router';
-  // import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getHomeData } from './configurable.api';
   import { useRoute } from 'vue-router';
-  import { testConfigVent } from './configurable.data';
+  // import { testConfigVent } from './configurable.data';
+  import { useGlobSetting } from '/@/hooks/setting';
 
-  const { configs, isOriginal, isCommon } = useInitConfigs();
-  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage('智能通风管控系统');
+  const { title } = useGlobSetting();
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage(title);
   const route = useRoute();
   let interval: number | undefined;
 
   onMounted(() => {
-    configs.value = testConfigVent;
-    updateEnhancedConfigs(configs.value);
+    fetchConfigs('demo_page').then((res) => {
+      configs.value = res;
+      updateEnhancedConfigs(configs.value);
 
-    getHomeData({}).then(updateData);
-    setInterval(() => {
       getHomeData({}).then(updateData);
-    }, 60000);
+      setInterval(() => {
+        getHomeData({}).then(updateData);
+      }, 60000);
+    });
   });
 
   onUnmounted(() => {

src/views/vent/home/configurable/vent-Green.vue

@@ -3,139 +3,138 @@
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
       <div v-if="!route.query.embed" class="top-bg">
-        <greenNav :Title="mainTitle" :activeIndex="activeIndex" @menuToggle="menuToggle"></greenNav>
+        <greenNav :Title="mainTitle" :activeIndex="activeIndex" @menuToggle="menuToggle" />
       </div>
 
       <div class="main-container">
-        <component :is="currentComponent"></component>
+        <component :is="currentComponent" />
       </div>
     </template>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-import { useInitPage } from './hooks/useInit';
-import fireGreen from './fire-green.vue'
-import dustGreen from './dust-green.vue';
-import commonGreen from './common-green.vue';
-import greenNav from './components/green-nav.vue';
-import { useRoute } from 'vue-router';
-import { useGlobSetting } from '/@/hooks/setting';
-
-
-//当前激活menu索引
-let activeIndex = ref(0)
-//当前加载menu组件
-let currentComponent = ref<any>(commonGreen)
-const { title = '智能通风管控系统' } = useGlobSetting();
-const route = useRoute();
-
-const { mainTitle, } = useInitPage(title);
-
-//menu切换，界面跳转
-function menuToggle(item, index) {
-  activeIndex.value = index
-  switch (item.name) {
-    case '灾害预警':
-      currentComponent.value = commonGreen
-      break;
-    case '火灾监控':
-      currentComponent.value = fireGreen
-      break;
-    case '粉尘监控':
-      currentComponent.value = dustGreen
-      break;
+  import { onMounted, onUnmounted, ref } from 'vue';
+  import { useInitPage } from './hooks/useInit';
+  import fireGreen from './fire-green.vue';
+  import dustGreen from './dust-green.vue';
+  import commonGreen from './common-green.vue';
+  import greenNav from './components/green-nav.vue';
+  import { useRoute } from 'vue-router';
+  import { useGlobSetting } from '/@/hooks/setting';
+
+  //当前激活menu索引
+  let activeIndex = ref(0);
+  //当前加载menu组件
+  let currentComponent = ref<any>(commonGreen);
+  const { title = '智能通风管控系统' } = useGlobSetting();
+  const route = useRoute();
+
+  const { mainTitle } = useInitPage(title);
+
+  //menu切换，界面跳转
+  function menuToggle(item, index) {
+    activeIndex.value = index;
+    switch (item.name) {
+      case '灾害预警':
+        currentComponent.value = commonGreen;
+        break;
+      case '火灾监控':
+        currentComponent.value = fireGreen;
+        break;
+      case '粉尘监控':
+        currentComponent.value = dustGreen;
+        break;
+    }
   }
-}
 
-onMounted(() => { });
+  onMounted(() => {});
 
-onUnmounted(() => { });
+  onUnmounted(() => {});
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-
-@{theme-deepblue} {
-  .company-home {
-    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
-  }
-}
-
-.company-home {
-  --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-  --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
-  --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
-  --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
-
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: #181b24;
-
-  .top-bg {
-    width: 100%;
-    height: 96px;
-    // background: var(--image-modal-top) no-repeat center;
-    position: absolute;
-    z-index: 1;
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
 
-  .main-container {
-    position: absolute;
-    top: 96px;
-    width: calc(100% - 30px);
-    height: calc(100% - 96px);
-    margin: 0px 15px;
-    box-sizing: border-box;
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+    }
   }
 
-  .module-dropdown {
-    padding: 5px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 60px;
-    right: 480px;
-  }
-
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
-
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: @vent-configurable-dropdown;
-    border: none;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-  }
+  .company-home {
+    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
+    --image-monitor-realtime: url('/@/assets/images/company/monitor-realtime.png');
+    --image-monitor-doc: url('/@/assets/images/company/monitor-doc.png');
+    --image-monitor-goto: url('/@/assets/images/company/monitor-goto.png');
 
-  .realtime-mode {
-    background-image: var(--image-monitor-realtime);
+    width: 100%;
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: #181b24;
+
+    .top-bg {
+      width: 100%;
+      height: 96px;
+      // background: var(--image-modal-top) no-repeat center;
+      position: absolute;
+      z-index: 1;
+    }
+
+    .main-container {
+      position: absolute;
+      top: 96px;
+      width: calc(100% - 30px);
+      height: calc(100% - 96px);
+      margin: 0px 15px;
+      box-sizing: border-box;
+    }
+
+    .module-dropdown {
+      padding: 5px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 60px;
+      right: 480px;
+    }
+
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: @vent-configurable-dropdown;
+      border: none;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+    }
+
+    .realtime-mode {
+      background-image: var(--image-monitor-realtime);
+    }
+
+    .module-monitor-bar {
+      position: absolute;
+      top: 100px;
+      width: 1000px;
+      height: 200px;
+      left: calc(50% - 500px);
+    }
   }
 
-  .module-monitor-bar {
-    position: absolute;
-    top: 100px;
-    width: 1000px;
-    height: 200px;
-    left: calc(50% - 500px);
+  :deep(.loading-box) {
+    position: unset;
   }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

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

@@ -57,7 +57,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -53,7 +53,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>

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

@@ -26,142 +26,141 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from 'vue';
-// import { CaretDownOutlined } from '@ant-design/icons-vue';
-// import MonitorCenter from './components/MonitorCenter.vue';
-import NewNav from './components/originalNew/NewNav.vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleNew from './components/ModuleNew.vue';
-// import { useRoute } from 'vue-router';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-import { getHomeData } from './configurable.api';
-import { useRoute } from 'vue-router';
-import { testConfigVentNew } from './configurable.data';
-const { configs, isNew, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage('一通三防智能管控平台');
-const route = useRoute();
-let interval: number | undefined;
+  import { onMounted, onUnmounted } from 'vue';
+  // import { CaretDownOutlined } from '@ant-design/icons-vue';
+  // import MonitorCenter from './components/MonitorCenter.vue';
+  import NewNav from './components/originalNew/NewNav.vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import ModuleNew from './components/ModuleNew.vue';
+  // import { useRoute } from 'vue-router';
+  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { getHomeData } from './configurable.api';
+  // import { useRoute } from 'vue-router';
+  import { testConfigVentNew } from './configurable.data';
+  const { configs, isNew, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage('一通三防智能管控平台');
+  // const route = useRoute();
+  let interval: number | undefined;
 
-onMounted(() => {
-  fetchConfigs('vent').then(() => {
-    configs.value = testConfigVentNew;
-    console.log('configs', configs.value);
-    updateEnhancedConfigs(configs.value);
+  onMounted(() => {
+    fetchConfigs('vent').then(() => {
+      configs.value = testConfigVentNew;
+      updateEnhancedConfigs(configs.value);
 
-    getHomeData({}).then(updateData);
+      getHomeData({}).then(updateData);
+    });
+    setInterval(() => {
+      getHomeData({}).then(updateData);
+    }, 60000);
   });
-  setInterval(() => {
-    getHomeData({}).then(updateData);
-  }, 60000);
-});
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
+  @import '/@/design/theme.less';
 
-@{theme-deepblue} {
-  .company-home {
-    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
   }
-}
 
-.company-home {
-  --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+  @{theme-deepblue} {
+    .company-home {
+      --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
+    }
+  }
 
-  .top-bg {
+  .company-home {
+    --image-modal-top: url('@/assets/images/vent/homeNew/modaltop.png');
     width: 100%;
-    height: 56px;
-    background: var(--image-modal-top) no-repeat center;
-    position: absolute;
-    z-index: 1;
-    .main-title {
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: url('@/assets/images/vent/homeNew/bg.png') no-repeat center;
+
+    .top-bg {
+      width: 100%;
       height: 56px;
-      font-family: 'douyuFont';
-      font-size: 20px;
-      letter-spacing: 2px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+      background: var(--image-modal-top) no-repeat center;
+      position: absolute;
+      z-index: 1;
+      .main-title {
+        height: 56px;
+        font-family: 'douyuFont';
+        font-size: 20px;
+        letter-spacing: 2px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .top-nav {
+        position: absolute;
+        top: 0;
+        width: 880px;
+        height: 100%;
+        display: flex;
+        justify-content: flex-start;
+      }
     }
-    .top-nav {
+    .left-t {
       position: absolute;
-      top: 0;
-      width: 880px;
+      width: 28%;
       height: 100%;
-      display: flex;
-      justify-content: flex-start;
+      background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
+      z-index: 0;
+    }
+    .right-t {
+      position: absolute;
+      width: 172%;
+      height: 100%;
+      background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
+      z-index: 0;
+    }
+    // .module-left {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   left: 0;
+    // }
+    // .module-right {
+    //   position: absolute;
+    //   width: 450px;
+    //   height: 280px;
+    //   right: 0;
+    // }
+    // .module-bottom {
+    //   position: absolute;
+    //   width: 1000px;
+    //   height: 280px;
+    // }
+    .module-dropdown {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: @vent-configurable-dropdown;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: @vent-configurable-dropdown;
+      border: none;
+      border-bottom: 2px solid @vent-configurable-home-light-border;
     }
   }
-  .left-t {
-    position: absolute;
-    width: 28%;
-    height: 100%;
-    background: url('@/assets/images/vent/homeNew/leftContent.png') no-repeat center;
-    z-index: 0;
-  }
-  .right-t {
-    position: absolute;
-    width: 172%;
-    height: 100%;
-    background: url('@/assets/images/vent/homeNew/rightContent.png') no-repeat center;
-    z-index: 0;
-  }
-  // .module-left {
-  //   position: absolute;
-  //   width: 450px;
-  //   height: 280px;
-  //   left: 0;
-  // }
-  // .module-right {
-  //   position: absolute;
-  //   width: 450px;
-  //   height: 280px;
-  //   right: 0;
-  // }
-  // .module-bottom {
-  //   position: absolute;
-  //   width: 1000px;
-  //   height: 280px;
-  // }
-  .module-dropdown {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: @vent-configurable-dropdown;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
-  }
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: @vent-configurable-dropdown;
-    border: none;
-    border-bottom: 2px solid @vent-configurable-home-light-border;
+  :deep(.loading-box) {
+    position: unset;
   }
-}
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

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

@@ -21,7 +21,7 @@
     </div> -->
     </div>
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
-    <CustomHeader v-if="!route.query.embed"> {{ mainTitle }} </CustomHeader>
+    <CustomHeader v-if="!route.query.embed">三道沟煤矿均压综采面智能监测与动态调控</CustomHeader>
     <!-- <a class="ant-dropdown-link module-dropdown" @click.prevent="showBar = !showBar">
         全矿井通风检测
         <CaretDownOutlined />
@@ -74,7 +74,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px z-3">
+      <div class="flex pos-absolute bottom-10px left-60px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
@@ -104,11 +104,11 @@
   import { list } from './configurable.api';
   import { useRoute } from 'vue-router';
   import { useGlobSetting } from '/@/hooks/setting';
-  // import { testConfigVent, testConfigVentRealtime } from './configurable.data';
+  import { testConfigSDG } from './configurable.data.wz';
 
   const { sysDataType = 'monitor', title = '三道沟煤矿均压综采面智能监测与动态调控', sysOrgCode } = useGlobSetting();
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-  const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage(title);
+  const { enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage(title);
   const route = useRoute();
   // const router = useRouter();
   const isDataRealTime = ref(sysDataType === 'monitor');
@@ -124,7 +124,7 @@
 
   function refresh() {
     fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
-      // configs.value = isDataRealTime.value ? testConfigVentRealtime : testConfigVent;
+      configs.value = testConfigSDG;
       updateEnhancedConfigs(configs.value);
 
       // 测风装置	windrect

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

@@ -49,7 +49,7 @@
           @close="cfg.visible = false"
         />
         <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-        <div class="pos-absolute top-70px left-460px z-3">
+        <div class="flex pos-absolute bottom-10px left-60px z-3">
           <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
             <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
           </div>

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

@@ -58,7 +58,7 @@
           @close="cfg.visible = false"
         />
         <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-        <div class="pos-absolute top-70px left-460px z-3">
+        <div class="flex pos-absolute bottom-10px left-60px z-3">
           <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
             <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
           </div>
@@ -88,7 +88,7 @@
   import { list } from './configurable.api';
   import { useRoute, useRouter } from 'vue-router';
   import { useGlobSetting } from '/@/hooks/setting';
-  // import { testConfigVent, testConfigVentRealtime } from './configurable.data';
+  import { testConfigVent, testConfigVentRealtime } from './configurable.data';
 
   const { sysDataType = 'monitor', title = '智能通风管控系统' } = useGlobSetting();
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
@@ -106,7 +106,7 @@
 
   function refresh() {
     fetchConfigs(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
-      // configs.value = isDataRealTime.value ? testConfigVentRealtime : testConfigVent;
+      configs.value = isDataRealTime.value ? testConfigVentRealtime : testConfigVent;
       updateEnhancedConfigs(configs.value);
 
       list({}).then(updateData);

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

@@ -58,7 +58,7 @@
           @close="cfg.visible = false"
         />
         <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-        <div class="pos-absolute top-70px left-460px z-3">
+        <div class="flex pos-absolute bottom-10px left-60px z-3">
           <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
             <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
           </div>

src/views/vent/monitorManager/balancePressMonitor/balancePress.threejs.ts

@@ -87,8 +87,8 @@ export const setModelType = (type) => {
           await animateCamera(
             oldCameraPosition,
             { x: 3.9025, y: 0.7782, z: 6.6307 },
-            { x: 1.8177, y: 1.1875, z: 2.3462 },
-            { x: 1.8177, y: 0.0329, z: 0.7698 },
+            { x: 0.2185637607064918, y: 2.476256183591406, z: 2.7017622865334987 },
+            { x: 0.21856376070649214, y: 0.09479035032624854, z: 0.7165903260342672 },
             model,
             1
           );

src/views/vent/monitorManager/windrectMonitor/index.vue

@@ -151,97 +151,97 @@
 </template>
 
 <script setup lang="ts">
-import DeviceEcharts from '../comment/DeviceEcharts.vue';
-import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
-import { BasicModal, useModalInner } from '/@/components/Modal';
-import MonitorTable from '../comment/MonitorTable.vue';
-import ModalTable from './components/modalTable.vue';
-import HandleModal from './components/modal.vue';
-import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-import ResultTable from './components/resultTable.vue';
-import HistoryTable from '../comment/HistoryTable.vue';
-import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
-import AlarmNumTable from '../comment/AlarmNumTable.vue';
-import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
-import { deviceControlApi } from '/@/api/vent/index';
-import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
-import { list, pathList, deviceList, testWind, exportXls, resetWind } from './windrect.api';
-import { message, Progress } from 'ant-design-vue';
-import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { setDivHeight } from '/@/utils/event';
-import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
-import { useRouter } from 'vue-router';
-import { useModal } from '/@/components/Modal';
-import { useCamera } from '/@/hooks/system/useCamera';
-import { usePermission } from '/@/hooks/web/usePermission';
-import { useGlobSetting } from '/@/hooks/setting';
-const { hasPermission } = usePermission();
-
-const globalConfig = inject('globalConfig');
-
-const { sysOrgCode } = useGlobSetting();
-const { currentRoute } = useRouter();
-
-const MonitorDataTable = ref();
-const scroll = reactive({
-  y: 230,
-});
-const modalType = ref('');
-const modalIsShow = ref(false);
-const modalTable = ref();
-const runNum = ref(5); //设备运行数量
-const criticalPathList = ref([]);
-const playerRef = ref();
-const activeKey = ref('1');
-const loading = ref(false);
-// 默认初始是第一行
-const selectRowIndex = ref(-1);
-// 监测数据
-const selectData = reactive({
-  deviceID: '',
-  deviceType: '',
-  strname: '',
-  dataDh: '-', //压差
-  dataDtestq: '-', //测试风量
-  // sourcePressure: '-', //气源压力
-  dataDequivalarea: '-',
-  netStatus: '0', //通信状态
-  fault: '气源压力超限',
-  sign: -1,
-  sensorRight: 0,
-  sensorMiddle: 1,
-  sensorLeft: 0,
-});
-const deviceType = ref('windrect');
-const deviceId = ref('');
-const chartsColumnArr = getTableHeaderColumns('windrect_chart');
-const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
-
-// const dataSource = computed(() => {
-//   const data = [...getRecordList()] || [];
-//   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
-//   addMonitorText(selectData);
-//   return data;
-// });
-
-const dataSource = ref([]);
-const [regModal, { openModal }] = useModal();
-
-const { getCamera, removeCamera } = useCamera();
-const tabChange = (activeKeyVal) => {
-  activeKey.value = activeKeyVal;
-  if (activeKeyVal == 1) {
-    nextTick(() => {
-      MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
-    });
-  }
-};
+  import DeviceEcharts from '../comment/DeviceEcharts.vue';
+  import { unref, onBeforeMount, ref, onMounted, onUnmounted, reactive, toRaw, nextTick, inject } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import MonitorTable from '../comment/MonitorTable.vue';
+  import ModalTable from './components/modalTable.vue';
+  import HandleModal from './components/modal.vue';
+  import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
+  import ResultTable from './components/resultTable.vue';
+  import HistoryTable from '../comment/HistoryTable.vue';
+  import AlarmHistoryTable from '../comment/AlarmHistoryTable.vue';
+  import AlarmNumTable from '../comment/AlarmNumTable.vue';
+  import HandlerHistoryTable from '../comment/HandlerHistoryTable.vue';
+  import { deviceControlApi } from '/@/api/vent/index';
+  import { mountedThree, destroy, addMonitorText, play, setModelType, playCamera } from './windrect.threejs';
+  import { list, pathList, deviceList, testWind, exportXls, resetWind } from './windrect.api';
+  import { message, Progress } from 'ant-design-vue';
+  import { chartsColumns, chartsColumnsHistory, option } from './windrect.data';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { setDivHeight } from '/@/utils/event';
+  import { BorderBox8 as DvBorderBox8 } from '@kjgl77/datav-vue3';
+  import { useRouter } from 'vue-router';
+  import { useModal } from '/@/components/Modal';
+  import { useCamera } from '/@/hooks/system/useCamera';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { useGlobSetting } from '/@/hooks/setting';
+  const { hasPermission } = usePermission();
+
+  const globalConfig = inject('globalConfig');
+
+  const { sysOrgCode } = useGlobSetting();
+  const { currentRoute } = useRouter();
+
+  const MonitorDataTable = ref();
+  const scroll = reactive({
+    y: 230,
+  });
+  const modalType = ref('');
+  const modalIsShow = ref(false);
+  const modalTable = ref();
+  const runNum = ref(5); //设备运行数量
+  const criticalPathList = ref([]);
+  const playerRef = ref();
+  const activeKey = ref('1');
+  const loading = ref(false);
+  // 默认初始是第一行
+  const selectRowIndex = ref(-1);
+  // 监测数据
+  const selectData = reactive({
+    deviceID: '',
+    deviceType: '',
+    strname: '',
+    dataDh: '-', //压差
+    dataDtestq: '-', //测试风量
+    // sourcePressure: '-', //气源压力
+    dataDequivalarea: '-',
+    netStatus: '0', //通信状态
+    fault: '气源压力超限',
+    sign: -1,
+    sensorRight: 0,
+    sensorMiddle: 1,
+    sensorLeft: 0,
+  });
+  const deviceType = ref('windrect');
+  const deviceId = ref('');
+  const chartsColumnArr = getTableHeaderColumns('windrect_chart');
+  const chartsColumnList = ref(chartsColumnArr.length > 0 ? chartsColumnArr : chartsColumns);
+
+  // const dataSource = computed(() => {
+  //   const data = [...getRecordList()] || [];
+  //   Object.assign(selectData, toRaw(data[selectRowIndex.value]));
+  //   addMonitorText(selectData);
+  //   return data;
+  // });
 
-// 设备数据
-const controlType = ref(1);
-//表单赋值
-const [registerModal, { setModalProps, closeModal }] = useModalInner();
+  const dataSource = ref([]);
+  const [regModal, { openModal }] = useModal();
+
+  const { getCamera, removeCamera } = useCamera();
+  const tabChange = (activeKeyVal) => {
+    activeKey.value = activeKeyVal;
+    if (activeKeyVal == 1) {
+      nextTick(() => {
+        MonitorDataTable.value.setSelectedRowKeys([selectData.deviceID]);
+      });
+    }
+  };
+
+  // 设备数据
+  const controlType = ref(1);
+  //表单赋值
+  const [registerModal, { setModalProps, closeModal }] = useModalInner();
 
 // https获取监测数据
 let timer: null | NodeJS.Timeout = null;
@@ -273,521 +273,540 @@ function getMonitor(flag?) {
                 } else {
                   MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
                 }
-              }
-              const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
-              Object.assign(selectData, data);
-              addMonitorText(selectData);
+              });
+              dataSource.value = getData;
+              if (dataSource.value.length > 0) {
+                dataSource.value.forEach((data: any) => {
+                  const readData = data.readData;
+                  data = Object.assign(data, readData);
+                });
+                if (dataSource.value.length > 0 && selectRowIndex.value == -1) {
+                  // 初始打开页面
+                  if (currentRoute.value && currentRoute.value['query'] && currentRoute.value['query']['id']) {
+                    MonitorDataTable.value.setSelectedRowKeys([currentRoute.value['query']['id']]);
+                  } else {
+                    MonitorDataTable.value.setSelectedRowKeys([dataSource.value[0]['deviceID']]);
+                  }
+                }
+                const data: any = toRaw(dataSource.value[selectRowIndex.value]); //maxarea
+                Object.assign(selectData, data);
+                addMonitorText(selectData);
 
-              palyAnimation(selectData);
+                palyAnimation(selectData);
+              }
             }
-          }
-          if (timer) {
-            timer = null;
-          }
-          getMonitor();
-        });
-      },
-      flag ? 0 : 1000
-    );
+            if (timer) {
+              timer = null;
+            }
+            getMonitor();
+          });
+        },
+        flag ? 0 : 1000
+      );
+    }
   }
-}
 
-let deviceRunState = '',
-  tanTouRunState = '';
-// 根据3个点位分别执行动画
-function palyAnimation(selectData) {
-  if (selectData.deviceType == 'windrect_normal') {
-    if (selectData['apparatusRun'] == 1) {
-      const flag = selectData.sign == '0' ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
-      if (flag) play(flag);
-    } else {
-      const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
-      if (flag) play(flag, true);
+  let deviceRunState = '',
+    tanTouRunState = '';
+  // 根据3个点位分别执行动画
+  function palyAnimation(selectData) {
+    if (selectData.deviceType == 'windrect_normal') {
+      if (selectData['apparatusRun'] == 1) {
+        const flag = selectData.sign == '0' ? 'up' : selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
+        if (flag) play(flag);
+      } else {
+        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : null;
+        if (flag) play(flag, true);
+      }
     }
-  }
-  // 运行中是0，运行到达是1
-  if (selectData.deviceType == 'windrect_rect_single') {
-    if (selectData['apparatusRun'] == 1) {
-      // 镜头指向横杆
-      // if(!deviceRunState && !tanTouRunState)playCamera('start')
-      // 正在执行或是开始执行
-
-      //开始执行时，
-      // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束
-
-      // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
-      // 2. 探头左移play('left')
-      // 3. 探头右移play('right')
-      // 4. 横杆向中位移动，探头在右边
-      // 5. 探头移到中间play('middle')
-      // 6. 探头移到左边play('left')
-      // 7. 横杆向低位移动，探头在左边
-      // 8. 探头移到中间play('middle')
-      // 9. 探头右移play('right')
-      // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-      if (selectData['poleIncipient'] == 1) {
-        // 横杆在高位，开始执行 或是 执行结束
-        if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
-          // 1. 开始执行
-          deviceRunState = 'up';
-          tanTouRunState = 'middle';
-          play('up', true);
-          play('middle', true);
-        }
-        if (deviceRunState == 'up-m') {
-          play('up', true);
-          play('middle', true);
-          deviceRunState = '';
-          tanTouRunState = '';
-          playCamera('end');
-        }
-        // 初始已经在运行
+    // 运行中是0，运行到达是1
+    if (selectData.deviceType == 'windrect_rect_single') {
+      if (selectData['apparatusRun'] == 1) {
+        // 镜头指向横杆
+        // if(!deviceRunState && !tanTouRunState)playCamera('start')
+        // 正在执行或是开始执行
+
+        //开始执行时，
+        // selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1 代表可是执行 或是 执行结束
+
+        // 1. selectData['poleIncipient'] == 1 selectData.sensorMiddle == 1, 执行 play('up', true)，play('middle', true)
+        // 2. 探头左移play('left')
+        // 3. 探头右移play('right')
+        // 4. 横杆向中位移动，探头在右边
+        // 5. 探头移到中间play('middle')
+        // 6. 探头移到左边play('left')
+        // 7. 横杆向低位移动，探头在左边
+        // 8. 探头移到中间play('middle')
+        // 9. 探头右移play('right')
+        // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
+        if (selectData['poleIncipient'] == 1) {
+          // 横杆在高位，开始执行 或是 执行结束
+          if (selectData.sensorMiddle == 1 && !deviceRunState && !tanTouRunState) {
+            // 1. 开始执行
+            deviceRunState = 'up';
+            tanTouRunState = 'middle';
+            play('up', true);
+            play('middle', true);
+          }
+          if (deviceRunState == 'up-m') {
+            play('up', true);
+            play('middle', true);
+            deviceRunState = '';
+            tanTouRunState = '';
+            playCamera('end');
+          }
+          // 初始已经在运行
 
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //2.探头左移play('left')
-          if (tanTouRunState == 'middle') {
-            tanTouRunState = 'left-m';
-            play('left');
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //2.探头左移play('left')
+            if (tanTouRunState == 'middle') {
+              tanTouRunState = 'left-m';
+              play('left');
+            }
+            //3. 探头右移play('right')
+            if (tanTouRunState == 'left') {
+              tanTouRunState = 'right-m';
+              play('right');
+            }
           }
-          //3. 探头右移play('right')
-          if (tanTouRunState == 'left') {
-            tanTouRunState = 'right-m';
-            play('right');
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
+            if (!tanTouRunState || tanTouRunState == 'left-m') {
+              play('left', true);
+            }
           }
-        }
-        if (selectData.sensorLeft == 1) {
-          tanTouRunState = 'left';
-          if (!tanTouRunState || tanTouRunState == 'left-m') {
-            play('left', true);
+          if (selectData.sensorRight == 1) {
+            tanTouRunState = 'right';
+            if (!tanTouRunState || tanTouRunState == 'right-m') {
+              play('right', true);
+            }
           }
-        }
-        if (selectData.sensorRight == 1) {
-          tanTouRunState = 'right';
-          if (!tanTouRunState || tanTouRunState == 'right-m') {
+        } else if (selectData['poleMiddle'] == 1) {
+          if (deviceRunState == 'center-m') {
+            play('center', true);
+            deviceRunState = 'center';
+            tanTouRunState = 'right';
+            play('right', true);
+          }
+          if (!deviceRunState) {
+            deviceRunState = 'center';
+            play('center', true);
+          }
+          if (!tanTouRunState) {
             play('right', true);
           }
-        }
-      } else if (selectData['poleMiddle'] == 1) {
-        if (deviceRunState == 'center-m') {
-          play('center', true);
-          deviceRunState = 'center';
-          tanTouRunState = 'right';
-          play('right', true);
-        }
-        if (!deviceRunState) {
-          deviceRunState = 'center';
-          play('center', true);
-        }
-        if (!tanTouRunState) {
-          play('right', true);
-        }
 
-        // 横杆在中位
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //5. 探头移到中间play('middle')
-          if (tanTouRunState == 'right') {
-            tanTouRunState = 'middle-m';
-            play('middle');
+          // 横杆在中位
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //5. 探头移到中间play('middle')
+            if (tanTouRunState == 'right') {
+              tanTouRunState = 'middle-m';
+              play('middle');
+            }
+            //6. 探头移到左边play('left')
+            if (tanTouRunState == 'middle') {
+              tanTouRunState = 'left-m';
+              play('left');
+            }
           }
-          //6. 探头移到左边play('left')
-          if (tanTouRunState == 'middle') {
-            tanTouRunState = 'left-m';
-            play('left');
+          if (selectData.sensorMiddle == 1) {
+            tanTouRunState = 'middle';
+            if (!tanTouRunState || tanTouRunState == 'middle-m') {
+              play('middle', true);
+            }
           }
-        }
-        if (selectData.sensorMiddle == 1) {
-          tanTouRunState = 'middle';
-          if (!tanTouRunState || tanTouRunState == 'middle-m') {
-            play('middle', true);
+          if (selectData.sensorLeft == 1) {
+            tanTouRunState = 'left';
+            if (!tanTouRunState || tanTouRunState == 'left-m') {
+              play('left', true);
+            }
           }
-        }
-        if (selectData.sensorLeft == 1) {
-          tanTouRunState = 'left';
-          if (!tanTouRunState || tanTouRunState == 'left-m') {
+        } else if (selectData['poleNether'] == 1) {
+          if (deviceRunState == 'down-m') {
+            play('down', true);
+            deviceRunState = 'down';
+            tanTouRunState = 'left';
             play('left', true);
           }
-        }
-      } else if (selectData['poleNether'] == 1) {
-        if (deviceRunState == 'down-m') {
-          play('down', true);
-          deviceRunState = 'down';
-          tanTouRunState = 'left';
-          play('left', true);
-        }
-        if (!deviceRunState) {
-          play('down', true);
-          deviceRunState = 'down';
-        }
-        if (!tanTouRunState) {
-          play('left', true);
-        }
-        // 横杆在低位
-        if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
-          //8. 探头移到中间play('middle')
-          if (tanTouRunState == 'left') {
-            tanTouRunState = 'left-middle-m';
-            play('middle');
+          if (!deviceRunState) {
+            play('down', true);
+            deviceRunState = 'down';
           }
-          //9. 探头右移play('right')
-          if (tanTouRunState == 'middle1') {
-            tanTouRunState = 'right-m';
-            play('right');
+          if (!tanTouRunState) {
+            play('left', true);
           }
-          // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
-          if (tanTouRunState == 'right') {
-            tanTouRunState = 'right-middle-m';
-            play('middle');
+          // 横杆在低位
+          if (selectData.sensorLeft == '0' && selectData.sensorMiddle == '0' && selectData.sensorRight == '0') {
+            //8. 探头移到中间play('middle')
+            if (tanTouRunState == 'left') {
+              tanTouRunState = 'left-middle-m';
+              play('middle');
+            }
+            //9. 探头右移play('right')
+            if (tanTouRunState == 'middle1') {
+              tanTouRunState = 'right-m';
+              play('right');
+            }
+            // 10. 测风结束，探头移到中间play('middle')，横杆向高位移动
+            if (tanTouRunState == 'right') {
+              tanTouRunState = 'right-middle-m';
+              play('middle');
+            }
           }
-        }
 
-        if (selectData.sensorMiddle == 1) {
-          if (tanTouRunState == 'left-middle-m') tanTouRunState = 'middle1';
-          if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2';
+          if (selectData.sensorMiddle == 1) {
+            if (tanTouRunState == 'left-middle-m') tanTouRunState = 'middle1';
+            if (tanTouRunState == 'right-middle-m') tanTouRunState = 'middle2';
 
-          if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
-            play('middle', true);
+            if (!tanTouRunState || tanTouRunState == 'left-middle-m' || tanTouRunState == 'right-middle-m') {
+              play('middle', true);
+            }
           }
-        }
 
-        if (selectData.sensorRight == 1) {
-          tanTouRunState = 'right';
-          if (!tanTouRunState || tanTouRunState == 'right-m') {
-            play('right', true);
+          if (selectData.sensorRight == 1) {
+            tanTouRunState = 'right';
+            if (!tanTouRunState || tanTouRunState == 'right-m') {
+              play('right', true);
+            }
+          }
+        } else {
+          // 横杆正在运行
+          if (deviceRunState == 'up') {
+            deviceRunState = 'center-m';
+            play('center');
+          }
+          if (deviceRunState == 'center') {
+            deviceRunState = 'down-m';
+            play('down');
+          }
+          if (deviceRunState == 'down') {
+            deviceRunState = 'up-m';
+            play('up');
           }
         }
-      } else {
-        // 横杆正在运行
-        if (deviceRunState == 'up') {
-          deviceRunState = 'center-m';
-          play('center');
-        }
-        if (deviceRunState == 'center') {
-          deviceRunState = 'down-m';
-          play('down');
-        }
-        if (deviceRunState == 'down') {
-          deviceRunState = 'up-m';
-          play('up');
-        }
-      }
 
-      // //正在执行时
+        // //正在执行时
 
-      // // 判断上中下是否都为0
-      // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
-      //   // 判断是否有前一个状态值，有的话执行
-      //   //没有前一个状态
+        // // 判断上中下是否都为0
+        // if(selectData['poleIncipient'] == 0 && selectData['poleMiddle'] == 0 && selectData['poleNether'] == 0) {
+        //   // 判断是否有前一个状态值，有的话执行
+        //   //没有前一个状态
 
-      //   //有前一个状态
+        //   //有前一个状态
 
-      //   // 横杆前状态在上位时，横杆中位移动，探头在右边
+        //   // 横杆前状态在上位时，横杆中位移动，探头在右边
 
-      //   // 横杆前状态在中位时，横杆下位移动，探头在左边
+        //   // 横杆前状态在中位时，横杆下位移动，探头在左边
 
-      //   // 横杆前状态在下位时，横杆上位移动，探头在中间
+        //   // 横杆前状态在下位时，横杆上位移动，探头在中间
 
-      // }else{
-      //   // 判断当前动画停在固定位置
-      //   if(selectData['poleIncipient'] == 1) {
-      //     // 滑杆停在上面，探头在中间
+        // }else{
+        //   // 判断当前动画停在固定位置
+        //   if(selectData['poleIncipient'] == 1) {
+        //     // 滑杆停在上面，探头在中间
 
-      //   }else if (selectData['poleMiddle'] == 1) {
-      //     // 滑杆停在中间面，初始探头在右边
+        //   }else if (selectData['poleMiddle'] == 1) {
+        //     // 滑杆停在中间面，初始探头在右边
 
-      //   } else if (selectData['poleNether'] == 1) {
-      //     // 滑杆停在下面，初始探头在左边
+        //   } else if (selectData['poleNether'] == 1) {
+        //     // 滑杆停在下面，初始探头在左边
 
-      //   }
-      // }
-    } else {
-      // if(selectData['poleIncipient'] == 1){
-      //   deviceRunState = ''
-      //   tanTouRunState = ''
-      // }
+        //   }
+        // }
+      } else {
+        // if(selectData['poleIncipient'] == 1){
+        //   deviceRunState = ''
+        //   tanTouRunState = ''
+        // }
+      }
     }
-  }
 
-  if (selectData.deviceType == 'windrect_rect') {
-    if (selectData['apparatusRun'] == 1) {
-      const flag = selectData.sign == '0' ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null;
-      if (flag) play(flag);
-    } else {
-      const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == '0' ? 'up' : null;
-      if (flag) play(flag, true);
+    if (selectData.deviceType == 'windrect_rect') {
+      if (selectData['apparatusRun'] == 1) {
+        const flag = selectData.sign == '0' ? 'center' : selectData.sign == 1 ? 'down' : selectData.sign == 2 ? 'up' : null;
+        if (flag) play(flag);
+      } else {
+        const flag = selectData.sign == 1 ? 'center' : selectData.sign == 2 ? 'down' : selectData.sign == '0' ? 'up' : null;
+        if (flag) play(flag, true);
+      }
     }
-  }
 
-  if (selectData.deviceType == 'windrect_ds') {
-    if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
-      if (!deviceRunState) {
-        deviceRunState = 'start';
-        play('down');
+    if (selectData.deviceType == 'windrect_ds') {
+      if (selectData['apparatusRun'] == 1 && selectData['sign'] == 2) {
+        if (!deviceRunState) {
+          deviceRunState = 'start';
+          play('down');
+        }
+      } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
+        deviceRunState = '';
+        play('up');
       }
-    } else if (selectData['apparatusRun'] == 0 && selectData['sign'] == 0 && deviceRunState == 'start') {
-      deviceRunState = '';
-      play('up');
     }
   }
-}
 
-// 自测动画方法
-function testPlay(flag) {
-  if (selectData.deviceType == 'windrect_rect') {
-    setTimeout(() => {
-      play('center');
-    }, 0);
-    setTimeout(() => {
-      play('down');
-    }, 4000);
-    setTimeout(() => {
-      play('up');
-    }, 10000);
-  }
-  if (selectData.deviceType == 'windrect_normal') {
-    setTimeout(() => {
-      play('up');
-    }, 0);
-    setTimeout(() => {
-      play('center');
-    }, 10000);
-    setTimeout(() => {
-      play('down');
-    }, 18000);
-    setTimeout(() => {
-      play('up');
-    }, 21000);
-  }
-  if (selectData.deviceType == 'windrect_ds') {
-    play('moni');
+  // 自测动画方法
+  function testPlay(flag) {
+    if (selectData.deviceType == 'windrect_rect') {
+      setTimeout(() => {
+        play('center');
+      }, 0);
+      setTimeout(() => {
+        play('down');
+      }, 4000);
+      setTimeout(() => {
+        play('up');
+      }, 10000);
+    }
+    if (selectData.deviceType == 'windrect_normal') {
+      setTimeout(() => {
+        play('up');
+      }, 0);
+      setTimeout(() => {
+        play('center');
+      }, 10000);
+      setTimeout(() => {
+        play('down');
+      }, 18000);
+      setTimeout(() => {
+        play('up');
+      }, 21000);
+    }
+    if (selectData.deviceType == 'windrect_ds') {
+      play('moni');
+    }
   }
-}
 
-function clearPlay() {
-  modalType.value = 'autoClear';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  function clearPlay() {
+    modalType.value = 'autoClear';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
   }
-}
 
-function startRun() {
-  modalType.value = 'sing';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  function startRun() {
+    modalType.value = 'sing';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
   }
-}
-// 切换检测数据
-async function getSelectRow(selectRow, index) {
-  if (selectRow) {
-    loading.value = true;
-    selectRowIndex.value = index;
-    Object.assign(selectData, selectRow);
-    let type = '';
-    if (selectRow['modelType']) {
-      type = selectRow['modelType'];
-    } else {
-      if (selectRow.deviceType.startsWith('windrect_rect')) {
-        type = 'lmWindRect';
-      }
-      if (selectRow.deviceType.startsWith('windrect_normal')) {
-        type = 'zdWindRect';
-      }
-      if (selectRow.deviceType.startsWith('windrect_rect_single')) {
-        type = 'lmWindSide';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds')) {
-        type = 'dsWindRect_move';
-        // type = 'duisheFixed';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_four')) {
-        //windrect_ds_two
-        type = 'dsWindRect_four';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_two')) {
-        type = 'dsWindRect_two';
-      }
-      if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
-        type = 'duisheFixed';
-      }
-      if (selectRow.deviceType.startsWith('windrect_dd') || selectRow.deviceType == 'windrect_safety' || selectRow.deviceType == 'windrect_sensor') {
-        type = 'ddWindSide';
+  // 切换检测数据
+  async function getSelectRow(selectRow, index) {
+    if (selectRow) {
+      loading.value = true;
+      selectRowIndex.value = index;
+      Object.assign(selectData, selectRow);
+      let type = '';
+      if (selectRow['modelType']) {
+        type = selectRow['modelType'];
+        debugger;
+      } else {
+        if (selectRow.deviceType.startsWith('windrect_rect')) {
+          type = 'lmWindRect';
+        }
+        if (selectRow.deviceType.startsWith('windrect_normal')) {
+          type = 'zdWindRect';
+        }
+        if (selectRow.deviceType.startsWith('windrect_rect_single')) {
+          type = 'lmWindSide';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds')) {
+          type = 'dsWindRect_move';
+          // type = 'duisheFixed';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_four')) {
+          //windrect_ds_two
+          type = 'dsWindRect_four';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_two')) {
+          type = 'dsWindRect_two';
+        }
+        if (selectRow.deviceType.startsWith('windrect_ds_sut') || selectRow.deviceType.startsWith('windrect_muti')) {
+          type = 'duisheFixed';
+        }
+        if (
+          selectRow.deviceType.startsWith('windrect_dd') ||
+          selectRow.deviceType == 'windrect_safety' ||
+          selectRow.deviceType == 'windrect_sensor'
+        ) {
+          type = 'ddWindSide';
+        }
       }
-    }
 
-    // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
-    await setModelType(type);
-    loading.value = false;
-    deviceRunState = '';
-    tanTouRunState = '';
-    await getCamera(selectRow.deviceID, playerRef.value);
+      // const type = selectRowIndex.value >= 1 ? 'lmWindRect' : selectRowIndex.value <= 3 ? 'zdWindRect' : 'dsWindRect';
+      await setModelType(type);
+      loading.value = false;
+      deviceRunState = '';
+      tanTouRunState = '';
+      await getCamera(selectRow.deviceID, playerRef.value);
+    }
   }
-}
 
-/* 一键测风 */
-function handleOk() {
-  modalType.value = 'multiple';
-  modalIsShow.value = true;
-  if (globalConfig?.simulatedPassword) {
-    controlDevice('', modalType.value);
+  /* 一键测风 */
+  function handleOk() {
+    modalType.value = 'multiple';
+    modalIsShow.value = true;
+    if (globalConfig?.simulatedPassword) {
+      controlDevice('', modalType.value);
+    }
   }
-}
 
-/* 打开一键测风弹窗 */
-function openModel() {
-  setModalProps({ visible: true });
-}
+  /* 打开一键测风弹窗 */
+  function openModel() {
+    setModalProps({ visible: true });
+  }
 
-function resetHandle() {
-  modalType.value = 'resetWind';
-  modalIsShow.value = true;
-}
+  function resetHandle() {
+    modalType.value = 'resetWind';
+    modalIsShow.value = true;
+  }
 
-function exportExcel(id) {
-  exportXls({ testid: id });
-}
+  function exportExcel(id) {
+    exportXls({ testid: id });
+  }
 
-/* 关闭一键测风弹窗 */
-function handleCancel() {
-  setModalProps({ visible: false });
-  modalTable.value.clearSelectedRowKeys();
-}
+  /* 关闭一键测风弹窗 */
+  function handleCancel() {
+    setModalProps({ visible: false });
+    modalTable.value.clearSelectedRowKeys();
+  }
 
-/* 关闭一键测风控制*/
-function handleCancelControl() {
-  modalIsShow.value = false;
-}
+  /* 关闭一键测风控制*/
+  function handleCancelControl() {
+    modalIsShow.value = false;
+  }
 
-function controlDevice(passWord, type) {
-  try {
-    if (type == 'sing') {
-      testWind({
-        ids: [selectData.deviceID],
-        maxnum: 1000,
-        windnum: 1,
-        password: passWord || globalConfig?.simulatedPassword,
-      }).then((res) => {
-        if (res && res.success === false) {
-          message.error(res.message);
-        } else {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+  function controlDevice(passWord, type) {
+    try {
+      if (type == 'sing') {
+        testWind({
+          ids: [selectData.deviceID],
+          maxnum: 1000,
+          windnum: 1,
+          password: passWord || globalConfig?.simulatedPassword,
+        }).then((res) => {
+          if (res && res.success === false) {
+            message.error(res.message);
           } else {
-            message.success('指令已下发成功！');
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           }
-        }
-        modalIsShow.value = false;
-      });
-    } else if (type == 'multiple') {
-      const ids = toRaw(modalTable.value.selectedRowKeys);
-      testWind({
-        ids: ids,
-        maxnum: 1000,
-        windnum: modalTable.value.selectedRowKeys.length,
-        password: passWord || globalConfig?.simulatedPassword,
-      }).then((res) => {
-        if (res && res.success === false) {
-          message.error(res.message);
-        } else {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+          modalIsShow.value = false;
+        });
+      } else if (type == 'multiple') {
+        const ids = toRaw(modalTable.value.selectedRowKeys);
+        testWind({
+          ids: ids,
+          maxnum: 1000,
+          windnum: modalTable.value.selectedRowKeys.length,
+          password: passWord || globalConfig?.simulatedPassword,
+        }).then((res) => {
+          if (res && res.success === false) {
+            message.error(res.message);
           } else {
-            message.success('指令已下发成功！');
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           }
-        }
-        modalIsShow.value = false;
-        setModalProps({ visible: false });
-        modalTable.value.clearSelectedRowKeys();
-      });
-    } else if (type == 'autoClear') {
-      const data = {
-        deviceid: selectData.deviceID,
-        devicetype: selectData.deviceType,
-        paramcode: 'autoClear',
-        value: null,
-        password: passWord || globalConfig?.simulatedPassword,
-        masterComputer: selectData.masterComputer,
-      };
-      deviceControlApi(data).then((res) => {
-        // 模拟时开启
-        if (res.success) {
-          if (globalConfig.History_Type == 'remote') {
-            message.success('指令已下发至生产管控平台成功！');
+          modalIsShow.value = false;
+          setModalProps({ visible: false });
+          modalTable.value.clearSelectedRowKeys();
+        });
+      } else if (type == 'autoClear') {
+        const data = {
+          deviceid: selectData.deviceID,
+          devicetype: selectData.deviceType,
+          paramcode: 'autoClear',
+          value: null,
+          password: passWord || globalConfig?.simulatedPassword,
+          masterComputer: selectData.masterComputer,
+        };
+        deviceControlApi(data).then((res) => {
+          // 模拟时开启
+          if (res.success) {
+            if (globalConfig.History_Type == 'remote') {
+              message.success('指令已下发至生产管控平台成功！');
+            } else {
+              message.success('指令已下发成功！');
+            }
           } else {
-            message.success('指令已下发成功！');
+            message.error(res.message);
           }
-        } else {
-          message.error(res.message);
-        }
+          modalIsShow.value = false;
+        });
+      } else if (type == 'resetWind') {
+        resetWind({}).then((res: any) => {
+          message.info(res);
+        });
         modalIsShow.value = false;
-      });
-    } else if (type == 'resetWind') {
-      resetWind({}).then((res: any) => {
-        message.info(res);
-      });
+      }
+    } catch (error) {
+      message.error('测风失败，请联系管理员。。。');
       modalIsShow.value = false;
     }
-  } catch (error) {
-    message.error('测风失败，请联系管理员。。。');
-    modalIsShow.value = false;
   }
-}
 
-/** 避灾路线上的测风装置 */
-async function getPathList() {
-  const pathArr = await pathList({});
-  criticalPathList.value = pathArr.records.filter((item) => {
-    return item.strsystype == 3;
-  });
-}
+  /** 避灾路线上的测风装置 */
+  async function getPathList() {
+    const pathArr = await pathList({});
+    criticalPathList.value = pathArr.records.filter((item) => {
+      return item.strsystype == 3;
+    });
+  }
 
-/* 根据路线选择测风装置 */
-function selectCriticalPath(pathId) {
-  deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
-    const ids: string[] = [];
-    res.records.forEach((item) => {
-      ids.push(item.id);
+  /* 根据路线选择测风装置 */
+  function selectCriticalPath(pathId) {
+    deviceList({ deviceType: 'wind', sysId: pathId }).then((res) => {
+      const ids: string[] = [];
+      res.records.forEach((item) => {
+        ids.push(item.id);
+      });
+      if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
     });
-    if (modalTable.value) modalTable.value.setSelectedRowKeys(ids);
-  });
-}
+  }
 
-function deviceEdit(e: Event, type: string, record) {
-  e.stopPropagation();
-  openModal(true, {
-    type,
-    deviceId: record['deviceID'],
-  });
-}
+  function deviceEdit(e: Event, type: string, record) {
+    e.stopPropagation();
+    openModal(true, {
+      type,
+      deviceId: record['deviceID'],
+    });
+  }
 
-onBeforeMount(() => {
-  getPathList();
-});
+  onBeforeMount(() => {
+    getPathList();
+  });
 
-onMounted(async () => {
-  // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
-  // loading.value = true;
-  // mountedThree(playerDom).then(async () => {
-  //   getMonitor(true);
-  //   // loading.value = false;
-  // });
-  const { query } = unref(currentRoute);
-  if (query['deviceType']) deviceType.value = query['deviceType'] as string;
-  loading.value = true;
-  mountedThree(null).then(async () => {
-    await getMonitor(true);
-    loading.value = false;
+  onMounted(async () => {
+    // const playerDom = document.getElementById('cf-player1')?.getElementsByClassName('vjs-tech')[0];
+    // loading.value = true;
+    // mountedThree(playerDom).then(async () => {
+    //   getMonitor(true);
+    //   // loading.value = false;
+    // });
+    const { query } = unref(currentRoute);
+    if (query['deviceType']) deviceType.value = query['deviceType'] as string;
+    loading.value = true;
+    mountedThree(null).then(async () => {
+      await getMonitor(true);
+      loading.value = false;
+    });
   });
-});
 
-onUnmounted(() => {
-  removeCamera();
-  if (timer) {
-    clearTimeout(timer);
-    timer = undefined;
-  }
-  destroy();
-});
+  onUnmounted(() => {
+    removeCamera();
+    if (timer) {
+      clearTimeout(timer);
+      timer = undefined;
+    }
+    destroy();
+  });
 </script>
 <style scoped lang="less">
 @import '/@/design/theme.less';

src/views/vent/monitorManager/windrectMonitor/windrect.threejs.ts

@@ -9,6 +9,7 @@ import lmWindRectSide from './longmenSide.threejs';
 import fixedWindRect from './duisheFixed.threejs';
 import useEvent from '../../../../utils/threejs/useEvent';
 import gsap from 'gsap';
+import { getDictItemsByCode } from '/@/utils/dict';
 // import * as dat from 'dat.gui';
 // const gui = new dat.GUI();
 // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
@@ -352,25 +353,42 @@ export const mountedThree = (playerDom) => {
     model.setEnvMap('test1.hdr');
     model.renderer.toneMappingExposure = 1.0;
 
-    ddWindRectObj = new ddWindRect(model);
-    await ddWindRectObj.mountedThree();
+    const dictCodes = getDictItemsByCode('windrecModel');
+    for (let i = 0; i < dictCodes.length; i++) {
+      const dict = dictCodes[i];
 
-    fixedWindRectObj = new fixedWindRect(model);
-    await fixedWindRectObj.mountedThree(playerDom);
-
-    dsWindRectObj = new dsWindRect(model);
-    await dsWindRectObj.mountedThree();
-
-    // 下面模型没有矿用到，为了性能暂时不加载
-
-    // zdWindRectObj = new zdWindRect(model);
-    // await zdWindRectObj.mountedThree();
-
-    // lmWindRectSideObj = new lmWindRectSide(model);
-    // await lmWindRectSideObj.mountedThree();
-
-    // lmWindRectObj = new lmWindRect(model);
-    // await lmWindRectObj.mountedThree();
+      switch (dict.value) {
+        case 'lmWindRect': //
+          debugger;
+          lmWindRectObj = new lmWindRect(model);
+          await lmWindRectObj.mountedThree();
+          break;
+        case 'zdWindRect':
+          zdWindRectObj = new zdWindRect(model);
+          await zdWindRectObj.mountedThree();
+          break;
+        case 'lmWindRectSideObj':
+          lmWindRectSideObj = new lmWindRectSide(model);
+          await lmWindRectSideObj.mountedThree();
+          break;
+        case 'ddWindSide_sensor':
+          ddWindRectObj = new ddWindRect(model);
+          await ddWindRectObj.mountedThree();
+          break;
+        case 'duisheFixed':
+          fixedWindRectObj = new fixedWindRect(model);
+          await fixedWindRectObj.mountedThree(playerDom);
+          break;
+        case 'dsWindRect_two':
+        case 'dsWindRect_four':
+        case 'dsWindRect_move':
+          if (!dsWindRectObj) {
+            dsWindRectObj = new dsWindRect(model);
+            await dsWindRectObj.mountedThree();
+          }
+          break;
+      }
+    }
     resolve(null);
     model.animate();
     startAnimation();