[Wip 0000] 可配置首页添加一种新的画廊，调整各个样式，开发新预设等

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

@@ -98,6 +98,7 @@ export const ModulePresetMap: Record<
       table: [],
       gallery: [],
       preset: [],
+      complex_list: [],
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -143,6 +144,7 @@ export const ModulePresetMap: Record<
       gallery: [],
       table: [],
       preset: [],
+      complex_list: [],
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -188,6 +190,7 @@ export const ModulePresetMap: Record<
       gallery: [],
       table: [],
       preset: [],
+      complex_list: [],
     },
     showStyle: { size: 'width:450px;height:280px;' },
   },
@@ -228,6 +231,7 @@ export const ModulePresetMap: Record<
       gallery: [],
       table: [],
       preset: [],
+      complex_list: [],
     },
     showStyle: { size: 'width:450px;height:280px;' },
   },
@@ -255,6 +259,7 @@ export const ModulePresetMap: Record<
       table: [],
       preset: [],
       gallery: [],
+      complex_list: [],
       chart: [
         {
           type: 'bar',
@@ -323,6 +328,7 @@ export const ModulePresetMap: Record<
       table: [],
       chart: [],
       preset: [],
+      complex_list: [],
     },
     showStyle: { size: 'width:450px;height:280px;' },
   },
@@ -350,6 +356,7 @@ export const ModulePresetMap: Record<
       chart: [],
       table: [],
       preset: [],
+      complex_list: [],
       gallery: [],
       list: [
         {
@@ -415,6 +422,7 @@ export const ModulePresetMap: Record<
       list: [],
       preset: [],
       gallery: [],
+      complex_list: [],
       table: [
         {
           type: 'B',
@@ -467,10 +475,108 @@ export const ModulePresetMap: Record<
       list: [],
       table: [],
       chart: [],
+      complex_list: [],
       preset: [{}],
     },
     showStyle: { size: 'width:450px;height:280px;' },
   },
+  '采空区火情综合预警（1*1）': {
+    moduleData: {
+      header: {
+        show: false,
+        showSelector: false,
+        showSlot: true,
+        selector: {
+          prop: 'strinstallpos',
+        },
+        slot: {
+          prop: 'netstatus.val',
+          formatter: '网络异常：${} 台',
+        },
+      },
+      background: {
+        show: false,
+        type: 'video',
+        link: '',
+      },
+      layout: ['complex_list', 'list'],
+      // layout: ['list'],
+      board: [],
+      chart: [],
+      gallery: [],
+      table: [],
+      list: [
+        {
+          type: 'B',
+          readFrom: '',
+          items: [
+            {
+              label: '堵塞状态',
+              prop: 'fsectarea',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '甲烷浓度',
+              prop: 'stationname',
+              color: 'yellow',
+              info: '',
+            },
+          ],
+        },
+      ],
+      complex_list: [
+        {
+          type: 'A',
+          readFrom: '',
+          items: [
+            {
+              label: '火情状态',
+              prop: 'fsectarea',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '回采位置',
+              prop: 'stationname',
+              color: 'white',
+              info: '',
+            },
+            {
+              label: '硐室火情',
+              prop: 'stationtype',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '联动设备状态',
+              prop: 'typeName',
+              color: 'blue',
+              info: '',
+            },
+          ],
+          galleryItems: [
+            {
+              prop: 'total',
+              label: '',
+              formatter: '低风险',
+              color: 'white',
+            },
+            {
+              prop: 'total',
+              label: '',
+              formatter: 'CO',
+              color: 'white',
+            },
+          ],
+        },
+      ],
+      preset: [],
+    },
+    showStyle: {
+      size: 'width:450px;height:280px;',
+    },
+  },
 };
 
 // export const ModuleChartTypeMap = {

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

@@ -59,6 +59,28 @@ export interface ModuleDataGallery {
     color: string;
   }[];
 }
