简柏林 / thingskit-front · Commits

Commit ba226a677dfab369bd6243bd4148823bc313228c

Authored by xp.Huang
2 parents 31aa89c3 e5500e54

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

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

See merge request yunteng/thingskit-front!672
Inline Side-by-side
Showing 4 changed files with 84 additions and 61 deletions
@@ -243,7 +243,6 @@ @@ -243,7 +243,6 @@
243 height: 16, 243 height: 16,
244 fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10, 244 fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10,
245 color: fontColor || 'inherit', 245 color: fontColor || 'inherit',
246 - // formatter: `{value} ${unit ?? ''}`,  
247 }, 246 },
248 }, 247 },
249 ], 248 ],
@@ -275,42 +274,16 @@ @@ -275,42 +274,16 @@
275 const { forEachGroupMessage } = useReceiveMessage(); 274 const { forEachGroupMessage } = useReceiveMessage();
276 const { getNumberValue } = useReceiveValue(); 275 const { getNumberValue } = useReceiveValue();
277 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => { 276 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
278 - // const { data = {} } = message;  
279 - // const { dataSource } = props.config.option;  
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 || [];  
285 - // return {  
286 - // value,  
287 - // name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',  
288 - // title: {  
289 - // color: fontColor,  
290 - // offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],  
291 - // },  
292 - // detail: {  
293 - // color: fontColor,  
294 - // valueAnimation: true,  
295 - // offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],  
296 - // formatter: `{value} ${unit ?? ''}`,  
297 - // },  
298 - // } as SeriesOption['data'];  
299 - // });  
300 - // // console.log(series, 'series');  
301 - // const xAxisData = unref(getDesign).dataSource.map((item: any) => item.fontColor as any);  
302 - // unref(chartInstance)?.setOption({  
303 - // series: [{ data: series, pointer: { show: false } }],  
304 - // color: xAxisData as any,  
305 - // });  
306 -  
307 forEachGroupMessage(message, deviceId, attribute, (attribute, value) => { 277 forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
  278 + console.log(value, 'value');
308 series.value.forEach((item) => { 279 series.value.forEach((item) => {
309 if (item.id === deviceId && item.attribute === attribute) { 280 if (item.id === deviceId && item.attribute === attribute) {
310 item.value = getNumberValue(value); 281 item.value = getNumberValue(value);
311 } 282 }
312 }); 283 });
  284 + console.log(value);
313 }); 285 });
  286 + console.log(series, 'series');
