[Wip 0000] 保德可配置首页开发

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

@@ -117,7 +117,7 @@ export interface ModuleDataList {
 
 export interface ModuleDataGallery {
   /** 画廊预设的背景类型 */
-  type: 'A' | 'B';
+  type: 'A' | 'B' | 'C' | 'D' | 'E';
   /** 读取数据时的基础路径，如果配置了 header，应接着 Config.deviceType 配取值路径，反之应配置详尽路径 */
   readFrom: string;
   /** 核心配置，每个画廊项对应一项 */

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

@@ -59,7 +59,7 @@
 
   const { header } = props.moduleData;
 
-  const { selectedDeviceID, selectedDevice, options, fetchDevices } = useInitDevices(props.deviceType, props.moduleData.header);
+  const { selectedDeviceID, selectedDevice, options, fetchDevices } = useInitDevices(props.deviceType, props.moduleData);
 
   const style = computed(() => {
     const size = props.showStyle.size;

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

@@ -6,7 +6,7 @@
     </template>
     <template #container>
       <slot>
-        <Header :deviceType="deviceType" :headerConfig="header" @select="selectedData = $event" />
+        <Header :deviceType="deviceType" :moduleData="moduleData" @select="selectedData = $event" />
         <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
       </slot>
     </template>

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

@@ -9,7 +9,7 @@
     @click="redirectTo"
   >
     <slot>
-      <Header :deviceType="deviceType" :headerConfig="header" @select="selectedData = $event" />
+      <Header :deviceType="deviceType" :moduleData="moduleData" @select="selectedData = $event" />
       <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
     </slot>
   </component>

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

@@ -9,7 +9,7 @@
     @click="redirectTo"
   >
     <slot>
-      <Header :deviceType="deviceType" :headerConfig="header" @select="selectedData = $event" />
+      <Header :deviceType="deviceType" :moduleData="moduleData" @select="selectedData = $event" />
       <Content :style="{ height: header.show ? 'calc(100% - 30px)' : '100%' }" :moduleData="moduleData" :data="selectedData" />
     </slot>
   </component>

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

@@ -110,12 +110,11 @@
     moduleData: Config['moduleData'];
   }>();
 
-  const { background, layout, mock } = props.moduleData;
+  const { background, layout } = props.moduleData;
 
   // 额外的 header 相关的变量
 
   function getData(raw, readFrom) {
-    if (mock) return mock;
     if (readFrom) {
       return get(raw, readFrom);
     }

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

@@ -23,6 +23,7 @@
         label: string;
         prop: string;
       }[];
+      /** A | B | C | D */
       type: string;
     }>(),
     {
@@ -147,6 +148,195 @@
     font-size: 20px;
   }
 
+  .gallery_D {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: auto;
+  }
+  .gallery-item_center_D {
+    background: url(/@/assets/images/home-container/configurable/firehome/img-2.png) no-repeat;
+    background-size: auto 100%;
+    width: 100px;
+    height: 100px;
+  }
+  .gallery > .gallery-item_D {
+    background-image: url(/@/assets/images/home-container/configurable/firehome/img-1.png);
+    background-size: auto 100%;
+    width: 213px;
+    height: 87px;
+    align-items: center;
+    text-align: center;
+    line-height: 35px;
+    display: none;
+
+    .gallery-item__value {
+      font-size: 24px;
+    }
+  }
+  .gallery > .gallery-item_D:nth-child(2) {
+    display: block;
+  }
+
+  .gallery-item_center_E {
+    background: url(/@/assets/images/home-container/configurable/dusthome/img-8.png) no-repeat;
+    width: 200px;
+    height: 200px;
+    left: calc(50% - 100px);
+    top: calc(50% - 110px);
+    position: absolute;
+    background-size: 100% auto;
+  }
+  .gallery > .gallery-item_E {
+    background: url(/@/assets/images/home-container/configurable/dusthome/img-9.png) no-repeat;
+    width: 100px;
+    height: 90px;
+    position: absolute;
+    text-align: center;
+    background-size: 100% 100%;
+
+    .gallery-item__label {
+      height: 60px;
+      text-align: center;
+      background-size: 30px 30px;
+      background-position: center top;
+      background-repeat: no-repeat;
+      padding-top: 30px;
+    }
+  }
+  .gallery > .gallery-item_E:nth-child(2) {
+    top: 20px;
+    left: 80px;
+    .gallery-item__label {
+      background-image: url(/@/assets/images/home-container/configurable/dusthome/sbzs.png);
+    }
+  }
+  .gallery > .gallery-item_E:nth-child(3) {
+    top: 20px;
+    right: 80px;
+    .gallery-item__label {
+      background-image: url(/@/assets/images/home-container/configurable/dusthome/pwkqs.png);
+    }
+  }
+  .gallery > .gallery-item_E:nth-child(4) {
+    bottom: 20px;
+    left: 80px;
+    .gallery-item__label {
+      background-image: url(/@/assets/images/home-container/configurable/dusthome/lwsl.png);
+    }
+  }
+  .gallery > .gallery-item_E:nth-child(5) {
+    bottom: 20px;
+    right: 80px;
+    .gallery-item__label {
+      background-image: url(/@/assets/images/home-container/configurable/dusthome/dwsl.png);
+    }
+  }
+
+  // .gallery-item_center_F {
+  // }
+  .gallery > .gallery-item_F {
+    width: 120px;
+    height: 65px;
+    position: absolute;
+    text-align: center;
+    padding-left: 20px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url(/@/assets/images/home-container/configurable/firehome/img-1.png);
+
+    .gallery-item__value {
+      font-size: 20px;
+    }
+  }
+  .gallery > .gallery-item_F:nth-child(2) {
+    top: 10px;
+    left: 10px;
+    width: 150px;
+    height: 150px;
+    line-height: 150px;
+    padding: 0;
+    background-image: url(/@/assets/images/home-container/configurable/dusthome/img-7.png);
+
+    .gallery-item__label {
+      display: none;
+    }
+  }
+  .gallery > .gallery-item_F:nth-child(3) {
+    top: 10px;
+    left: 160px;
+    padding-top: 5px;
+  }
+  .gallery > .gallery-item_F:nth-child(4) {
+    top: 10px;
+    left: 280px;
+    padding-top: 5px;
+  }
+  .gallery > .gallery-item_F:nth-child(5) {
+    top: 90px;
+    left: 160px;
+    padding-top: 5px;
+  }
+  .gallery > .gallery-item_F:nth-child(6) {
+    top: 90px;
+    left: 280px;
+    padding-top: 5px;
+  }
+
+  .gallery_G {
+    height: 300px;
+  }
+  .gallery > .gallery-item_G {
+    width: 120px;
+    height: 120px;
+    position: absolute;
+    text-align: center;
+    padding-top: 34px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-image: url(/@/assets/images/home-container/configurable/firehome/img-4.png);
+
+    .gallery-item__value {
+      font-size: 20px;
+    }
+  }
+  .gallery > .gallery-item_G:nth-child(2) {
+    top: calc(50% - 60px);
+    left: calc(50% - 60px);
+  }
+  .gallery > .gallery-item_G:nth-child(3) {
+    top: calc(50% - 60px);
+    left: 60px;
+    transform: scale(0.7);
+  }
+  .gallery > .gallery-item_G:nth-child(4) {
+    top: calc(50% - 60px);
+    right: 60px;
+    transform: scale(0.7);
+  }
+  .gallery > .gallery-item_G:nth-child(5) {
+    top: 15px;
+    left: 30px;
+    transform: scale(0.5);
+  }
+  .gallery > .gallery-item_G:nth-child(6) {
+    bottom: 15px;
+    left: 30px;
+    transform: scale(0.5);
+  }
+  .gallery > .gallery-item_G:nth-child(7) {
+    top: 15px;
+    right: 30px;
+    transform: scale(0.5);
+  }
+  .gallery > .gallery-item_G:nth-child(8) {
+    bottom: 15px;
+    right: 30px;
+    transform: scale(0.5);
+  }
+
   .gallery-item__value_red {
     color: red;
   }

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

@@ -89,7 +89,7 @@
   .mini-board_E {
     width: 30%;
     height: 200px;
-    padding: 60px 5px 0 5px;
+    padding: 20px 5px;
     background-image: url('/@/assets/images/home-container/configurable/board_bg_1.png');
     background-position: center bottom;
     background-repeat: no-repeat;
@@ -145,6 +145,24 @@
   }
   .mini-board__label_E {
     line-height: 17px;
-    height: 60px;
+    height: 80px;
+    padding-top: 60px;
+    background-repeat: no-repeat;
+    background-position: center top;
+  }
+  .mini-board_E:nth-child(1) {
+    .mini-board__label_E {
+      background-image: url(/@/assets/images/home-container/configurable/dusthome/hycd.png);
+    }
+  }
+  .mini-board_E:nth-child(2) {
+    .mini-board__label_E {
+      background-image: url(/@/assets/images/home-container/configurable/dusthome/dyfl.png);
+    }
+  }
+  .mini-board_E:nth-child(3) {
+    .mini-board__label_E {
+      background-image: url(/@/assets/images/home-container/configurable/dusthome/jdjl.png);
+    }
   }
 </style>

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

@@ -43,16 +43,17 @@
   import { MenuItem } from 'ant-design-vue';
 
   const props = defineProps<{
-    headerConfig: Config['moduleData']['header'];
+    moduleData: Config['moduleData'];
     deviceType: Config['deviceType'];
   }>();
 
   const emit = defineEmits(['select']);
 
   const visible = ref(false);
+  const headerConfig = props.moduleData.header;
   const { selectedDeviceID, selectedDevice, selectedDeviceSlot, selectedDeviceLabel, options, fetchDevices } = useInitDevices(
     props.deviceType,
-    props.headerConfig
+    props.moduleData
   );
 
   function selectHandler({ key }) {

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

@@ -450,7 +450,8 @@ export const testConfigA: Config[] = [
       // layout: ['table'],
       // layout: ['list'],
       // layout: ['board'],
-      layout: ['complex_list'],
+      // layout: ['complex_list'],
+      layout: ['gallery'],
       board: [
         {
           type: 'E',
@@ -473,7 +474,49 @@ export const testConfigA: Config[] = [
         },
       ],
       chart: [],
-      gallery: [],
+      gallery: [
+        {
+          type: 'G',
+          readFrom: 'dust',
+          items: [
+            {
+              label: '${[0].conclution}',
+              value: '${[0].minDust}',
+              color: 'blue',
+            },
+            {
+              label: '${[1].conclution}',
+              value: '${[1].minDust}',
+              color: 'blue',
+            },
+            {
+              label: '${[0].conclution}',
+              value: '${[0].minDust}',
+              color: 'blue',
+            },
+            {
+              label: '${[1].conclution}',
+              value: '${[1].minDust}',
+              color: 'blue',
+            },
+            {
+              label: '${[2].conclution}',
+              value: '${[2].minDust}',
+              color: 'blue',
+            },
+            {
+              label: '${[1].conclution}',
+              value: '${[1].minDust}',
+              color: 'blue',
+            },
+            {
+              label: '${[2].conclution}',
+              value: '${[2].minDust}',
+              color: 'blue',
+            },
+          ],
+        },
+      ],
       gallery_list: [],
       table: [
         {

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

@@ -56,7 +56,8 @@ export function useInitConfigs() {
 }
 
 /** 初始化设备信息，包含了适配了 header config 的下拉框选项、已选择设备的各个详细子项等，如果模块不需要展示 header 那么会将全部信息提供给已选择设备以供消费 */
-export function useInitDevices(devicekind: string, config: Config['moduleData']['header']) {
+export function useInitDevices(devicekind: string, config: Config['moduleData']) {
+  const { header, mock } = config;
   const devices = ref<Record<string, any>[]>([]);
   const options = ref<{ label: string; value: string }[]>([]);
   const selectedDeviceID = ref<string>('');
@@ -75,14 +76,15 @@ export function useInitDevices(devicekind: string, config: Config['moduleData'][
     return res ? res.label : '';
   });
   const selectedDeviceSlot = computed(() => {
-    return getFormattedText(selectedDevice.value, config.slot.value);
+    return getFormattedText(selectedDevice.value, header.slot.value);
   });
 
   // 获取设备数据，赋值并以选项格式返回给 Header 消费
   function fetchDevices() {
-    const { value } = config.selector;
-    return getHomeData({}).then((result) => {
-      if (config.show && config.showSelector && result[devicekind]) {
+    const { value } = header.selector;
+    const promise = mock ? Promise.resolve(mock) : getHomeData({});
+    return promise.then((result) => {
+      if (header.show && header.showSelector && result[devicekind]) {
         // 如果配置里指明需要 header，检验后初始化设备信息
         const records: { deviceID: string }[] = result[devicekind];
         devices.value = records;

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

@@ -121,7 +121,7 @@
     .top-bg {
       width: 100%;
       height: 56px;
-      background: url('@/assets/images/home-container/configurable/main_title_bg.png') no-repeat center;
+      background: url('/@/assets/images/home-container/configurable/firehome/fire-title.png') no-repeat center;
       position: absolute;
       z-index: 1;
       .main-title {