简柏林 / thingskit-front · Commits

Commit 85df67c11c7b089b5156709a5762bba15a02bd33

Authored by xp.Huang
2 parents 0aeb47ee a332a22b

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

Fix/defect 1373

See merge request yunteng/thingskit-front!657
Inline Side-by-side
Showing 5 changed files with 155 additions and 79 deletions
... ... @@ -8,6 +8,7 @@
8 8 // import { useIntervalFn } from '@vueuse/core';
9 9 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
10 10 import { useComponentScale } from '/@/views/visual/packages/hook/useComponentScale';
  11 + import { SeriesOption } from 'echarts/types/dist/shared';
11 12
12 13 const props = defineProps<{
13 14 config: ComponentPropsConfigType<typeof option>;
... ... @@ -21,26 +22,47 @@
21 22
22 23 const getDesign = computed(() => {
23 24 const { option, persetOption } = props.config;
24   - const { componentInfo, attribute, attributeRename } = option;
  25 + const { dataSource = [] } = option || {};
25 26 const {
26   - fontColor: presetFontColor,
27   - unit: presetUnit,
28   - pointerColor: presetPointerColor,
29   - instrumentPanelColor: presetInstrumentPanelColor,
30   - progressBarCircle: presetProgressBarCircle,
31   - gradientInfo: presetGradientInfo,
  27 + fontColor: persetFontColor,
  28 + unit: persetUnit,
  29 + showDeviceName: persetShowDeviceName,
32 30 } = persetOption || {};
33   - const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =
34   - componentInfo || {};
35 31 return {
36   - unit: unit ?? presetUnit,
37   - fontColor: fontColor ?? presetFontColor,
38   - attribute: attributeRename || attribute,
39   - pointerColor: pointerColor ?? presetPointerColor,
40   - instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
41   - progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
42   - gradientInfo: gradientInfo ?? presetGradientInfo,
  32 + dataSource: dataSource.map((item) => {
  33 + const { unit, fontColor, showDeviceName } = item.componentInfo || {};
  34 + const { deviceName, deviceRename, attribute } = item;
  35 + return {
  36 + unit: unit ?? persetUnit,
  37 + fontColor: fontColor ?? persetFontColor,
  38 + showDeviceName: showDeviceName ?? persetShowDeviceName,
  39 + attribute,
  40 + deviceName,
  41 + deviceRename,
  42 + };
  43 + }),
43 44 };
  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 + // };
44 66 });
45 67
46 68 const gaugeData = [
... ... @@ -53,6 +75,7 @@
53 75 detail: {
54 76 valueAnimation: true,
55 77 offsetCenter: ['0%', '-20%'],
  78 + // formatter: `{value} ℃`,
56 79 },
57 80 },
58 81 {
... ... @@ -64,14 +87,16 @@
64 87 detail: {
65 88 valueAnimation: true,
66 89 offsetCenter: ['0%', '15%'],
  90 + // formatter: `{value} ℃`,
67 91 },
68 92 },
69 93 ];
70 94
71 95 const options = (): EChartsOption => {
72   - const { fontColor } = unref(getDesign);
  96 + // const { fontColor } = unref(getDesign);
  97 + const { fontColor } = unref(getDesign).dataSource[0] || [];
73 98 return {
74   - color: ['#ED6C0D', '#D3DB00', '#00F0F0'],
  99 + color: ['#377DFF', '#FD666D', '#00F0F0'],
75 100 series: [
76 101 {
77 102 type: 'gauge',
... ... @@ -83,11 +108,11 @@
83 108 progress: {
84 109 show: true,
85 110 overlap: false,
86   - roundCap: true,
  111 + // roundCap: true,
87 112 clip: false,
88 113 itemStyle: {
89   - // borderWidth: 1,
90   - // borderColor: '#464646',
  114 + borderWidth: 1,
  115 + borderColor: '#464646',
91 116 },
92 117 },
93 118 axisLine: {
... ... @@ -109,12 +134,12 @@
109 134 },
110 135 data: gaugeData,
111 136 title: {
112   - fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14,
  137 + fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10,
113 138 },
114 139 detail: {
115 140 width: 50,
116 141 height: 16,
117   - fontSize: unref(getRatio) ? 12 * unref(getRatio) : 12,
  142 + fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10,
118 143 color: fontColor || 'inherit',
119 144 // formatter: `{value} ${unit ?? ''}`,
120 145 },
... ... @@ -144,47 +169,86 @@
144 169 // });
145 170 // }, 3000);
146 171 // };
147   - const list = ref<any>([]);
  172 +
  173 + // const list = ref<any>([]);
148 174 const updateFn: MultipleDataFetchUpdateFn = (message) => {
149 175 const { data = {} } = message;
150   - const { dataSource } = props.config.option;
151   - // const dataList = Object.keys(data);
152   - const dataList = dataSource?.map((item) => item.attribute);
153   - list.value = dataList?.map((item, index) => {
  176 +
  177 + // const { dataSource } = props.config.option;
  178 + // const dataList = dataSource?.map((item) => item.attribute);
  179 + // list.value = dataList?.map((item, index) => {
  180 + // return {
  181 + // value: data[item][0][1],
  182 + // name: item,
  183 + // title: {
  184 + // color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
  185 + // offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
  186 + // },
  187 + // detail: {
  188 + // valueAnimation: true,
  189 + // color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
  190 + // offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
  191 + // },
  192 + // };
  193 + // });
  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');
  211 + // unref(chartInstance)?.setOption({
  212 + // series: [{ data: unref(list), pointer: { show: false } }],
  213 + // color: unref(list).map((item) => item.title.color),
  214 + // } as EChartsOption);
  215 +
  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 || [];
154 221 return {
155   - value: data[item][0][1],
156   - name: item,
  222 + value,
  223 + name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
157 224 title: {
158   - color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
  225 + color: fontColor,
159 226 offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
160 227 },
161 228 detail: {
  229 + color: fontColor,
162 230 valueAnimation: true,
163   - color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
164 231 offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
  232 + formatter: `{value} ${unit ?? ''}`,
165 233 },
166   - };
167   - });
168   - dataSource?.forEach((item, index) => {
169   - list.value.forEach((item1, index1) => {
170   - if (index == index1) {
171   - // item1.value = item1.value + item.componentInfo.unit;
172   - item1.name = item.attributeRename;
173   - item1.title.color = item.componentInfo.fontColor;
174   - item1.detail.color = item.componentInfo.fontColor;
175   - item1.detail.formatter = `{value} ${item.componentInfo.unit ?? ''}`;
176   - }
177   - });
  234 + } as SeriesOption['data'];
178 235 });
179   - // console.log(message, 'message', dataSource, 'dataSource', list, 'list');
  236 + // console.log(series, 'series');
  237 + const xAxisData = unref(getDesign).dataSource.map((item: any) => item.fontColor as any);
180 238 unref(chartInstance)?.setOption({
181   - series: [{ data: unref(list), pointer: { show: false } }],
182   - color: unref(list).map((item) => item.title.color),
183   - } as EChartsOption);
184   -
185   - // updateChart(isNaN(value as unknown as number) ? 0 : Number(value));
  239 + series: [{ data: series, pointer: { show: false } }],
  240 + color: xAxisData as any,
  241 + });
  242 + // updateChart(series, xAxisData);
186 243 };
187 244
  245 + // const updateChart = (data: SeriesOption['data'], xAxisData) => {
  246 + // unref(chartInstance)?.setOption({
  247 + // series: [{ data }],
  248 + // xAxis: { data: xAxisData },
  249 + // });
  250 + // };
  251 +
188 252 useMultipleDataFetch(props, updateFn);
189 253
190 254 onMounted(() => {
... ... @@ -201,10 +265,10 @@
201 265 series: [
202 266 {
203 267 title: {
204   - fontSize: 14 * unref(getRatio),
  268 + fontSize: 10 * unref(getRatio),
205 269 },
206 270 detail: {
207   - fontSize: 14 * unref(getRatio),
  271 + fontSize: 10 * unref(getRatio),
208 272 },
209 273 axisLine: {
210 274 lineStyle: {
... ... @@ -229,9 +293,9 @@
229 293 <main class="w-full h-full flex flex-col justify-center items-center">
230 294 <DeviceName :config="config" />
231 295 <div ref="chartRefEl" class="flex-1 w-full h-full"> </div>
232   - <div class="text-gray-500 text-xs text-center truncate">{{
  296 + <!-- <div class="text-gray-500 text-xs text-center truncate">{{
233 297 getDesign.attribute || '湿度'
234   - }}</div>
  298 + }}</div> -->
235 299 <UpdateTime :time="time" />
236 300 </main>
237 301 </template>
... ...
... ... @@ -21,16 +21,23 @@
21 21 const getDesign = computed(() => {
22 22 const { persetOption, option } = props.config;
23 23 const { dataSource = [] } = option || {};
24   - const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
  24 + const {
  25 + unit: presetUnit,
  26 + fontColor: presetFontColor,
  27 + presetShowDeviceName,
  28 + } = persetOption || {};
25 29 return {
26 30 dataSource: dataSource?.map((item) => {
27   - const { unit, fontColor } = item.componentInfo || {};
28   - const { attribute, attributeRename } = item;
  31 + const { unit, fontColor, showDeviceName } = item.componentInfo || {};
  32 + const { attribute, attributeRename, deviceName, deviceRename } = item;
29 33 return {
30 34 unit: unit ?? presetUnit,
31 35 fontColor: fontColor ?? presetFontColor,
32 36 attribute,
33 37 attributeRename,
  38 + deviceName,
  39 + deviceRename,
  40 + showDeviceName: showDeviceName ?? presetShowDeviceName,
34 41 };
35 42 }),
36 43 };
... ... @@ -103,13 +110,13 @@
103 110 const { data = {} } = message;
104 111 const { dataSource } = unref(getDesign);
105 112 const series = dataSource.map((item) => {
106   - const { attribute, attributeRename, fontColor, unit } = item;
  113 + const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;
107 114 const [latest] = data[attribute] || [];
108 115 const [_timespan, value] = latest || [];
109 116
110 117 return {
111 118 value,
112   - name: attributeRename ?? attribute,
  119 + name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
113 120 itemStyle: { color: fontColor },
114 121 tooltip: {
115 122 valueFormatter(value) {
... ...
... ... @@ -21,16 +21,23 @@
21 21 const getDesign = computed(() => {
22 22 const { persetOption, option } = props.config;
23 23 const { dataSource = [] } = option || {};
24   - const { unit: presetUnit, fontColor: presetFontColor } = persetOption || {};
  24 + const {
  25 + unit: presetUnit,
  26 + fontColor: presetFontColor,
  27 + showDeviceName: presetShowDeviceName,
  28 + } = persetOption || {};
25 29 return {
26 30 dataSource: dataSource?.map((item) => {
27   - const { unit, fontColor } = item.componentInfo || {};
28   - const { attribute, attributeRename } = item;
  31 + const { unit, fontColor, showDeviceName } = item.componentInfo || {};
  32 + const { attribute, attributeRename, deviceName, deviceRename } = item;
29 33 return {
30 34 unit: unit ?? presetUnit,
31 35 fontColor: fontColor ?? presetFontColor,
32 36 attribute,
33 37 attributeRename,
  38 + deviceName,
  39 + deviceRename,
  40 + showDeviceName: showDeviceName ?? presetShowDeviceName,
34 41 };
35 42 }),
36 43 };
... ... @@ -111,13 +118,13 @@
111 118 const { data = {} } = message;
112 119 const { dataSource } = unref(getDesign);
113 120 const series = dataSource.map((item) => {
114   - const { attribute, attributeRename, fontColor, unit } = item;
  121 + const { attribute, fontColor, unit, showDeviceName, deviceName, deviceRename } = item;
115 122 const [latest] = data[attribute] || [];
116 123 const [_timespan, value] = latest || [];
117 124
118 125 return {
119 126 value,
120   - name: attributeRename ?? attribute,
  127 + name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
121 128 itemStyle: { color: fontColor },
122 129 tooltip: {
123 130 valueFormatter(value) {
... ... @@ -139,8 +146,6 @@
139 146 show: false,
140 147 },
141 148 });
142   - // }
143   - // console.log(message, 'message', series, 'series', sum);
144 149 updateChart(series);
145 150 };
146 151
... ...
1 1 <script lang="ts" setup>
2 2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
3   - import { unref, ref, onMounted, computed, nextTick } from 'vue';
  3 + import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 4 import { useMultipleDataFetch } from '../../../hook/useSocket';
5 5 import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
6 6 import { option } from './config';
... ... @@ -58,9 +58,9 @@
58 58 axisTick: {
59 59 alignWithLabel: true,
60 60 },
61   - axisPointer: {
62   - type: 'line',
63   - },
  61 + // axisPointer: {
  62 + // type: 'line',
  63 + // },
64 64 },
65 65 grid: {
66 66 top: '15%',
... ... @@ -83,7 +83,7 @@
83 83
84 84 const initial = () => {
85 85 chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
86   - chartInstance.value.setOption(options());
  86 + toRaw(chartInstance.value).setOption(options());
87 87 };
88 88
89 89 // const randomFn = () => {
... ... @@ -96,7 +96,7 @@
96 96 // };
97 97
98 98 const updateChart = (data: SeriesOption['data'], xAxisData) => {
99   - unref(chartInstance)?.setOption({
  99 + toRaw(unref(chartInstance))?.setOption({
100 100 series: [{ data }],
101 101 xAxis: { data: xAxisData },
102 102 // color: unref(list).map((item) => item.title.color),
... ... @@ -143,14 +143,14 @@
143 143 await nextTick();
144 144
145 145 // 修改echarts大小
146   - unref(chartInstance)?.setOption({
  146 + toRaw(unref(chartInstance))?.setOption({
147 147 legend: {
148 148 textStyle: {
149 149 fontSize: 14 * unref(getRatio),
150 150 },
151 151 },
152 152 } as EChartsOption);
153   - unref(chartInstance)?.resize();
  153 + toRaw(unref(chartInstance))?.resize();
154 154 };
155 155
156 156 const { getRatio } = useComponentScale(props, resize);
... ...
1 1 <script lang="ts" setup>
2 2 import { EChartsOption, SeriesOption, ECharts, init } from 'echarts';
3   - import { unref, ref, onMounted, computed, nextTick } from 'vue';
  3 + import { unref, ref, onMounted, computed, nextTick, toRaw } from 'vue';
4 4 import { useMultipleDataFetch } from '../../../hook/useSocket';
5 5 import { ComponentPropsConfigType, MultipleDataFetchUpdateFn } from '../../../index.type';
6 6 import { option } from './config';
... ... @@ -83,7 +83,7 @@
83 83
84 84 const initial = () => {
85 85 chartInstance.value = init(unref(chartRefEl)! as HTMLElement);
86   - chartInstance.value.setOption(options());
  86 + toRaw(chartInstance.value).setOption(options());
87 87 };
88 88
89 89 // const randomFn = () => {
... ... @@ -96,7 +96,7 @@
96 96 // };
97 97
98 98 const updateChart = (data: SeriesOption['data'], yAxisData) => {
99   - unref(chartInstance)?.setOption({
  99 + toRaw(unref(chartInstance))?.setOption({
100 100 series: [{ data }],
101 101 yAxis: { data: yAxisData },
102 102 // color: unref(list).map((item) => item.title.color),
... ... @@ -143,14 +143,14 @@
143 143 await nextTick();
144 144
145 145 // 修改echarts大小
146   - unref(chartInstance)?.setOption({
  146 + toRaw(unref(chartInstance))?.setOption({
147 147 legend: {
148 148 textStyle: {
149 149 fontSize: 14 * unref(getRatio),
150 150 },
151 151 },
152 152 } as EChartsOption);
153   - unref(chartInstance)?.resize();
  153 + toRaw(unref(chartInstance))?.resize();
154 154 };
155 155
156 156 const { getRatio } = useComponentScale(props, resize);
... ...