[Wip 0000] 可配置首页大改造

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

@@ -1,5 +1,11 @@
 <template>
-  <component :is="getModuleComponent(showStyle.position)" :style="style" :title="moduleName" @="">
+  <component
+    :is="getModuleComponent(showStyle.position)"
+    :style="style"
+    :title="moduleName"
+    :visible="visible"
+    @update:visible="$emit('update:visible', $event)"
+  >
     <slot></slot>
   </component>
 </template>
@@ -14,7 +20,9 @@
     showStyle: ShowStyle;
     moduleData: ModuleData;
     moduleName: string;
+    visible: boolean;
   }>();
+  defineEmits(['update:visible']);
 
   const style = computed(() => {
     return props.showStyle.size + props.showStyle.position;
@@ -31,6 +39,6 @@
     if (position.includes('bottom:0')) {
       return ModuleBottom;
     }
-    return ModuleLeft; // TODO：改为返回旧版的module组件
+    return ModuleLeft; //
   }
 </script>

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

@@ -0,0 +1,37 @@
+<template>
+  <component
+    :is="getModuleComponent(showStyle.position)"
+    :style="style"
+    :title="moduleName"
+    :visible="visible"
+    @update:visible="$emit('update:visible', $event)"
+  >
+    <slot></slot>
+  </component>
+</template>
+<script lang="ts" setup>
+  import ModuleLeft from './original/moduleLeft.vue';
+  import ModuleBottom from './original/moduleBottom.vue';
+  import { computed } from 'vue';
+  import { ModuleData, ShowStyle } from '../../../deviceManager/configurationTable/types';
+
+  const props = defineProps<{
+    showStyle: ShowStyle;
+    moduleData: ModuleData;
+    moduleName: string;
+    visible: boolean;
+  }>();
+  defineEmits(['update:visible']);
+
+  const style = computed(() => {
+    return props.showStyle.size + props.showStyle.position;
+  });
+
+  // 根据配置里的定位判断应该使用哪个module组件
+  function getModuleComponent(position) {
+    if (position.includes('bottom:0')) {
+      return ModuleBottom;
+    }
+    return ModuleLeft;
+  }
+</script>

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

@@ -0,0 +1,93 @@
+<template>
+  <Transition class="module-bottom">
+    <!-- 正常展示模块时 -->
+    <div v-if="visible" class="module-content">
+      <div class="module-content__title__expand">
+        <span class="action-btn close-btn" @click="closeModel"></span>
+        {{ title }}
+      </div>
+      <div class="module-slot">
+        <slot></slot>
+      </div>
+    </div>
+    <!-- 隐藏模块时 -->
+    <!-- <div v-else class="w-100%">
+      <div class="module-content__title">
+        <span class="action-btn show-btn" @click="showModel"></span>
+        {{ title }}
+      </div>
+    </div> -->
+  </Transition>
+</template>
+<script lang="ts" setup>
+  defineProps<{ title: string; visible: boolean }>();
+  const emit = defineEmits(['update:visible']);
+
+  function closeModel() {
+    emit('update:visible', false);
+  }
+</script>
+<style lang="less" scoped>
+  .module-bottom {
+    --bg-height: 33px;
+    color: #fff;
+    box-sizing: border-box;
+
+    .module-content {
+      width: 100%;
+      height: 100%;
+    }
+
+    .module-content__title__expand {
+      width: 100%;
+      height: var(--bg-height);
+      background: url('@/assets/images/home-container/configurable/model_original_title_bg_expand.png') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      text-align: left;
+      padding: 4px 0 0 5%;
+    }
+
+    // .module-content__title {
+    //   width: 50%;
+    //   height: var(--bg-height);
+    //   background: url('../../../../../assets/images/home-container/configurable/model_bottom_title_bg.png') no-repeat;
+    //   background-size: 100% 100%;
+    //   position: relative;
+    //   text-align: left;
+    //   padding-left: 5%;
+    // }
+
+    // 固定在父容器右上角的按钮图标
+    // .action-btn {
+    //   width: 18px;
+    //   height: 18px;
+    //   background: url('../../../../../assets/images/home-container/configurable/expand.svg') no-repeat center;
+    //   position: absolute;
+    //   left: 0;
+    //   top: 0;
+    // }
+    // .show-btn {
+    //   transform: rotate(-90deg);
+    // }
+
+    .module-slot {
+      height: calc(100% - 33px);
+      width: 100%;
+      backdrop-filter: blur(5px);
+      background-color: #6ad6ff1c;
+    }
+  }
+
+  // Transition动画相关
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  .v-enter-from,
+  .v-leave-to {
+    opacity: 0;
+    transform: translateY(-33px);
+  }
+</style>

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

@@ -0,0 +1,95 @@
+<template>
+  <Transition class="module-left">
+    <!-- 正常展示模块时 -->
+    <div v-if="visible" class="module-content">
+      <div class="module-content__title__expand">
+        <span class="action-btn close-btn" @click="closeModel"></span>
+        {{ title }}
+      </div>
+      <div class="module-slot">
+        <slot></slot>
+      </div>
+    </div>
+    <!-- 隐藏模块时 -->
+    <!-- <div v-else class="w-100%">
+      <div class="module-content__title">
+        <span class="action-btn show-btn" @click="showModel"></span>
+        {{ title }}
+      </div>
+    </div> -->
+  </Transition>
+</template>
+<script lang="ts" setup>
+  defineProps<{ title: string; visible: boolean }>();
+  const emit = defineEmits(['update:visible']);
+
+  function closeModel() {
+    emit('update:visible', false);
+  }
+</script>
+<style lang="less" scoped>
+  .module-left {
+    --bg-height: 33px;
+    color: #fff;
+    box-sizing: border-box;
+
+    .module-content {
+      width: 100%;
+      height: 100%;
+    }
+
+    .module-content__title__expand {
+      width: 100%;
+      height: var(--bg-height);
+      background: url('@/assets/images/home-container/configurable/model_original_title_bg.png') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      text-align: right;
+      padding: 4px 10% 0 0;
+    }
+
+    // .module-content__title {
+    //   width: 50%;
+    //   height: var(--bg-height);
+    //   background: url('@/assets/images/home-container/configurable/model_left_title_bg.png') no-repeat;
+    //   background-size: 100% 100%;
+    //   position: relative;
+    //   text-align: right;
+    //   padding: 4px 10% 0 0;
+    // }
+
+    // 固定在父容器右上角的按钮图标
+    // .action-btn {
+    //   width: 18px;
+    //   height: 18px;
+    //   background: url('@/assets/images/home-container/configurable/expand.svg') no-repeat center;
+    //   position: absolute;
+    //   right: 0;
+    //   top: 0;
+    // }
+    // .close-btn {
+    //   transform: rotate(-90deg);
+    // }
+
+    .module-slot {
+      height: calc(100% - 33px);
+      width: 100%;
+      backdrop-filter: blur(5px);
+      background-color: #6ad6ff1c;
+    }
+  }
+
+  // Transition动画相关
+  .v-enter-active,
+  .v-leave-active {
+    transition: all 0.3s ease;
+  }
+
+  .v-enter-from,
+  .v-leave-to {
+    // opacity: 1;
+    transform: translateX(-100%);
+    // transform: scaleY(0);
+    // transform-origin: center top;
+  }
+</style>

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

@@ -22,6 +22,10 @@
     <VentilateAnalysis />
     <WorkSurface />
     <DeviceWarning /> -->
+    <div v-if="isOriginal"> </div>
+    <div v-else>
+      <ModuleEnhanced v-for="cfg in configs" :key="cfg.deviceType" v-bind="cfg" :visible="visible" />
+    </div>
   </div>
 </template>
 <script lang="ts" setup>
@@ -37,6 +41,7 @@
   import MonitorCenter from './components/MonitorCenter.vue';
   import { useInitConfigs } from './hooks/useInit';
   import { Config } from '../../deviceManager/configurationTable/types';
+  import ModuleEnhanced from './components/moduleEnhanced.vue';
   // import mapComponent from './components/3Dmap/index.vue';
 
   const mainTitle = ref('智能通风管控系统');
@@ -102,6 +107,8 @@
       },
     },
   ]);
+  const isOriginal = false;
+  const visible = ref(true);
   // const { configs, isOriginal, fetchConfigs } = useInitConfigs();
 
   onMounted(() => {