perf: visual board socket subscribe message

@@ -17,12 +17,13 @@ interface SocketMessageItem {
   keys: string;
 }
 
-interface CmdMapping {
-  componentId: string;
-  deviceId: string;
+interface GroupMappingRecord {
+  id: string;
   recordIndex: number;
   dataSourceIndex: number;
   attribute: string;
+  deviceId: string;
+  slaveDeviceId: string;
 }
 
 interface ResponseMessage {
@@ -50,7 +51,9 @@ const generateMessage = (deviceId: string, cmdId: number, attr: string): SocketM
 export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
   const token = getAuthCache(JWT_TOKEN_KEY);
 
-  const cmdIdMapping = new Map<number, CmdMapping>();
+  const cmdIdMapping = new Map<number, GroupMappingRecord[]>();
+
+  const groupMapping = new Map<string, GroupMappingRecord[]>();
 
   const waitSendQueue: string[] = [];
 
@@ -64,6 +67,44 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
     return unref(dataSourceRef)[recordIndex].record.dataSource[dataSourceIndex];
   };
 
+  const mergeGroup = (dataSourceRef: Ref<DataBoardLayoutInfo[]>) => {
+    for (let recordIndex = 0; recordIndex < unref(dataSourceRef).length; recordIndex++) {
+      const record = unref(dataSourceRef).at(recordIndex)!;
+      const dataSource = record?.record.dataSource;
+      for (let dataSourceIndex = 0; dataSourceIndex < dataSource.length; dataSourceIndex++) {
+        const dataDatum = dataSource.at(dataSourceIndex)!;
+        const { deviceId, slaveDeviceId, attribute } = dataDatum;
+        const groupMappingRecord: GroupMappingRecord = {
+          id: record.record.id,
+          recordIndex,
+          dataSourceIndex,
+          attribute,
+          deviceId,
+          slaveDeviceId,
+        };
+        if (groupMapping.has(slaveDeviceId || deviceId)) {
+          const group = groupMapping.get(slaveDeviceId || deviceId);
+          group?.push(groupMappingRecord);
+        } else {
+          groupMapping.set(slaveDeviceId || deviceId, [groupMappingRecord]);
+        }
+      }
+    }
+  };
+
+  function generateGroupMessage() {
+    const messageList: SocketMessageItem[] = [];
+    let cmdId = 0;
+    groupMapping.forEach((value, key) => {
+      const message = generateMessage(key, cmdId, value.map((item) => item.attribute).join(','));
+      messageList.push(message);
+      setCmdId(cmdId, value);
+      cmdId++;
+    });
+    console.log(cmdIdMapping);
+    return messageList;
+  }
+
   const { close, send, open, status } = useWebSocket(config.server, {
     onConnected() {
       if (waitSendQueue.length) {
@@ -80,11 +121,14 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
         if (isNullAndUnDef(subscriptionId)) return;
         const mappingRecord = cmdIdMapping.get(subscriptionId);
         if (!mappingRecord) return;
-        const { attribute, recordIndex, dataSourceIndex } = mappingRecord;
-        const [[timespan, value]] = data[attribute];
-        const record = getNeedUpdateValueByIndex(recordIndex, dataSourceIndex);
-        record.componentInfo.value = value;
-        record.componentInfo.updateTime = timespan;
+        mappingRecord.forEach((item) => {
+          const { attribute, recordIndex, dataSourceIndex } = item;
+          const [[timespan, value]] = data[attribute];
+          const record = getNeedUpdateValueByIndex(recordIndex, dataSourceIndex);
+          record.componentInfo.value = value;
+          record.componentInfo.updateTime = timespan;
+        });
+        return;
       } catch (error) {
         throw Error(error as string);
       }
@@ -94,40 +138,14 @@ export function useSocketConnect(dataSourceRef: Ref<DataBoardLayoutInfo[]>) {
     // },
   });
 
-  const setCmdId = (cmdId: number, record: CmdMapping) => {
+  const setCmdId = (cmdId: number, record: GroupMappingRecord[]) => {
     cmdIdMapping.set(cmdId, record);
   };
 
   const transformSocketMessageItem = () => {
-    const messageList: SocketMessageItem[] = [];
-    let index = 0;
-    unref(dataSourceRef).forEach((record, recordIndex) => {
-      const componentId = record.record.id;
-      for (
-        let dataSourceIndex = 0;
-        dataSourceIndex < record.record.dataSource.length;
-        dataSourceIndex++
-      ) {
-        const dataSource = record.record.dataSource[dataSourceIndex];
-        const { deviceId, attribute, slaveDeviceId, gatewayDevice } = dataSource;
-        if (!attribute) continue;
-        const cmdId = index;
-        index++;
-        setCmdId(cmdId, {
-          componentId,
-          deviceId: gatewayDevice ? deviceId : slaveDeviceId,
-          recordIndex,
-          dataSourceIndex,
-          attribute,
-        });
-
-        messageList.push(
-          generateMessage(gatewayDevice ? slaveDeviceId : deviceId, cmdId, attribute)
-        );
-      }
-    });
+    mergeGroup(dataSourceRef);
     return {
-      tsSubCmds: messageList,
+      tsSubCmds: generateGroupMessage(),
     } as SocketMessage;
   };