[Feat 0000] 添加一键该版本功能、样式修复及问题修复

src/views/vent/deviceManager/configurationTable/configuration.data.ts

@@ -135,3 +135,25 @@ export const formSchema: FormSchema[] = [
     component: 'Checkbox',
   },
 ];
+
+export const pageTypeFormSchema: FormSchema[] = [
+  {
+    label: '所属页面',
+    field: 'pageType',
+    component: 'JDictSelectTag',
+    required: true,
+    componentProps: {
+      dictCode: 'configurable_homepage',
+      placeholder: '请选择所属页面',
+    },
+  },
+  {
+    label: '模块版本',
+    field: 'showStyle.version',
+    component: 'Select',
+    required: true,
+    componentProps: {
+      options: ModuleVersionOptions,
+    },
+  },
+];

src/views/vent/deviceManager/configurationTable/index.vue

@@ -3,6 +3,7 @@
   <BasicTable @register="registerTable">
     <template #tableTitle>
       <a-button preIcon="ant-design:plus-outlined" type="primary" @click="handleAdd">新增</a-button>
+      <a-button preIcon="ant-design:container-outlined" type="primary" @click="handleSwitchPageType">更换版本</a-button>
       <a-button preIcon="ant-design:question-circle-outlined" type="primary" @click="handleHelp">帮助</a-button>
     </template>
     <template #action="{ record }">
@@ -20,19 +21,23 @@
   <BasicModal @register="registerConfigModal" @ok="handleUpdate" title="配置文件编辑" defaultFullscreen>
     <CodeEditor v-model:value="configJSON" />
   </BasicModal>
+  <BasicModal @register="registerPageTypeModal" @ok="handleUpdatePageType" title="一键修改模块版本">
+    <BasicForm @register="registerForm" />
+  </BasicModal>
 </template>
 
 <script lang="ts" setup>
   //ts语法
   import { ref, provide, reactive, toRaw } from 'vue';
   import { BasicTable } from '/@/components/Table';
+  import { BasicForm, useForm } from '/@/components/Form';
   import { useModal } from '/@/components/Modal';
   import DeviceModal from '../comment/DeviceModal.vue';
   // import { getToken } from '/@/utils/auth';
   // import { useGlobSetting } from '/@/hooks/setting';
   import { useListPage } from '/@/hooks/system/useListPage';
   import { list, deleteById, saveOrUpdate } from './configuration.api';
-  import { searchFormSchema, columns, formSchema } from './configuration.data';
+  import { searchFormSchema, columns, formSchema, pageTypeFormSchema } from './configuration.data';
   import { message } from 'ant-design-vue';
   import { BasicModal } from '/@/components/Modal';
   import CodeEditor from '/@/components/CodeEditor/src/CodeEditor.vue';
@@ -55,6 +60,7 @@
   // const glob = useGlobSetting();
   const [registerModal, { openModal, closeModal }] = useModal();
   const [registerConfigModal, configModalCtx] = useModal();
+  const [registerPageTypeModal, pageTypeModalCtx] = useModal();
 
   // 列表页面公共参数、方法
   const { tableContext } = useListPage({
@@ -87,6 +93,11 @@
     },
   });
 
+  const [registerForm, { validate }] = useForm({
+    schemas: pageTypeFormSchema,
+    showActionButtonGroup: false,
+  });
+
   //注册table数据
   const [registerTable, { reload }] = tableContext;
 
@@ -168,6 +179,36 @@
       console.error(e);
     }
   }
+
+  function handleSwitchPageType() {
+    pageTypeModalCtx.openModal();
+  }
+
+  /** 一件更改某个页面的所有模块版本 */
+  async function handleUpdatePageType() {
+    try {
+      const params = await validate();
+      const arr = await list({
+        pageType: params.pageType,
+      });
+      await Promise.all(
+        arr.records.map((r) => {
+          return saveOrUpdate(
+            {
+              ...r,
+              ...params,
+            },
+            true
+          );
+        })
+      );
+      pageTypeModalCtx.closeModal();
+      reload();
+    } catch (e) {
+      message.error(`错误：${e}`);
+      console.error(e);
+    }
+  }
 </script>
 
 <style scoped lang="less">

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

