feat: deivce list model of matter panel add unit

-import { DataType } from './modelOfMatterModel';
+import { StructJSON } from './modelOfMatterModel';
 import { BasicPageParams } from '/@/api/model/baseModel';
 import { BasicPageParams } from '/@/api/model/baseModel';
 import { AlarmStatus } from '/@/views/alarm/log/config/detail.config';
 import { AlarmStatus } from '/@/views/alarm/log/config/detail.config';
 export enum DeviceState {
 export enum DeviceState {
@@ -90,5 +90,5 @@ export interface DeviceRecord {
 export interface DeviceModelOfMatterAttrs {
 export interface DeviceModelOfMatterAttrs {
   name: string;
   name: string;
   identifier: string;
   identifier: string;
-  detail: DataType;
+  detail: StructJSON;
 }
 }

@@ -17,7 +17,7 @@ export interface Specs {
 
 
 export interface DataType {
 export interface DataType {
   type: string;
   type: string;
-  specs?: Partial<Specs> | ModelOfMatterParams[];
+  specs?: Partial<Specs> | StructJSON[];
 }
 }
 
 
 export interface StructJSON {
 export interface StructJSON {

@@ -16,6 +16,8 @@
   import { getDeviceAttrs } from '/@/api/device/deviceManager';
   import { getDeviceAttrs } from '/@/api/device/deviceManager';
   import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
   import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
   import { computed } from '@vue/reactivity';
   import { computed } from '@vue/reactivity';
+  import { Specs, StructJSON } from '/@/api/device/model/modelOfMatterModel';
+  import { isObject } from '/@/utils/is';
 
 
   interface ReceiveMessage {
   interface ReceiveMessage {
     data: {
     data: {
@@ -122,11 +124,21 @@
 
 
   const { createMessage } = useMessage();
   const { createMessage } = useMessage();
 
 
+  const getUnit = (record: StructJSON) => {
+    const { dataType } = record;
+    const { specs } = dataType! || {};
+
+    return isObject(specs)
+      ? (specs as Specs).unitName && (specs as Specs).unit
+        ? `${(specs as Specs).unitName}/${(specs as Specs).unit}`
+        : ''
+      : '';
+  };
+
   const { send, close, data } = useWebSocket(socketInfo.origin, {
   const { send, close, data } = useWebSocket(socketInfo.origin, {
     async onConnected() {
     async onConnected() {
       const { id, profileId } = props.deviceDetail;
       const { id, profileId } = props.deviceDetail;
       const value = await getDeviceAttrs(profileId, id);
       const value = await getDeviceAttrs(profileId, id);
-      console.log(value);
       socketInfo.attrKeys = value;
       socketInfo.attrKeys = value;
       send(JSON.stringify(unref(getSendValue)));
       send(JSON.stringify(unref(getSendValue)));
     },
     },
@@ -140,11 +152,11 @@
             socketInfo.message[key] = value.data[key];
             socketInfo.message[key] = value.data[key];
           });
           });
 
 
-          const allKeys = Object.keys(socketInfo.message);
-
-          socketInfo.originData = socketInfo.dataSource = allKeys.map((key) => {
+          socketInfo.originData = socketInfo.dataSource = socketInfo.attrKeys.map((item) => {
+            const { identifier: key, name, detail } = item;
+            const unit = getUnit(detail);
             const [time, value] = socketInfo.message[key].at(0) || [];
             const [time, value] = socketInfo.message[key].at(0) || [];
-            return { key, value, time };
+            return { key, value, time, name, unit };
           });
           });
 
 
           await nextTick();
           await nextTick();
@@ -153,7 +165,6 @@
       } catch (error) {}
       } catch (error) {}
     },
     },
     onDisconnected() {
     onDisconnected() {
-      console.log('断开连接了');
       close();
       close();
     },
     },
     onError() {
     onError() {
@@ -212,16 +223,17 @@
           <List.Item>
           <List.Item>
             <Card class="shadow-md">
             <Card class="shadow-md">
               <template #title>
               <template #title>
-                <span class="text-base font-normal">{{ item.key }}</span>
+                <span class="text-base font-normal">{{ item.name }}</span>
               </template>
               </template>
               <template #extra>
               <template #extra>
                 <Button type="link" class="!p-0" @click="handleShowDetail(item)">历史数据</Button>
                 <Button type="link" class="!p-0" @click="handleShowDetail(item)">历史数据</Button>
               </template>
               </template>
               <section class="min-h-16 flex flex-col justify-between">
               <section class="min-h-16 flex flex-col justify-between">
-                <div class="flex font-bold text-lg mb-4">
-                  <div>{{ item.value || '暂无数据' }}</div>
+                <div class="flex font-bold text-lg mb-4 gap-2">
+                  <div>{{ item.value || '--' }}</div>
+                  <div>{{ item.unit }}</div>
                 </div>
                 </div>
-                <div class="text-dark-800 text-xs">{{ formatToDateTime(item.time) }}</div>
+                <div class="text-dark-800 text-xs">{{ formatToDateTime(item.time) || '--' }}</div>
               </section>
               </section>
             </Card>
             </Card>
           </List.Item>
           </List.Item>