JiShe.IOT.UI/apps/web-antd/src/views/dataManger/deviceData

动态列解决方案

这个解决方案用于处理后端返回字段列数不固定的IoTDB设备数据。

问题描述

原来的 IoTDBTreeModelDeviceDataPageAllResponse 类型被限定为固定的字段结构，但后端返回的字段列数不固定，导致前端无法正确显示所有数据。

解决方案

1. 动态列生成

• 文件: dynamicColumns.ts
• 功能: 根据实际数据动态生成表格列
• 特点:
  • 支持字段名映射
  • 支持字段类型配置
  • 自动过滤不需要显示的字段

2. 类型安全

• 文件: types.ts
• 功能: 提供类型定义，确保类型安全
• 特点:
  • 使用 [key: string]: any 允许任意字段
  • 继承基础类型，保持向后兼容

3. 数据处理

• 文件: example.ts
• 功能: 提供数据处理工具函数
• 特点:
  • 数据验证和清理
  • 动态字段检测
  • 字段重要性排序

使用方法

基本使用

// 1. 导入必要的函数
import { generateDynamicColumns } from './dynamicColumns';
import { validateAndCleanData } from './example';

// 2. 在API调用后处理数据
const { data } = await postTreeModelDeviceDataInfoPage(options);

if (data?.items && data.items.length > 0) {
  // 验证和清理数据
  const cleanedData = validateAndCleanData(data.items);
  
  // 动态生成列定义
  const columns = generateDynamicColumns(cleanedData);
  
  // 更新表格列
  dynamicColumns.value = columns;
}

自定义字段映射

// 在 dynamicColumns.ts 中添加字段映射
export const fieldNameMapping: FieldMapping = {
  SystemName: '系统名称',
  ProjectId: '项目ID',
  // 添加新的字段映射
  CustomField: '自定义字段',
};

自定义字段类型配置

// 在 dynamicColumns.ts 中添加字段类型配置
export const fieldTypeConfig: FieldTypeConfig = {
  Timestamps: {
    formatter: (value: string) => {
      return new Date(value).toLocaleString();
    },
  },
  // 添加新的字段类型配置
  CustomField: {
    width: 200,
    formatter: (value: any) => {
      return `自定义格式: ${value}`;
    },
  },
};

配置选项

字段映射配置

字段名	显示名称	说明
SystemName	系统名称	系统名称字段
ProjectId	项目ID	项目标识符
ProjectName	项目名称	项目名称
IoTDataType	IoT数据类型	数据类型标识
DeviceType	设备类型	设备类型
DeviceId	设备ID	设备标识符
Timestamps	时间戳	数据时间戳
APPData	应用数据	应用相关数据

排除字段

默认排除以下字段：

• id
• key
• __typename

可以在 generateDynamicColumns 函数中修改 excludeFields 数组来自定义。

高级功能

1. 混合模式

支持固定列和动态列混合显示：

// 固定列定义
const fixedColumns = computed(() => [
  { title: '序号', type: 'seq', width: 50 },
  { field: 'SystemName', title: '系统名称', width: 150 },
]);

// 动态列
const dynamicColumns = ref<ColumnConfig[]>([]);

// 合并显示
const allColumns = computed(() => [
  ...fixedColumns.value,
  ...dynamicColumns.value,
]);

2. 字段重要性排序

import { sortFieldsByImportance } from './example';

const fields = ['CustomField', 'Timestamps', 'SystemName'];
const sortedFields = sortFieldsByImportance(fields);
// 结果: ['Timestamps', 'SystemName', 'CustomField']

3. 数据验证

import { validateAndCleanData } from './example';

const rawData = [/* 原始数据 */];
const cleanedData = validateAndCleanData(rawData);

注意事项

1. 性能考虑: 动态列生成会增加一些计算开销，建议在数据量较大时进行优化
2. 类型安全: 虽然使用了 any 类型，但通过类型定义和验证函数确保数据安全
3. 向后兼容: 保持与原有固定字段的兼容性
4. 扩展性: 可以轻松添加新的字段映射和类型配置

故障排除

常见问题

1. 列不显示: 检查字段是否在 excludeFields 中
2. 字段名显示错误: 检查 fieldNameMapping 配置
3. 数据格式错误: 使用 validateAndCleanData 函数处理数据

调试技巧

// 启用调试日志
console.log('原始数据:', data);
console.log('清理后数据:', cleanedData);
console.log('生成的列:', dynamicColumns.value);