简柏林 / thingskit-front · Commits

Commit c8506463373780ef6e804ac1f2833be06d0d5b66

Authored by xp.Huang
2 parents 778dc9a2 98a3ac2c

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

Fix/DEFECT-1377

See merge request yunteng/thingskit-front!670
Inline Side-by-side
Showing 4 changed files with 273 additions and 141 deletions
@@ -8,7 +8,8 @@ @@ -8,7 +8,8 @@
8 // import { useIntervalFn } from '@vueuse/core'; 8 // import { useIntervalFn } from '@vueuse/core';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
10 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale'; 10 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
11 - import { SeriesOption } from 'echarts/types/dist/shared'; 11 + import { useReceiveMessage } from '../../../hook/useReceiveMessage';
  12 + import { useReceiveValue } from '../../../hook/useReceiveValue';
12 13
13 const props = defineProps<{ 14 const props = defineProps<{
14 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
@@ -24,47 +25,150 @@ @@ -24,47 +25,150 @@
24 const { option, persetOption } = props.config; 25 const { option, persetOption } = props.config;
25 const { dataSource = [] } = option || {}; 26 const { dataSource = [] } = option || {};
26 const { 27 const {
27 - fontColor: persetFontColor,  
28 - unit: persetUnit,  
29 - showDeviceName: persetShowDeviceName, 28 + fontColor: presetFontColor,
  29 + unit: presetUnit,
  30 + showDeviceName: presetShowDeviceName,
30 } = persetOption || {}; 31 } = persetOption || {};
31 return { 32 return {
32 dataSource: dataSource.map((item) => { 33 dataSource: dataSource.map((item) => {
33 const { unit, fontColor, showDeviceName } = item.componentInfo || {}; 34 const { unit, fontColor, showDeviceName } = item.componentInfo || {};
34 - const { deviceName, deviceRename, attribute } = item; 35 + const { deviceName, deviceRename, attribute, attributeRename, deviceId } = item;
  36 + // return {
  37 + // unit: unit ?? persetUnit,
  38 + // fontColor: fontColor ?? persetFontColor,
  39 + // showDeviceName: showDeviceName ?? persetShowDeviceName,
  40 + // attribute,
  41 + // deviceName,
  42 + // deviceRename,
  43 + // };
35 return { 44 return {
36 - unit: unit ?? persetUnit,  
37 - fontColor: fontColor ?? persetFontColor,  
38 - showDeviceName: showDeviceName ?? persetShowDeviceName, 45 + unit: unit ?? presetUnit,
  46 + fontColor: fontColor ?? presetFontColor,
39 attribute, 47 attribute,
  48 + attributeRename,
  49 + showDeviceName: showDeviceName ?? presetShowDeviceName,
40 deviceName, 50 deviceName,
41 deviceRename, 51 deviceRename,
  52 + id: deviceId,
42 }; 53 };
43 }), 54 }),
44 }; 55 };
45 -  
46 - // const { componentInfo, attribute, attributeRename } = option;  
47 - // const {  
48 - // fontColor: presetFontColor,  
49 - // unit: presetUnit,  
50 - // pointerColor: presetPointerColor,  
51 - // instrumentPanelColor: presetInstrumentPanelColor,  
52 - // progressBarCircle: presetProgressBarCircle,  
53 - // gradientInfo: presetGradientInfo,  
54 - // } = persetOption || {};  
55 - // const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =  
56 - // componentInfo || {};  
57 - // return {  
58 - // unit: unit ?? presetUnit,  
59 - // fontColor: fontColor ?? presetFontColor,  
60 - // attribute: attributeRename || attribute,  
61 - // pointerColor: pointerColor ?? presetPointerColor,  
62 - // instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,  
63 - // progressBarCircle: progressBarCircle ?? presetProgressBarCircle,  
64 - // gradientInfo: gradientInfo ?? presetGradientInfo,  
65 - // };  
66 }); 56 });
67 57
  58 + const getOffset = (length: number, index: number) => {
  59 + // try {
  60 + const offsetList = ref<any>([]);
  61 + switch (length) {
  62 + case 1:
  63 + return (offsetList.value = [
  64 + ['0%', '0%'],
  65 + ['0%', '10%'],
  66 + ]);
  67 + break;
  68 + case 2:
  69 + return (offsetList.value = [
  70 + index == 0 ? ['0%', '-35%'] : ['0%', '0%'],
  71 + index == 0 ? ['0%', '-20%'] : ['0%', '18%'],
  72 + ]);
  73 + break;
  74 + case 3:
  75 + return (offsetList.value = [
  76 + index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
  77 + index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
  78 + ]);
  79 + break;
  80 + case 4:
  81 + return (offsetList.value = [
  82 + index == 0
  83 + ? ['0%', '-45%']
  84 + : index == 1
  85 + ? ['0%', '-15%']
  86 + : index == 2
  87 + ? ['0%', '15%']
  88 + : ['0%', '45%'],
  89 + index == 0
  90 + ? ['0%', '-30%']
  91 + : index == 1
  92 + ? ['0%', '0%']
  93 + : index == 2
  94 + ? ['0%', '30%']
  95 + : ['0%', '60%'],
  96 + ]);
  97 + break;
  98 + case 5:
  99 + return (offsetList.value = [
  100 + index == 0
  101 + ? ['0%', '-50%']
  102 + : index == 1
  103 + ? ['0%', '-25%']
  104 + : index == 2
  105 + ? ['0%', '0%']
  106 + : index == 3
  107 + ? ['0%', '25%']
  108 + : ['0%', '50%'],
  109 + index == 0
  110 + ? ['0%', '-40%']
  111 + : index == 1
  112 + ? ['0%', '-15%']
  113 + : index == 2
  114 + ? ['0%', '10%']
  115 + : index == 3
  116 + ? ['0%', '35%']
  117 + : ['0%', '60%'],
  118 + ]);
  119 + break;
  120 + case 6 || 7 || 8 || 9 || 10:
  121 + return (offsetList.value = [
  122 + index == 0
  123 + ? ['0%', '-55%']
  124 + : index == 1
  125 + ? ['0%', '-35%']
  126 + : index == 2
  127 + ? ['0%', '-15%']
  128 + : index == 3
  129 + ? ['0%', '5%']
  130 + : index == 4
  131 + ? ['0%', '25%']
  132 + : ['0%', '45%'],
  133 + index == 0
  134 + ? ['0%', '-45%']
  135 + : index == 1
  136 + ? ['0%', '-25%']
  137 + : index == 2
  138 + ? ['0%', '-5%']
  139 + : index == 3
  140 + ? ['0%', '15%%']
  141 + : index == 4
  142 + ? ['0%', '35%']
  143 + : ['0%', '55%'],
  144 + ]);
  145 + break;
  146 + }
  147 + return unref(offsetList);
  148 + // } catch {}
  149 + };
  150 +
  151 + const series = ref(
  152 + unref(getDesign).dataSource.map((item, index) => ({
  153 + value: 30,
  154 + name: `${
  155 + item.showDeviceName ? item.deviceRename || item.deviceName + '-' + item.attribute : ''
  156 + }`,
  157 + attribute: item.attribute,
  158 + id: item.id,
  159 + title: {
  160 + color: item.fontColor,
  161 + offsetCenter: getOffset(unref(getDesign).dataSource.length, index)[0],
  162 + },
  163 + detail: {
  164 + color: item.fontColor,
  165 + valueAnimation: true,
  166 + offsetCenter: getOffset(unref(getDesign).dataSource.length, index)[1],
  167 + formatter: `{value} ${item.unit ?? ''}`,
  168 + },
  169 + }))
  170 + );
  171 +
