Merge branch 'fix/DEFECT-1377' into 'main_dev'

fix: 修复看板名称生效，但是数据动效没生效

See merge request yunteng/thingskit-front!672

@@ -243,7 +243,6 @@
             height: 16,
             fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10,
             color: fontColor || 'inherit',
-            // formatter: `{value} ${unit ?? ''}`,
           },
         },
       ],
@@ -275,42 +274,16 @@
   const { forEachGroupMessage } = useReceiveMessage();
   const { getNumberValue } = useReceiveValue();
   const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
-    // const { data = {} } = message;
-    // const { dataSource } = props.config.option;
-    // const { dataSource } = unref(getDesign);
-    // const series = dataSource.map((item, index) => {
-    //   const { unit, fontColor, showDeviceName, attribute, deviceName, deviceRename } = item;
-    //   const [latest] = data[attribute] || [];
-    //   const [_timespan, value] = latest || [];
-    //   return {
-    //     value,
-    //     name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
-    //     title: {
-    //       color: fontColor,
-    //       offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
-    //     },
-    //     detail: {
-    //       color: fontColor,
-    //       valueAnimation: true,
-    //       offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
-    //       formatter: `{value} ${unit ?? ''}`,
-    //     },
-    //   } as SeriesOption['data'];
-    // });
-    // // console.log(series, 'series');
-    // const xAxisData = unref(getDesign).dataSource.map((item: any) => item.fontColor as any);
-    // unref(chartInstance)?.setOption({
-    //   series: [{ data: series, pointer: { show: false } }],
-    //   color: xAxisData as any,
-    // });
-
     forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+      console.log(value, 'value');
       series.value.forEach((item) => {
         if (item.id === deviceId && item.attribute === attribute) {
           item.value = getNumberValue(value);
         }
       });
+      console.log(value);
     });
+    console.log(series, 'series');
     unref(chartInstance)?.setOption({
       series: [{ data: unref(series), pointer: { show: false } }],
       color: unref(series).map((item) => item.title.color),

@@ -18,7 +18,7 @@
   }>();
 
   interface PercentType {
-    value: number;
+    value?: number;
     fontColor: string;
     backgroundColor: string;
     unit: string;
@@ -26,6 +26,8 @@
     attribute?: string;
     attributeRename?: string;
     deviceId?: string;
+    deviceName?: string;
+    deviceRename?: string;
   }
 
   const defaultValue: PercentType[] = [
@@ -34,6 +36,8 @@
       fontColor: '#19eff',
       backgroundColor: '#19eff',
       unit: '℃',
+      deviceName: '温度',
+      attribute: '1',
       id: buildUUID(),
     },
     {
@@ -41,6 +45,8 @@
       fontColor: '#1E8667',
       backgroundColor: '#1E8667',
       unit: '℃',
+      deviceName: '温度',
+      attribute: '3',
       id: buildUUID(),
     },
     {
@@ -48,6 +54,8 @@
       fontColor: '#2196F3',
       backgroundColor: '#2196F3',
       unit: '℃',
+      deviceName: '温度',
+      attribute: '2',
       id: buildUUID(),
     },
   ];
@@ -60,15 +68,16 @@
       fontColor: presetFontColor,
       backgroundColor: persetBackgroundColor,
     } = persetOption || {};
-
     return {
       dataSource: dataSource.map((item) => {
         const { unit, fontColor, backgroundColor } = item.componentInfo || {};
-        const { attribute, attributeRename, deviceId } = item;
+        const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           backgroundColor: backgroundColor ?? persetBackgroundColor,
+          deviceName,
+          deviceRename,
           attribute,
           attributeRename,
           id: deviceId,
@@ -79,6 +88,7 @@
   const percentList = ref(
     props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue
   );
+  console.log(percentList, 'percentList');
 
   const { forEachGroupMessage } = useReceiveMessage();
 
@@ -104,8 +114,8 @@
 
     <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.attributeRename || item.attribute || '温度' }}
+        <div class="text-gray-500 text-lg truncate" :style="{ color: item.fontColor }">
+          {{ item.deviceRename || item.deviceName + '-' + item.attribute || '温度' }}
         </div>
         <span class="text-lg" :style="{ color: item.fontColor }"
           >{{ item.value }} {{ item.unit }}</span

@@ -44,12 +44,6 @@
           };
         },
       },
