解决冲突

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

@@ -0,0 +1,241 @@
+<template>
+  <div class="company-home">
+    <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
+    <template v-if="!route.query.deviceType">
+      <div class="main-container">
+        <div class="left-area">
+          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+          <template v-if="isOriginal">
+            <ModuleOriginal v-for="cfg in configsLeft" :key="cfg.deviceType" :show-style="cfg.showStyle"
+              :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+              :visible="true" />
+          </template>
+        </div>
+        <div class="bottom-area">
+          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+          <template v-if="isOriginal">
+            <ModuleOriginal v-for="cfg in configsBottom" :key="cfg.deviceType" :show-style="cfg.showStyle"
+              :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
+              :visible="true" />
+          </template>
+        </div>
+        <div class="right-area">
+          <greenRightTag></greenRightTag>
+        </div>
+      </div>
+    </template>
+  </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);
+  });
+}
+
+function initInterval() {
+  setInterval(() => {
+    list({
+      types: configs.value
+        .filter((e) => e.deviceType)
+        .map((e) => e.deviceType)
+        .join(','),
+    }).then(updateData);
+  }, 60000);
+}
+
+watch(
+  () => route.query,
+  () => {
+    if (route.query.deviceType) {
+      // 仅需要展示子应用，模拟 unmounted
+      clearInterval(interval);
+    } else {
+      // 模拟 mounted
+      refresh();
+      initInterval();
+    }
+  }
+);
+
+onMounted(() => {
+  refresh();
+  initInterval();
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+<style lang="less" scoped>
+@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;
+
+ 
+
+  .main-container {
+ 
+    width: 100%;
+    height: 100%;
+    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);
+    }
+  }
+
+  .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);
+  }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+</style>

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

@@ -18,7 +18,7 @@
       Not Supportted Link Or Browser
     </video>
     <div class="flex w-full h-full" :style="{ flexDirection: layout.direction }">
-      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'none' : 'none' }">
+      <div v-for="config in layoutConfig" :key="config.name" :style="{ flexBasis: config.basis, overflow: config.overflow ? 'hidden' : 'hidden' }">
         <!-- 告示板部分 -->
         <template v-if="config.name === 'board'">
           <div class="content__module flex flex-justify-around flex-items-center flex-wrap">
@@ -68,7 +68,7 @@
           <CustomTabs class="content__module" :type="config.type" :tab-config="config.items" :overflow="config.overflow" />
         </template>
         <template v-if="config.name === 'blast_delta'">
-          <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 200 }" />
+          <BlastDelta class="content__module" :pos-monitor="config.data" :canvasSize="{ width: 250, height: 178 }" />
         </template>
         <template v-if="config.name === 'qh_curve'">
           <QHCurve class="content__module" :mainfan="config.data" :fan1-prop="config.config.fan1Prop" :fan2-prop="config.config.fan2Prop" />
@@ -114,9 +114,9 @@
   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 ComplexList from './detail/ComplexList-green.vue';
   import GalleryList from './detail/GalleryList.vue';
-  import CustomTable from './detail/CustomTable.vue';
+  import CustomTable from './detail/CustomTable-green.vue';
   import CustomChart from './detail/CustomChart.vue';
   import { clone } from 'lodash-es';
   import { getData, getFormattedText } from '../hooks/helper';
@@ -386,6 +386,7 @@
     // margin-bottom: 5px;
     width: 100%;
     height: 100%;
+    overflow-y: auto;
   }
   // .content__module:first-of-type {
   //   margin-top: 0;

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