314 unref(chartInstance)?.setOption({ 287 unref(chartInstance)?.setOption({
315 series: [{ data: unref(series), pointer: { show: false } }], 288 series: [{ data: unref(series), pointer: { show: false } }],
316 color: unref(series).map((item) => item.title.color), 289 color: unref(series).map((item) => item.title.color),
@@ -18,7 +18,7 @@ @@ -18,7 +18,7 @@
18 }>(); 18 }>();
19 19
20 interface PercentType { 20 interface PercentType {
21 - value: number; 21 + value?: number;
22 fontColor: string; 22 fontColor: string;
23 backgroundColor: string; 23 backgroundColor: string;
24 unit: string; 24 unit: string;
@@ -26,6 +26,8 @@ @@ -26,6 +26,8 @@
26 attribute?: string; 26 attribute?: string;
27 attributeRename?: string; 27 attributeRename?: string;
28 deviceId?: string; 28 deviceId?: string;
  29 + deviceName?: string;
  30 + deviceRename?: string;
29 } 31 }
30 32
31 const defaultValue: PercentType[] = [ 33 const defaultValue: PercentType[] = [
@@ -34,6 +36,8 @@ @@ -34,6 +36,8 @@
34 fontColor: '#19eff', 36 fontColor: '#19eff',
35 backgroundColor: '#19eff', 37 backgroundColor: '#19eff',
36 unit: '℃', 38 unit: '℃',
  39 + deviceName: '温度',
  40 + attribute: '1',
37 id: buildUUID(), 41 id: buildUUID(),
38 }, 42 },
39 { 43 {
@@ -41,6 +45,8 @@ @@ -41,6 +45,8 @@
41 fontColor: '#1E8667', 45 fontColor: '#1E8667',
42 backgroundColor: '#1E8667', 46 backgroundColor: '#1E8667',
43 unit: '℃', 47 unit: '℃',
  48 + deviceName: '温度',
  49 + attribute: '3',
44 id: buildUUID(), 50 id: buildUUID(),
45 }, 51 },
46 { 52 {
@@ -48,6 +54,8 @@ @@ -48,6 +54,8 @@
48 fontColor: '#2196F3', 54 fontColor: '#2196F3',
49 backgroundColor: '#2196F3', 55 backgroundColor: '#2196F3',
50 unit: '℃', 56 unit: '℃',
  57 + deviceName: '温度',
  58 + attribute: '2',
51 id: buildUUID(), 59 id: buildUUID(),
52 }, 60 },
53 ]; 61 ];
@@ -60,15 +68,16 @@ @@ -60,15 +68,16 @@
60 fontColor: presetFontColor, 68 fontColor: presetFontColor,
61 backgroundColor: persetBackgroundColor, 69 backgroundColor: persetBackgroundColor,
62 } = persetOption || {}; 70 } = persetOption || {};
63 -  
64 return { 71 return {
65 dataSource: dataSource.map((item) => { 72 dataSource: dataSource.map((item) => {
66 const { unit, fontColor, backgroundColor } = item.componentInfo || {}; 73 const { unit, fontColor, backgroundColor } = item.componentInfo || {};
67 - const { attribute, attributeRename, deviceId } = item; 74 + const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
68 return { 75 return {
69 unit: unit ?? presetUnit, 76 unit: unit ?? presetUnit,
70 fontColor: fontColor ?? presetFontColor, 77 fontColor: fontColor ?? presetFontColor,
71 backgroundColor: backgroundColor ?? persetBackgroundColor, 78 backgroundColor: backgroundColor ?? persetBackgroundColor,
  79 + deviceName,
  80 + deviceRename,
72 attribute, 81 attribute,
73 attributeRename, 82 attributeRename,
74 id: deviceId, 83 id: deviceId,
@@ -79,6 +88,7 @@ @@ -79,6 +88,7 @@
79 const percentList = ref( 88 const percentList = ref(
80 props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue 89 props.config.option.dataSource ? unref(getDesign).dataSource : defaultValue
81 ); 90 );
  91 + console.log(percentList, 'percentList');
82 92
83 const { forEachGroupMessage } = useReceiveMessage(); 93 const { forEachGroupMessage } = useReceiveMessage();
84 94
@@ -104,8 +114,8 @@ @@ -104,8 +114,8 @@
104 114
105 <div v-for="item in percentList" :key="item.id" class="flex flex-col ml-3 mr-3 items-stretch"> 115 <div v-for="item in percentList" :key="item.id" class="flex flex-col ml-3 mr-3 items-stretch">
106 <div class="flex justify-between"> 116 <div class="flex justify-between">
107 - <div class="text-gray-500 text-lg truncate">  
108 - {{ item.attributeRename || item.attribute || '温度' }} 117 + <div class="text-gray-500 text-lg truncate" :style="{ color: item.fontColor }">
  118 + {{ item.deviceRename || item.deviceName + '-' + item.attribute || '温度' }}
109 </div> 119 </div>
110 <span class="text-lg" :style="{ color: item.fontColor }" 120 <span class="text-lg" :style="{ color: item.fontColor }"
111 >{{ item.value }} {{ item.unit }}</span 121 >{{ item.value }} {{ item.unit }}</span
@@ -44,12 +44,6 @@ @@ -44,12 +44,6 @@
44 }; 44 };
45 }, 45 },
46 }, 46 },
47 - {  
48 - field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,  
49 - label: '显示设备名称',  
50 - component: 'Checkbox',  
51 - defaultValue: option.showDeviceName,  
52 - },  
53 ], 47 ],
54 showActionButtonGroup: false, 48 showActionButtonGroup: false,
55 labelWidth: 120, 49 labelWidth: 120,
@@ -7,6 +7,8 @@ @@ -7,6 +7,8 @@
7 import { SvgIcon } from '/@/components/Icon'; 7 import { SvgIcon } from '/@/components/Icon';
8 import { computed } from 'vue'; 8 import { computed } from 'vue';
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>;
@@ -24,7 +26,8 @@ @@ -24,7 +26,8 @@
24 return { 26 return {
25 dataSource: dataSource.map((item) => { 27 dataSource: dataSource.map((item) => {
26 const { fontColor, icon, iconColor, unit } = item.componentInfo; 28 const { fontColor, icon, iconColor, unit } = item.componentInfo;
27 - const { attribute, attributeRename } = item; 29 + const { attribute, attributeRename, deviceName, deviceRename, deviceId } = item;
  30 +
28 return { 31 return {
29 unit: unit ?? persetUnit, 32 unit: unit ?? persetUnit,
30 fontColor: fontColor ?? persetFontColor, 33 fontColor: fontColor ?? persetFontColor,
@@ -32,11 +35,22 @@ @@ -32,11 +35,22 @@
32 iconColor: iconColor ?? persetIconColor, 35 iconColor: iconColor ?? persetIconColor,
33 attribute: attribute || attributeRename, 36 attribute: attribute || attributeRename,
34 attributeRename, 37 attributeRename,
  38 + deviceName,
  39 + deviceRename,
  40 + id: deviceId,
35 }; 41 };
  42 + // return {
  43 + // unit: unit ?? persetUnit,
  44 + // fontColor: fontColor ?? persetFontColor,
  45 + // icon: icon ?? persetIcon,
  46 + // iconColor: iconColor ?? persetIconColor,
  47 + // attribute: attribute || attributeRename,
  48 + // attributeRename,
  49 + // };
36 }), 50 }),
37 }; 51 };
38 }); 52 });
39 - const svgList = ref<any>([ 53 + const defaultSvgList = ref<any>([
40 { 54 {
41 value: 26.2, 55 value: 26.2,
42 name: 'wendu', 56 name: 'wendu',
@@ -55,23 +69,53 @@ @@ -55,23 +69,53 @@
55 }, 69 },
56 ]); 70 ]);
57 71
58 - const updateFn: MultipleDataFetchUpdateFn = (message) => {  
59 - const { data = {} } = message;  
60 - const { dataSource } = unref(getDesign);  
61 - svgList.value.length = 0;  
62 - svgList.value = dataSource.map((item) => {  
63 - const { icon, iconColor, unit, fontColor, attribute } = item || {};  
64 - const [latest] = data[attribute] || [];  
65 - const [_timespan, value] = latest || [];  
66 - return {  
67 - value: Number(value),  
68 - name: attribute,  
69 - icon,  
70 - unit,  
71 - iconColor,  
72 - fontColor,  
73 - }; 72 + const { forEachGroupMessage } = useReceiveMessage();
  73 + const { getNumberValue } = useReceiveValue();
  74 +
  75 + const updateSvgList = ref(
  76 + props.config.option.dataSource ? unref(getDesign).dataSource : defaultSvgList
  77 + );
  78 +
  79 + const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
  80 + // console.log(unref(getDesign).dataSource, 'dataSource');
  81 + forEachGroupMessage(message, deviceId, attribute, (attribute, value) => {
  82 + // unref(getDesign).dataSource.forEach((item) => {
  83 + // if (item.id === deviceId && item.attribute === attribute) {
  84 + // svgList.value = unref(getDesign).dataSource.map((item) => {
  85 + // return {
  86 + // value: getNumberValue(value),
  87 + // name: item.deviceRename || item.deviceName,
  88 + // icon: item.icon,
  89 + // unit: item.unit,
  90 + // fontColor: item.fontColor,
  91 + // iconColor: item.iconColor,
  92 + // };
  93 + // });
  94 + // }
  95 + updateSvgList.value.forEach((item) => {
  96 + if (item.id === deviceId && item.attribute === attribute) {
  97 + item.value = getNumberValue(value);
  98 + }
  99 + });
  100 + // });
74 }); 101 });
  102 + // console.log(unref(svgList), 'svglist');
  103 + // const { data = {} } = message;
  104 + // const { dataSource } = unref(getDesign);
  105 + // svgList.value.length = 0;
  106 + // svgList.value = dataSource.map((item) => {
  107 + // const { icon, iconColor, unit, fontColor, attribute } = item || {};
  108 + // const [latest] = data[attribute] || [];
  109 + // const [_timespan, value] = latest || [];
  110 + // return {
  111 + // value: Number(value),
  112 + // name: attribute,
  113 + // icon,
  114 + // unit,
  115 + // iconColor,
  116 + // fontColor,
  117 + // };
  118 + // });
75 }; 119 };
76 120
77 useMultipleDataFetch(props, updateFn); 121 useMultipleDataFetch(props, updateFn);
@@ -82,7 +126,7 @@ @@ -82,7 +126,7 @@
82 <DeviceName :config="config" /> 126 <DeviceName :config="config" />
83 <div 127 <div
84 style="width: 86%" 128 style="width: 86%"
85 - v-for="item in svgList" 129 + v-for="item in updateSvgList"
86 :key="item.id" 130 :key="item.id"
87 class="flex justify-between items-center" 131 class="flex justify-between items-center"
88 > 132 >
@@ -94,7 +138,9 @@ @@ -94,7 +138,9 @@
94 :style="{ color: item.iconColor }" 138 :style="{ color: item.iconColor }"
95 /> 139 />
96 140
97 - <div class="text-gray-500 text-lg truncate ml-6">{{ item.attribute || '温度' }}</div> 141 + <div class="text-gray-500 text-lg truncate ml-6">{{
  142 + item.deviceRename || item.deviceName || '温度'
  143 + }}</div>
98 </div> 144 </div>
99 145
100 <h1 class="font-bold text-xl m-2 truncate" :style="{ color: item.fontColor }"> 146 <h1 class="font-bold text-xl m-2 truncate" :style="{ color: item.fontColor }">