[Wip 0000] 可配置首页添加画廊组件的两种预设，修改配置表

src/views/vent/deviceManager/configurationTable/configuration.data.ts

@@ -1,4 +1,5 @@
 // import { ModuleVersionOptions, ModuleChartTypeOptions, ModulePositionOptions, ModuleSizeOptions } from './options';
+import { ModulePositionOptions, ModuleSizeOptions, ModuleVersionOptions } from './options';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import _ from 'lodash-es';
@@ -17,18 +18,10 @@ export const columns: BasicColumn[] = [
     dataIndex: 'moduleName',
   },
   {
-    title: '模块主体配置',
+    title: '预设类型',
     dataIndex: 'moduleData.main',
   },
   {
-    title: '模块页头配置',
-    dataIndex: 'moduleData.header',
-  },
-  {
-    title: '模块图表配置',
-    dataIndex: 'moduleData.chart',
-  },
-  {
     title: '模块尺寸',
     dataIndex: 'showStyle.size',
   },
@@ -40,10 +33,6 @@ export const columns: BasicColumn[] = [
     title: '模块定位',
     dataIndex: 'showStyle.position',
   },
-  {
-    title: '模块图表类型',
-    dataIndex: 'showStyle.charttype',
-  },
 ];
 
 export const searchFormSchema: FormSchema[] = [
@@ -102,38 +91,11 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    label: '模块主体配置',
-    field: 'moduleData.main',
-    component: 'JAddInput',
-    componentProps: {
-      min: 0,
-      placeholders: ['请输入点位', '请输入名称'],
-    },
-  },
-  {
-    label: '模块页头配置',
-    field: 'moduleData.header',
-    component: 'JAddInput',
-    componentProps: {
-      min: 0,
-      placeholders: ['请输入点位', '请输入名称'],
-    },
-  },
-  {
-    label: '模块图表配置',
-    field: 'moduleData.chart',
-    component: 'JAddInput',
-    componentProps: {
-      min: 0,
-      placeholders: ['请输入点位', '请输入名称'],
-    },
-  },
-  {
     label: '模块尺寸',
     field: 'showStyle.size',
     component: 'Select',
     componentProps: {
-      options: [],
+      options: ModuleSizeOptions,
     },
   },
   {
@@ -141,7 +103,7 @@ export const formSchema: FormSchema[] = [
     field: 'showStyle.version',
     component: 'Select',
     componentProps: {
-      options: [],
+      options: ModuleVersionOptions,
     },
   },
   {
@@ -149,15 +111,7 @@ export const formSchema: FormSchema[] = [
     field: 'showStyle.position',
     component: 'Select',
     componentProps: {
-      options: [],
-    },
-  },
-  {
-    label: '模块图表类型',
-    field: 'showStyle.charttype',
-    component: 'Select',
-    componentProps: {
-      options: [],
+      options: ModulePositionOptions,
     },
   },
 ];

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

@@ -7,19 +7,19 @@ export const ModuleSizeMap = {
   '横向拉伸(1000*280)': 'width:1000px;height:280px;',
   '横向填充(1920*280)': 'width:1920px;height:280px;',
 };
-// export const ModuleSizeOptions = _.map(ModuleSizeMap, (v, k) => ({
-//   value: k,
-//   label: v,
-// }));
+export const ModuleSizeOptions = _.map(ModuleSizeMap, (_, k) => ({
+  value: k,
+  label: k,
+}));
 
-// export const ModuleVersionMap = {
-//   original: '原版',
-//   enhanced: '新版',
-// };
-// export const ModuleVersionOptions = _.map(ModuleVersionMap, (v, k) => ({
-//   value: k,
-//   label: v,
-// }));
+export const ModuleVersionMap = {
+  original: '原版',
+  enhanced: '新版',
+};
+export const ModuleVersionOptions = _.map(ModuleVersionMap, (v, k) => ({
+  value: k,
+  label: v,
+}));
 
 export const ModulePositionMap = {
   不展示: 'display:none;',
@@ -31,10 +31,10 @@ export const ModulePositionMap = {
   右下: 'top:640px;right:0;',
   中下: 'top:640px;left:460px;',
 };
-// export const ModulePositionOptions = _.map(ModulePositionMap, (v, k) => ({
-//   value: k,
-//   label: v,
-// }));
+export const ModulePositionOptions = _.map(ModulePositionMap, (_, k) => ({
+  value: k,
+  label: k,
+}));
 
 // export const ModuleChartTypeMap = {
 //   pie: '饼状图',

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

@@ -33,6 +33,17 @@ export interface ModuleDataList {
     info: string;
   }[];
 }
+export interface ModuleDataGallery {
+  /** 列表项预设的背景类型 */
+  type: 'A' | 'B';
+  items: {
+    /** 列表项说明内容 */
+    label: string;
+    formatter?: string;
+    prop: string;
+    color: string;
+  }[];
+}
 export interface ModuleDataChart {
   /** 图表通用类型，一个类型对应一种图表预设 */
   type: 'pie' | 'bar' | 'line' | 'line_area';
@@ -112,12 +123,13 @@ export interface ModuleData {
   };
   // layout: (ModuleDataBoard | ModuleDataChart | ModuleDataList | ModuleDataTable | ModuleDataPreset)[];
   /** 模块的布局，使用规定的枚举组合为一个数组，代表着从上到下所应展示的元素 */
-  layout: ('board' | 'list' | 'chart' | 'table' | 'blast_delta' | 'fire_control' | 'fire_warn')[];
+  layout: ('board' | 'list' | 'chart' | 'table' | 'gallery' | 'blast_delta' | 'fire_control' | 'fire_warn')[];
   preset: ModuleDataPreset[];
   board: ModuleDataBoard[];
   chart: ModuleDataChart[];
   list: ModuleDataList[];
   table: ModuleDataTable[];
+  gallery: ModuleDataGallery[];
 }
 export interface ShowStyle {
   /** 模块的宽高 */

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

@@ -0,0 +1,141 @@
+<!-- eslint-disable vue/multi-word-component-names -->
+<template>
+  <!-- 基准的画廊模块，通过不同的 type 展示不同的样式 -->
+  <div class="gallery" :class="`gallery_${type}`">
+    <!-- 部分类型的画廊需要加一张图片 -->
+    <div :class="`gallery-item_cneter_${type}`"></div>
+    <div v-for="item in galleryConfig" :key="item.prop" :class="`gallery-item_${type}`">
+      <!-- 画廊项的具体内容填充剩余宽度 -->
+      <div class="gallery-item__label">{{ item.label }}</div>
+      <div class="gallery-item__value" :class="`gallery-item__value_${item.color}`">{{ item.value }}</div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+  // import { get } from 'lodash-es';
+  // import { computed } from 'vue';
+
+  withDefaults(
+    defineProps<{
+      galleryConfig: {
+        value: string;
+        color: string;
+        label: string;
+        prop: string;
+      }[];
+      type: string;
+    }>(),
+    {
+      galleryConfig: () => [],
+      type: 'A',
+    }
+  );
+  //   defineEmits(['click']);
+</script>
+<style lang="less" scoped>
+  @import '@/design/vent/color.less';
+  /* Timeline 相关的样式 */
+
+  .gallery {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .gallery-item_cneter_A {
+    background: url(@/assets/images/home-container/configurable/gallery_center.png) no-repeat;
+    width: 144px;
+    height: 126px;
+    left: calc(50% - 72px);
+    top: calc(50% - 63px);
+    position: absolute;
+    background-size: 100% 100%;
+  }
+  .gallery > .gallery-item_A {
+    background: url(@/assets/images/home-container/configurable/gallery_1.png) no-repeat;
+    width: 90px;
+    height: 90px;
+    position: absolute;
+    text-align: center;
+  }
+  .gallery > .gallery-item_A:nth-child(2) {
+    top: 20px;
+    left: 60px;
+  }
+  .gallery > .gallery-item_A:nth-child(3) {
+    top: 20px;
+    right: 60px;
+  }
+  .gallery > .gallery-item_A:nth-child(4) {
+    bottom: 20px;
+    left: 60px;
+  }
+  .gallery > .gallery-item_A:nth-child(5) {
+    bottom: 20px;
+    right: 60px;
+  }
+
+  .gallery-item_cneter_B {
+    background: url(/@/assets/images/home-container/configurable/deco_2.png) no-repeat;
+    width: 100%;
+    height: 90%;
+    top: 5%;
+    position: absolute;
+    background-position: center;
+    background-size: auto 100%;
+  }
+  .gallery .gallery-item__value {
+    display: none;
+  }
+  .gallery > .gallery-item_B {
+    background: url(/@/assets/images/home-container/configurable/deco_3.png) no-repeat;
+    position: absolute;
+    text-align: center;
+    background-position: center;
+    background-size: auto 100%;
+  }
+  .gallery > .gallery-item_B:nth-child(2) {
+    width: 70px;
+    height: 70px;
+    line-height: 70px;
+    top: 20px;
+    left: 36%;
+  }
+  .gallery > .gallery-item_B:nth-child(3) {
+    width: 60px;
+    height: 60px;
+    line-height: 60px;
+    top: 50px;
+    right: 34%;
+  }
+  .gallery > .gallery-item_B:nth-child(4) {
+    width: 55px;
+    height: 55px;
+    line-height: 55px;
+    bottom: 90px;
+    left: 38%;
+  }
+  .gallery > .gallery-item_B:nth-child(5) {
+    width: 50px;
+    height: 50px;
+    line-height: 50px;
+    bottom: 70px;
+    right: 38%;
+  }
+
+  .gallery-item__value_red {
+    color: red;
+  }
+  .gallery-item__value_orange {
+    color: orange;
+  }
+  .gallery-item__value_yellow {
+    color: yellow;
+  }
+  .gallery-item__value_green {
+    color: yellowgreen;
+  }
+  .gallery-item__value_blue {
+    color: lightblue;
+  }
+</style>

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

@@ -14,7 +14,7 @@
 </template>
 <script lang="ts" setup>
   import { computed, onMounted } from 'vue';
-  import { Config } from '../../../deviceManager/configurationTable/types';
+  // import { Config } from '../../../deviceManager/configurationTable/types';
   //   import { useInitDevices } from '../hooks/useInit';
   //   import { MenuItem, Menu, Dropdown } from 'ant-design-vue';
   //   import { SwapOutlined, CaretUpOutlined, CaretDownOutlined } from '@ant-design/icons-vue';
@@ -28,41 +28,41 @@
   //   import BlastDelta from '../../../monitorManager/deviceMonitor/components/device/modal/blastDelta.vue';
 
   //   const { header: headerConfig, background, board, layout, list, chart, table } = props.moduleData;
-  const listA: Config['moduleData']['list'] = [
+  const listA = [
     {
-      type: 'A',
+      info: 'A',
       prop: 'a',
       label: '火情状态',
       color: 'yellow',
     },
     {
-      type: 'A',
+      info: 'A',
       prop: 'b',
       label: '回采位置',
       color: 'white',
     },
     {
-      type: 'A',
+      info: 'A',
       prop: 'c',
       label: '硐室火情',
       color: 'blue',
     },
     {
-      type: 'A',
+      info: 'A',
       prop: 'd',
       label: '联动设备状态',
       color: 'blue',
     },
   ];
-  const listB: Config['moduleData']['list'] = [
+  const listB = [
     {
-      type: 'B',
+      info: 'B',
       prop: 'a',
       label: '2024/07/22 07:00:00',
       color: 'white',
     },
     {
-      type: 'B',
+      info: 'B',
       prop: 'b',
       label: '2811工作面上隅角',
       color: 'white',
@@ -76,7 +76,8 @@
     return listB.map((b) => {
       return {
         ...b,
-        value: getFormattedText(data, b.prop, b.formatter),
+        value: getFormattedText(data, b.prop),
+        // value: getFormattedText(data, b.prop, b.formatter),
       };
     });
   });
@@ -90,7 +91,8 @@
     return listA.map((b) => {
       return {
         ...b,
-        value: getFormattedText(data, b.prop, b.formatter),
+        value: getFormattedText(data, b.prop),
+        // value: getFormattedText(data, b.prop, b.formatter),
       };
     });
   });

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

@@ -75,6 +75,9 @@
           <CustomList :type="config.type" :list-config="config.items" />
         </template>
       </template>
+      <template v-if="config.key === 'gallery'">
+        <CustomGallery :type="config.type" :gallery-config="config.items" />
+      </template>
       <!-- 表格部分，这部分通常是占一整个模块的 -->
       <template v-if="config.key === 'table'">
         <CommonTable
@@ -119,6 +122,7 @@
   import MiniBoard from './MiniBoard.vue';
   import TimelineList from './TimelineList.vue';
   import CustomList from './CustomList.vue';
+  import CustomGallery from './CustomGallery.vue';
   import CustomTable from './CustomTable.vue';
   import { getFormattedText } from '../../../deviceManager/configurationTable/adapters';
   import CustomChart from './CustomChart.vue';
@@ -142,6 +146,7 @@
     const data = selectedDevice.value;
     const board = clone(props.moduleData.board);
     const list = clone(props.moduleData.list);
+    const gallery = clone(props.moduleData.gallery);
     const chart = clone(props.moduleData.chart);
     const table = clone(props.moduleData.table);
     const preset = clone(props.moduleData.preset);
@@ -180,6 +185,22 @@
           });
           break;
         }