@@ -0,0 +1,493 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
+  <div class="list flex items-center" :class="`list_${type}`">
+    <!-- 部分类型的列表需要加一张图片 -->
+    <div :class="`list__image_${type}`"></div>
+    <!-- 剩下的部分填充剩余宽度 -->
+    <div class="flex-grow h-full" :class="`list__wrapper_${type}`">
+      <div v-for="(item, i) in listConfig" :key="`vvhccdcl${i}`" :class="`list-item_${type}`">
+        <!-- 列表项前面的图标 -->
+        <div :class="`list-item__title_${type}`">{{ item.title }}</div>
+        <!-- 列表项的具体内容填充剩余宽度 -->
+        <div v-for="(ctx, j) in item.contents" :key="`vvhccdclc${j}`" :class="`list-item__content_${type}`">
+          <div class="list-item__label">{{ ctx.label }}</div>
+          <div class="list-item__info" :class="`list-item__info_${ctx.color}`">{{ ctx.info }}</div>
+          <div class="list-item__value" :class="`list-item__value_${ctx.color} list-item__value_${type}`">{{ ctx.value }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        title: string;
+        contents: {
+          value: string;
+          color: string;
+          label: string;
+          info: string;
+        }[];
+      }[];
+      /** A B */
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      type: 'A',
+    }
+  );
+
+  //   defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+    @import '@/design/theme.less';
+    @import '@/design/theme.less';
+    /* Timeline 相关的样式 */
+
+    @{theme-deepblue} {
+      .list {
+      --image-img-3: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-3.png);
+      --image-img-7: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-7.png);
+      --image-img-8: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-8.png);
+      --image-img-9: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/img-9.png);
+      --image-list_bg_1: url(/@/assets/images/themify/deepblue/home-container/configurable/dusthome/list_bg_1.png);
+      }
+    }
+
+    .list {
+      --image-img-3: url(/@/assets/images/home-container/configurable/firehome/img-3.png);
+      --image-img-7: url(/@/assets/images/home-container/configurable/firehome/img-7.png);
+      --image-img-8: url(/@/assets/images/home-container/configurable/firehome/img-8.png);
+      --image-img-9: url(/@/assets/images/home-container/configurable/firehome/img-9.png);
+      --image-list_bg_1: url(/@/assets/images/home-container/configurable/dusthome/list_bg_1.png);
+      --image-linear-gradient-1: linear-gradient(to right, #39a3ff50, #39a3ff00);
+      --image-linear-gradient-2: linear-gradient(to right, #3df6ff40, #3df6ff00);
+      --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
+      padding: 5px 20px;
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+
+    .list-item_A {
+      position: relative;
+      height: 140px;
+      background-repeat: no-repeat;
+      background-image: var(--image-img-3);
+      background-size: auto 100%;
+      background-position: center;
+    }
+    .list-item__title_A {
+      position: absolute;
+      left: 41%;
+      // font-size: 14px;
+      top: 15px;
+    }
+    // .list-item__content_A {
+    //   position: absolute;
+    //   left: 35%;
+    //   top: 55px;
+    //   display: flex;
+    //   justify-content: space-evenly;
+    // }
+    .list-item__content_A:nth-of-type(2) {
+      position: absolute;
+      top: 15px;
+      left: 14%;
+      width: 22%;
+      text-align: center;
+      display: block;
+
+      .list-item__label {
+        font-size: 18px;
+        margin-bottom: 25px;
+      }
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 24px;
+      }
+    }
+    .list-item__content_A:nth-of-type(3) {
+      position: absolute;
+      left: 41%;
+      top: 55px;
+
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 20px;
+      }
+    }
+    .list-item__content_A:nth-of-type(4) {
+      position: absolute;
+      left: 66%;
+      top: 55px;
+
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 20px;
+      }
+    }
+    .list-item__content_A:nth-of-type(5) {
+      position: absolute;
+      left: 35%;
+      bottom: 10px;
+      display: flex;
+      align-items: center;
+
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 20px;
+        margin-left: 5px;
+      }
+    }
+
+    .list-item_B {
+      // height: 155px;
+      background-repeat: no-repeat;
+      // background-size: 100% 100%;
+      // background-size: auto 100%;
+      background-size: 87% auto;
+      background-position: center;
+      background-image: var(--image-img-7);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      text-align: center;
+      padding: 0 10%;
+      margin-top: 5px;
+      height: 33px;
+
+      .list-item__label {
+        font-size: 11px;
+      }
+      .list-item__value {
+        font-size: 18px;
+        margin-left: 5px;
+      }
+      .list-item__content_B {
+        height: 100%;
+        display: flex;
+        align-items: center;
+        flex-basis: 100px;
+        flex-grow: 1;
+      }
+      .list-item__title_B {
+        width: 40px;
+        text-align: center;
+        margin-right: 50px
+        // height: 30px;
+        // background-size: auto 80%;
+        // background-position: center;
+        // background-repeat: no-repeat;
+      }
+      .list-item__info {
+        display: none;
+      }
+    }
+
+    .list_C {
+      padding: 5px 10px;
+    }
+
+    .list__wrapper_C {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+
+    .list-item_C {
+      position: relative;
+      height: 140px;
+    //   width: 200px;
+    width:100%;
+    margin:15px 0px;
+      background-repeat: no-repeat;
+      background-image: var(--image-img-8);
+      background-size: 100% 100%;
+      background-position: left center;
+    }
+    .list-item__title_C {
+      position: absolute;
+    //   left: 99px;
+      left: 178px;
+      // font-size: 14px;
+      top: 15px;
+    }
+    .list-item__content_C:nth-of-type(2) {
+      position: absolute;
+      top: 18px;
+      left: 28px;
+      width: 30%;
+      text-align: center;
+      display: block;
+
+      .list-item__label {
+        // font-size: 18px;
+        margin-bottom: 25px;
+      }
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 18px;
+      }
+    }
+    .list-item__content_C:nth-of-type(3) {
+      position: absolute;
+      left: 178px;
+      top: 55px;
+
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 18px;
+      }
+    }
+
+
+    .list_D {
+      padding: 5px 10px;
+    }
+
+    .list__wrapper_D {
+      display: flex;
+      justify-content: space-between;
+      flex-wrap: wrap;
+    }
+
+    .list-item_D {
+      position: relative;
+      height: 110px;
+      width: 182px;
+      background-repeat: no-repeat;
+      background-image: var(--image-img-9);
+      background-size: 100% auto;
+      background-position: center top;
+      text-align: center;
+      margin-bottom: 20px;
+    }
+    .list-item__title_D {
+      position: absolute;
+      width: 100%;
+      bottom: 0;
+      font-size: 16px;
+      font-weight: bold;
+    }
+    .list-item__content_D:nth-of-type(2) {
+      position: absolute;
+      top: 10%;
+      left: 10%;
+      width: 32%;
+      text-align: center;
+
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 16px;
+      }
+    }
+    .list-item__content_D:nth-of-type(3) {
+      position: absolute;
+      top: 10%;
+      right: 10%;
+      width: 32%;
+      text-align: center;
+
+      .list-item__info {
+        display: none;
+      }
+      .list-item__value {
+        font-size: 16px;
+      }
+    }
+
+  .list_E {
+    padding: 5px 10px;
+  }
+
+  .list__wrapper_E {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+    padding: 0 10px;
+  }
+
+  .list-item_E {
+    position: relative;
+    height: 104px;
+    width: 188px;
+    background-repeat: no-repeat;
+    background-image: var(--image-list_bg_1);
+    background-size: 100% auto;
+    background-position: center top;
+    text-align: center;
+    margin-bottom: 20px;
+  }
+  .list-item__title_E {
+    // position: absolute;
+    width: 100%;
+    // top: 0;
+    font-size: 16px;
+    font-weight: bold;
+    margin-top: 10px;
+  }
+  .list-item__content_E:nth-of-type(2) {
+    position: absolute;
+    top: 40%;
+    left: 5%;
+    text-align: left;
+
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 16px;
+    }
+  }
+  .list-item__content_E:nth-of-type(3) {
+    position: absolute;
+    top: 40%;
+    right: 5%;
+    text-align: right;
+
+    .list-item__info {
+      display: none;
+    }
+    .list-item__value {
+      font-size: 16px;
+    }
+  }
+
+  .list-item_F {
+      // height: 155px;
+      background-repeat: no-repeat;
+      background-size: 100% 100%;
+      // background-size: auto 100%;
+      background-position: center;
+      background-image: @vent-gas-list-item-bg-img;
+      display: flex;
+      align-items: center;
+      // justify-content: space-between;
+      // text-align: center;
+      padding: 0 5%;
+      margin-top: 5px;
+      height: 50px;
+
+      .list-item__title_F {
+        flex-basis: 25%;
+      }
+      .list-item__content_F {
+        flex-basis: 25%;
+      }
+      .list-item__label::after {
+        content: '：';
+      }
+      .list-item__value {
+        font-size: 18px;
+        margin-left: 5px;
+        font-weight: bold;
+      }
+      .list-item__content_F {
+        display: flex;
+        align-items: center;
+      }
+      .list-item__info {
+        display: none;
+      }
+  }
+
+  .list-item_G {
+      // height: 155px;
+      // background-repeat: no-repeat;
+      // background-size: 100% 100%;
+      // background-position: center;
+      // justify-content: space-between;
+      // text-align: center;
+      margin-top: 5px;
+
+      .list-item__title_G {
+        position: relative;
+        width: 100%;
+        height: 16px;
+        margin-top: 10px;
+        margin-bottom: 5px;
+        padding-left: 8px;
+        top: -2px;
+        background-image: var(--image-linear-gradient-1);
+        &::before{
+          position: absolute;
+          content: '';
+          width: 100%;
+          height: 100%;
+          top: 4px;
+          left: 0;
+          background-image: var(--image-linear-gradient-2);
+        }
+      }
+      .list-item__content_G {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 4px;
+        margin: 8px 0;
+        background-image: var(--image-linear-gradient-3);
+      }
+  }
+
+    // .list-item__title_B_O2 {
+    //   background-image: url(/@/assets/images/home-container/configurable/firehome/O₂.png);
+    // }
+    // .list-item__title_B_CH4 {
+    //   background-image: url(/@/assets/images/home-container/configurable/firehome/CH₄.png);
+    // }
+    // .list-item__title_B_CO {
+    //   background-image: url(/@/assets/images/home-container/configurable/firehome/CO.png);
+    // }
+    // .list-item__title_B_CO2 {
+    //   background-image: url(/@/assets/images/home-container/configurable/firehome/CO₂.png);
+    // }
+
+    // .list-item__label {
+    //   flex-basis: 55%;
+    // }
+    // .list-item__info {
+    //   flex-grow: 1;
+    // }
+    // .list-item__value {
+    //   flex-basis: 30%;
+    // }
+    .list-item__value_red {
+      color: red;
+    }
+    .list-item__value_orange {
+      color: orange;
+    }
+    .list-item__value_yellow {
+      color: yellow;
+    }
+    .list-item__value_green {
+      color: yellowgreen;
+    }
+    .list-item__value_blue {
+      color: @vent-table-action-link;
+    }
+    .list-item__value_white {
+      color: white;
+    }
+    .gallery-item__value_lightblue {
+      color: @vent-configurable-home-light-border;
+    }
+</style>

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

