diff --git a/apps/web-antd/src/views/dataManger/onenetLog/index.vue b/apps/web-antd/src/views/dataManger/onenetLog/index.vue index 8e4fad1..4630a51 100644 --- a/apps/web-antd/src/views/dataManger/onenetLog/index.vue +++ b/apps/web-antd/src/views/dataManger/onenetLog/index.vue @@ -3,6 +3,7 @@ import type { VbenFormProps } from '#/adapter/form'; import type { VxeGridProps } from '#/adapter/vxe-table'; import { useRoute } from 'vue-router'; +import { ref, nextTick, watch } from 'vue'; import { Page } from '@vben/common-ui'; @@ -10,6 +11,7 @@ import { useVbenVxeGrid } from '#/adapter/vxe-table'; import { postOneNETLogInfoPage } from '#/api-client'; import { querySchema, tableSchema } from './schema'; +import DeviceSelect from '../deviceData/DeviceSelect.vue'; defineOptions({ name: 'OneNETLog', @@ -17,9 +19,24 @@ defineOptions({ const route = useRoute(); const { DeviceType, DeviceId, FocusAddress } = route.query; + +// 添加设备选择器引用 +const deviceSelectRef = ref(); + +// 添加选中的设备信息 +const selectedDeviceInfo = ref(null); + +// 格式化日期函数 +const formatDate = (date: any) => { + if (!date) return ''; + if (typeof date === 'string') return date; + if (date.toISOString) return date.format('YYYY-MM-DD HH:mm:ss'); + return ''; +}; const formOptions: VbenFormProps = { schema: querySchema.value, }; + const gridOptions: VxeGridProps = { checkboxConfig: { highlight: true, @@ -28,7 +45,12 @@ const gridOptions: VxeGridProps = { columns: tableSchema.value, height: 'auto', keepSource: true, - pagerConfig: {}, + pagerConfig: { + currentPage: 1, + pageSize: 10, + pageSizes: [10, 20, 100], + layouts: ['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total'], + }, toolbarConfig: { custom: true, }, @@ -38,27 +60,43 @@ const gridOptions: VxeGridProps = { proxyConfig: { ajax: { query: async ({ page }, formValues) => { + // 获取选中的设备信息 + let deviceId = ''; + let systemName = ''; + let deviceType = formValues?.DeviceType || ''; + if (deviceSelectRef.value) { + const deviceInfo = deviceSelectRef.value.getSelectedDevice(); + if (deviceInfo) { + systemName = deviceInfo.systemName || ''; + // 设备类型为10时取focusId,其他情况取meterId + if (Number(deviceType) === 10) { + deviceId = deviceInfo.focusId || ''; + } else { + deviceId = deviceInfo.meterId || ''; + } + } + } + // 没有deviceInfo时回退表单DeviceId + if (!deviceId) { + deviceId = formValues?.DeviceId || ''; + } // 构建查询参数 const queryParams: any = { pageIndex: page.currentPage, pageSize: page.pageSize, + SearchKeyword: formValues?.SearchKeyword || '', + DeviceType: deviceType, + IoTDataType: formValues?.IoTDataType || '', + DeviceId: deviceId, + SystemName: systemName || formValues?.SystemName || '', + StartCreationTime: formatDate(formValues?.StartCreationTime), + EndCreationTime: formatDate(formValues?.EndCreationTime), }; - - // 如果有表单值,添加到查询参数中 - if (formValues) { - Object.assign(queryParams, formValues); - } - - // 添加路由参数 if (DeviceType) queryParams.DeviceType = DeviceType; if (DeviceId) queryParams.DeviceId = DeviceId; - if (FocusAddress) queryParams.FocusAddress = FocusAddress; - const { data } = await postOneNETLogInfoPage({ body: queryParams, }); - - // 确保返回的数据包含totalCount字段 const result = { items: data.items || [], totalCount: data.totalCount || (data.items ? data.items.length : 0), @@ -69,11 +107,48 @@ const gridOptions: VxeGridProps = { }, }; -const [Grid] = useVbenVxeGrid({ formOptions, gridOptions }); +const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions }); + +// 监听分页器状态变化 +watch( + () => gridApi?.pagerApi?.pageSize, + (newSize, oldSize) => { + if (newSize !== oldSize && oldSize) { + gridApi.pagerApi.currentPage = 1; + gridApi.reload(); + } + }, +); +// 监听当前页变化 +watch( + () => gridApi?.pagerApi?.currentPage, + (newPage, oldPage) => { + if (newPage !== oldPage && oldPage) { + gridApi.reload(); + } + }, +); +// 监听DeviceId变化,自动刷新表格 +watch( + () => gridApi?.getFormModel?.()?.DeviceId, + (newVal, oldVal) => { + if (newVal !== oldVal) { + gridApi.reload(); + } + }, +); diff --git a/apps/web-antd/src/views/dataManger/onenetLog/schema.ts b/apps/web-antd/src/views/dataManger/onenetLog/schema.ts index 9dc6b40..5928c61 100644 --- a/apps/web-antd/src/views/dataManger/onenetLog/schema.ts +++ b/apps/web-antd/src/views/dataManger/onenetLog/schema.ts @@ -4,86 +4,193 @@ import { computed } from 'vue'; import dayjs from 'dayjs'; +import { getSelectResultList } from '#/api-client'; import { $t } from '#/locales'; export const querySchema = computed(() => [ { - component: 'Input', - fieldName: 'FocusAddress', - label: $t('abp.OneNETLog.FocusAddress'), + component: 'ApiSelect', + fieldName: 'SystemName', + label: $t('abp.IoTDBBase.SystemName'), + componentProps: { + api: getSelectResultList, + params: { + query: { + TypeName: 'BusinessSystemEnum', + }, + }, + labelField: 'secondValue', + valueField: 'value', + optionsPropName: 'options', + immediate: true, + afterFetch: (res: any) => { + // 确保返回的是数组格式 + if (Array.isArray(res)) { + return res; + } + // 如果是包装在 items 中的,提取出来 + if (res && Array.isArray(res.items)) { + return res.items; + } + // 如果是包装在 data 中的,提取出来 + if (res && Array.isArray(res.data)) { + return res.data; + } + // 如果都不是,返回空数组 + return []; + }, + }, }, { - component: 'Input', - fieldName: 'DeviceId', - label: $t('abp.IoTDBBase.DeviceId'), - }, - { - component: 'Input', + component: 'ApiSelect', fieldName: 'DeviceType', label: $t('abp.IoTDBBase.DeviceType'), + componentProps: { + api: getSelectResultList, + params: { + query: { + TypeName: 'MeterTypeEnum', + }, + }, + labelField: 'value', + valueField: 'key', + optionsPropName: 'options', + immediate: true, + afterFetch: (res: any) => { + // 确保返回的是数组格式 + if (Array.isArray(res)) { + return res; + } + // 如果是包装在 items 中的,提取出来 + if (res && Array.isArray(res.items)) { + return res.items; + } + // 如果是包装在 data 中的,提取出来 + if (res && Array.isArray(res.data)) { + return res.data; + } + // 如果都不是,返回空数组 + return []; + }, + }, }, { - component: 'Input', - fieldName: 'ProductId', - label: $t('abp.OneNETLog.ProductId'), + component: 'ApiSelect', + fieldName: 'IoTDataType', + label: $t('abp.IoTDBBase.IoTDataType'), + componentProps: { + api: getSelectResultList, + params: { + query: { + TypeName: 'IoTDBDataTypeConst', + }, + }, + labelField: 'value', + valueField: 'key', + optionsPropName: 'options', + immediate: true, + afterFetch: (res: any) => { + // 确保返回的是数组格式 + if (Array.isArray(res)) { + return res; + } + // 如果是包装在 items 中的,提取出来 + if (res && Array.isArray(res.items)) { + return res.items; + } + // 如果是包装在 data 中的,提取出来 + if (res && Array.isArray(res.data)) { + return res.data; + } + // 如果都不是,返回空数组 + return []; + }, + }, }, { - component: 'Input', - fieldName: 'PlatformDeviceId', - label: $t('abp.OneNETLog.PlatformDeviceId'), + component: 'DeviceSelect', + fieldName: 'DeviceId', + label: $t('abp.log.deviceInfo'), + componentProps: { + placeholder: $t('common.pleaseSelect') + $t('abp.log.deviceInfo'), + allowClear: true, + }, + }, + // 新增开始时间选择器 + { + component: 'DatePicker', + fieldName: 'StartCreationTime', + label: '开始时间', + componentProps: { + placeholder: '开始时间', + format: 'YYYY-MM-DD HH:mm:ss', + showTime: true, + allowClear: true, + }, + }, + // 新增结束时间选择器 + { + component: 'DatePicker', + fieldName: 'EndCreationTime', + label: '结束时间', + componentProps: { + placeholder: '结束时间', + format: 'YYYY-MM-DD HH:mm:ss', + showTime: true, + allowClear: true, + }, }, ]); export const tableSchema: any = computed((): VxeGridProps['columns'] => [ - { title: $t('common.seq'), type: 'seq', width: 50 }, + { title: $t('common.seq'), type: 'seq', width: 50, slots: {} }, { field: 'timestamps', title: $t('abp.IoTDBBase.Timestamps'), minWidth: '150', + slots: {}, }, { field: 'systemName', title: $t('abp.IoTDBBase.SystemName'), minWidth: '120', + slots: {}, }, - { field: 'projectId', title: $t('abp.IoTDBBase.ProjectId'), minWidth: '120' }, { field: 'deviceType', title: $t('abp.IoTDBBase.DeviceType'), minWidth: '120', + slots: {}, }, { field: 'ioTDataType', title: $t('abp.IoTDBBase.IoTDataType'), minWidth: '120', + slots: {}, }, - { field: 'deviceId', title: $t('abp.IoTDBBase.DeviceId'), minWidth: '120' }, - { field: 'productId', title: $t('abp.OneNETLog.ProductId'), minWidth: '120' }, { - field: 'platformDeviceId', - title: $t('abp.OneNETLog.PlatformDeviceId'), - minWidth: '150', + field: 'deviceId', + title: $t('abp.IoTDBBase.DeviceId'), + minWidth: '120', + slots: {}, }, { field: 'messageType', title: $t('abp.OneNETLog.MessageType'), minWidth: '120', - }, - { field: 'protocol', title: $t('abp.OneNETLog.Protocol'), minWidth: '100' }, - { - field: 'focusAddress', - title: $t('abp.OneNETLog.FocusAddress'), - minWidth: '120', + slots: {}, }, { - field: 'meterAddress', - title: $t('abp.OneNETLog.MeterAddress'), - minWidth: '120', + field: 'protocol', + title: $t('abp.OneNETLog.Protocol'), + minWidth: '100', + slots: {}, }, { field: 'receivedTime', title: $t('abp.OneNETLog.ReceivedTime'), minWidth: '150', + slots: {}, formatter: ({ cellValue }) => { return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : ''; }, @@ -92,20 +199,24 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [ field: 'isEncrypted', title: $t('abp.OneNETLog.IsEncrypted'), minWidth: '200', + slots: {}, }, { field: 'plaintextMessage', title: $t('abp.OneNETLog.PlaintextMessage'), minWidth: '200', + slots: {}, }, { field: 'rawMessage', title: $t('abp.OneNETLog.RawMessage'), minWidth: '200', + slots: {}, }, { field: 'receivedPayload', title: $t('abp.OneNETLog.ReceivedPayload'), minWidth: '200', + slots: {}, }, ]);