Merge branch 'master' of http://182.92.126.35:3000/hrx/mky-vent-base

src/layouts/default/header/components/weatherBroadcast.vue

@@ -7,7 +7,7 @@
     </a-badge> -->
       <div style="display: flex; flex-direction: row" class="btn-header">
         <img :src="parseWeatherData(weatherObj.text)" class="weather-icon" />
-        <span class="unit">{{ weatherObj.pressure }} hPa</span>
+        <span class="unit">{{ weatherObj.pressure }}&nbsp;hPa</span>
         <FileSearchOutlined style="font-size: 18px; color: #fff; line-height: 50px" />
       </div>
     </div>

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

@@ -60,27 +60,20 @@ withDefaults(
   }
 }
 
-.list {
-  --image-list_bg_default: url(/@/assets/images/home-container/configurable/list_bg_default.png);
-  --image-triangle_icon: url(/@/assets/images/home-container/configurable/triangle_icon.png);
-  --image-list_bg_b: url(/@/assets/images/home-container/configurable/list_bg_b.png);
-  --image-deco_1: url(/@/assets/images/home-container/configurable/deco_1.png);
-  --image-list_bg_c: url(/@/assets/images/home-container/configurable/list_bg_c.png);
-  --image-list_bg_defflip: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
-  --image-list_bg_d: url(/@/assets/images/home-container/configurable/list_bg_d.png);
-  --image-list_bg_e: url(/@/assets/images/home-container/configurable/list_bg_e.png);
-  --image-list: url(/@/assets/images/home-container/configurable/firehome/list.png);
-  --image-list_bg_h: url(/@/assets/images/home-container/configurable/list_bg_h.png);
-  --image-list_bg_i: url('/@/assets/images/home-container/configurable/list_bg_i.png');
-  --image-list_bg_j: url('/@/assets/images/home-container/configurable/list_bg_j.png');
-  --image-linear-gradient-3: linear-gradient(to right, #39deff15, #3977e500);
-  padding: 5px 20px;
-  position: relative;
+.list_A {
+  padding-left: 5px;
+}
+.list-item__content_A {
   background-repeat: no-repeat;
-  width: 100%;
-  height: 100%;
-  background-size: 100% 100%;
-  background-image: var(--image-list_bg_default);
+  background-image: @vent-gas-list-item-bg-img;
+  // padding: 5px 10px;
+  display: flex;
+}
+.list-item__icon_A {
+  background-repeat: no-repeat;
+  width: 25px;
+  height: 29px;
+  background-image: var(--image-triangle_icon);
 }
 
 .list_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/monitorManager/alarmMonitor/common/measurePoint copy.vue

@@ -0,0 +1,252 @@
+<template>
+  <div class="content">
+    <div v-if="shown === 'default'" class="content-item">
+      <div class="card-content" v-for="(item, index) in cards" :key="`vmac${index}`">
+        <div class="item-l">
+          <div class="label-l">{{ item.label }}</div>
+          <div class="value-l">{{ item.value }}</div>
+        </div>
+        <div class="item-r">
+          <div class="content-r" v-for="el in item.listR" :key="el.id">
+            <span>{{ `${el.label} : ` }}</span>
+            <span
+              :class="{
+                'status-f': el.label.includes('状态') && el.value == 1,
+                'status-l': el.label.includes('状态') && el.value == 0,
+              }"
+            >
+              {{ el.label.includes('状态') ? (el.value == 1 ? '异常' : el.value == 0 ? '正常' : el.value) : el.value }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="shown === 'chart'" class="chart-item">
+      <div v-for="(item, index) in charts" :key="`acmt${index}`" class="chart-content">
+        <div class="text-center">
+          {{ item.label }}
+        </div>
+        <PredictionCurve :style="{ width: chartWidth || '474px' }" style="height: 300px; margin: 15px" :chart="item" />
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+  import { ref } from 'vue';
+  import BaseTab from '../../../gas/components/tab/baseTab.vue';
+  import PredictionCurve from './predictionCurve.vue';
+
+  // well i know this is trash but the time is reaching
+  defineProps<{
+    cards: { label: string; value: any; listR: { id: number; label: string; dw: string; value: any }[] }[];
+    charts: {
+      label: string;
+      time: Date;
+      data: [number, number, number, number];
+    }[];
+    title: string;
+    timeout?: number;
+    chartWidth?: string;
+  }>();
+
+  const shown = ref('default');
+  // const chartsConfig = ref<
+  //   {
+  //     label: string;
+  //     /** 下一项数据更新后应该替换配置中的哪项数据的标志 */
+  //     indexMark: number;
+  //     x: string[];
+  //     y1: number[];
+  //     y2: number[];
+  //     y3: number[];
+  //     y4: number[];
+  //   }[]
+  // >([]);
+
+  // watch(
+  //   () => props.charts,
+  //   () => {
+  //     const arr = new Array(20).fill(0);
+  //     props.charts.forEach((el, i) => {
+  //       if (chartsConfig.value[i]) {
+  //         // 由于上面这些数据都是 20 项组成的，当指针移动到 20 时说明上次更新了最后一项
+  //         // 那么应该按先进后出的队列模式更新数据了
+  //         const val = chartsConfig.value[i];
+  //         if (val.indexMark === 20) {
+  //           val.x.shift();
+  //           val.y1.shift();
+  //           val.y2.shift();
+  //           val.y3.shift();
+  //           val.y4.shift();
+  //           val.indexMark = 19;
+  //         }
+  //         val.x[val.indexMark] = moment(el.time).format('HH:mm:ss');
+  //         val.y1[val.indexMark] = el.data[0];
+  //         val.y2[val.indexMark] = el.data[1];
+  //         val.y3[val.indexMark] = el.data[2];
+  //         val.y4[val.indexMark] = el.data[3];
+  //         // 指针向后移动1
+  //         val.indexMark += 1;
+  //       } else {
+  //         // 更新配置
+  //         // 初始化配置数据，按照一项数据，生成一个由 20 项数据组成的数组，该数组由此项数据衍生
+  //         const startFrom = moment(el.time);
+  //         chartsConfig.value[i] = {
+  //           label: el.label,
+  //           indexMark: 1,
+  //           x: arr.map(() => {
+  //             const str = startFrom.format('HH:mm:ss');
+  //             startFrom.add(props.timeout || 3000);
+  //             return str;
+  //           }),
+  //           y1: arr.map(() => {
+  //             return el.data[0];
+  //           }),
+  //           y2: arr.map(() => {
+  //             return el.data[1];
+  //           }),
+  //           y3: arr.map(() => {
+  //             return el.data[2];
+  //           }),
+  //           y4: arr.map(() => {
+  //             return el.data[3];
+  //           }),
+  //         };
+  //       }
+  //     });
+  //   },
+  //   { immediate: true, deep: true }
+  // );
+</script>
+<style lang="less">
+  @import '/@/design/theme.less';
+
+  @{theme-deepblue} {
+    .content {
+      --image-bot-area: url('/@/assets/images/themify/deepblue/fire/bot-area.png');
+      --image-bot-area1: url('/@/assets/images/themify/deepblue/fire/bot-area1.png');
+    }
+  }
+  .content {
+    --image-bot-area: url('/@/assets/images/fire/bot-area.png');
+    --image-bot-area1: url('/@/assets/images/fire/bot-area1.png');
+    height: 100%;
+    color: var(--vent-font-color);
+
+    .title {
+      height: 30px;
+      margin-bottom: 10px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .text {
+        font-family: 'douyuFont';
+        font-size: 14px;
+      }
+    }
+
+    .content-item {
+      display: flex;
+      // justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+
+      .card-content {
+        position: relative;
+        width: 30%;
+        height: 128px;
+        margin: 0px 15px 15px 15px;
+        background: var(--image-bot-area) no-repeat center;
+        background-size: 100% 100%;
+
+        .item-l {
+          position: absolute;
+          left: 32px;
+          top: 50%;
+          transform: translate(0, -50%);
+          width: 89px;
+          height: 98px;
+          background: var(--image-bot-area1) no-repeat center;
+
+          .label-l {
+            position: absolute;
+            left: 50%;
+            top: 7px;
+            color: var(--vent-font-color);
+            font-size: 14px;
+            transform: translate(-50%, 0);
+          }
+
+          .value-l {
+            position: absolute;
+            left: 50%;
+            top: 50px;
+            transform: translate(-50%, 0);
+            font-family: 'douyuFont';
+            font-size: 14px;
+            color: var(--vent-table-action-link);
+          }
+        }
+
+        .item-r {
+          position: absolute;
+          left: 132px;
+          top: 50%;
+          transform: translate(0, -50%);
+          height: 128px;
+          padding: 5px 0px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-around;
+          box-sizing: border-box;
+
+          .content-r {
+            display: flex;
+
+            span {
+              font-size: 14px;
+              color: var(--vent-font-color);
+
+              &:first-child {
+                display: inline-block;
+                width: 68px;
+              }
+
+              &:last-child {
+                display: inline-block;
+                width: calc(100% - 68px);
+              }
+            }
+
+            .status-f {
+              color: #ff0000;
+            }
+
+            .status-l {
+              color: var(--vent-table-action-link);
+            }
+          }
+        }
+      }
+    }
+
+    .chart-item {
+      display: flex;
+      justify-content: flex-start;
+      align-items: flex-start;
+      flex-wrap: wrap;
+      height: calc(100% - 50px);
+      overflow-y: auto;
+
+      .chart-content {
+        // border: 1px solid var(--vent-base-border);
+        box-shadow: inset 0px 0px 10px 1px var(--vent-modal-box-shadow);
+        padding: 10px 0;
+        margin: 0 5px 5px 5px;
+      }
+    }
+  }
+</style>

src/views/vent/monitorManager/compressor/components/nitrogenHome_dltj.vue

@@ -720,12 +720,19 @@
     { immediate: true }
   );
 
+  watch(
+    () => props.deviceId,
+    async (deviceId) => {
+      if (deviceId) await getCamera(deviceId, playerRef.value);
+    }
+  );
+
   onMounted(async () => {
     await getMonitor(true);
     await mountedThree().then(() => {
       loading.value = false;
     });
-    await getCamera(props.deviceId, playerRef.value);
+    // await getCamera(props.deviceId, playerRef.value);
   });
 
   onUnmounted(() => {

src/views/vent/monitorManager/gateMonitor/gate.threejs.noStation.ts

@@ -81,6 +81,7 @@ class FmNoStation {
     const textArr = [
       {
         text: `远程控制自动风门`,
+        // text: `${selectData.strinstallpos}`,
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',

src/views/vent/monitorManager/gateMonitor/gate.threejs.qd.ts

@@ -4,6 +4,7 @@ import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 import UseThree from '../../../../utils/threejs/useThree';
 import { drawHot } from '/@/utils/threejs/util';
 import { useAppStore } from '/@/store/modules/app';
+import { useGlobSetting } from '/@/hooks/setting';
 
 // import * as dat from 'dat.gui';
 // const gui = new dat.GUI();
@@ -70,6 +71,7 @@ class Fm3 {
 
   /* 添加监控数据 */
   addMonitorText(selectData) {
+    const { sysOrgCode } = useGlobSetting();
     if (!this.group) {
       return;
     }
@@ -83,11 +85,11 @@ class Fm3 {
 
     const textArr = [
       {
-        text: `远程控制自动风门`,
+        text: `${sysOrgCode == 'zlnxnywwek' ? selectData.strinstallpos : '远程控制自动风门'}`, //王洼二矿需要特殊处理
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 120,
+        x: sysOrgCode == 'zlnxnywwek' ? (450 - selectData.strinstallpos.length * 22) / 2 : 120,
         y: 100,
       },
       {

src/views/vent/monitorManager/gateMonitor/gate.threejs.ts

@@ -5,8 +5,12 @@ import Fm3 from './gate.threejs.qd';
 import FmXR from './gate.threejs.xr';
 import Fm2 from './gate.threejs.three';
 import FmTwoSs from './gate.threejs.two.ss';
+import FmThreeTl from './gate.threejs.three.tl';
+import FmDc from './gate.threejs.window';
+import FmDcHJG from './gate.threejs.window.hjg';
 import { animateCamera } from '/@/utils/threejs/util';
 import useEvent from '../../../../utils/threejs/useEvent';
+import { getDictItemsByCode } from '/@/utils/dict';
 import { useGlobSetting } from '/@/hooks/setting';
 
 // 模型对象、 文字对象
@@ -17,6 +21,7 @@ let model,
   fmXr: FmXR, //行人风门
   fmTwoSs, //
   fmThreeTl, // 三道推拉
+  fmWindowHjg, // 带风窗
   fmWindow, // 带风窗
   group: THREE.Object3D,
   fmType = '',
@@ -56,6 +61,8 @@ const startAnimation = () => {
       fmTwoSs?.mouseUpModel.call(fmTwoSs);
     } else if (fmType === 'fmWindow') {
       fmWindow.mouseUpModel.call(fmWindow);
+    } else if (fmType === 'fmWindowHjg') {
+      fmWindowHjg.mouseUpModel();
     }
   });
 };
@@ -78,6 +85,8 @@ const mouseEvent = (event) => {
         fmThreeTl?.mousedownModel.call(fmThreeTl, intersects);
       } else if (fmType === 'fmWindow' && fmWindow) {
         fmWindow.mousedownModel.call(fmWindow, intersects);
+      } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+        fmWindowHjg.mousedownModel(intersects);
       }
     });
     console.log('摄像头控制信息', model.orbitControls, model.camera);
@@ -99,6 +108,8 @@ export const addMonitorText = (selectData) => {
     fmThreeTl?.addMonitorText.call(fmThreeTl, selectData);
   } else if (fmType === 'fmWindow' && fmWindow) {
     fmWindow.addMonitorText.call(fmWindow, selectData);
+  } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+    fmWindowHjg.addMonitorText(selectData);
   }
 };
 
@@ -121,6 +132,8 @@ export const play = (handlerState, flag?) => {
     return fm2.play.call(fm2, handlerState, flag);
   } else if (fmType === 'fmWindow' && fmWindow) {
     return fmWindow.play.call(fmWindow, handlerState, flag);
+  } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+    return fmWindowHjg.play.call(fmWindowHjg, handlerState, flag);
   } else if (fmType === 'fm3' && fm3) {
     return fm3.play.call(fm3, handlerState, flag);
   } else if (fmType === 'fmXr' && fmXr) {
@@ -132,26 +145,22 @@ export const play = (handlerState, flag?) => {
   }
 };
 
-export const playWindow = (rotationParam, flag) => {
-  if (fmType === 'fmWindow' && fmWindow) {
-    return fmWindow.playWindow.call(fmWindow, rotationParam, flag);
-  }
-};
+// export const playWindow = (rotationParam, flag) => {
+//   if (fmType === 'fmWindow' && fmWindow) {
+//     return fmWindow.playWindow.call(fmWindow, rotationParam, flag);
+//   } else if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+//     return fmWindowHjg.playWindow.call(fmWindowHjg, rotationParam, flag);
+//   }
+// };
 
 export function computePlay(data, maxarea, isFirst = false) {
   // 前门后窗  rearPresentValue1
   // 前门前窗 frontPresentValue1
   // 后门后窗 rearPresentValue2
   // 后门前窗 frontPresentValue2
-  // if (data.OpenDegree1 || data.OpenDegree2) {
-  //   maxarea = 90;
-  //   rotationParam.frontDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree1);
-  //   rotationParam.backDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.OpenDegree2);
-  //   rotationParam.frontDeg1 = (90 / maxarea) * Number(data.OpenDegree1) || 0;
-  //   rotationParam.backDeg1 = (90 / maxarea) * Number(data.OpenDegree2) || 0;
-  //   fm2.playWindow.call(fm3, rotationParam, 1);
-  //   fm2.playWindow.call(fm3, rotationParam, 2);
-  // }
+  // data['frontArea'] = 70;
+  // data['rearArea'] = 40;
+
   if (data.rearPresentValue1 || data.frontPresentValue1 || data.rearPresentValue2 || data.frontPresentValue2) {
     maxarea = 90;
     rotationParam.frontLeftDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.frontPresentValue1);
@@ -162,10 +171,31 @@ export function computePlay(data, maxarea, isFirst = false) {
     rotationParam.backRightDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearPresentValue2);
     rotationParam.backLeftDeg1 = (90 / maxarea) * Number(data.frontPresentValue2) || 0;
     rotationParam.backRightDeg1 = (90 / maxarea) * Number(data.rearPresentValue2) || 0;
-    fmWindow.playWindow(rotationParam, 1);
-    fmWindow.playWindow(rotationParam, 2);
-    fmWindow.playWindow(rotationParam, 3);
-    fmWindow.playWindow(rotationParam, 4);
+
+    // rotationParam.backLeftDeg1 = 90;
+
+    if (fmType === 'fmWindowHjg' && fmWindowHjg) {
+      fmWindowHjg.playWindow(rotationParam, 1);
+      fmWindowHjg.playWindow(rotationParam, 2);
+      fmWindowHjg.playWindow(rotationParam, 3);
+      fmWindowHjg.playWindow(rotationParam, 4);
+    }
+  } else if (data.frontArea && data.rearArea) {
+    maxarea = 90;
+    rotationParam.frontLeftDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.frontArea);
+    rotationParam.frontRightDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.frontArea);
+    rotationParam.frontLeftDeg1 = (90 / maxarea) * Number(data.frontArea) || 0;
+    rotationParam.frontRightDeg1 = (90 / maxarea) * Number(data.frontArea) || 0;
+    rotationParam.backLeftDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearArea);
+    rotationParam.backRightDeg0 = (90 / maxarea) * Number(isFirst ? 0 : data.rearArea);
+    rotationParam.backLeftDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
+    rotationParam.backRightDeg1 = (90 / maxarea) * Number(data.rearArea) || 0;
+    if (fmType === 'fmWindow' && fmWindow) {
+      fmWindow.playWindow(rotationParam, 1);
+      fmWindow.playWindow(rotationParam, 2);
+      fmWindow.playWindow(rotationParam, 3);
+      fmWindow.playWindow(rotationParam, 4);
+    }
   }
 }
 