+export interface ModuleDataComplexList {
+  /** 列表项预设的背景类型 */
+  type: 'A' | 'B';
+  /** 读取数据时的基础路径 */
+  readFrom: string;
+  items: {
+    /** 列表项说明内容 */
+    label: string;
+    formatter?: string;
+    prop: string;
+    color: string;
+    /** 针对列表项说明的额外信息 */
+    info: string;
+  }[];
+  galleryItems: {
+    /** 列表项说明内容 */
+    label: string;
+    formatter?: string;
+    prop: string;
+    color: string;
+  }[];
+}
 export interface ModuleDataChart {
   /** 图表通用类型，一个类型对应一种图表预设 */
   type: 'pie' | 'bar' | 'line' | 'line_area';
@@ -138,13 +160,14 @@ export interface ModuleData {
   };
   // layout: (ModuleDataBoard | ModuleDataChart | ModuleDataList | ModuleDataTable | ModuleDataPreset)[];
   /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
-  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'blast_delta' | 'fire_control' | 'fire_warn')[];
+  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'complex_list' | 'blast_delta' | 'fire_control' | 'fire_warn')[];
   preset: ModuleDataPreset[];
   board: ModuleDataBoard[];
   chart: ModuleDataChart[];
   list: ModuleDataList[];
   table: ModuleDataTable[];
   gallery: ModuleDataGallery[];
+  complex_list: ModuleDataComplexList[];
   /** 如果目前没有数据可以对接，可使用模拟数据先行展示 */
   mock?: any[];
 }

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

@@ -0,0 +1,69 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 基准的列表模块，通过不同的 type 展示不同的样式 -->
+  <div class="flex w-full">
+    <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>
+</template>
+<script lang="ts" setup>
+  import CustomList from './CustomList.vue';
+  import CustomGallery from './CustomGallery.vue';
+
+  withDefaults(
+    defineProps<{
+      listConfig: {
+        value: string;
+        color: string;
+        label: string;
+        prop: string;
+        info: string;
+      }[];
+      galleryConfig: {
+        value: string;
+        color: string;
+        label: string;
+        prop: string;
+      }[];
+      /** A B */
+      type: string;
+    }>(),
+    {
+      listConfig: () => [],
+      galleryConfig: () => [],
+      type: 'A',
+    }
+  );
+
+  const complexTypeMap = {
+    A: ['B', 'A'],
+    B: ['C', 'A'],
+  };
+
+  //   defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+
+  .complex-list__gallery_A {
+    // width: 200px;
+    flex-basis: 35%;
+    height: 240px;
+    // transform: scale(0.8);
+    // might not work in Firefox
+    zoom: 0.6;
+  }
+  .complex-list__list_A {
+    flex-basis: 65%;
+  }
+
+  .complex-list__gallery_B {
+    // width: 200px;
+    flex-basis: 35%;
+    // transform: scale(0.8);
+    // might not work in Firefox
+  }
+  .complex-list__list_B {
+    flex-basis: 65%;
+  }
+</style>

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

@@ -3,7 +3,7 @@
   <!-- 基准的画廊模块，通过不同的 type 展示不同的样式 -->
   <div class="gallery" :class="`gallery_${type}`">
     <!-- 部分类型的画廊需要加一张图片 -->
-    <div :class="`gallery-item_cneter_${type}`"></div>
+    <div :class="`gallery-item_center_${type}`"></div>
     <div v-for="item in galleryConfig" :key="item.prop" :class="`gallery-item_${type}`">
       <!-- 画廊项的具体内容填充剩余宽度 -->
       <div class="gallery-item__label">{{ item.label }}</div>
@@ -42,7 +42,7 @@
     height: 100%;
   }
 