+        case 'gallery': {
+          const cfg = gallery.shift();
+          if (!cfg) break;
+
+          arr.push({
+            ...cfg,
+            key,
+            items: cfg.items.map((i) => {
+              return {
+                ...i,
+                value: getFormattedText(data, i.prop, i.formatter),
+              };
+            }),
+          });
+          break;
+        }
         case 'chart': {
           const cfg = chart.shift();
           if (!cfg) break;

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

@@ -367,6 +367,7 @@ export const testConfigA: Config[] = [
       list: [],
       chart: [],
       table: [],
+      gallery: [],
       preset: [],
     },
     showStyle: {
@@ -415,6 +416,7 @@ export const testConfigA: Config[] = [
           ],
         },
       ],
+      gallery: [],
       table: [],
       preset: [],
     },
@@ -450,6 +452,7 @@ export const testConfigA: Config[] = [
       // layout: ['list'],
       board: [],
       chart: [],
+      gallery: [],
       table: [],
       list: [],
       preset: [{}],
@@ -488,6 +491,7 @@ export const testConfigA: Config[] = [
       list: [],
       table: [],
       preset: [],
+      gallery: [],
       chart: [
         {
           type: 'bar',
@@ -533,6 +537,7 @@ export const testConfigA: Config[] = [
       },
       layout: ['blast_delta'],
       board: [],
+      gallery: [],
       list: [],
       table: [],
       chart: [],
@@ -656,6 +661,7 @@ export const testConfigA: Config[] = [
       board: [],
       list: [],
       preset: [],
+      gallery: [],
       table: [
         {
           type: 'B',
@@ -709,38 +715,40 @@ export const testConfigA: Config[] = [
         type: 'video',
         link: '',
       },
-      layout: ['list'],
+      layout: ['gallery'],
       board: [],
-      list: [
+      gallery: [
         {
-          type: 'C',
+          type: 'B',
           items: [
             {
               prop: 'total',
-              label: '光纤预警',
+              label: 'CO2',
+              // label: '光纤预警',
               color: 'blue',
-              info: '个',
             },
             {
               prop: 'pwkqs',
-              label: '喷雾开启数',
+              label: 'CO',
+              // label: '喷雾开启数',
               color: 'blue',
-              info: '个',
             },
             {
               prop: 'online',
-              label: '联网数量',
+              label: 'O2',
+              // label: '联网数量',
+              color: 'blue',
+            },
+            {
+              prop: 'offline',
+              label: 'Na',
+              // label: '断网数量',
               color: 'blue',
-              info: '个',
             },
-            // {
-            //   prop: 'offline',
-            //   label: '断网数量',
-            //   color: 'blue',
-            // },
           ],
         },
       ],
+      list: [],
       table: [],
       chart: [],
       preset: [],