[Wip 0000] 公司端看板为可配置化重构

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

@@ -1,149 +1,178 @@
 import leftImg from '/@/assets/images/files/homes/file.svg';
 import rightImg from '/@/assets/images/files/homes/sp.svg';
 
-// export interface TITLE_CONFIG {
-//   text: string;
-//   prop: string;
-//   translation?: Record<string | number, string>;
-//   default: string;
-// }
-// export interface HEADER_CONFIG {
-//   label: string;
-//   prop: string;
-//   translation?: Record<string | number, string>;
-//   default: string;
-// }
-// export interface TABLE_CONFIG {
-//   columns: { label: string; prop: string; _t?: boolean }[];
-//   collapses: { label: string; prop: string; _t?: boolean }[];
-//   translation?: Record<string | number, string>;
-//   default: string;
-// }
-// export interface CONTENT_CONFIG {
-//   src: string;
-//   text: string;
-//   prop: string;
-// }
-// export interface TREE_CONFIG {
-//   translation?: Record<string | number, string>;
-//   default: string;
-//   prefix: string;
-//   prop: string;
-//   suffix: string;
-//   children: {
-//     prefix: string;
-//     prop: string;
-//     suffix: string;
-//   }[];
-// }
+export type Translation = Record<string | number, string>;
+export interface TitleConfig {
+  label: string;
+  prop: string;
+  translation?: Translation;
+}
+export interface HeaderConfig {
+  label: string;
+  prop: string;
+  translation?: Translation;
+}
+export interface TableConfig {
+  prop: string;
+  columns: { label: string; prop: string; _t?: boolean }[];
+  collapses: { label: string; prop: string; _t?: boolean }[];
+  translation?: Translation;
+}
+export interface ListConfig {
+  icon: string;
+  label: string;
+  prop: string;
+  translation?: Translation;
+  collapses: { label: string; prop: string; _t?: boolean }[];
+}
+export interface OverviewConfig {
+  label: string;
+  prop: string;
+  src: string;
+}
+export interface TreeConfig {
+  prefix: string;
+  prop: string;
+  suffix: string;
+  children: {
+    prefix: string;
+    prop: string;
+    suffix: string;
+  }[];
+  translation?: Record<string | number, string>;
+}
 
