[Feat 0000] 为可配置首页工作报告作demo以及必要的模拟

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

@@ -6,236 +6,251 @@
         <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" />
+            <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>
         </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" />
+            <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>
         </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);
+  }
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  watch(
+    () => route.query,
+    () => {
+      if (route.query.deviceType) {
+        // 仅需要展示子应用，模拟 unmounted
+        clearInterval(interval);
+      } else {
+        // 模拟 mounted
+        refresh();
+        initInterval();
+      }
+    }
+  );
+
+  onMounted(() => {
+    refresh();
+    initInterval();
+  });
+
+  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/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();

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/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/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.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

@@ -2152,7 +2152,6 @@ export const testConfigFireGreen: Config[] = [
       },
       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,9 +1148,596 @@ 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:470px;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:470px;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:470px;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:470px;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:470px;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:470px;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/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"
@@ -23,7 +34,10 @@
   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;
@@ -38,17 +52,23 @@
     }
   };
   onMounted(() => {
+    loading.value = true;
+    mountedThree('#dedust3D', ['#dedustCss', '#dedustEnvA', '#dedustEnvB']).then(() => {
+      setModelType('dedust').finally(() => {
+        loading.value = false;
+      });
+    });
     fetchConfigs('mine_fire').then(() => {
       configs.value = testConfigDustControl;
       // getDisHome({
       //   dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
       // }).then(updateData);
     });
-    interval = setInterval(() => {
-      // getDisHome({
-      //   dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-      // }).then(updateData);
-    }, 2000);
+    // interval = setInterval(() => {
+    // getDisHome({
+    //   dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+    // }).then(updateData);
+    // }, 2000);
     // 监听自定义原生事件
     // 在容器上监听事件（事件会从radio组件冒泡到这里）
     if (dustControlContainer.value) {
@@ -57,6 +77,7 @@
   });
 
   onUnmounted(() => {
+    destroy();
     clearInterval(interval);
     if (dustControlContainer.value) {
       dustControlContainer.value.removeEventListener('radio-value-change', handleRadioChange);

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 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 { 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, updateEnhancedConfigs } = 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

@@ -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/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/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/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 />
@@ -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/ventV5.vue

@@ -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);