完善设备数据查询，优化get请求处理。

完善设备数据跳转
完善设备数据查询
2025-07-14 11:43:20 +08:00 · 2025-07-14 11:06:36 +08:00 · 2025-07-14 10:32:02 +08:00 · 2025-07-14 09:09:44 +08:00 · 2025-07-14 08:57:04 +08:00
4 changed files with 195 additions and 193 deletions
--- a/apps/web-antd/src/views/dataManger/deviceData/index.vue
+++ b/apps/web-antd/src/views/dataManger/deviceData/index.vue
@ -2,17 +2,22 @@
 import type { VbenFormProps } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';

-import { computed, nextTick, ref, watch } from 'vue';
+import { computed, nextTick, ref, watch, onMounted } from 'vue';
 import { useRoute } from 'vue-router';

 import { Page } from '@vben/common-ui';

 import { useVbenVxeGrid } from '#/adapter/vxe-table';
-import { postTreeModelDeviceDataInfoPage, postMetersPage } from '#/api-client';
+import { postMetersPage, postTreeModelDeviceDataInfoPage } from '#/api-client';
+import { $t } from '#/locales';

 import { generateDynamicColumns } from './dynamicColumns';
 import { querySchema } from './schema';

+defineOptions({
+  name: 'DeviceData',
+});
+
 // 存储设备信息选项的完整数据
 const deviceOptions = ref<any[]>([]);