68 const gaugeData = [ 172 const gaugeData = [
69 { 173 {
70 value: 30, 174 value: 30,
@@ -75,7 +179,6 @@ @@ -75,7 +179,6 @@
75 detail: { 179 detail: {
76 valueAnimation: true, 180 valueAnimation: true,
77 offsetCenter: ['0%', '-20%'], 181 offsetCenter: ['0%', '-20%'],
78 - // formatter: `{value} ℃`,  
79 }, 182 },
80 }, 183 },
81 { 184 {
@@ -87,7 +190,6 @@ @@ -87,7 +190,6 @@
87 detail: { 190 detail: {
88 valueAnimation: true, 191 valueAnimation: true,
89 offsetCenter: ['0%', '15%'], 192 offsetCenter: ['0%', '15%'],
90 - // formatter: `{value} ℃`,  
91 }, 193 },
92 }, 194 },
93 ]; 195 ];
@@ -108,7 +210,7 @@ @@ -108,7 +210,7 @@
108 progress: { 210 progress: {
109 show: true, 211 show: true,
110 overlap: false, 212 overlap: false,
111 - // roundCap: true, 213 + roundCap: true,
112 clip: false, 214 clip: false,
113 itemStyle: { 215 itemStyle: {
114 borderWidth: 1, 216 borderWidth: 1,
@@ -170,85 +272,51 @@ @@ -170,85 +272,51 @@
170 // }, 3000); 272 // }, 3000);
171 // }; 273 // };
172 274
173 - // const list = ref<any>([]);  
174 - const updateFn: MultipleDataFetchUpdateFn = (message) => {  
175 - const { data = {} } = message;  
176 - 275 + const { forEachGroupMessage } = useReceiveMessage();
  276 + const { getNumberValue } = useReceiveValue();
  277 + const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
  278 + // const { data = {} } = message;
177 // const { dataSource } = props.config.option; 279 // const { dataSource } = props.config.option;
178 - // const dataList = dataSource?.map((item) => item.attribute);  
179 - // list.value = dataList?.map((item, index) => { 280 + // const { dataSource } = unref(getDesign);
  281 + // const series = dataSource.map((item, index) => {
  282 + // const { unit, fontColor, showDeviceName, attribute, deviceName, deviceRename } = item;
  283 + // const [latest] = data[attribute] || [];
  284 + // const [_timespan, value] = latest || [];
180 // return { 285 // return {
181 - // value: data[item][0][1],  
182 - // name: item, 286 + // value,
  287 + // name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
183 // title: { 288 // title: {
184 - // color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0', 289 + // color: fontColor,
185 // offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'], 290 // offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
186 // }, 291 // },
187 // detail: { 292 // detail: {
  293 + // color: fontColor,
188 // valueAnimation: true, 294 // valueAnimation: true,
189 - // color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',  
190 // offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'], 295 // offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
  296 + // formatter: `{value} ${unit ?? ''}`,
191 // }, 297 // },
192 - // }; 298 + // } as SeriesOption['data'];
193 // }); 299 // });
194 - // dataSource?.forEach((item, index) => {  
195 - // list.value.forEach((item1, index1) => {  
196 - // console.log(item, 'item');  
197 - // if (index == index1) {  
198 - // // item1.value = item1.value + item.componentInfo.unit;  
199 - // item1.name = item.componentInfo.showDeviceName  
200 - // ? item.deviceRename  
201 - // ? item.deviceRename  
202 - // : item.deviceName  
203 - // : '';  
204 - // item1.title.color = item.componentInfo.fontColor;  
205 - // item1.detail.color = item.componentInfo.fontColor;  
206 - // item1.detail.formatter = `{value} ${item.componentInfo.unit ?? ''}`;  
207 - // }  
208 - // });  
209 - // });  
210 - // // console.log(message, 'message', dataSource, 'dataSource', list, 'list'); 300 + // // console.log(series, 'series');
  301 + // const xAxisData = unref(getDesign).dataSource.map((item: any) => item.fontColor as any);
211 // unref(chartInstance)?.setOption({ 302 // unref(chartInstance)?.setOption({
212 - // series: [{ data: unref(list), pointer: { show: false } }],  
213 - // color: unref(list).map((item) => item.title.color),  
214 - // } as EChartsOption); 303 + // series: [{ data: series, pointer: { show: false } }],
  304 + // color: xAxisData as any,
  305 + // });
215 306
216 - const { dataSource } = unref(getDesign);  
217 - const series = dataSource.map((item, index) => {  
218 - const { unit, fontColor, showDeviceName, attribute, deviceName, deviceRename } = item;  
219 - const [latest] = data[attribute] || [];  
220 - const [_timespan, value] = latest || [];  
221 - return {  
222 - value,  
223 - name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',  
224 - title: {  
225 - color: fontColor,  
226 - offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],  
227 - },  
228 - detail: {  
229 - color: fontColor,  
230 - valueAnimation: true,  
231 - offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],  
232 - formatter: `{value} ${unit ?? ''}`,  
233 - },  
234 - } as SeriesOption['data']; 307 + forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
  308 + series.value.forEach((item) => {
  309 + if (item.id === deviceId && item.attribute === attribute) {
  310 + item.value = getNumberValue(value);
  311 + }
  312 + });
235 }); 313 });
236 - // console.log(series, 'series');  
237 - const xAxisData = unref(getDesign).dataSource.map((item: any) => item.fontColor as any);  
238 unref(chartInstance)?.setOption({ 314 unref(chartInstance)?.setOption({
239 - series: [{ data: series, pointer: { show: false } }],  
240 - color: xAxisData as any, 315 + series: [{ data: unref(series), pointer: { show: false } }],
  316 + color: unref(series).map((item) => item.title.color),
241 }); 317 });
242 - // updateChart(series, xAxisData);  
243 }; 318 };
244 319
245 - // const updateChart = (data: SeriesOption['data'], xAxisData) => {  
246 - // unref(chartInstance)?.setOption({  
247 - // series: [{ data }],  
248 - // xAxis: { data: xAxisData },  
249 - // });  
250 - // };  
251 -  
252 useMultipleDataFetch(props, updateFn); 320 useMultipleDataFetch(props, updateFn);
253 321
254 onMounted(() => { 322 onMounted(() => {
@@ -7,6 +7,8 @@ @@ -7,6 +7,8 @@
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { useComponentScale } from '../../../hook/useComponentScale'; 8 import { useComponentScale } from '../../../hook/useComponentScale';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  10 + import { useReceiveMessage } from '../../../hook/useReceiveMessage';
  11 + import { useReceiveValue } from '../../../hook/useReceiveValue';
10 12
11 const props = defineProps<{ 13 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 14 config: ComponentPropsConfigType<typeof option>;
@@ -29,20 +31,41 @@ @@ -29,20 +31,41 @@
29 return { 31 return {
30 dataSource: dataSource?.map((item) => { 32 dataSource: dataSource?.map((item) => {
31 const { unit, fontColor, showDeviceName } = item.componentInfo || {}; 33 const { unit, fontColor, showDeviceName } = item.componentInfo || {};
32 - const { attribute, attributeRename, deviceName, deviceRename } = item; 34 + const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
  35 + // return {
  36 + // unit: unit ?? presetUnit,
  37 + // fontColor: fontColor ?? presetFontColor,
  38 + // attribute,
  39 + // attributeRename,
  40 + // deviceName,
  41 + // deviceRename,
  42 + // showDeviceName: showDeviceName ?? presetShowDeviceName,
  43 + // };
33 return { 44 return {
34 unit: unit ?? presetUnit, 45 unit: unit ?? presetUnit,
35 fontColor: fontColor ?? presetFontColor, 46 fontColor: fontColor ?? presetFontColor,
36 attribute, 47 attribute,
37 attributeRename, 48 attributeRename,
  49 + showDeviceName: showDeviceName ?? presetShowDeviceName,
38 deviceName, 50 deviceName,
39 deviceRename, 51 deviceRename,
40 - showDeviceName: showDeviceName ?? presetShowDeviceName, 52 + id: deviceId,
41 }; 53 };
42 }), 54 }),
43 }; 55 };
44 }); 56 });
45 57
  58 + const series = ref(
  59 + unref(getDesign).dataSource.map((item) => ({
  60 + value: 0,
  61 + name: `${
  62 + item.showDeviceName ? item.deviceRename || item.deviceName + '-' + item.attribute : ''
  63 + }`,
  64 + attribute: item.attribute,
  65 + id: item.id,
  66 + }))
  67 + );
  68 +
46 const options = (): EChartsOption => { 69 const options = (): EChartsOption => {
47 // getStageColor(gradientInfo); 70 // getStageColor(gradientInfo);
48 return { 71 return {
@@ -107,26 +130,37 @@ @@ -107,26 +130,37 @@
107 } as EChartsOption); 130 } as EChartsOption);
108 }; 131 };
109 132
110 - const updateFn: MultipleDataFetchUpdateFn = (message) => {  
111 - const { data = {} } = message;  
112 - const { dataSource } = unref(getDesign);  
113 - const series = dataSource.map((item) => {  
114 - const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;  
115 - const [latest] = data[attribute] || [];  
116 - const [_timespan, value] = latest || [];  
117 -  
118 - return {  
119 - value,  
120 - name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',  
121 - itemStyle: { color: fontColor },  
122 - tooltip: {  
123 - valueFormatter(value) {  
124 - return `${value} ${unit ?? ''}`;  
125 - },  
126 - },  
127 - } as SeriesOption['data']; 133 + const { forEachGroupMessage } = useReceiveMessage();
  134 + const { getNumberValue } = useReceiveValue();
  135 + const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
  136 + forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
  137 + series.value.forEach((item) => {
  138 + if (item.id === deviceId && item.attribute === attribute) {
  139 + item.value = getNumberValue(value);
  140 + }
  141 + });
128 }); 142 });
129 - updateChart(series); 143 +
  144 + updateChart(unref(series));
  145 + // const { data = {} } = message;
  146 + // const { dataSource } = unref(getDesign);
  147 + // const series = dataSource.map((item) => {
  148 + // const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;
  149 + // const [latest] = data[attribute] || [];
  150 + // const [_timespan, value] = latest || [];
  151 +
  152 + // return {
  153 + // value,
  154 + // name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
  155 + // itemStyle: { color: fontColor },
  156 + // tooltip: {
  157 + // valueFormatter(value) {
  158 + // return `${value} ${unit ?? ''}`;
  159 + // },
  160 + // },
  161 + // } as SeriesOption['data'];
  162 + // });
  163 + // updateChart(series);
