Merge branch 'perf/device-object-model' into 'main_dev'

pref: 优化设备详情物模型数据,结构体展示 See merge request yunteng/thingskit-front!1083

Merge branch 'perf/device-object-model' into 'main_dev'
pref: 优化设备详情物模型数据,结构体展示 See merge request yunteng/thingskit-front!1083
xp.Huang
2 parents 84ebe0b7 77d82afe
Showing 3 changed files with 214 additions and 94 deletions
src/views/device/list/config/detail.config.ts
src/views/device/list/cpns/tabs/ModelOfMatter.config.ts
src/views/device/list/cpns/tabs/ModelOfMatter.vue
--- a/src/views/device/list/config/detail.config.ts
View file @d41ce65
+++ b/src/views/device/list/config/detail.config.ts
View file @d41ce65
@@ -12,6 +12,7 @@ import { PageEnum } from '/@/enums/pageEnum';
 import { useGo } from '/@/hooks/web/usePage';
 import { useAuthDeviceDetail } from '../hook/useAuthDeviceDetail';
 import { findDictItemByCode } from '/@/api/system/dict';
+import { isNullOrUnDef } from '/@/utils/is';
 // 设备详情的描述
 export const descSchema = (emit: EmitType): DescItem[] => {
@@ -104,8 +105,11 @@ export const realTimeDataColumns: BasicColumn[] = [
   },
   {
     title: '值',
-    dataIndex: 'value',
+    dataIndex: 'rawValue',
     width: 160,
+    format(text) {
+      return isNullOrUnDef(text) ? '--' : text;
+    },
   },
   {
     title: '最后更新时间',
--- a/src/views/device/list/cpns/tabs/ModelOfMatter.config.ts 0 → 100644
View file @d41ce65
+++ b/src/views/device/list/cpns/tabs/ModelOfMatter.config.ts 0 → 100644
View file @d41ce65
+import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
+import { DataType, Specs } from '/@/api/device/model/modelOfMatterModel';
+import { DataTypeEnum } from '/@/enums/objectModelEnum';
+import { isArray } from '/@/utils/is';
+
+export interface StructValueItemType extends BaseAdditionalInfo {
+  name: string;
+  key: string;
+  value?: string | number | boolean;
+}
+
+export interface BaseAdditionalInfo {
+  unit?: string;
+  boolClose?: string;
+  boolOpen?: string;
+  unitName?: string;
+}
+
+export interface SocketInfoDataSourceItemType extends BaseAdditionalInfo {
+  accessMode: string;
+  key: string;
+  name: string;
+  type: DataTypeEnum;
+  detail: DeviceModelOfMatterAttrs;
+  time?: number;
+  value?: string | number | boolean | Record<string, StructValueItemType>;
+  expand?: boolean;
+  showHistoryDataButton?: boolean;
+  rawValue?: any;
+}
+
+export function buildTableDataSourceByObjectModel(
+  models: DeviceModelOfMatterAttrs[]
+): SocketInfoDataSourceItemType[] {
+  function getAdditionalInfoByDataType(dataType?: DataType) {
+    const { specs } = dataType || {};
+    if (isArray(specs)) return {};
+    const { unit, boolClose, boolOpen, unitName } = (specs as Partial<Specs>) || {};
+    return { unit, boolClose, boolOpen, unitName };
+  }
+
+  return models.map((item) => {
+    const { accessMode, identifier, name, detail } = item;
+    const { dataType } = detail;
+    const { type, specs } = dataType || {};
+
+    const res = {
+      accessMode,
+      name,
+      key: identifier,
+      type: type!,
+      detail: item,
+    };
+
+    if (isArray(specs) && type === DataTypeEnum.STRUCT) {
+      const value: Record<string, StructValueItemType> = specs
+        .filter((item) => item.dataType?.type !== DataTypeEnum.STRUCT)
+        .reduce((prev, next) => {
+          const { identifier, functionName, dataType } = next;
+          return {
+            ...prev,
+            [identifier]: {
+              key: identifier!,
+              name: functionName!,
+              type: dataType?.type,
+              ...getAdditionalInfoByDataType(dataType),
+            },
+          };
+        }, {});
+
+      Object.assign(res, { value });
+    } else {
+      Object.assign(res, getAdditionalInfoByDataType(dataType));
+    }
+
+    return res;
+  });
+}
--- a/src/views/device/list/cpns/tabs/ModelOfMatter.vue
View file @d41ce65
+++ b/src/views/device/list/cpns/tabs/ModelOfMatter.vue
View file @d41ce65
@@ -13,8 +13,7 @@
   import HistoryData from './HistoryData.vue';
   import { BasicModal, useModal } from '/@/components/Modal';
   import { getDeviceAttrs } from '/@/api/device/deviceManager';
-  import { DeviceModelOfMatterAttrs, DeviceRecord } from '/@/api/device/model/deviceModel';
-  import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
+  import { DeviceRecord } from '/@/api/device/model/deviceModel';
   import { isArray, isNull, isObject } from '/@/utils/is';
   import { useGlobSetting } from '/@/hooks/setting';
   import { ModeSwitchButton, EnumTableCardMode } from '/@/components/Widget';
@@ -23,8 +22,14 @@
   import { ObjectModelCommandDeliveryModal } from './ObjectModelCommandDeliveryModal';
   import { ModalParamsType } from '/#/utils';
   import { AreaChartOutlined } from '@ant-design/icons-vue';
-  import { SvgIcon } from '/@/components/Icon';
+  import { SvgIcon, Icon } from '/@/components/Icon';
   import { DataTypeEnum } from '/@/enums/objectModelEnum';
+  import {
+    buildTableDataSourceByObjectModel,
+    SocketInfoDataSourceItemType,
+    StructValueItemType,
+  } from './ModelOfMatter.config';
+  import { useJsonParse } from '/@/hooks/business/useJsonParse';
   interface ReceiveMessage {
     data: {
@@ -32,17 +37,6 @@
     };
   }
-  interface DataSource {
-    key?: string;
-    value?: string;
-    time?: number;
-    type?: string;
-    boolClose?: string;
-    boolOpen?: string;
-    name?: string;
-    detail: DeviceModelOfMatterAttrs;
-  }
-
   const props = defineProps<{
     deviceDetail: DeviceRecord;
   }>();
@@ -70,13 +64,14 @@
     cmdId: 0,
     origin: `${socketUrl}${token}`,
     attr: undefined as string | undefined,
-    dataSource: [] as DataSource[],
+    dataSource: [] as SocketInfoDataSourceItemType[],
+    rawDataSource: [] as SocketInfoDataSourceItemType[],
     message: {} as ReceiveMessage['data'],
-    attrKeys: [] as DeviceModelOfMatterAttrs[],
-    filterAttrKeys: [] as DeviceModelOfMatterAttrs[],
+    attrKeys: [] as string[],
+    filterAttrKeys: [] as string[],
   });
