|
|
@@ -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>
|