@@ -89,7 +89,7 @@
   .list-item__content_A {
     background-repeat: no-repeat;
     background-image: @vent-gas-list-item-bg-img;
-    padding: 5px 10px;
+    // padding: 5px 10px;
     display: flex;
   }
   .list-item__icon_A {

src/views/vent/home/configurable/components/detail/CustomTable-green.vue

@@ -0,0 +1,153 @@
+<template>
+  <div class="table__content">
+    <div class="table__content_label" :class="`table__content_label_${type}`">
+      <div class="label-t" v-for="(item, index) in columns" :key="`svvhbcth-${index}`" :style="{ flexBasis }">{{ item.name }}</div>
+    </div>
+    <div class="table__content_list" :class="`table__content_list_${type}`">
+      <div class="table__content_list_row" v-for="(item, index) in data" :key="`svvhbct-${index}`">
+        <div v-for="(t, i) in columns" :key="`svvhbctr-${i}`" :style="{ flexBasis }" :class="`table__content__list_item_${type}`">
+          <slot :name="t.prop" :scope="item">
+            <span>{{ get(item, t.prop) }}</span>
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  import { computed, defineProps } from 'vue';
+  import _ from 'lodash';
+
+  let props = withDefaults(
+    defineProps<{
+      /** B | C */
+      type: string;
+      /** 列表表头配置，每个prop都有其对应的slot来提供定制化功能 */
+      columns: { prop: string; name: string }[];
+      data: any[];
+      defaultValue: string;
+    }>(),
+    {
+      type: 'B',
+      columns: () => [],
+      data: () => [],
+      defaultValue: '-',
+    }
+  );
+
+  const flexBasis = computed(() => {
+    return Math.fround(100 / props.columns.length) + '%';
+  });
+
+  function get(o, p) {
+    const d = _.get(o, p);
+    return _.isNil(d) ? props.defaultValue : d === '' ? props.defaultValue : d;
+  }
+</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} {
+    .table__content {
+      --image-content-label: url(/@/assets/images/themify/deepblue/company/content-label.png);
+      --image-content-text: url('/@/assets/images/themify/deepblue/company/content-text.png');
+      --image-list-head: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/list-head.png');
+    }
+  }
+
+  .table__content {
+    --image-content-label: url(/@/assets/images/company/content-label.png);
+    --image-content-text: url('/@/assets/images/company/content-text.png');
+    --image-list-head: url('/@/assets/images/home-container/configurable/firehome/list-head.png');
+    height: 100%;
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 5px 0;
+
+    .table__content_label {
+      width: 390px;
+      height: 32px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      .label-t {
+        text-align: center;
+        font-size: 14px;
+      }
+    }
+    .table__content_label_A {
+      background-image: var(--image-content-label);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      color: #31b9ef;
+    }
+    .table__content_label_B {
+      background-image: linear-gradient(to top, #04698c, #04698c00);
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      color: #31b9ef;
+    }
+    .table__content_label_C {
+      background-position: center 100%;
+      background-size: 100% 25px;
+      background-repeat: no-repeat;
+      background-image: var(--image-content-text);
+      height: 40px;
+
+      .label-t {
+        background-repeat: no-repeat;
+        background-size: 80% auto;
+        background-position: center;
+        background-image: var(--image-list-head);
+      }
+    }
+
+    .table__content_list {
+      height: calc(100% - 32px);
+      width: 390px;
+      display: flex;
+      flex-direction: column;
+      padding: 5px 0;
+      box-sizing: border-box;
+      overflow-y: auto;
+      .table__content_list_row {
+        width: 100%;
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        color: #fff;
+        margin-bottom: 5px;
+        span {
+          display: inline-block;
+          text-align: center;
+        }
+      }
+    }
+
+    .table__content_list_A {
+      .table__content_list_row {
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-image: var(--image-content-text);
+      }
+    }
+    .table__content_list_C {
+      .table__content_list_row {
+        min-height: 50px;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        background-position: center bottom;
+        background-image: var(--image-content-text);
+      }
+    }
+  }
+</style>

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

@@ -149,7 +149,7 @@
     background-size: 100% 100%;
   }
   .mini-board_F {
-    width: 140px;
+    width: 125px;
     height: 70px;
     background-image: var(--image-miehuo);
     background-size: 100% 80%;
@@ -182,7 +182,7 @@
 
   .mini-board__value_A {
     color: @vent-gas-primary-text;
-    font-size: 20px;
+    font-size: 16px;
     font-weight: bold;
     height: 30px;
     line-height: 30px;
@@ -240,7 +240,7 @@
     color: @vent-gas-primary-text;
   }
   .mini-board__label_F {
-    line-height: 50px;
+    line-height: 34px;
   }
 
   .mini-board__value_G {

src/views/vent/home/configurable/components/green-nav.vue

@@ -5,10 +5,10 @@
     <!-- menu区域 -->
     <div class="nav-menu">
       <div :class="activeIndex == index ? 'nav-menu-active' : 'nav-menu-unactive'" v-for="(item, index) in menuList"
-        :key="index" @click="menuClick(index)">
+        :key="index" @click="menuClick(index, item)">
         <div>{{ item.name }}</div>
         <!-- menu-item -->
-        <div v-if="activeIndex == index && isShowMenuItem" class="nav-menu-item">
+        <div v-if="activeIndex == index && isShowMenuItem && item.MenuItemList.length != 0" class="nav-menu-item">
           <div class="nav-menu-content">
             <div :class="menuItemActive == ind ? 'menu-item-active' : 'menu-item-unactive'"
               v-for="(ite, ind) in item.MenuItemList" :key="ind" @click.stop="menuItemClick(ind)">{{ ite.name }}</div>
@@ -20,79 +20,52 @@
 </template>
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-
 let props = defineProps({
   Title: {
     type: String,
     default: ''
+  },
+  activeIndex:{
+    type:Number,
+    default:0
   }
 })
 
 let menuList = ref<any[]>([
-  { name: '灾害预警',MenuItemList:[
-  { name: '光纤测温监测' },
-  { name: '束管监测' },
-  { name: '智能注氮系统' },
-  { name: '智能注浆系统' },
-  { name: '火灾监测预警' },
-  { name: '色谱仪报表分析' },
-] },
-  { name: '智能通风',MenuItemList:[
-  { name: '光纤测温监测' },
-  { name: '束管监测' },
-  { name: '智能注氮系统' },
-  { name: '智能注浆系统' },
-  { name: '火灾监测预警' },
-  { name: '色谱仪报表分析' },
-] },
-  { name: '火灾监控' ,MenuItemList:[
-  { name: '光纤测温监测' },
-  { name: '束管监测' },
-  { name: '智能注氮系统' },
-  { name: '智能注浆系统' },
-  { name: '火灾监测预警' },
-  { name: '色谱仪报表分析' },
-]},
-  { name: '粉尘监控' ,MenuItemList:[
-  { name: '光纤测温监测' },
-  { name: '束管监测' },
-  { name: '智能注氮系统' },
-  { name: '智能注浆系统' },
-  { name: '火灾监测预警' },
-  { name: '色谱仪报表分析' },
-]},
-  { name: '瓦斯监控' ,MenuItemList:[
-  { name: '光纤测温监测' },
-  { name: '束管监测' },
-  { name: '智能注氮系统' },
-  { name: '智能注浆系统' },
-  { name: '火灾监测预警' },
-  { name: '色谱仪报表分析' },
-]},
-  { name: '综合管控',MenuItemList:[
-  { name: '光纤测温监测' },
-  { name: '束管监测' },
-  { name: '智能注氮系统' },
-  { name: '智能注浆系统' },
-  { name: '火灾监测预警' },
-  { name: '色谱仪报表分析' },
-] },
+  {
+    name: '灾害预警', MenuItemList: [
+      // { name: '光纤测温监测' },
+      // { name: '束管监测' },
+      // { name: '智能注氮系统' },
+      // { name: '智能注浆系统' },
+      // { name: '火灾监测预警' },
+      // { name: '色谱仪报表分析' },
+    ]
+  },
+  { name: '火灾监控', MenuItemList: [] },
+  { name: '粉尘监控', MenuItemList: [] },
+  { name: '智能通风', MenuItemList: [] },
+  { name: '瓦斯监控', MenuItemList: [] },
+  { name: '综合管控', MenuItemList: [] },
 ])//一级菜单列表
-let activeIndex = ref(0)//当前激活menu索引
 
-let isShowMenuItem=ref(false)//是否显示menuItem下拉选项菜单
+
+let isShowMenuItem = ref(false)//是否显示menuItem下拉选项菜单
 let menuItemActive = ref(0)//menuItem当前激活选项
+let $emit = defineEmits(['menuToggle'])
 
 
 //menu选项切换
-function menuClick(index) {
-  activeIndex.value = index
-  isShowMenuItem.value=!isShowMenuItem.value
+function menuClick(index, item) {
+  isShowMenuItem.value = !isShowMenuItem.value
+  //menu切换，界面跳转
+  $emit('menuToggle',item,index)
 }
+
 //menuItem选项切换
 function menuItemClick(ind) {
   menuItemActive.value = ind
-  isShowMenuItem.value=false
+  isShowMenuItem.value = false
 }
 </script>
 <style lang="less" scoped>
@@ -169,7 +142,7 @@ function menuItemClick(ind) {
       flex-direction: column;
       align-items: center;
       box-sizing: border-box;
-   
+
 
       .nav-menu-content {
         width: 100%;
@@ -193,26 +166,26 @@ function menuItemClick(ind) {
       }
     }
 
-    @keyframes fadeIn {
-      from {
-        opacity: 0;
-      }
-
-      to {
-        opacity: 1;
-      }
-    }
-
-    /* 定义淡出动画 */
-    @keyframes fadeOut {
-      from {
-        opacity: 1;
-      }
-
-      to {
-        opacity: 0;
-      }
-    }
+    // @keyframes fadeIn {
+    //   from {
+    //     opacity: 0;
+    //   }
+
+    //   to {
+    //     opacity: 1;
+    //   }
+    // }
+
+    // /* 定义淡出动画 */
+    // @keyframes fadeOut {
+    //   from {
+    //     opacity: 1;
+    //   }
+
+    //   to {
+    //     opacity: 0;
+    //   }
+    // }
   }
 }
 </style>

src/views/vent/home/configurable/components/original/moduleBottom-green.vue

@@ -38,6 +38,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
+    z-index:999;
   }
 
   .module-content__title__expand {

src/views/vent/home/configurable/components/original/moduleLeft-green.vue

@@ -37,7 +37,7 @@
     position: absolute;
     width: 100%;
     height: 100%;
-  
+  z-index:999;
   }
 
   .module-content__title__expand {
@@ -77,11 +77,11 @@
 
   .module-slot {
     height: calc(100% - 33px);
-    width: calc(100% - 20px);
+    width: 100%;
     backdrop-filter: blur(5px);
     // #182d47
     // background-color: var(--vent-configurable-original-module-bg);
-    margin-left: 10px;
+    // margin-left: 10px;
   }
 
   // Transition动画相关

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

@@ -0,0 +1,255 @@
+<template>
+  <div class="company-home">
+    <!-- 如果是有 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>
+      </div>
+    </template>
+  </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);
+  });
+  // setInterval(() => {
+  //   getHomeData({}).then(updateData);
+  // }, 60000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+<style lang="less" scoped>
+@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;
+
+  .main-container {
+    width: 100%;
+    height: 100%;
+    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;
+    }
+  }
+
+  // .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;
+  }
+
+  .realtime-mode {
+    background-image: var(--image-monitor-realtime);
+  }
+
+  .module-monitor-bar {
+    position: absolute;
+    top: 100px;
+    width: 1000px;
+    height: 200px;
+    left: calc(50% - 500px);
+  }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+</style>

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