@ -37,30 +42,28 @@ const fetchDeviceOptions = async () => {

 // 根据设备ID获取设备信息对象
 const getDeviceInfoById = (deviceId: string) => {
-  return deviceOptions.value.find(device => device.id === deviceId);
+  return deviceOptions.value.find((device) => device.id === deviceId);
 };

-defineOptions({
-  name: 'DeviceData',
-});
-
 const route = useRoute();
-const { DeviceType, DeviceId, FocusAddress } = route.query;
+const { DeviceType, DeviceId, FocusAddress, SystemName } = route.query;

 // 动态列定义
 const dynamicColumns = ref<any[]>([]);

-
-
 // 固定列定义（始终显示）- 基于 IoTDBTreeModelDeviceDataDto 类型
 const fixedColumns = [
  { title: '序号', type: 'seq', width: 50 },
-  { field: 'Timestamps', title: '时间戳', minWidth: 150 },
-  { field: 'SystemName', title: '系统名称', minWidth: 150 },
-  { field: 'ProjectId', title: '项目ID', minWidth: 150 },
-  { field: 'DeviceType', title: '设备类型', minWidth: 150 },
-  { field: 'IoTDataType', title: 'IoT数据类型', minWidth: 150 },
-  { field: 'DeviceId', title: '设备ID', minWidth: 150 },
+  { field: 'Timestamps', title: $t('abp.IoTDBBase.Timestamps'), minWidth: 150 },
+  { field: 'SystemName', title: $t('abp.IoTDBBase.SystemName'), minWidth: 150 },
+  { field: 'ProjectId', title: $t('abp.IoTDBBase.ProjectId'), minWidth: 150 },
+  { field: 'DeviceType', title: $t('abp.IoTDBBase.DeviceType'), minWidth: 150 },
+  {
+    field: 'IoTDataType',
+    title: $t('abp.IoTDBBase.IoTDataType'),
+    minWidth: 150,
+  },
+  { field: 'DeviceId', title: $t('abp.IoTDBBase.DeviceId'), minWidth: 150 },
 ];

 // 合并固定列和动态列 - 使用计算属性确保响应式
@ -86,18 +89,30 @@ const formOptions: VbenFormProps = {
    FocusAddress: FocusAddress as string,
    DeviceType: DeviceType ? Number(DeviceType) : undefined,
    DeviceId: DeviceId as string,
+    SystemName: SystemName as string,
  },
  // 禁用表单值变化时自动提交，使用自定义处理函数
  submitOnChange: false,
  // 添加表单值变化的处理函数
  handleValuesChange: async (values, changedFields) => {
    // 当任何相关字段发生变化时，刷新表格数据
-    const relevantFields = ['SystemName', 'DeviceType', 'IoTDataType', 'DeviceId', 'FocusAddress'];
-    const hasRelevantChange = changedFields.some(field => relevantFields.includes(field));
+    const relevantFields = new Set([
+      'DeviceId',
+      'DeviceType',
+      'FocusAddress',
+      'IoTDataType',
+      'SystemName',
+    ]);
+    const hasRelevantChange = changedFields.some((field) =>
+      relevantFields.has(field),
+    );

    if (hasRelevantChange) {
      console.log('表单字段变化:', { values, changedFields });
-      console.log('相关字段变化:', changedFields.filter(field => relevantFields.includes(field)));
+      console.log(
+        '相关字段变化:',
+        changedFields.filter((field) => relevantFields.has(field)),
+      );

      // 使用 setTimeout 确保表单值已经完全更新
      setTimeout(async () => {
@ -147,62 +162,45 @@ const gridOptions: VxeGridProps<any> = {
        console.log('=== API调用开始 ===');
        // 处理DeviceType和IoTDataType，确保传递数字类型
        const deviceTypeValue = formValues.DeviceType || DeviceType;
-        const deviceTypeNumber = deviceTypeValue ? Number(deviceTypeValue) : undefined;
+        const deviceTypeNumber = deviceTypeValue
+          ? Number(deviceTypeValue)
+          : undefined;

        const ioTDataTypeValue = formValues.IoTDataType;
-        const ioTDataTypeNumber = ioTDataTypeValue ? Number(ioTDataTypeValue) : undefined;
+
+        console.log('=== API调用开始 ===2', ioTDataTypeValue);

        // 处理DeviceId，当设备类型为集中器(10)时，使用focusId
        let finalDeviceId = formValues.DeviceId || DeviceId;
-        if (deviceTypeNumber === 10 && formValues.DeviceId) {
+        if (formValues.DeviceId) {
          const deviceInfo = getDeviceInfoById(formValues.DeviceId);
-          if (deviceInfo && deviceInfo.focusId) {
-            finalDeviceId = deviceInfo.focusId;
-            console.log('设备类型为集中器，使用focusId:', {
-              originalDeviceId: formValues.DeviceId,
-              focusId: deviceInfo.focusId,
-              deviceInfo: deviceInfo,
-            });
+          if (deviceInfo) {
+            if (deviceTypeNumber === 10) {
+              // 集中器类型使用focusId
+              if (deviceInfo.focusId) {
+                finalDeviceId = deviceInfo.focusId;
+                console.log('设备类型为集中器，使用focusId:', {
+                  originalDeviceId: formValues.DeviceId,
+                  focusId: deviceInfo.focusId,
+                  deviceInfo: deviceInfo,
+                });
+              }
+            } else {
+              // 其他设备类型使用meterId
+              if (deviceInfo.meterId) {
+                finalDeviceId = deviceInfo.meterId;
+                console.log('设备类型为非集中器，使用meterId:', {
+                  originalDeviceId: formValues.DeviceId,
+                  meterId: deviceInfo.meterId,
+                  deviceInfo: deviceInfo,
+                });
+              }
+            }
          }
        }
-        
-        console.log('请求参数:', {
-          page,
-          formValues,
-          routeParams: { DeviceType, DeviceId, FocusAddress },
-          typeConversions: {
-            deviceType: {
-              originalValue: deviceTypeValue,
-              convertedValue: deviceTypeNumber,
-              type: typeof deviceTypeNumber,
-            },
-            ioTDataType: {
-              originalValue: ioTDataTypeValue,
-              convertedValue: ioTDataTypeNumber,
-              type: typeof ioTDataTypeNumber,
-            },
-            deviceId: {
-              originalValue: formValues.DeviceId || DeviceId,
-              finalValue: finalDeviceId,
-              isFocusId: deviceTypeNumber === 10 && formValues.DeviceId && getDeviceInfoById(formValues.DeviceId)?.focusId,
-            },
-          },
-          finalParams: {
-            ...formValues,
-            pageIndex: page.currentPage,
-            pageSize: page.pageSize,
-            DeviceType: deviceTypeNumber,
-            DeviceId: finalDeviceId,
-            FocusAddress: formValues.FocusAddress || FocusAddress,
-            SystemName: formValues.SystemName,
-            IoTDataType: ioTDataTypeNumber,
-          },
-        });
-
        try {
          const { data } = await postTreeModelDeviceDataInfoPage({
            body: {
-              ...formValues,
              pageIndex: page.currentPage,
              pageSize: page.pageSize,
              // 优先使用表单中的值，如果没有则使用路由参数
@ -210,8 +208,8 @@ const gridOptions: VxeGridProps<any> = {
              DeviceId: finalDeviceId,
              FocusAddress: formValues.FocusAddress || FocusAddress,
              // 添加其他表单参数
-              SystemName: formValues.SystemName,
-              IoTDataType: ioTDataTypeNumber,
+              SystemName: formValues.SystemName || SystemName,
+              IoTDataType: ioTDataTypeValue,
            },
          });

@ -267,7 +265,12 @@ const gridOptions: VxeGridProps<any> = {
            };

            console.log('返回给表格的数据:', result);
-            console.log('总数:', result.totalCount, '当前页数据量:', result.items.length);
+            console.log(
+              '总数:',
+              result.totalCount,
+              '当前页数据量:',
+              result.items.length,
+            );
            console.log('分页信息:', {
              currentPage: page.currentPage,
              pageSize: page.pageSize,
@ -311,6 +314,40 @@ watch(
    }
  },
 );
+
+// 监听路由参数变化，当有路由参数时自动触发查询
+watch(
+  () => [DeviceType, DeviceId, FocusAddress, SystemName],
+  async (newValues, oldValues) => {
+    console.log('路由参数变化:', { newValues, oldValues });
+    // 如果有路由参数，等待设备信息加载完成后自动触发查询
+    if (newValues.some(val => val) && gridApi) {
+      // 等待设备信息加载完成
+      await fetchDeviceOptions();
+      // 延迟一下确保表单值已经设置
+      setTimeout(() => {
+        console.log('自动触发查询，路由参数:', { DeviceType, DeviceId, FocusAddress, SystemName });
+        gridApi.reload();
+      }, 100);
+    }
+  },
+  { immediate: true }
+);
+
+// 页面初始化时，如果有路由参数则自动触发查询
+onMounted(async () => {
+  console.log('页面挂载完成，检查路由参数:', { DeviceType, DeviceId, FocusAddress, SystemName });
+  // 如果有路由参数，等待设备信息加载完成后自动触发查询
+  if (DeviceType || DeviceId || FocusAddress || SystemName) {
+    // 等待设备信息加载完成
+    await fetchDeviceOptions();
+    // 延迟一下确保表单值已经设置
+    setTimeout(() => {
+      console.log('页面初始化时自动触发查询');
+      gridApi.reload();
+    }, 200);
+  }
+});
 </script>

 <template>
--- a/apps/web-antd/src/views/dataManger/deviceData/schema.ts
+++ b/apps/web-antd/src/views/dataManger/deviceData/schema.ts
@ -50,8 +50,8 @@ export const querySchema = computed(() => [
          TypeName: 'MeterTypeEnum',
        },
      },
-      labelField: 'secondValue',
-      valueField: 'value',
+      labelField: 'value',
+      valueField: 'key',
      optionsPropName: 'options',
      immediate: true,
      afterFetch: (res: any) => {
--- a/apps/web-antd/src/views/device/focus/index.vue
+++ b/apps/web-antd/src/views/device/focus/index.vue
@ -123,9 +123,9 @@ async function submit() {
  const formValues = await formApi.getValues();
  const fetchParams: any = isEdit
    ? {
-        id: editRow.value.id,
-        ...formValues,
-      }
+      id: editRow.value.id,
+      ...formValues,
+    }
    : formValues;

  try {
@ -171,11 +171,12 @@ function onDel(row: any) {
 const toStatusData = (row: Record<string, any>) => {
  // 或者使用编程式导航
  router.push({
-    path: '/iotdb/status',
+    path: '/iotdb/deviceData',
    query: {
      DeviceType: 10,
      DeviceId: row.focusId,
      FocusAddress: row.focusAddress,
+      SystemName: row.businessSystemName,
    },
  });
 };
@ -202,59 +203,46 @@ const openAddModal = async () => {
  <Page auto-content-height>
    <Grid>
      <template #toolbar-actions>
-        <TableAction
-          :actions="[
-            {
-              label: $t('common.add'),
-              type: 'primary',
-              icon: 'ant-design:plus-outlined',
-              onClick: openAddModal.bind(null),
-              auth: ['AbpIdentity.Users.Create'],
-            },
-          ]"
-        />
+        <TableAction :actions="[
+          {
+            label: $t('common.add'),
+            type: 'primary',
+            icon: 'ant-design:plus-outlined',
+            onClick: openAddModal.bind(null),
+            auth: ['AbpIdentity.Users.Create'],
+          },
+        ]" />
      </template>

      <template #isSelfDevelop="{ row }">
-        <component
-          :is="
-            h(Tag, { color: row.selfDevelop ? 'green' : 'red' }, () =>
-              row.selfDevelop ? $t('common.yes') : $t('common.no'),
-            )
-          "
-        />
+        <component :is="h(Tag, { color: row.selfDevelop ? 'green' : 'red' }, () =>
+          row.selfDevelop ? $t('common.yes') : $t('common.no'),
+        )
+          " />
      </template>
      <template #isStatus="{ row }">
-        <component
-          :is="
-            h(Tag, { color: row.status ? 'green' : 'red' }, () =>
-              row.status ? $t('common.yes') : $t('common.no'),
-            )
-          "
-        />
+        <component :is="h(Tag, { color: row.status ? 'green' : 'red' }, () =>
+          row.status ? $t('common.yes') : $t('common.no'),
+        )
+          " />
      </template>
      <template #isEnable="{ row }">
-        <component
-          :is="
-            h(Tag, { color: row.enabled ? 'green' : 'red' }, () =>
-              row.enabled ? $t('common.yes') : $t('common.no'),
-            )
-          "
-        />
+        <component :is="h(Tag, { color: row.enabled ? 'green' : 'red' }, () =>
+          row.enabled ? $t('common.yes') : $t('common.no'),
+        )
+          " />
      </template>

      <template #action="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: $t('common.edit'),
-              type: 'link',
-              size: 'small',
-              auth: ['AbpIdentity.Users.Update'],
-              onClick: onEdit.bind(null, row),
-            },
-          ]"
-          :drop-down-actions="[
+        <TableAction :actions="[
+          {
+            label: $t('common.edit'),
+            type: 'link',
+            size: 'small',
+            auth: ['AbpIdentity.Users.Update'],
+            onClick: onEdit.bind(null, row),
+          },
+        ]" :drop-down-actions="[
            {
              label: row.enabled ? $t('common.disabled') : $t('common.enabled'),
              icon: `ant-design:${row.enabled ? 'close' : 'check'}-outlined`,
@ -280,15 +268,11 @@ const openAddModal = async () => {
              auth: ['AbpIdentity.Users.Delete'],
              onClick: toStatusData.bind(null, row),
            },
-          ]"
-        />
+          ]" />
      </template>
    </Grid>

-    <UserModal
-      :title="editRow.id ? $t('common.edit') : $t('common.add')"
-      class="w-[800px]"
-    >
+    <UserModal :title="editRow.id ? $t('common.edit') : $t('common.add')" class="w-[800px]">
      <component :is="editRow.id ? EditForm : AddForm" />
    </UserModal>
  </Page>
--- a/apps/web-antd/src/views/device/meter/index.vue
+++ b/apps/web-antd/src/views/device/meter/index.vue
@ -127,14 +127,14 @@ async function submit() {
  const formValues = await formApi.getValues();
  const fetchParams: any = isEdit
    ? {
-        id: editRow.value.id,
-        ...formValues,
-        password: formValues.password || '000000',
-      }
+      id: editRow.value.id,
+      ...formValues,
+      password: formValues.password || '000000',
+    }
    : {
-        ...formValues,
-        password: formValues.password || '000000',
-      };
+      ...formValues,
+      password: formValues.password || '000000',
+    };

  try {
    userModalApi.setState({ loading: true, confirmLoading: true });
@ -178,11 +178,12 @@ function onDel(row: any) {
 const toStatusData = (row: Record<string, any>) => {
  // 或者使用编程式导航
  router.push({
-    path: '/iotdb/point',
+    path: '/iotdb/deviceData',
    query: {
      DeviceType: row.meterType,
      DeviceId: row.meterId,
      FocusAddress: row.focusAddress,
+      SystemName: row.businessSystemName,
    },
  });
 };
@ -212,24 +213,22 @@ const openAddModal = async () => {
  <Page auto-content-height>
    <Grid>
      <template #toolbar-actions>
-        <TableAction
-          :actions="[
-            {
-              label: $t('common.add'),
-              type: 'primary',
-              icon: 'ant-design:plus-outlined',
-              onClick: openAddModal.bind(null),
-              auth: ['AbpIdentity.Users.Create'],
-            },
-          ]"
-        />
+        <TableAction :actions="[
+          {
+            label: $t('common.add'),
+            type: 'primary',
+            icon: 'ant-design:plus-outlined',
+            onClick: openAddModal.bind(null),
+            auth: ['AbpIdentity.Users.Create'],
+          },
+        ]" />
      </template>

      <template #isMeterType="{ row }">
        {{ meterTypeOptions[row.meterType - 1]?.label }}
      </template>
      <template #isSingleRate="{ row }">
-        {{ rateOptions.find((item) => item.value === row.singleRate)?.label }}
+        {{rateOptions.find((item) => item.value === row.singleRate)?.label}}
      </template>
      <template #isArchiveStatus="{ row }">
        {{
@ -240,54 +239,40 @@ const openAddModal = async () => {
        {{ row.tripState ? $t('common.SwitchOff') : $t('common.Closing') }}
      </template>
      <template #isHaveValve="{ row }">
-        <component
-          :is="
-            h(Tag, { color: row.haveValve ? 'green' : 'red' }, () =>
-              row.haveValve ? $t('common.yes') : $t('common.no'),
-            )
-          "
-        />
+        <component :is="h(Tag, { color: row.haveValve ? 'green' : 'red' }, () =>
+          row.haveValve ? $t('common.yes') : $t('common.no'),
+        )
+          " />
      </template>
      <template #isSelfDevelop="{ row }">
-        <component
-          :is="
-            h(Tag, { color: row.selfDevelop ? 'green' : 'red' }, () =>
-              row.selfDevelop ? $t('common.yes') : $t('common.no'),
-            )
-          "
-        />
+        <component :is="h(Tag, { color: row.selfDevelop ? 'green' : 'red' }, () =>
+          row.selfDevelop ? $t('common.yes') : $t('common.no'),
+        )
+          " />
      </template>
      <template #isDynamicPassword="{ row }">
-        <component
-          :is="
-            h(Tag, { color: row.dynamicPassword ? 'green' : 'red' }, () =>
-              row.dynamicPassword ? $t('common.yes') : $t('common.no'),
-            )
-          "
-        />
+        <component :is="h(Tag, { color: row.dynamicPassword ? 'green' : 'red' }, () =>
+          row.dynamicPassword ? $t('common.yes') : $t('common.no'),
+        )
+          " />
      </template>
      <template #isEnable="{ row }">
-        <component
-          :is="
-            h(Tag, { color: row.enabled ? 'green' : 'red' }, () =>
-              row.enabled ? $t('common.yes') : $t('common.no'),
-            )
-          "
-        />
+        <component :is="h(Tag, { color: row.enabled ? 'green' : 'red' }, () =>
+          row.enabled ? $t('common.yes') : $t('common.no'),
+        )
+          " />
      </template>

      <template #action="{ row }">
-        <TableAction
-          :actions="[
-            {
-              label: $t('common.edit'),
-              type: 'link',
-              size: 'small',
-              auth: ['AbpIdentity.Users.Update'],
-              onClick: onEdit.bind(null, row),
-            },
-          ]"
-          :drop-down-actions="[
+        <TableAction :actions="[
+          {
+            label: $t('common.edit'),
+            type: 'link',
+            size: 'small',
+            auth: ['AbpIdentity.Users.Update'],
+            onClick: onEdit.bind(null, row),
+          },
+        ]" :drop-down-actions="[
            {
              label: $t('common.delete'),
              icon: 'ant-design:delete-outlined',
@ -312,14 +297,10 @@ const openAddModal = async () => {
              auth: ['AbpIdentity.Users.Delete'],
              onClick: archivesIssued.bind(null, row),
            },
-          ]"
-        />
+          ]" />
      </template>
    </Grid>
-    <UserModal
-      :title="editRow.id ? $t('common.edit') : $t('common.add')"
-      class="w-[800px]"
-    >
+    <UserModal :title="editRow.id ? $t('common.edit') : $t('common.add')" class="w-[800px]">
      <component :is="editRow.id ? EditForm : AddForm" />
    </UserModal>
  </Page>
Author	SHA1	Message	Date
ChenYi	a5781829e9	完善设备数据查询，优化get请求处理。	2025-07-14 11:43:20 +08:00
ChenYi	551323d5d1	完善设备数据跳转	2025-07-14 11:06:36 +08:00
ChenYi	6563b24045	完善设备数据查询	2025-07-14 10:32:02 +08:00
ChenYi	598f0d8399	可以正常发起请求	2025-07-14 09:09:44 +08:00
ChenYi	31c6a15aae	完善表单表头	2025-07-14 08:57:04 +08:00