fix: DEFECT-1377修复看板名称生效了,但是数据动效没有生效

@@ -8,7 +8,8 @@
   // import { useIntervalFn } from '@vueuse/core';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
-  import { SeriesOption } from 'echarts/types/dist/shared';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -24,47 +25,150 @@
     const { option, persetOption } = props.config;
     const { dataSource = [] } = option || {};
     const {
-      fontColor: persetFontColor,
-      unit: persetUnit,
-      showDeviceName: persetShowDeviceName,
+      fontColor: presetFontColor,
+      unit: presetUnit,
+      showDeviceName: presetShowDeviceName,
     } = persetOption || {};
     return {
       dataSource: dataSource.map((item) => {
         const { unit, fontColor, showDeviceName } = item.componentInfo || {};
-        const { deviceName, deviceRename, attribute } = item;
+        const { deviceName, deviceRename, attribute, attributeRename, deviceId } = item;
+        // return {
+        //   unit: unit ?? persetUnit,
+        //   fontColor: fontColor ?? persetFontColor,
+        //   showDeviceName: showDeviceName ?? persetShowDeviceName,
+        //   attribute,
+        //   deviceName,
+        //   deviceRename,
+        // };
         return {
-          unit: unit ?? persetUnit,
-          fontColor: fontColor ?? persetFontColor,
-          showDeviceName: showDeviceName ?? persetShowDeviceName,
+          unit: unit ?? presetUnit,
+          fontColor: fontColor ?? presetFontColor,
           attribute,
+          attributeRename,
+          showDeviceName: showDeviceName ?? presetShowDeviceName,
           deviceName,
           deviceRename,
+          id: deviceId,
         };
       }),
     };
-
-    // const { componentInfo, attribute, attributeRename } = option;
-    // const {
-    //   fontColor: presetFontColor,
-    //   unit: presetUnit,
-    //   pointerColor: presetPointerColor,
-    //   instrumentPanelColor: presetInstrumentPanelColor,
-    //   progressBarCircle: presetProgressBarCircle,
-    //   gradientInfo: presetGradientInfo,
-    // } = persetOption || {};
-    // const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =
-    //   componentInfo || {};
-    // return {
-    //   unit: unit ?? presetUnit,
-    //   fontColor: fontColor ?? presetFontColor,
-    //   attribute: attributeRename || attribute,
-    //   pointerColor: pointerColor ?? presetPointerColor,
-    //   instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
-    //   progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
-    //   gradientInfo: gradientInfo ?? presetGradientInfo,
-    // };
   });
 
