ctwinglog

apps/web-antd/src/views/dataManger/ctwingLog/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 { postCTWingLogInfoPage } from '#/api-client';
 
 import { querySchema, tableSchema } from './schema';
+import DeviceSelect from '../deviceData/DeviceSelect.vue';
 
 defineOptions({
   name: 'CTWingLog',
@@ -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.getSelectedDeviceInfo();
+          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 postCTWingLogInfoPage({
           body: queryParams,
         });
-        
-        // 确保返回的数据包含totalCount字段
         const result = {
           items: data.items || [],
           totalCount: data.totalCount || (data.items ? data.items.length : 0),
@@ -69,11 +107,53 @@ 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>

apps/web-antd/src/views/dataManger/ctwingLog/schema.ts

@@ -4,118 +4,212 @@ import { computed } from 'vue';
 
 import dayjs from 'dayjs';
 
+import { getSelectResultList, postMetersPage } from '#/api-client';
 import { $t } from '#/locales';
 
 export const querySchema = computed(() => [
   {
-    component: 'Input',
+    component: 'ApiSelect',
-    fieldName: 'FocusAddress',
-    label: $t('abp.CTWingLog.FocusAddress'),
-  },
-  {
-    component: 'Input',
-    fieldName: 'DeviceId',
-    label: $t('abp.IoTDBBase.DeviceId'),
-  },
-  {
-    component: 'Input',
-    fieldName: 'DeviceType',
-    label: $t('abp.IoTDBBase.DeviceType'),
-  },
-  {
-    component: 'Input',
     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',
+    component: 'ApiSelect',
-    fieldName: 'ProjectId',
+    fieldName: 'DeviceType',
-    label: $t('abp.IoTDBBase.ProjectId'),
+    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: '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: '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: 150 },
+  { field: 'systemName', title: $t('abp.IoTDBBase.SystemName'), minWidth: 150, slots: {} },
-  {
-    field: 'projectId',
-    title: $t('abp.IoTDBBase.ProjectId'),
-    minWidth: 150,
-  },
   {
     field: 'deviceType',
     title: $t('abp.IoTDBBase.DeviceType'),
     minWidth: 150,
+    slots: {},
   },
   {
     field: 'ioTDataType',
     title: $t('abp.IoTDBBase.IoTDataType'),
     minWidth: 150,
+    slots: {},
   },
   {
     field: 'deviceId',
     title: $t('abp.IoTDBBase.DeviceId'),
     minWidth: 150,
+    slots: {},
   },
   {
     field: 'platformTenantId',
     title: $t('abp.CTWingLog.PlatformTenantId'),
     minWidth: 150,
-  },
+    slots: {},
-  {
-    field: 'productId',
-    title: $t('abp.CTWingLog.ProductId'),
-    minWidth: 150,
   },
   {
     field: 'serviceId',
     title: $t('abp.CTWingLog.ServiceId'),
     minWidth: 150,
-  },
+    slots: {},
-  {
-    field: 'platformDeviceId',
-    title: $t('abp.CTWingLog.PlatformDeviceId'),
-    minWidth: 150,
   },
   {
     field: 'messageType',
     title: $t('abp.CTWingLog.MessageType'),
     minWidth: 180,
+    slots: {},
   },
   {
     field: 'protocol',
     title: $t('abp.CTWingLog.Protocol'),
     minWidth: 100,
-  },
+    slots: {},
-  {
-    field: 'focusAddress',
-    title: $t('abp.CTWingLog.FocusAddress'),
-    minWidth: 150,
-  },
-  {
-    field: 'meterAddress',
-    title: $t('abp.CTWingLog.MeterAddress'),
-    minWidth: 150,
   },
   {
     field: 'rawMessage',
     title: $t('abp.CTWingLog.RawMessage'),
     minWidth: 200,
+    slots: {},
   },
   {
     field: 'receivedPayload',
     title: $t('abp.CTWingLog.ReceivedPayload'),
     minWidth: 200,
+    slots: {},
   },
   {
     field: 'receivedTime',
     title: $t('abp.CTWingLog.ReceivedTime'),
     minWidth: 150,
+    slots: {},
     formatter: ({ cellValue }) => {
       return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
     },
@@ -124,10 +218,12 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
     field: 'imsi',
     title: $t('abp.CTWingLog.IMSI'),
     minWidth: 150,
+    slots: {},
   },
   {
     field: 'imei',
     title: $t('abp.CTWingLog.IMEI'),
     minWidth: 150,
+    slots: {},
   },
 ]);