[Feat 0000] 根据新需求更新配置

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

@@ -1,5 +1,6 @@
 import _ from 'lodash-es';
 import { ModuleData, ShowStyle } from './types';
+import { ModulePositionMap, ModuleSizeMap } from './options';
 
 /** 将原本的 formData 格式化为 api.saveOrUpdate 需要的格式 */
 export function parseFormDataToParams(formData: Record<string, number | string | undefined>) {
@@ -15,7 +16,14 @@ export function parseFormDataToParams(formData: Record<string, number | string |
 /** 将 api.list 返回的数据格式化，格式化之后可以支持对应的表单以用，该方法会修改源数据 */
 export function parseModuleData(listData: { moduleData: ModuleData; showStyle: ShowStyle }) {
   _.forEach(listData.showStyle, (v, k) => {
-    listData[`showStyle.${k}`] = v;
+    listData[`showStyle.${k}`] = _.get(
+      {
+        ...ModuleSizeMap,
+        ...ModulePositionMap,
+      },
+      v,
+      v
+    );
   });
 
   return listData;

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

@@ -36,7 +36,6 @@
   import { BasicModal } from '/@/components/Modal';
   import CodeEditor from '/@/components/CodeEditor/src/CodeEditor.vue';
   import { ModulePresetMap } from './options';
-  import { merge } from 'lodash-es';
 
   const formData = reactive({});
   const isUpdate = ref(false);

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

@@ -2,14 +2,14 @@ import _ from 'lodash-es';
 import { Config } from './types';
 
 export const ModuleSizeMap = {
-  '标准尺寸(450*280)': 'width:450px;height:280px;',
-  '纵向拉伸(450*570)': 'width:450px;height:570px;',
-  '纵向填充(450*860)': 'width:450px;height:860px;',
-  '横向拉伸(1000*280)': 'width:1000px;height:280px;',
-  '横向填充(1920*280)': 'width:1920px;height:280px;',
+  'width:450px;height:280px;': '标准尺寸(450*280)',
+  'width:450px;height:570px;': '纵向拉伸(450*570)',
+  'width:450px;height:860px;': '纵向填充(450*860)',
+  'width:1000px;height:280px;': '横向拉伸(1000*280)',
+  'width:1920px;height:280px;': '横向填充(1920*280)',
 };
-export const ModuleSizeOptions = _.map(ModuleSizeMap, (_, k) => ({
-  value: k,
+export const ModuleSizeOptions = _.map(ModuleSizeMap, (v, k) => ({
+  value: v,
   label: k,
 }));
 
@@ -19,17 +19,17 @@ export const ModuleVersionOptions = _.map(['原版', '新版'], (k) => ({
 }));
 
 export const ModulePositionMap = {
-  不展示: 'display:none;',
-  左上: '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;',
+  'display:none;': '不展示',
+  '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, (_, k) => ({
-  value: k,
+export const ModulePositionOptions = _.map(ModulePositionMap, (v, k) => ({
+  value: v,
   label: k,
 }));
 
@@ -80,6 +80,7 @@ export const ModulePresetMap: Record<
         {
           type: 'A',
           layout: 'val-top',
+          readFrom: 'readData',
           items: [
             {
               prop: 'readData.windSpeed1',
@@ -99,7 +100,7 @@ export const ModulePresetMap: Record<
       preset: [],
     },
     showStyle: {
-      size: '标准尺寸(450*280)',
+      size: 'width:450px;height:280px;',
     },
   },
   '折线图（1*1）': {
@@ -144,7 +145,7 @@ export const ModulePresetMap: Record<
       preset: [],
     },
     showStyle: {
-      size: '标准尺寸(450*280)',
+      size: 'width:450px;height:280px;',
     },
   },
   '面积图（1*1）': {
@@ -188,9 +189,7 @@ export const ModulePresetMap: Record<
       table: [],
       preset: [],
     },
-    showStyle: {
-      size: '标准尺寸(450*280)',
-    },
+    showStyle: { size: 'width:450px;height:280px;' },
   },
   '饼状图（1*1）': {
     moduleData: {
@@ -230,9 +229,7 @@ export const ModulePresetMap: Record<
       table: [],
       preset: [],
     },
-    showStyle: {
-      size: '标准尺寸(450*280)',
-    },
+    showStyle: { size: 'width:450px;height:280px;' },
   },
   '柱状图（2*1）': {
     moduleData: {
@@ -268,9 +265,7 @@ export const ModulePresetMap: Record<
         },
       ],
     },
-    showStyle: {
-      size: '横向拉伸(1000*280)',
-    },
+    showStyle: { size: 'width:450px;height:280px;' },
   },
   '画廊（1*1）': {
     moduleData: {
@@ -295,6 +290,7 @@ export const ModulePresetMap: Record<
       gallery: [
         {
           type: 'A',
+          readFrom: '',
           items: [
             {
               prop: 'total',
@@ -328,9 +324,7 @@ export const ModulePresetMap: Record<
       chart: [],
       preset: [],
     },
-    showStyle: {
-      size: '标准尺寸(450*280)',
-    },
+    showStyle: { size: 'width:450px;height:280px;' },
   },
   '列表（1*1）': {
     moduleData: {
@@ -360,6 +354,7 @@ export const ModulePresetMap: Record<
       list: [
         {
           type: 'timeline',
+          readFrom: '',
           items: [
             {
               label: '正常',
@@ -395,9 +390,7 @@ export const ModulePresetMap: Record<
         },
       ],
     },
-    showStyle: {
-      size: '标准尺寸(450*280)',
-    },
+    showStyle: { size: 'width:450px;height:280px;' },
   },
   '表格（1*1）': {
     moduleData: {
@@ -448,9 +441,7 @@ export const ModulePresetMap: Record<
       ],
       chart: [],
     },
-    showStyle: {
-      size: '标准尺寸(450*280)',
-    },
+    showStyle: { size: 'width:450px;height:280px;' },
   },
   '爆炸三角形（1*1）': {
     moduleData: {
@@ -478,9 +469,7 @@ export const ModulePresetMap: Record<
       chart: [],
       preset: [{}],
     },
-    showStyle: {
-      size: '标准尺寸(450*280)',
-    },
+    showStyle: { size: 'width:450px;height:280px;' },
   },
 };
 

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

@@ -1,11 +1,17 @@
 import { ModulePositionMap, ModuleSizeMap } from './options';
 
 export interface Config {
+  /** 模块的名称 */
   moduleName: string;
+  /** 所属页面 */
   pageType: string;
+  /** 设备类型，但目前不重要了 */
   deviceType: string;
+  /** 模块配置，核心之一 */
   moduleData: ModuleData;
+  /** 模块样式，核心之一 */
   showStyle: ShowStyle;
+  /** 模块描述，可用于存储其他信息 */
   desc?: string;
 }
 
@@ -14,6 +20,8 @@ export interface ModuleDataBoard {
   type: 'A' | 'B' | 'C' | 'D';
   /** 展示牌布局，决定是哪部分内容在上方 */
   layout: 'val-top' | 'label-top';
+  /** 读取数据时的基础路径 */
+  readFrom: string;
   items: {
     /** 展示牌说明内容 */
     label: string;
@@ -24,6 +32,8 @@ export interface ModuleDataBoard {
 export interface ModuleDataList {
   /** 列表项预设的背景类型 */
   type: 'timeline' | 'A' | 'B' | 'C';
+  /** 读取数据时的基础路径 */
+  readFrom: string;
   items: {
     /** 列表项说明内容 */
     label: string;
@@ -33,10 +43,14 @@ export interface ModuleDataList {
     /** 针对列表项说明的额外信息 */
     info: string;
   }[];
+  /** 列表左侧展示的图片路径 */
+  image?: string;
 }
 export interface ModuleDataGallery {
   /** 列表项预设的背景类型 */
   type: 'A' | 'B';
+  /** 读取数据时的基础路径 */
+  readFrom: string;
   items: {
     /** 列表项说明内容 */
     label: string;
@@ -70,9 +84,9 @@ export interface ModuleDataChart {
 export interface ModuleDataTable {
   /** 表格的预设样式 */
   type: 'A' | 'B';
-  columns: { label: string; prop: string }[];
-  /** 读取数据时的基础路径，例如如果表格依赖一个数组，那么该项应设置能读取到该数组的路径。例如：readData.history */
+  /** 读取数据时的基础路径 */
   readFrom: string;
+  columns: { label: string; prop: string }[];
 }
 export interface ModuleDataPreset {
   /** 表格的预设样式 */
@@ -131,9 +145,11 @@ export interface ModuleData {
   list: ModuleDataList[];
   table: ModuleDataTable[];
   gallery: ModuleDataGallery[];
+  /** 如果目前没有数据可以对接，可使用模拟数据先行展示 */
+  mock?: any[];
 }
 export interface ShowStyle {
-  /** 模块的宽高 */
+  /** 模块的宽高，一般来说是选好不动即可。特殊情况下可以自定义宽高 */
   size: keyof typeof ModuleSizeMap;
   /** 模块的版本，分新版及旧版，只要有一个模块指定为旧版，那么整个页面风格将变更为旧版 */
   version: '原版' | '新版';

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

@@ -9,8 +9,6 @@
   import ModuleBottom from './enhanced/moduleBottom.vue';
   import { computed } from 'vue';
   import { ShowStyle } from '../../../deviceManager/configurationTable/types';
-  import { ModulePositionMap, ModuleSizeMap } from '../../../deviceManager/configurationTable/options';
-  import { get } from 'lodash-es';
 
   const props = defineProps<{
     showStyle: ShowStyle;
@@ -20,8 +18,8 @@
   defineEmits(['close']);
 
   const style = computed(() => {
-    const size = get(ModuleSizeMap, props.showStyle.size, ModuleSizeMap['标准尺寸(450*280)']);
-    const position = get(ModulePositionMap, props.showStyle.position, ModulePositionMap['不展示']);
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
     return size + position;
   });
 

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

@@ -8,8 +8,6 @@
   import ModuleBottom from './original/moduleBottom.vue';
   import { computed } from 'vue';
   import { ShowStyle } from '../../../deviceManager/configurationTable/types';
-  import { ModulePositionMap, ModuleSizeMap } from '../../../deviceManager/configurationTable/options';
-  import { get } from 'lodash-es';
 
   const props = defineProps<{
     showStyle: ShowStyle;
@@ -19,8 +17,8 @@
   defineEmits(['close']);
 
   const style = computed(() => {
-    const size = get(ModuleSizeMap, props.showStyle.size, ModuleSizeMap['标准尺寸(450*280)']);
-    const position = get(ModulePositionMap, props.showStyle.position, ModulePositionMap['不展示']);
+    const size = props.showStyle.size;
+    const position = props.showStyle.position;
     return size + position;
   });
 

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

@@ -458,9 +458,9 @@ export const testConfigA: Config[] = [
       preset: [{}],
     },
     showStyle: {
-      size: '标准尺寸(450*280)',
-      version: 'enhanced',
-      position: '左下',
+      size: 'width:450px;height:280px;',
+      version: '新版',
+      position: 'top:640px;left:0;',
     },
   },
   {
@@ -509,9 +509,9 @@ export const testConfigA: Config[] = [
       ],
     },
     showStyle: {
-      size: '横向拉伸(1000*280)',
-      version: 'enhanced',
-      position: '中下',
+      size: 'width:450px;height:280px;',
+      version: '新版',
+      position: 'top:640px;left:460px;',
     },
   },
   {
@@ -544,9 +544,9 @@ export const testConfigA: Config[] = [
       preset: [{}],
     },
     showStyle: {
-      size: '标准尺寸(450*280)',
-      version: 'enhanced',
-      position: '右上',
+      size: 'width:450px;height:280px;',
+      version: '新版',
+      position: 'top:350px;right:0;',
     },
   },
   // {
@@ -689,9 +689,9 @@ export const testConfigA: Config[] = [
       chart: [],
     },
     showStyle: {
-      size: '标准尺寸(450*280)',
-      version: 'enhanced',
-      position: '右中',
+      size: 'width:450px;height:280px;',
+      version: '新版',
+      position: 'top:350px;right:0;',
     },
   },
   {
@@ -720,6 +720,7 @@ export const testConfigA: Config[] = [
       gallery: [
         {
           type: 'A',
+          readFrom: 'sys_majorpath',
           items: [
             {
               prop: 'total',
@@ -754,9 +755,9 @@ export const testConfigA: Config[] = [
       preset: [],
     },
     showStyle: {
-      size: '标准尺寸(450*280)',
-      version: 'enhanced',
-      position: '右下',
+      size: 'width:450px;height:280px;',
+      version: '新版',
+      position: 'top:640px;right:0;',
     },
   },
 ];