-  const getPaginationAttrkey = computed<DeviceModelOfMatterAttrs[]>(() => {
+  const getPaginationAttrkey = computed(() => {
     const { current = 1, pageSize = 10 } = pagination;
     return (
       socketInfo.filterAttrKeys && socketInfo.filterAttrKeys.length
@@ -104,9 +99,7 @@
           entityId: props.deviceDetail!.tbDeviceId,
           scope: 'LATEST_TELEMETRY',
           cmdId: socketInfo.cmdId,
-          keys: unref(getPaginationAttrkey)
-            .map((item) => item.identifier)
-            .join(','),
+          keys: unref(getPaginationAttrkey).join(','),
         },
       ],
     };
@@ -120,9 +113,7 @@
           entityId: props.deviceDetail!.tbDeviceId,
           scope: 'LATEST_TELEMETRY',
           cmdId: socketInfo.cmdId,
-          keys: unref(getPaginationAttrkey)
-            .map((item) => item.identifier)
-            .join(','),
+          keys: unref(getPaginationAttrkey).join(','),
         },
       ],
     };
@@ -150,12 +141,14 @@
         pagination.current = 1;
         socketInfo.filterAttrKeys = value
-          ? unref(socketInfo.attrKeys).filter(
-              (item) =>
-                item.identifier?.toUpperCase().includes(value.toUpperCase()) ||
-                item.name?.toUpperCase().includes(value.toUpperCase())
-            )
-          : socketInfo.attrKeys;
+          ? unref(socketInfo.rawDataSource)
+              .filter(
+                (item) =>
+                  item.key?.toUpperCase().includes(value.toUpperCase()) ||
+                  item.name?.toUpperCase().includes(value.toUpperCase())
+              )
+              .map((item) => item.key)
+          : socketInfo.rawDataSource.map((item) => item.key);
         await nextTick();
