[Feat 0000] 为可配置首页添加一个新外框

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

@@ -167,7 +167,7 @@ export interface ShowStyle {
   /** 模块的宽高，一般来说是选好不动即可。特殊情况下可以自定义宽高 */
   size: keyof typeof ModuleSizeMap;
   /** 模块的版本，分新版及旧版，只要有一个模块指定为旧版，那么整个页面风格将变更为旧版 */
-  version: '原版' | '新版';
+  version: '原版' | '新版' | '普通版';
   /** 模块的位置，即定位 */
   position: keyof typeof ModulePositionMap;
 }

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

@@ -0,0 +1,51 @@
+<template>
+  <ventBox1 class="module-common" :style="style">
+    <template #title>
+      <div>{{ moduleName }}</div>
+    </template>
+    <template #container>
+      <slot></slot>
+    </template>
+  </ventBox1>
+</template>
+<script lang="ts" setup>
+  // import ModuleLeft from './original/moduleLeft.vue';
+  // import ModuleBottom from './original/moduleBottom.vue';
+  import { computed } from 'vue';
+  import { ShowStyle } from '../../../deviceManager/configurationTable/types';
+  import ventBox1 from '/@/components/vent/ventBox1.vue';
+
+  const props = defineProps<{
+    showStyle: ShowStyle;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  defineEmits(['close']);
+
+  const style = computed(() => {
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
+    return size + position + 'position: absolute;';
+  });
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  // function getModuleComponent(position) {
+  //   if (position === '中下') {
+  //     return ModuleBottom;
+  //   }
+  //   return ModuleLeft;
+  // }
+</script>
+<style scoped>
+  .module-common .box1-center {
+    height: calc(100% - 70px);
+  }
+  :deep(.box1-center) {
+    height: calc(100% - 70px);
+  }
+  :deep(.box1-center > .box-container) {
+    height: 100%;
+    padding: 0 !important;
+    width: 100% !important;
+  }
+</style>

src/views/vent/home/configurable/hooks/useInit.ts

@@ -29,6 +29,11 @@ export function useInitConfigs() {
       return c.showStyle.version === '原版';
     });
   });
+  const isCommon = computed(() => {
+    return configs.value.some((c) => {
+      return c.showStyle.version === '普通版';
+    });
+  });
 
   function fetchConfigs() {
     return cfgList({}).then(({ records }) => {
@@ -40,6 +45,7 @@ export function useInitConfigs() {
     fetchConfigs,
     configs,
     isOriginal,
+    isCommon,
   };
 }
 

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

@@ -19,6 +19,11 @@
         <Content v-bind="cfg" />
       </ModuleOriginal>
     </template>
+    <template v-else-if="isCommon">
+      <ModuleCommon v-for="cfg in configs" :key="cfg.deviceType" :show-style="cfg.showStyle" :module-name="cfg.moduleName" :visible="true">
+        <Content v-bind="cfg" />
+      </ModuleCommon>
+    </template>
     <template v-else>
       <!-- 下面是正常展示的各新版模块 -->
       <ModuleEnhanced
@@ -55,6 +60,7 @@
   import { Config } from '../../deviceManager/configurationTable/types';
   import ModuleEnhanced from './components/ModuleEnhanced.vue';
   import ModuleOriginal from './components/ModuleOriginal.vue';
+  import ModuleCommon from './components/ModuleCommon.vue';
   import Content from './components/content.vue';
   import { testConfigA } from './configurable.data';
   // import mapComponent from './components/3Dmap/index.vue';
@@ -72,7 +78,7 @@
   const hiddenList = computed(() => {
     return enhancedConfigs.value.filter((e) => e.visible === false);
   });
-  const { configs, isOriginal, fetchConfigs } = useInitConfigs();
+  const { configs, isOriginal, isCommon, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {
     // configs.value = testConfigB;