@@ -0,0 +1,181 @@
+<template>
+  <div class="company-home">
+    <!-- 如果是有 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>
+      </div>
+    </template>
+  </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);
+
+    Promise.resolve(BDFireMock).then(updateData);
+    // getHomeData({}).then(updateData);
+  });
+  // setInterval(() => {
+  //   getHomeData({}).then(updateData);
+  // }, 60000);
+});
+
+onUnmounted(() => {
+  clearInterval(interval);
+});
+</script>
+<style lang="less" scoped>
+@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;
+
+  .main-container {
+    width:100%;
+    height: 100%;
+    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;
+    }
+  }
+
+  // .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;
+  }
+
+  .realtime-mode {
+    background-image: var(--image-monitor-realtime);
+  }
+
+  .module-monitor-bar {
+    position: absolute;
+    top: 100px;
+    width: 1000px;
+    height: 200px;
+    left: calc(50% - 500px);
+  }
+}
+
+:deep(.loading-box) {
+  position: unset;
+}
+</style>

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

@@ -1,182 +1,56 @@
-<!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <div class="company-home">
-    <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
-    </div>
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
       <div v-if="!route.query.embed" class="top-bg">
-        <greenNav :Title="mainTitle"></greenNav>
+        <greenNav :Title="mainTitle" :activeIndex="activeIndex" @menuToggle="menuToggle"></greenNav>
       </div>
 
       <div class="main-container">
