fix: 修复单一组件无法接收多数据源

@@ -22,6 +22,10 @@
 
   const wrapId = `bai-map-${buildUUID()}`;
 
+  const getDeviceId = computed(() => {
+    return props.config.option.dataSource?.at(0)?.deviceId;
+  });
+
   /**
    * @description 经度key
    */
@@ -40,14 +44,18 @@
     return !!(value && !isNaN(value as unknown as number));
   };
 
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId) => {
+    if (unref(getDeviceId) !== deviceId) return;
+
     const { data = {} } = message;
 
-    const lngData = data[unref(getLngKey)] || [];
+    const bindMessage = data[deviceId];
+
+    const lngData = bindMessage[unref(getLngKey)] || [];
     const [lngLatest] = lngData;
     const [, lng] = lngLatest;
 
-    const latData = data[unref(getLatKey)] || [];
+    const latData = bindMessage[unref(getLatKey)] || [];
     const [latLatest] = latData;
     const [, lat] = latLatest;
 

@@ -9,40 +9,48 @@
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { unref } from 'vue';
   import { onMounted } from 'vue';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { buildUUID } from '/@/utils/uuid';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
-  const percentList = ref<any[]>([
+  interface PercentType {
+    value: number;
+    fontColor: string;
+    backgroundColor: string;
+    unit: string;
+    id: string;
+    attribute?: string;
+    attributeRename?: string;
+    deviceId?: string;
+  }
+
+  const defaultValue: PercentType[] = [
     {
       value: 20,
       fontColor: '#19eff',
       backgroundColor: '#19eff',
-      color: '#000',
-      fontSize: '16px',
       unit: '℃',
-      id: 1,
+      id: buildUUID(),
     },
     {
       value: 66,
       fontColor: '#1E8667',
       backgroundColor: '#1E8667',
-      color: '#000',
-      fontSize: '16px',
       unit: '℃',
-      id: 2,
+      id: buildUUID(),
     },
     {
       value: 49,
       fontColor: '#2196F3',
       backgroundColor: '#2196F3',
-      color: '#000',
-      fontSize: '16px',
       unit: '℃',
-      id: 3,
+      id: buildUUID(),
     },
-  ]);
+  ];
 
   const getDesign = computed(() => {
     const { persetOption = {}, option } = props.config;
@@ -52,65 +60,52 @@
       fontColor: presetFontColor,
       backgroundColor: persetBackgroundColor,
     } = persetOption || {};
+
     return {
-      dataSource: dataSource?.map((item) => {
-        const { unit, fontColor, fontSize, backgroundColor } = item.componentInfo || {};
-        const { attribute, attributeRename } = item;
+      dataSource: dataSource.map((item) => {
+        const { unit, fontColor, backgroundColor } = item.componentInfo || {};
+        const { attribute, attributeRename, deviceId } = item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
-          fontSize,
           backgroundColor: backgroundColor ?? persetBackgroundColor,
           attribute,
           attributeRename,
-        };
+          id: deviceId,
+        } as PercentType;
       }),
     };
   });
+  const percentList = ref(
+    props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue
+  );
+  const { forEachGroupMessage } = useReceiveMessage();
 
-  const newPercentList = ref<any[]>([]);
-
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
-    const { data = {} } = message;
-    const { dataSource } = unref(getDesign);
-    newPercentList.value = dataSource.map((item) => {
-      const { attribute, fontSize, attributeRename, fontColor, unit, backgroundColor } = item;
-
-      const [latest] = data[attribute] || [];
-      const [_timespan, value] = latest || [];
-      return {
-        value: Number(value),
-        name: attributeRename ?? attribute,
-        fontSize,
-        unit,
-        backgroundColor: backgroundColor,
-        fontColor: fontColor,
-      };
+  const { getNumberValue } = useReceiveValue();
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+      percentList.value.forEach((item) => {
+        if (item.id === deviceId && item.attribute === attribute) {
+          item.value = getNumberValue(value);
+        }
+      });
     });
-    // console.log(numberList, 'numberList');
   };
 
-  onMounted(() => {
-    newPercentList.value = percentList.value;
-    !props.config.option.uuid;
-  });
+  onMounted(() => {});
 
   useMultipleDataFetch(props, updateFn);
-
-  // const { getScale } = useComponentScale(props);
 </script>
 
 <template>
   <main class="w-full h-full flex flex-col justify-center">
     <DeviceName :config="config" />
 
-    <div
-      v-for="item in newPercentList"
-      :key="item.id"
-      class="flex flex-col ml-3 mr-3 items-stretch"
-    >
+    <div v-for="item in percentList" :key="item.id" class="flex flex-col ml-3 mr-3 items-stretch">
       <div class="flex justify-between">
-        <div class="text-gray-500 text-lg truncate">{{ item.name || '温度' }}</div>
+        <div class="text-gray-500 text-lg truncate">
+          {{ item.attributeRename || item.attribute || '温度' }}
+        </div>
         <span class="text-lg" :style="{ color: item.fontColor }"
           >{{ item.value }} {{ item.unit }}</span
         >

