完善onenet和ctwing日志查询
This commit is contained in:
ChenYi
parent
113f24cc9d
commit
0ce33054d8
@ -2,13 +2,13 @@
|
||||
import type { VbenFormProps } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { ref, watch } from 'vue';
|
||||
import { onMounted, ref, watch } from 'vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
|
||||
import { Page } from '@vben/common-ui';
|
||||
|
||||
import { useVbenVxeGrid } from '#/adapter/vxe-table';
|
||||
import { postCTWingLogInfoPage } from '#/api-client';
|
||||
import { postMetersPage, postCTWingLogInfoPage } from '#/api-client';
|
||||
|
||||
import DeviceSelect from '../deviceData/DeviceSelect.vue';
|
||||
import { querySchema, tableSchema } from './schema';
|
||||
@ -26,6 +26,53 @@ const deviceSelectRef = ref();
|
||||
// 添加选中的设备信息
|
||||
const selectedDeviceInfo = ref<any>(null);
|
||||
|
||||
// 存储设备信息选项的完整数据
|
||||
const deviceOptions = ref<any[]>();
|
||||
|
||||
// 获取设备信息的完整数据
|
||||
const fetchDeviceOptions = async () => {
|
||||
try {
|
||||
const { data } = await postMetersPage({
|
||||
body: {
|
||||
pageIndex: 1,
|
||||
pageSize: 1000,
|
||||
},
|
||||
});
|
||||
|
||||
if (data?.items) {
|
||||
deviceOptions.value = data.items;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取设备信息失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 根据设备ID获取设备信息对象
|
||||
const getDeviceInfoById = (deviceId: string) => {
|
||||
console.log('getDeviceInfoById 调用:', { deviceId, deviceOptionsLength: deviceOptions.value?.length });
|
||||
|
||||
if (!deviceId || !deviceOptions.value || deviceOptions.value.length === 0) {
|
||||
console.log('getDeviceInfoById 返回 null - 条件不满足');
|
||||
return null;
|
||||
}
|
||||
|
||||
// 查看前几个设备的数据结构
|
||||
console.log('前3构:', deviceOptions.value.slice(0, 3).map(device => ({
|
||||
id: device.id,
|
||||
meterName: device.meterName,
|
||||
meterId: device.meterId,
|
||||
focusId: device.focusId,
|
||||
systemName: device.systemName,
|
||||
keys: Object.keys(device),
|
||||
fullDevice: JSON.parse(JSON.stringify(device)) // 展开完整对象
|
||||
})));
|
||||
|
||||
const device = deviceOptions.value.find((device) => device.id === deviceId);
|
||||
console.log('查找结果:', device);
|
||||
|
||||
return device;
|
||||
};
|
||||
|
||||
// 格式化日期函数
|
||||
const formatDate = (date: any) => {
|
||||
if (!date) return '';
|
||||
@ -33,8 +80,99 @@ const formatDate = (date: any) => {
|
||||
if (date.toISOString) return date.format('YYYY-MM-DD HH:mm:ss');
|
||||
return '';
|
||||
};
|
||||
|
||||
// 从 DeviceSelect 组件获取设备信息
|
||||
const getDeviceInfoFromRef = async () => {
|
||||
if (
|
||||
deviceSelectRef.value &&
|
||||
typeof deviceSelectRef.value.getSelectedDevice === 'function'
|
||||
) {
|
||||
const deviceInfo = deviceSelectRef.value.getSelectedDevice();
|
||||
console.log('从 ref 获取设备信息:', deviceInfo);
|
||||
return deviceInfo;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
schema: querySchema.value,
|
||||
// 禁用表单值变化时自动提交，使用自定义处理函数
|
||||
submitOnChange: false,
|
||||
// 添加表单值变化的处理函数
|
||||
handleValuesChange: async (values, changedFields) => {
|
||||
console.log('handleValuesChange 被触发:', { values, changedFields });
|
||||
console.log('当前所有表单值:', values);
|
||||
console.log('DeviceType:', values.DeviceType);
|
||||
console.log('IoTDataType:', values.IoTDataType);
|
||||
|
||||
// 当 DeviceId 发生变化时，更新 selectedDeviceInfo
|
||||
if (changedFields.includes('DeviceId')) {
|
||||
const deviceId = values.DeviceId;
|
||||
console.log('DeviceId 变化:', deviceId);
|
||||
|
||||
if (deviceId) {
|
||||
// 先尝试从 deviceOptions 中查找（备用方案）
|
||||
let device = deviceOptions.value.length > 0 ? deviceOptions.value.find(d => d.id === deviceId) : null;
|
||||
|
||||
// 如果没找到，尝试从 DeviceSelect 组件中获取
|
||||
if (!device && gridApi?.formApi) {
|
||||
try {
|
||||
// 获取 DeviceSelect 组件的实例
|
||||
const deviceSelectRef = gridApi.formApi.getFieldComponentRef('DeviceId');
|
||||
if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
|
||||
device = deviceSelectRef.getSelectedDevice();
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('获取组件实例失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
if (device) {
|
||||
selectedDeviceInfo.value = device;
|
||||
console.log('handleValuesChange 更新设备信息:', device);
|
||||
} else {
|
||||
// 如果还是没找到，尝试延迟获取（组件可能还没完全更新）
|
||||
setTimeout(() => {
|
||||
try {
|
||||
const deviceSelectRef = gridApi.formApi.getFieldComponentRef('DeviceId');
|
||||
if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
|
||||
const delayedDevice = deviceSelectRef.getSelectedDevice();
|
||||
if (delayedDevice) {
|
||||
selectedDeviceInfo.value = delayedDevice;
|
||||
console.log('延迟获取设备信息成功:', delayedDevice);
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.log('延迟获取组件实例失败:', error);
|
||||
}
|
||||
}, 100);
|
||||
}
|
||||
} else {
|
||||
selectedDeviceInfo.value = null;
|
||||
}
|
||||
}
|
||||
|
||||
// 当任何相关字段发生变化时，刷新表格数据
|
||||
const relevantFields = new Set([
|
||||
'DeviceId',
|
||||
'DeviceType',
|
||||
'IoTDataType',
|
||||
'SystemName',
|
||||
'StartCreationTime',
|
||||
'EndCreationTime',
|
||||
]);
|
||||
const hasRelevantChange = changedFields.some((field) =>
|
||||
relevantFields.has(field),
|
||||
);
|
||||
|
||||
if (hasRelevantChange) {
|
||||
// 使用 setTimeout 确保表单值已经完全更新
|
||||
setTimeout(async () => {
|
||||
const latestValues = await gridApi.formApi.getValues();
|
||||
gridApi.reload(latestValues);
|
||||
}, 0);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps<any> = {
|
||||
@ -45,18 +183,11 @@ const gridOptions: VxeGridProps<any> = {
|
||||
columns: tableSchema.value,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
// 确保分页功能正常工作
|
||||
pager: true,
|
||||
pagerConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 100],
|
||||
layouts: [
|
||||
'PrevPage',
|
||||
'JumpNumber',
|
||||
'NextPage',
|
||||
'FullJump',
|
||||
'Sizes',
|
||||
'Total',
|
||||
],
|
||||
pageSize: 20,
|
||||
},
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
@ -67,36 +198,56 @@ const gridOptions: VxeGridProps<any> = {
|
||||
proxyConfig: {
|
||||
ajax: {
|
||||
query: async ({ page }, formValues) => {
|
||||
// 获取当前表单值，如果formValues为空则从表单API获取
|
||||
const currentFormValues = formValues || (gridApi?.formApi ? await gridApi.formApi.getValues() : {}) || {};
|
||||
|
||||
console.log('查询时的 formValues:', formValues);
|
||||
console.log('查询时的 currentFormValues:', currentFormValues);
|
||||
|
||||
// 获取选中的设备信息
|
||||
let deviceId = '';
|
||||
let deviceId = currentFormValues.DeviceId || '';
|
||||
let systemName = '';
|
||||
const deviceType = formValues?.DeviceType || '';
|
||||
const finalFocusAddress = formValues.FocusAddress || '';
|
||||
if (deviceSelectRef.value) {
|
||||
const deviceInfo = deviceSelectRef.value.getSelectedDeviceInfo();
|
||||
const deviceType = currentFormValues.DeviceType || '';
|
||||
|
||||
console.log('查询参数:', { deviceId, deviceType, currentFormValues });
|
||||
console.log('currentFormValues.DeviceId:', currentFormValues.DeviceId);
|
||||
console.log('currentFormValues.DeviceType:', currentFormValues.DeviceType);
|
||||
console.log('currentFormValues.IoTDataType:', currentFormValues.IoTDataType);
|
||||
|
||||
// 优先使用选中的设备信息
|
||||
const deviceInfo = selectedDeviceInfo.value || (currentFormValues.DeviceId && deviceOptions.value.length > 0 ? getDeviceInfoById(currentFormValues.DeviceId) : null);
|
||||
|
||||
if (deviceInfo) {
|
||||
finalFocusAddress = deviceInfo.focusAddress || '';
|
||||
console.log('使用设备信息:', deviceInfo);
|
||||
systemName = deviceInfo.systemName || '';
|
||||
// 设备类型为10时取focusId，其他情况取meterId
|
||||
deviceId =
|
||||
Number(deviceType) === 10
|
||||
? deviceInfo.focusId || ''
|
||||
: deviceInfo.meterId || '';
|
||||
// 根据设备类型获取正确的 id
|
||||
if (Number(deviceType) === 10) {
|
||||
// 集中器类型使用 focusId
|
||||
deviceId = deviceInfo.focusId || deviceId;
|
||||
} else {
|
||||
// 其他设备类型使用 meterId
|
||||
deviceId = deviceInfo.meterId || deviceId;
|
||||
}
|
||||
} else {
|
||||
console.log('没有找到设备信息，使用原始 deviceId:', deviceId);
|
||||
}
|
||||
|
||||
// 构建查询参数
|
||||
const queryParams: any = {
|
||||
const queryParams = {
|
||||
pageIndex: page.currentPage,
|
||||
pageSize: page.pageSize,
|
||||
SearchKeyword: formValues?.SearchKeyword || '',
|
||||
SearchKeyword: currentFormValues.SearchKeyword || '',
|
||||
DeviceType: deviceType,
|
||||
IoTDataType: formValues?.IoTDataType || '',
|
||||
IoTDataType: currentFormValues.IoTDataType || '',
|
||||
DeviceId: deviceId,
|
||||
SystemName: systemName || formValues?.SystemName || '',
|
||||
StartCreationTime: formatDate(formValues?.StartCreationTime),
|
||||
EndCreationTime: formatDate(formValues?.EndCreationTime),
|
||||
FocusAddress: finalFocusAddress,
|
||||
SystemName: systemName || currentFormValues.SystemName || '',
|
||||
StartCreationTime: formatDate(currentFormValues.StartCreationTime),
|
||||
EndCreationTime: formatDate(currentFormValues.EndCreationTime),
|
||||
FocusAddress: currentFormValues.FocusAddress || '',
|
||||
};
|
||||
|
||||
console.log('最终查询参数:', queryParams);
|
||||
|
||||
if (DeviceType) queryParams.DeviceType = DeviceType;
|
||||
if (DeviceId) queryParams.DeviceId = DeviceId;
|
||||
const { data } = await postCTWingLogInfoPage({
|
||||
@ -117,12 +268,13 @@ const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
// 监听分页器状态变化
|
||||
watch(
|
||||
() => gridApi?.pagerApi?.pageSize,
|
||||
(newSize, oldSize) => {
|
||||
async (newSize, oldSize) => {
|
||||
if (newSize !== oldSize && oldSize) {
|
||||
// 重置到第一页
|
||||
gridApi.pagerApi.currentPage = 1;
|
||||
// 触发数据重新加载
|
||||
gridApi.reload();
|
||||
// 获取最新表单值并触发数据重新加载
|
||||
const latestValues = await gridApi.formApi.getValues();
|
||||
gridApi.reload(latestValues);
|
||||
}
|
||||
},
|
||||
);
|
||||
@ -130,23 +282,19 @@ watch(
|
||||
// 监听当前页变化
|
||||
watch(
|
||||
() => gridApi?.pagerApi?.currentPage,
|
||||
(newPage, oldPage) => {
|
||||
async (newPage, oldPage) => {
|
||||
if (newPage !== oldPage && oldPage) {
|
||||
// 触发数据重新加载
|
||||
gridApi.reload();
|
||||
// 获取最新表单值并触发数据重新加载
|
||||
const latestValues = await gridApi.formApi.getValues();
|
||||
gridApi.reload(latestValues);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 监听DeviceId变化，自动刷新表格
|
||||
watch(
|
||||
() => gridApi?.getFormModel?.()?.DeviceId,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal !== oldVal) {
|
||||
gridApi.reload();
|
||||
}
|
||||
},
|
||||
);
|
||||
// 页面初始化时获取设备信息
|
||||
onMounted(async () => {
|
||||
await fetchDeviceOptions();
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
@ -182,18 +182,11 @@ const gridOptions: VxeGridProps<any> = {
|
||||
columns: tableSchema.value,
|
||||
height: 'auto',
|
||||
keepSource: true,
|
||||
// 确保分页功能正常工作
|
||||
pager: true,
|
||||
pagerConfig: {
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
pageSizes: [10, 20, 100],
|
||||
layouts: [
|
||||
'PrevPage',
|
||||
'JumpNumber',
|
||||
'NextPage',
|
||||
'FullJump',
|
||||
'Sizes',
|
||||
'Total',
|
||||
],
|
||||
pageSize: 20,
|
||||
},
|
||||
toolbarConfig: {
|
||||
custom: true,
|
||||
@ -273,32 +266,30 @@ const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
|
||||
// 监听分页器状态变化
|
||||
watch(
|
||||
() => gridApi?.pagerApi?.pageSize,
|
||||
(newSize, oldSize) => {
|
||||
async (newSize, oldSize) => {
|
||||
if (newSize !== oldSize && oldSize) {
|
||||
// 重置到第一页
|
||||
gridApi.pagerApi.currentPage = 1;
|
||||
gridApi.reload();
|
||||
// 获取最新表单值并触发数据重新加载
|
||||
const latestValues = await gridApi.formApi.getValues();
|
||||
gridApi.reload(latestValues);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 监听当前页变化
|
||||
watch(
|
||||
() => gridApi?.pagerApi?.currentPage,
|
||||
(newPage, oldPage) => {
|
||||
async (newPage, oldPage) => {
|
||||
if (newPage !== oldPage && oldPage) {
|
||||
gridApi.reload();
|
||||
}
|
||||
},
|
||||
);
|
||||
// 监听DeviceId变化，自动刷新表格
|
||||
watch(
|
||||
() => gridApi?.getFormModel?.()?.DeviceId,
|
||||
(newVal, oldVal) => {
|
||||
if (newVal !== oldVal) {
|
||||
gridApi.reload();
|
||||
// 获取最新表单值并触发数据重新加载
|
||||
const latestValues = await gridApi.formApi.getValues();
|
||||
gridApi.reload(latestValues);
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
// 页面初始化时获取设备信息
|
||||
onMounted(async () => {
|
||||
await fetchDeviceOptions();
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user