perf: device list search devcie attributes usage properites in model of matter

@@ -21,7 +21,7 @@ VITE_PROXY = [["/api","http://222.180.200.114:48080/api"],["/thingskit-drawio","
 # 实时数据的ws地址
 # VITE_WEB_SOCKET = ws://localhost:8080/api/ws/plugins/telemetry?token=
 # VITE_WEB_SOCKET = ws://44.99.141.212:8080/api/ws/plugins/telemetry?token=
-VITE_WEB_SOCKET = ws://dev.thingskit.com/api/ws/plugins/telemetry?token=
+VITE_WEB_SOCKET = ws://222.180.200.114:48080/api/ws/plugins/telemetry?token=
 # VITE_WEB_SOCKET = ws://121.37.251.8:8080/api/ws/plugins/telemetry?token=
 
 # Delete console

 import { defHttp } from '/@/utils/http/axios';
 import {
   DeviceModel,
+  DeviceModelOfMatterAttrs,
   DeviceProfileModel,
   DeviceProfileQueryParam,
   DeviceQueryParam,
@@ -24,6 +25,8 @@ enum DeviceManagerApi {
 
   DEVICE_CREDENTIALS = '/device/credentials',
   COMMAND_ISSUANCE = '/rpc',
+
+  DEVICE_ATTR = '/device/attributes',
 }
 
 export const devicePage = (params: DeviceQueryParam) => {
@@ -224,3 +227,9 @@ export const commandIssuanceApi = (type, tbDeviceId, data) => {
     }
   );
 };
+
+export const getDeviceAttrs = (profileId: string, id: string) => {
+  return defHttp.get<DeviceModelOfMatterAttrs[]>({
+    url: `${DeviceManagerApi.DEVICE_ATTR}/${profileId}/${id}`,
+  });
+};

+import { DataType } from './modelOfMatterModel';
 import { BasicPageParams } from '/@/api/model/baseModel';
 import { AlarmStatus } from '/@/views/alarm/log/config/detail.config';
 export enum DeviceState {
@@ -85,3 +86,9 @@ export interface DeviceRecord {
   type: string;
   default: boolean;
 }
+
+export interface DeviceModelOfMatterAttrs {
+  name: string;
+  identifier: string;
+  detail: DataType;
+}

 <script lang="ts" setup>
-  import { nextTick, reactive, ref, unref } from 'vue';
+  import { nextTick, onUnmounted, reactive, ref, unref } from 'vue';
   import { List, Button, Tooltip, Card } from 'ant-design-vue';
   import { PageWrapper } from '/@/components/Page';
   import { AppstoreOutlined, BarsOutlined } from '@ant-design/icons-vue';
@@ -13,6 +13,9 @@
   import { BasicForm, useForm } from '/@/components/Form';
   import HistoryData from './HistoryData.vue';
   import { BasicModal, useModal } from '/@/components/Modal';
+  import { getDeviceAttrs } from '/@/api/device/deviceManager';
+  import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
+  import { computed } from '@vue/reactivity';
 
   interface ReceiveMessage {
     data: {
@@ -27,7 +30,7 @@
   }
 
   const props = defineProps<{
-    deviceDetail: Record<'tbDeviceId', string>;
+    deviceDetail: Record<'tbDeviceId' | 'profileId' | 'id', string>;
   }>();
 
   const grid = {
@@ -43,16 +46,21 @@
     originData: [] as DataSource[],
     dataSource: [] as DataSource[],
     message: {} as ReceiveMessage['data'],
-    sendValue: {
+    attrKeys: [] as DeviceModelOfMatterAttrs[],
+  });
+
+  const getSendValue = computed(() => {
+    return {
       tsSubCmds: [
         {
           entityType: 'DEVICE',
-          entityId: props.deviceDetail!.tbDeviceId || 'd2526c70-60a9-11ed-ba9c-6b98bfcc8255',
+          entityId: props.deviceDetail!.tbDeviceId,
           scope: 'LATEST_TELEMETRY',
           cmdId: 1,
+          keys: socketInfo.attrKeys.map((item) => item.identifier).join(','),
         },
       ],
-    },
+    };
   });
 
   const [registerForm, { getFieldsValue }] = useForm({
@@ -115,8 +123,12 @@
   const { createMessage } = useMessage();
 
   const { send, close, data } = useWebSocket(socketInfo.origin, {
-    onConnected() {
-      send(JSON.stringify(socketInfo.sendValue));
+    async onConnected() {
+      const { id, profileId } = props.deviceDetail;
+      const value = await getDeviceAttrs(profileId, id);
+      console.log(value);
+      socketInfo.attrKeys = value;
+      send(JSON.stringify(unref(getSendValue)));
     },
     async onMessage() {
       try {
@@ -154,6 +166,8 @@
     socketInfo.attr = key;
     openModal(true);
   };
+
+  onUnmounted(() => close());
 </script>
 
 <template>
@@ -203,9 +217,9 @@
               <template #extra>
                 <Button type="link" class="!p-0" @click="handleShowDetail(item)">历史数据</Button>
               </template>
-              <section>
+              <section class="min-h-16 flex flex-col justify-between">
                 <div class="flex font-bold text-lg mb-4">
-                  <div>{{ item.value }}</div>
+                  <div>{{ item.value || '暂无数据' }}</div>
                 </div>
                 <div class="text-dark-800 text-xs">{{ formatToDateTime(item.time) }}</div>
               </section>