+import { ReceiveGroupMessageType } from '../index.type';
+
+export const useReceiveMessage = () => {
+  const forEachGroupMessage = (
+    message: ReceiveGroupMessageType,
+    deviceId: string,
+    attributes: string[],
+    Fn: (attribute: string, value: any, timespan: number) => void
+  ) => {
+    const { data = {} } = message;
+    const bindMessage = data[deviceId];
+
+    for (const attribute of attributes) {
+      const [latest] = bindMessage[attribute] || [];
+      const [timespan, value] = latest || [];
+      Fn?.(attribute, value, timespan);
+    }
+  };
+
+  return { forEachGroupMessage };
+};

+export const useReceiveValue = () => {
+  const getNumberValue = (value: any, defaultValue = 0) => {
+    const newValue = isNaN(value) ? defaultValue : Number(value);
+    return newValue;
+  };
+
+  return { getNumberValue };
+};

@@ -10,6 +10,7 @@ import {
   DataFetchUpdateFn,
   EntityTypeEnum,
   MultipleDataFetchUpdateFn,
+  ReceiveGroupMessageType,
   ReceiveMessageType,
   ScopeTypeEnum,
   SubscribeMessageItemType,
@@ -115,6 +116,20 @@ class Subscriber {
     } as ReceiveMessageType;
   }
 
+  getGroupScopeMessage(message: ReceiveMessageType, attribute: string[], deviceId: string) {
+    const result = this.getScopeMessage(message, attribute);
+
+    return {
+      ...result,
+      data: {
+        [deviceId]: result.data,
+      },
+      latestValues: {
+        [deviceId]: result.latestValues,
+      },
+    } as ReceiveGroupMessageType;
+  }
+
   trackUpdate(uuid: string, fn: Fn) {
     if (!uuid || !fn) return;
     this.componentUpdateFnMap.set(uuid, fn);
@@ -144,7 +159,7 @@ class Subscriber {
         const { attributes, fn } = item;
         try {
           if (!fn) return;
-          fn?.(this.getScopeMessage(message, attributes), attributes);
+          fn?.(this.getGroupScopeMessage(message, attributes, deviceId), deviceId, attributes);
         } catch (error) {
           console.error(`deviceId: ${deviceId}`);
           throw error;
@@ -253,23 +268,47 @@ export const useMultipleDataFetch = (
   props: { config: ComponentPropsConfigType },
   updateFn: MultipleDataFetchUpdateFn
 ) => {
-  const getBindAttributes = computed(() => {
-    const attributes = props.config.option.dataSource?.map((item) => item.attribute);
-    return [...new Set(attributes)];
-  });
+  const getDataSourceGroup = computed(() => {
+    const { config } = props;
+    const { option } = config;
+    const { dataSource } = option || {};
 
-  if (!unref(getBindAttributes).length) return;
+    const group: Record<string, DataSource[]> = {};
 
-  const getDeviceId = computed(() => {
-    return props.config.option.dataSource?.at(0)?.deviceId;
+    dataSource?.forEach((item) => {
+      const { deviceId } = item;
+      if (group[deviceId]) {
+        group[deviceId].push(item);
+      } else {
+        group[deviceId] = [item];
+      }
+    });
+
+    return group;
   });
 
+  if (!Object.keys(unref(getDataSourceGroup)).length) return;
+  // const getBindAttributes = computed(() => {
+  //   const attributes = props.config.option.dataSource?.map((item) => item.attribute);
+  //   return [...new Set(attributes)];
+  // });
+
+  // if (!unref(getBindAttributes).length) return;
+
+  // const getDeviceId = computed(() => {
+  //   return props.config.option.dataSource?.at(0)?.deviceId;
+  // });
+
   watch(
-    () => getDeviceId,
+    () => getDataSourceGroup,
     () => {
-      subscriber.trackUpdateGroup(unref(getDeviceId)!, {
-        attributes: unref(getBindAttributes),
-        fn: updateFn,
+      Object.keys(unref(getDataSourceGroup)).forEach((key) => {
+        const item = unref(getDataSourceGroup)[key];
+        const attributes = [...new Set(item.map((item) => item.attribute))];
+        subscriber.trackUpdateGroup(key, {
+          attributes,
+          fn: updateFn,
+        });
       });
     },
     {
@@ -277,5 +316,5 @@ export const useMultipleDataFetch = (
     }
   );
 
-  return { getDeviceId, getBindAttributes };
+  return {};
 };

@@ -162,6 +162,18 @@ export interface ReceiveMessageType {
   latestValues: Record<string, number>;
 }
 
+export interface ReceiveGroupMessageType {
+  subscriptionId: number;
+  errorCode: number;
+  errorMsg: Nullable<string>;
+  data: {
+    string: Record<string, [number, string][]>;
+  };
+  latestValues: {
+    string: Record<string, number>;
+  };
+}
+
 export enum EntityTypeEnum {
   DEVICE = 'DEVICE',
 }
@@ -172,7 +184,11 @@ export enum ScopeTypeEnum {
 
 export type DataFetchUpdateFn = (message: ReceiveMessageType, attr: string) => void;
 
-export type MultipleDataFetchUpdateFn = (message: ReceiveMessageType, attr: string[]) => void;
+export type MultipleDataFetchUpdateFn = (
+  message: ReceiveGroupMessageType,
+  deviceId: string,
+  attr: string[]
+) => void;
 
 // 旧 组件key
 // TEXT_COMPONENT_1 = 'text-component-1',