admin/JiShe.IOT.UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

动态列

Browse Source
This commit is contained in:
ChenYi 2025-07-10 10:52:19 +08:00
parent c00d8077c1
commit 30a92b8211
7 changed files with 314 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/web-antd/src/views/dataManger/ctwingLog/index.vue
View File

@ -7,7 +7,7 @@ import { useRoute } from 'vue-router';
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { postTableModelDeviceDataInfoPage } from '#/api-client';
import { postTreeModelDeviceDataInfoPage } from '#/api-client';
import { querySchema, tableSchema } from './schema';
@ -48,7 +48,12 @@ const gridOptions: VxeGridProps<any> = {
FocusAddress,
},
});
return data;
// 确保返回的数据包含totalCount字段
const result = {
items: data.items || [],
totalCount: data.totalCount || (data.items ? data.items.length : 0),
};
return result;
},
},
},

111
apps/web-antd/src/views/dataManger/deviceData/basic-test.vue Normal file
View 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>

4
apps/web-antd/src/views/dataManger/deviceData/dynamicColumns.ts
View File

@ -45,7 +45,7 @@ export const generateDynamicColumns = (data: DynamicDeviceData[]): ColumnConfig[
const columnConfig: any = {
field,
title: fieldNameMapping[field] || field,
minWidth: '150',
minWidth: 150,
showOverflow: true,
};
@ -68,7 +68,7 @@ export const getPredefinedColumns = () => {
return getAllPossibleFields().map(field => ({
field,
title: fieldNameMapping[field] || field,
minWidth: '150',
minWidth: 150,
showOverflow: true,
...fieldTypeConfig[field],
}));

97
apps/web-antd/src/views/dataManger/deviceData/index.vue
View File

@ -25,28 +25,24 @@ const { DeviceType, DeviceId, FocusAddress } = route.query;
const dynamicColumns = ref<any[]>([]);
// 固定列定义（始终显示）
const fixedColumns = computed(() => [
const fixedColumns = [
{ title: '序号', type: 'seq', width: 50 },
// 可以在这里添加其他固定列
]);
];
// 合并固定列和动态列
const allColumns = computed(() => {
const columns = [
...fixedColumns.value,
...dynamicColumns.value,
];
console.log('当前所有列定义:', columns);
return columns;
});
const allColumns = ref([
...fixedColumns,
...dynamicColumns.value,
]);
// 初始化默认列（防止表格空白）
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' },
{ field: 'SystemName', title: '系统名称', minWidth: 150 },
{ field: 'DeviceType', title: '设备类型', minWidth: 150 },
{ field: 'DeviceId', title: '设备ID', minWidth: 150 },
];
}
};
@ -96,6 +92,9 @@ const gridOptions: VxeGridProps<any> = {
customConfig: {
storage: true,
},
// 添加调试配置
showOverflow: true,
showHeaderOverflow: true,
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
@ -110,31 +109,75 @@ const gridOptions: VxeGridProps<any> = {
},
});
console.log('API返回的原始数据:', data);
console.log('=== API调用开始 ===');
console.log('请求参数:', { page, formValues, DeviceType, DeviceId, FocusAddress });
// 简化处理逻辑，先确保基本功能正常
if (data?.items && data.items.length > 0) {
console.log('原始items数据:', data.items);
try {
const { data } = await postTreeModelDeviceDataInfoPage({
body: {
...formValues,
pageIndex: page.currentPage,
pageSize: page.pageSize,
DeviceType,
DeviceId,
FocusAddress,
},
});
// 直接使用原始数据，不进行复杂处理
const items = data.items;
console.log('API返回的原始数据:', data);
console.log('数据类型:', typeof data);
console.log('data是否为null/undefined:', data === null || data === undefined);
// 动态生成列定义
const generatedColumns = generateDynamicColumns(items);
console.log('生成的列定义:', generatedColumns);
if (data) {
console.log('data.items存在:', !!data.items);
console.log('data.items类型:', Array.isArray(data.items) ? 'Array' : typeof data.items);
if (data.items) {
console.log('data.items长度:', data.items.length);
if (data.items.length > 0) {
console.log('第一条数据:', data.items[0]);
console.log('第一条数据的所有字段:', Object.keys(data.items[0]));
}
}
}
// 更新动态列
// 简化处理逻辑，先确保基本功能正常
if (data?.items && data.items.length > 0) {
console.log('原始items数据:', data.items);
// 直接使用原始数据，不进行复杂处理
const items = data.items;
// 动态生成列定义
const generatedColumns = generateDynamicColumns(items);
console.log('生成的列定义:', generatedColumns);
// 更新动态列
dynamicColumns.value = generatedColumns;
// 更新合并的列定义
allColumns.value = [
...fixedColumns,
...generatedColumns,
];
// 强制更新列定义
await nextTick();
// 确保返回的数据包含totalCount字段
const result = {
items: data.items || [],
totalCount: data.totalCount || (data.items ? data.items.length : 0),
};
console.log('返回给表格的数据:', result);
return result;
}
console.log('返回给表格的数据:', data);
console.log('没有数据或数据为空');
return data;
} catch (error) {
console.error('API调用出错:', error);
throw error;
}
console.log('没有数据或数据为空');
return data;
},
},
},

110
apps/web-antd/src/views/dataManger/deviceData/simple-test.vue Normal file
View 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>

7
apps/web-antd/src/views/dataManger/deviceData/test.vue
View File

@ -87,7 +87,12 @@ const gridOptions: VxeGridProps<any> = {
console.log('测试 - 第一条数据:', data.items[0]);
}
return data;
// 确保返回的数据包含totalCount字段
const result = {
items: data.items || [],
totalCount: data.totalCount || (data.items ? data.items.length : 0),
};
return result;
},
},
},

11
apps/web-antd/src/views/dataManger/onenetLog/index.vue
View File

@ -7,7 +7,7 @@ import { useRoute } from 'vue-router';
import { Page } from '@vben/common-ui';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import { postTableModelDeviceDataInfoPage } from '#/api-client';
import { postTreeModelDeviceDataInfoPage } from '#/api-client';
import { querySchema, tableSchema } from './schema';
@ -38,7 +38,7 @@ const gridOptions: VxeGridProps<any> = {
proxyConfig: {
ajax: {
query: async ({ page }, formValues) => {
const { data } = await postTableModelDeviceDataInfoPage({
const { data } = await postTreeModelDeviceDataInfoPage({
body: {
...formValues,
pageIndex: page.currentPage,
@ -48,7 +48,12 @@ const gridOptions: VxeGridProps<any> = {
FocusAddress,
},
});
return data;
// 确保返回的数据包含totalCount字段
const result = {
items: data.items || [],
totalCount: data.totalCount || (data.items ? data.items.length : 0),
};
return result;
},
},
},