-      {
-        field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
-        label: '显示设备名称',
-        component: 'Checkbox',
-        defaultValue: option.showDeviceName,
-      },
     ],
     showActionButtonGroup: false,
     labelWidth: 120,

@@ -7,6 +7,8 @@
   import { SvgIcon } from '/@/components/Icon';
   import { computed } from 'vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -24,7 +26,8 @@
     return {
       dataSource: dataSource.map((item) => {
         const { fontColor, icon, iconColor, unit } = item.componentInfo;
-        const { attribute, attributeRename } = item;
+        const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
+
         return {
           unit: unit ?? persetUnit,
           fontColor: fontColor ?? persetFontColor,
@@ -32,11 +35,22 @@
           iconColor: iconColor ?? persetIconColor,
           attribute: attribute || attributeRename,
           attributeRename,
+          deviceName,
+          deviceRename,
+          id: deviceId,
         };
+        // return {
+        //   unit: unit ?? persetUnit,
+        //   fontColor: fontColor ?? persetFontColor,
+        //   icon: icon ?? persetIcon,
+        //   iconColor: iconColor ?? persetIconColor,
+        //   attribute: attribute || attributeRename,
+        //   attributeRename,
+        // };
       }),
     };
   });
-  const svgList = ref<any>([
+  const defaultSvgList = ref<any>([
     {
       value: 26.2,
       name: 'wendu',
@@ -55,23 +69,53 @@
     },
   ]);
 
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
-    const { data = {} } = message;
-    const { dataSource } = unref(getDesign);
-    svgList.value.length = 0;
-    svgList.value = dataSource.map((item) => {
-      const { icon, iconColor, unit, fontColor, attribute } = item || {};
-      const [latest] = data[attribute] || [];
-      const [_timespan, value] = latest || [];
-      return {
-        value: Number(value),
-        name: attribute,
-        icon,
-        unit,
-        iconColor,
-        fontColor,
-      };
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+
+  const updateSvgList = ref(
+    props.config.option.dataSource ? unref(getDesign).dataSource : defaultSvgList
+  );
+
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
+    // console.log(unref(getDesign).dataSource, 'dataSource');
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+      // unref(getDesign).dataSource.forEach((item) => {
+      // if (item.id === deviceId && item.attribute === attribute) {
+      //   svgList.value = unref(getDesign).dataSource.map((item) => {
+      //     return {
+      //       value: getNumberValue(value),
+      //       name: item.deviceRename || item.deviceName,
+      //       icon: item.icon,
+      //       unit: item.unit,
+      //       fontColor: item.fontColor,
+      //       iconColor: item.iconColor,
+      //     };
+      //   });
+      // }
+      updateSvgList.value.forEach((item) => {
+        if (item.id === deviceId && item.attribute === attribute) {
+          item.value = getNumberValue(value);
+        }
+      });
+      // });
     });
+    // console.log(unref(svgList), 'svglist');
+    // const { data = {} } = message;
+    // const { dataSource } = unref(getDesign);
+    // svgList.value.length = 0;
+    // svgList.value = dataSource.map((item) => {
+    //   const { icon, iconColor, unit, fontColor, attribute } = item || {};
+    //   const [latest] = data[attribute] || [];
+    //   const [_timespan, value] = latest || [];
+    //   return {
+    //     value: Number(value),
+    //     name: attribute,
+    //     icon,
+    //     unit,
+    //     iconColor,
+    //     fontColor,
+    //   };
+    // });
   };
 
   useMultipleDataFetch(props, updateFn);
@@ -82,7 +126,7 @@
     <DeviceName :config="config" />
     <div
       style="width: 86%"
-      v-for="item in svgList"
+      v-for="item in updateSvgList"
       :key="item.id"
       class="flex justify-between items-center"
     >
@@ -94,7 +138,9 @@
           :style="{ color: item.iconColor }"
         />
 
-        <div class="text-gray-500 text-lg truncate ml-6">{{ item.attribute || '温度' }}</div>
+        <div class="text-gray-500 text-lg truncate ml-6">{{
+          item.deviceRename || item.deviceName || '温度'
+        }}</div>
       </div>
 
       <h1 class="font-bold text-xl m-2 truncate" :style="{ color: item.fontColor }">