112 lines
3.3 KiB
Vue
112 lines
3.3 KiB
Vue
|
<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>
|