@@ -65,14 +65,14 @@ export interface ModuleData {
     /** 是否允许溢出自滚动 */
     ignoreOverflow?: boolean;
   };
-  preset: ModuleDataPreset[];
-  board: ModuleDataBoard[];
-  chart: ModuleDataChart[];
-  list: ModuleDataList[];
-  table: ModuleDataTable[];
-  gallery: ModuleDataGallery[];
-  complex_list: ModuleDataComplexList[];
-  gallery_list: ModuleDataGalleryList[];
+  preset?: ModuleDataPreset[];
+  board?: ModuleDataBoard[];
+  chart?: ModuleDataChart[];
+  list?: ModuleDataList[];
+  table?: ModuleDataTable[];
+  gallery?: ModuleDataGallery[];
+  complex_list?: ModuleDataComplexList[];
+  gallery_list?: ModuleDataGalleryList[];
   /** 如果目前没有数据可以对接，可使用模拟数据先行展示 */
   mock?: any;
   /** 如果模块需要跳转，可以在这里配置，不支持 formatter 格式 */

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

@@ -11,6 +11,8 @@
       autoplay
       loop
       muted
+      disablepictureinpicture
+      playsinline
     >
       <source :src="background.link" />
       Not Supportted Link Or Browser
@@ -129,14 +131,14 @@
   /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
   const layoutConfig = computed(() => {
     const refData = props.data;
-    const board = clone(props.moduleData.board);
-    const list = clone(props.moduleData.list);
-    const gallery = clone(props.moduleData.gallery);
-    const complex_list = clone(props.moduleData.complex_list);
-    const gallery_list = clone(props.moduleData.gallery_list);
-    const chart = clone(props.moduleData.chart);
-    const table = clone(props.moduleData.table);
-    const preset = clone(props.moduleData.preset);
+    const board = clone(props.moduleData.board) || [];
+    const list = clone(props.moduleData.list) || [];
+    const gallery = clone(props.moduleData.gallery) || [];
+    const complex_list = clone(props.moduleData.complex_list) || [];
+    const gallery_list = clone(props.moduleData.gallery_list) || [];
+    const chart = clone(props.moduleData.chart) || [];
+    const table = clone(props.moduleData.table) || [];
+    const preset = clone(props.moduleData.preset) || [];
 
     return layout.reduce((arr: any[], key) => {
       switch (key) {

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

@@ -1,7 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <template>
   <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
-  <div class="flex w-full p-10px">
+  <div class="flex w-full p-10px" :class="`complex-list__${type}`">
     <CustomGallery :class="`complex-list__gallery_${type}`" :type="complexTypeMap[type][0]" :gallery-config="galleryConfig" />
     <CustomList :class="`complex-list__list_${type}`" :type="complexTypeMap[type][1]" :list-config="listConfig" />
   </div>
@@ -57,7 +57,11 @@
     flex-basis: 65%;
   }
 
+  .complex-list__B {
+    align-items: center;
+  }
   .complex-list__gallery_B {
+    height: 150px;
     // width: 200px;
     flex-basis: 35%;
     // transform: scale(0.8);

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

@@ -59,7 +59,7 @@ export const testConfigVent: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:60px;left:0;',
     },
   },
@@ -120,7 +120,7 @@ export const testConfigVent: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:350px;left:0;',
     },
   },
@@ -161,7 +161,7 @@ export const testConfigVent: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:640px;left:0;',
     },
   },
@@ -217,7 +217,7 @@ export const testConfigVent: Config[] = [
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:640px;left:460px;',
     },
   },
@@ -287,7 +287,7 @@ export const testConfigVent: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:60px;right:0;',
     },
   },
@@ -360,7 +360,7 @@ export const testConfigVent: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:350px;right:0;',
     },
   },
@@ -438,7 +438,7 @@ export const testConfigVent: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:640px;right:0;',
     },
   },
@@ -598,7 +598,7 @@ export const testConfigDust: Config[] = [
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:640px;left:460px;',
     },
   },
@@ -668,7 +668,7 @@ export const testConfigDust: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:60px;right:0;',
     },
   },
@@ -729,7 +729,7 @@ export const testConfigDust: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:350px;right:0;',
     },
   },
@@ -791,7 +791,7 @@ export const testConfigDust: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:640px;right:0;',
     },
   },
