onenetlog
This commit is contained in:
ChenYi
parent
8609e3198a
commit
b706f70e06
@ -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<any>(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<any> = {
|
||||
checkboxConfig: {
|
||||
highlight: true,
|
||||
@ -28,7 +45,12 @@ const gridOptions: VxeGridProps<any> = {
|
||||
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<any> = {
|
||||
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<any> = {
|
||||
},
|
||||
};
|
||||
|
||||
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();
|
||||
}
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Page auto-content-height>
|
||||
<Grid />
|
||||
<Grid>
|
||||
<template #DeviceId="{ model, field }"> <DeviceSelect
|
||||
ref="deviceSelectRef"
|
||||
v-model:value="model[field]"
|
||||
:placeholder="$t('common.pleaseSelect') + $t('abp.log.deviceInfo')"
|
||||
allow-clear
|
||||
/>
|
||||
</template>
|
||||
</Grid>
|
||||
</Page>
|
||||
</template>
|
||||
|
||||
@ -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: {},
|
||||
},
|
||||
]);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user