Compare commits
No commits in common. "fb44ace832214d0a7283206d4ac7ca5718e6795d" and "40e26fbfe6a910bd3de7277032dc531b9f0b0eb4" have entirely different histories.
fb44ace832
...
40e26fbfe6
111
apps/web-antd/src/views/dataManger/deviceData/basic-test.vue
Normal file
111
apps/web-antd/src/views/dataManger/deviceData/basic-test.vue
Normal file
@ -0,0 +1,111 @@
|
||||
<script setup lang="ts">
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { postTreeModelDeviceDataInfoPage } from '#/api-client';
|
||||
|
||||
import { querySchema } from './schema';
|
||||
|
||||
defineOptions({
|
||||
name: 'DeviceDataBasicTest',
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const { DeviceType, DeviceId, FocusAddress } = route.query;
|
||||
|
||||
// 简单的表单配置
|
||||
const formOptions: VbenFormProps = {
|
||||
schema: querySchema.value,
|
||||
initialValues: {
|
||||
FocusAddress: FocusAddress as string,
|
||||
},
|
||||
};
|
||||
|
||||
// 最基本的列定义
|
||||
const basicColumns = [
|
||||
{ type: 'seq', width: 50, title: '序号' },
|
||||
{ field: 'SystemName', title: '系统名称', width: 150 },
|
||||
{ field: 'DeviceType', title: '设备类型', width: 150 },
|
||||
{ field: 'DeviceId', title: '设备ID', width: 150 },
|
||||
{ field: 'Timestamps', title: '时间戳', width: 200 },
|
||||
];
|
||||
|
||||
// 调试信息
|
||||
const debugInfo = ref('');
|
||||
|
||||
const gridOptions: VxeGridProps<any> = {
|
||||
columns: basicColumns,
|
||||
height: 'auto',
|
||||
pagerConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
debugInfo.value = '开始API调用...';
|
||||
console.log('基本测试 - 开始API调用');
|
||||
|
||||
try {
|
||||
const response = await postTreeModelDeviceDataInfoPage({
|
||||
body: {
|
||||
...formValues,
|
||||
pageIndex: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
DeviceType,
|
||||
DeviceId,
|
||||
FocusAddress,
|
||||
},
|
||||
});
|
||||
|
||||
console.log('基本测试 - 完整响应:', response);
|
||||
console.log('基本测试 - response.data:', response.data);
|
||||
|
||||
debugInfo.value = `API调用成功，数据: ${JSON.stringify(response.data, null, 2)}`;
|
||||
|
||||
if (response.data?.items) {
|
||||
console.log('基本测试 - items长度:', response.data.items.length);
|
||||
if (response.data.items.length > 0) {
|
||||
console.log('基本测试 - 第一条数据:', response.data.items[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// 确保返回的数据包含totalCount字段
|
||||
const result = {
|
||||
items: response.data.items || [],
|
||||
totalCount: response.data.totalCount || (response.data.items ? response.data.items.length : 0),
|
||||
};
|
||||
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('基本测试 - API调用失败:', error);
|
||||
debugInfo.value = `API调用失败: ${error}`;
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<div class="mb-4 p-4 bg-green-100 border border-green-400 rounded">
|
||||
<h3 class="text-lg font-bold mb-2">基本测试模式</h3>
|
||||
<p>这个页面使用最基本的列定义来测试数据是否能正常显示。</p>
|
||||
<div class="mt-2">
|
||||
<strong>调试信息:</strong>
|
||||
<pre class="mt-1 text-sm bg-gray-100 p-2 rounded">{{ debugInfo }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<Grid />
|
||||
</Page>
|
||||
</template>
|
||||
@ -27,16 +27,6 @@ export const fieldTypeConfig: FieldTypeConfig = {
|
||||
// 可以根据需要添加更多类型配置
|
||||
};
|
||||
|
||||
// 固定字段列表 - 这些字段已经在固定列中定义，不需要在动态列中重复生成
|
||||
const FIXED_FIELDS = [
|
||||
'SystemName',
|
||||
'ProjectId',
|
||||
'DeviceType',
|
||||
'IoTDataType',
|
||||
'DeviceId',
|
||||
'Timestamps'
|
||||
];
|
||||
|
||||
// 动态生成表格列
|
||||
export const generateDynamicColumns = (data: DynamicDeviceData[]): ColumnConfig[] => {
|
||||
if (!data || data.length === 0) return [];
|
||||
@ -46,8 +36,8 @@ export const generateDynamicColumns = (data: DynamicDeviceData[]): ColumnConfig[
|
||||
if (!firstRow) return [];
|
||||
const fields = Object.keys(firstRow);
|
||||
|
||||
// 过滤掉不需要显示的字段和固定字段
|
||||
const excludeFields = ['id', 'key', '__typename', ...FIXED_FIELDS];
|
||||
// 过滤掉不需要显示的字段
|
||||
const excludeFields = ['id', 'key', '__typename'];
|
||||
|
||||
return fields
|
||||
.filter(field => !excludeFields.includes(field))
|
||||
|
||||
122
apps/web-antd/src/views/dataManger/deviceData/example.ts
Normal file
122
apps/web-antd/src/views/dataManger/deviceData/example.ts
Normal file
@ -0,0 +1,122 @@
|
||||
import type { DynamicDeviceData, DynamicPageResponse } from './types';
|
||||
|
||||
// 示例1：处理标准IoTDB数据
|
||||
export const handleStandardIoTDBData = (response: any): DynamicPageResponse<DynamicDeviceData> => {
|
||||
// 确保响应格式正确
|
||||
if (!response || !response.items) {
|
||||
return { items: [], totalCount: 0 };
|
||||
}
|
||||
|
||||
// 转换数据，确保所有字段都被包含
|
||||
const items = response.items.map((item: any) => ({
|
||||
SystemName: item.SystemName || '',
|
||||
ProjectId: item.ProjectId || '',
|
||||
ProjectName: item.ProjectName || '',
|
||||
IoTDataType: item.IoTDataType || '',
|
||||
DeviceType: item.DeviceType || '',
|
||||
DeviceId: item.DeviceId || '',
|
||||
Timestamps: item.Timestamps || '',
|
||||
APPData: item.APPData || '',
|
||||
// 包含所有其他字段
|
||||
...item,
|
||||
}));
|
||||
|
||||
return {
|
||||
items,
|
||||
totalCount: response.totalCount || items.length,
|
||||
};
|
||||
};
|
||||
|
||||
// 示例2：处理自定义字段数据
|
||||
export const handleCustomFieldData = (response: any): DynamicPageResponse<DynamicDeviceData> => {
|
||||
if (!response || !response.items) {
|
||||
return { items: [], totalCount: 0 };
|
||||
}
|
||||
|
||||
// 直接使用原始数据，允许任意字段
|
||||
return {
|
||||
items: response.items,
|
||||
totalCount: response.totalCount || response.items.length,
|
||||
};
|
||||
};
|
||||
|
||||
// 示例3：数据验证和清理
|
||||
export const validateAndCleanData = (data: any[]): DynamicDeviceData[] => {
|
||||
return data.map(item => {
|
||||
const cleaned: DynamicDeviceData = {};
|
||||
|
||||
// 遍历所有字段，进行类型转换和清理
|
||||
Object.keys(item).forEach(key => {
|
||||
const value = item[key];
|
||||
|
||||
// 根据字段名进行特殊处理
|
||||
switch (key) {
|
||||
case 'Timestamps':
|
||||
cleaned[key] = value ? String(value) : '';
|
||||
break;
|
||||
case 'SystemName':
|
||||
case 'ProjectName':
|
||||
case 'DeviceType':
|
||||
case 'IoTDataType':
|
||||
cleaned[key] = value ? String(value) : '';
|
||||
break;
|
||||
case 'ProjectId':
|
||||
case 'DeviceId':
|
||||
cleaned[key] = value ? String(value) : '';
|
||||
break;
|
||||
default:
|
||||
// 对于未知字段，保持原值
|
||||
cleaned[key] = value;
|
||||
}
|
||||
});
|
||||
|
||||
return cleaned;
|
||||
});
|
||||
};
|
||||
|
||||
// 示例4：动态字段检测
|
||||
export const detectDynamicFields = (data: DynamicDeviceData[]): string[] => {
|
||||
if (!data || data.length === 0) return [];
|
||||
|
||||
const allFields = new Set<string>();
|
||||
|
||||
data.forEach(item => {
|
||||
Object.keys(item).forEach(key => {
|
||||
allFields.add(key);
|
||||
});
|
||||
});
|
||||
|
||||
return Array.from(allFields);
|
||||
};
|
||||
|
||||
// 示例5：字段重要性排序
|
||||
export const sortFieldsByImportance = (fields: string[]): string[] => {
|
||||
const importanceOrder = [
|
||||
'Timestamps',
|
||||
'SystemName',
|
||||
'ProjectName',
|
||||
'DeviceType',
|
||||
'DeviceId',
|
||||
'IoTDataType',
|
||||
'APPData',
|
||||
];
|
||||
|
||||
return fields.sort((a, b) => {
|
||||
const aIndex = importanceOrder.indexOf(a);
|
||||
const bIndex = importanceOrder.indexOf(b);
|
||||
|
||||
// 如果都在预定义列表中，按列表顺序排序
|
||||
if (aIndex !== -1 && bIndex !== -1) {
|
||||
return aIndex - bIndex;
|
||||
}
|
||||
|
||||
// 如果只有a在预定义列表中，a排在前面
|
||||
if (aIndex !== -1) return -1;
|
||||
|
||||
// 如果只有b在预定义列表中，b排在前面
|
||||
if (bIndex !== -1) return 1;
|
||||
|
||||
// 都不在预定义列表中，按字母顺序排序
|
||||
return a.localeCompare(b);
|
||||
});
|
||||
};
|
||||
@ -12,6 +12,7 @@ import { postTreeModelDeviceDataInfoPage } from '#/api-client';
|
||||
|
||||
import { querySchema, tableSchema } from './schema';
|
||||
import { generateDynamicColumns } from './dynamicColumns';
|
||||
import { handleStandardIoTDBData, validateAndCleanData } from './example';
|
||||
|
||||
defineOptions({
|
||||
name: 'DeviceData',
|
||||
@ -23,15 +24,10 @@ const { DeviceType, DeviceId, FocusAddress } = route.query;
|
||||
// 动态列定义
|
||||
const dynamicColumns = ref<any[]>([]);
|
||||
|
||||
// 固定列定义（始终显示）- 基于 IoTDBTreeModelDeviceDataDto 类型
|
||||
// 固定列定义（始终显示）
|
||||
const fixedColumns = [
|
||||
{ title: '序号', type: 'seq', width: 50 },
|
||||
{ field: 'SystemName', title: '系统名称', minWidth: 150 },
|
||||
{ field: 'ProjectId', title: '项目ID', minWidth: 150 },
|
||||
{ field: 'DeviceType', title: '设备类型', minWidth: 150 },
|
||||
{ field: 'IoTDataType', title: 'IoT数据类型', minWidth: 150 },
|
||||
{ field: 'DeviceId', title: '设备ID', minWidth: 150 },
|
||||
{ field: 'Timestamps', title: '时间戳', minWidth: 150 },
|
||||
// 可以在这里添加其他固定列
|
||||
];
|
||||
|
||||
// 合并固定列和动态列 - 使用计算属性确保响应式
|
||||
@ -43,8 +39,11 @@ const allColumns = computed(() => [
|
||||
// 初始化默认列（防止表格空白）
|
||||
const initDefaultColumns = () => {
|
||||
if (dynamicColumns.value.length === 0) {
|
||||
// 不再需要在这里设置默认列，因为固定列已经包含了基本字段
|
||||
dynamicColumns.value = [];
|
||||
dynamicColumns.value = [
|
||||
{ field: 'SystemName', title: '系统名称', minWidth: 150 },
|
||||
{ field: 'DeviceType', title: '设备类型', minWidth: 150 },
|
||||
{ field: 'DeviceId', title: '设备ID', minWidth: 150 },
|
||||
];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
110
apps/web-antd/src/views/dataManger/deviceData/simple-test.vue
Normal file
110
apps/web-antd/src/views/dataManger/deviceData/simple-test.vue
Normal file
@ -0,0 +1,110 @@
|
||||
<script setup lang="ts">
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref } from 'vue';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { postTreeModelDeviceDataInfoPage } from '#/api-client';
|
||||
|
||||
import { querySchema } from './schema';
|
||||
|
||||
defineOptions({
|
||||
name: 'DeviceDataSimpleTest',
|
||||
});
|
||||
|
||||
const route = useRoute();
|
||||
const { DeviceType, DeviceId, FocusAddress } = route.query;
|
||||
|
||||
// 简单的表单配置
|
||||
const formOptions: VbenFormProps = {
|
||||
schema: querySchema.value,
|
||||
initialValues: {
|
||||
FocusAddress: FocusAddress as string,
|
||||
},
|
||||
};
|
||||
|
||||
// 最简单的列定义
|
||||
const simpleColumns = [
|
||||
{ title: '序号', type: 'seq', width: 50 },
|
||||
{ field: 'SystemName', title: '系统名称', width: 150 },
|
||||
{ field: 'DeviceType', title: '设备类型', width: 150 },
|
||||
{ field: 'DeviceId', title: '设备ID', width: 150 },
|
||||
{ field: 'Timestamps', title: '时间戳', width: 200 },
|
||||
];
|
||||
|
||||
// 调试信息
|
||||
const debugInfo = ref('');
|
||||
|
||||
const gridOptions: VxeGridProps<any> = {
|
||||
columns: simpleColumns,
|
||||
height: 'auto',
|
||||
pagerConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
debugInfo.value = '开始API调用...';
|
||||
console.log('简单测试 - 开始API调用');
|
||||
|
||||
try {
|
||||
const response = await postTreeModelDeviceDataInfoPage({
|
||||
body: {
|
||||
...formValues,
|
||||
pageIndex: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
DeviceType,
|
||||
DeviceId,
|
||||
FocusAddress,
|
||||
},
|
||||
});
|
||||
|
||||
console.log('简单测试 - 完整响应:', response);
|
||||
console.log('简单测试 - response.data:', response.data);
|
||||
|
||||
debugInfo.value = `API调用成功，数据: ${JSON.stringify(response.data, null, 2)}`;
|
||||
|
||||
if (response.data?.items) {
|
||||
console.log('简单测试 - items长度:', response.data.items.length);
|
||||
if (response.data.items.length > 0) {
|
||||
console.log('简单测试 - 第一条数据:', response.data.items[0]);
|
||||
}
|
||||
}
|
||||
|
||||
// 确保返回的数据包含totalCount字段
|
||||
const result = {
|
||||
items: response.data.items || [],
|
||||
totalCount: response.data.totalCount || (response.data.items ? response.data.items.length : 0),
|
||||
};
|
||||
return result;
|
||||
} catch (error) {
|
||||
console.error('简单测试 - API调用失败:', error);
|
||||
debugInfo.value = `API调用失败: ${error}`;
|
||||
throw error;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<div class="mb-4 p-4 bg-blue-100 border border-blue-400 rounded">
|
||||
<h3 class="text-lg font-bold mb-2">简单测试模式</h3>
|
||||
<p>这个页面使用最简单的配置来测试数据是否能正常显示。</p>
|
||||
<div class="mt-2">
|
||||
<strong>调试信息:</strong>
|
||||
<pre class="mt-1 text-sm bg-gray-100 p-2 rounded">{{ debugInfo }}</pre>
|
||||
</div>
|
||||
</div>
|
||||
<Grid />
|
||||
</Page>
|
||||
</template>
|
||||
113
apps/web-antd/src/views/dataManger/deviceData/test.vue
Normal file
113
apps/web-antd/src/views/dataManger/deviceData/test.vue
Normal file
@ -0,0 +1,113 @@
|
||||
<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]);
|
||||
}
|
||||
|
||||
// 确保返回的数据包含totalCount字段
|
||||
const result = {
|
||||
items: data.items || [],
|
||||
totalCount: data.totalCount || (data.items ? data.items.length : 0),
|
||||
};
|
||||
return result;
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
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>
|
||||
Loading…
x
Reference in New Issue
Block a user