-        <div class="left-area">
-          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-          <template v-if="isOriginal">
-            <ModuleOriginal
-              v-for="cfg in configsLeft"
-              :key="cfg.deviceType"
-              :show-style="cfg.showStyle"
-              :module-data="cfg.moduleData"
-              :module-name="cfg.moduleName"
-              :device-type="cfg.deviceType"
-              :data="data"
-              :visible="true"
-            />
-          </template>
-        </div>
-        <div class="bottom-area">
-          <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-          <template v-if="isOriginal">
-            <ModuleOriginal
-              v-for="cfg in configsBottom"
-              :key="cfg.deviceType"
-              :show-style="cfg.showStyle"
-              :module-data="cfg.moduleData"
-              :module-name="cfg.moduleName"
-              :device-type="cfg.deviceType"
-              :data="data"
-              :visible="true"
-            />
-          </template>
-        </div>
-        <div class="right-area">
-          <greenRightTag></greenRightTag>
-        </div>
-
-        <!-- <div
-        v-if="sysDataType === 'all'"
-        :class="{ 'realtime-mode': isDataRealTime }"
-        alt="切换数据模式"
-        class="switch-button report-mode right-525px"
-        @click="switchDataMode"
-      ></div> -->
-        <!-- <div class="switch-button icon-goto right-475px" @click="goMicroApp()"></div> -->
+        <component :is="currentComponent"></component>
       </div>
     </template>
   </div>
 </template>
 <script lang="ts" setup>
 import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-// import { CaretDownOutlined } from '@ant-design/icons-vue';