@@ -268,6 +298,35 @@ export const setModelType = (type) => {
           0.6
         );
       }, 300);
+    } else if (fmType === 'fmWindowHjg' && fmWindowHjg && fmWindowHjg.group) {
+      if (fmWindowHjg.clipActionArr.frontDoor && fmWindowHjg.clipActionArr.backDoor) {
+        fmWindowHjg.clipActionArr.frontDoor.reset();
+        fmWindowHjg.clipActionArr.frontDoor.time = 0.5;
+        fmWindowHjg.clipActionArr.backDoor.reset();
+        fmWindowHjg.clipActionArr.backDoor.time = 0.5;
+
+        fmWindowHjg.clipActionArr.frontDoor.stop();
+        fmWindowHjg.clipActionArr.backDoor.stop();
+      }
+
+      model.startAnimation = fmWindowHjg.render.bind(fmWindowHjg);
+      model.scene.remove(group);
+      group = fmWindowHjg.group;
+      const oldCameraPosition = { x: -761, y: 569, z: 871 };
+      setTimeout(async () => {
+        resolve(null);
+        model.scene.add(fmWindowHjg.group);
+        const position = { x: -2.28, y: -0.91, z: -5.68 };
+
+        await animateCamera(
+          oldCameraPosition,
+          { x: -2.27, y: -0.91, z: -5.67 },
+          { x: 66.257, y: 57.539, z: 94.313 },
+          { x: position.x, y: position.y, z: position.z },
+          model,
+          0.6
+        );
+      }, 300);
     } else if (fmType === 'fmThreeTl' && fmThreeTl && fmThreeTl.group) {
       if (fmThreeTl.clipActionArr.frontDoor && fmThreeTl.clipActionArr.backDoor && fmThreeTl.clipActionArr.centerDoor) {
         fmThreeTl.clipActionArr.frontDoor.reset();
@@ -423,8 +482,8 @@ export const initCameraCanvas = async (playerVal1) => {
 
 export const mountedThree = (playerDom) => {
   const { sysOrgCode } = useGlobSetting();
+  debugger;
   // const sysOrgCode = 'gsgszdek';
-
   return new Promise(async (resolve) => {
     model = new UseThree('#damper3D', '', '#deviceDetail');
     model.setEnvMap('test1.hdr');
@@ -440,42 +499,95 @@ export const mountedThree = (playerDom) => {
         const FmTwoYj = await import('./gate.threejs.two.yj');
         if (FmTwoYj) fmTwoSs = new FmTwoYj.default(model);
         fmTwoSs.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
         break;
-      case 'zmjthjg':
+      case 'zmjthjg': //黄家沟
         const FmNoSubStation = await import('./gate.threejs.noStation');
         if (FmNoSubStation) fm3 = new FmNoSubStation.default(model);
         if (fm3) fm3.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
         break;
-      case 'gsgszdek':
-        const FmDc = await import('./gate.threejs.window');
-        if (FmDc) fmWindow = new FmDc.default(model);
-        if (fmWindow) fmWindow.mountedThree(playerDom);
+      case 'gsgszdek': //大海则
+        fmWindowHjg = new FmDc(model);
+        if (fmWindowHjg) fmWindowHjg.mountedThree(playerDom);
         fm3 = new Fm3(model);
         fm3.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
         break;
-      case 'sdmtjtbltmk':
+      case 'sdmtjtbltmk': //补连塔
         fm3 = new Fm3(model);
         fm3.mountedThree(playerDom);
+        fmXr = new FmXR(model);
+        fmXr.mountedThree(playerDom);
+        // 三道门
+        fmThreeTl = new FmThreeTl(model);
+        if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
         break;
       default:
-        fm3 = new Fm3(model);
-        fm3.mountedThree(playerDom);
-        fmTwoSs = new FmTwoSs(model);
-        fmTwoSs.mountedThree(playerDom);
-        fm2 = new Fm2(model);
-        fm2.mountedThree(playerDom);
-        break;
+        debugger;
+        // 根据字典加载模型
+        const dictCodes = getDictItemsByCode('gateStyle');
+        if (dictCodes.length > 0) {
+          for (let i = 0; i < dictCodes.length; i++) {
+            const dict = dictCodes[i];
+            switch (dict.value) {
+              case 'fmXr':
+                fmXr = new FmXR(model);
+                fmXr.mountedThree(playerDom);
+                break;
+              case 'fmYy':
+                fm1 = new Fm1(model);
+                fm1.mountedThree(playerDom);
+                break;
+              case 'gate_qd':
+                fm3 = new Fm3(model);
+                await fm3.mountedThree();
+                break;
+              case 'fmSs':
+                fmTwoSs = new FmTwoSs(model);
+                await fmTwoSs.mountedThree();
+                break;
+              case 'fmtl3':
+                fmThreeTl = new FmThreeTl(model);
+                await fmThreeTl.mountedThree();
+                break;
+              case 'fmSs3':
+                fm2 = new Fm2(model);
+                await fm2.mountedThree();
+                break;
+              case 'fm_fc_hjg':
+                fmWindowHjg = new FmDcHJG(model);
+                await fmWindowHjg.mountedThree();
+                break;
+              case 'fm_fc':
+                fmWindow = new FmDc(model);
+                await fmWindow.mountedThree();
+                break;
+            }
+          }
+          resolve(null);
+        } else {
+          fm3 = new Fm3(model);
+          fm3.mountedThree(playerDom);
+          fmTwoSs = new FmTwoSs(model);
+          fmTwoSs.mountedThree(playerDom);
+          fm2 = new Fm2(model);
+          fm2.mountedThree(playerDom);
+          // 三道门
+          fmThreeTl = new FmThreeTl(model);
+          if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
+          fmXr = new FmXR(model);
+          fmXr.mountedThree(playerDom);
+          // 液压风门
+          fm1 = new Fm1(model);
+          fm1.mountedThree(playerDom);
+          resolve(null);
+          break;
+        }
     }
-    // 三道门
-    const FmThreeTl = await import('./gate.threejs.three.tl');
-    if (FmThreeTl) fmThreeTl = new FmThreeTl.default(model);
-    if (fmThreeTl) fmThreeTl.mountedThree(playerDom);
-    // 行人风门
-    fmXr = new FmXR(model);
-    fmXr.mountedThree(playerDom);
-    fm1 = new Fm1(model);
-    fm1.mountedThree(playerDom);
-    resolve(null);
 
     model.animate();
     startAnimation();
@@ -490,6 +602,7 @@ export const destroy = () => {
     if (fm3) fm3.destroy();
     if (fmXr) fmXr.destroy();
     if (fmTwoSs) fmTwoSs.destroy();
+    if (fmWindowHjg) fmWindowHjg.destroy();
     if (fmWindow) fmWindow.destroy();
     if (fmThreeTl) fmThreeTl.destroy();
     fm1 = null;
@@ -497,6 +610,7 @@ export const destroy = () => {
     fm3 = null;
     fmXr = null;
     fmWindow = null;
+    fmWindowHjg = null;
     fmThreeTl = null;
     fmTwoSs = null;
     group = null;

src/views/vent/monitorManager/gateMonitor/gate.threejs.window.hjg.ts

@@ -0,0 +1,543 @@
+import * as THREE from 'three';
+import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js';
+import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
+import gsap from 'gsap';
+import { drawHot } from '/@/utils/threejs/util';
+import { useAppStore } from '/@/store/modules/app';
+
+// import * as dat from 'dat.gui';
+// const gui = new dat.GUI();
+// gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
+
+class FmDcHJG {
+  modelName = 'fmDc';
+  model; //
+  group;
+  isLRAnimation = true; // 是否开启左右摇摆动画
+  direction = 1; // 摇摆方向
+  animationTimer: NodeJS.Timeout | null = null; // 摇摆开启定时器
+  player1;
+  player2;
+  deviceDetailCSS3D;
+  playerStartClickTime1 = new Date().getTime();
+  playerStartClickTime2 = new Date().getTime();
+
+  fmClock = new THREE.Clock();
+  mixers: THREE.AnimationMixer | undefined;
+  appStore = useAppStore();
+
+  // backLeftDamperOpenMesh;
+  // backLeftDamperClosedMesh;
+  // frontLeftDamperOpenMesh;
+  // frontLeftDamperClosedMesh;
+  // backRightDamperOpenMesh;
+  // backRightDamperClosedMesh;
+  // frontRightDamperOpenMesh;
+  // frontRightDamperClosedMesh;
+
+  clipActionArr = {
+    frontDoor: null as unknown as THREE.AnimationAction,
+    backDoor: null as unknown as THREE.AnimationAction,
+  };
+  windowsActionArr = {
+    frontLeftWindow: <THREE.Mesh[]>[],
+    backLeftWindow: <THREE.Mesh[]>[],
+    frontRightWindow: <THREE.Mesh[]>[],
+    backRightWindow: <THREE.Mesh[]>[],
+  };
+
+  constructor(model) {
+    this.model = model;
+  }
+
+  addLight() {}
+  // 重置摄像头
+  resetCamera() {
+    this.model.camera.far = 274;
+    this.model.orbitControls?.update();
+    this.model.camera.updateProjectionMatrix();
+  }
+  // 设置模型位置
+  setModalPosition() {
+    this.group?.scale.set(22, 22, 22);
+    this.group?.position.set(-20, 20, 9);
+  }
+
+  /* 添加监控数据 */
+  addMonitorText(selectData) {
+    if (!this.group) {
+      return;
+    }
+    const screenDownText = VENT_PARAM['modalText']
+      ? VENT_PARAM['modalText']
+      : History_Type['type'] == 'remote'
+      ? `国能神东煤炭集团监制`
+      : '煤炭科学技术研究院有限公司研制';
+
+    const screenDownTextX = 80 - (screenDownText.length - 10) * 6;
+
+    const textArr = [
+      {
+        text: `远程控制自动风门`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 120,
+        y: 100,
+      },
+      {
+        text: `净通行高度(m):`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 155,
+      },
+      {
+        text: `${selectData.fclearheight ? selectData.fclearheight : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 290,
+        y: 155,
+      },
+      {
+        text: `净通行宽度(m): `,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 215,
+      },
+      {
+        text: ` ${selectData.fclearwidth ? selectData.fclearwidth : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 215,
+      },
+      {
+        text: `故障诊断:`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 0,
+        y: 275,
+      },
+      {
+        text: `${selectData.warnLevel_str ? selectData.warnLevel_str : '-'}`,
+        font: 'normal 30px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: 280,
+        y: 275,
+      },
+      {
+        text: screenDownText,
+        font: 'normal 28px Arial',
+        color: '#00FF00',
+        strokeStyle: '#007400',
+        x: screenDownTextX,
+        y: 325,
+      },
+    ];
+    //
+    getTextCanvas(526, 346, textArr, '').then((canvas: HTMLCanvasElement) => {
+      const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+      textMap.colorSpace = THREE.SRGBColorSpace;
+      const textMaterial = new THREE.MeshBasicMaterial({
+        // 关于材质并未讲解 实操即可熟悉                 这里是漫反射类似纸张的材质,对应的就有高光类似金属的材质.
+        map: textMap, // 设置纹理贴图
+        transparent: true,
+        side: THREE.FrontSide, // 这里是双面渲染的意思
+      });
+      textMaterial.blending = THREE.CustomBlending;
+      const monitorPlane = this.group.getObjectByName('monitorText');
+      if (monitorPlane) {
+        monitorPlane.material = textMaterial;
+      } else {
+        const planeGeometry = new THREE.PlaneGeometry(526, 346); // 平面3维几何体PlaneGeometry
+        const planeMesh = new THREE.Mesh(planeGeometry, textMaterial);
+        planeMesh.name = 'monitorText';
+        planeMesh.scale.set(0.002, 0.002, 0.002);
+        planeMesh.position.set(4.025, 0.67, -0.27);
+        this.group.add(planeMesh);
+      }
+      textMap.dispose();
+    });
+  }
+
+  /** 添加热点 */
+  drawHots() {
+    const hotPositions = [
+      { x: -0.37, y: 0.26, z: -0.32 },
+      { x: 0.28, y: -0.2, z: -0.43 },
+      { x: 0.55, y: -0.22, z: -0.38 },
+    ];
+    for (let i = 0; i < 3; i++) {
+      const hotPoint = drawHot(0.1);
+      const position = hotPositions[i];
+      hotPoint.scale.set(0.1, 0.1, 0.1);
+      hotPoint.position.set(position.x, position.y, position.z);
+      hotPoint.name = 'hotPoint' + i;
+      this.group?.add(hotPoint);
+    }
+  }
+
+  /* 风门动画 */
+  render() {
+    if (!this.model) {
+      return;
+    }
+
+    if (this.mixers && this.fmClock.running) {
+      this.mixers.update(2);
+    }
+  }
+
+  /* 点击风窗，风窗全屏 */
+  mousedownModel(intersects: THREE.Intersection<THREE.Object3D<THREE.Event>>[]) {
+    if (this.animationTimer) {
+      clearTimeout(this.animationTimer);
+      this.animationTimer = null;
+    }
+  }
+
+  mouseUpModel() {}
+
+  /* 提取风门序列帧，初始化前后门动画 */
+  initAnimation() {
+    const fmGroup = this.group?.getObjectByName('fm-window-hjg');
+    if (fmGroup) {
+      const tracks = fmGroup.animations[0].tracks;
+      const fontTracks: any[] = [],
+        backTracks: any[] = [];
+      for (let i = 0; i < tracks.length; i++) {
+        const track = tracks[i];
+        if (track.name.includes('_1')) {
+          fontTracks.push(track);
+        } else {
+          backTracks.push(track);
+        }
+      }
+      const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
+      // const frontGroup = parentGroup.getObjectByName('FengMen2');
+      // const backGroup = parentGroup.getObjectByName('FengMen1');
+      this.mixers = new THREE.AnimationMixer(parentGroup);
+
+      const frontDoor = new THREE.AnimationClip('frontDoor', 2.5, fontTracks);
+      const frontClipAction = this.mixers.clipAction(frontDoor, parentGroup);
+      frontClipAction.clampWhenFinished = true;
+      frontClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.frontDoor = frontClipAction;
+
+      const backDoor = new THREE.AnimationClip('backDoor', 2.5, backTracks);
+      const backClipAction = this.mixers.clipAction(backDoor, parentGroup);
+      backClipAction.clampWhenFinished = true;
+      backClipAction.loop = THREE.LoopOnce;
+      this.clipActionArr.backDoor = backClipAction;
+    }
+    // 编写风窗
+  }
+  /* 提取风门序列帧，初始化前后门动画 */
+  initWindowAnimation() {
+    const meshArr01: THREE.Object3D[] = []; //front left
+    const meshArr02: THREE.Object3D[] = []; //front right
+    const meshArr03: THREE.Object3D[] = []; //back left
+    const meshArr04: THREE.Object3D[] = []; //back right
+    const windowGroup = new THREE.Group();
+    windowGroup.name = 'hiddenGroup';
+    const fmGroup = this.group?.getObjectByName('fm-window-hjg');
+    const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
+    const frontGroup = parentGroup.getObjectByName('FengMen2');
+    const backGroup = parentGroup.getObjectByName('FengMen');
+    const frontLeftObj = frontGroup.getObjectByName('FengMen_L_1');
+    const frontRightObj = frontGroup.getObjectByName('FengMen_R_1');
+    const backLeftObj = backGroup.getObjectByName('FengMen_L');
+    const backRightObj = backGroup.getObjectByName('FengMen_R');
+    frontLeftObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr01.push(obj);
+      }
+    });
+    frontRightObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr02.push(obj);
+      }
+    });
+    backLeftObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr03.push(obj);
+      }
+    });
+    backRightObj.traverse((obj) => {
+      if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
+        obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);
+        meshArr04.push(obj);
+      }
+    });
+
+    this.windowsActionArr.frontLeftWindow = meshArr01;
+    this.windowsActionArr.frontRightWindow = meshArr02;
+    this.windowsActionArr.backLeftWindow = meshArr03;
+    this.windowsActionArr.backRightWindow = meshArr04;
+    this.group?.add(windowGroup);
+  }
+
+  deviceDetailCard(position = { x: 0, y: 0, z: 0 }) {
+    const element = document.getElementById('deviceCard') as HTMLElement;
+    if (element) {
+      this.deviceDetailCSS3D = new CSS2DObject(element);
+      this.deviceDetailCSS3D.name = 'deviceCard';
+      this.deviceDetailCSS3D.position.set(position.x, position.y, position.z);
+      this.deviceDetailCSS3D.visible = false;
+      // this.model.scene.add(this.deviceDetailCSS3D);
+      this.group.add(this.deviceDetailCSS3D);
+    }
+  }
+
+  // 播放动画
+  play(handlerState, timeScale = 0.01) {
+    let handler = () => {};
+    if (this.clipActionArr.frontDoor && this.clipActionArr.backDoor) {
+      switch (handlerState) {
+        case 1: // 打开前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset();
+            this.clipActionArr.frontDoor.time = 0;
+            this.clipActionArr.frontDoor.timeScale = timeScale;
+            // this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+
+            // 显示打开前门文字
+            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = true;
+            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = false;
+          };
+          break;
+        case 2: // 关闭前门
+          handler = () => {
+            this.clipActionArr.frontDoor.paused = true;
+            this.clipActionArr.frontDoor.reset(); //
+            this.clipActionArr.frontDoor.time = 2.5;
+            this.clipActionArr.frontDoor.timeScale = -timeScale;
+            // this.clipActionArr.frontDoor.clampWhenFinished = true;
+            this.clipActionArr.frontDoor.play();
+            this.fmClock.start();
+
+            if (this.frontDamperOpenMesh) this.frontDamperOpenMesh.visible = false;
+            if (this.frontDamperClosedMesh) this.frontDamperClosedMesh.visible = true;
+          };
+          break;
+        case 3: // 打开后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 0;
+            this.clipActionArr.backDoor.timeScale = timeScale;
+            // this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+
+            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = true;
+            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = false;
+          };
+          break;
+        case 4: // 关闭后门
+          handler = () => {
+            this.clipActionArr.backDoor.paused = true;
+            this.clipActionArr.backDoor.reset();
+            this.clipActionArr.backDoor.time = 2.5;
+            this.clipActionArr.backDoor.timeScale = -timeScale;
+            // this.clipActionArr.backDoor.clampWhenFinished = true;
+            this.clipActionArr.backDoor.play();
+            this.fmClock.start();
+
+            if (this.backDamperOpenMesh) this.backDamperOpenMesh.visible = false;
+            if (this.backDamperClosedMesh) this.backDamperClosedMesh.visible = true;
+          };
+          break;
+        default:
+      }
+      handler();
+    }
+  }
+
+  playWindow(rotationParam, flag) {
+    if (
+      this.windowsActionArr.frontLeftWindow.length <= 0 ||
+      this.windowsActionArr.frontRightWindow.length <= 0 ||
+      this.windowsActionArr.backLeftWindow.length <= 0 ||
+      this.windowsActionArr.backRightWindow.length <= 0
+    ) {
+      return;
+    }
+    if (flag === 1) {
+      // 前门左风窗动画
+      this.windowsActionArr.frontLeftWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.frontLeftDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.frontLeftDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 2) {
+      // 后门左风窗动画
+      this.windowsActionArr.backLeftWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.backLeftDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.backLeftDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 3) {
+      // 前门右风窗动画
+      this.windowsActionArr.frontRightWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.frontRightDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.frontRightDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 4) {
+      // 后门右风窗动画
+      this.windowsActionArr.backRightWindow.forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: THREE.MathUtils.degToRad(rotationParam.backRightDeg1),
+          duration: (1 / 9) * Math.abs(rotationParam.backRightDeg1 - mesh.rotation.z),
+          overwrite: true,
+        });
+      });
+    } else if (flag === 0) {
+      (
+        [
+          ...this.windowsActionArr.frontLeftWindow,
+          ...this.windowsActionArr.frontRightWindow,
+          ...this.windowsActionArr.backLeftWindow,
+          ...this.windowsActionArr.backRightWindow,
+        ] as THREE.Mesh[]
+      ).forEach((mesh) => {
+        gsap.to(mesh.rotation, {
+          z: 0,
+          overwrite: true,
+        });
+      });
+    }
+  }
+
+  async initCamera(dom1) {
+    const videoPlayer1 = dom1;
+    this.player1 = dom1;
+    let monitorPlane: THREE.Mesh | null = null;
+    if (!videoPlayer1) {
+      const textArr = [
+        {
+          text: `无信号输入`,
+          font: 'normal 40px Arial',
+          color: '#009900',
+          strokeStyle: '#002200',
+          x: 170,
+          y: 40,
+        },
+      ];
+      const canvas = await getTextCanvas(320, 180, '', 'noSinge.png');
+
+      let textMaterial: THREE.MeshBasicMaterial | null = null;
+      if (canvas) {
+        const textMap = new THREE.CanvasTexture(canvas); // 关键一步
+        textMaterial = new THREE.MeshBasicMaterial({
+          map: textMap, // 设置纹理贴图
+          transparent: true,
+          side: THREE.DoubleSide, // 这里是双面渲染的意思
+        });
+        textMaterial.blending = THREE.CustomBlending;
+
+        const planeGeometry = new THREE.PlaneGeometry(100, 100); // 平面3维几何体PlaneGeometry
+        monitorPlane = new THREE.Mesh(planeGeometry, textMaterial);
+
+        textMaterial.dispose();
+        planeGeometry.dispose();
+        textMap.dispose();
+      }
+    }
+    const player1 = this.group.getObjectByName('player1');
+    if (player1) {
+      this.model.clearMesh(player1);
+      this.group.remove(player1);
+    }
+    const noPlayer1 = this.group.getObjectByName('noPlayer1');
+    if (noPlayer1) {
+      this.model.clearMesh(noPlayer1);
+      this.group.remove(noPlayer1);
+    }
+    if (!videoPlayer1 && videoPlayer1 === null) {
+      if (monitorPlane && !this.group.getObjectByName('noPlayer1')) {
+        const planeMesh = monitorPlane.clone();
+        planeMesh.name = 'noPlayer1';
+        planeMesh.scale.set(0.0085, 0.0055, 0.012);
+        planeMesh.position.set(-3.64, 0.01, -0.41);
+        this.group?.add(planeMesh.clone());
+      }
+    } else if (videoPlayer1) {
+      try {
+        const mesh = renderVideo(this.group, videoPlayer1, 'player1');
+        if (mesh) {
+          mesh?.scale.set(-0.0275, 0.028, 1);
+          mesh?.position.set(-3.643, 0.02, -0.4);
+          mesh.rotation.y = -Math.PI;
+          this.group.add(mesh);
+        }
+      } catch (error) {
+        console.log('视频信号异常');
+      }
+    }
+  }
+
+  mountedThree(playerDom) {
+    this.group = new THREE.Object3D();
+    this.group.name = this.modelName;
+    return new Promise((resolve) => {
+      this.model.setGLTFModel(['fm-window-hjg'], this.group).then(() => {
+        console.log('带风窗风门模型----->', this.group);
+        this.setModalPosition();
+        // 初始化左右摇摆动画;
+        this.initAnimation();
+        this.initWindowAnimation();
+        // this.drawHots();
+        this.addLight();
+        // this.deviceDetailCard();
+        this.model.animate();
+
+        resolve(this.model);
+      });
+    });
+  }
+
+  destroy() {
+    if (this.model) {
+      if (this.mixers) {
+        this.mixers.uncacheClip(this.clipActionArr.frontDoor.getClip());
+        this.mixers.uncacheClip(this.clipActionArr.backDoor.getClip());
+        this.mixers.uncacheAction(this.clipActionArr.frontDoor.getClip(), this.group);
+        this.mixers.uncacheAction(this.clipActionArr.backDoor.getClip(), this.group);
+        this.mixers.uncacheRoot(this.group);
+
+        if (this.model.animations[0]) this.model.animations[0].tracks = [];
+      }
+      this.model.clearGroup(this.group);
+      this.clipActionArr.backDoor = undefined;
+      this.clipActionArr.frontDoor = undefined;
+
+      this.windowsActionArr.frontWindow = undefined;
+      this.windowsActionArr.backWindow = undefined;
+
+      this.mixers = undefined;
+    }
+  }
+}
+export default FmDcHJG;

