[Feat 0000] 可配置首页添加两种新列表样式

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

@@ -9,8 +9,8 @@ export const ModuleSizeMap = {
   'width:1920px;height:280px;': '横向填充(1920*280)',
 };
 export const ModuleSizeOptions = _.map(ModuleSizeMap, (v, k) => ({
-  value: v,
-  label: k,
+  value: k,
+  label: v,
 }));
 
 export const ModuleVersionOptions = _.map(['原版', '新版'], (k) => ({
@@ -29,8 +29,8 @@ export const ModulePositionMap = {
   'top:640px;left:460px;': '中下',
 };
 export const ModulePositionOptions = _.map(ModulePositionMap, (v, k) => ({
-  value: v,
-  label: k,
+  value: k,
+  label: v,
 }));
 
 export const ModulePresetOptions = _.map(
@@ -83,12 +83,12 @@ export const ModulePresetMap: Record<
           readFrom: 'readData',
           items: [
             {
-              prop: 'readData.windSpeed1',
-              label: '风速1',
+              prop: 'Fan1StartStatus_str',
+              label: '一号机状态',
             },
             {
-              label: '风速2',
-              prop: 'readData.windSpeed2',
+              prop: 'Fan2StartStatus_str',
+              label: '二号机状态',
             },
           ],
         },
@@ -271,8 +271,8 @@ export const ModulePresetMap: Record<
     moduleData: {
       header: {
         show: false,
-        showSelector: true,
-        showSlot: true,
+        showSelector: false,
+        showSlot: false,
         selector: {
           prop: 'devicePos',
         },
@@ -290,29 +290,29 @@ export const ModulePresetMap: Record<
       gallery: [
         {
           type: 'A',
-          readFrom: '',
+          readFrom: 'device',
           items: [
             {
-              prop: 'total',
-              label: 'CO2',
+              prop: 'gate',
+              label: '风门',
               // label: '光纤预警',
               color: 'blue',
             },
             {
-              prop: 'pwkqs',
-              label: 'CO',
+              prop: 'window',
+              label: '风窗',
               // label: '喷雾开启数',
               color: 'blue',
             },
             {
-              prop: 'online',
-              label: 'O2',
+              prop: 'windrect',
+              label: '测风',
               // label: '联网数量',
               color: 'blue',
             },
             {
-              prop: 'offline',
-              label: 'Na',
+              prop: 'stationtype',
+              label: '空位',
               // label: '断网数量',
               color: 'blue',
             },

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

@@ -31,7 +31,7 @@ export interface ModuleDataBoard {
 }
 export interface ModuleDataList {
   /** 列表项预设的背景类型 */
-  type: 'timeline' | 'A' | 'B' | 'C';
+  type: 'timeline' | 'A' | 'B' | 'C' | 'D' | 'E';
   /** 读取数据时的基础路径 */
   readFrom: string;
   items: {

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

@@ -84,9 +84,9 @@
     background-position: center;
     background-size: auto 100%;
   }
-  .gallery .gallery-item__value {
-    display: none;
-  }
+  // .gallery .gallery-item__value {
+  //   display: none;
+  // }
   .gallery > .gallery-item_B {
     background: url(/@/assets/images/home-container/configurable/deco_3.png) no-repeat;
     position: absolute;

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

@@ -3,17 +3,17 @@
   <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
   <div class="list flex items-center" :class="`list_${type}`">
     <!-- 部分类型的列表需要加一张图片 -->
-    <div :class="`list-item__image_${type}`"></div>
+    <div :class="`list__image_${type}`"></div>
     <!-- 剩下的部分填充剩余宽度 -->
-    <div class="flex-grow">
-      <div v-for="item in listConfig" :key="item.prop" class="flex items-center list-item">
+    <div class="flex-grow" :class="`list__wrapper_${type}`">
+      <div v-for="item in listConfig" :key="item.prop" class="flex items-center" :class="`list-item_${type}`">
         <!-- 列表项前面的图标 -->
         <div :class="`list-item__icon_${type}`"></div>
         <!-- 列表项的具体内容填充剩余宽度 -->
         <div class="flex-grow" :class="`list-item__content_${type}`">
           <div class="list-item__label">{{ item.label }}</div>
           <div class="list-item__info" :class="`list-item__info_${item.color}`">{{ item.info }}</div>
-          <div class="list-item__value" :class="`list-item__value_${item.color}`">{{ item.value }}</div>
+          <div class="list-item__value" :class="`list-item__value_${item.color} list-item__value_${type}`">{{ item.value }}</div>
         </div>
       </div>
     </div>
@@ -29,6 +29,7 @@
         prop: string;
         info: string;
       }[];
+      /** A B C D E */
       type: string;
     }>(),
     {
@@ -43,10 +44,6 @@
   @import '@/design/vent/color.less';
   /* Timeline 相关的样式 */
 
-  .list-item {
-    height: 20%;
-  }
-
   .list {
     padding: 5px 20px;
     position: relative;
@@ -81,7 +78,7 @@
     background-size: 100% auto;
     background-image: url(/@/assets/images/home-container/configurable/list_bg_b.png);
   }
-  .list-item__image_B {
+  .list__image_B {
     width: 77px;
     height: 77px;
     background-repeat: no-repeat;
@@ -93,7 +90,6 @@
   .list_C {
     background: none;
   }
-
   .list-item__content_C {
     height: 60px;
     background-repeat: no-repeat;
@@ -108,6 +104,65 @@
   .list-item__content_C > div {
     flex-basis: 33.3%;
   }
+
+  .list_D {
+    background-size: 100% auto;
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
+  }
+  .list__wrapper_D {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .list-item__icon_D {
+    display: none;
+  }
+  .list-item_D {
+    flex-basis: 25%;
+    // width: 80px;
+    height: 60px;
+    background-repeat: no-repeat;
+    // padding: 25px 50px 0 50px;
+    // display: flex;
+    background-position: center;
+    background-size: auto 100%;
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_d.png);
+    // margin-bottom: 10px;
+    text-align: center;
+    margin-bottom: 10px;
+  }
+  .list-item__content_D {
+    line-height: 30px;
+  }
+  .list-item__value_D {
+    font-weight: bold;
+  }
+
+  .list_E {
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_defflip.png);
+  }
+  .list__wrapper_E {
+    display: flex;
+    flex-wrap: wrap;
+  }
+  .list-item__icon_E {
+    display: none;
+  }
+  .list-item_E {
+    flex-basis: 25%;
+    // width: 80px;
+    height: 70px;
+    background-repeat: no-repeat;
+    // padding: 25px 50px 0 50px;
+    // display: flex;
+    background-position: center;
+    background-size: auto 100%;
+    background-image: url(/@/assets/images/home-container/configurable/list_bg_e.png);
+    // margin-bottom: 10px;
+    text-align: center;
+    margin: 5px 0px;
+    padding-top: 32px;
+    font-size: 12px;
+  }
   // .list-item__icon_red {
   //   background-image: url('@/assets/images/home-container/configurable/warn_icon_5.png');
   // }
@@ -172,4 +227,7 @@
   .list-item__value_blue {
     color: lightblue;
   }
+  .list-item__value_white {
+    color: white;
+  }
 </style>

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

@@ -139,11 +139,11 @@
     showStyle: Config['showStyle'];
   }>();
 
-  const { header: headerConfig, background, layout } = props.moduleData;
+  const { header: headerConfig, background, layout, mock } = props.moduleData;
 
   /** 根据配置里的layout将配置格式化为带 key 的具体配置，例如：[{ key: 'list', value: any, ...ModuleDataList }] */
   const layoutConfig = computed(() => {
-    const data = selectedDevice.value;
+    const refData = selectedDevice.value;
     const board = clone(props.moduleData.board);
     const list = clone(props.moduleData.list);
     const gallery = clone(props.moduleData.gallery);
@@ -154,8 +154,9 @@
     return layout.reduce((arr: any[], key) => {
       switch (key) {
         case 'board': {
-          const cfg = board[0];
+          const cfg = board.shift();
           if (!cfg) break;
+          const data = mock || cfg.readFrom ? get(refData, cfg.readFrom) : refData;
 
           arr.push({
             ...cfg,
@@ -172,7 +173,8 @@
         case 'list': {
           const cfg = list.shift();
           if (!cfg) break;
-
+          const data = mock || cfg.readFrom ? get(refData, cfg.readFrom) : refData;
+          console.log('debug ', data);
           arr.push({
             ...cfg,
             key,
@@ -188,6 +190,7 @@
         case 'gallery': {
           const cfg = gallery.shift();
           if (!cfg) break;
+          const data = mock || cfg.readFrom ? get(refData, cfg.readFrom) : refData;
 
           arr.push({
             ...cfg,
@@ -204,6 +207,8 @@
         case 'chart': {
           const cfg = chart.shift();
           if (!cfg) break;
+          const data = mock || cfg.readFrom ? get(refData, cfg.readFrom) : refData;
+
           arr.push({
             key,
             config: cfg,
@@ -214,6 +219,7 @@
         case 'table': {
           const cfg = table.shift();
           if (!cfg) break;
+          const data = mock || cfg.readFrom ? get(refData, cfg.readFrom) : refData;
 
           arr.push({
             ...cfg,
@@ -231,9 +237,11 @@
         default: {
           const cfg = preset.shift();
           if (!cfg) break;
+          const data = mock || cfg.readFrom ? get(refData, cfg.readFrom) : refData;
 
           arr.push({
             key,
+            data,
             config: cfg,
           });
           break;

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

@@ -509,7 +509,7 @@ export const testConfigA: Config[] = [
       ],
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
+      size: 'width:1000px;height:280px;',
       version: '新版',
       position: 'top:640px;left:460px;',
     },
@@ -535,10 +535,90 @@ export const testConfigA: Config[] = [
         type: 'video',
         link: '',
       },
-      layout: ['blast_delta'],
+      layout: ['list'],
+      // layout: ['blast_delta'],
       board: [],
       gallery: [],
-      list: [],
+      list: [
+        {
+          type: 'D',
+          readFrom: 'sys_wind[0]',
+          items: [
+            {
+              label: '面积',
+              prop: 'fsectarea',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '分站名称',
+              prop: 'stationname',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '分站类别',
+              prop: 'stationtype',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '分类',
+              prop: 'typeName',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '告警标识',
+              prop: 'warnFlag',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '告警等级',
+              prop: 'warnLevel',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '告警描述',
+              prop: 'warnLevel_str',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '错误记录',
+              prop: 'warnLogNotOkCount',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '告警标识',
+              prop: 'warnFlag',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '告警等级',
+              prop: 'warnLevel',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '告警描述',
+              prop: 'warnLevel_str',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '错误记录',
+              prop: 'warnLogNotOkCount',
+              color: 'blue',
+              info: '',
+            },
+          ],
+        },
+      ],
       table: [],
       chart: [],
       preset: [{}],
@@ -546,7 +626,7 @@ export const testConfigA: Config[] = [
     showStyle: {
       size: 'width:450px;height:280px;',
       version: '新版',
-      position: 'top:350px;right:0;',
+      position: 'top:60px;right:0;',
     },
   },
   // {

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

@@ -43,7 +43,7 @@ export function useInitConfigs() {
   };
 }
 
-/** 初始化设备信息，包含了适配了 header config 的下拉框选项、已选择设备的各个详细子项等 */
+/** 初始化设备信息，包含了适配了 header config 的下拉框选项、已选择设备的各个详细子项等，如果模块不需要展示 header 那么会将全部信息提供给已选择设备以供消费 */
 export function useInitDevices(devicekind: string, config: Config['moduleData']['header']) {
   const devices = ref<Record<string, any>[]>([]);
   const options = ref<{ label: string; value: string }[]>([]);
@@ -71,29 +71,23 @@ export function useInitDevices(devicekind: string, config: Config['moduleData'][
     const { formatter, prop } = config.selector;
     return getHomeData({}).then((result) => {
       if (!result[devicekind]) return;
-      // 如果数据只有一条，转为数组
-      const records: { deviceID: string }[] = result[devicekind];
-      devices.value = records;
-      selectedDeviceID.value = records[0]?.deviceID;
-      options.value = records.map((e) => {
-        return {
-          label: getFormattedText(e, prop, formatter),
-          value: e.deviceID,
-        };
-      });
+
+      if (config.show && config.showSelector) {
+        const records: { deviceID: string }[] = result[devicekind];
+        devices.value = records;
+        selectedDeviceID.value = records[0]?.deviceID;
+        options.value = records.map((e) => {
+          return {
+            label: getFormattedText(e, prop, formatter),
+            value: e.deviceID,
+          };
+        });
+      } else {
+        const record = result;
+        devices.value = [record];
+        selectedDeviceID.value = record.deviceID;
+      }
     });
-    // return list({
-    //   // devicekind,
-    // }).then(({ records }) => {
-    //   devices.value = records;
-    //   selectedDeviceID.value = records[0]?.id;
-    //   options.value = records.map((e) => {
-    //     return {
-    //       label: e.strinstallpos,
-    //       value: e.id,
-    //     };
-    //   });
-    // });
   }
 
   return {