-// /** 看板的总配置 */
-// export const BILLBOARD_CONFIG = {
-//   DustStatus: {
-//     title: {
-//       text: '',
-//       prop: '',
-//       translation: {},
-//     },
-//     table: {
-//       columns: [{ label: '', prop: '' }],
-//       collapses: [{ label: '', prop: '' }],
-//       translation: {},
-//     },
-//   },
-//   FileOverview: {
-//     content: [
-//       { src: leftImg, text: '文档总数', prop: 'totalNum' },
-//       { src: rightImg, text: '待审批数', prop: 'approvalNum' },
-//     ],
-//   },
-//   FireStatus: {
-//     title: {
-//       text: '',
-//       prop: '',
-//       translation: {},
-//     },
-//     list: [
-//       {
-//         icon: '',
-//         label: '',
-//         prop: '',
-//         type: '',
-//         translation: {},
-//         collapses: [{ label: '', prop: '' }],
-//       },
-//     ],
-//   },
-//   GasStatus: {
-//     header: [
-//       {
-//         label: '',
-//         prop: '',
-//         translation: {},
-//       },
-//     ],
-//     table: {
-//       columns: [],
-//       collapses: [],
-//       translation: {},
-//     },
-//   },
-//   Summary: {
-//     header: [
-//       {
-//         label: '',
-//         prop: '',
-//         translation: {},
-//       },
-//     ],
-//     table: {
-//       columns: [],
-//       translation: {},
-//     },
-//   },
-//   VentilationStatus: {
-//     header: [
-//       {
-//         label: '',
-//         prop: '',
-//         filte: '',
-//         translation: {},
-//       },
-//     ],
-//     tree: {
-//       prefix: '',
-//       prop: 'strname',
-//       suffix: '',
-//       children: [
-//         {
-//           prefix: '名称：',
-//           prop: 'strinstallpos',
-//           suffix: '',
-//         },
-//         {
-//           prefix: '1号风机风量：',
-//           prop: 'Fan1m3',
-//           suffix: '(m³/min)',
-//         },
-//         {
-//           prefix: '2号风机风量：',
-//           prop: 'Fan2m3',
-//           suffix: '(m³/min)',
-//         },
-//         {
-//           prefix: '频率：',
-//           prop: 'FanFreqHz',
-//           suffix: 'Hz',
-//         },
-//         {
-//           prefix: '三区阻力分布：',
-//           prop: 'sqzlfb',
-//           suffix: '',
-//         },
-//       ],
-//     },
-//   },
-// };
+/** 看板的总配置 */
+export const BillboardConfig: {
+  DustStatus: {
+    title: TitleConfig;
+    table: TableConfig;
+  };
+  FileOverview: {
+    contents: OverviewConfig[];
+  };
+  FireStatus: {
+    title: TitleConfig;
+    lists: ListConfig[];
+  };
+  GasStauts: {
+    headers: HeaderConfig[];
+    table: TableConfig;
+  };
+  Summary: {
+    headers: HeaderConfig[];
+    table: TableConfig;
+  };
+  VentilationStauts: {
+    headers: HeaderConfig[];
+    tree: TreeConfig;
+  };
+} = {
+  DustStatus: {
+    title: {
+      text: '',
+      prop: '',
+      translation: {},
+    },
+    table: {
+      columns: [{ label: '', prop: '' }],
+      collapses: [{ label: '', prop: '' }],
+      translation: {},
+    },
+  },
+  FileOverview: {
+    content: [
+      { src: leftImg, text: '文档总数', prop: 'totalNum' },
+      { src: rightImg, text: '待审批数', prop: 'approvalNum' },
+    ],
+  },
+  FireStatus: {
+    title: {
+      text: '',
+      prop: '',
+      translation: {},
+    },
+    list: [
+      {
+        icon: '',
+        label: '',
+        prop: '',
+        type: '',
+        translation: {},
+        collapses: [{ label: '', prop: '' }],
+      },
+    ],
+  },
+  GasStatus: {
+    header: [
+      {
+        label: '',
+        prop: '',
+        translation: {},
+      },
+    ],
+    table: {
+      columns: [],
+      collapses: [],
+      translation: {},
+    },
+  },
+  Summary: {
+    header: [
+      {
+        label: '',
+        prop: '',
+        translation: {},
+      },
+    ],
+    table: {
+      columns: [],
+      translation: {},
+    },
+  },
+  VentilationStatus: {
+    header: [
+      {
+        label: '',
+        prop: '',
+        filte: '',
+        translation: {},
+      },
+    ],
+    tree: {
+      prefix: '',
+      prop: 'strname',
+      suffix: '',
+      children: [
+        {
+          prefix: '名称：',
+          prop: 'strinstallpos',
+          suffix: '',
+        },
+        {
+          prefix: '1号风机风量：',
+          prop: 'Fan1m3',
+          suffix: '(m³/min)',
+        },
+        {
+          prefix: '2号风机风量：',
+          prop: 'Fan2m3',
+          suffix: '(m³/min)',
+        },
+        {
+          prefix: '频率：',
+          prop: 'FanFreqHz',
+          suffix: 'Hz',
+        },
+        {
+          prefix: '三区阻力分布：',
+          prop: 'sqzlfb',
+          suffix: '',
+        },
+      ],
+    },
+  },
+};
 
 // 基础的表格列配置，针对普通设备
 export const GAS_STATUS_COLUMN = [

src/views/vent/home/billboard/utils.ts

@@ -1,4 +1,5 @@
 import _ from 'lodash-es';
+import { BillboardType, HeaderConfig, ListConfig, TableConfig, TitleConfig } from './billboard.data';
 
 /**
  * 功能类似 lodash.get 但是当取值为 null 时也直接返回默认值
@@ -7,3 +8,80 @@ export const get: typeof _.get = (o, p, defaultValue = '/') => {
   const d = _.get(o, p, defaultValue);
   return d === null ? defaultValue : d;
 };
+
+/** 依据配置获取适用于 CommonTitle 的数据 */
+export function parseTitleConfig(data: BillboardType, config: TitleConfig) {
+  const val = get(data, config.prop);
+  return {
+    label: config.label,
+    value: config.translation ? get(config.translation, val) : val,
+  };
+}
+
+/** 依据配置获取适用于 LargeBoard 的数据 */
+export function parseHeaderConfigs(data: BillboardType, configs: HeaderConfig[]) {
+  const types = ['to-top-right', 'to-bottom-right'];
+  return configs.map((cfg, i) => {
+    const val = get(data, cfg.prop);
+    return {
+      label: cfg.label,
+      value: cfg.translation ? get(cfg.translation, val) : val,
+      type: types[i % configs.length],
+    };
+  });
+}
+
+/** 依据配置获取适用于 CommonTable、CollapseTable 的数据 */
+export function parseTableConfig(data: BillboardType, config: TableConfig) {
+  const arr = get(data, config.prop, []);
+  if (config.translation) {
+    const finalRes = arr.reduce((res: any[], ele) => {
+      // 对于表格里的每条数据，如果需要翻译则翻译之
+      config.columns.forEach((col) => {
+        if (col._t) {
+          const v = get(ele, col.prop);
+          _.set(ele, col.prop, get(config.translation, v));
+        }
+      });
+      config.collapses.forEach((col) => {
+        if (col._t) {
+          const v = get(ele, col.prop);
+          _.set(ele, col.prop, get(config.translation, v));
+        }
+      });
+      res.push(ele);
+      return res;
+    }, []);
+
+    return {
+      data: finalRes,
+      collapses: config.collapses,
+      columns: config.columns,
+    };
+  } else {
+    return {
+      data,
+      collapses: config.collapses,
+      columns: config.columns,
+    };
+  }
+}
+
+/** 依据配置获取适用于 ListItem 的数据 */
+export function parseListConfigs(data: BillboardType, configs: ListConfig[]) {
+  const types = ['blue', 'green'];
+  return configs.map((cfg, i) => {
+    const val = get(data, cfg.prop);
+    return {
+      icon: cfg.icon,
+      label: cfg.label,
+      value: cfg.translation ? get(cfg.translation, val) : val,
+      type: types[i % configs.length],
+      collapses: cfg.collapses.map((col) => {
+        return {
+          label: col.label,
+        };
+      }),
+    };
+  });
+}