+  const getOffset = (length: number, index: number) => {
+    // try {
+    const offsetList = ref<any>([]);
+    switch (length) {
+      case 1:
+        return (offsetList.value = [
+          ['0%', '0%'],
+          ['0%', '10%'],
+        ]);
+        break;
+      case 2:
+        return (offsetList.value = [
+          index == 0 ? ['0%', '-35%'] : ['0%', '0%'],
+          index == 0 ? ['0%', '-20%'] : ['0%', '18%'],
+        ]);
+        break;
+      case 3:
+        return (offsetList.value = [
+          index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
+          index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
+        ]);
+        break;
+      case 4:
+        return (offsetList.value = [
+          index == 0
+            ? ['0%', '-45%']
+            : index == 1
+            ? ['0%', '-15%']
+            : index == 2
+            ? ['0%', '15%']
+            : ['0%', '45%'],
+          index == 0
+            ? ['0%', '-30%']
+            : index == 1
+            ? ['0%', '0%']
+            : index == 2
+            ? ['0%', '30%']
+            : ['0%', '60%'],
+        ]);
+        break;
+      case 5:
+        return (offsetList.value = [
+          index == 0
+            ? ['0%', '-50%']
+            : index == 1
+            ? ['0%', '-25%']
+            : index == 2
+            ? ['0%', '0%']
+            : index == 3
+            ? ['0%', '25%']
+            : ['0%', '50%'],
+          index == 0
+            ? ['0%', '-40%']
+            : index == 1
+            ? ['0%', '-15%']
+            : index == 2
+            ? ['0%', '10%']
+            : index == 3
+            ? ['0%', '35%']
+            : ['0%', '60%'],
+        ]);
+        break;
+      case 6 || 7 || 8 || 9 || 10:
+        return (offsetList.value = [
+          index == 0
+            ? ['0%', '-55%']
+            : index == 1
+            ? ['0%', '-35%']
+            : index == 2
+            ? ['0%', '-15%']
+            : index == 3
+            ? ['0%', '5%']
+            : index == 4
+            ? ['0%', '25%']
+            : ['0%', '45%'],
+          index == 0
+            ? ['0%', '-45%']
+            : index == 1
+            ? ['0%', '-25%']
+            : index == 2
+            ? ['0%', '-5%']
+            : index == 3
+            ? ['0%', '15%%']
+            : index == 4
+            ? ['0%', '35%']
+            : ['0%', '55%'],
+        ]);
+        break;
+    }
+    return unref(offsetList);
+    // } catch {}
+  };
+
+  const series = ref(
+    unref(getDesign).dataSource.map((item, index) => ({
+      value: 30,
+      name: `${
+        item.showDeviceName ? item.deviceRename || item.deviceName + '-' + item.attribute : ''
+      }`,
+      attribute: item.attribute,
+      id: item.id,
+      title: {
+        color: item.fontColor,
+        offsetCenter: getOffset(unref(getDesign).dataSource.length, index)[0],
+      },
+      detail: {
+        color: item.fontColor,
+        valueAnimation: true,
+        offsetCenter: getOffset(unref(getDesign).dataSource.length, index)[1],
+        formatter: `{value} ${item.unit ?? ''}`,
+      },
+    }))
+  );
+
   const gaugeData = [
     {
       value: 30,
@@ -75,7 +179,6 @@
       detail: {
         valueAnimation: true,
         offsetCenter: ['0%', '-20%'],
-        // formatter: `{value} ℃`,
       },
     },
     {
@@ -87,7 +190,6 @@
       detail: {
         valueAnimation: true,
         offsetCenter: ['0%', '15%'],
-        // formatter: `{value} ℃`,
       },
     },
   ];
@@ -108,7 +210,7 @@
           progress: {
             show: true,
             overlap: false,
-            // roundCap: true,
+            roundCap: true,
             clip: false,
             itemStyle: {
               borderWidth: 1,
@@ -170,85 +272,51 @@
   //   }, 3000);
   // };
 
-  // const list = ref<any>([]);
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
-    const { data = {} } = message;
-
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
+    // const { data = {} } = message;
     // const { dataSource } = props.config.option;
-    // const dataList = dataSource?.map((item) => item.attribute);
-    // list.value = dataList?.map((item, index) => {
+    // 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: data[item][0][1],
-    //     name: item,
+    //     value,
+    //     name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
     //     title: {
-    //       color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
+    //       color: fontColor,
     //       offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
     //     },
     //     detail: {
+    //       color: fontColor,
     //       valueAnimation: true,
-    //       color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
     //       offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
+    //       formatter: `{value} ${unit ?? ''}`,
     //     },
-    //   };
+    //   } as SeriesOption['data'];
     // });
-    // dataSource?.forEach((item, index) => {
-    //   list.value.forEach((item1, index1) => {
-    //     console.log(item, 'item');
-    //     if (index == index1) {
-    //       // item1.value = item1.value + item.componentInfo.unit;
-    //       item1.name = item.componentInfo.showDeviceName
-    //         ? item.deviceRename
-    //           ? item.deviceRename
-    //           : item.deviceName
-    //         : '';
-    //       item1.title.color = item.componentInfo.fontColor;
-    //       item1.detail.color = item.componentInfo.fontColor;
-    //       item1.detail.formatter = `{value} ${item.componentInfo.unit ?? ''}`;
-    //     }
-    //   });
-    // });
-    // // console.log(message, 'message', dataSource, 'dataSource', list, 'list');
+    // // console.log(series, 'series');
+    // const xAxisData = unref(getDesign).dataSource.map((item: any) => item.fontColor as any);
     // unref(chartInstance)?.setOption({
-    //   series: [{ data: unref(list), pointer: { show: false } }],
-    //   color: unref(list).map((item) => item.title.color),
-    // } as EChartsOption);
+    //   series: [{ data: series, pointer: { show: false } }],
+    //   color: xAxisData as any,
+    // });
 
-    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'];
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+      series.value.forEach((item) => {
+        if (item.id === deviceId && item.attribute === attribute) {
+          item.value = getNumberValue(value);
+        }
+      });
     });
