动态列处理
This commit is contained in:
parent
0d655dfc5b
commit
c00d8077c1
@ -9,7 +9,6 @@ export const fieldNameMapping: FieldMapping = {
|
||||
DeviceType: '设备类型',
|
||||
DeviceId: '设备ID',
|
||||
Timestamps: '时间戳',
|
||||
APPData: '应用数据',
|
||||
// 可以根据需要添加更多映射
|
||||
};
|
||||
|
||||
|
||||
@ -64,18 +64,6 @@ export const validateAndCleanData = (data: any[]): DynamicDeviceData[] => {
|
||||
case 'DeviceId':
|
||||
cleaned[key] = value ? String(value) : '';
|
||||
break;
|
||||
case 'APPData':
|
||||
// 尝试解析JSON数据
|
||||
try {
|
||||
if (typeof value === 'string') {
|
||||
cleaned[key] = JSON.parse(value);
|
||||
} else {
|
||||
cleaned[key] = value;
|
||||
}
|
||||
} catch {
|
||||
cleaned[key] = value;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
// 对于未知字段,保持原值
|
||||
cleaned[key] = value;
|
||||
|
||||
@ -31,10 +31,28 @@ const fixedColumns = computed(() => [
|
||||
]);
|
||||
|
||||
// 合并固定列和动态列
|
||||
const allColumns = computed(() => [
|
||||
const allColumns = computed(() => {
|
||||
const columns = [
|
||||
...fixedColumns.value,
|
||||
...dynamicColumns.value,
|
||||
]);
|
||||
];
|
||||
console.log('当前所有列定义:', columns);
|
||||
return columns;
|
||||
});
|
||||
|
||||
// 初始化默认列(防止表格空白)
|
||||
const initDefaultColumns = () => {
|
||||
if (dynamicColumns.value.length === 0) {
|
||||
dynamicColumns.value = [
|
||||
{ field: 'SystemName', title: '系统名称', minWidth: '150' },
|
||||
{ field: 'DeviceType', title: '设备类型', minWidth: '150' },
|
||||
{ field: 'DeviceId', title: '设备ID', minWidth: '150' },
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
// 初始化默认列
|
||||
initDefaultColumns();
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
schema: querySchema.value,
|
||||
@ -67,7 +85,10 @@ const gridOptions: VxeGridProps<any> = {
|
||||
columns: allColumns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {},
|
||||
pagerConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
search: true,
|
||||
@ -89,21 +110,30 @@ const gridOptions: VxeGridProps<any> = {
|
||||
},
|
||||
});
|
||||
|
||||
// 处理数据并动态生成列定义
|
||||
console.log('API返回的原始数据:', data);
|
||||
|
||||
// 简化处理逻辑,先确保基本功能正常
|
||||
if (data?.items && data.items.length > 0) {
|
||||
// 验证和清理数据
|
||||
const cleanedData = validateAndCleanData(data.items);
|
||||
console.log('原始items数据:', data.items);
|
||||
|
||||
// 直接使用原始数据,不进行复杂处理
|
||||
const items = data.items;
|
||||
|
||||
// 动态生成列定义
|
||||
dynamicColumns.value = generateDynamicColumns(cleanedData);
|
||||
const generatedColumns = generateDynamicColumns(items);
|
||||
console.log('生成的列定义:', generatedColumns);
|
||||
|
||||
// 返回处理后的数据
|
||||
return {
|
||||
...data,
|
||||
items: cleanedData,
|
||||
};
|
||||
// 更新动态列
|
||||
dynamicColumns.value = generatedColumns;
|
||||
|
||||
// 强制更新列定义
|
||||
await nextTick();
|
||||
|
||||
console.log('返回给表格的数据:', data);
|
||||
return data;
|
||||
}
|
||||
|
||||
console.log('没有数据或数据为空');
|
||||
return data;
|
||||
},
|
||||
},
|
||||
|
||||
108
apps/web-antd/src/views/dataManger/deviceData/test.vue
Normal file
108
apps/web-antd/src/views/dataManger/deviceData/test.vue
Normal file
@ -0,0 +1,108 @@
|
||||
<script setup lang="ts">
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { postTreeModelDeviceDataInfoPage } from '#/api-client';
|
||||
|
||||
import { querySchema } from './schema';
|
||||
|
||||
defineOptions({
|
||||
name: 'DeviceDataTest',
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const { DeviceType, DeviceId, FocusAddress } = route.query;
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
schema: querySchema.value,
|
||||
initialValues: {
|
||||
FocusAddress: FocusAddress as string,
|
||||
},
|
||||
};
|
||||
|
||||
// 使用固定的列定义进行测试
|
||||
const testColumns = [
|
||||
{ title: '序号', type: 'seq', width: 50 },
|
||||
{ field: 'SystemName', title: '系统名称', minWidth: '150' },
|
||||
{ field: 'ProjectId', title: '项目ID', minWidth: '150' },
|
||||
{ field: 'ProjectName', title: '项目名称', minWidth: '150' },
|
||||
{ field: 'IoTDataType', title: 'IoT数据类型', minWidth: '150' },
|
||||
{ field: 'DeviceType', title: '设备类型', minWidth: '150' },
|
||||
{ field: 'DeviceId', title: '设备ID', minWidth: '150' },
|
||||
{ field: 'Timestamps', title: '时间戳', minWidth: '150' },
|
||||
// 添加一个通用字段来显示其他数据
|
||||
{ field: 'extraData', title: '其他数据', minWidth: '200', formatter: (value: any, row: any) => {
|
||||
// 显示所有不在固定列中的字段
|
||||
const fixedFields = ['SystemName', 'ProjectId', 'ProjectName', 'IoTDataType', 'DeviceType', 'DeviceId', 'Timestamps'];
|
||||
const extraFields = Object.keys(row).filter(key => !fixedFields.includes(key));
|
||||
if (extraFields.length > 0) {
|
||||
return extraFields.map(field => `${field}: ${row[field]}`).join(', ');
|
||||
}
|
||||
return '';
|
||||
}},
|
||||
];
|
||||
|
||||
const gridOptions: VxeGridProps<any> = {
|
||||
checkboxConfig: {
|
||||
highlight: true,
|
||||
labelField: 'name',
|
||||
},
|
||||
columns: testColumns,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
pagerConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
search: true,
|
||||
},
|
||||
customConfig: {
|
||||
storage: true,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
const { data } = await postTreeModelDeviceDataInfoPage({
|
||||
body: {
|
||||
...formValues,
|
||||
pageIndex: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
DeviceType,
|
||||
DeviceId,
|
||||
FocusAddress,
|
||||
},
|
||||
});
|
||||
|
||||
console.log('测试 - API返回的原始数据:', data);
|
||||
|
||||
if (data?.items && data.items.length > 0) {
|
||||
console.log('测试 - 第一条数据的所有字段:', Object.keys(data.items[0]));
|
||||
console.log('测试 - 第一条数据:', data.items[0]);
|
||||
}
|
||||
|
||||
return data;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<div class="mb-4 p-4 bg-yellow-100 border border-yellow-400 rounded">
|
||||
<h3 class="text-lg font-bold mb-2">测试模式</h3>
|
||||
<p>这个页面使用固定列定义来测试数据是否能正常显示。</p>
|
||||
<p>请查看控制台输出来了解数据结构。</p>
|
||||
</div>
|
||||
<Grid />
|
||||
</Page>
|
||||
</template>
|
||||
@ -7,7 +7,6 @@ export interface BaseDeviceData {
|
||||
DeviceType?: string;
|
||||
DeviceId?: string;
|
||||
Timestamps?: string;
|
||||
APPData?: string;
|
||||
[key: string]: any; // 允许任意额外字段
|
||||
}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user