Ver código fonte

[Wip 0000] 场景类历史数据组件修改

houzekong 9 meses atrás
pai
commit
b8adb8e7b9

+ 31 - 15
src/views/vent/comment/history/HistoryTable.vue

@@ -15,12 +15,23 @@
 </template>
 
 <script lang="ts" setup>
+  // 场景类历史数据公共组件!
+  // 用于服务场景类历史数据业务,这类数据通常由一条数据返回多个子设备的信息,例如:{ forcFan1Temp, forcFan2Temp };
+  // 而此组件可以将这些数据分类,例如:表格只有 温度 一列,但可以根据所选的子设备展示不同的数据;
+  // 综上所述,此组件在基础的历史数据组件上添加了子设备下拉框(由字典驱动),用户选择子设备后表头将动态调整以适配数据展示;
+  // 使用方法如下:
+  // 设有历史数据2条,[{ name, forcFan1Temp, forcFan2Temp }, { name, forcFan1Temp, forcFan2Temp }]。
+  // 1、配置设备字段(通常是综合管理-设备字段管理),加$的字段将允许动态展示数据。如 name-名称,$Temp-温度。
+  // 2、配置数据字典(通常是设置-数据字典),为上述设备的子设备添加编码。如 压风机1-forcFan1,压风机2-forcFan2。
+  // 3、配合前端开发人员开发,调用该组件并使用上面定好的device-code(设备字段)、dict-code(数据字典)。
+  // 4、测试结果,子设备选择 压风机1 时,表格会读取 name、forcFan1Temp 作展示。
   import { onMounted, ref, shallowRef } from 'vue';
   import { BasicColumn, PaginationProps, BasicTable } from '/@/components/Table';
   import { getTableHeaderColumns } from '/@/hooks/web/useWebColumns';
   import { defaultFormProps, defaultPaginationProps, getDefaultSchemas, defaultTableProps } from './history.data';
   import { getDeviceList, list } from './history.api';
   import { useListPage } from '/@/hooks/system/useListPage';
