设备数据优化

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>

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",

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",

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 {
-import { Loading } from '#/components/Loading';
+  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,11 +294,51 @@ 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; // 防止重复点击
@@ -364,44 +439,53 @@ const toolbarActions = computed(() => [
       </template>
 
       <template #action="{ row }">
-        <TableAction :actions="[
+        <div style="display: flex; gap: 8px; align-items: center">
-          {
+          <Button size="small" type="link" @click="onEdit.bind(null, row)()">
-            label: $t('common.edit'),
+            {{ $t('common.edit') }}
-            type: 'link',
+          </Button>
-            size: 'small',
+          <Button size="small" type="link" @click="toDeviceInfoData.bind(null, row)()">
-            auth: ['AbpIdentity.Users.Update'],
+            {{ $t('abp.deviceInfos.viewData') }}
-            onClick: onEdit.bind(null, row),
+          </Button>
-          },
+          <Button size="small" type="link" @click="openCommandModal.bind(null, row)()">
-          {
+            {{ $t('abp.IoTDBBase.Command') }}
-            label: $t('abp.deviceInfos.viewData'),
+          </Button>
-            type: 'link',
+          <Popover trigger="hover" placement="bottomRight" :overlay-style="{ minWidth: '120px' }">
-            size: 'small',
+            <template #content>
-            auth: ['AbpIdentity.Users.Update'],
+              <div style="display: flex; flex-direction: column; gap: 4px">
-            onClick: toDeviceInfoData.bind(null, row),
+                <Button type="text" size="small" @click="toDeviceLog.bind(null, row)()"
-          },
+                  style=" padding: 4px 8px;text-align: left">
-          {
+                  {{ $t('abp.IoTDBBase.PlatformLog') }}
-            label: $t('abp.log.title'),
+                </Button>
-            type: 'link',
+                <Button type="text" size="small" @click="toTelemetryLog.bind(null, row)()"
-            size: 'small',
+                  style=" padding: 4px 8px;text-align: left">
-            auth: ['AbpIdentity.Users.Update'],
+                  {{ $t('abp.IoTDBBase.TelemetryLog') }}
-            onClick: toDeviceLog.bind(null, row),
+                </Button>
-          },
+                <Button type="text" size="small" @click="
-        ]" :drop-down-actions="[
+                  () => {
-            {
+                    Modal.confirm({
-              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),
+                      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>

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')}`,
+    }),
+  },
+]);

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) => {
-        const { data } = await postTableModelPacketInfoPage({
+        // 总是从表单API获取最新的表单值，确保分页时参数完整
-          body: {
+        const currentFormValues = gridApi?.formApi ? await gridApi.formApi.getValues() : {};
-            ...formValues,
+
+        // 如果表单中没有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: 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'),

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',