设备数据优化

2025-08-01 17:36:42 +08:00 · 2025-08-01 17:36:42 +08:00 · ed095728a4
commit ed095728a4
parent b501552616
7 changed files with 396 additions and 49 deletions
--- a/apps/web-antd/src/components/table-action/table-action.vue
+++ b/apps/web-antd/src/components/table-action/table-action.vue
@ -154,7 +154,7 @@ const handleMenuClick = (e: any) => {
      </template>
    </Space>

-    <Dropdown v-if="getDropdownList.length > 0" :trigger="['hover']">
+    <Dropdown v-if="getDropdownList.length > 0" :trigger="['click']">
      <slot name="more">
        <Button size="small" type="link">
          <template #icon>
--- a/apps/web-antd/src/locales/langs/en-US/abp.json
+++ b/apps/web-antd/src/locales/langs/en-US/abp.json
@ -223,7 +223,10 @@
    "FormattedTimestamps": "Formatted Timestamps",
    "DevicePath": "DevicePath",
    "DeviceAddress": "Device Address",
-    "CacheRefresh": "Cache Refresh"
+    "CacheRefresh": "Cache Refresh",
+    "TelemetryLog": "Telemetry Log",
+    "PlatformLog": "Platform Log",
+    "Command": "Command"
  },
  "CTWingLog": {
    "PlatformTenantId": "PlatformTenantId",
--- a/apps/web-antd/src/locales/langs/zh-CN/abp.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/abp.json
@ -223,7 +223,10 @@
    "FormattedTimestamps": "本地时间",
    "DevicePath": "设备路径",
    "DeviceAddress": "设备地址",
-    "CacheRefresh": "缓存刷新"
+    "CacheRefresh": "缓存刷新",
+    "TelemetryLog": "遥测日志",
+    "PlatformLog": "平台日志",
+    "Command": "指令"
  },
  "CTWingLog": {
    "PlatformTenantId": "物联网平台租户Id",
--- a/apps/web-antd/src/views/devicemanagement/deviceinfo/index.vue
+++ b/apps/web-antd/src/views/devicemanagement/deviceinfo/index.vue
@ -7,8 +7,13 @@ import { useRouter } from 'vue-router';

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

-import { message as Message, Modal, Tag } from 'ant-design-vue';
-import { Loading } from '#/components/Loading';
+import {
+  Button,
+  message as Message,
+  Modal,
+  Popover,
+  Tag,
+} from 'ant-design-vue';

 import { useVbenForm } from '#/adapter/form';
 import { useVbenVxeGrid } from '#/adapter/vxe-table';
@ -18,11 +23,14 @@ import {
  postDeviceInfoCacheDeviceDataToRedis,
  postDeviceInfoPage,
 } from '#/api-client';
+import { Icon } from '#/components/icon';
+import { Loading } from '#/components/Loading';
 import { TableAction } from '#/components/table-action';
 import { $t } from '#/locales';

 import {
  addDeviceFormSchema,
+  commandFormSchema,
  editDeviceFormSchemaEdit,
  querySchema,
  tableSchema,
@ -72,6 +80,7 @@ const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
 const editRow: Record<string, any> = ref({});
 const cacheRefreshLoading = ref(false);
 const pageLoading = ref(false);
+const commandRow: Record<string, any> = ref({});
 const [UserModal, userModalApi] = useVbenModal({
  draggable: true,
  onConfirm: submit,
@ -81,6 +90,15 @@ const [UserModal, userModalApi] = useVbenModal({
  },
 });

+const [CommandModal, commandModalApi] = useVbenModal({
+  draggable: true,
+  onConfirm: submitCommand,
+  onBeforeClose: () => {
+    commandRow.value = {};
+    return true;
+  },
+});
+
 const [AddForm, addFormApi] = useVbenForm({
  // 默认展开
  collapsed: false,
@ -116,6 +134,22 @@ const [EditForm, editFormApi] = useVbenForm({
  wrapperClass: 'grid-cols-2',
 });

+const [CommandForm, commandFormApi] = useVbenForm({
+  // 默认展开
+  collapsed: false,
+  // 所有表单项共用，可单独在表单内覆盖
+  commonConfig: {
+    labelWidth: 110,
+    componentProps: {
+      class: 'w-full',
+    },
+  },
+  layout: 'horizontal',
+  schema: commandFormSchema.value,
+  showCollapseButton: false,
+  showDefaultActions: false,
+});
+
 // 新增和编辑提交的逻辑
 async function submit() {
  const isEdit = !!editRow.value.id;
@ -235,6 +269,7 @@ const toDeviceInfoData = (row: Record<string, any>) => {
    path: '/iotdbdatamanagement/deviceData',
    query: {
      DeviceAddress: row.deviceAddress,
+      IoTDataType: 'Data',
    },
  });
 };
@ -259,15 +294,55 @@ const toDeviceLog = (row: Record<string, any>) => {
    });
  }
 };
+
+const toTelemetryLog = (row: Record<string, any>) => {
+  // 跳转到遥测日志页面
+  router.push({
+    path: '/iotdbdatamanagement/telemetryLog',
+    query: {
+      DeviceAddress: row.deviceAddress,
+    },
+  });
+};
 const openAddModal = async () => {
  editRow.value = {};
  userModalApi.open();
 };

+const openCommandModal = (row: Record<string, any>) => {
+  commandRow.value = row;
+  commandModalApi.open();
+};
+
+// 指令提交逻辑
+async function submitCommand() {
+  const { valid } = await commandFormApi.validate();
+  if (!valid) return;
+
+  const formValues = await commandFormApi.getValues();
+
+  try {
+    commandModalApi.setState({ loading: true, confirmLoading: true });
+
+    // TODO: 调用指令接口
+    console.log('指令内容:', formValues.command);
+    console.log('设备信息:', commandRow.value);
+
+    Message.success($t('common.operationSuccess'));
+    commandModalApi.close();
+    commandRow.value = {};
+  } catch (error) {
+    console.error('指令发送失败:', error);
+    Message.error($t('common.operationFailed'));
+  } finally {
+    commandModalApi.setState({ loading: false, confirmLoading: false });
+  }
+}
+
 // 缓存刷新按钮处理函数
 const handleCacheRefresh = async () => {
  if (cacheRefreshLoading.value) return; // 防止重复点击
-  
+
  cacheRefreshLoading.value = true;
  pageLoading.value = true;
  try {
@ -364,44 +439,53 @@ const toolbarActions = computed(() => [
      </template>

      <template #action="{ row }">
-        <TableAction :actions="[
-          {
-            label: $t('common.edit'),
-            type: 'link',
-            size: 'small',
-            auth: ['AbpIdentity.Users.Update'],
-            onClick: onEdit.bind(null, row),
-          },
-          {
-            label: $t('abp.deviceInfos.viewData'),
-            type: 'link',
-            size: 'small',
-            auth: ['AbpIdentity.Users.Update'],
-            onClick: toDeviceInfoData.bind(null, row),
-          },
-          {
-            label: $t('abp.log.title'),
-            type: 'link',
-            size: 'small',
-            auth: ['AbpIdentity.Users.Update'],
-            onClick: toDeviceLog.bind(null, row),
-          },
-        ]" :drop-down-actions="[
-            {
-              label: $t('common.delete'),
-              icon: 'ant-design:delete-outlined',
-              type: 'primary',
-              auth: ['AbpIdentity.Users.Delete'],
-              popConfirm: {
-                title: $t('common.askConfirmDelete'),
-                confirm: onDel.bind(null, row),
-              },
-            },
-          ]" />
+        <div style="display: flex; gap: 8px; align-items: center">
+          <Button size="small" type="link" @click="onEdit.bind(null, row)()">
+            {{ $t('common.edit') }}
+          </Button>
+          <Button size="small" type="link" @click="toDeviceInfoData.bind(null, row)()">
+            {{ $t('abp.deviceInfos.viewData') }}
+          </Button>
+          <Button size="small" type="link" @click="openCommandModal.bind(null, row)()">
+            {{ $t('abp.IoTDBBase.Command') }}
+          </Button>
+          <Popover trigger="hover" placement="bottomRight" :overlay-style="{ minWidth: '120px' }">
+            <template #content>
+              <div style="display: flex; flex-direction: column; gap: 4px">
+                <Button type="text" size="small" @click="toDeviceLog.bind(null, row)()"
+                  style=" padding: 4px 8px;text-align: left">
+                  {{ $t('abp.IoTDBBase.PlatformLog') }}
+                </Button>
+                <Button type="text" size="small" @click="toTelemetryLog.bind(null, row)()"
+                  style=" padding: 4px 8px;text-align: left">
+                  {{ $t('abp.IoTDBBase.TelemetryLog') }}
+                </Button>
+                <Button type="text" size="small" @click="
+                  () => {
+                    Modal.confirm({
+                      title: $t('common.askConfirmDelete'),
+                      onOk: () => onDel(row),
+                    });
+                  }
+                " style=" padding: 4px 8px; color: #ff4d4f;text-align: left">
+                  {{ $t('common.delete') }}
+                </Button>
+              </div>
+            </template>
+            <Button size="small" type="link">
+              <template #icon>
+                <Icon icon="ant-design:more-outlined" />
+              </template>
+            </Button>
+          </Popover>
+        </div>
      </template>
    </Grid>
    <UserModal :title="editRow.id ? $t('common.edit') : $t('common.add')" class="w-[800px]">
      <component :is="editRow.id ? EditForm : AddForm" />
    </UserModal>
+    <CommandModal :title="$t('abp.IoTDBBase.Command')" class="w-[600px]">
+      <CommandForm />
+    </CommandModal>
  </Page>
 </template>
--- a/apps/web-antd/src/views/devicemanagement/deviceinfo/schema.ts
+++ b/apps/web-antd/src/views/devicemanagement/deviceinfo/schema.ts
@ -83,7 +83,7 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
    title: $t('common.action'),
    field: 'action',
    fixed: 'right',
-    width: '165',
+    width: '180',
    slots: { default: 'action' },
  },
 ]);
@ -648,3 +648,20 @@ export const editDeviceFormSchemaEdit: any = computed(() => [
    disabled: true,
  },
 ]);