130 }; 164 };
131 165
132 useMultipleDataFetch(props, updateFn); 166 useMultipleDataFetch(props, updateFn);
@@ -7,6 +7,9 @@ @@ -7,6 +7,9 @@
7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime'; 7 import { UpdateTime } from '/@/views/visual/commonComponents/UpdateTime';
8 import { useComponentScale } from '../../../hook/useComponentScale'; 8 import { useComponentScale } from '../../../hook/useComponentScale';
9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
  10 + import { useReceiveMessage } from '../../../hook/useReceiveMessage';
  11 + import { useReceiveValue } from '../../../hook/useReceiveValue';
  12 + import { toRaw } from 'vue';
10 13
11 const props = defineProps<{ 14 const props = defineProps<{
12 config: ComponentPropsConfigType<typeof option>; 15 config: ComponentPropsConfigType<typeof option>;
@@ -29,15 +32,25 @@ @@ -29,15 +32,25 @@
29 return { 32 return {
30 dataSource: dataSource?.map((item) => { 33 dataSource: dataSource?.map((item) => {
31 const { unit, fontColor, showDeviceName } = item.componentInfo || {}; 34 const { unit, fontColor, showDeviceName } = item.componentInfo || {};
32 - const { attribute, attributeRename, deviceName, deviceRename } = item; 35 + const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
  36 + // return {
  37 + // unit: unit ?? presetUnit,
  38 + // fontColor: fontColor ?? presetFontColor,
  39 + // attribute,
  40 + // attributeRename,
  41 + // deviceName,
  42 + // deviceRename,
  43 + // showDeviceName: showDeviceName ?? presetShowDeviceName,
  44 + // };
33 return { 45 return {
34 unit: unit ?? presetUnit, 46 unit: unit ?? presetUnit,
35 fontColor: fontColor ?? presetFontColor, 47 fontColor: fontColor ?? presetFontColor,
36 attribute, 48 attribute,
37 attributeRename, 49 attributeRename,
  50 + showDeviceName: showDeviceName ?? presetShowDeviceName,
38 deviceName, 51 deviceName,
39 deviceRename, 52 deviceRename,
40 - showDeviceName: showDeviceName ?? presetShowDeviceName, 53 + id: deviceId,
41 }; 54 };
42 }), 55 }),
43 }; 56 };
@@ -114,40 +127,56 @@ @@ -114,40 +127,56 @@
114 // color: unref(list).map((item) => item.title.color), 127 // color: unref(list).map((item) => item.title.color),
115 } as EChartsOption); 128 } as EChartsOption);
116 }; 129 };
117 -  
118 - const updateFn: MultipleDataFetchUpdateFn = (message) => {  
119 - const { data = {} } = message;  
120 - const { dataSource } = unref(getDesign);  
121 - const series = dataSource.map((item) => {  
122 - const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;  
123 - const [latest] = data[attribute] || [];  
124 - const [_timespan, value] = latest || [];  
125 -  
126 - return {  
127 - value,  
128 - name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',  
129 - itemStyle: { color: fontColor },  
130 - tooltip: {  
131 - valueFormatter(value) {  
132 - return `${value} ${unit ?? ''}`;  
133 - }, 130 + const { forEachGroupMessage } = useReceiveMessage();
  131 + const { getNumberValue } = useReceiveValue();
  132 +
  133 + const series = ref(
  134 + unref(getDesign).dataSource.map((item) => ({
  135 + value: 0,
  136 + // name: `${
  137 + // item.showDeviceName
  138 + // ? item.deviceRename
  139 + // ? item.deviceRename
  140 + // : item.deviceName + '-' + item.attribute
  141 + // : ''
  142 + // }`,
  143 + name: `${
  144 + item.showDeviceName ? item.deviceRename || item.deviceName + '-' + item.attribute : ''
  145 + }`,
  146 + itemStyle: { color: item.fontColor },
  147 + attribute: item.attribute,
  148 + id: item.id,
  149 + tooltip: {
  150 + valueFormatter(value) {
  151 + return `${value} ${item.unit ?? ''}`;
134 }, 152 },
135 - } as SeriesOption['data']; 153 + },
  154 + }))
  155 + );
  156 +
  157 + const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
  158 + forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
  159 + series.value.forEach((item) => {
  160 + if (item.id === deviceId && item.attribute === attribute) {
  161 + item.value = getNumberValue(value);
  162 + }
  163 + });
136 }); 164 });
137 - // if (series.length > 1) {  
138 - series.push({  
139 - value: series.reduce((total: number, current: any) => total + Number(current.value), 0), 165 +
  166 + const option = {
  167 + value: series.value.reduce((total: number, current: any) => total + Number(current.value), 0),
140 itemStyle: { 168 itemStyle: {
141 color: 'none', 169 color: 'none',
142 decal: { 170 decal: {
143 symbol: 'none', 171 symbol: 'none',
144 }, 172 },
145 - }, 173 + } as any,
146 label: { 174 label: {
147 show: false, 175 show: false,
148 }, 176 },
149 - });  
150 - updateChart(series); 177 + };
  178 + // console.log([...toRaw(unref(series)), option], 'series');
  179 + updateChart([...toRaw(unref(series)), option]);
151 }; 180 };
152 181
153 useMultipleDataFetch(props, updateFn); 182 useMultipleDataFetch(props, updateFn);
@@ -79,6 +79,7 @@ @@ -79,6 +79,7 @@
79 const percentList = ref( 79 const percentList = ref(
80 props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue 80 props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue
81 ); 81 );
  82 +
82 const { forEachGroupMessage } = useReceiveMessage(); 83 const { forEachGroupMessage } = useReceiveMessage();
83 84
84 const { getNumberValue } = useReceiveValue(); 85 const { getNumberValue } = useReceiveValue();