-    // 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,
+      series: [{ data: unref(series), pointer: { show: false } }],
+      color: unref(series).map((item) => item.title.color),
     });
-    // updateChart(series, xAxisData);
   };
 
-  // const updateChart = (data: SeriesOption['data'], xAxisData) => {
-  //   unref(chartInstance)?.setOption({
-  //     series: [{ data }],
-  //     xAxis: { data: xAxisData },
-  //   });
-  // };
-
   useMultipleDataFetch(props, updateFn);
 
   onMounted(() => {

@@ -7,6 +7,8 @@
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -29,20 +31,41 @@
     return {
       dataSource: dataSource?.map((item) => {
         const { unit, fontColor, showDeviceName } = item.componentInfo || {};
-        const { attribute, attributeRename, deviceName, deviceRename } = item;
+        const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
+        // return {
+        //   unit: unit ?? presetUnit,
+        //   fontColor: fontColor ?? presetFontColor,
+        //   attribute,
+        //   attributeRename,
+        //   deviceName,
+        //   deviceRename,
+        //   showDeviceName: showDeviceName ?? presetShowDeviceName,
+        // };
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           attribute,
           attributeRename,
+          showDeviceName: showDeviceName ?? presetShowDeviceName,
           deviceName,
           deviceRename,
-          showDeviceName: showDeviceName ?? presetShowDeviceName,
+          id: deviceId,
         };
       }),
     };
   });
 
+  const series = ref(
+    unref(getDesign).dataSource.map((item) => ({
+      value: 0,
+      name: `${
+        item.showDeviceName ? item.deviceRename || item.deviceName + '-' + item.attribute : ''
+      }`,
+      attribute: item.attribute,
+      id: item.id,
+    }))
+  );
+
   const options = (): EChartsOption => {
     // getStageColor(gradientInfo);
     return {
@@ -107,26 +130,37 @@
     } as EChartsOption);
   };
 
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
-    const { data = {} } = message;
-    const { dataSource } = unref(getDesign);
-    const series = dataSource.map((item) => {
-      const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;
-      const [latest] = data[attribute] || [];
-      const [_timespan, value] = latest || [];
-
-      return {
-        value,
-        name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
-        itemStyle: { color: fontColor },
-        tooltip: {
-          valueFormatter(value) {
-            return `${value} ${unit ?? ''}`;
-          },
-        },
-      } as SeriesOption['data'];
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+      series.value.forEach((item) => {
+        if (item.id === deviceId && item.attribute === attribute) {
+          item.value = getNumberValue(value);
+        }
+      });
     });
-    updateChart(series);
+
+    updateChart(unref(series));
+    // const { data = {} } = message;
+    // const { dataSource } = unref(getDesign);
+    // const series = dataSource.map((item) => {
+    //   const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;
+    //   const [latest] = data[attribute] || [];
+    //   const [_timespan, value] = latest || [];
+
+    //   return {
+    //     value,
+    //     name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
+    //     itemStyle: { color: fontColor },
+    //     tooltip: {
+    //       valueFormatter(value) {
+    //         return `${value} ${unit ?? ''}`;
+    //       },
+    //     },
+    //   } as SeriesOption['data'];
+    // });
+    // updateChart(series);
   };
 
   useMultipleDataFetch(props, updateFn);