+  import { initDictOptions } from '/@/utils/dict';
 
   const props = withDefaults(
     defineProps<{
@@ -32,7 +43,7 @@
       // schemas?: FormSchema[];
       /** 表格分页配置,可以覆写,参考BaiscTable */
       pagination?: PaginationProps;
-      /** 设备编码,该编码用于从字段/点表配置中读出表头,示例:forcFan */
+      /** 设备编码,该编码用于从字段/点表配置中读出默认表头,示例:forcFan */
       deviceCode: string;
       /** 字典编码,该编码用于从字典配置中读出设备项,示例:forcFan_dict */
       dictCode: string;
@@ -48,8 +59,9 @@
   );
 
   // 创建表格,此表格目前不具备常用功能,需要初始化后使用(props指定表格配置时除外)
+  let originColumns: BasicColumn[] = [];
   const { tableContext } = useListPage({ tableProps: defaultTableProps });
-  const [register, { getForm, setLoading, getPaginationRef, setPagination, setProps, getColumns, setColumns }] = tableContext;
+  const [register, { getForm, setLoading, getPaginationRef, setPagination, setProps, setColumns }] = tableContext;
 
   /**
    * 初始化表格,该方法将根据参数设定新的表头、表单,如果提供了自定义的表头、表单配置则不作操作。
@@ -59,18 +71,17 @@
    * @param deviceCodes 获取表头所用的编码,从左到右依次尝试,直到找到第一个有表头信息的为止
    * @param deviceOptions 设备下拉框对应的选项
    */
-  function initTable(deviceCodes: string[], deviceOptions: any[]) {
-    const defaultSchemas = getDefaultSchemas(props.dictCode, deviceOptions);
-    let defaultColumns: BasicColumn[] = [];
+  function initTable(deviceCodes: string[], deviceOptions: any[], dictOptions: any[]) {
+    const defaultSchemas = getDefaultSchemas(dictOptions, deviceOptions);
     for (const code of deviceCodes) {
       const cols = getTableHeaderColumns(code);
       if (cols.length) {
-        defaultColumns = cols;
+        originColumns = cols;
+        setColumns(cols);
         break;
       }
     }
     setProps({
-      columns: defaultColumns,
       formConfig: {
         ...defaultFormProps,
         schemas: defaultSchemas,
@@ -84,15 +95,17 @@
    * @param prefix 子设备的值,即为表头取数据时字段的前缀
    */
   function updateColumns(prefix: string) {
-    const cols = getColumns();
-    setColumns(
-      cols.map((col) => {
+    const cols = originColumns.map((col) => {
+      const di = col.dataIndex as string;
+      if (di && di.includes('$')) {
         return {
           ...col,
-          dataIndex: col.dataIndex ? `${prefix || ''}${col.dataIndex}` : undefined,
+          dataIndex: di.replace('$', prefix),
         };
-      })
-    );
+      }
+      return col;
+    });
+    setColumns(cols);
   }
 
   // 表格数据相关的字段
@@ -129,12 +142,14 @@
   // 设备信息相关的字段
   const deviceInfo = ref<Record<string, unknown>>({});
   const deviceOptions = ref<Record<string, unknown>[]>([]);
+  const dictOptions = ref<Record<string, unknown>[]>([]); // 子设备下拉框选项
 
   /**
    * 获取设备信息列表,初始化设备信息及设备可选项
    */
   async function fetchDevice() {
     const results = await getDeviceList({ devicetype: props.deviceCode, pageSize: 10000 });
+    const dicts = await initDictOptions(props.dictCode);
 
     const options = results.map((item) => {
       return {
@@ -147,6 +162,7 @@
     });
     deviceOptions.value = options;
     deviceInfo.value = results[0];
+    dictOptions.value = dicts;
   }
 
   /**
@@ -163,12 +179,12 @@
     }) as Record<string, unknown>;
     const code = (deviceInfo.value.deviceType || props.deviceCode.concat('*')) as string;
     await fetchData(formData, code, deviceInfo.value);
-    updateColumns(formData.deviceNum);
+    updateColumns(formData.deviceNum || '');
   }
 
   onMounted(async () => {
     await fetchDevice();
-    initTable([deviceInfo.value.deviceType as string, props.deviceCode.concat('_history')], deviceOptions.value);
+    initTable([deviceInfo.value.deviceType as string, props.deviceCode.concat('_history')], deviceOptions.value, dictOptions.value);
     search();
   });
 </script>

+ 0 - 1
src/views/vent/comment/history/TestPage.vue

@@ -11,7 +11,6 @@
   const code = ref('forcFan');
 
   onBeforeMount(() => {
-    console.log('debug', route);
     if (route.query.code) {
       code.value = route.query.code as string;
     }

+ 34 - 6
src/views/vent/comment/history/history.data.ts

@@ -9,7 +9,7 @@ import { BasicTableProps, PaginationProps, FormProps, FormSchema } from '/@/comp
  * @param deviceOptions 设备编码,用于初始化设备下拉框
  * @returns
  */
-export const getDefaultSchemas: (dictCode: string, deviceOptions: any[]) => FormSchema[] = (dictCode: string, deviceOptions: any[]) => [
+export const getDefaultSchemas: (dictCode: any[], deviceOptions: any[]) => FormSchema[] = (dictOptions: any[], deviceOptions: any[]) => [
   {
     field: 'ttime_begin',
     label: '开始时间',
@@ -61,16 +61,35 @@ export const getDefaultSchemas: (dictCode: string, deviceOptions: any[]) => Form
   {
     label: '子设备',
     field: 'deviceNum',
-    component: 'JDictSelectTag',
-    show: Boolean(dictCode),
+    component: 'Select',
+    required: true,
+    defaultValue: dictOptions[0].value,
     componentProps: {
-      dictCode,
-      placeholder: '请选择',
+      options: dictOptions,
+      // onChange: (e, option) => {
+      //   nextTick(async () => {
+      //     await getDataSource();
+      //   });
+      // },
     },
     colProps: {
       span: 4,
     },
   },
+  // {
+  //   label: '子设备',
+  //   field: 'deviceNum',
+  //   // component: 'JDictSelectTag',
+  //   // show: Boolean(dictCode),
+  //   componentProps: {
+  //     dictCode,
+  //     showChooseOption: false,
+  //     placeholder: '请选择',
+  //   },
+  //   colProps: {
+  //     span: 4,
+  //   },
+  // },
   {
     label: '间隔时间',
     field: 'skip',
@@ -120,7 +139,15 @@ export const getDefaultSchemas: (dictCode: string, deviceOptions: any[]) => Form
 
 /** 默认的表格props,参考 BasicTable 组件 */
 export const defaultTableProps: BasicTableProps = {
-  columns: [],
+  columns: [
+    {
+      align: 'center',
+      dataIndex: 'strinstallpos',
+      defaultHidden: false,
+      title: '安装位置',
+      width: 80,
+    },
+  ],
   bordered: false,
   size: 'small',
   showIndexColumn: true,
@@ -130,6 +157,7 @@ export const defaultTableProps: BasicTableProps = {
 /** 默认的查询表单props,参考 BasicForm 组件 */
 export const defaultFormProps: FormProps = {
   labelAlign: 'left',
+  labelCol: { span: 8 },
   showAdvancedButton: false,
   showSubmitButton: false,
   showResetButton: true,