-// import MonitorBar from './components/MonitorBar.vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleOriginal from './components/ModuleOriginal-green.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 greenRightTag from './components/green-right-tag.vue';
-// import { useRoute } from 'vue-router';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-import { list } from './configurable.api';
-import { useRoute, useRouter } from 'vue-router';
+import { useRoute } from 'vue-router';
 import { useGlobSetting } from '/@/hooks/setting';
-import { testConfigVent, testConfigVentRealtime } from './configurable.data';
 
-const { sysDataType = 'monitor', title = '智能通风管控系统' } = useGlobSetting();
-//   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-const { isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-const { mainTitle, enhancedConfigs, hiddenList, data, updateData, updateEnhancedConfigs } = useInitPage(title);
-const route = useRoute();
-const router = useRouter();
-const isDataRealTime = ref(sysDataType === 'monitor');
-// const showBar = ref(true);
-let interval: number | undefined;
-let configs = ref<any[]>([]);
-// function switchDataMode() {
-//   isDataRealTime.value = !isDataRealTime.value;
-//   refresh();
-// }
-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(isDataRealTime.value ? 'vent_realtime' : 'vent').then(() => {
-    configs.value = isDataRealTime.value ? testConfigVentRealtime : 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);
-  });
-}
-
-function initInterval() {
-  setInterval(() => {
-    list({
-      types: configs.value
-        .filter((e) => e.deviceType)
-        .map((e) => e.deviceType)
-        .join(','),
-    }).then(updateData);
-  }, 60000);
-}
-
-function goMicroApp() {
-  router.push({
-    path: route.path,
-    query: {
-      ...route.query,
-      type: 'model3D',
-      deviceType: 'model3D',
-    },
-  });
-}
+//当前激活menu索引
+let activeIndex = ref(0)
+//当前加载menu组件
+let currentComponent = ref<any>(commonGreen)
+const { title = '智能通风管控系统' } = useGlobSetting();
+const route = useRoute();
 