src/views/vent/monitorManager/gateMonitor/gate.threejs.window.ts

@@ -98,7 +98,7 @@ class FmDc {
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 290,
+        x: 295,
         y: 155,
       },
       {
@@ -114,7 +114,7 @@ class FmDc {
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 280,
+        x: 290,
         y: 215,
       },
       {
@@ -130,7 +130,7 @@ class FmDc {
         font: 'normal 30px Arial',
         color: '#00FF00',
         strokeStyle: '#007400',
-        x: 280,
+        x: 290,
         y: 275,
       },
       {
@@ -139,7 +139,7 @@ class FmDc {
         color: '#00FF00',
         strokeStyle: '#007400',
         x: screenDownTextX,
-        y: 325,
+        y: 320,
       },
     ];
     //
@@ -215,13 +215,13 @@ class FmDc {
         backTracks: any[] = [];
       for (let i = 0; i < tracks.length; i++) {
         const track = tracks[i];
-        if (track.name.includes('_1')) {
+        if (track.name.includes('Men_1') || track.name.includes('Men_2')) {
           fontTracks.push(track);
-        } else {
+        } else if (track.name.includes('Men_3') || track.name.includes('Men_4')) {
           backTracks.push(track);
         }
       }
-      const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
+      const parentGroup = fmGroup.getObjectByName('QiDongTiaoJieFengMen_1');
       // const frontGroup = parentGroup.getObjectByName('FengMen2');
       // const backGroup = parentGroup.getObjectByName('FengMen1');
       this.mixers = new THREE.AnimationMixer(parentGroup);
@@ -249,13 +249,13 @@ class FmDc {
     const windowGroup = new THREE.Group();
     windowGroup.name = 'hiddenGroup';
     const fmGroup = this.group?.getObjectByName('fm-window');
-    const parentGroup = fmGroup.getObjectByName('MeiCangLianLuoHangFengMen');
-    const frontGroup = parentGroup.getObjectByName('FengMen2');
-    const backGroup = parentGroup.getObjectByName('FengMen');
-    const frontLeftObj = frontGroup.getObjectByName('FengMen_L_1');
-    const frontRightObj = frontGroup.getObjectByName('FengMen_R_1');
-    const backLeftObj = backGroup.getObjectByName('FengMen_L');
-    const backRightObj = backGroup.getObjectByName('FengMen_R');
+    const parentGroup = fmGroup.getObjectByName('QiDongTiaoJieFengMen_1');
+    const frontGroup = parentGroup.getObjectByName('FengMen_1');
+    const backGroup = parentGroup.getObjectByName('FengMen_2');
+    const frontLeftObj = frontGroup.getObjectByName('Men_2').getObjectByName('shanye_2');
+    const frontRightObj = frontGroup.getObjectByName('Men_1').getObjectByName('shanye_1');
+    const backLeftObj = backGroup.getObjectByName('Men_4').getObjectByName('shanye_4');
+    const backRightObj = backGroup.getObjectByName('Men_3').getObjectByName('shanye_3');
     frontLeftObj.traverse((obj) => {
       if (obj.type === 'Mesh' && obj.name && obj.name.startsWith('shanye')) {
         obj.rotateOnAxis(new THREE.Vector3(0, 0, 1), 0);

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

@@ -31,8 +31,10 @@
         <div v-if="hasPermission('btn:control')" class="button-box" @click="playAnimation(4)">关闭后门</div>
         <div v-if="hasPermission('btn:totalControl') || selectData['isShowGatesContrl']" class="button-box" @click="playAnimation(5)">同时打开</div>
         <div v-if="hasPermission('btn:totalControl') || selectData['isShowGatesContrl']" class="button-box" @click="playAnimation(6)">同时关闭</div>
-        <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(10)">A窗控制</div>
-        <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(11)">B窗控制</div>
+        <template v-if="selectData['gateStyle'] && selectData['gateStyle'].includes('fm_fc')">
+          <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(10)">A窗控制</div>
+          <div v-if="hasPermission('btn:controlWindow')" class="button-box" @click="playAnimation(11)">B窗控制</div>
+        </template>
       </div>
       <!-- 控制模式 -->
       <div class="top-right row" v-if="hasPermission('btn:remote')">
@@ -317,7 +319,7 @@
   import AlarmHistoryTableHj from './components/AlarmHistoryTableHj.vue';
   import HandleModal from './modal.vue';
   import DeviceBaseInfo from '../comment/components/DeviceBaseInfo.vue';
-  import { mountedThree, addMonitorText, play, destroy, setModelType, computePlay, playWindow } from './gate.threejs';
+  import { mountedThree, addMonitorText, play, destroy, setModelType, computePlay } from './gate.threejs';
   import { deviceControlApi } from '/@/api/vent/index';
   import { message } from 'ant-design-vue';
   import { list, getTableList, cameraList, cameraAddrList } from './gate.api';
@@ -332,6 +334,7 @@
   import { getDictItems } from '/@/api/common/api';
   import { render } from '/@/utils/common/renderUtils';
   import { useGlobSetting } from '/@/hooks/setting';
+  import { getDictItemsByCode } from '/@/utils/dict';
 
   const { hasPermission } = usePermission();
   const { sysOrgCode } = useGlobSetting();
@@ -472,27 +475,62 @@
     frontDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
     rearDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
     midDeviceState = 0; //记录设备状态，为了与下一次监测数据做比较
-    // const type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
+
     let type;
-    if (selectData['doorUse'] == 2) {
-      type = 'fmXr';
+    const dictCodes = getDictItemsByCode('gateStyle');
+    if (selectData && dictCodes && dictCodes.length > 0) {
+      const gateStyle = selectData['gateStyle'];
+      switch (gateStyle) {
+        case 'gate_qd':
+          type = 'fm3';
+          break;
+        case 'fmSs':
+          type = 'fm3';
+          break;
+        case 'fmtl3':
+          type = 'fmThreeTl';
+          break;
+        case 'fmSs':
+          type = 'fmTwoSs';
+          break;
+        case 'fm_fc':
+          type = 'fmWindow';
+          break;
+        case 'fmXr':
+          type = 'fmXr';
+          break;
+        case 'fmYy':
+          type = 'fm1';
+          break;
+        case 'fmSs3':
+          type = 'fm2';
+          break;
+        case 'fm_fc_hjg':
+          type = 'fmWindowHjg';
+          break;
+      }
     } else {
-      if (selectData.deviceType == 'gate_ss') {
-        type = 'fm2';
-        // type = 'fmWindow';
-      } else if (selectData.deviceType == 'gate_qd' || selectData.deviceType == 'gate_normal') {
-        type = 'fm3';
-      } else if (selectData.deviceType == 'gate_ss_two' || selectData.deviceType == 'gate_ss_two1') {
-        type = 'fmTwoSs';
-      } else if (selectData.deviceType == 'gate_nomal3' || selectData.ndoorcount == '3') {
+      type = selectData.nwindownum == 1 ? 'singleWindow' : 'doubleWindow';
+      if (selectData['doorUse'] == 2) {
+        type = 'fmXr';
+      } else if (selectData.ndoorcount == '3' || selectData.deviceType == 'gate_nomal3') {
         type = 'fmThreeTl';
-      } else if (selectData.deviceType == 'gate_tj') {
-        type = 'fmWindow';
       } else {
-        type = 'fm1'; // 液压
+        if (selectData.deviceType == 'gate_ss') {
+          type = 'fm2';
+          // type = 'fmWindow';
+        } else if (selectData.deviceType == 'gate_qd' || selectData.deviceType == 'gate_normal') {
+          type = 'fm3';
+        } else if (selectData.deviceType == 'gate_ss_two' || selectData.deviceType == 'gate_ss_two1') {
+          type = 'fmTwoSs';
+        } else if (selectData.deviceType == 'gate_tj') {
+          type = 'fmWindow';
+        } else {
+          type = 'fm1'; // 液压
+        }
       }
     }
-
+    debugger;
     setModelType(type).then(async () => {
       addMonitorText(selectData);
       loading.value = false;
@@ -861,7 +899,7 @@
   function monitorAnimation(selectData) {
     const timeScale = 0.005;
     // 带风窗 风窗动画
-    playWindowAnimation(selectData);
+    if (selectData['gateStyle'] && selectData['gateStyle'].includes('fm_fc')) playWindowAnimation(selectData);
 
     if (selectData.frontGateOpen == '1' && selectData.frontGateClose == '0' && !isFrontOpenRunning) {
       isFrontOpenRunning = true;
@@ -996,19 +1034,24 @@
     modelList.value = await getDictItems('gateModel');
     loading.value = true;
     const playerDom = document.getElementById('fm-player1')?.getElementsByClassName('vjs-tech')[0];
-    mountedThree(playerDom).then(async () => {
-      if (sysOrgCode != 'zmhjhzmy') {
-        await getMonitor(true);
-        loading.value = false;
-      } else {
-        // 韩咀无风门设备,只有报警历史数据,无其他数据
-        setModelType('fm1').then(async () => {
+    debugger;
+    mountedThree(playerDom)
+      .then(async () => {
+        if (sysOrgCode != 'zmhjhzmy') {
+          await getMonitor(true);
           loading.value = false;
-          dataSource.value = [];
-          addMonitorText(selectData);
-        });
-      }
-    });
+        } else {
+          // 韩咀无风门设备,只有报警历史数据,无其他数据
+          setModelType('fm1').then(async () => {
+            loading.value = false;
+            dataSource.value = [];
+            addMonitorText(selectData);
+          });
+        }
+      })
+      .catch(() => {
+        debugger;
+      });
   });
 
   onBeforeUnmount(() => {

src/views/vent/monitorManager/mainFanMonitor/mainWind.xj.threejs.ts

@@ -549,7 +549,7 @@ class mainXjWindRect {
       if (plane) {
         if (flag == 'open') {
           gsap.to(plane.position, {
-            z: -70,
+            z: -1085.796,
             duration: duration / 2,
             overwrite: true,
             onComplete: function () {
@@ -558,7 +558,7 @@ class mainXjWindRect {
           });
         } else {
           gsap.to(plane.position, {
-            z: 30,
+            z: -544.701, //-1085.796
             duration: duration / 2,
             overwrite: true,
             onComplete: function () {
@@ -794,8 +794,8 @@ class mainXjWindRect {
         //挡板
         this.frontPlane = gltf[0]?.getObjectByName('ChaBan')?.getObjectByName('ChaBan_ban_pCube8') as THREE.Mesh;
         this.backPlane = gltf[0]?.getObjectByName('ChaBan1')?.getObjectByName('ChaBan1_ban_pCube8') as THREE.Mesh;
-        if (this.frontPlane) this.frontPlane.position.setZ(30);
-        if (this.backPlane) this.backPlane.position.setZ(30);
+        if (this.frontPlane) this.frontPlane.position.setZ(-544.701);
+        if (this.backPlane) this.backPlane.position.setZ(-544.701);
 
         const loader = new THREE.TextureLoader();
         this.airTexture = loader.load('/model/img/air.png');

src/views/vent/monitorManager/windowMonitor/shuangdaoFc.threejs.ts

@@ -1,6 +1,7 @@
 import * as THREE from 'three';
 import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 import gsap from 'gsap';
+import { useGlobSetting } from '/@/hooks/setting';
 
 class sdFc_1 {
   model;
@@ -51,6 +52,7 @@ class sdFc_1 {
   }
 
   addMonitorText(selectData) {
+    const { sysOrgCode } = useGlobSetting();
     if (!this.group) {
       return;
     }
@@ -63,11 +65,11 @@ class sdFc_1 {
     const screenDownTextX = 120 - (screenDownText.length - 10) * 6;
     const textArr = [
       {
-        text: `远程定量调节自动风窗`,
+        text: `${sysOrgCode == 'zlnxnywwek' ? selectData.strinstallpos : '远程控制自动风门'}`, //王洼二矿需要特殊处理
         font: 'normal 30px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 95,
+        x: sysOrgCode == 'zlnxnywwek' ? (450 - selectData.strinstallpos.length * 22) / 2 : 120,
         y: 97,
       },
       {

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

@@ -2,6 +2,7 @@ import * as THREE from 'three';
 
 import { getTextCanvas, renderVideo } from '/@/utils/threejs/util';
 import gsap from 'gsap';
+import { useGlobSetting } from '/@/hooks/setting';
 // import * as dat from 'dat.gui';
 // const gui = new dat.GUI();
 // gui.domElement.style = 'position:absolute;top:100px;left:10px;z-index:99999999999999';
@@ -84,13 +85,14 @@ class dsWindRect {
     if (!this.group) {
       return;
     }
+    const { sysOrgCode } = useGlobSetting();
     const textArr = [
       {
-        text: `扫描式测风装置`,
+        text: `${sysOrgCode == 'zlnxnywwek' ? selectData.strinstallpos : '远程控制自动风门'}`, //王洼二矿需要特殊处理
         font: 'normal 32px Arial',
         color: '#009900',
         strokeStyle: '#002200',
-        x: 140,
+        x: sysOrgCode == 'zlnxnywwek' ? (380 - selectData.strinstallpos.length * 22) / 2 : 120,
         y: 75,
       },
       {

src/views/vent/performance/comment/NormalTable.vue

@@ -18,14 +18,14 @@
           nodeParam.id == '1600000000000000001'
             ? '报表分析'
             : nodeParam.id == '1500000000000000002'
-              ? '报表分析'
-              : nodeParam.id == '1500000000000000003'
-                ? '色谱仪分析'
-                : nodeParam.id == '1400000000000000003' || nodeParam.id == '1400000000000000002'
-                  ? '报表分析'
-                  : ''
+            ? '报表分析'
+            : nodeParam.id == '1500000000000000003'
+            ? '色谱仪分析'
+            : nodeParam.id == '1400000000000000003' || nodeParam.id == '1400000000000000002'
+            ? '报表分析'
+            : ''
         }}</a>
-        <a class="table-action-link"  v-if="hasPermission('editPermiss:return')" @click="handlePermission(record)">权限编辑</a>
+        <a class="table-action-link" v-if="hasPermission('editPermiss:return')" @click="handlePermission(record)">权限编辑</a>
       </template>
 
       <template #bodyCell="{ column, record }">
@@ -39,8 +39,7 @@
       <a-form :model="formStateTj" labelAlign="right" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
         <a-form-item label="选择审批" :rules="[{ required: true, message: '请选择是否提交' }]">
           <a-select v-model:value="formStateTj.file" style="width: 260px">
-            <a-select-option v-for="file in fileList" :key="file.label" :value="file.value">{{ file.label
-              }}</a-select-option>
+            <a-select-option v-for="file in fileList" :key="file.label" :value="file.value">{{ file.label }}</a-select-option>
           </a-select>
         </a-form-item>
       </a-form>
@@ -51,20 +50,22 @@
     </a-modal>
     <!-- 审批-撤销申请弹窗 -->
     <a-modal v-model:visible="visibleCx" centered :width="600" title="撤销申请" @ok="handleCxOk" @cancel="handleCxCancel">
-      <a-textarea v-model:value="revokeDes" placeholder="请输入撤回原因..." :rows="4"
-        style="width: 96%; margin: 10px; background-color: transparent; color: #fff" />
+      <a-textarea
+        v-model:value="revokeDes"
+        placeholder="请输入撤回原因..."
+        :rows="4"
+        style="width: 96%; margin: 10px; background-color: transparent; color: #fff"
+      />
     </a-modal>
     <!-- 权限编辑弹窗 -->
-    <a-modal v-model:visible="visiblePermission" width="450px" :footer="null" :title="titlePermission" centered
-      destroyOnClose>
+    <a-modal v-model:visible="visiblePermission" width="450px" :footer="null" :title="titlePermission" centered destroyOnClose>
       <a-form :model="formStateQx" name="basic" :label-col="{ span: 8 }" :wrapper-col="{ span: 12 }" autocomplete="off">
         <a-form-item label="选择权限：">
-          <JDictSelectTag v-model:value="formStateQx.filePerm" placeholder="请选择权限" dictCode="file_perm"
-            style="width: 240px" />
+          <JDictSelectTag v-model:value="formStateQx.filePerm" placeholder="请选择权限" dictCode="file_perm" style="width: 240px" />
         </a-form-item>
         <div class="opertion-btn">
           <a-button type="primary" @click="confirmQx">确定</a-button>
-          <a-button type="success" style="margin-left:10px" @click="cancelQx">取消</a-button>
+          <a-button type="success" style="margin-left: 10px" @click="cancelQx">取消</a-button>
         </div>
       </a-form>
     </a-modal>
@@ -72,421 +73,420 @@
 </template>
 
 <script lang="ts" name="system-user" setup>
-//ts语法
-import { ref, provide, reactive, toRaw, defineExpose, unref } from 'vue';
-import { BasicTable, TableAction } from '/@/components/Table';
-import DeviceModal from './DeviceModal.vue';
-import CADModal from './CADModal.vue';
-import HistorySp from './HistorySp.vue';
-import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
-import { useModal } from '/@/components/Modal';
-import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
-import { useListPage } from '/@/hooks/system/useListPage';
-import { commit,updataFileParam } from '../fileDetail/fileDetail.api';
-import { historicFlowNew, getHighlightImgNew, getTodoTask, getCancelNew } from './comment.api';
-import { message } from 'ant-design-vue';
-import { useUserStore } from '/@/store/modules/user';
-import { useRouter } from 'vue-router';
-import { usePermission } from '/@/hooks/web/usePermission';
+  //ts语法
+  import { ref, provide, reactive, toRaw, defineExpose, unref } from 'vue';
+  import { BasicTable, TableAction } from '/@/components/Table';
+  import DeviceModal from './DeviceModal.vue';
+  import CADModal from './CADModal.vue';
+  import HistorySp from './HistorySp.vue';
+  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+  import { useModal } from '/@/components/Modal';
+  import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
+  import { useListPage } from '/@/hooks/system/useListPage';
+  import { commit, updataFileParam } from '../fileDetail/fileDetail.api';
+  import { historicFlowNew, getHighlightImgNew, getTodoTask, getCancelNew } from './comment.api';
+  import { message } from 'ant-design-vue';
+  import { useUserStore } from '/@/store/modules/user';
+  import { useRouter } from 'vue-router';
+  import { usePermission } from '/@/hooks/web/usePermission';
 
-const props = defineProps({
-  //文件审批-提交信息
-  submitInfo: {
-    type: Array,
-    default: () => {
-      return [];
+  const props = defineProps({
+    //文件审批-提交信息
+    submitInfo: {
+      type: Array,
+      default: () => {
+        return [];
+      },
+    },
+    //各矿参数
+    selfParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
+    },
+    //查询参数
+    searchParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
-  },
-  //各矿参数
-  selfParam: {
-    type: Object,
-    default: () => {
-      return {};
+    //菜单树传递参数
+    nodeParam: {
+      type: Object,
+      default: () => {
+        return {};
+      },
     },
-  },
-  //查询参数
-  searchParam: {
-    type: Object,
-    default: () => {
-      return {};
+    columnsType: {
+      type: String,
+      // required: true,
     },
-  },
-  //菜单树传递参数
-  nodeParam: {
-    type: Object,
-    default: () => {
-      return {};
+    columns: {
+      type: Array,
+      // required: true,
+      default: () => [],
     },
-  },
-  columnsType: {
-    type: String,
-    // required: true,
-  },
-  columns: {
-    type: Array,
-    // required: true,
-    default: () => [],
-  },
 
-  list: {
-    type: Function,
-    required: true,
-  },
-  //下载文件接口
-  downLoad: {
-    type: Function,
-    required: true,
-  },
+    list: {
+      type: Function,
+      required: true,
+    },
+    //下载文件接口
+    downLoad: {
+      type: Function,
+      required: true,
+    },
 
-  deleteById: {
-    type: Function,
-    required: true,
-  },
-  pointList: {
-    type: Function,
-    // required: true,
-  },
-  designScope: {
-    type: String,
-  },
-  title: {
-    type: String,
-  },
-});
-const { hasPermission } = usePermission();
-let router = useRouter(); //路由
-let resetTable = ref(0);
-let fileType = ref(''); //文件类型
-let editID = ref(0); //文件ID
-const isUpdate = ref(false);
-const record = reactive<Record<string, any>>({});
-provide('formData', record);
-const [registerDeviceModal, { openModal, closeModal }] = useModal();
-const columnList = getTableHeaderColumns(props.columnsType);
-//是否显示文件审批弹窗
-let visibleTj = ref(false);
-//文件审批-弹窗参数
-let formStateTj = reactive({
-  file: '',
-  id: '',
-});
-//文件审批-提交信息弹窗下拉选项数据
-let fileList = reactive<any[]>([]);
-//审批详情弹窗数据
-let visibleSp = ref(false);
-let titleSp = ref('审批详情');
-//审批详情历史数据
-let historySpList = reactive<any[]>([]);
-let imgSrc = ref('');
-//审批-是否显示撤回/驳回按钮
-let isShow = ref(true);
-//审批通过/驳回参数信息
-let spInfo = reactive({});
+    deleteById: {
+      type: Function,
+      required: true,
+    },
+    pointList: {
+      type: Function,
+      // required: true,
+    },
+    designScope: {
+      type: String,
+    },
+    title: {
+      type: String,
+    },
+  });
+  const { hasPermission } = usePermission();
+  let router = useRouter(); //路由
+  let resetTable = ref(0);
+  let fileType = ref(''); //文件类型
+  let editID = ref(0); //文件ID
+  const isUpdate = ref(false);
+  const record = reactive<Record<string, any>>({});
+  provide('formData', record);
+  const [registerDeviceModal, { openModal, closeModal }] = useModal();
+  const columnList = getTableHeaderColumns(props.columnsType);
+  //是否显示文件审批弹窗
+  let visibleTj = ref(false);
+  //文件审批-弹窗参数
+  let formStateTj = reactive({
+    file: '',
+    id: '',
+  });
+  //文件审批-提交信息弹窗下拉选项数据
+  let fileList = reactive<any[]>([]);
+  //审批详情弹窗数据
+  let visibleSp = ref(false);
+  let titleSp = ref('审批详情');
+  //审批详情历史数据
+  let historySpList = reactive<any[]>([]);
+  let imgSrc = ref('');
+  //审批-是否显示撤回/驳回按钮
+  let isShow = ref(true);
+  //审批通过/驳回参数信息
+  let spInfo = reactive({});
 
-//审批-撤销
-let visibleCx = ref(false);
-let revokeDes = ref('');
-let cxInfo = reactive({});
+  //审批-撤销
+  let visibleCx = ref(false);
+  let revokeDes = ref('');
+  let cxInfo = reactive({});
 
-//权限编辑弹窗信息
-let visiblePermission = ref(false)
-let titlePermission = ref('权限编辑')
-let formStateQx = reactive({
-  filePerm: ''
-})
-let permissionId = ref('')
+  //权限编辑弹窗信息
+  let visiblePermission = ref(false);
+  let titlePermission = ref('权限编辑');
+  let formStateQx = reactive({
+    filePerm: '',
+  });
+  let permissionId = ref('');
 
-let userStore = useUserStore(); //获取用户信息
-let userName = unref(userStore.getUserInfo).username;
+  let userStore = useUserStore(); //获取用户信息
+  let userName = unref(userStore.getUserInfo).username;
 
-// 列表页面公共参数、方法
-const { tableContext, doRequest } = useListPage({
-  designScope: props.designScope,
-  tableProps: {
-    title: props.title,
-    api: props.list,
-    columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
-    // size: 'small',
-    bordered: false,
-    scroll: { y: 620 },
-    // formConfig: {
-    //   // labelWidth: 100,
-    //   labelAlign: 'left',
-    //   labelCol: {
-    //     xs: 24,
-    //     sm: 24,
-    //     md: 24,
-    //     lg: 9,
-    //     xl: 7,
-    //     xxl: 5,
-    //   },
-    //   schemas: props.searchFormSchema as any[],
-    // },
-    striped: true,
-    showIndexColumn: true, //是否显示序列号
-    // actionColumn: {
-    //   width: 200,
-    // },
-    showActionColumn: false,
-    useSearchForm: false, //不使用查询条件
-    // pagination: false, //不使用分页组件
-    beforeFetch: (params) => {
-      params.parentId = props.nodeParam.id ? props.nodeParam.id : '';
-      params.selectFlag = props.nodeParam.id ? false : true;
-      params.likeFileName = props.searchParam.fileName ? props.searchParam.fileName : '';
-      params.fileSuffix = props.searchParam.fileType ? '.' + props.searchParam.fileType : '';
-      params.bpmStatus = props.selfParam.bpmStatus ? props.selfParam.bpmStatus : '';
-      params.sysOrgCode = props.selfParam.sysOrgCode ? props.selfParam.sysOrgCode : '';
+  // 列表页面公共参数、方法
+  const { tableContext, doRequest } = useListPage({
+    designScope: props.designScope,
+    tableProps: {
+      title: props.title,
+      api: props.list,
+      columns: props.columns.length > 0 ? (props.columns as any[]) : columnList,
+      // size: 'small',
+      bordered: false,
+      scroll: { y: 620 },
+      // formConfig: {
+      //   // labelWidth: 100,
+      //   labelAlign: 'left',
+      //   labelCol: {
+      //     xs: 24,
+      //     sm: 24,
+      //     md: 24,
+      //     lg: 9,
+      //     xl: 7,
+      //     xxl: 5,
+      //   },
+      //   schemas: props.searchFormSchema as any[],
+      // },
+      striped: true,
+      showIndexColumn: true, //是否显示序列号
+      // actionColumn: {
+      //   width: 200,
+      // },
+      showActionColumn: false,
+      useSearchForm: false, //不使用查询条件
+      // pagination: false, //不使用分页组件
+      beforeFetch: (params) => {
+        params.parentId = props.nodeParam.id ? props.nodeParam.id : '';
+        params.selectFlag = props.nodeParam.id ? false : true;
+        params.likeFileName = props.searchParam.fileName ? props.searchParam.fileName : '';
+        params.fileSuffix = props.searchParam.fileType ? '.' + props.searchParam.fileType : '';
+        params.bpmStatus = props.selfParam.bpmStatus ? props.selfParam.bpmStatus : '';
+        params.sysOrgCode = props.selfParam.sysOrgCode ? props.selfParam.sysOrgCode : '';
+      },
     },
-  },
-});
-
-//注册table数据
-const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
-// 审批提交
-function handleTo(data) {
-  visibleTj.value = true;
-  fileList.length = 0;
-  props.submitInfo.forEach((el) => {
-    fileList.push({ label: el.name, value: el.id });
   });
-  formStateTj.id = data.id;
-}
-//确认提交
-async function handleTjOk() {
-  if (formStateTj.file) {
-    let res = await commit({ procDefId: formStateTj.file, tableId: formStateTj.id, firstGateway: true });
-    if (res == '提交成功') {
+
+  //注册table数据
+  const [registerTable, { reload }, { selectedRowKeys }] = tableContext;
+  // 审批提交
+  function handleTo(data) {
+    visibleTj.value = true;
+    fileList.length = 0;
+    props.submitInfo.forEach((el) => {
+      fileList.push({ label: el.name, value: el.id });
+    });
+    formStateTj.id = data.id;
+  }
+  //确认提交
+  async function handleTjOk() {
+    if (formStateTj.file) {
+      let res = await commit({ procDefId: formStateTj.file, tableId: formStateTj.id, firstGateway: true });
+      if (res == '提交成功') {
+        message.success(res);
+        visibleTj.value = false;
+        resetTable.value = new Date().getTime();
+      } else {
+        message.warning(res.message);
+      }
+    } else {
+      message.warning('请先选择要提交的文件!');
+    }
+  }
+  //取消提交
+  function handleTjCancel() {
+    formStateTj.file = '';
+    visibleTj.value = false;
+  }
+  //审批详情点击
+  function handleSpDetail(data) {
+    visibleSp.value = true;
+    getTodoTaskShow({ tableId: data.id, tableName: data.tableName });
+    getHistoricFlowNewList({ tableId: data.id, tableName: data.tableName });
+    getHighlightImgNewList({ tableId: data.id, tableName: data.tableName });
+  }
+  //审批详情-审批历史列表
+  async function getHistoricFlowNewList(params) {
+    historySpList.length = 0;
+    let res = await historicFlowNew({ ...params });
+    if (res.length != 0) {
+      res.forEach((el) => {
+        historySpList.push({
+          name: el.name,
+          username: el.assignees[0].username,
+          deleteReason: el.deleteReason,
+          comment: el.comment,
+          startTime: el.startTime,
+          endTime: el.endTime,
+          status: el.assignees[0].isExecutor ? '已处理' : '待处理',
+        });
+      });
+    }
+  }
+  //审批详情-流程轨迹
+  async function getHighlightImgNewList(params) {
+    let res = await getHighlightImgNew({ ...params });
+    let imageUrl = window.URL.createObjectURL(res);
+    imgSrc.value = imageUrl;
+  }
+  //判断是否显示撤回/驳回按钮
+  async function getTodoTaskShow(params) {
+    let res = await getTodoTask({ ...params });
+    spInfo = Object.assign({}, res);
+    if (res.result) {
+      isShow.value = true;
+    } else {
+      isShow.value = false;
+    }
+  }
+  //审批通过/驳回弹窗关闭
+  function spClose() {
+    visibleSp.value = false;
+    resetTable.value = new Date().getTime();
+  }
+  //审批-撤回提交
+  function handleSpRevoke(data) {
+    visibleCx.value = true;
+    cxInfo = Object.assign({}, data);
+  }
+  //审批-撤销-确定
+  async function handleCxOk() {
+    let res = await getCancelNew({ reason: revokeDes.value, tableId: cxInfo.id, tableName: cxInfo.tableName });
+    if (res == '操作成功') {
       message.success(res);
-      visibleTj.value = false;
-      resetTable.value = new Date().getTime();
     } else {
       message.warning(res.message);
     }
-  } else {
-    message.warning('请先选择要提交的文件!');
+    visibleCx.value = false;
+    revokeDes.value = '';
+    resetTable.value = new Date().getTime();
   }
-}
-//取消提交
-function handleTjCancel() {
-  formStateTj.file = '';
-  visibleTj.value = false;
-}
-//审批详情点击
-function handleSpDetail(data) {
-  visibleSp.value = true;
-  getTodoTaskShow({ tableId: data.id, tableName: data.tableName });
-  getHistoricFlowNewList({ tableId: data.id, tableName: data.tableName });
-  getHighlightImgNewList({ tableId: data.id, tableName: data.tableName });
-}
-//审批详情-审批历史列表
-async function getHistoricFlowNewList(params) {
-  historySpList.length = 0;
-  let res = await historicFlowNew({ ...params });
-  if (res.length != 0) {
-    res.forEach((el) => {
-      historySpList.push({
-        name: el.name,
-        username: el.assignees[0].username,
-        deleteReason: el.deleteReason,
-        comment: el.comment,
-        startTime: el.startTime,
-        endTime: el.endTime,
-        status: el.assignees[0].isExecutor ? '已处理' : '待处理',
+  //审批-撤销-取消
+  function handleCxCancel() {
+    revokeDes.value = '';
+    visibleCx.value = false;
+  }
+  /**
+   * 编辑事件
+   */
+  function handleEdit(data) {
+    isUpdate.value = true;
+    Object.assign(record, toRaw(data));
+    let index = record.fileSuffix.indexOf('.');
+    fileType.value = record.fileSuffix.substring(index + 1);
+    editID.value = record.id;
+
+    // 根据文件后缀名打开不同的模态框
+    if (['.dwg', '.mxcad'].includes(data.fileSuffix)) {
+      openCADModal(true, {
+        record,
       });
-    });
+    } else {
+      openModal(true, {
+        record,
+      });
+    }
+  }
+
+  /**
+   * 删除事件
+   */
+  async function handleDelete(record) {
+    await props.deleteById({ id: record.id }, reload);
+  }
+  //权限编辑
+  function handlePermission(record) {
+    visiblePermission.value = true;
+    formStateQx.filePerm = record.filePerm;
+    permissionId.value = record.id;
   }
-}
-//审批详情-流程轨迹
-async function getHighlightImgNewList(params) {
-  let res = await getHighlightImgNew({ ...params });
-  let imageUrl = window.URL.createObjectURL(res);
-  imgSrc.value = imageUrl;
-}
-//判断是否显示撤回/驳回按钮
-async function getTodoTaskShow(params) {
-  let res = await getTodoTask({ ...params });
-  spInfo = Object.assign({}, res);
-  if (res.result) {
-    isShow.value = true;
-  } else {
-    isShow.value = false;
+  //编辑权限-确定
+  async function confirmQx() {
+    await updataFileParam({ id: permissionId.value, filePerm: formStateQx.filePerm }, reload);
+    visiblePermission.value = false;
   }
-}
-//审批通过/驳回弹窗关闭
-function spClose() {
-  visibleSp.value = false;
-  resetTable.value = new Date().getTime();
-}
-//审批-撤回提交
-function handleSpRevoke(data) {
-  visibleCx.value = true;
-  cxInfo = Object.assign({}, data);
-}
-//审批-撤销-确定
-async function handleCxOk() {
-  let res = await getCancelNew({ reason: revokeDes.value, tableId: cxInfo.id, tableName: cxInfo.tableName });
-  if (res == '操作成功') {
-    message.success(res);
-  } else {
-    message.warning(res.message);
+  //编辑权限-取消
+  function cancelQx() {
+    visiblePermission.value = false;
+    formStateQx.filePerm = '';
   }
-  visibleCx.value = false;
-  revokeDes.value = '';
-  resetTable.value = new Date().getTime();
-}
-//审批-撤销-取消
-function handleCxCancel() {
-  revokeDes.value = '';
-  visibleCx.value = false;
-}
-/**
- * 编辑事件
- */
-function handleEdit(data) {
-  isUpdate.value = true;
-  Object.assign(record, toRaw(data));
-  let index = record.fileSuffix.indexOf('.');
-  fileType.value = record.fileSuffix.substring(index + 1);
-  editID.value = record.id;
 
-  // 根据文件后缀名打开不同的模态框
-  if (['.dwg', '.mxcad'].includes(data.fileSuffix)) {
-    openCADModal(true, {
-      record,
-    });
-  } else {
-    openModal(true, {
-      record,
+  //下载文件
+  function handleDownLoad(record) {
+    props.downLoad({ id: record.id }).then((res) => {
+      let filename = `${record.fileName}`;
+      downFilePublic(res, filename);
     });
   }
-}
-
-/**
- * 删除事件
- */
-async function handleDelete(record) {
-  await props.deleteById({ id: record.id }, reload);
-}
-//权限编辑
-function handlePermission(record) {
-  visiblePermission.value = true
-  formStateQx.filePerm = record.filePerm  
-  permissionId.value = record.id
-}
-//编辑权限-确定
-async function confirmQx() {
-  await updataFileParam({ id: permissionId.value, filePerm: formStateQx.filePerm },reload)
-  visiblePermission.value = false
-}
-//编辑权限-取消
-function cancelQx() {
-  visiblePermission.value = false
-  formStateQx.filePerm = ''
-}
-
-//下载文件
-function handleDownLoad(record) {
-  props.downLoad({ id: record.id }).then((res) => {
-    let filename = `${record.fileName}`;
-    downFilePublic(res, filename);
-  });
-}
-// 下载公用方法
-function downFilePublic(content, fileName) {
-  const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
-  // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
-  // IE10以上支持blob但是依然不支持download
-  if ('download' in document.createElement('a')) {
-    // 支持a标签download的浏览器
-    const link = document.createElement('a'); // 创建a标签
-    link.download = fileName; // a标签添加属性
-    link.style.display = 'none';
-    link.href = URL.createObjectURL(blob);
-    document.body.appendChild(link);
-    link.click(); // 执行下载
-    URL.revokeObjectURL(link.href); // 释放url
-    document.body.removeChild(link); // 释放标签
-  } else {
-    // 其他浏览器
-    navigator.msSaveBlob(blob, fileName);
+  // 下载公用方法
+  function downFilePublic(content, fileName) {
+    const blob = new Blob([content], { type: 'application/xlsx;charset=UTF-8' }); // 构造一个blob对象来处理数据
+    // 对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性
+    // IE10以上支持blob但是依然不支持download
+    if ('download' in document.createElement('a')) {
+      // 支持a标签download的浏览器
+      const link = document.createElement('a'); // 创建a标签
+      link.download = fileName; // a标签添加属性
+      link.style.display = 'none';
+      link.href = URL.createObjectURL(blob);
+      document.body.appendChild(link);
+      link.click(); // 执行下载
+      URL.revokeObjectURL(link.href); // 释放url
+      document.body.removeChild(link); // 释放标签
+    } else {
+      // 其他浏览器
+      navigator.msSaveBlob(blob, fileName);
+    }
   }
-}
 
-//报表监测跳转
-function handlerJc(data) {
-  switch (data) {
-    case '1600000000000000001':
-      //粉尘报表
-      router.push('/dustDayReport/home');
-      break;
-    case '1500000000000000002':
-      //束管日报
-      router.push('/bundleDayReport/home');
-      break;
-    case '1500000000000000003':
-      //束管色谱仪
-      router.push('/bundleSpyDayReport/home');
-      break;
-    case '1400000000000000002':
-      //瓦斯日报巡检分析
-      router.push('/gas/gasDayReport/home');
-      break;
-    case '1400000000000000003':
-      //瓦斯日报巡检分析
-      router.push('/gas/gasDayReport/home');
-      break;
+  //报表监测跳转
+  function handlerJc(data) {
+    switch (data) {
+      case '1600000000000000001':
+        //粉尘报表
+        router.push('/dustDayReport/home');
+        break;
+      case '1500000000000000002':
+        //束管日报
+        router.push('/bundleDayReport/home');
+        break;
+      case '1500000000000000003':
+        //束管色谱仪
+        router.push('/bundleSpyDayReport/home');
+        break;
+      case '1400000000000000002':
+        //瓦斯日报巡检分析
+        router.push('/gas/gasDayReport/home');
+        break;
+      case '1400000000000000003':
+        //瓦斯日报巡检分析
+        router.push('/gas/gasDayReport/home');
+        break;
+    }
   }
-}
-// CAD预览相关的逻辑
-const [registerCADModal, { openModal: openCADModal }] = useModal();
+  // CAD预览相关的逻辑
+  const [registerCADModal, { openModal: openCADModal }] = useModal();
 
-defineExpose({
-  doRequest,
-});
+  defineExpose({
+    doRequest,
+  });
 </script>
 
 <style scoped lang="less">
-@ventSpace: zxm;
-
-@vent-table-no-hover: #00bfff10;
+  @ventSpace: zxm;
 
-:deep(.@{ventSpace}-table-cell-row-hover) {
-  background: #264d8833 !important;
-}
+  @vent-table-no-hover: #00bfff10;
 
-:deep(.@{ventSpace}-table-row-selected) {
-  background: #268bc522 !important;
-}
+  :deep(.@{ventSpace}-table-cell-row-hover) {
+    background: #264d8833 !important;
+  }
 
-:deep(.@{ventSpace}-table-tbody > tr > td) {
-  background-color: #0dc3ff05;
-}
+  :deep(.@{ventSpace}-table-row-selected) {
+    background: #268bc522 !important;
+  }
 
-:deep(.jeecg-basic-table-row__striped) {
-  td {
-    background-color: @vent-table-no-hover !important;
+  :deep(.@{ventSpace}-table-tbody > tr > td) {
+    background-color: #0dc3ff05;
   }
-}
 
-::v-deep .zxm-table-title {
-  display: none;
-}
+  :deep(.jeecg-basic-table-row__striped) {
+    td {
+      background-color: @vent-table-no-hover !important;
+    }
+  }
 
-.zxm-form {
-  padding: 20px 0px !important;
-  box-sizing: border-box;
-}
+  ::v-deep .zxm-table-title {
+    display: none;
+  }
 
-.opertion-btn {
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  padding: 0px 20px;
+  .zxm-form {
+    padding: 20px 0px !important;
+    box-sizing: border-box;
+  }
 
-}
+  .opertion-btn {
+    width: 100%;
+    display: flex;
+    justify-content: flex-end;
+    padding: 0px 20px;
+  }
 
-a[disabled] {
-  color: #ccc;
-}
+  a[disabled] {
+    color: #ccc;
+  }
 </style>

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