+
+export const commandFormSchema: any = computed(() => [
+  {
+    component: 'Textarea',
+    fieldName: 'command',
+    label: $t('abp.IoTDBBase.Command'),
+    componentProps: {
+      rows: 8,
+      placeholder: $t('common.pleaseInput') + $t('abp.IoTDBBase.Command'),
+      showCount: true,
+      maxLength: 1000,
+    },
+    rules: z.string().min(1, {
+      message: `${$t('common.pleaseInput')}${$t('abp.IoTDBBase.Command')}`,
+    }),
+  },
+]);
--- a/apps/web-antd/src/views/iotdbdatamanagement/telemetryLog/index.vue
+++ b/apps/web-antd/src/views/iotdbdatamanagement/telemetryLog/index.vue
@ -2,24 +2,149 @@
 import type { VbenFormProps } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';

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

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

 import { Tag } from 'ant-design-vue';

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

+import DeviceSelect from '../deviceData/DeviceSelect.vue';
+
 import { querySchema, tableSchema } from './schema';

 defineOptions({
  name: 'CollectionLog',
 });

+const route = useRoute();
+const { DeviceAddress } = route.query;
+
+// 是否正在初始化，用于防止重复查询
+const isInitializing = ref(false);
+
+// 添加设备选择器引用
+const deviceSelectRef = ref();
+
+// 添加选中的设备信息
+const selectedDeviceInfo = ref<any>(null);
+
+// 存储设备信息选项的完整数据
+const deviceOptions = ref<any[]>();
+
+// 获取设备信息的完整数据
+const fetchDeviceOptions = async () => {
+  try {
+    const { data } = await postDeviceInfoPage({
+      body: {
+        pageIndex: 1,
+        pageSize: 1000,
+      },
+    });
+
+    if (data?.items) {
+      deviceOptions.value = data.items;
+    }
+  } catch (error) {
+    console.error('获取设备信息失败:', error);
+  }
+};
+
+// 根据设备地址获取设备信息对象
+const getDeviceInfoByAddress = (deviceAddress: string) => {
+  if (!deviceAddress || !deviceOptions.value || deviceOptions.value.length === 0) {
+    return null;
+  }
+
+  const device = deviceOptions.value.find((device) => device.deviceAddress === deviceAddress);
+  return device;
+};
+
 const formOptions: VbenFormProps = {
  schema: querySchema.value,
+  initialValues: {
+    DeviceAddress: DeviceAddress as string,
+  },
+  // 禁用表单值变化时自动提交，使用自定义处理函数
+  submitOnChange: false,
+  // 添加表单值变化的处理函数
+  handleValuesChange: async (values, changedFields) => {
+    // 如果正在初始化，不触发查询
+    if (isInitializing.value) {
+      return;
+    }
+
+    // 当 DeviceAddress 发生变化时，更新 selectedDeviceInfo
+    if (changedFields.includes('DeviceAddress')) {
+      const deviceAddress = values.DeviceAddress;
+
+      if (deviceAddress) {
+        // 先尝试从 deviceOptions 中查找（备用方案）
+        let device =
+          deviceOptions.value.length > 0
+            ? deviceOptions.value.find((d) => d.deviceAddress === deviceAddress)
+            : null;
+
+        // 如果没找到，尝试从 DeviceSelect 组件中获取
+        if (!device && gridApi?.formApi) {
+          try {
+            // 获取 DeviceSelect 组件的实例
+            const deviceSelectRef =
+              gridApi.formApi.getFieldComponentRef('DeviceAddress');
+            if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
+              device = deviceSelectRef.getSelectedDevice();
+            }
+          } catch {
+            // 静默处理错误
+          }
+        }
+
+        if (device) {
+          selectedDeviceInfo.value = device;
+        } else {
+          // 如果还是没找到，尝试延迟获取（组件可能还没完全更新）
+          setTimeout(() => {
+            try {
+              const deviceSelectRef =
+                gridApi.formApi.getFieldComponentRef('DeviceAddress');
+              if (deviceSelectRef && deviceSelectRef.getSelectedDevice) {
+                const delayedDevice = deviceSelectRef.getSelectedDevice();
+                if (delayedDevice) {
+                  selectedDeviceInfo.value = delayedDevice;
+                }
+              }
+            } catch {
+              // 静默处理错误
+            }
+          }, 100);
+        }
+      } else {
+        selectedDeviceInfo.value = null;
+      }
+    }
+
+    // 当任何相关字段发生变化时，刷新表格数据
+    const relevantFields = new Set([
+      'DeviceAddress',
+      'focusAddress',
+      'meterAddress',
+    ]);
+    const hasRelevantChange = changedFields.some((field) =>
+      relevantFields.has(field),
+    );
+
+    if (hasRelevantChange) {
+      // 使用 setTimeout 确保表单值已经完全更新
+      setTimeout(async () => {
+        const latestValues = await gridApi.formApi.getValues();
+        gridApi.reload(latestValues);
+      }, 0);
+    }
+  },
 };
 const gridOptions: VxeGridProps<any> = {
  checkboxConfig: {
@ -39,12 +164,39 @@ const gridOptions: VxeGridProps<any> = {
  proxyConfig: {
    ajax: {
      query: async ({ page }, formValues) => {
+        // 总是从表单API获取最新的表单值，确保分页时参数完整
+        const currentFormValues = gridApi?.formApi ? await gridApi.formApi.getValues() : {};
+
+        // 如果表单中没有DeviceAddress，但有路由参数，使用路由参数
+        if (!currentFormValues.DeviceAddress && DeviceAddress) {
+          currentFormValues.DeviceAddress = DeviceAddress as string;
+        }
+
+        // 获取选中的设备信息
+        let deviceAddress = currentFormValues.DeviceAddress || '';
+
+        // 优先使用选中的设备信息
+        const deviceInfo =
+          selectedDeviceInfo.value ||
+          (deviceAddress && deviceOptions.value.length > 0
+            ? getDeviceInfoByAddress(deviceAddress)
+            : null);
+
+        if (deviceInfo) {
+          deviceAddress = deviceInfo.deviceAddress || deviceAddress;
+        }
+
+        // 构建查询参数
+        const queryParams = {
+          pageIndex: page.currentPage,
+          pageSize: page.pageSize,
+          DeviceAddress: deviceAddress,
+          focusAddress: currentFormValues.focusAddress || '',
+          meterAddress: currentFormValues.meterAddress || '',
+        };
+
        const { data } = await postTableModelPacketInfoPage({
-          body: {
-            ...formValues,
-            pageIndex: page.currentPage,
-            pageSize: page.pageSize,
-          },
+          body: queryParams,
        });
        return data;
      },
@ -52,12 +204,91 @@ const gridOptions: VxeGridProps<any> = {
  },
 };

-const [Grid] = useVbenVxeGrid({ formOptions, gridOptions });
+const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });
+
+// 初始化函数
+const initializeGrid = async () => {
+  try {
+    // 设置初始化标志
+    isInitializing.value = true;
+
+    // 获取设备信息数据
+    await fetchDeviceOptions();
+
+    // 如果有路由参数，自动触发查询
+    if (DeviceAddress) {
+      // 延迟一下确保表格已完全初始化
+      setTimeout(async () => {
+        if (gridApi && gridApi.formApi) {
+          // 确保表单值正确设置
+          const currentValues = await gridApi.formApi.getValues();
+          if (!currentValues.DeviceAddress && DeviceAddress) {
+            await gridApi.formApi.setValues({
+              ...currentValues,
+              DeviceAddress: DeviceAddress as string,
+            });
+          }
+          // 延迟清除初始化标志，确保只触发一次查询
+          setTimeout(() => {
+            isInitializing.value = false;
+            gridApi.reload();
+          }, 200);
+        } else {
+          isInitializing.value = false;
+        }
+      }, 300);
+    } else {
+      // 如果没有路由参数，直接清除初始化标志
+      isInitializing.value = false;
+    }
+  } catch (error) {
+    console.error('初始化表格失败:', error);
+    isInitializing.value = false;
+  }
+};
+
+// 监听分页器状态变化
+watch(
+  () => gridApi?.pagerApi?.pageSize,
+  async (newSize, oldSize) => {
+    if (newSize !== oldSize && oldSize && !isInitializing.value) {
+      // 重置到第一页
+      gridApi.pagerApi.currentPage = 1;
+      // 获取最新表单值并触发数据重新加载
+      const latestValues = await gridApi.formApi.getValues();
+      gridApi.reload(latestValues);
+    }
+  },
+);
+
+// 监听当前页变化
+watch(
+  () => gridApi?.pagerApi?.currentPage,
+  async (newPage, oldPage) => {
+    if (newPage !== oldPage && oldPage && !isInitializing.value) {
+      // 获取最新表单值并触发数据重新加载
+      const latestValues = await gridApi.formApi.getValues();
+      gridApi.reload(latestValues);
+    }
+  },
+);
+
+// 页面初始化时，延迟初始化表格
+onMounted(async () => {
+  // 延迟初始化，确保VXE表格组件已完全挂载
+  setTimeout(async () => {
+    await initializeGrid();
+  }, 100);
+});
 </script>

 <template>
  <Page auto-content-height>
    <Grid>
+      <template #DeviceAddress="{ model, field }">
+        <DeviceSelect ref="deviceSelectRef" v-model:value="model[field]"
+          :placeholder="$t('common.pleaseSelect') + $t('abp.log.deviceInfo')" allow-clear />
+      </template>
      <template #ismanualOrNot="{ row }">
        <component :is="h(Tag, { color: row.manualOrNot ? 'green' : 'red' }, () =>
          row.manualOrNot ? $t('common.yes') : $t('common.no'),
--- a/apps/web-antd/src/views/iotdbdatamanagement/telemetryLog/schema.ts
+++ b/apps/web-antd/src/views/iotdbdatamanagement/telemetryLog/schema.ts
@ -5,6 +5,15 @@ import { computed } from 'vue';
 import { $t } from '#/locales';

 export const querySchema = computed(() => [
+  {
+    component: 'DeviceSelect',
+    fieldName: 'DeviceAddress',
+    label: $t('abp.log.deviceInfo'),
+    componentProps: {
+      placeholder: $t('common.pleaseSelect') + $t('abp.log.deviceInfo'),
+      allowClear: true,
+    },
+  },
  {
    component: 'Input',
    fieldName: 'focusAddress',