设备数据查看优化
This commit is contained in:
parent
fa8a4c9cc7
commit
b4530f1360
@ -229,15 +229,12 @@ function onDel(row: any) {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
const toStatusData = (row: Record<string, any>) => {
|
const toDeviceInfoData = (row: Record<string, any>) => {
|
||||||
// 或者使用编程式导航
|
// 或者使用编程式导航
|
||||||
router.push({
|
router.push({
|
||||||
path: '/iotdb/deviceData',
|
path: '/iotdbdatamanagement/deviceData',
|
||||||
query: {
|
query: {
|
||||||
DeviceType: row.ioTPlatform,
|
DeviceAddress: row.deviceAddress,
|
||||||
DeviceId: row.deviceAddress,
|
|
||||||
FocusAddress: row.ioTPlatformDeviceOpenInfo,
|
|
||||||
DataBaseName: row.deviceName,
|
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
@ -359,7 +356,7 @@ const toolbarActions = computed(() => [
|
|||||||
type: 'link',
|
type: 'link',
|
||||||
size: 'small',
|
size: 'small',
|
||||||
auth: ['AbpIdentity.Users.Update'],
|
auth: ['AbpIdentity.Users.Update'],
|
||||||
onClick: toStatusData.bind(null, row),
|
onClick: toDeviceInfoData.bind(null, row),
|
||||||
},
|
},
|
||||||
]" :drop-down-actions="[
|
]" :drop-down-actions="[
|
||||||
{
|
{
|
||||||
|
|||||||
@ -68,7 +68,7 @@ const formatDate = (date: Date | string) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { DeviceType, DeviceId } = route.query;
|
const { DeviceType, DeviceAddress } = route.query;
|
||||||
|
|
||||||
// 动态列定义
|
// 动态列定义
|
||||||
const dynamicColumns = ref<any[]>([]);
|
const dynamicColumns = ref<any[]>([]);
|
||||||
@ -146,6 +146,8 @@ const initDefaultColumns = () => {
|
|||||||
|
|
||||||
// 表格是否已初始化
|
// 表格是否已初始化
|
||||||
const isGridInitialized = ref(false);
|
const isGridInitialized = ref(false);
|
||||||
|
// 是否正在初始化,用于防止重复查询
|
||||||
|
const isInitializing = ref(false);
|
||||||
|
|
||||||
// 初始化默认列
|
// 初始化默认列
|
||||||
initDefaultColumns();
|
initDefaultColumns();
|
||||||
@ -154,12 +156,17 @@ const formOptions: VbenFormProps = {
|
|||||||
schema: querySchema.value,
|
schema: querySchema.value,
|
||||||
initialValues: {
|
initialValues: {
|
||||||
DeviceType: DeviceType ? Number(DeviceType) : undefined,
|
DeviceType: DeviceType ? Number(DeviceType) : undefined,
|
||||||
DeviceAddress: DeviceId as string, // 使用DeviceId作为DeviceAddress的初始值
|
DeviceAddress: DeviceAddress as string, // 使用DeviceAddress作为初始值
|
||||||
},
|
},
|
||||||
// 禁用表单值变化时自动提交,使用自定义处理函数
|
// 禁用表单值变化时自动提交,使用自定义处理函数
|
||||||
submitOnChange: false,
|
submitOnChange: false,
|
||||||
// 添加表单值变化的处理函数
|
// 添加表单值变化的处理函数
|
||||||
handleValuesChange: async (values, changedFields) => {
|
handleValuesChange: async (values, changedFields) => {
|
||||||
|
// 如果正在初始化,不触发查询
|
||||||
|
if (isInitializing.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 当任何相关字段发生变化时,刷新表格数据
|
// 当任何相关字段发生变化时,刷新表格数据
|
||||||
const relevantFields = new Set([
|
const relevantFields = new Set([
|
||||||
'DeviceAddress',
|
'DeviceAddress',
|
||||||
@ -266,6 +273,11 @@ const gridOptions: VxeGridProps<any> = {
|
|||||||
formValues ||
|
formValues ||
|
||||||
(gridApi?.formApi ? await gridApi.formApi.getValues() : {}) ||
|
(gridApi?.formApi ? await gridApi.formApi.getValues() : {}) ||
|
||||||
{};
|
{};
|
||||||
|
|
||||||
|
// 如果表单中没有DeviceAddress,但有路由参数,使用路由参数
|
||||||
|
if (!currentFormValues.DeviceAddress && DeviceAddress) {
|
||||||
|
currentFormValues.DeviceAddress = DeviceAddress as string;
|
||||||
|
}
|
||||||
// 处理DeviceType和IoTDataType,确保传递数字类型
|
// 处理DeviceType和IoTDataType,确保传递数字类型
|
||||||
const deviceTypeValue = currentFormValues.DeviceType;
|
const deviceTypeValue = currentFormValues.DeviceType;
|
||||||
const deviceTypeNumber = deviceTypeValue
|
const deviceTypeNumber = deviceTypeValue
|
||||||
@ -285,11 +297,16 @@ const gridOptions: VxeGridProps<any> = {
|
|||||||
// 获取选中的设备信息
|
// 获取选中的设备信息
|
||||||
let deviceAddress = currentFormValues.DeviceAddress || '';
|
let deviceAddress = currentFormValues.DeviceAddress || '';
|
||||||
|
|
||||||
|
// 如果表单中没有DeviceAddress,但有路由参数,使用路由参数
|
||||||
|
if (!deviceAddress && DeviceAddress) {
|
||||||
|
deviceAddress = DeviceAddress as string;
|
||||||
|
}
|
||||||
|
|
||||||
// 优先使用选中的设备信息
|
// 优先使用选中的设备信息
|
||||||
const deviceInfo =
|
const deviceInfo =
|
||||||
selectedDeviceInfo.value ||
|
selectedDeviceInfo.value ||
|
||||||
(currentFormValues.DeviceAddress && deviceOptions.value.length > 0
|
(deviceAddress && deviceOptions.value.length > 0
|
||||||
? getDeviceInfoByAddress(currentFormValues.DeviceAddress)
|
? getDeviceInfoByAddress(deviceAddress)
|
||||||
: null);
|
: null);
|
||||||
|
|
||||||
if (deviceInfo) {
|
if (deviceInfo) {
|
||||||
@ -365,7 +382,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
|
|||||||
watch(
|
watch(
|
||||||
() => gridApi?.pagerApi?.pageSize,
|
() => gridApi?.pagerApi?.pageSize,
|
||||||
(newSize, oldSize) => {
|
(newSize, oldSize) => {
|
||||||
if (newSize !== oldSize && oldSize) {
|
if (newSize !== oldSize && oldSize && !isInitializing.value) {
|
||||||
// 重置到第一页
|
// 重置到第一页
|
||||||
gridApi.pagerApi.currentPage = 1;
|
gridApi.pagerApi.currentPage = 1;
|
||||||
// 触发数据重新加载
|
// 触发数据重新加载
|
||||||
@ -378,7 +395,7 @@ watch(
|
|||||||
watch(
|
watch(
|
||||||
() => gridApi?.pagerApi?.currentPage,
|
() => gridApi?.pagerApi?.currentPage,
|
||||||
(newPage, oldPage) => {
|
(newPage, oldPage) => {
|
||||||
if (newPage !== oldPage && oldPage) {
|
if (newPage !== oldPage && oldPage && !isInitializing.value) {
|
||||||
// 触发数据重新加载
|
// 触发数据重新加载
|
||||||
gridApi.reload();
|
gridApi.reload();
|
||||||
}
|
}
|
||||||
@ -388,6 +405,9 @@ watch(
|
|||||||
// 初始化函数
|
// 初始化函数
|
||||||
const initializeGrid = async () => {
|
const initializeGrid = async () => {
|
||||||
try {
|
try {
|
||||||
|
// 设置初始化标志
|
||||||
|
isInitializing.value = true;
|
||||||
|
|
||||||
// 获取设备信息数据
|
// 获取设备信息数据
|
||||||
await fetchDeviceOptions();
|
await fetchDeviceOptions();
|
||||||
|
|
||||||
@ -409,23 +429,47 @@ const initializeGrid = async () => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 如果有路由参数,自动触发查询
|
// 如果有路由参数,自动触发查询
|
||||||
if (DeviceType || DeviceId) {
|
if (DeviceType || DeviceAddress) {
|
||||||
// 延迟一下确保表格已完全初始化
|
// 延迟一下确保表格已完全初始化
|
||||||
|
setTimeout(async () => {
|
||||||
|
if (gridApi && gridApi.formApi) {
|
||||||
|
// 确保表单值正确设置
|
||||||
|
const currentValues = await gridApi.formApi.getValues();
|
||||||
|
if (!currentValues.DeviceAddress && DeviceAddress) {
|
||||||
|
await gridApi.formApi.setValues({
|
||||||
|
...currentValues,
|
||||||
|
DeviceAddress: DeviceAddress as string,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
// 延迟清除初始化标志,确保只触发一次查询
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (gridApi) {
|
isInitializing.value = false;
|
||||||
|
// 确保表单值正确设置后再触发查询
|
||||||
gridApi.reload();
|
gridApi.reload();
|
||||||
|
}, 200);
|
||||||
|
} else {
|
||||||
|
isInitializing.value = false;
|
||||||
}
|
}
|
||||||
}, 300);
|
}, 300);
|
||||||
|
} else {
|
||||||
|
// 如果没有路由参数,直接清除初始化标志
|
||||||
|
isInitializing.value = false;
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('初始化表格失败:', error);
|
console.error('初始化表格失败:', error);
|
||||||
|
isInitializing.value = false;
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
// 监听路由参数变化,当有路由参数时自动触发查询
|
// 监听路由参数变化,当有路由参数时自动触发查询
|
||||||
watch(
|
watch(
|
||||||
() => [DeviceType, DeviceId],
|
() => [DeviceType, DeviceAddress],
|
||||||
async (newValues, oldValues) => {
|
async (newValues, oldValues) => {
|
||||||
|
// 如果正在初始化,不触发额外的查询
|
||||||
|
if (isInitializing.value) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
// 如果有路由参数,等待设备信息加载完成后自动触发查询
|
// 如果有路由参数,等待设备信息加载完成后自动触发查询
|
||||||
if (newValues.some(Boolean) && gridApi && isGridInitialized.value) {
|
if (newValues.some(Boolean) && gridApi && isGridInitialized.value) {
|
||||||
// 延迟一下确保表单值已经设置
|
// 延迟一下确保表单值已经设置
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user