完善设备数据展示,移除重复的字段
This commit is contained in:
parent
d699782bc9
commit
180718974d
@ -4,7 +4,7 @@ import { computed } from 'vue';
|
|||||||
|
|
||||||
import dayjs from 'dayjs';
|
import dayjs from 'dayjs';
|
||||||
|
|
||||||
import { getSelectResultList, postMetersPage } from '#/api-client';
|
import { getSelectResultList } from '#/api-client';
|
||||||
import { $t } from '#/locales';
|
import { $t } from '#/locales';
|
||||||
|
|
||||||
export const querySchema = computed(() => [
|
export const querySchema = computed(() => [
|
||||||
@ -150,7 +150,20 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
|
|||||||
minWidth: 150,
|
minWidth: 150,
|
||||||
slots: {},
|
slots: {},
|
||||||
},
|
},
|
||||||
{ field: 'systemName', title: $t('abp.IoTDBBase.SystemName'), minWidth: 150, slots: {} },
|
{
|
||||||
|
field: 'formattedTimestamps',
|
||||||
|
title: $t('abp.IoTDBBase.FormattedTimestamps'),
|
||||||
|
minWidth: '150',
|
||||||
|
formatter: ({ cellValue }) => {
|
||||||
|
return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'systemName',
|
||||||
|
title: $t('abp.IoTDBBase.SystemName'),
|
||||||
|
minWidth: 150,
|
||||||
|
slots: {},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
field: 'deviceType',
|
field: 'deviceType',
|
||||||
title: $t('abp.IoTDBBase.DeviceType'),
|
title: $t('abp.IoTDBBase.DeviceType'),
|
||||||
|
|||||||
@ -1,4 +1,9 @@
|
|||||||
import type { FieldMapping, FieldTypeConfig, ColumnConfig, DynamicDeviceData } from './types';
|
import type {
|
||||||
|
ColumnConfig,
|
||||||
|
DynamicDeviceData,
|
||||||
|
FieldMapping,
|
||||||
|
FieldTypeConfig,
|
||||||
|
} from './types';
|
||||||
|
|
||||||
// 字段名映射配置
|
// 字段名映射配置
|
||||||
export const fieldNameMapping: FieldMapping = {
|
export const fieldNameMapping: FieldMapping = {
|
||||||
@ -34,11 +39,14 @@ const FIXED_FIELDS = [
|
|||||||
'DeviceType',
|
'DeviceType',
|
||||||
'IoTDataType',
|
'IoTDataType',
|
||||||
'DeviceId',
|
'DeviceId',
|
||||||
'Timestamps'
|
'Timestamps',
|
||||||
|
'FormattedTimestamps',
|
||||||
];
|
];
|
||||||
|
|
||||||
// 动态生成表格列
|
// 动态生成表格列
|
||||||
export const generateDynamicColumns = (data: DynamicDeviceData[]): ColumnConfig[] => {
|
export const generateDynamicColumns = (
|
||||||
|
data: DynamicDeviceData[],
|
||||||
|
): ColumnConfig[] => {
|
||||||
if (!data || data.length === 0) return [];
|
if (!data || data.length === 0) return [];
|
||||||
|
|
||||||
// 获取第一条数据的所有字段
|
// 获取第一条数据的所有字段
|
||||||
@ -47,11 +55,11 @@ export const generateDynamicColumns = (data: DynamicDeviceData[]): ColumnConfig[
|
|||||||
const fields = Object.keys(firstRow);
|
const fields = Object.keys(firstRow);
|
||||||
|
|
||||||
// 过滤掉不需要显示的字段和固定字段
|
// 过滤掉不需要显示的字段和固定字段
|
||||||
const excludeFields = ['id', 'key', '__typename', ...FIXED_FIELDS];
|
const excludeFields = new Set(['__typename', 'id', 'key', ...FIXED_FIELDS]);
|
||||||
|
|
||||||
return fields
|
return fields
|
||||||
.filter(field => !excludeFields.includes(field))
|
.filter((field) => !excludeFields.has(field))
|
||||||
.map(field => {
|
.map((field) => {
|
||||||
// 确保字段名是有效的字符串
|
// 确保字段名是有效的字符串
|
||||||
const safeField = String(field || '').trim();
|
const safeField = String(field || '').trim();
|
||||||
if (!safeField) return null;
|
if (!safeField) return null;
|
||||||
@ -67,7 +75,10 @@ export const generateDynamicColumns = (data: DynamicDeviceData[]): ColumnConfig[
|
|||||||
// 应用字段类型配置,确保配置是安全的
|
// 应用字段类型配置,确保配置是安全的
|
||||||
if (fieldTypeConfig[safeField]) {
|
if (fieldTypeConfig[safeField]) {
|
||||||
const typeConfig = fieldTypeConfig[safeField];
|
const typeConfig = fieldTypeConfig[safeField];
|
||||||
if (typeConfig.formatter && typeof typeConfig.formatter === 'function') {
|
if (
|
||||||
|
typeConfig.formatter &&
|
||||||
|
typeof typeConfig.formatter === 'function'
|
||||||
|
) {
|
||||||
columnConfig.formatter = typeConfig.formatter;
|
columnConfig.formatter = typeConfig.formatter;
|
||||||
}
|
}
|
||||||
if (typeConfig.width !== undefined) {
|
if (typeConfig.width !== undefined) {
|
||||||
@ -94,7 +105,7 @@ export const getAllPossibleFields = () => {
|
|||||||
|
|
||||||
// 预定义列配置(可选)
|
// 预定义列配置(可选)
|
||||||
export const getPredefinedColumns = () => {
|
export const getPredefinedColumns = () => {
|
||||||
return getAllPossibleFields().map(field => ({
|
return getAllPossibleFields().map((field) => ({
|
||||||
field,
|
field,
|
||||||
title: fieldNameMapping[field] || field,
|
title: fieldNameMapping[field] || field,
|
||||||
minWidth: 150,
|
minWidth: 150,
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
import type { VbenFormProps } from '#/adapter/form';
|
import type { VbenFormProps } from '#/adapter/form';
|
||||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||||
|
|
||||||
import { computed, nextTick, ref, watch, onMounted } from 'vue';
|
import { computed, nextTick, onMounted, ref, watch } from 'vue';
|
||||||
import { useRoute } from 'vue-router';
|
import { useRoute } from 'vue-router';
|
||||||
|
|
||||||
import { Page } from '@vben/common-ui';
|
import { Page } from '@vben/common-ui';
|
||||||
@ -66,7 +66,6 @@ const formatDate = (date: Date | string) => {
|
|||||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { DeviceType, DeviceId, FocusAddress, SystemName } = route.query;
|
const { DeviceType, DeviceId, FocusAddress, SystemName } = route.query;
|
||||||
|
|
||||||
@ -76,11 +75,41 @@ const dynamicColumns = ref<any[]>([]);
|
|||||||
// 固定列定义(始终显示)- 基于 IoTDBTreeModelDeviceDataDto 类型
|
// 固定列定义(始终显示)- 基于 IoTDBTreeModelDeviceDataDto 类型
|
||||||
const fixedColumns = [
|
const fixedColumns = [
|
||||||
{ title: '序号', type: 'seq', width: 50, field: 'seq', slots: {} },
|
{ title: '序号', type: 'seq', width: 50, field: 'seq', slots: {} },
|
||||||
{ field: 'Timestamps', title: $t('abp.IoTDBBase.Timestamps'), minWidth: 150, showOverflow: true, slots: {} },
|
{
|
||||||
{ field: 'FormattedTimestamps', title: $t('abp.IoTDBBase.FormattedTimestamps'), minWidth: 150, showOverflow: true, slots: {} },
|
field: 'Timestamps',
|
||||||
{ field: 'SystemName', title: $t('abp.IoTDBBase.SystemName'), minWidth: 150, showOverflow: true, slots: {} },
|
title: $t('abp.IoTDBBase.Timestamps'),
|
||||||
{ field: 'ProjectId', title: $t('abp.IoTDBBase.ProjectId'), minWidth: 150, showOverflow: true, slots: {} },
|
minWidth: 150,
|
||||||
{ field: 'DeviceType', title: $t('abp.IoTDBBase.DeviceType'), minWidth: 150, showOverflow: true, slots: {} },
|
showOverflow: true,
|
||||||
|
slots: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'FormattedTimestamps',
|
||||||
|
title: $t('abp.IoTDBBase.FormattedTimestamps'),
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflow: true,
|
||||||
|
slots: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'SystemName',
|
||||||
|
title: $t('abp.IoTDBBase.SystemName'),
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflow: true,
|
||||||
|
slots: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'ProjectId',
|
||||||
|
title: $t('abp.IoTDBBase.ProjectId'),
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflow: true,
|
||||||
|
slots: {},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
field: 'DeviceType',
|
||||||
|
title: $t('abp.IoTDBBase.DeviceType'),
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflow: true,
|
||||||
|
slots: {},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
field: 'IoTDataType',
|
field: 'IoTDataType',
|
||||||
title: $t('abp.IoTDBBase.IoTDataType'),
|
title: $t('abp.IoTDBBase.IoTDataType'),
|
||||||
@ -88,7 +117,13 @@ const fixedColumns = [
|
|||||||
showOverflow: true,
|
showOverflow: true,
|
||||||
slots: {},
|
slots: {},
|
||||||
},
|
},
|
||||||
{ field: 'DeviceId', title: $t('abp.IoTDBBase.DeviceId'), minWidth: 150, showOverflow: true, slots: {} },
|
{
|
||||||
|
field: 'DeviceId',
|
||||||
|
title: $t('abp.IoTDBBase.DeviceId'),
|
||||||
|
minWidth: 150,
|
||||||
|
showOverflow: true,
|
||||||
|
slots: {},
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
// 合并固定列和动态列 - 使用计算属性确保响应式
|
// 合并固定列和动态列 - 使用计算属性确保响应式
|
||||||
@ -102,11 +137,11 @@ const allColumns = computed(() => {
|
|||||||
|
|
||||||
// 安全地添加动态列
|
// 安全地添加动态列
|
||||||
if (dynamicColumns.value && Array.isArray(dynamicColumns.value)) {
|
if (dynamicColumns.value && Array.isArray(dynamicColumns.value)) {
|
||||||
const validDynamicColumns = dynamicColumns.value.filter(col =>
|
const validDynamicColumns = dynamicColumns.value
|
||||||
col && typeof col === 'object' && col.field && col.title
|
.filter((col) => col && typeof col === 'object' && col.field && col.title)
|
||||||
).map(col => ({
|
.map((col) => ({
|
||||||
...col,
|
...col,
|
||||||
slots: col.slots || {} // 确保每个列都有slots属性
|
slots: col.slots || {}, // 确保每个列都有slots属性
|
||||||
}));
|
}));
|
||||||
columns.push(...validDynamicColumns);
|
columns.push(...validDynamicColumns);
|
||||||
}
|
}
|
||||||
@ -144,11 +179,11 @@ const formOptions: VbenFormProps = {
|
|||||||
const relevantFields = new Set([
|
const relevantFields = new Set([
|
||||||
'DeviceId',
|
'DeviceId',
|
||||||
'DeviceType',
|
'DeviceType',
|
||||||
|
'EndCreationTime',
|
||||||
'FocusAddress',
|
'FocusAddress',
|
||||||
'IoTDataType',
|
'IoTDataType',
|
||||||
'SystemName',
|
|
||||||
'StartCreationTime',
|
'StartCreationTime',
|
||||||
'EndCreationTime',
|
'SystemName',
|
||||||
]);
|
]);
|
||||||
const hasRelevantChange = changedFields.some((field) =>
|
const hasRelevantChange = changedFields.some((field) =>
|
||||||
relevantFields.has(field),
|
relevantFields.has(field),
|
||||||
@ -160,17 +195,21 @@ const formOptions: VbenFormProps = {
|
|||||||
|
|
||||||
if (deviceId) {
|
if (deviceId) {
|
||||||
// 先尝试从 deviceOptions 中查找(备用方案)
|
// 先尝试从 deviceOptions 中查找(备用方案)
|
||||||
let device = deviceOptions.value.length > 0 ? deviceOptions.value.find(d => d.id === deviceId) : null;
|
let device =
|
||||||
|
deviceOptions.value.length > 0
|
||||||
|
? deviceOptions.value.find((d) => d.id === deviceId)
|
||||||
|
: null;
|
||||||
|
|
||||||
// 如果没找到,尝试从 DeviceSelect 组件中获取
|
// 如果没找到,尝试从 DeviceSelect 组件中获取
|
||||||
if (!device && gridApi?.formApi) {
|
if (!device && gridApi?.formApi) {
|
||||||
try {
|
try {
|
||||||
// 获取 DeviceSelect 组件的实例
|
// 获取 DeviceSelect 组件的实例
|
||||||
const deviceSelectRef = gridApi.formApi.getFieldComponentRef('DeviceId');
|
const deviceSelectRef =
|
||||||
|
gridApi.formApi.getFieldComponentRef('DeviceId');
|
||||||
if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
|
if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
|
||||||
device = deviceSelectRef.getSelectedDevice();
|
device = deviceSelectRef.getSelectedDevice();
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch {
|
||||||
// 静默处理错误
|
// 静默处理错误
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -181,14 +220,15 @@ const formOptions: VbenFormProps = {
|
|||||||
// 如果还是没找到,尝试延迟获取(组件可能还没完全更新)
|
// 如果还是没找到,尝试延迟获取(组件可能还没完全更新)
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
try {
|
try {
|
||||||
const deviceSelectRef = gridApi.formApi.getFieldComponentRef('DeviceId');
|
const deviceSelectRef =
|
||||||
|
gridApi.formApi.getFieldComponentRef('DeviceId');
|
||||||
if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
|
if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
|
||||||
const delayedDevice = deviceSelectRef.getSelectedDevice();
|
const delayedDevice = deviceSelectRef.getSelectedDevice();
|
||||||
if (delayedDevice) {
|
if (delayedDevice) {
|
||||||
selectedDeviceInfo.value = delayedDevice;
|
selectedDeviceInfo.value = delayedDevice;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} catch (error) {
|
} catch {
|
||||||
// 静默处理错误
|
// 静默处理错误
|
||||||
}
|
}
|
||||||
}, 100);
|
}, 100);
|
||||||
@ -239,7 +279,10 @@ const gridOptions: VxeGridProps<any> = {
|
|||||||
return { items: [], totalCount: 0 };
|
return { items: [], totalCount: 0 };
|
||||||
}
|
}
|
||||||
// 获取当前表单值,如果formValues为空则从表单API获取
|
// 获取当前表单值,如果formValues为空则从表单API获取
|
||||||
const currentFormValues = formValues || (gridApi?.formApi ? await gridApi.formApi.getValues() : {}) || {};
|
const currentFormValues =
|
||||||
|
formValues ||
|
||||||
|
(gridApi?.formApi ? await gridApi.formApi.getValues() : {}) ||
|
||||||
|
{};
|
||||||
// 处理DeviceType和IoTDataType,确保传递数字类型
|
// 处理DeviceType和IoTDataType,确保传递数字类型
|
||||||
const deviceTypeValue = currentFormValues.DeviceType || DeviceType;
|
const deviceTypeValue = currentFormValues.DeviceType || DeviceType;
|
||||||
const deviceTypeNumber = deviceTypeValue
|
const deviceTypeNumber = deviceTypeValue
|
||||||
@ -249,15 +292,23 @@ const gridOptions: VxeGridProps<any> = {
|
|||||||
const ioTDataTypeValue = currentFormValues.IoTDataType;
|
const ioTDataTypeValue = currentFormValues.IoTDataType;
|
||||||
|
|
||||||
// 处理日期范围参数
|
// 处理日期范围参数
|
||||||
const startCreationTime = currentFormValues.StartCreationTime ? formatDate(currentFormValues.StartCreationTime) : undefined;
|
const startCreationTime = currentFormValues.StartCreationTime
|
||||||
const endCreationTime = currentFormValues.EndCreationTime ? formatDate(currentFormValues.EndCreationTime) : undefined;
|
? formatDate(currentFormValues.StartCreationTime)
|
||||||
|
: undefined;
|
||||||
|
const endCreationTime = currentFormValues.EndCreationTime
|
||||||
|
? formatDate(currentFormValues.EndCreationTime)
|
||||||
|
: undefined;
|
||||||
|
|
||||||
// 处理DeviceId,当设备类型为集中器(10)时,使用focusId
|
// 处理DeviceId,当设备类型为集中器(10)时,使用focusId
|
||||||
let finalDeviceId = currentFormValues.DeviceId || DeviceId || '';
|
let finalDeviceId = currentFormValues.DeviceId || DeviceId || '';
|
||||||
let finalFocusAddress = currentFormValues.FocusAddress || '';
|
let finalFocusAddress = currentFormValues.FocusAddress || '';
|
||||||
|
|
||||||
// 优先使用选中的设备信息
|
// 优先使用选中的设备信息
|
||||||
const deviceInfo = selectedDeviceInfo.value || (currentFormValues.DeviceId && deviceOptions.value.length > 0 ? getDeviceInfoById(currentFormValues.DeviceId) : null);
|
const deviceInfo =
|
||||||
|
selectedDeviceInfo.value ||
|
||||||
|
(currentFormValues.DeviceId && deviceOptions.value.length > 0
|
||||||
|
? getDeviceInfoById(currentFormValues.DeviceId)
|
||||||
|
: null);
|
||||||
|
|
||||||
if (deviceInfo) {
|
if (deviceInfo) {
|
||||||
finalFocusAddress = deviceInfo.focusAddress || '';
|
finalFocusAddress = deviceInfo.focusAddress || '';
|
||||||
@ -292,8 +343,6 @@ const gridOptions: VxeGridProps<any> = {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// 简化处理逻辑,直接使用接口返回的数据
|
// 简化处理逻辑,直接使用接口返回的数据
|
||||||
if (data?.items && data.items.length > 0) {
|
if (data?.items && data.items.length > 0) {
|
||||||
try {
|
try {
|
||||||
@ -411,14 +460,14 @@ watch(
|
|||||||
() => [DeviceType, DeviceId, FocusAddress, SystemName],
|
() => [DeviceType, DeviceId, FocusAddress, SystemName],
|
||||||
async (newValues, oldValues) => {
|
async (newValues, oldValues) => {
|
||||||
// 如果有路由参数,等待设备信息加载完成后自动触发查询
|
// 如果有路由参数,等待设备信息加载完成后自动触发查询
|
||||||
if (newValues.some(val => val) && gridApi && isGridInitialized.value) {
|
if (newValues.some(Boolean) && gridApi && isGridInitialized.value) {
|
||||||
// 延迟一下确保表单值已经设置
|
// 延迟一下确保表单值已经设置
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
gridApi.reload();
|
gridApi.reload();
|
||||||
}, 100);
|
}, 100);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ immediate: false } // 改为false,避免立即触发
|
{ immediate: false }, // 改为false,避免立即触发
|
||||||
);
|
);
|
||||||
|
|
||||||
// 页面初始化时,延迟初始化表格
|
// 页面初始化时,延迟初始化表格
|
||||||
|
|||||||
@ -146,11 +146,6 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
|
|||||||
title: $t('abp.IoTDBBase.Timestamps'),
|
title: $t('abp.IoTDBBase.Timestamps'),
|
||||||
minWidth: '150',
|
minWidth: '150',
|
||||||
},
|
},
|
||||||
{
|
|
||||||
field: 'FormattedTimestamps',
|
|
||||||
title: $t('abp.IoTDBBase.FormattedTimestamps'),
|
|
||||||
minWidth: '150',
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
field: 'SystemName',
|
field: 'SystemName',
|
||||||
title: $t('abp.IoTDBBase.SystemName'),
|
title: $t('abp.IoTDBBase.SystemName'),
|
||||||
|
|||||||
@ -150,6 +150,14 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
|
|||||||
minWidth: '150',
|
minWidth: '150',
|
||||||
slots: {},
|
slots: {},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
field: 'formattedTimestamps',
|
||||||
|
title: $t('abp.IoTDBBase.FormattedTimestamps'),
|
||||||
|
minWidth: '150',
|
||||||
|
formatter: ({ cellValue }) => {
|
||||||
|
return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
|
||||||
|
},
|
||||||
|
},
|
||||||
{
|
{
|
||||||
field: 'systemName',
|
field: 'systemName',
|
||||||
title: $t('abp.IoTDBBase.SystemName'),
|
title: $t('abp.IoTDBBase.SystemName'),
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user