Merge branch 'master' of http://39.97.59.228:8013/hrx/mky-vent-base

src/router/routes/basic.ts

@@ -65,7 +65,7 @@ export const QIANKUN_ROUTE: AppRouteRecordRaw = {
   },
   children: [
     {
-      path: '/micro-vent-3dModal/gas/home',
+      path: '/micro-vent-3dModal/configurable/gasHome/gasS/home',
       name: 'gas-home',
       component: () => import('/@/views/vent/gas/gasHome/index.vue'),
       meta: {
@@ -76,7 +76,7 @@ export const QIANKUN_ROUTE: AppRouteRecordRaw = {
       ver: '1',
     },
     {
-      path: '/micro-vent-2dModal/gas/home',
+      path: '/micro-vent-2dModal/configurable/gasHome/gasS/home',
       name: '2dModal-gas-home',
       component: () => import('/@/views/vent/gas/gasHome/index.vue'),
       meta: {
@@ -98,7 +98,7 @@ export const QIANKUN_ROUTE: AppRouteRecordRaw = {
       ver: '1',
     },
     {
-      path: '/micro-vent-3dModal/gas-pipe-net/home',
+      path: '/micro-vent-3dModal/configurable/gasPipeNet/gasS/home',
       name: 'gas-pipe-net-home',
       component: () => import('/@/views/vent/gas/gasPipeNet/index.vue'),
       meta: {
@@ -109,7 +109,7 @@ export const QIANKUN_ROUTE: AppRouteRecordRaw = {
       ver: '1',
     },
     {
-      path: '/micro-vent-2dModal/gas-pipe-net/home',
+      path: '/micro-vent-2dModal/configurable/gasPipeNet/gasS/home',
       name: '2dModal-gas-pipe-net-home',
       component: () => import('/@/views/vent/gas/gasPipeNet/index.vue'),
       meta: {

src/views/system/role/components/RolePermissionDrawer.vue

@@ -33,7 +33,7 @@
     >
       <template #title="{ slotTitle, ruleFlag }">
         {{ slotTitle }}
-        <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red"></Icon>
+        <Icon v-if="ruleFlag" icon="ant-design:align-left-outlined" style="margin-left: 5px; color: red" />
       </template>
     </BasicTree>
     <!--右下角按钮-->
@@ -133,28 +133,28 @@
       lastpermissionIds: unref(defaultCheckedKeys).join(','),
     };
     //update-begin-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
-    if(loading.value===false){
-      await doSave(params)
-    }else{
+    if (loading.value === false) {
+      await doSave(params);
+    } else {
       console.log('请等待上次执行完毕!');
     }
-    if(exit){
+    if (exit) {
       // 如果关闭
       closeDrawer();
-    }else{
+    } else {
       // 没有关闭需要重新获取选中数据
       const permResult = await queryRolePermission({ roleId: unref(roleId) });
       defaultCheckedKeys.value = permResult;
     }
   }
-  
+
   // VUE角色授权重复保存 #352
   async function doSave(params) {
     loading.value = true;
     await saveRolePermission(params);
-    setTimeout(()=>{
+    setTimeout(() => {
       loading.value = false;
-    }, 500)
+    }, 500);
   }
   //update-end-author:taoyan date:2023-2-11 for: issues/352 VUE角色授权重复保存
 
@@ -193,13 +193,13 @@
   }
   .more-icon {
     font-size: 20px !important;
-    color: black;
+    color: rgb(255, 255, 255);
     display: inline-flex;
     float: right;
     margin-right: 2px;
     cursor: pointer;
   }
-  :deep(.jeecg-tree-header){
+  :deep(.jeecg-tree-header) {
     border-bottom: none;
   }
   //update-end---author:wangshuai ---date:20230202  for：抽屉弹窗标题图标下拉样式------------

src/views/vent/deviceManager/comment/warningTabel/index1.vue

@@ -20,7 +20,7 @@
       </a-table>
     </div>
   </div>
-  <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :form-schemas="formSchemas" :monitor-type="monitorType" />
+  <BaseModal @register="register" @add="onSubmit" @update="onSubmit" :form-schemas="formSchemas" :monitor-type="valueTypes" />
 </template>
 
 <script lang="ts" setup>
@@ -34,6 +34,8 @@
   const props = defineProps({
     deviceId: { type: String },
     monitorType: { type: Number, default: 1 },
+    /** 获取点位接口的参数 */
+    valueTypes: { type: String, default: '1' },
   });
 
   const formSchemas = controlFormSchemas({ id: props.deviceId });

src/views/vent/gas/gasHome/index.vue

@@ -3,7 +3,9 @@
   <div class="scene-box" style="position: relative">
     <CustomHeader> 瓦斯抽采综合管控系统 </CustomHeader>
     <template v-if="activeKey == 'gasHome'">
-      <VentModal />
+      <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
+        <SubApp />
+      </div>
       <CustomBadges class="w-1710px ml-100px mt-50px" :badges="headerBadges" />
       <GasMonitor v-if="dataSource" :dataSource="dataSource" />
     </template>
@@ -15,13 +17,12 @@
   import CustomHeader from '/@/components/vent/customHeader.vue';
   import CustomBadges from './components/customHeader.vue';
   import GasMonitor from './components/gasMonitor.vue';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { gasSystem } from './gasHome.api';
-  import { unmountMicroApps } from '/@/qiankun';
   import BottomMenu from '/@/views/vent/comment/components/bottomMenu.vue';
   import { navList } from './gasHome.data';
   import { useRouter } from 'vue-router';
   import { get } from '@/utils/ventutil';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
 
   const router = useRouter();
   const activeKey = ref('gasHome');
@@ -37,7 +38,7 @@
     }
     if (activeValue == 'gasPiping') {
       const newPage = router.resolve({
-        path: '/micro-vent-3dModal/gas-pipe-net/home',
+        path: '/micro-vent-3dModal/configurable/gasPipeNet/gasS/home',
         query: {
           type: 'sysMonitor',
           deviceType: 'pipingpage',
@@ -51,7 +52,7 @@
     }
     if (activeValue == 'drillDesign') {
       const newPage = router.resolve({
-        path: '/micro-vent-3dModal/modelchannel/model3D/home',
+        path: '/micro-vent-3dModal/dashboard/analysis',
         query: {
           type: 'model3D',
           deviceType: 'model3D',
@@ -89,9 +90,6 @@
     dataSource.value = await gasSystem();
   });
   onMounted(() => {});
-  onBeforeUnmount(async () => {
-    await unmountMicroApps(['/micro-vent-3dModal']);
-  });
 </script>
 
 <style lang="less" scoped>

src/views/vent/gas/gasPipeNet/index.vue

@@ -3,7 +3,7 @@
   <div class="gas-pipe-net">
     <CustomHeader> 瓦斯管网联合解算 </CustomHeader>
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
+      <SubApp />
     </div>
 
     <ModuleCommon
@@ -88,7 +88,6 @@
   import { moduleConfigs } from './gasPipeNet.data';
   import GasPipeTable from '../../monitorManager/comment/GasPipeTable.vue';
   import MonitorTable from '../../monitorManager/comment/MonitorTable.vue';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
   import { getTableList, list } from './gasPipeNet.api';
   import { get } from 'lodash-es';
   import { getActions } from '/@/qiankun/state';
@@ -96,6 +95,7 @@
   import { BasicModal, useModal } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
   import { message } from 'ant-design-vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
 
   const scroll = ref<{ x: true; y: number }>({ x: true, y: 202 });
   const activeKey = ref('1');

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

@@ -348,9 +348,32 @@ onMounted(() => {
     background-size: 100% 100%;
     margin-top: 50px;
   }
-  .test {
-    background: url('./test.png') no-repeat;
-    background-size: 100% 100%;
+
+  #spray3D {
+    pointer-events: all;
+  }
+
+  .spray-wrapper :deep(.list-item_L .list-item__icon_L) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
+  }
+  .spray-wrapper :deep(.list-item_N:nth-child(1)) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
+  }
+  .spray-wrapper :deep(.list-item_N:nth-child(2)) {
+    background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
+  }
+  .company-home {
+    background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
+    width: 100%;
+    height: 100%;
+    color: @white;
+    position: relative;
+    .border {
+      margin-top: 50px;
+    }
+    .test {
+      background: url('./test.png') no-repeat;
+      background-size: 100% 100%;
+    }
   }
-}
 </style>

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

@@ -1,128 +0,0 @@
-<!-- eslint-disable vue/multi-word-component-names -->
-<template>
-  <div class="company-home">
-    <div class="border">
-      <customHeader :fieldNames="{ label: 'systemname', value: 'id', options: 'children' }">皮带巷智能管控</customHeader>
-      <div class="top-bg">
-        <BeltNav />
-      </div>
-      <div class="box-container">
-        <ModuleCommon
-          v-for="cfg in configs"
-          :key="cfg.deviceType"
-          :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData"
-          :module-name="cfg.moduleName"
-          :device-type="cfg.deviceType"
-          :page-type="cfg.pageType"
-          :data="data"
-          :visible="true"
-        />
-      </div>
-      <!-- 巷道模型组件 -->
-    </div>
-  </div>
-</template>
-<script setup lang="ts">
-import { onMounted, ref } from 'vue';
-import customHeader from './components/customHeader-belt.vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import { testYjkf } from './configurable.data';
-import ModuleCommon from './components/ModuleCommonBelt.vue';
-import { getSystem } from './configurable.api';
-import { message, Modal } from 'ant-design-vue';
-import BeltNav from './components/BeltNav.vue';
-import { doorMock } from './mock.ts';
-// import { BDFireMock } from './mock';
-const { configs, fetchConfigs } = useInitConfigs();
-const { updateEnhancedConfigs, data, updateData } = useInitPage('皮带巷智能管控');
-const readData = ref([
-  {
-    id: 1,
-    position: '16联巷短路风门',
-    frontStatus: '关闭',
-    backStatus: '关闭',
-    networkStatus: '在线',
-    modelImg: '',
-    open: true,
-  },
-  {
-    id: 2,
-    position: '18联巷短路风门',
-    frontStatus: '打开',
-    backStatus: '打开',
-    networkStatus: '在线',
-    modelImg: '',
-    open: true,
-  },
-  {
-    id: 3,
-    position: '23联巷短路风门',
-    frontStatus: '关闭',
-    backStatus: '关闭',
-    networkStatus: '在线',
-    modelImg: '',
-    open: false,
-  },
-]);
-function refresh() {
-  fetchConfigs('belt').then(() => {
-    configs.value = testYjkf;
-    getSystem({}).then(updateData);
-    // getDataSource();
-  });
-}
-function initInterval() {
-  setInterval(() => {
-    getSystem({}).then(updateData);
-  }, 60000);
-}
-onMounted(async () => {
-  refresh();
-  initInterval();
-});
-</script>
-
-<style lang="less" scoped>
-.spray-wrapper {
-  width: 100%;
-  height: 100%;
-  background-image: url('/@/assets/images/beltFire/baseMap.png');
-  background-size: cover;
-}
-
-#spray3D {
-  pointer-events: all;
-}
-
-.spray-wrapper :deep(.list-item_L .list-item__icon_L) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-icon-file.png');
-}
-.spray-wrapper :deep(.list-item_N:nth-child(1)) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n5.png');
-}
-.spray-wrapper :deep(.list-item_N:nth-child(2)) {
-  background-image: url('/@/assets/images/home-container/configurable/minehome/list-bg-n6.png');
-}
-.company-home {
-  background: url('/@/assets/images/beltFire/baseMap.png') no-repeat center;
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  .border {
-    width: 100%;
-    height: 94%;
-    background: url('/@/assets/images/beltFire/mainbj.png') no-repeat;
-    background-size: 100% 100%;
-    margin-top: 55px;
-  }
-  .top-bg {
-    width: 100%;
-    height: 56px;
-    position: absolute;
-    margin-top: -20px;
-    z-index: 1;
-  }
-}
-</style>

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

@@ -28,65 +28,60 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onMounted } from 'vue';
-import { useRoute } from 'vue-router';
-const emit = defineEmits(['changePage']);
-const props = defineProps({
-  pageType: {
-    type: String,
-    default: '',
-  },
-});
-const route = useRoute(); // 获取路由实例
-// 当前激活菜单
-const activeType = ref('');
-activeType.value = (route.query.pageType as string) || props.pageType || '';
+  import { ref, watch, onMounted } from 'vue';
+  import { useRoute } from 'vue-router';
+  const emit = defineEmits(['changePage']);
+  const props = defineProps({
+    pageType: {
+      type: String,
+      default: '',
+    },
+  });
+  const route = useRoute(); // 获取路由实例
+  // 当前激活菜单
+  const activeType = ref('');
 
-// 导航菜单列表
-const menuList = ref([
-  {
-    name: '防灭火监测与预警',
-    position: 'left',
-    pageType: 'fireMonitor',
-  },
-  {
-    name: '喷淋系统管控',
-    position: 'center',
-    pageType: 'sprayControl',
-  },
-  {
-    name: '应急控风减灾',
-    position: 'center',
-    pageType: 'emergencyControl',
-  },
-  {
-    name: '历史数据',
-    position: 'right',
-    pageType: 'history',
-  },
-]);
+  // 导航菜单列表
+  const menuList = ref([
+    {
+      name: '防灭火监测与预警',
+      position: 'left',
+      pageType: 'fireMonitor',
+    },
+    {
+      name: '喷淋系统管控',
+      position: 'center',
+      pageType: 'sprayControl',
+    },
+    {
+      name: '应急控风减灾',
+      position: 'right',
+      pageType: 'emergencyControl',
+    },
+  ]);
 
-watch(
-  [() => props.pageType, () => route.query.pageType],
-  ([newProp, newRoute]) => {
-    if (newProp) {
-      activeType.value = newProp;
-    } else if (newRoute) {
-      activeType.value = newRoute as string;
-    }
-  },
-  { immediate: true }
-);
+  watch(
+    [() => props.pageType, () => route.query.pageType],
+    ([newProp, newRoute]) => {
+      let currentType = '';
+      if (newProp) {
+        currentType = newProp;
+      } else if (newRoute) {
+        currentType = newRoute as string;
+      }
+      if (currentType) {
+        activeType.value = currentType;
+      }
+    },
+    { immediate: true }
+  );
 
-// 导航点击
-function handleNavClick(data) {
-  const pageType = data.item.pageType;
-  activeType.value = pageType; // 点击立刻更新
-  emit('changePage', pageType);
-}
-onMounted(() => {
-  console.log(activeType.value, '------');
-});
+  // 导航点击
+  function handleNavClick(data) {
+    const pageType = data.item.pageType;
+    activeType.value = pageType; // 点击立刻更新
+    emit('changePage', pageType);
+  }
 </script>
 
 <style scoped lang="less">
@@ -175,35 +170,35 @@ onMounted(() => {
   transition: all 0.2s ease;
 }
 
-.nav-menu-item {
-  color: #59acc7;
-}
-.nav-menu-item:hover {
-  color: #fff;
-}
+  .nav-menu-item {
+    color: #59acc7;
+  }
+  .nav-menu-item:hover {
+    color: #fff;
+  }
 
-.nav-menu-active {
-  color: #fff !important;
-  font-weight: 500;
-}
+  .nav-menu-active {
+    color: #fff !important;
+    font-weight: 500;
+  }
 
-/* 按钮背景 */
-.btn-left {
-  background: url('/@/assets/images/beltFire/yjkf/navBtnLeft-2.png') center / 100% 100% no-repeat;
-}
-.btn-center {
-  background: url('/@/assets/images/beltFire/yjkf/navBtnCenter-2.png') center / 100% 100% no-repeat;
-}
-.btn-right {
-  background: url('/@/assets/images/beltFire/yjkf/navBtnRight-2.png') center / 100% 100% no-repeat;
-}
-.btn-left.nav-menu-active {
-  background-image: url('/@/assets/images/beltFire/yjkf/navBtnLeft-1.png');
-}
-.btn-center.nav-menu-active {
-  background-image: url('/@/assets/images/beltFire/yjkf/navBtnCenter-1.png');
-}
-.btn-right.nav-menu-active {
-  background-image: url('/@/assets/images/beltFire/yjkf/navBtnRight-1.png');
-}
+  /* 按钮背景 */
+  .btn-left {
+    background: url('/@/assets/images/beltFire/yjkf/navBtnLeft-2.png') center / 100% 100% no-repeat;
+  }
+  .btn-center {
+    background: url('/@/assets/images/beltFire/yjkf/navBtnCenter-2.png') center / 100% 100% no-repeat;
+  }
+  .btn-right {
+    background: url('/@/assets/images/beltFire/yjkf/navBtnRight-2.png') center / 100% 100% no-repeat;
+  }
+  .btn-left.nav-menu-active {
+    background-image: url('/@/assets/images/beltFire/yjkf/navBtnLeft-1.png');
+  }
+  .btn-center.nav-menu-active {
+    background-image: url('/@/assets/images/beltFire/yjkf/navBtnCenter-1.png');
+  }
+  .btn-right.nav-menu-active {
+    background-image: url('/@/assets/images/beltFire/yjkf/navBtnRight-1.png');
+  }
 </style>

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

@@ -41,44 +41,44 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, watch } from 'vue';
-import { Config } from '../../../../deviceManager/configurationTable/types';
-import { useInitModule } from '../../hooks/useInit';
-import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
-import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
-const props = defineProps<{
-  moduleData: Config['moduleData'];
-  deviceType: Config['deviceType'];
-  data: any;
-}>();
+  import { ref, watch } from 'vue';
+  import { Config } from '../../../../deviceManager/configurationTable/types';
+  import { useInitModule } from '../../hooks/useInit';
+  import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
+  import { CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
+  const props = defineProps<{
+    moduleData: Config['moduleData'];
+    deviceType: Config['deviceType'];
+    data: any;
+  }>();
 
-const emit = defineEmits(['select']);
+  const emit = defineEmits(['select']);
 
-const visible = ref(false);
-const headerConfig = props.moduleData.header;
-const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
-  props.deviceType,
-  props.moduleData
-);
+  const visible = ref(false);
+  const headerConfig = props.moduleData.header;
+  const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, init } = useInitModule(
+    props.deviceType,
+    props.moduleData
+  );
 
-function selectHandler({ key }) {
-  selectedDeviceID.value = key;
-  emit('select', selectedDevice.value);
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
+  function selectHandler({ key }) {
+    selectedDeviceID.value = key;
     emit('select', selectedDevice.value);
-  },
-  {
-    immediate: true,
   }
-);
+
+  watch(
+    () => props.data,
+    (d) => {
+      init(d);
+      emit('select', selectedDevice.value);
+    },
+    {
+      immediate: true,
+    }
+  );
 </script>
 <style scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
 .costume-header {
   height: 30px;

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

@@ -32,7 +32,6 @@
 </template>
 <script lang="ts" setup>
 import Header from './header.vue';
-import ContentBelt from './contentBelt.vue';
 import Content from '../../components/content.vue';
 // import ModuleLeft from './original/moduleLeft.vue';
 // import ModuleBottom from './original/moduleBottom.vue';
@@ -92,9 +91,15 @@ function redirectTo() {
   openWindow(getFormattedText(props.data, to));
 }
 
+/**
+ * 模块选择切换事件
+ * @param selectedItem
+ */
 function handleSelect(selectedItem: any) {
+  selectedData.value = selectedItem;
   if (!selectedItem) return;
 
+  selectedDeviceID.value = options.value[0]?.value;
   if (selectedItem.id !== undefined && selectedItem.id !== null) {
     // 确保这个 ID 在当前的 options 里存在
     const isValid = options.value.some((opt) => opt.value === selectedItem.id);
@@ -103,12 +108,13 @@ function handleSelect(selectedItem: any) {
     }
   }
 }
-
 watch(
   () => props.data,
   (d) => {
     init(d);
     if (!selectedDeviceID.value) {
+      console.log(selectedDeviceID.value, '------');
+
       selectedDeviceID.value = options.value[0]?.value;
     }
   },

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

@@ -1,125 +0,0 @@
-<template>
-  <!-- 常用模块 -->
-  <Transition
-    :enter-active-class="`animate__animated  animate__fadeIn${capitalizedPosition}`"
-    :leave-active-class="`animate__animated  animate__fadeOut${capitalizedPosition}`"
-  >
-    <ventBox1 v-if="visible" :class="getModuleClass(showStyle)" :style="style" :pageType="pageType">
-      <template v-if="moduleName" #title>
-        <div :class="{ 'cursor-pointer': !!moduleData.to }" style="font-weight: bold; font-style: italic" @click="redirectTo">{{ moduleName }}</div>
-      </template>
-      <template #container>
-        <slot>
-          <Header :deviceType="deviceType" :moduleData="moduleData" :data="data" @select="selectedData = $event" />
-          <Content
-            :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }"
-            :moduleData="moduleData"
-            :data="selectedData"
-            :chartData="chartData"
-          />
-        </slot>
-      </template>
-    </ventBox1>
-  </Transition>
-</template>
-<script lang="ts" setup>
-import Header from './header.vue';
-// import Content from './contentBelt.vue';
-import Content from '../../components/content.vue';
-// import ModuleLeft from './original/moduleLeft.vue';
-// import ModuleBottom from './original/moduleBottom.vue';
-import { computed, ref, watch } from 'vue';
-import ventBox1 from './ventBoxBelt.vue';
-import { openWindow } from '/@/utils';
-import { getFormattedText } from '../../hooks/helper';
-import { useInitModule } from '../../hooks/useInit';
-// import { ModuleProps } from '../types';
-
-const props = defineProps<{
-  pageType: string;
-  /** 配置的详细模块信息 */
-  moduleData: any;
-  /** 配置的详细样式信息 */
-  showStyle: any;
-  /** 该模块配置中的设备标识符 */
-  deviceType: string;
-  /** api返回的数据 */
-  data: any;
-  moduleName: string;
-  visible: boolean;
-  chartData?: any;
-}>();
-defineEmits(['close', 'click']);
-
-const { header } = props.moduleData;
-
-const { selectedDeviceID, selectedDevice, options, init } = useInitModule(props.deviceType, props.moduleData);
-
-const selectedData = ref();
-
-const style = computed(() => {
-  const size = props.showStyle.size;
-  const position = props.showStyle.position;
-  return size + position + 'position: absolute; pointer-events: auto; z-index: 1';
-});
-const pageType = computed(() => {
-  return props.pageType || '';
-});
-const capitalizedPosition = computed(() => {
-  return props.showStyle.position.includes('left') ? 'Left' : 'Right';
-});
-
-// 根据配置里的定位判断应该使用哪个class
-function getModuleClass({ size, position }) {
-  const [_, width] = size.match(/width:([0-9]+)px/) || [];
-  if (position.includes('bottom') || parseInt(width) > 800) {
-    return 'module-common module-common-longer';
-  }
-  return 'module-common';
-}
-
-function redirectTo() {
-  const { to } = props.moduleData;
-  if (!to) return;
-  openWindow(getFormattedText(props.data, to));
-}
-
-watch(
-  () => props.data,
-  (d) => {
-    init(d);
-    if (!selectedDeviceID.value) {
-      selectedDeviceID.value = options.value[0]?.value;
-    }
-  },
-  {
-    immediate: true,
-  }
-);
-</script>
-<style lang="less" scoped>
-@import '/@/design/theme.less';
-
-.module-common .box1-center {
-  height: calc(100% - 48px);
-}
-
-:deep(.box1-center) {
-  height: calc(100% - 48px);
-}
-:deep(.box1-center > .box-container) {
-  height: 100%;
-  padding: 0 !important;
-  width: 100% !important;
-}
-.module-common-longer {
-  :deep(.box1-top) {
-    --image-box1-top: url('/@/assets/images/beltFire/1-1.png');
-    background-image: url('/@/assets/images/beltFire/1-1.png');
-  }
-  :deep(.box1-bottom) {
-    --image-box1-bottom: url('/@/assets/images/beltFire/1-2.png');
-    background-image: url('/@/assets/images/beltFire/1-2.png');
-  }
-}
-</style>

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

@@ -22,134 +22,135 @@
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
-import { Decoration5 } from '@kjgl77/datav-vue3';
-export default defineComponent({
-  name: 'CustomHeader',
-  components: { Decoration5 },
-  props: {
-    optionValue: {
-      type: String,
+  import { defineComponent, computed } from 'vue';
+  import { Decoration5 } from '@kjgl77/datav-vue3';
+  export default defineComponent({
+    name: 'CustomHeader',
+    components: { Decoration5 },
+    props: {
+      optionValue: {
+        type: String,
+      },
+      fieldNames: {
+        type: Object,
+        default: () => {},
+      },
+      options: {
+        type: Array,
+        default: () => [],
+      },
     },
-    fieldNames: {
-      type: Object,
-      default: () => {},
+    emits: ['change'],
+    setup(props, { emit }) {
+      const currentTitleValue = computed(() => props.optionValue);
+      // 标题选择
+      function handleTitleChange(value) {
+        emit('change', value);
+      }
+      return {
+        currentTitleValue,
+        handleTitleChange,
+      };
     },
-    options: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  emits: ['change'],
-  setup(props, { emit }) {
-    const currentTitleValue = computed(() => props.optionValue);
-    // 标题选择
-    function handleTitleChange(value) {
-      emit('change', value);
-    }
-    return {
-      currentTitleValue,
-      handleTitleChange,
-    };
-  },
-});
+  });
 </script>
 <style lang="less">
-@import '/@/design/vent/modal.less';
+  @import '/@/design/vent/modal.less';
 
-.@{ventSpace}-select-dropdown.drop {
-  background-color: transparent !important;
+  .@{ventSpace}-select-dropdown.drop {
+    background-color: transparent !important;
 
-  .@{ventSpace}-select-item-option-selected,
-  .@{ventSpace}-select-item-option-active {
-    background-color: #ffffff33 !important;
-  }
-  .@{ventSpace}-select-item {
-    color: inherit;
-    &:hover {
+    .@{ventSpace}-select-item-option-selected,
+    .@{ventSpace}-select-item-option-active {
       background-color: #ffffff33 !important;
     }
-  }
-  .@{ventSpace}-select-tree {
-    .@{ventSpace}-select-tree-treenode {
+    .@{ventSpace}-select-item {
       color: inherit;
+      &:hover {
+        background-color: #ffffff33 !important;
+      }
     }
-    .@{ventSpace}-select-tree-switcher-icon {
-      color: inherit;
+    .@{ventSpace}-select-tree {
+      .@{ventSpace}-select-tree-treenode {
+        color: inherit;
+      }
+      .@{ventSpace}-select-tree-switcher-icon {
+        color: inherit;
+      }
     }
   }
-}
 </style>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@ventSpace: zxm;
+  @import '/@/design/theme.less';
+  @ventSpace: zxm;
 
-.vent-custom-header {
-  --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
-  --image-select-bg: url('/@/assets/images/vent/home/select-bg.png');
-  width: 100%;
-  position: relative;
-  z-index: 9999;
-  pointer-events: none;
-  .vent-home-header {
+  .vent-custom-header {
+    --image-vent-header1: url('/@/assets/images/vent/vent-header1.png');
+    --image-select-bg: url('/@/assets/images/vent/home/select-bg.png');
     width: 100%;
-    position: fixed;
-    top: 0;
-    background: var(--image-vent-header1) no-repeat;
-    height: 89px;
-    background-size: contain;
-    display: flex;
-    justify-content: center;
-    .header-icon {
-      margin-top: 45px;
-    }
-    .header-text {
-      position: fixed;
-      top: 5px;
-      color: #fff;
-      font-size: 32px;
-      font-family: 'ysbtFont';
-      background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
-      -webkit-background-clip: text;
-      color: transparent;
-    }
-  }
-  .container-title {
-    width: 380px;
-    height: 34px;
-    top: 0px;
-    left: 20px;
-    // background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
-    background: var(--image-select-bg) no-repeat;
-    background-size: contain;
-    padding: 0 0 0 20px;
-    // padding: 0 0 0 180px;
-    font-size: 20px;
-    pointer-events: auto;
     position: relative;
     z-index: 9999;
-    .title-select {
-      width: 340px;
-      position: absolute;
-
+    pointer-events: none;
+    height: 60px;
+    .vent-home-header {
+      width: 100%;
+      position: fixed;
       top: 0;
-      // left: 160px;
+      background: var(--image-vent-header1) no-repeat;
+      height: 89px;
+      background-size: contain;
+      display: flex;
+      justify-content: center;
+      .header-icon {
+        margin-top: 45px;
+      }
+      .header-text {
+        position: fixed;
+        top: 5px;
+        color: #fff;
+        font-size: 32px;
+        font-family: 'ysbtFont';
+        background-image: linear-gradient(#ffffff 50%, @vent-base-light-bg);
+        -webkit-background-clip: text;
+        color: transparent;
+      }
     }
-  }
-}
-:deep(.zxm-select) {
-  width: 300px;
-  .@{ventSpace}-select-selector {
-    background: transparent !important;
-    border: none !important;
-    box-shadow: none !important;
-    .zxm-select-selection-item {
-      color: #fff !important;
+    .container-title {
+      width: 380px;
+      height: 34px;
+      top: 0px;
+      left: 20px;
+      // background: url('/@/assets/images/vent/new-home/container-title-bg.png') no-repeat;
+      background: var(--image-select-bg) no-repeat;
+      background-size: contain;
+      padding: 0 0 0 20px;
+      // padding: 0 0 0 180px;
       font-size: 20px;
+      pointer-events: auto;
+      position: relative;
+      z-index: 9999;
+      .title-select {
+        width: 340px;
+        position: absolute;
+
+        top: 0;
+        // left: 160px;
+      }
     }
   }
-  .@{ventSpace}-select-arrow {
-    color: #fff !important;
+  :deep(.zxm-select) {
+    width: 300px;
+    .@{ventSpace}-select-selector {
+      background: transparent !important;
+      border: none !important;
+      box-shadow: none !important;
+      .zxm-select-selection-item {
+        color: #fff !important;
+        font-size: 20px;
+      }
+    }
+    .@{ventSpace}-select-arrow {
+      color: #fff !important;
+    }
   }
-}
 </style>

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

@@ -231,11 +231,12 @@
   /* 主面板（科技风 + 状态颜色） */
   /* ====================================== */
   .monitor-panel {
-    width: 760px;
-    background: linear-gradient(145deg, rgba(10, 30, 60, 0.95), rgba(15, 40, 80, 0.9));
+    width: 800px;
+    background: linear-gradient(0deg, rgba(1, 38, 65, 0.8), rgba(0, 55, 92, 0.55));
+    /* background: rgba(0, 47, 85, 0.7); */
     border: 5px solid #40a9ff;
     border-radius: 16px;
-    padding: 28px 24px 40px;
+    padding: 40px 30px;
     box-sizing: border-box;
     position: absolute;
     font-family: 'Microsoft YaHei', 'PingFang SC', sans-serif;
@@ -251,36 +252,34 @@
 
   /* 报警状态整体变红 */
   .monitor-panel.alarm {
-    border-color: #ff4d4f;
-    box-shadow:
-      0 12px 40px rgba(255, 77, 79, 0.35),
-      inset 0 0 0 1px rgba(255, 77, 79, 0.2);
-    animation: panelPulse 1.5s infinite alternate;
+    /* border-color: #ff4d4f; */
+    box-shadow: inset 0 0 60px rgb(206, 0, 0.7); /* 内发光效果 */
+    animation: panelPulse 0.8s infinite alternate;
   }
 
   @keyframes panelPulse {
     0% {
-      box-shadow:
-        0 12px 40px rgba(255, 77, 79, 0.35),
-        inset 0 0 0 1px rgba(255, 77, 79, 0.2);
+      border-color: #ff4d4f55;
+      box-shadow: inset 0 0 60px rgb(206, 0, 0, 0.5); /* 内发光效果 */
     }
     100% {
-      box-shadow:
-        0 12px 50px rgba(255, 77, 79, 0.5),
-        inset 0 0 0 1px rgba(255, 77, 79, 0.3);
+      border-color: #bb000388;
+      box-shadow: inset 0 0 60px rgb(206, 0, 0.9); /* 内发光效果 */
     }
   }
 
   /* 标题 */
   .panel-title {
     text-align: center;
-    font-size: 40px;
+    font-size: 35px;
     font-weight: 700;
-    margin-bottom: 24px;
+    margin-bottom: 18px;
     letter-spacing: 4px;
-    background: linear-gradient(90deg, #40a9ff, #69c0ff);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+    width: 100%;
+    padding: 5px 0;
+    background: linear-gradient(90deg, #4195d211, #0068bd55, #4195d211);
+    /* -webkit-background-clip: text; */
+    /* -webkit-text-fill-color: transparent; */
     text-shadow: 0 0 16px rgba(64, 169, 255, 0.4);
   }
 
@@ -300,9 +299,9 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    background: rgba(30, 70, 120, 0.4);
-    border: 3px solid rgba(64, 169, 255, 0.3);
-    padding: 16px 20px;
+    background: rgba(30, 70, 120, 0.2);
+    border: 3px solid rgba(64, 169, 255, 0.2);
+    padding: 12px 20px;
     border-radius: 12px;
     font-size: 25px;
     transition: all 0.3s ease;
@@ -325,7 +324,7 @@
   }
 
   .ai-label {
-    color: #36cffb;
+    color: #00d9ff;
     text-shadow: 0 0 8px rgba(54, 207, 251, 0.3);
   }
 
@@ -333,7 +332,7 @@
   .item-value {
     font-weight: 700;
     font-size: 27px;
-    color: #40a9ff;
+    color: #6abcff;
     letter-spacing: 2px;
     transition: all 0.3s ease;
   }
@@ -372,7 +371,7 @@
   }
 
   .monitor-panel.alarm .panel-arrow {
-    border-top-color: #ff4d4f;
+    border-top-color: #cf0003;
     filter: drop-shadow(0 4px 8px rgba(255, 77, 79, 0.4));
   }
 </style>

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

@@ -5802,10 +5802,10 @@ function createMonitorPanel3D(modal, partition) {
   panelManager.createPanel(modal.scene, {
     instanceId: partition.name,
     sensorData: {
-      positionName: '工作面A',
-      temperature: 65,
-      smoke: 80,
-      co: 45,
+      positionName: '分区#X',
+      temperature: 80,
+      smoke: 0,
+      co: 0,
     },
     threshold: { temperature: 70 },
     position: [center.x, center.y, center.z],
@@ -6004,6 +6004,7 @@ function getTunPath(beltModal) {
             point.getWorldPosition(pos);
             pos.applyMatrix4(beltModal.matrixWorld.clone().invert());
             posList.push(pos);
+            point.visible = false;
           } else {
             break;
           }

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

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

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

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

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

@@ -2,7 +2,7 @@
 <template>
   <div class="company-home">
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
+      <SubApp />
     </div>
     <div class="top-bg">
       <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
@@ -29,7 +29,7 @@
   import { useInitConfigs, useInitPage } from '../hooks/useInit';
   import ModuleDustNew from './components/ModuleDustNew.vue';
   // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { getHomeData } from '../configurable.api';
   // import { useRoute } from 'vue-router';
   import { testConfigVentNew } from '../configurable.data';

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

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

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

@@ -2,7 +2,7 @@
 <template>
   <div class="company-home">
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
+      <SubApp />
     </div>
     <div v-if="!route.query.embed" class="top-bg">
       <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
@@ -73,8 +73,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   // import { getHomeData } from './configurable.api';
   import { BDDustMock } from './mock';
   import { testConfigDust } from './configurable.data';

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

@@ -54,7 +54,7 @@
       :visible="true"
     />
     <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <VentModal />
+      <SubApp />
       <a-button
         type="primary"
         shape="circle"
@@ -72,7 +72,7 @@
   // import MonitorCenter from './components/MonitorCenter.vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { getDisHome } from './configurable.api';
   import { EyeFilled } from '@ant-design/icons-vue';
   import { testConfigBDDust } from './configurable.data.bd';

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

@@ -2,7 +2,7 @@
 <template>
   <div class="company-home">
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
+      <SubApp />
     </div>
     <div v-if="!route.query.embed" class="top-bg">
       <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
@@ -73,8 +73,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   // import { getHomeData } from './configurable.api';
   import { BDFireMock } from './mock';
   import { useRoute } from 'vue-router';

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

@@ -64,7 +64,7 @@
       :visible="true"
     />
     <div style="width: 1000px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <VentModal />
+      <SubApp />
       <a-button
         type="primary"
         shape="circle"
@@ -83,7 +83,7 @@
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
   import ModuleBDDual from './components/ModuleBDDual.vue';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { getDisHome } from './configurable.api';
   import { EyeFilled } from '@ant-design/icons-vue';
   import { testConfigBDFire } from './configurable.data.bd';

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

@@ -60,175 +60,175 @@
       :visible="true"
     />
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0">
-      <VentModal />
+      <SubApp />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted } from 'vue';
-import { useInitConfigs, useInitPage } from './hooks/useInit';
-import ModuleMine from './components/ModuleMine.vue';
-import ModuleBDDual from './components/ModuleBDDual.vue';
-import NewNav from './blue/components/NewNavFire.vue';
-import { getDisHome } from './configurable.api';
-import { testConfigMineFire } from './configurable.data.mine';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { computed, onMounted, onUnmounted } from 'vue';
+  import { useInitConfigs, useInitPage } from './hooks/useInit';
+  import ModuleMine from './components/ModuleMine.vue';
+  import ModuleBDDual from './components/ModuleBDDual.vue';
+  import NewNav from './blue/components/NewNavFire.vue';
+  import { getDisHome } from './configurable.api';
+  import { testConfigMineFire } from './configurable.data.mine';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
 
-const cfgs = computed(() => configs.value.filter((_, index) => index !== 6 && index !== 7));
-const cfgA = computed<any>(() => configs.value[6]);
-const cfgB = computed<any>(() => configs.value[7]);
-const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData } = useInitPage('矿井火灾预警系统');
-let interval: ReturnType<typeof setInterval> | undefined;
+  const cfgs = computed(() => configs.value.filter((_, index) => index !== 6 && index !== 7));
+  const cfgA = computed<any>(() => configs.value[6]);
+  const cfgB = computed<any>(() => configs.value[7]);
+  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('矿井火灾预警系统');
+  let interval: ReturnType<typeof setInterval> | undefined;
 
-onMounted(() => {
-  fetchConfigs('mine_fire').then(() => {
-    configs.value = testConfigMineFire;
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
+  onMounted(() => {
+    fetchConfigs('mine_fire').then(() => {
+      configs.value = testConfigMineFire;
+      getDisHome({
+        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+      }).then(updateData);
+    });
+    interval = setInterval(() => {
+      getDisHome({
+        dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
+      }).then(updateData);
+    }, 2000);
   });
-  interval = setInterval(() => {
-    getDisHome({
-      dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
-    }).then(updateData);
-  }, 2000);
-});
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
-function redirectTo(url) {
-  window.open(url);
-}
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
+  @import '/@/design/theme.less';
 
-.company-home {
-  --image-bg: url('@/assets/images/home-container/configurable/minehome/bg.png');
-  --image-fire-title: url(/@/assets/images/home-container/configurable/minehome/fire-title.png);
-  --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
-  --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
-  width: 100%;
-  height: 100%;
-  color: @white;
-  position: relative;
-  background: var(--image-bg) no-repeat center;
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
 
-  .top-bg {
+  .company-home {
+    --image-bg: url('@/assets/images/home-container/configurable/minehome/bg.png');
+    --image-fire-title: url(/@/assets/images/home-container/configurable/minehome/fire-title.png);
+    --image-common-border1: url('/@/assets/images/home-container/configurable/minehome/common-border1.png');
+    --image-common-border3: url('/@/assets/images/home-container/configurable/minehome/common-border3.png');
     width: 100%;
-    height: 73px;
-    background: var(--image-fire-title) no-repeat top;
-    position: absolute;
-    z-index: 1;
-    ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-unactive {
-      margin-top: 0;
-    }
-    ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-active {
-      margin-top: 0;
-    }
-    ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-unactive {
-      margin-top: 0;
-    }
-    ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-active {
-      margin-top: 0;
-    }
-  }
-  // 顶部中间样式块
-  .center-info-bar {
-    position: absolute;
-    top: 80px;
-    left: 50%;
-    transform: translateX(-50%);
-    width: 900px;
-    height: 90px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 2;
-    background: url('@/assets/images/home-container/configurable/minehome/center-info-bg.png') no-repeat center;
-    padding: 0 20px;
-    gap: 15px;
+    height: 100%;
+    color: @white;
+    position: relative;
+    background: var(--image-bg) no-repeat center;
 
-    .center-info-btn {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      color: #fff;
-      font-size: 10px;
-      font-family: 'douyuFont';
-      font-weight: bold;
-      cursor: pointer;
-      user-select: none;
-      width: 110px;
-      margin: 0 0 10px 0;
-      img {
-        width: 60px;
+    .top-bg {
+      width: 100%;
+      height: 73px;
+      background: var(--image-fire-title) no-repeat top;
+      position: absolute;
+      z-index: 1;
+      ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-unactive {
+        margin-top: 0;
+      }
+      ::v-deep .New-nav .nav-menu .nav-menu-left .nav-menu-active {
+        margin-top: 0;
+      }
+      ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-unactive {
+        margin-top: 0;
+      }
+      ::v-deep .New-nav .nav-menu .nav-menu-right .nav-menu-active {
+        margin-top: 0;
       }
     }
-
-    .center-info-content {
+    // 顶部中间样式块
+    .center-info-bar {
+      position: absolute;
+      top: 80px;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 900px;
+      height: 90px;
       display: flex;
       align-items: center;
       justify-content: center;
+      z-index: 2;
+      background: url('@/assets/images/home-container/configurable/minehome/center-info-bg.png') no-repeat center;
+      padding: 0 20px;
+      gap: 15px;
 
-      .center-info-block {
-        color: #ffffff;
-        font-size: 18px;
+      .center-info-btn {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        color: #fff;
+        font-size: 10px;
+        font-family: 'douyuFont';
+        font-weight: bold;
+        cursor: pointer;
+        user-select: none;
+        width: 110px;
+        margin: 0 0 10px 0;
         img {
-          margin: 0 5px;
+          width: 60px;
         }
       }
-      .center-info-risk {
-        color: #fff;
-        font-weight: bolder;
-        text-align: center;
-        .risk-level {
-          color: #4eabd9;
-          font-size: 24px;
-          font-weight: bold;
-          letter-spacing: 8px;
-          margin: 10px 0;
+
+      .center-info-content {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .center-info-block {
+          color: #ffffff;
+          font-size: 18px;
+          img {
+            margin: 0 5px;
+          }
+        }
+        .center-info-risk {
+          color: #fff;
+          font-weight: bolder;
+          text-align: center;
+          .risk-level {
+            color: #4eabd9;
+            font-size: 24px;
+            font-weight: bold;
+            letter-spacing: 8px;
+            margin: 10px 0;
+          }
         }
-      }
 
-      .left {
-        margin-right: 45px;
-      }
-      .right {
-        margin-left: 45px;
+        .left {
+          margin-right: 45px;
+        }
+        .right {
+          margin-left: 45px;
+        }
       }
     }
-  }
 
-  ::v-deep .dane-bd {
-    background-repeat: no-repeat;
-    background-position: center;
-    background-size: 100% 100%;
-    &.dane-w {
-      background-image: var(--image-common-border3);
-    }
-    .dane-title {
-      justify-content: space-around;
-      padding: 0 50px 0 0;
+    ::v-deep .dane-bd {
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: 100% 100%;
+      &.dane-w {
+        background-image: var(--image-common-border3);
+      }
+      .dane-title {
+        justify-content: space-around;
+        padding: 0 50px 0 0;
 
-      .common-navL {
-        font-size: 14px;
-        font-weight: bold;
-        font-family: 'douyuFont';
+        .common-navL {
+          font-size: 14px;
+          font-weight: bold;
+          font-family: 'douyuFont';
+        }
+      }
+      .dane-content {
+        border: none;
+        background: none;
+        padding: 5px 35px 10px 10px;
       }
-    }
-    .dane-content {
-      border: none;
-      background: none;
-      padding: 5px 35px 10px 10px;
     }
   }
-}
 </style>

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

@@ -54,7 +54,7 @@
       :visible="true"
     />
     <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <VentModal />
+      <SubApp />
     </div>
   </div>
 </template>
@@ -64,7 +64,7 @@
   // import MonitorCenter from './components/MonitorCenter.vue';
   import { useInitConfigs, useInitPage } from './hooks/useInit';
   import ModuleBD from './components/ModuleBD.vue';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { getDisHome } from './configurable.api';
   import { testConfigWZFire } from './configurable.data.wz';
   // import { getToken } from '/@/utils/auth';

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

@@ -12,8 +12,7 @@
             <div>区域</div>
           </div>
           <div class="tcontent-c">
-            <div
-              style=" color: #3afde7; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
+            <div style="color: #3afde7; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
               {{ data.dustAllMineWarn }}
             </div>
           </div>
@@ -24,235 +23,240 @@
         </div>
       </div>
 
-      <ModuleGreen 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" />
+      <ModuleGreen
+        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>
 
     <div style="width: calc(100% - 928px); height: 544px; position: absolute; left: 464px; top: 96px">
-      <VentModal />
+      <SubApp />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import greenNav from './components/green-nav.vue';
-import ModuleGreen from './components/module-green.vue';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-import { getDisHome } from '../configurable.api';
-import { EyeFilled } from '@ant-design/icons-vue';
-import { testConfigBDDust } from '../configurable.data';
+  import { ref, computed, onMounted, onUnmounted } from 'vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import greenNav from './components/green-nav.vue';
+  import ModuleGreen from './components/module-green.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
+  import { getDisHome } from '../configurable.api';
+  import { EyeFilled } from '@ant-design/icons-vue';
+  import { testConfigBDDust } from '../configurable.data';
 
-let activeIndex = ref(3)
-const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData } = useInitPage('');
-let interval: number | undefined;
+  let activeIndex = ref(3);
+  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('');
+  let interval: number | undefined;
 
-onMounted(() => {
-  fetchConfigs('BD_dust').then(() => {
-    configs.value = testConfigBDDust;
+  onMounted(() => {
+    fetchConfigs('BD_dust').then(() => {
+      configs.value = testConfigBDDust;
 
-    getDisHome({
-      dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
-    }).then(updateData);
+      getDisHome({
+        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
+      }).then(updateData);
+    });
+    setInterval(() => {
+      getDisHome({
+        dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
+      }).then(updateData);
+    }, 2000);
   });
-  setInterval(() => {
-    getDisHome({
-      dataList: devicesTypes.value.concat('dustAllMineWarn').join(','),
-    }).then(updateData);
-  }, 2000);
-});
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 
-function redirectTo(url) {
-  window.open(url);
-}
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
 
-@{theme-deepblue} {
-  .fire-green {
-    --image-bg: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/bg.png');
-    --image-fire-title: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/fire-title.png);
-    --image-qkjaq: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-2.png');
-    --image-common-border2: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/green-bd-bottom.png');
-    --image-znzjxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-7.png);
-    --image-znzdxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-8.png);
+  @{theme-deepblue} {
+    .fire-green {
+      --image-bg: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/bg.png');
+      --image-fire-title: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/fire-title.png);
+      --image-qkjaq: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-2.png');
+      --image-common-border2: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/green-bd-bottom.png');
+      --image-znzjxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-7.png);
+      --image-znzdxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-8.png);
+    }
   }
-}
 
-.fire-green {
-  --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
-  --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
-  --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/1-2.png');
-  --image-common-border2: url('@/assets/images/home-container/configurable/firehome/green-bd-bottom.png');
-  --image-znzjxt: url(/@/assets/images/home-container/configurable/firehome/1-7.png);
-  --image-znzdxt: url(/@/assets/images/home-container/configurable/firehome/1-8.png);
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: #181b24;
+  .fire-green {
+    --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
+    --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
+    --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/1-2.png');
+    --image-common-border2: url('@/assets/images/home-container/configurable/firehome/green-bd-bottom.png');
+    --image-znzjxt: url(/@/assets/images/home-container/configurable/firehome/1-7.png);
+    --image-znzdxt: url(/@/assets/images/home-container/configurable/firehome/1-8.png);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #181b24;
 
+    .top-bg {
+      width: 100%;
+      height: 96px;
+      position: absolute;
+      z-index: 1;
+    }
 
-  .top-bg {
-    width: 100%;
-    height: 96px;
-    position: absolute;
-    z-index: 1;
-  }
+    .main-container {
+      position: absolute;
+      top: 96px;
+      width: calc(100% - 30px);
+      height: calc(100% - 96px);
+      margin: 0px 15px;
+      box-sizing: border-box;
+    }
 
-  .main-container {
-    position: absolute;
-    top: 96px;
-    width: calc(100% - 30px);
-    height: calc(100% - 96px);
-    margin: 0px 15px;
-    box-sizing: border-box;
-  }
+    .module-dropdown {
+      padding: 10px;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border-bottom: 2px solid #3df6ff;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
 
-  .module-dropdown {
-    padding: 10px;
-    background-image: linear-gradient(to bottom, #036886, #072a40);
-    border-bottom: 2px solid #3df6ff;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border-bottom: 2px solid #3df6ff;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border: none;
+      border-bottom: 2px solid #3df6ff;
+    }
   }
 
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: linear-gradient(to bottom, #036886, #072a40);
-    border-bottom: 2px solid #3df6ff;
-    color: @vent-font-color;
+  .left-t {
     position: absolute;
-    top: 70px;
-    right: 460px;
-  }
+    height: 90px;
+    top: 0px;
+    left: 10px;
+    width: 420px;
+    background-image: var(--image-qkjaq);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
 
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: linear-gradient(to bottom, #036886, #072a40);
-    border: none;
-    border-bottom: 2px solid #3df6ff;
-  }
-}
+    .tcontent-area {
+      display: flex;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      box-sizing: border-box;
+      align-items: center;
+      justify-content: space-around;
+      width: 100%;
+      height: 68px;
+      padding: 0 15px;
+      transform: translate(0, -48%);
 
-.left-t {
-  position: absolute;
-  height: 90px;
-  top: 0px;
-  left: 10px;
-  width: 420px;
-  background-image: var(--image-qkjaq);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
+      .tcontent-l {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #9da5aa;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
 
-  .tcontent-area {
-    display: flex;
+      .tcontent-c {
+        display: flex;
+        flex: 3;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+
+      .tcontent-r {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #9da5aa;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
+    }
+  }
+
+  .right-t {
     position: absolute;
-    top: 50%;
-    left: 0;
-    box-sizing: border-box;
+    height: 90px;
+    right: 10px;
+    top: 0px;
+    width: 420px;
+    background-image: var(--image-common-border2);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    display: flex;
     align-items: center;
     justify-content: space-around;
-    width: 100%;
-    height: 68px;
-    padding: 0 15px;
-    transform: translate(0, -48%);
+    color: #fff;
 
     .tcontent-l {
-      display: flex;
       flex: 1;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
       height: 100%;
-      color: #9da5aa;
       font-size: 14px;
       font-weight: bold;
-      letter-spacing: 2px;
-    }
-
-    .tcontent-c {
-      display: flex;
-      flex: 3;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
+      background-image: var(--image-znzjxt);
+      background-size: 75% 80%;
+      background-repeat: no-repeat;
+      background-position: center;
+      text-align: center;
+      padding-top: 70px;
     }
 
     .tcontent-r {
-      display: flex;
       flex: 1;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
       height: 100%;
-      color: #9da5aa;
       font-size: 14px;
       font-weight: bold;
-      letter-spacing: 2px;
+      background-image: var(--image-znzdxt);
+      background-size: 75% 80%;
+      background-repeat: no-repeat;
+      background-position: center;
+      text-align: center;
+      padding-top: 70px;
     }
   }
-}
 
-.right-t {
-  position: absolute;
-  height: 90px;
-  right: 10px;
-  top: 0px;
-  width: 420px;
-  background-image: var(--image-common-border2);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  color: #fff;
-
-  .tcontent-l {
-    flex: 1;
-    height: 100%;
-    font-size: 14px;
-    font-weight: bold;
-    background-image: var(--image-znzjxt);
-    background-size: 75% 80%;
-    background-repeat: no-repeat;
-    background-position: center;
-    text-align: center;
-    padding-top: 70px;
+  :deep(.loading-box) {
+    position: unset;
   }
-
-  .tcontent-r {
-    flex: 1;
-    height: 100%;
-    font-size: 14px;
-    font-weight: bold;
-    background-image: var(--image-znzdxt);
-    background-size: 75% 80%;
-    background-repeat: no-repeat;
-    background-position: center;
-    text-align: center;
-    padding-top: 70px;
-
-  }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

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

@@ -3,79 +3,96 @@
     <div class="top-bg">
       <greenNav :activeIndex="activeIndex" />
     </div>
- <div class="main-container">
-    <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-    <div class="left-t">
-      <div class="tcontent-area">
-        <div class="tcontent-l">
-          <div>监测</div>
-          <div>区域</div>
-        </div>
-        <div class="tcontent-c">
-          <div style="margin-bottom: -4px; color: #3afde7; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
-            {{ data.fireAllMineWarn }}
+    <div class="main-container">
+      <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
+      <div class="left-t">
+        <div class="tcontent-area">
+          <div class="tcontent-l">
+            <div>监测</div>
+            <div>区域</div>
+          </div>
+          <div class="tcontent-c">
+            <div style="margin-bottom: -4px; color: #3afde7; font-size: 24px; font-weight: bolder; letter-spacing: 10px">
+              {{ data.fireAllMineWarn }}
+            </div>
+            <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
+          </div>
+          <div class="tcontent-r">
+            <div>火灾</div>
+            <div>风险</div>
           </div>
-          <div style="color: #fff; font-size: 12px">自燃倾向性等级 : 自燃</div>
-        </div>
-        <div class="tcontent-r">
-          <div>火灾</div>
-          <div>风险</div>
         </div>
       </div>
-    </div>
-    <div class="right-t">
-      <div class="tcontent-l" @click="redirectTo('/grout-home?mock-login=1')">
-        <div>智能注浆系统</div>
-      </div>
-      <div class="tcontent-r" @click="redirectTo('/nitrogen-home?mock-login=1')">
-        <div>智能注氮系统</div>
+      <div class="right-t">
+        <div class="tcontent-l" @click="redirectTo('/grout-home?mock-login=1')">
+          <div>智能注浆系统</div>
+        </div>
+        <div class="tcontent-r" @click="redirectTo('/nitrogen-home?mock-login=1')">
+          <div>智能注氮系统</div>
+        </div>
       </div>
+      <ModuleGreen
+        v-for="cfg in cfgs"
+        :key="cfg.deviceType"
+        :show-style="cfg.showStyle"
+        :module-data="cfg.moduleData"
+        :module-name="cfg.moduleName"
+        :device-type="cfg.deviceType"
+        :data="data"
+        :visible="true"
+      />
+      <ModuleDual
+        v-if="cfgA && cfgB"
+        :show-style="cfgA.showStyle"
+        :module-data-a="cfgA.moduleData"
+        :module-name-a="cfgA.moduleName"
+        :device-type-a="cfgA.deviceType"
+        :module-data-b="cfgB.moduleData"
+        :module-name-b="cfgB.moduleName"
+        :device-type-b="cfgB.deviceType"
+        :data="data"
+        :visible="true"
+      />
     </div>
-    <ModuleGreen v-for="cfg in cfgs" :key="cfg.deviceType" :show-style="cfg.showStyle" :module-data="cfg.moduleData"
-      :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data" :visible="true" />
-    <ModuleDual v-if="cfgA && cfgB" :show-style="cfgA.showStyle" :module-data-a="cfgA.moduleData"
-      :module-name-a="cfgA.moduleName" :device-type-a="cfgA.deviceType" :module-data-b="cfgB.moduleData"
-      :module-name-b="cfgB.moduleName" :device-type-b="cfgB.deviceType" :data="data" :visible="true" />
- </div>
-  
-   <div style="width: 998px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <VentModal />
+
+    <div style="width: 998px; height: 550px; position: absolute; left: calc(50% - 500px); top: 60px">
+      <SubApp />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import greenNav from './components/green-nav.vue';
-import ModuleGreen from './components/module-green.vue';
-import ModuleDual from './components/moduleDual-green.vue';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-import { getDisHome } from '../configurable.api';
-import { testConfigBDFire } from '../configurable.data';
-// import { getToken } from '/@/utils/auth';
-let activeIndex = ref(2)
+  import { ref, computed, onMounted, onUnmounted } from 'vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import greenNav from './components/green-nav.vue';
+  import ModuleGreen from './components/module-green.vue';
+  import ModuleDual from './components/moduleDual-green.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
+  import { getDisHome } from '../configurable.api';
+  import { testConfigBDFire } from '../configurable.data';
+  // import { getToken } from '/@/utils/auth';
+  let activeIndex = ref(2);
 
-const cfgs = computed(() =>
-  configs.value.filter((_, index) => {
-    return index !== 4 && index !== 3;
-  })
-);
-const cfgA = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 3;
-  })
-);
-const cfgB = computed<any>(() =>
-  configs.value.find((_, index) => {
-    return index === 4;
-  })
-);
-const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData } = useInitPage('');
-let interval: number | undefined;
+  const cfgs = computed(() =>
+    configs.value.filter((_, index) => {
+      return index !== 4 && index !== 3;
+    })
+  );
+  const cfgA = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 3;
+    })
+  );
+  const cfgB = computed<any>(() =>
+    configs.value.find((_, index) => {
+      return index === 4;
+    })
+  );
+  const { configs, devicesTypes, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData } = useInitPage('');
+  let interval: number | undefined;
 
-onMounted(() => {
-  fetchConfigs('BD_fire').then(() => {
+  onMounted(() => {
+    fetchConfigs('BD_fire').then(() => {
       configs.value = testConfigBDFire;
       getDisHome({
         dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
@@ -86,195 +103,193 @@ onMounted(() => {
         dataList: devicesTypes.value.concat('fireAllMineWarn').join(','),
       }).then(updateData);
     }, 2000);
-});
+  });
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 
-function redirectTo(url) {
-  window.open(url);
-}
+  function redirectTo(url) {
+    window.open(url);
+  }
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('../../../../assets/font/douyuFont.otf');
-}
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('../../../../assets/font/douyuFont.otf');
+  }
 
-@{theme-deepblue} {
-  .fire-green {
-    --image-bg: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/bg.png');
-    --image-fire-title: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/fire-title.png);
-    --image-qkjaq: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-2.png');
-    --image-common-border2: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/green-bd-bottom.png');
-    --image-znzjxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-7.png);
-    --image-znzdxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-8.png);
+  @{theme-deepblue} {
+    .fire-green {
+      --image-bg: url('@/assets/images/themify/deepblue/home-container/configurable/firehome/bg.png');
+      --image-fire-title: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/fire-title.png);
+      --image-qkjaq: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-2.png');
+      --image-common-border2: url('/@/assets/images/themify/deepblue/home-container/configurable/firehome/green-bd-bottom.png');
+      --image-znzjxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-7.png);
+      --image-znzdxt: url(/@/assets/images/themify/deepblue/home-container/configurable/firehome/1-8.png);
+    }
   }
-}
 
-.fire-green {
-  --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
-  --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
-  --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/1-2.png');
-  --image-common-border2: url('@/assets/images/home-container/configurable/firehome/green-bd-bottom.png');
-  --image-znzjxt: url(/@/assets/images/home-container/configurable/firehome/1-7.png);
-  --image-znzdxt: url(/@/assets/images/home-container/configurable/firehome/1-8.png);
-  position: relative;
-  width: 100%;
-  height: 100%;
-  background-color: #181b24;
+  .fire-green {
+    --image-bg: url('@/assets/images/home-container/configurable/firehome/bg.png');
+    --image-fire-title: url(/@/assets/images/home-container/configurable/firehome/fire-title.png);
+    --image-qkjaq: url('/@/assets/images/home-container/configurable/firehome/1-2.png');
+    --image-common-border2: url('@/assets/images/home-container/configurable/firehome/green-bd-bottom.png');
+    --image-znzjxt: url(/@/assets/images/home-container/configurable/firehome/1-7.png);
+    --image-znzdxt: url(/@/assets/images/home-container/configurable/firehome/1-8.png);
+    position: relative;
+    width: 100%;
+    height: 100%;
+    background-color: #181b24;
 
+    .top-bg {
+      width: 100%;
+      height: 96px;
+      position: absolute;
+      z-index: 1;
+    }
+    .main-container {
+      position: absolute;
+      top: 96px;
+      width: calc(100% - 30px);
+      height: calc(100% - 96px);
+      margin: 0px 15px;
+      box-sizing: border-box;
+    }
 
-  .top-bg {
-    width: 100%;
-    height: 96px;
-    position: absolute;
-    z-index: 1;
-  }
-  .main-container {
-    position: absolute;
-    top: 96px;
-    width: calc(100% - 30px);
-    height: calc(100% - 96px);
-    margin: 0px 15px;
-    box-sizing: border-box;
-  }
+    .module-dropdown {
+      padding: 10px;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border-bottom: 2px solid #3df6ff;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
 
-  .module-dropdown {
-    padding: 10px;
-    background-image: linear-gradient(to bottom, #036886, #072a40);
-    border-bottom: 2px solid #3df6ff;
-    color: @vent-font-color;
-    position: absolute;
-    top: 70px;
-    right: 460px;
+    .module-dropdown-original {
+      padding: 10px;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border-bottom: 2px solid #3df6ff;
+      color: @vent-font-color;
+      position: absolute;
+      top: 70px;
+      right: 460px;
+    }
+
+    .module-trigger-button {
+      color: @vent-font-color;
+      background-image: linear-gradient(to bottom, #036886, #072a40);
+      border: none;
+      border-bottom: 2px solid #3df6ff;
+    }
   }
 
-  .module-dropdown-original {
-    padding: 10px;
-    background-image: linear-gradient(to bottom, #036886, #072a40);
-    border-bottom: 2px solid #3df6ff;
-    color: @vent-font-color;
+  .left-t {
     position: absolute;
-    top: 70px;
-    right: 460px;
-  }
+    height: 90px;
+    top: 0px;
+    left: 10px;
+    width: 420px;
+    background-image: var(--image-qkjaq);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
 
-  .module-trigger-button {
-    color: @vent-font-color;
-    background-image: linear-gradient(to bottom, #036886, #072a40);
-    border: none;
-    border-bottom: 2px solid #3df6ff;
-  }
-}
+    .tcontent-area {
+      display: flex;
+      position: absolute;
+      top: 50%;
+      left: 0;
+      box-sizing: border-box;
+      align-items: center;
+      justify-content: space-around;
+      width: 100%;
+      height: 70px;
+      padding: 0 15px;
+      transform: translate(0, -40%);
 
-.left-t {
-  position: absolute;
-  height: 90px;
-  top: 0px;
-  left: 10px;
-  width: 420px;
-  background-image: var(--image-qkjaq);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
+      .tcontent-l {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #9da5aa;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
 
-  .tcontent-area {
-    display: flex;
+      .tcontent-c {
+        display: flex;
+        flex: 3;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+      }
+
+      .tcontent-r {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        height: 100%;
+        color: #9da5aa;
+        font-size: 14px;
+        font-weight: bold;
+        letter-spacing: 2px;
+      }
+    }
+  }
+
+  .right-t {
     position: absolute;
-    top: 50%;
-    left: 0;
-    box-sizing: border-box;
+    height: 90px;
+    right: 10px;
+    top: 0px;
+    width: 420px;
+    background-image: var(--image-common-border2);
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 100% 100%;
+    display: flex;
     align-items: center;
     justify-content: space-around;
-    width: 100%;
-    height: 70px;
-    padding: 0 15px;
-    transform: translate(0, -40%);
-
+    color: #fff;
     .tcontent-l {
-      display: flex;
       flex: 1;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
       height: 100%;
-      color: #9da5aa;
       font-size: 14px;
       font-weight: bold;
-      letter-spacing: 2px;
-    }
-
-    .tcontent-c {
-      display: flex;
-      flex: 3;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
+      background-image: var(--image-znzjxt);
+      background-size: 75% 80%;
+      background-repeat: no-repeat;
+      background-position: center;
+      text-align: center;
+      padding-top: 70px;
     }
 
     .tcontent-r {
-      display: flex;
       flex: 1;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
       height: 100%;
-      color: #9da5aa;
       font-size: 14px;
       font-weight: bold;
-      letter-spacing: 2px;
+      background-image: var(--image-znzdxt);
+      background-size: 75% 80%;
+      background-repeat: no-repeat;
+      background-position: center;
+      text-align: center;
+      padding-top: 70px;
     }
   }
-}
 
-.right-t {
-  position: absolute;
-  height: 90px;
-  right: 10px;
-  top: 0px;
-  width: 420px;
-  background-image: var(--image-common-border2);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: 100% 100%;
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
- color: #fff;
-  .tcontent-l {
-    flex: 1;
-    height: 100%;
-    font-size: 14px;
-    font-weight: bold;
-    background-image: var(--image-znzjxt);
-    background-size: 75% 80%;
-    background-repeat: no-repeat;
-    background-position: center;
-    text-align: center;
-    padding-top: 70px;
+  :deep(.loading-box) {
+    position: unset;
   }
-
-  .tcontent-r {
-    flex: 1;
-    height: 100%;
-    font-size: 14px;
-    font-weight: bold;
-    background-image: var(--image-znzdxt);
-    background-size: 75% 80%;
-    background-repeat: no-repeat;
-    background-position: center;
-    text-align: center;
-    padding-top: 70px;
-   
-  }
-}
-
-:deep(.loading-box) {
-  position: unset;
-}
 </style>

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

@@ -7,9 +7,16 @@
       </div>
       <div class="main-container">
         <!-- 采用定位方式以避免出现各个模块隐藏时其他模块下移的问题 -->
-        <ModuleOriginal v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle"
-          :module-data="cfg.moduleData" :module-name="cfg.moduleName" :device-type="cfg.deviceType" :data="data"
-          :visible="true" />
+        <ModuleOriginal
+          v-for="cfg in configs"
+          :key="cfg.deviceType"
+          :show-style="cfg.showStyle"
+          :module-data="cfg.moduleData"
+          :module-name="cfg.moduleName"
+          :device-type="cfg.deviceType"
+          :data="data"
+          :visible="true"
+        />
         <div class="right-area">
           <greenRightTag />
         </div>
@@ -17,116 +24,116 @@
     </template>
 
     <div style="width: calc(100% - 468px); height: 530px; position: absolute; left: 436px; top: 110px">
-      <VentModal />
+      <SubApp />
     </div>
   </div>
 </template>
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
-import { useInitConfigs, useInitPage } from '../hooks/useInit';
-import greenNav from './components/green-nav.vue';
-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 } from '../configurable.data';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import { onMounted, onUnmounted, ref, watch, computed } from 'vue';
+  import { useInitConfigs, useInitPage } from '../hooks/useInit';
+  import greenNav from './components/green-nav.vue';
+  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 } from '../configurable.data';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
 
-const { title = '智能通风管控系统' } = useGlobSetting();
-//   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-const { isOriginal, fetchConfigs } = useInitConfigs();
-const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage(title);
-const route = useRoute();
-let activeIndex = ref(1);
-let interval: number | undefined;
-let configs = ref<any[]>([]);
-function refresh() {
-  fetchConfigs('vent').then(() => {
-    configs.value = testConfigVent;
-    updateEnhancedConfigs(configs.value);
-    list({
-      types: configs.value
-        .filter((e) => e.deviceType)
-        .map((e) => e.deviceType)
-        .join(','),
-    }).then(updateData);
-  });
-}
+  const { title = '智能通风管控系统' } = useGlobSetting();
+  //   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const { isOriginal, fetchConfigs } = useInitConfigs();
+  const { mainTitle, data, updateData, updateEnhancedConfigs } = useInitPage(title);
+  const route = useRoute();
+  let activeIndex = ref(1);
+  let interval: number | undefined;
+  let configs = ref<any[]>([]);
+  function refresh() {
+    fetchConfigs('vent').then(() => {
+      configs.value = testConfigVent;
+      updateEnhancedConfigs(configs.value);
+      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 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();
+  watch(
+    () => route.query,
+    () => {
+      if (route.query.deviceType) {
+        // 仅需要展示子应用，模拟 unmounted
+        clearInterval(interval);
+      } else {
+        // 模拟 mounted
+        refresh();
+        initInterval();
+      }
     }
-  }
-);
+  );
 
-onMounted(() => {
-  refresh();
-  initInterval();
-});
+  onMounted(() => {
+    refresh();
+    initInterval();
+  });
 
-onUnmounted(() => {
-  clearInterval(interval);
-});
+  onUnmounted(() => {
+    clearInterval(interval);
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
+  @import '/@/design/theme.less';
 
-@font-face {
-  font-family: 'douyuFont';
-  src: url('/@/assets/font/douyuFont.otf');
-}
-
-@{theme-deepblue} {
-  .vent-green {
-    --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+  @font-face {
+    font-family: 'douyuFont';
+    src: url('/@/assets/font/douyuFont.otf');
   }
-}
 
-.vent-green {
-  --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
-  width: 100%;
-  height: 100%;
-  position: relative;
-  background-color: #181b24;
+  @{theme-deepblue} {
+    .vent-green {
+      --image-modal-top: url('/@/assets/images/themify/deepblue/vent/home/modal-top.png');
+    }
+  }
 
-  .top-bg {
+  .vent-green {
+    --image-modal-top: url('/@/assets/images/vent/home/modal-top.png');
     width: 100%;
-    height: 96px;
-    position: absolute;
-    z-index: 1;
-  }
+    height: 100%;
+    position: relative;
+    background-color: #181b24;
 
-  .main-container {
-    position: absolute;
-    top: 96px;
-    width: calc(100% - 30px);
-    height: calc(100% - 96px);
-    margin: 0px 15px;
-    box-sizing: border-box;
+    .top-bg {
+      width: 100%;
+      height: 96px;
+      position: absolute;
+      z-index: 1;
+    }
+
+    .main-container {
+      position: absolute;
+      top: 96px;
+      width: calc(100% - 30px);
+      height: calc(100% - 96px);
+      margin: 0px 15px;
+      box-sizing: border-box;
+    }
   }
-}
 
-:deep(.loading-box) {
-  position: unset;
-}
+  :deep(.loading-box) {
+    position: unset;
+  }
 </style>

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

@@ -60,7 +60,7 @@
       </div>
     </template>
     <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <VentModal />
+      <SubApp />
     </div>
   </div>
 </template>
@@ -72,8 +72,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { getHomeData } from './configurable.api';
   // import { testConfigVent } from './configurable.data';
 

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

@@ -2,7 +2,7 @@
 <template>
   <div class="company-home">
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
+      <SubApp />
     </div>
     <div v-if="!route.query.embed" class="top-bg">
       <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
@@ -73,8 +73,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { getHomeData } from './configurable.api';
   import { useRoute } from 'vue-router';
   // import { testConfigVent } from './configurable.data';

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

@@ -2,7 +2,7 @@
 <template>
   <div class="company-home">
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
+      <SubApp />
     </div>
     <div v-if="!route.query.embed" class="top-bg">
       <!-- <img style="width: 300px; height: 40px; position: fixed; left: 5px; top: 5px" src="./meeee.png" /> -->
@@ -73,8 +73,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { getHomeData } from './configurable.api';
   import { useRoute } from 'vue-router';
   // import { testConfigSY } from './configurable.data.wz';

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

@@ -60,7 +60,7 @@
       </div>
     </template>
     <div style="width: 1000px; height: 570px; position: absolute; left: calc(50% - 500px); top: 60px">
-      <VentModal />
+      <SubApp />
       <!-- 下面按钮原来跳转到 @click="redirectTo('/micro-vent-3dModal/subSysmodal/data/timesolution?type=sysMonitor&deviceType=model3D')" -->
       <a-button
         type="primary"
@@ -81,8 +81,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { getHomeData } from './configurable.api';
   import { useRoute } from 'vue-router';
   // import { testConfigVent } from './configurable.data';

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

@@ -2,7 +2,7 @@
 <template>
   <div class="company-home">
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
+      <SubApp />
     </div>
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
@@ -74,7 +74,7 @@
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
   // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { list } from './configurable.api';
   import { useRoute, useRouter } from 'vue-router';
   import { useGlobSetting } from '/@/hooks/setting';

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

@@ -2,7 +2,7 @@
 <template>
   <div class="company-home">
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
+      <SubApp />
     </div>
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
@@ -89,8 +89,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { list } from './configurable.api';
   import { useRoute, useRouter } from 'vue-router';
   import { useGlobSetting } from '/@/hooks/setting';

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

@@ -2,7 +2,7 @@
 <template>
   <div class="company-home">
     <div style="width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 0">
-      <VentModal />
+      <SubApp />
     </div>
     <!-- 如果是有 deviceType、type 等 query，认为是详情页，不需要展示普通模块，只需要模型 -->
     <template v-if="!route.query.deviceType">
@@ -83,8 +83,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  // import { useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
   import { list } from './configurable.api';
   import { useRoute, useRouter } from 'vue-router';
   import { useGlobSetting } from '/@/hooks/setting';

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

@@ -8,10 +8,10 @@
       >进尺与瓦斯涌出分析</customHeader
     >
     <div class="box-container">
-      <ModuleCommon :optionValue="optionValue" :echartTitle="echartTitle" :Option="option" :optionGas="optionGas"/>
+      <ModuleCommon :optionValue="optionValue" :echartTitle="echartTitle" :Option="option" :optionGas="optionGas" />
     </div>
     <!-- 巷道模型组件 -->
-    <VentModal />
+    <SubApp />
   </div>
 </template>
 
@@ -21,15 +21,14 @@
   import ModuleCommon from './components/moduleCommon.vue';
   import { list } from './footage.api';
   import { useRouter, useRoute } from 'vue-router';
-  import VentModal from '/@/components/vent/micro/ventModal.vue';
-  import { unmountMicroApps } from '/@/qiankun';
-  import { option,optionGas } from './footage.data'
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
+  import { option, optionGas } from './footage.data';
 
   let options = ref<any[]>([]);
   let optionValue = ref('');
   let router = useRouter(); //路由
   const currentRoute = useRoute();
-  const echartTitle=ref('工作面进尺及瓦斯涌出量')
+  const echartTitle = ref('工作面进尺及瓦斯涌出量');
 
   async function getSysDataSource() {
     let res = await list({ devicekind: 'footageGas' });

src/views/vent/monitorManager/footageMonitor/indexDhz.vue

@@ -1,76 +1,81 @@
 <template>
   <div class="footage-box">
-    <customHeader :fieldNames="{ label: 'label', value: 'value', options: 'children' }" :options="options"
-      @change="getSelectRow" :optionValue="optionValue">工作面来压与瓦斯涌出分析</customHeader>
+    <customHeader
+      :fieldNames="{ label: 'label', value: 'value', options: 'children' }"
+      :options="options"
+      @change="getSelectRow"
+      :optionValue="optionValue"
+      >工作面来压与瓦斯涌出分析</customHeader
+    >
     <div class="box-container">
       <ModuleCommon :optionValue="optionValue" :echartTitle="echartTitle" :Option="optionLy" :optionGas="optionGasLy" />
     </div>
     <!-- 巷道模型组件 -->
-    <VentModal />
+    <SubApp />
   </div>
 </template>
 
 <script setup lang="ts">
-import { onBeforeMount, ref, onMounted, onUnmounted, nextTick, provide, onBeforeUnmount } from 'vue';
-import customHeader from '/@/components/vent/customHeader.vue';
-import ModuleCommon from './components/moduleCommon.vue';
-import { list } from './footage.api';
-import { useRouter, useRoute } from 'vue-router';
-import VentModal from '/@/components/vent/micro/ventModal.vue';
-import { unmountMicroApps } from '/@/qiankun';
-import { optionLy,optionGasLy } from './footage.data'
+  import { onBeforeMount, ref, onMounted, onUnmounted, nextTick, provide, onBeforeUnmount } from 'vue';
+  import customHeader from '/@/components/vent/customHeader.vue';
+  import ModuleCommon from './components/moduleCommon.vue';
+  import { list } from './footage.api';
+  import { useRouter, useRoute } from 'vue-router';
+  import SubApp from '/@/components/vent/micro/createSubApp.vue';
+  import { unmountMicroApps } from '/@/qiankun';
+  import { optionLy, optionGasLy } from './footage.data';
 
-let options = ref<any[]>([]);
-let optionValue = ref('');
-let router = useRouter(); //路由
-const currentRoute = useRoute();
-const echartTitle=ref('工作面来压及瓦斯涌出量')
+  let options = ref<any[]>([]);
+  let optionValue = ref('');
+  let router = useRouter(); //路由
+  const currentRoute = useRoute();
+  const echartTitle = ref('工作面来压及瓦斯涌出量');
 
-async function getSysDataSource() {
-  let res = await list({ devicekind: 'footageGas' });
-  options.value =
-    res.records.map((el) => {
-      return {
-        label: el.strname,
-        value: el.id,
-      };
-    }) || [];
-  if (!optionValue.value) {
-    optionValue.value = options.value[0]['value'];
-    nextTick(() => {
-      getSelectRow(optionValue.value);
-    });
+  async function getSysDataSource() {
+    let res = await list({ devicekind: 'footageGas' });
+    options.value =
+      res.records.map((el) => {
+        return {
+          label: el.strname,
+          value: el.id,
+        };
+      }) || [];
+    if (!optionValue.value) {
+      optionValue.value = options.value[0]['value'];
+      nextTick(() => {
+        getSelectRow(optionValue.value);
+      });
+    }
   }
-}
 
-// 切换检测数据
-async function getSelectRow(deviceID) {
-  console.log(deviceID, '选项切换');
-  optionValue.value = deviceID;
-  router.push(`${currentRoute.path}?deviceType=default&sysID=${optionValue.value}`);
-}
+  // 切换检测数据
+  async function getSelectRow(deviceID) {
+    console.log(deviceID, '选项切换');
+    optionValue.value = deviceID;
+    router.push(`${currentRoute.path}?deviceType=default&sysID=${optionValue.value}`);
+  }
 
-onMounted(async () => {
-  await getSysDataSource();
-});
-onBeforeUnmount(() => {
-  unmountMicroApps(['/micro-vent-3dModal']);
-});
+  onMounted(async () => {
+    await getSysDataSource();
+  });
+  onBeforeUnmount(() => {
+    unmountMicroApps(['/micro-vent-3dModal']);
+  });
 </script>
 <style lang="less" scoped>
-@import '/@/design/theme.less';
-@ventSpace: zxm;
-
-.footage-box {
-  position: relative;
-  width: 100%;
-  height: 100%;
+  @import '/@/design/theme.less';
+  @ventSpace: zxm;
 
-  .box-container {
+  .footage-box {
     position: relative;
-    margin-top: 80px;
-    height: calc(100% - 80px);
-    z-index: 999;
+    width: 100%;
+    height: 100%;
+
+    .box-container {
+      position: relative;
+      margin-top: 80px;
+      height: calc(100% - 80px);
+      z-index: 999;
+    }
   }
-}
 </style>