@@ -206,58 +199,10 @@
   const { createMessage } = useMessage();
-  const getUnit = (record: StructJSON) => {
-    const { dataType } = record;
-    const { specs, type } = dataType! || {};
-    const unitName = isObject(specs)
-      ? (specs as Specs).unitName && (specs as Specs).unit
-        ? `${(specs as Specs).unitName}`
-        : ''
-      : '';
-    const { boolClose, boolOpen } = (specs || {}) as Specs;
-
-    return { unit: unitName, boolClose, boolOpen, type };
-  };
-
-  const isStructAndTextType = (type: DataTypeEnum) => {
-    return [DataTypeEnum.STRUCT, DataTypeEnum.STRING].includes(type);
-  };
-
   const setDataSource = () => {
-    socketInfo.dataSource = (
-      socketInfo.filterAttrKeys && socketInfo.filterAttrKeys.length
-        ? socketInfo.filterAttrKeys
-        : socketInfo.attrKeys
-    ).map((item) => {
-      const { identifier: key, name, detail, accessMode } = item;
-      const { unit, boolClose, boolOpen, type } = getUnit(detail);
-      const dataInfo = socketInfo.filterAttrKeys.find((item) => item.identifier === key);
-
-      let time: number | undefined;
-      let value: any | undefined;
-      const message = socketInfo.message[key];
-      if (message) {
-        const [attrTime, attrValue] = message.at(0) || [];
-        time = attrTime;
-        value = attrValue;
-      }
-
-      return {
-        key,
-        value,
-        time,
-        name,
-        unit,
-        type,
-        boolClose,
-        boolOpen,
-        accessMode,
-        showHistoryDataButton: !isStructAndTextType(
-          dataInfo?.detail.dataType?.type as unknown as DataTypeEnum
-        ),
-        detail: toRaw(item),
-      };
-    });
+    socketInfo.dataSource = socketInfo.filterAttrKeys.length
+      ? socketInfo.rawDataSource.filter((item) => socketInfo.filterAttrKeys.includes(item.key))
+      : socketInfo.rawDataSource;
   };
   const { send, close, data, open } = useWebSocket(socketInfo.origin, {
@@ -272,9 +217,36 @@
         if (value) {
           const { data } = value;
           const keys = Object.keys(data);
-          keys.forEach((key) => {
-            socketInfo.message[key] = value.data[key];
-          });
+
+          for (const key of keys) {
+            const item = socketInfo.rawDataSource.find((item) => item.key === key);
+            if (!item) continue;
+            const { type } = item;
+            const [firstItem] = data[key] || [];
+            const [time, value] = firstItem;
+
+            item.rawValue = value;
+
+            if (type === DataTypeEnum.STRUCT) {
+              const { flag, value: structJSON } = useJsonParse(value);
+              if (!flag || !isObject(item.value)) continue;
+
+              const structKeys = Object.keys(structJSON);
+
+              structKeys.forEach((key) => {
+                if ((item.value as Record<string, StructValueItemType>)?.[key]) {
+                  (item.value as Record<string, StructValueItemType>)[key].value = structJSON[key];
+                }
+              });
+
+              item.time = time;
+
+              continue;
+            }
+
+            item.value = value;
+            item.time = time;
+          }
           setDataSource();
@@ -296,7 +268,7 @@
     setTableData(socketInfo.dataSource.filter((item) => !isNull(item.value)));
   }
-  const handleShowDetail = (record: DataSource) => {
+  const handleShowDetail = (record: SocketInfoDataSourceItemType) => {
     const { key } = record;
     socketInfo.attr = key;
     openModal(true);
@@ -305,23 +277,24 @@
   onMounted(async () => {
     const { deviceProfileId } = props.deviceDetail;
     const value = await getDeviceAttrs({ deviceProfileId });
-    socketInfo.attrKeys = isArray(value) ? value : [];
+    socketInfo.attrKeys = isArray(value) ? value.map((item) => item.identifier) : [];
+    socketInfo.rawDataSource = buildTableDataSourceByObjectModel(value);
     setDataSource();
     open();
   });
-  const formatValue = (item: DataSource) => {
+  const formatValue = (item: SocketInfoDataSourceItemType) => {
     return item.type === DataTypeEnum.BOOL
       ? !isNull(item.value)
         ? !!Number(item.value)
           ? item.boolOpen
           : item.boolClose
         : '--'
-      : item.value || '--';
+      : (item.value as string) || '--';
   };
   const [register, { openModal: openSendCommandModal }] = useModal();
-  const handleSendCommandModal = (data: DataSource) => {
+  const handleSendCommandModal = (data: SocketInfoDataSourceItemType) => {
     openSendCommandModal(true, {
       mode: DataActionModeEnum.READ,
       record: { ...toRaw(data.detail), deviceDetail: props.deviceDetail as any },
@@ -369,7 +342,7 @@
         :grid="grid"
         :pagination="pagination"
       >
-        <template #renderItem="{ item }">
+        <template #renderItem="{ item }: { item: SocketInfoDataSourceItemType }">
           <List.Item>
             <Card class="shadow-md">
               <template #title>
@@ -377,6 +350,16 @@
               </template>
               <template #extra>
                 <Space>
+                  <Tooltip
+                    :title="item.expand ? '收起' : '展开'"
+                    v-if="item.type === DataTypeEnum.STRUCT"
+                  >
+                    <Icon
+                      :icon="item.expand ? 'ant-design:up-outlined' : 'ant-design:down-outlined'"
+                      class="cursor-pointer svg:text-blue-500"
+                      @click="item.expand = !item.expand"
+                    />
+                  </Tooltip>
                   <Tooltip title="属性下发">
                     <SvgIcon
                       name="send-command"
@@ -396,14 +379,49 @@
                 </Space>
               </template>
               <section class="min-h-16 flex flex-col justify-between">
-                <div class="flex font-bold text-lg mb-4 gap-2">
+                <div
+                  v-if="item.type !== DataTypeEnum.STRUCT"
+                  class="flex font-bold text-lg mb-4 gap-2"
+                >
                   <Tooltip :title="formatValue(item)" placement="topLeft">
                     <div class="truncate">{{ formatValue(item) }}</div>
                   </Tooltip>
-                  <div class="text-xs flex items-center">{{ item.unit }}</div>
+                  <div class="text-xs flex items-center">{{ item.unitName }}</div>
+                </div>
+                <div
+                  class="mb-4 overflow-hidden flex flex-col gap-2 relative"
+                  v-if="item.type == DataTypeEnum.STRUCT && isObject(item.value)"
+                  :style="{ height: item.expand ? 'fit-content' : '28px' }"
+                >
+                  <div
+                    v-for="key in Object.keys(item.value)"
+                    :key="key"
+                    class="cursor-pointer flex justify-between items-center gap-2"
+                  >
+                    <div class="font-medium truncate">{{ item.value[key].name }}</div>
+                    <div class="flex-auto font-bold text-lg text-left ml-4 truncate">
+                      <Tooltip :title="formatValue(item)" placement="topLeft">
+                        <span>
+                          {{ formatValue(item.value[key] as SocketInfoDataSourceItemType) }}
+                        </span>
+                      </Tooltip>
+                      <span class="text-xs font-normal ml-2">
+                        {{ item.value[key].unitName }}
+                      </span>
+                    </div>
+                  </div>
+                  <Tooltip title="点击展开">
+                    <div
+                      v-show="!item.expand"
+                      class="absolute top-2 right-0 text-blue-400 cursor-pointer text-xs"
+                      @click="item.expand = !item.expand"
+                    >
+                      更多
+                    </div>
+                  </Tooltip>
                 </div>
                 <div class="text-dark-800 text-xs">
-                  {{ item.value ? formatToDateTime(item.time, 'YYYY-MM-DD HH:mm:ss') : '--' }}
+                  {{ item.time ? formatToDateTime(item.time, 'YYYY-MM-DD HH:mm:ss') : '--' }}
                 </div>
               </section>
             </Card>
@@ -461,6 +479,26 @@
   .device-things-model-table-mode:deep(.ant-table-placeholder) {
     height: auto;
   }
+
+  .model-collapse {
+    border: none;
+
+    :deep(.ant-collapse-header) {
+      display: none;
+    }
+
+    :deep(.ant-collapse-item) {
+      border: none;
+    }
+
+    :deep(.ant-collapse-content) {
+      border: none;
+    }
+
+    :deep(.ant-collapse-content-box) {
+      padding: 0;
+    }
+  }
 </style>
 <style>