[Wip 0000] 首页配置表添加各种新配置

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

@@ -1,4 +1,12 @@
 import _ from 'lodash-es';
+import { ModuleBGMap, ModuleChartTypeMap, ModulePositionMap, ModuleSizeMap } from './options';
+
+const map = {
+  ...ModuleBGMap,
+  ...ModuleChartTypeMap,
+  ...ModulePositionMap,
+  ...ModuleSizeMap,
+};
 
 export interface ModuleData {
   list?: Record<string, string>;
@@ -9,22 +17,25 @@ export interface ModuleData {
 export function parseFormDataToParams(formData: Record<string, number | string | undefined>): ModuleData {
   const params = {};
   _.forEach(formData, (v: string | undefined, k) => {
-    // 如果是以 moduleData 打头的数据要特殊处理，因为这是配置的主要项目，表单配置见 ./configuration.data
-    if (v && k.startsWith('moduleData')) {
-      _.set(params, k, JSON.parse(v));
-    } else {
-      _.set(params, k, v);
+    if (!v) return;
+    // 如果是以 moduleData/showStyle 打头的数据要特殊处理，因为这是配置的主要项目，表单配置见 ./configuration.data
+    if (k.startsWith('moduleData')) {
+      return _.set(params, k, JSON.parse(v));
     }
+    return _.set(params, k, v);
   });
 
   return params;
 }
 
 /** 将 api.list 返回的 moduleData 格式化，格式化之后可以支持对应的表单以用，该方法会修改源数据 */
-export function parseModuleData(listData: { moduleData: ModuleData }) {
+export function parseModuleData(listData: { moduleData: ModuleData; showStyle: Record<string, string> }) {
   _.forEach(listData.moduleData, (v, k) => {
     listData[`moduleData.${k}`] = JSON.stringify(v);
   });
+  _.forEach(listData.showStyle, (v, k) => {
+    listData.showStyle[k] = map[v];
+  });
 
   return listData;
 }

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

@@ -12,14 +12,14 @@ enum Api {
  * 列表接口
  * @param params
  */
-export const list = (params) =>
-  defHttp.post({ url: Api.list, params }).then((result) => {
-    result.records.forEach((item) => {
-      parseModuleData(item);
-    });
+export const list = (params) => defHttp.post({ url: Api.list, params });
+// defHttp.post({ url: Api.list, params }).then((result) => {
+//   result.records.forEach((item) => {
+//     parseModuleData(item);
+//   });
 
-    return result;
-  });
+//   return result;
+// });
 
 /**
  * 删除配置项

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

@@ -1,3 +1,4 @@
+import { ModuleBGOptions, ModuleChartTypeOptions, ModulePositionOptions, ModuleSizeOptions } from './options';
 import { BasicColumn } from '/@/components/Table';
 import { FormSchema } from '/@/components/Table';
 import _ from 'lodash-es';
@@ -12,32 +13,32 @@ export const columns: BasicColumn[] = [
     dataIndex: 'deviceType',
   },
   {
-    title: '主要内容配置',
-    dataIndex: 'moduleData_list',
-    // format: (ctx: any) => {
-    //   try {
-    //     if (!ctx) return '/';
-    //     return _.map(ctx.list, (v, k) => {
-    //       return `点位：${k}；名称：${v}`;
-    //     }).join('\n');
-    //   } catch (e) {
-    //     return '渲染错误';
-    //   }
-    // },
-  },
-  {
-    title: '图表内容配置',
-    dataIndex: 'moduleData_chart',
-    //   format: (ctx: any) => {
-    //     try {
-    //       if (!ctx) return '/';
-    //       return _.map(ctx.chart, (v, k) => {
-    //         return `点位：${k}；名称：${v}`;
-    //       }).join('<br>');
-    //     } catch (e) {
-    //       return '渲染错误';
-    //     }
-    //   },
+    title: '模块标题',
+    dataIndex: 'moduleName',
+  },
+  {
+    title: '模块主体配置',
+    dataIndex: 'moduleData.main',
+  },
+  {
+    title: '模块图表配置',
+    dataIndex: 'moduleData.chart',
+  },
+  {
+    title: '模块尺寸',
+    dataIndex: 'showStyle.size',
+  },
+  {
+    title: '模块背景',
+    dataIndex: 'showStyle.background',
+  },
+  {
+    title: '模块定位',
+    dataIndex: 'showStyle.position',
+  },
+  {
+    title: '模块图表类型',
+    dataIndex: 'showStyle.charttype',
   },
 ];
 
@@ -72,6 +73,11 @@ export const formSchema: FormSchema[] = [
     show: false,
   },
   {
+    label: '模块标题',
+    field: 'moduleName',
+    component: 'Input',
+  },
+  {
     label: '设备类型',
     field: 'deviceType',
     component: 'JDictSelectTag',
@@ -92,8 +98,8 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    label: '主要内容配置',
-    field: 'moduleData.list',
+    label: '模块主体配置',
+    field: 'moduleData.main',
     component: 'JAddInput',
     componentProps: {
       min: 0,
@@ -101,7 +107,7 @@ export const formSchema: FormSchema[] = [
     },
   },
   {
-    label: '图表内容配置',
+    label: '模块图表配置',
     field: 'moduleData.chart',
     component: 'JAddInput',
     componentProps: {
@@ -109,4 +115,36 @@ export const formSchema: FormSchema[] = [
       placeholders: ['请输入点位', '请输入名称'],
     },
   },
+  {
+    label: '模块尺寸',
+    field: 'showStyle.size',
+    component: 'Select',
+    componentProps: {
+      options: ModuleSizeOptions,
+    },
+  },
+  {
+    label: '模块背景',
+    field: 'showStyle.background',
+    component: 'Select',
+    componentProps: {
+      options: ModuleBGOptions,
+    },
+  },
+  {
+    label: '模块定位',
+    field: 'showStyle.position',
+    component: 'Select',
+    componentProps: {
+      options: ModulePositionOptions,
+    },
+  },
+  {
+    label: '模块图表类型',
+    field: 'showStyle.charttype',
+    component: 'Select',
+    componentProps: {
+      options: ModuleChartTypeOptions,
+    },
+  },
 ];

src/views/vent/deviceManager/configurationTable/index.vue

@@ -13,18 +13,30 @@
       :deviceType="deviceType"
     >
       <template #filterCell="{ column, record }">
-        <template v-if="column.key === 'moduleData_list'">
-          <div v-for="(val, key) in record.moduleData.list" :key="key">
+        <template v-if="column.key === 'moduleData.main'">
+          <div v-for="(val, key) in record.moduleData.main" :key="key">
             <span>点位：{{ key }}；</span>
             <span>名称：{{ val }}；</span>
           </div>
         </template>
-        <template v-if="column.key === 'moduleData_chart'">
+        <template v-if="column.key === 'moduleData.chart'">
           <div v-for="(val, key) in record.moduleData.chart" :key="key">
             <span>点位：{{ key }}；</span>
             <span>名称：{{ val }}；</span>
           </div>
         </template>
+        <template v-if="column.key === 'showStyle.size'">
+          {{ get(ModuleSizeMap, record.showStyle?.size) }}
+        </template>
+        <template v-if="column.key === 'showStyle.background'">
+          {{ get(ModuleBGMap, record.showStyle?.size) }}
+        </template>
+        <template v-if="column.key === 'showStyle.position'">
+          {{ get(ModulePositionMap, record.showStyle?.size) }}
+        </template>
+        <template v-if="column.key === 'showStyle.charttype'">
+          {{ get(ModuleChartTypeMap, record.showStyle?.size) }}
+        </template>
       </template>
     </NormalTable>
   </div>
@@ -35,8 +47,9 @@
   import { ref } from 'vue';
   import NormalTable from '../comment/NormalTable.vue';
   import { list, deleteById, saveOrUpdate } from './configuration.api';
-
+  import { ModuleBGMap, ModuleChartTypeMap, ModulePositionMap, ModuleSizeMap } from './options';
   import { searchFormSchema, columns, formSchema } from './configuration.data';
+  import { get } from '../../home/billboard/utils';
 
   const deviceType = ref('');
 </script>

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

@@ -0,0 +1,53 @@
+import _ from 'lodash-es';
+
+export const ModuleSizeMap = {
+  'width:450px;height:280px;': '标准尺寸(450*280)',
+  'width:1000px;height:280px;': '拉伸尺寸(1000*280)',
+};
+export const ModuleSizeOptions = _.map(ModuleSizeMap, (v, k) => ({
+  value: k,
+  label: v,
+}));
+
+export const ModuleBGMap = {
+  ODD: '旧版',
+  NEW: '新版',
+};
+export const ModuleBGOptions = _.map(ModuleBGMap, (v, k) => ({
+  value: k,
+  label: v,
+}));
+
+export const ModulePositionMap = {
+  'top:60px;left:0;': '左上',
+  'top:350px;left:0;': '左中',
+  'top:640px;left:0;': '左下',
+  'top:60px;right:0;': '右上',
+  'top:350px;right:0;': '右中',
+  'top:640px;right:0;': '右下',
+  'top:640px;left:460px;': '中下',
+};
+export const ModulePositionOptions = _.map(ModulePositionMap, (v, k) => ({
+  value: k,
+  label: v,
+}));
+
+export const ModuleChartTypeMap = {
+  pie: '饼状图',
+  bar: '柱状图',
+  line: '折线图',
+};
+export const ModuleChartTypeOptions = _.map(ModuleChartTypeMap, (v, k) => ({
+  value: k,
+  label: v,
+}));
+
+export const ModuleListTypeMap = {
+  A: '饼状图',
+  bar: '柱状图',
+  line: '折线图',
+};
+export const ModuleListTypeOptions = _.map(ModuleListTypeMap, (v, k) => ({
+  value: k,
+  label: v,
+}));

src/views/vent/home/configurable/README.md

@@ -10,4 +10,4 @@
 
 将上述两个组件配置到菜单中之后：
 
-点开配置表格，对各个设备进行配置，配置好的点表/字段将用于在首页展示。如有多个需要配置的首页。首页各个模块都有其对应的设备，例如：左上角对应主通风机
+点开配置表格，对各个设备进行配置，配置好的点表/字段/样式等将用于在首页展示。如有多个需要配置的首页。首页各个模块都有其对应的设备，例如：左上角对应主通风机