-watch(
-  () => route.query,
-  () => {
-    if (route.query.deviceType) {
-      // 仅需要展示子应用，模拟 unmounted
-      clearInterval(interval);
-    } else {
-      // 模拟 mounted
-      refresh();
-      initInterval();
-    }
+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(() => {
-  refresh();
-  initInterval();
-});
+onMounted(() => { });
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+onUnmounted(() => { });
 </script>
 <style lang="less" scoped>
 @import '/@/design/theme.less';
@@ -219,57 +93,8 @@ onUnmounted(() => {
     height: calc(100% - 96px);
     margin: 0px 15px;
     box-sizing: border-box;
-
-    .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);
-    }
   }
 
-  // .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;
@@ -297,29 +122,10 @@ onUnmounted(() => {
     border-bottom: 2px solid @vent-configurable-home-light-border;
   }
 
-  .switch-button {
-    width: 34px;
-    height: 34px;
-    position: absolute;
-    // right: 5px;
-    bottom: 300px;
-    z-index: 5;
-    background-repeat: no-repeat;
-    background-size: 100% 100%;
-  }
-
-  .report-mode {
-    background-image: var(--image-monitor-doc);
-  }
-
   .realtime-mode {
     background-image: var(--image-monitor-realtime);
   }
 
-  .icon-goto {
-    background-image: var(--image-monitor-goto);
-  }
-
   .module-monitor-bar {
     position: absolute;
     top: 100px;

src/views/vent/performance/fileDetail/index.vue

@@ -107,7 +107,7 @@
           <JDictSelectTag v-model:value="formState.fileType" placeholder="请选择文件类型" dictCode="file_type" style="width: 260px" />
         </a-form-item>
         <a-form-item label="文件上传">
-          <a-upload :before-upload="beforeUpload" @remove="handleRemove" :multiple="false" :file-list="fileList">
+          <a-upload :custom-request="() => {}" :before-upload="beforeUpload" @remove="handleRemove" :multiple="false" :file-list="fileList">
             <a-button type="primary" preIcon="ant-design:cloud-upload-outlined">选择文件</a-button>
           </a-upload>
         </a-form-item>
@@ -309,12 +309,14 @@
       formData.append('isApprove', formState.isApprove);
       formData.append('fileType', formState.fileType);
       formData.append('filePerm', formState.filePerm);
-      uploadApi(formData).then(({ code, message }) => {
-        if (code !== 200) {
-          createMessage.error(message);
+      uploadApi(formData).then((result) => {
+        // 上传成功后result是字符串，失败则是对象，意味着只要存在code就是失败了
+        if (result.code) {
+          createMessage.error(result.message);
         } else {
           alive.value = new Date().getTime();
           visible.value = false;
+          createMessage.success(result);
         }
       });
     }