-  .gallery-item_cneter_A {
+  .gallery-item_center_A {
     background: url(@/assets/images/home-container/configurable/gallery_center.png) no-repeat;
     width: 144px;
     height: 126px;
@@ -75,7 +75,7 @@
     right: 60px;
   }
 
-  .gallery-item_cneter_B {
+  .gallery-item_center_B {
     background: url(/@/assets/images/home-container/configurable/deco_2.png) no-repeat;
     width: 100%;
     height: 90%;
@@ -99,28 +99,52 @@
     height: 70px;
     line-height: 70px;
     top: 20px;
-    left: 36%;
+    left: calc(50% - 70px);
   }
   .gallery > .gallery-item_B:nth-child(3) {
     width: 60px;
     height: 60px;
     line-height: 60px;
     top: 50px;
-    right: 34%;
+    // right: 34%;
+    right: calc(50% - 70px);
   }
   .gallery > .gallery-item_B:nth-child(4) {
     width: 55px;
     height: 55px;
     line-height: 55px;
     bottom: 90px;
-    left: 38%;
+    left: calc(50% - 55px);
   }
   .gallery > .gallery-item_B:nth-child(5) {
     width: 50px;
     height: 50px;
     line-height: 50px;
     bottom: 70px;
-    right: 38%;
+    right: calc(50% - 50px);
+  }
+  .gallery-item_B > .gallery-item__label {
+    display: none;
+  }
+
+  .gallery-item_center_C {
+    background: url(/@/assets/images/home-container/configurable/deco_4.png) no-repeat;
+    width: 100%;
+    height: 100%;
+    // top: 5%;
+    position: absolute;
+    background-position: center;
+    background-size: auto 100%;
+  }
+  .gallery_C {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: space-around;
+    text-align: center;
+  }
+  .gallery-item_C > .gallery-item__value {
+    font-size: 20px;
   }
 
   .gallery-item__value_red {

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

@@ -52,7 +52,7 @@
     </video>
     <template v-for="config in layoutConfig" :key="config.key">
       <!-- 告示板部分 -->
-      <div v-if="config.key === 'board'" class="flex flex-justify-around pt-10px pb-10px">
+      <div v-if="config.key === 'board'" class="content__module flex flex-justify-around pt-10px pb-10px">
         <MiniBoard
           v-for="item in config.items"
           :key="item.prop"
@@ -64,19 +64,22 @@
       </div>
       <!-- 图表部分，这部分通常需要填充，有告示板、Header等内容需要填充父级 -->
       <template v-if="config.key === 'chart'">
-        <CustomChart :chart-config="config.config" :chart-data="config.data" class="flex-grow" />
+        <CustomChart class="content__module flex-grow" :chart-config="config.config" :chart-data="config.data" />
       </template>
       <!-- 通常列表部分 -->
       <template v-if="config.key === 'list'">
         <template v-if="config.type === 'timeline'">
-          <TimelineList :list-config="config.items" />
+          <TimelineList class="content__module" :list-config="config.items" />
         </template>
         <template v-else>
-          <CustomList :type="config.type" :list-config="config.items" />
+          <CustomList class="content__module" :type="config.type" :list-config="config.items" />
         </template>
       </template>
       <template v-if="config.key === 'gallery'">
-        <CustomGallery :type="config.type" :gallery-config="config.items" />
+        <CustomGallery class="content__module" :type="config.type" :gallery-config="config.items" />
+      </template>
+      <template v-if="config.key === 'complex_list'">
+        <ComplexList class="content__module" :type="config.type" :list-config="config.items" :gallery-config="config.galleryItems" />
       </template>
       <!-- 表格部分，这部分通常是占一整个模块的 -->
       <template v-if="config.key === 'table'">
@@ -84,24 +87,24 @@
           v-if="config.type === 'A'"
           :columns="config.columns"
           :data="tableData"
-          class="mt-20px mb-10px text-center flex-grow overflow-auto"
+          class="content__module text-center flex-grow overflow-auto"
         />
         <CustomTable
           v-else
           :type="config.type"
           :columns="config.columns"
           :data="tableData"
-          class="mt-20px mb-10px text-center flex-grow overflow-auto"
+          class="content__module text-center flex-grow overflow-auto"
         />
       </template>
       <template v-if="config.key === 'blast_delta'">
-        <BlastDelta class="mt-10px mb-10px" :pos-monitor="blastDeltaData" :canvas-size="{ width: 250, height: 147 }" />
+        <BlastDelta class="content__module" :pos-monitor="blastDeltaData" :canvas-size="{ width: 250, height: 137 }" />
       </template>
       <template v-if="config.key === 'fire_control'">
-        <FIreControl class="mt-10px mb-10px" />
+        <FIreControl class="content__module" />
       </template>
       <template v-if="config.key === 'fire_warn'">
-        <FIreWarn class="mt-10px mb-10px" />
+        <FIreWarn class="content__module" />
       </template>
     </template>
   </div>
@@ -123,6 +126,7 @@
   import TimelineList from './TimelineList.vue';
   import CustomList from './CustomList.vue';
   import CustomGallery from './CustomGallery.vue';
+  import ComplexList from './ComplexList.vue';
   import CustomTable from './CustomTable.vue';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
   import CustomChart from './CustomChart.vue';
@@ -147,6 +151,7 @@
     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 chart = clone(props.moduleData.chart);
     const table = clone(props.moduleData.table);
     const preset = clone(props.moduleData.preset);
@@ -203,6 +208,29 @@
           });
           break;
         }
