设备界面优化

2025-10-21 17:21:34 +08:00 · 2025-10-21 17:21:34 +08:00 · 2b19953855
commit 2b19953855
parent 11c2e02277
8 changed files with 275 additions and 22 deletions
--- a/apps/web-antd/src/locales/langs/en-US/abp.json
+++ b/apps/web-antd/src/locales/langs/en-US/abp.json
@ -214,7 +214,9 @@
    "IsPlatformPushSuccess": "IsPlatformPushSuccess",
    "DeviceOnlineStatus": "DeviceOnlineStatus",
    "LastOnlineTime": "LastOnlineTime",
-    "LastOfflineTime": "LastOfflineTime"
+    "LastOfflineTime": "LastOfflineTime",
+    "deviceInfoManage": "DeviceInfoManage",
+    "thingModelInfoManage": "ThingModelInfoManage"
  },
  "IoTDBBase": {
    "IoTDataType": "IoTDataType",
--- a/apps/web-antd/src/locales/langs/zh-CN/abp.json
+++ b/apps/web-antd/src/locales/langs/zh-CN/abp.json
@ -207,7 +207,9 @@
    "IsPlatformPushSuccess": "是否推送成功",
    "DeviceOnlineStatus": "在线状态",
    "LastOnlineTime": "最后在线时间",
-    "LastOfflineTime": "最后离线时间"
+    "LastOfflineTime": "最后离线时间",
+    "deviceInfoManage": "设备管理",
+    "thingModelInfoManage": "物模型管理"
  },
  "IoTDBBase": {
    "IoTDataType": "数据类型",
--- a/apps/web-antd/src/views/devicemanagement/deviceinfo/index.vue
+++ b/apps/web-antd/src/views/devicemanagement/deviceinfo/index.vue
@ -2,8 +2,8 @@
 import type { VbenFormProps } from '#/adapter/form';
 import type { VxeGridProps } from '#/adapter/vxe-table';

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

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

@ -45,6 +45,7 @@ defineOptions({
 });

 const router = useRouter();
+const route = useRoute();
 const formOptions: VbenFormProps = {
  schema: querySchema.value,
 };
@ -82,6 +83,78 @@ const gridOptions: VxeGridProps<any> = {
 const [Grid, gridApi] = useVbenVxeGrid({ formOptions, gridOptions });

 const editRow: Record<string, any> = ref({});
+
+// 监听路由参数变化，自动设置筛选条件
+watch(
+  () => route.query,
+  async (newQuery) => {
+    if (newQuery.ioTPlatform || newQuery.ioTPlatformDeviceOpenInfo) {
+      // 延迟执行，确保组件完全初始化
+      setTimeout(async () => {
+        try {
+          // 设置表单筛选条件
+          const filterValues: any = {};
+          
+          if (newQuery.ioTPlatform) {
+            filterValues.ioTPlatform = newQuery.ioTPlatform;
+          }
+          
+          if (newQuery.ioTPlatformDeviceOpenInfo) {
+            // 根据平台类型设置对应的产品ID字段
+            if (newQuery.ioTPlatform === '2' || newQuery.ioTPlatform === 2) {
+              filterValues.oneNETProductId = newQuery.ioTPlatformDeviceOpenInfo;
+            } else if (newQuery.ioTPlatform === '1' || newQuery.ioTPlatform === 1) {
+              filterValues.ctWingProductId = newQuery.ioTPlatformDeviceOpenInfo;
+            }
+            // 同时设置通用字段用于查询
+            filterValues.ioTPlatformDeviceOpenInfo = newQuery.ioTPlatformDeviceOpenInfo;
+          }
+          
+          // 设置表单值并重新加载数据
+          if (gridApi?.formApi) {
+            await gridApi.formApi.setValues(filterValues);
+            // 等待表单值更新完成后再重新加载数据
+            await nextTick();
+            gridApi.reload();
+          }
+        } catch (error) {
+          console.error('设置表单筛选条件时出错:', error);
+        }
+      }, 200); // 增加延迟时间，确保ApiSelect组件完全初始化
+    }
+  },
+  { immediate: true }
+);
+
+// 监听产品选择器变化，自动设置ioTPlatformDeviceOpenInfo
+watch(
+  () => gridApi?.formApi?.getValues,
+  (formValues) => {
+    if (formValues) {
+      const { oneNETProductId, ctWingProductId } = formValues;
+      
+      // 如果选择了OneNET产品，设置ioTPlatformDeviceOpenInfo
+      if (oneNETProductId) {
+        console.log('检测到OneNET产品选择变化:', oneNETProductId);
+        gridApi?.formApi?.setFieldValue('ioTPlatformDeviceOpenInfo', oneNETProductId);
+        console.log('已设置ioTPlatformDeviceOpenInfo为:', oneNETProductId);
+      }
+      // 如果选择了CTWing产品，设置ioTPlatformDeviceOpenInfo
+      else if (ctWingProductId) {
+        console.log('检测到CTWing产品选择变化:', ctWingProductId);
+        gridApi?.formApi?.setFieldValue('ioTPlatformDeviceOpenInfo', ctWingProductId);
+        console.log('已设置ioTPlatformDeviceOpenInfo为:', ctWingProductId);
+      }
+      // 如果都没有选择，清空ioTPlatformDeviceOpenInfo
+      else if (!oneNETProductId && !ctWingProductId) {
+        console.log('清空产品选择');
+        gridApi?.formApi?.setFieldValue('ioTPlatformDeviceOpenInfo', '');
+      }
+    }
+  },
+  { deep: true }
+);
+
 const cacheRefreshLoading = ref(false);
 const pageLoading = ref(false);
 const loadingTip = ref('缓存刷新中...');
--- a/apps/web-antd/src/views/devicemanagement/deviceinfo/schema.ts
+++ b/apps/web-antd/src/views/devicemanagement/deviceinfo/schema.ts
@ -21,6 +21,141 @@ export const querySchema = computed(() => [
    fieldName: 'deviceAddress',
    label: $t('abp.deviceInfos.deviceAddress'),
  },
+  {
+    component: 'ApiSelect',
+    fieldName: 'ioTPlatform',
+    label: $t('abp.deviceInfos.ioTPlatform'),
+    componentProps: {
+      api: getCommonGetSelectList,
+      params: {
+        query: {
+          typeName: 'IoTPlatformTypeEnum',
+        },
+      },
+      labelField: 'value',
+      valueField: 'key',
+      optionsPropName: 'options',
+      immediate: true,
+      allowClear: true,
+      placeholder: `${$t('common.pleaseSelect')}${$t('abp.deviceInfos.ioTPlatform')}`,
+      afterFetch: (res: any) => {
+        console.log('产品选择器API调用 - 平台类型:',res);
+
+        // 确保返回的是数组格式
+        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: 'oneNETProductId',
+    label: $t('common.BelongingProductName'),
+    dependencies: {
+      show(values: any) {
+        const shouldShow = values.ioTPlatform === 2 || values.ioTPlatform === '2';
+        console.log('OneNET产品选择器显示检查 - 平台类型:', values.ioTPlatform, '是否显示:', shouldShow);
+        return shouldShow; // OneNET平台
+      },
+      triggerFields: ['ioTPlatform'],
+    },
+    componentProps: {
+      api: postOneNetProductListAsync,
+      params: (formValues: any) => ({
+        body: {
+          pageIndex: 1,
+          pageSize: 1000,
+        },
+      }),
+      labelField: 'productName',
+      valueField: 'ioTPlatformProductId',
+      immediate: true,
+      afterFetch: (res: any) => {
+        console.log('OneNET产品选择器afterFetch调用 - 响应:', res);
+        // 如果是 Axios 响应对象，提取 data
+        if (res && res.data) {
+          const data = res.data;
+
+          // 确保返回的是数组格式
+          let items = [];
+          if (Array.isArray(data)) {
+            items = data;
+          } else if (data && Array.isArray(data.items)) {
+            items = data.items;
+          } else if (data && Array.isArray(data.data)) {
+            items = data.data;
+          }
+
+          console.log('OneNET产品列表处理后的数据:', items);
+          return items;
+        }
+
+        // 如果都不是，返回空数组
+        return [];
+      },
+      placeholder: `${$t('common.pleaseSelect')}${$t('common.BelongingProductName')}`,
+    },
+  },
+  {
+    component: 'ApiSelect',
+    fieldName: 'ctWingProductId',
+    label: $t('common.BelongingProductName'),
+    dependencies: {
+      show(values: any) {
+        const shouldShow = values.ioTPlatform === 1 || values.ioTPlatform === '1';
+        console.log('CTWing产品选择器显示检查 - 平台类型:', values.ioTPlatform, '是否显示:', shouldShow);
+        return shouldShow; // CTWing平台
+      },
+      triggerFields: ['ioTPlatform'],
+    },
+    componentProps: {
+      api: postCtWingProductListAsync,
+      params: (formValues: any) => ({
+        body: {
+          pageIndex: 1,
+          pageSize: 1000,
+        },
+      }),
+      labelField: 'productName',
+      valueField: 'ioTPlatformProductId',
+      immediate: true,
+      afterFetch: (res: any) => {
+        console.log('CTWing产品选择器afterFetch调用 - 响应:', res);
+        // 如果是 Axios 响应对象，提取 data
+        if (res && res.data) {
+          const data = res.data;
+
+          // 确保返回的是数组格式
+          let items = [];
+          if (Array.isArray(data)) {
+            items = data;
+          } else if (data && Array.isArray(data.items)) {
+            items = data.items;
+          } else if (data && Array.isArray(data.data)) {
+            items = data.data;
+          }
+
+          console.log('CTWing产品列表处理后的数据:', items);
+          return items;
+        }
+
+        // 如果都不是，返回空数组
+        return [];
+      },
+      placeholder: `${$t('common.pleaseSelect')}${$t('common.BelongingProductName')}`,
+    },
+  },
 ]);

 export const tableSchema: any = computed((): VxeGridProps['columns'] => [
--- a/apps/web-antd/src/views/devicemanagement/thingmodelinfo/index.vue
+++ b/apps/web-antd/src/views/devicemanagement/thingmodelinfo/index.vue
--- a/apps/web-antd/src/views/devicemanagement/thingmodelinfo/schema.ts
+++ b/apps/web-antd/src/views/devicemanagement/thingmodelinfo/schema.ts
--- a/apps/web-antd/src/views/onenetmanagement/privateProduct/index.vue
+++ b/apps/web-antd/src/views/onenetmanagement/privateProduct/index.vue
@ -173,7 +173,8 @@ async function submit() {
        if (fileInfo && fileInfo.id) {
          formValues.deviceThingModelFileId = fileInfo.id;
          // 设置文件名
-          formValues.deviceThingModelFileName = fileInfo.fileName || selectedFile.name;
+          formValues.deviceThingModelFileName =
+            fileInfo.fileName || selectedFile.name;
        } else {
          Message.error('文件上传成功但未获取到文件ID');
          userModalApi.setState({ loading: false, confirmLoading: false });
@ -305,6 +306,34 @@ async function onStatusChange(record: any) {
    Message.error(record.isEnabled ? '禁用失败' : '启用失败');
  }
 }
+
+// 设备管理函数
+function onDeviceManagement(record: any) {
+  console.log('设备管理按钮被点击', record);
+  // 跳转到设备管理页面，传递平台类型和平台产品ID作为参数
+  router.push({
+    path: '/devicemanagement/deviceinfo',
+    query: {
+      ioTPlatform: '2', // OneNET平台类型为2
+      ioTPlatformDeviceOpenInfo: record.ioTPlatformProductId, // 平台产品ID
+      productName: record.productName,
+    },
+  });
+}
+
+// 物模型管理函数
+function onThingModelManagement(record: any) {
+  console.log('物模型管理按钮被点击', record);
+  // 跳转到物模型管理页面，传递产品ID作为参数
+  router.push({
+    path: '/devicemanagement/thingmodelinfo',
+    query: {
+      ioTPlatform: '2', // OneNET平台类型为2
+      ioTPlatformDeviceOpenInfo: record.ioTPlatformProductId, // 平台产品ID
+      productName: record.productName,
+    },
+  });
+}
 </script>

 <template>
@ -347,28 +376,40 @@ async function onStatusChange(record: any) {
            onClick: onEdit.bind(null, row),
          },
          {
-            label: row.isEnabled ? '禁用' : '启用',
+            label: $t('abp.deviceInfos.deviceInfoManage'),
            type: 'link',
+            size: 'small',
+            onClick: onDeviceManagement.bind(null, row),
+          },
+          {
+            label: $t('abp.deviceInfos.thingModelInfoManage'),
+            type: 'link',
+            size: 'small',
+            onClick: onThingModelManagement.bind(null, row),
+          }
+        ]" :drop-down-actions="[
+          {
+            label: row.isEnabled ? $t('common.disabled') : $t('common.enabled'),
+            icon: 'ant-design:edit-filled',
+            type: 'primary',
            danger: row.isEnabled,
            size: 'small',
            auth: ['AbpIdentity.Users.Update'],
            popConfirm: {
-              title: `确定要${row.isEnabled ? '禁用' : '启用'}该产品吗？`,
+              title: `确定要${row.isEnabled ? $t('common.disabled') : $t('common.enabled')}该产品吗？`,
              confirm: onStatusChange.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),
-              },
+          {
+            label: $t('common.delete'),
+            icon: 'ant-design:delete-outlined',
+            type: 'primary',
+            popConfirm: {
+              title: $t('common.askConfirmDelete'),
+              confirm: onDel.bind(null, row),
            },
-          ]" />
+          },
+        ]" />
      </template>
    </Grid>
    <UserModal :title="editRow.id ? $t('common.edit') : $t('common.add')" class="w-[800px]">
--- a/apps/web-antd/src/views/onenetmanagement/privateProduct/schema.ts
+++ b/apps/web-antd/src/views/onenetmanagement/privateProduct/schema.ts
@ -59,7 +59,7 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
    field: 'productCreateTime',
    title: $t('abp.OneNETManagement.IoTPlatformProductCreateTime'),
    minWidth: '150',
-     formatter: ({ cellValue }) => {
+    formatter: ({ cellValue }) => {
      return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
    },
  },
@ -67,7 +67,7 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
    field: 'productUpdateTime',
    title: $t('abp.OneNETManagement.IoTPlatformProductUpdateTime'),
    minWidth: '150',
-     formatter: ({ cellValue }) => {
+    formatter: ({ cellValue }) => {
      return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
    },
  },
@ -75,7 +75,7 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
    field: 'creationTime',
    title: $t('abp.OneNETManagement.CreationTime'),
    minWidth: '150',
-     formatter: ({ cellValue }) => {
+    formatter: ({ cellValue }) => {
      return cellValue ? dayjs(cellValue).format('YYYY-MM-DD HH:mm:ss') : '';
    },
  },
@ -97,7 +97,7 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
    title: $t('common.action'),
    field: 'action',
    fixed: 'right',
-    width: '200',
+    width: '250',
    slots: { default: 'action' },
  },
 ]);