@@ -7,6 +7,9 @@
   import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useReceiveMessage } from '../../../hook/useReceiveMessage';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
+  import { toRaw } from 'vue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
@@ -29,15 +32,25 @@
     return {
       dataSource: dataSource?.map((item) => {
         const { unit, fontColor, showDeviceName } = item.componentInfo || {};
-        const { attribute, attributeRename, deviceName, deviceRename } = item;
+        const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
+        // return {
+        //   unit: unit ?? presetUnit,
+        //   fontColor: fontColor ?? presetFontColor,
+        //   attribute,
+        //   attributeRename,
+        //   deviceName,
+        //   deviceRename,
+        //   showDeviceName: showDeviceName ?? presetShowDeviceName,
+        // };
         return {
           unit: unit ?? presetUnit,
           fontColor: fontColor ?? presetFontColor,
           attribute,
           attributeRename,
+          showDeviceName: showDeviceName ?? presetShowDeviceName,
           deviceName,
           deviceRename,
-          showDeviceName: showDeviceName ?? presetShowDeviceName,
+          id: deviceId,
         };
       }),
     };
@@ -114,40 +127,56 @@
       // color: unref(list).map((item) => item.title.color),
     } as EChartsOption);
   };
-
-  const updateFn: MultipleDataFetchUpdateFn = (message) => {
-    const { data = {} } = message;
-    const { dataSource } = unref(getDesign);
-    const series = dataSource.map((item) => {
-      const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;
-      const [latest] = data[attribute] || [];
-      const [_timespan, value] = latest || [];
-
-      return {
-        value,
-        name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
-        itemStyle: { color: fontColor },
-        tooltip: {
-          valueFormatter(value) {
-            return `${value} ${unit ?? ''}`;
-          },
+  const { forEachGroupMessage } = useReceiveMessage();
+  const { getNumberValue } = useReceiveValue();
+
+  const series = ref(
+    unref(getDesign).dataSource.map((item) => ({
+      value: 0,
+      // name: `${
+      //   item.showDeviceName
+      //     ? item.deviceRename
+      //       ? item.deviceRename
+      //       : item.deviceName + '-' + item.attribute
+      //     : ''
+      // }`,
+      name: `${
+        item.showDeviceName ? item.deviceRename || item.deviceName + '-' + item.attribute : ''
+      }`,
+      itemStyle: { color: item.fontColor },
+      attribute: item.attribute,
+      id: item.id,
+      tooltip: {
+        valueFormatter(value) {
+          return `${value} ${item.unit ?? ''}`;
         },
-      } as SeriesOption['data'];
+      },
+    }))
+  );
+
+  const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
+    forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
+      series.value.forEach((item) => {
+        if (item.id === deviceId && item.attribute === attribute) {
+          item.value = getNumberValue(value);
+        }
+      });
     });
-    // if (series.length > 1) {
-    series.push({
-      value: series.reduce((total: number, current: any) => total + Number(current.value), 0),
+
+    const option = {
+      value: series.value.reduce((total: number, current: any) => total + Number(current.value), 0),
       itemStyle: {
         color: 'none',
         decal: {
           symbol: 'none',
         },
-      },
+      } as any,
       label: {
         show: false,
       },
-    });
-    updateChart(series);
+    };
+    // console.log([...toRaw(unref(series)), option], 'series');
+    updateChart([...toRaw(unref(series)), option]);
   };
 
   useMultipleDataFetch(props, updateFn);

@@ -79,6 +79,7 @@
   const percentList = ref(
     props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue
   );
+
   const { forEachGroupMessage } = useReceiveMessage();
 
   const { getNumberValue } = useReceiveValue();