@@ -821,7 +821,7 @@ export const testConfigFire: Config[] = [
       },
       slice: {
         direction: 'column',
-        basis: ['50%', '50%'],
+        basis: ['35%', '65%'],
       },
       layout: ['board', 'complex_list'],
       board: [
@@ -876,19 +876,93 @@ export const testConfigFire: Config[] = [
       mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '原版',
+      size: 'width:450px;height:425px;',
+      version: '新版',
       position: 'top:60px;left:0;',
     },
   },
+  // {
+  //   deviceType: '',
+  //   moduleName: '开采煤层自燃发火特性',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: false,
+  //       showSelector: false,
+  //       showSlot: false,
+  //       selector: {
+  //         value: '${systemname}',
+  //       },
+  //       slot: {
+  //         value: '',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     slice: {
+  //       direction: 'column',
+  //       basis: ['100%'],
+  //     },
+  //     layout: ['table'],
+  //     board: [],
+  //     chart: [],
+  //     gallery: [],
+  //     gallery_list: [],
+  //     table: [
+  //       {
+  //         type: 'A',
+  //         readFrom: 'mockTable',
+  //         columns: [
+  //           {
+  //             name: '煤层',
+  //             prop: 'a',
+  //           },
+  //           {
+  //             name: '自燃倾向性',
+  //             prop: 'b',
+  //           },
+  //           {
+  //             name: '最短发火期',
+  //             prop: 'c',
+  //           },
+  //           {
+  //             name: '最小推进速度',
+  //             prop: 'd',
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //     list: [],
+  //     complex_list: [],
+  //     preset: [],
+  //     mock: {
+  //       mockTable: [
+  //         {
+  //           a: '8煤',
+  //           b: '自燃',
+  //           c: '123天',
+  //           d: '0.87md',
+  //         },
+  //       ],
+  //     },
+  //   },
+  //   showStyle: {
+  //     size: 'width:450px;height:280px;',
+  //     version: '新版',
+  //     position: 'top:350px;left:0;',
+  //   },
+  // },
   {
-    deviceType: '',
-    moduleName: '开采煤层自燃发火特性',
+    deviceType: 'pdArray',
+    moduleName: '带式输送机防灭火监控系统',
     pageType: '',
     moduleData: {
       header: {
-        show: false,
-        showSelector: false,
+        show: true,
+        showSelector: true,
         showSlot: false,
         selector: {
           value: '${systemname}',
@@ -904,97 +978,44 @@ export const testConfigFire: Config[] = [
       },
       slice: {
         direction: 'column',
-        basis: ['100%'],
+        ignoreOverflow: true,
+        basis: ['30%', '70%'],
       },
-      layout: ['table'],
-      board: [],
-      chart: [],
-      gallery: [],
-      gallery_list: [],
-      table: [
+      layout: ['board', 'chart'],
+      board: [
         {
-          type: 'A',
-          readFrom: 'mockTable',
-          columns: [
-            {
-              name: '煤层',
-              prop: 'a',
-            },
+          type: 'F',
+          layout: 'val-top',
+          readFrom: 'arrayCount',
+          items: [
             {
-              name: '自燃倾向性',
-              prop: 'b',
+              label: '光纤预警',
+              value: '${[0].val}℃',
             },
             {
-              name: '最短发火期',
-              prop: 'c',
+              label: '一氧化碳预警',
+              value: '${[1].val}ppm',
             },
             {
-              name: '最小推进速度',
-              prop: 'd',
+              label: '烟雾预警',
+              value: '${[2].val}',
             },
           ],
         },
       ],
-      list: [],
-      complex_list: [],
-      preset: [],
-      mock: {
-        mockTable: [
-          {
-            a: '8煤',
-            b: '自燃',
-            c: '123天',
-            d: '0.87md',
-          },
-        ],
-      },
-    },
-    showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '原版',
-      position: 'top:350px;left:0;',
-    },
-  },
-  {
-    deviceType: '',
-    moduleName: '矿井火情走势',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: false,
-        showSlot: false,
-        selector: {
-          value: '${strinstallpos}',
-        },
-        slot: {
-          value: '',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      slice: {
-        direction: 'row',
-        basis: ['100%'],
-      },
-      layout: ['chart'],
-      board: [],
       chart: [
         {
-          type: 'pie',
-          readFrom: 'sgGxObj',
-          legend: { show: false },
-          xAxis: [{ show: false }],
-          yAxis: [{ show: false, name: '温度（℃）', position: 'left' }],
+          type: 'line_smooth',
+          readFrom: 'arrayFiber',
+          legend: { show: true },
+          xAxis: [{ show: true }],
+          yAxis: [{ show: true, name: '温度（℃）', position: 'left' }],
           series: [
             {
-              label: '',
-              readFrom: 'btArray',
-              xprop: 'name',
-              yprop: 'val',
+              label: '${strinstallpos}',
+              readFrom: 'fibreTemperatureArr',
+              xprop: 'pos',
+              yprop: 'value',
             },
           ],
         },
@@ -1008,9 +1029,9 @@ export const testConfigFire: Config[] = [
       mock: BDfireMock,
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '原版',
-      position: 'top:640px;left:0;',
+      size: 'width:450px;height:425px;',
+      version: '新版',
+      position: 'top:495px;left:0;',
     },
   },
   {
@@ -1067,13 +1088,13 @@ export const testConfigFire: Config[] = [
     },
     showStyle: {
       size: 'width:1000px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:640px;left:460px;',
     },
   },
   {
-    deviceType: 'dsArray',
-    moduleName: '重点区域实时火情',
+    deviceType: 'sgGxObj.devSgjc',
+    moduleName: '工作面束管监测',
     pageType: '',
     moduleData: {
       header: {
@@ -1081,7 +1102,7 @@ export const testConfigFire: Config[] = [
         showSelector: true,
         showSlot: false,
         selector: {
-          value: '${systemname}',
+          value: '${strinstallpos}',
         },
         slot: {
           value: '',
@@ -1094,10 +1115,10 @@ export const testConfigFire: Config[] = [
       },
       slice: {
         direction: 'column',
-        basis: ['30%', '50%', '20%'],
+        basis: ['40%', '52%'],
         ignoreOverflow: true,
       },
-      layout: ['gallery_list', 'blast_delta', 'list'],
+      layout: ['gallery_list', 'blast_delta'],
       board: [],
       chart: [],
       // chart: [
@@ -1138,34 +1159,46 @@ export const testConfigFire: Config[] = [
           readFrom: '',
           items: [
             {
-              label: '区域名称',
-              value: '----',
+              label: '一氧化碳',
+              value: '${coVal}',
               color: 'blue',
               info: '',
             },
             {
-              label: '火情状态',
-              value: '----',
-              color: 'yellow',
+              label: '二氧化碳',
+              value: '${co2Val}',
+              color: 'blue',
               info: '',
             },
             {
-              label: '硐室火情',
-              value: '----',
+              label: '氧气',
+              value: '${o2Val}',
               color: 'blue',
               info: '',
             },
             {
-              label: '回采位置',
-              value: '----',
-              color: 'yellow',
+              label: '乙烯',
+              value: '${c2h4Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '甲烷',
+              value: '${ch4Val}',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '乙炔',
+              value: '${c2h2Val}',
+              color: 'blue',
               info: '',
             },
           ],
           galleryItems: [
             {
               label: '风险等级',
-              value: '低风险',
+              value: '${warnLevel}',
               color: 'blue',
             },
           ],
@@ -1238,7 +1271,7 @@ export const testConfigFire: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:570px;',
-      version: '原版',
+      version: '新版',
       position: 'top:60px;right:0;',
     },
   },
@@ -1303,7 +1336,7 @@ export const testConfigFire: Config[] = [
     },
     showStyle: {
       size: 'width:450px;height:280px;',
-      version: '原版',
+      version: '新版',
       position: 'top:640px;right:0;',
     },
   },

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

@@ -50,7 +50,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px">
+      <div class="pos-absolute top-70px left-460px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
@@ -70,7 +70,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import { testConfigDust } from './configurable.data';
+  // import { testConfigBuErTai } from './configurable.data';
   // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
 
@@ -78,27 +78,26 @@
     visible: boolean;
   }
 
-  const mainTitle = ref('智能通风管控系统');
+  const mainTitle = ref('智能粉尘管控系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, isCommon /** fetchConfigs */ } = useInitConfigs();
-
-  const enhancedConfigs = computed<EnhancedConfig[]>(() => {
-    return configs.value.map((c) => {
-      return {
-        visible: true,
-        ...c,
-      };
-    });
-  });
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const enhancedConfigs = ref<EnhancedConfig[]>([]);
 
   onMounted(() => {
-    configs.value = testConfigDust;
-    // fetchConfigs('vent');
+    // configs.value = testConfigB;
+    fetchConfigs('dust').then(() => {
+      enhancedConfigs.value = configs.value.map((c) => {
+        return {
+          visible: true,
+          ...c,
+        };
+      });
+    });
   });
 </script>
 <style lang="less" scoped>

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

@@ -50,7 +50,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px">
+      <div class="pos-absolute top-70px left-460px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
@@ -70,7 +70,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import { testConfigFire } from './configurable.data';
+  // import { testConfigBuErTai } from './configurable.data';
   // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
 
@@ -78,27 +78,26 @@
     visible: boolean;
   }
 
-  const mainTitle = ref('智能通风管控系统');
+  const mainTitle = ref('智能防灭火管控系统');
 
   // const moduleCodes = ['fanlocal', 'fanmain' /** 'vc', 'ar', 'va', 'ws', 'dw' */];
 
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, isCommon /** fetchConfigs */ } = useInitConfigs();
-
-  const enhancedConfigs = computed<EnhancedConfig[]>(() => {
-    return configs.value.map((c) => {
-      return {
-        visible: true,
-        ...c,
-      };
-    });
-  });
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const enhancedConfigs = ref<EnhancedConfig[]>([]);
 
   onMounted(() => {
-    configs.value = testConfigFire;
-    // fetchConfigs('vent');
+    // configs.value = testConfigB;
+    fetchConfigs('fire').then(() => {
+      enhancedConfigs.value = configs.value.map((c) => {
+        return {
+          visible: true,
+          ...c,
+        };
+      });
+    });
   });
 </script>
 <style lang="less" scoped>

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

@@ -50,7 +50,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px">
+      <div class="pos-absolute top-70px left-460px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
@@ -70,7 +70,7 @@
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
   import ModuleCommon from './components/ModuleCommon.vue';
-  import { testConfigDust } from './configurable.data';
+  // import { testConfigBuErTai } from './configurable.data';
   // import { useRoute } from 'vue-router';
   import VentModal from '/@/components/vent/micro/ventModal.vue';
 
@@ -85,20 +85,19 @@
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, isCommon /** fetchConfigs */ } = useInitConfigs();
-
-  const enhancedConfigs = computed<EnhancedConfig[]>(() => {
-    return configs.value.map((c) => {
-      return {
-        visible: true,
-        ...c,
-      };
-    });
-  });
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
+  const enhancedConfigs = ref<EnhancedConfig[]>([]);
 
   onMounted(() => {
-    configs.value = testConfigDust;
-    // fetchConfigs('vent');
+    // configs.value = testConfigB;
+    fetchConfigs('vent').then(() => {
+      enhancedConfigs.value = configs.value.map((c) => {
+        return {
+          visible: true,
+          ...c,
+        };
+      });
+    });
   });
 </script>
 <style lang="less" scoped>

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

@@ -50,7 +50,7 @@
         @close="cfg.visible = false"
       />
       <!-- 下面是用于呼出已隐藏的模块的按钮 -->
-      <div class="pos-absolute top-70px left-460px">
+      <div class="pos-absolute top-70px left-460px z-3">
         <div v-for="(item, i) in hiddenList" :key="`vvhchg${i}`">
           <AButton class="module-trigger-button" @click="item.visible = true">{{ item.moduleName }}</AButton>
         </div>
@@ -86,19 +86,18 @@
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
   const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
-
-  const enhancedConfigs = computed<EnhancedConfig[]>(() => {
-    return configs.value.map((c) => {
-      return {
-        visible: true,
-        ...c,
-      };
-    });
-  });
+  const enhancedConfigs = ref<EnhancedConfig[]>([]);
 
   onMounted(() => {
     // configs.value = testConfigB;
-    fetchConfigs('vent');
+    fetchConfigs('vent').then(() => {
+      enhancedConfigs.value = configs.value.map((c) => {
+        return {
+          visible: true,
+          ...c,
+        };
+      });
+    });
   });
 </script>
 <style lang="less" scoped>