+        case 'complex_list': {
+          const cfg = complex_list.shift();
+          if (!cfg) break;
+          const data = mock || cfg.readFrom ? get(refData, cfg.readFrom) : refData;
+
+          arr.push({
+            ...cfg,
+            key,
+            items: cfg.items.map((i) => {
+              return {
+                ...i,
+                value: getFormattedText(data, i.prop, i.formatter),
+              };
+            }),
+            galleryItems: cfg.galleryItems.map((i) => {
+              return {
+                ...i,
+                value: getFormattedText(data, i.prop, i.formatter),
+              };
+            }),
+          });
+          break;
+        }
         case 'chart': {
           const cfg = chart.shift();
           if (!cfg) break;
@@ -394,6 +422,16 @@
     z-index: -1;
     object-fit: fill;
   }
+  .content__module {
+    margin-top: 5px;
+    margin-bottom: 5px;
+  }
+  .content__module:first-of-type {
+    margin-top: 0;
+  }
+  .content__module:last-of-type {
+    margin-bottom: 0;
+  }
   ::v-deep .zxm-select:not(.zxm-select-customize-input) .zxm-select-selector {
     /* background-color: transparent; */
     color: #fff;

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

@@ -428,7 +428,7 @@ export const testConfigA: Config[] = [
   // },
   {
     deviceType: 'warn',
-    moduleName: 'fire_warn-左下预设类',
+    moduleName: '采空区火情综合预警',
     pageType: '',
     moduleData: {
       header: {
@@ -448,14 +448,97 @@ export const testConfigA: Config[] = [
         type: 'video',
         link: '',
       },
-      layout: ['fire_warn'],
+      layout: ['list', 'list'],
       // layout: ['list'],
       board: [],
       chart: [],
       gallery: [],
       table: [],
-      list: [],
-      preset: [{}],
+      list: [
+        {
+          type: 'B',
+          readFrom: '',
+          items: [
+            {
+              label: '堵塞状态',
+              prop: 'fsectarea',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '甲烷浓度',
+              prop: 'stationname',
+              color: 'yellow',
+              info: '',
+            },
+          ],
+        },
+        {
+          type: 'B',
+          readFrom: '',
+          items: [
+            {
+              label: '堵塞状态',
+              prop: 'fsectarea',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '甲烷浓度',
+              prop: 'stationname',
+              color: 'yellow',
+              info: '',
+            },
+          ],
+        },
+      ],
+      complex_list: [
+        {
+          type: 'A',
+          readFrom: '',
+          items: [
+            {
+              label: '火情状态',
+              prop: 'fsectarea',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '回采位置',
+              prop: 'stationname',
+              color: 'white',
+              info: '',
+            },
+            {
+              label: '硐室火情',
+              prop: 'stationtype',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '联动设备状态',
+              prop: 'typeName',
+              color: 'blue',
+              info: '',
+            },
+          ],
+          galleryItems: [
+            {
+              prop: 'total',
+              label: '',
+              formatter: '低风险',
+              color: 'white',
+            },
+            {
+              prop: 'total',
+              label: '',
+              formatter: 'CO',
+              color: 'white',
+            },
+          ],
+        },
+      ],
+      preset: [],
     },
     showStyle: {
       size: 'width:450px;height:280px;',
@@ -492,6 +575,7 @@ export const testConfigA: Config[] = [
       table: [],
       preset: [],
       gallery: [],
+      complex_list: [],
       chart: [
         {
           type: 'bar',
@@ -538,6 +622,7 @@ export const testConfigA: Config[] = [
       layout: ['list', 'list'],
       // layout: ['blast_delta'],
       board: [],
+      complex_list: [],
       gallery: [],
       list: [
         {
@@ -722,13 +807,72 @@ export const testConfigA: Config[] = [
   //     position: '右下',
   //   },
   // },
+  // {
+  //   deviceType: 'sys_majorpath',
+  //   moduleName: 'unknown-右中',
+  //   pageType: '',
+  //   moduleData: {
+  //     header: {
+  //       show: true,
+  //       showSelector: true,
+  //       showSlot: true,
+  //       selector: {
+  //         prop: 'devicePos',
+  //       },
+  //       slot: {
+  //         prop: 'devicePos',
+  //       },
+  //     },
+  //     background: {
+  //       show: false,
+  //       type: 'video',
+  //       link: '',
+  //     },
+  //     layout: ['table'],
+  //     board: [],
+  //     list: [],
+  //     preset: [],
+  //     gallery: [],
+  //     complex_list: [],
+  //     table: [
+  //       {
+  //         type: 'B',
+  //         readFrom: 'history',
+  //         columns: [
+  //           {
+  //             prop: 'cate',
+  //             label: '类别',
+  //           },
+  //           {
+  //             prop: 'temp',
+  //             label: '温度',
+  //           },
+  //           {
+  //             prop: 'wspd',
+  //             label: '风速',
+  //           },
+  //           {
+  //             prop: 'spst',
+  //             label: '喷雾状态',
+  //           },
+  //         ],
+  //       },
+  //     ],
+  //     chart: [],
+  //   },
+  //   showStyle: {
+  //     size: 'width:450px;height:280px;',
+  //     version: '新版',
+  //     position: 'top:350px;right:0;',
+  //   },
+  // },
   {
     deviceType: 'sys_majorpath',
-    moduleName: 'unknown-右中',
+    moduleName: '重点区域实时火情',
     pageType: '',
     moduleData: {
       header: {
-        show: true,
+        show: false,
         showSelector: true,
         showSlot: true,
         selector: {
@@ -743,107 +887,137 @@ export const testConfigA: Config[] = [
         type: 'video',
         link: '',
       },
-      layout: ['table'],
+      layout: ['complex_list', 'blast_delta', 'list'],
       board: [],
-      list: [],
-      preset: [],
       gallery: [],
-      table: [
+      list: [
         {
-          type: 'B',
-          readFrom: 'history',
-          columns: [
+          type: 'E',
+          readFrom: '',
+          items: [
+            {
+              label: '火情状态',
+              prop: 'fsectarea',
+              color: 'yellow',
+              info: '',
+            },
+            {
+              label: '回采位置',
+              prop: 'stationname',
+              color: 'white',
+              info: '',
+            },
             {
-              prop: 'cate',
-              label: '类别',
+              label: '硐室火情',
+              prop: 'stationtype',
+              color: 'blue',
+              info: '',
             },
             {
-              prop: 'temp',
-              label: '温度',
+              label: '联动设备状态',
+              prop: 'typeName',
+              color: 'blue',
+              info: '',
             },
             {
-              prop: 'wspd',
-              label: '风速',
+              label: '火情状态',
+              prop: 'fsectarea',
+              color: 'yellow',
+              info: '',
             },
             {
-              prop: 'spst',
-              label: '喷雾状态',
+              label: '回采位置',
+              prop: 'stationname',
+              color: 'white',
+              info: '',
             },
+            {
+              label: '硐室火情',
+              prop: 'stationtype',
+              color: 'blue',
+              info: '',
+            },
+            {
+              label: '联动设备状态',
+              prop: 'typeName',
+              color: 'blue',
+              info: '',
+            },
+            // {
+            //   label: '火情状态',
+            //   prop: 'fsectarea',
+            //   color: 'yellow',
+            //   info: '',
+            // },
+            // {
+            //   label: '回采位置',
+            //   prop: 'stationname',
+            //   color: 'white',
+            //   info: '',
+            // },
+            // {
+            //   label: '硐室火情',
+            //   prop: 'stationtype',
+            //   color: 'blue',
+            //   info: '',
+            // },
+            // {
+            //   label: '联动设备状态',
+            //   prop: 'typeName',
+            //   color: 'blue',
+            //   info: '',
+            // },
           ],
         },
       ],
+      table: [],
       chart: [],
-    },
-    showStyle: {
-      size: 'width:450px;height:280px;',
-      version: '新版',
-      position: 'top:350px;right:0;',
-    },
-  },
-  {
-    deviceType: 'sys_majorpath',
-    moduleName: 'fire_control-右下预设类',
-    pageType: '',
-    moduleData: {
-      header: {
-        show: false,
-        showSelector: true,
-        showSlot: true,
-        selector: {
-          prop: 'devicePos',
-        },
-        slot: {
-          prop: 'devicePos',
-        },
-      },
-      background: {
-        show: false,
-        type: 'video',
-        link: '',
-      },
-      layout: ['gallery'],
-      board: [],
-      gallery: [
+      preset: [{}],
+      complex_list: [
         {
-          type: 'A',
-          readFrom: 'sys_majorpath',
+          type: 'B',
+          readFrom: '',
           items: [
             {
-              prop: 'total',
-              label: 'CO2',
-              // label: '光纤预警',
-              color: 'blue',
+              label: '火情状态',
+              prop: 'fsectarea',
+              color: 'yellow',
+              info: '',
             },
             {
-              prop: 'pwkqs',
-              label: 'CO',
-              // label: '喷雾开启数',
-              color: 'blue',
+              label: '回采位置',
+              prop: 'stationname',
+              color: 'white',
+              info: '',
             },
             {
-              prop: 'online',
-              label: 'O2',
-              // label: '联网数量',
+              label: '硐室火情',
+              prop: 'stationtype',
               color: 'blue',
+              info: '',
             },
             {
-              prop: 'offline',
-              label: 'Na',
-              // label: '断网数量',
+              label: '联动设备状态',
+              prop: 'typeName',
               color: 'blue',
+              info: '',
+            },
+          ],
+          galleryItems: [
+            {
+              prop: 'total',
+              label: '风险等级',
+              formatter: '低风险',
+              color: 'white',
             },
           ],
         },
       ],
-      list: [],
-      table: [],
-      chart: [],
-      preset: [],
     },
     showStyle: {
-      size: 'width:450px;height:280px;',
+      size: 'width:450px;height:570px;',
       version: '新版',
-      position: 'top:640px;right:0;',
+      position: 'top:350px;right:0;',
     },
   },
 ];