简柏林 / thingskit-front · Commits

Commit a332a22b3826a1138cf15f441d46acd8299a5700

Authored by loveumiko
1 parent e1840703

fix: 修复看板模块设备名称未生效

Inline Side-by-side
Showing 5 changed files with 137 additions and 127 deletions
... ... @@ -8,7 +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 + import { SeriesOption } from 'echarts/types/dist/shared';
12 12
13 13 const props = defineProps<{
14 14 config: ComponentPropsConfigType<typeof option>;
... ... @@ -22,47 +22,47 @@
22 22
23 23 const getDesign = computed(() => {
24 24 const { option, persetOption } = props.config;
25   - // const { dataSource = [] } = option || {};
26   - // const {
27   - // fontColor: persetFontColor,
28   - // unit: persetUnit,
29   - // showDeviceName: persetShowDeviceName,
30   - // } = persetOption || {};
31   - // return {
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   - // }),
44   - // };
45   -
46   - const { componentInfo, attribute, attributeRename } = option;
  25 + const { dataSource = [] } = option || {};
47 26 const {
48   - fontColor: presetFontColor,
49   - unit: presetUnit,
50   - pointerColor: presetPointerColor,
51   - instrumentPanelColor: presetInstrumentPanelColor,
52   - progressBarCircle: presetProgressBarCircle,
53   - gradientInfo: presetGradientInfo,
  27 + fontColor: persetFontColor,
  28 + unit: persetUnit,
  29 + showDeviceName: persetShowDeviceName,
54 30 } = persetOption || {};
55   - const { unit, fontColor, pointerColor, gradientInfo, progressBarCircle, instrumentPanelColor } =
56   - componentInfo || {};
57 31 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,
  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 + }),
65 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 + // };
66 66 });
67 67
68 68 const gaugeData = [
... ... @@ -93,9 +93,8 @@
93 93 ];
94 94
95 95 const options = (): EChartsOption => {
96   - const { fontColor } = unref(getDesign);
97   - // const { fontColor, unit } = unref(getDesign).dataSource[0] || [];
98   - // console.log(fontColor, unit, 'unit', unref(getDesign));
  96 + // const { fontColor } = unref(getDesign);
  97 + const { fontColor } = unref(getDesign).dataSource[0] || [];
99 98 return {
100 99 color: ['#377DFF', '#FD666D', '#00F0F0'],
101 100 series: [
... ... @@ -135,12 +134,12 @@
135 134 },
136 135 data: gaugeData,
137 136 title: {
138   - fontSize: unref(getRatio) ? 14 * unref(getRatio) : 14,
  137 + fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10,
139 138 },
140 139 detail: {
141 140 width: 50,
142 141 height: 16,
143   - fontSize: unref(getRatio) ? 12 * unref(getRatio) : 12,
  142 + fontSize: unref(getRatio) ? 10 * unref(getRatio) : 10,
144 143 color: fontColor || 'inherit',
145 144 // formatter: `{value} ${unit ?? ''}`,
146 145 },
... ... @@ -171,76 +170,75 @@
171 170 // }, 3000);
172 171 // };
173 172
174   - const list = ref<any>([]);
  173 + // const list = ref<any>([]);
175 174 const updateFn: MultipleDataFetchUpdateFn = (message) => {
176 175 const { data = {} } = message;
177 176
178   - const { dataSource } = props.config.option;
179   - // const dataList = Object.keys(data);
180   - const dataList = dataSource?.map((item) => item.attribute);
181   - list.value = dataList?.map((item, index) => {
182   - return {
183   - value: data[item][0][1],
184   - name: item,
185   - title: {
186   - color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
187   - offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
188   - },
189   - detail: {
190   - valueAnimation: true,
191   - color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
192   - offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
193   - },
194   - };
195   - });
196   - dataSource?.forEach((item, index) => {
197   - list.value.forEach((item1, index1) => {
198   - console.log(item, 'item');
199   - if (index == index1) {
200   - // item1.value = item1.value + item.componentInfo.unit;
201   - item1.name = item.componentInfo.showDeviceName
202   - ? item.deviceRename
203   - ? item.deviceRename
204   - : item.deviceName
205   - : '';
206   - item1.title.color = item.componentInfo.fontColor;
207   - item1.detail.color = item.componentInfo.fontColor;
208   - item1.detail.formatter = `{value} ${item.componentInfo.unit ?? ''}`;
209   - }
210   - });
211   - });
212   - // console.log(message, 'message', dataSource, 'dataSource', list, 'list');
213   - unref(chartInstance)?.setOption({
214   - series: [{ data: unref(list), pointer: { show: false } }],
215   - color: unref(list).map((item) => item.title.color),
216   - } as EChartsOption);
217   -
218   - // const { dataSource } = unref(getDesign);
219   - // const series = dataSource.map((item, index) => {
220   - // const { unit, fontColor, showDeviceName, attribute, deviceName, deviceRename } = item;
221   - // const [latest] = data[attribute] || [];
222   - // const [_timespan, value] = latest || [];
  177 + // const { dataSource } = props.config.option;
  178 + // const dataList = dataSource?.map((item) => item.attribute);
  179 + // list.value = dataList?.map((item, index) => {
223 180 // return {
224   - // value,
225   - // name: showDeviceName ? (deviceRename ? deviceRename : deviceName) : '',
  181 + // value: data[item][0][1],
  182 + // name: item,
226 183 // title: {
227   - // color: fontColor,
  184 + // color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
228 185 // offsetCenter: index == 0 ? ['0%', '-35%'] : index == 1 ? ['0%', '0%'] : ['0%', '35%'],
229 186 // },
230 187 // detail: {
231   - // color: fontColor,
232 188 // valueAnimation: true,
  189 + // color: index == 0 ? '#ED6C0D' : index == 1 ? '#D3DB00' : '#00F0F0',
233 190 // offsetCenter: index == 0 ? ['0%', '-20%'] : index == 1 ? ['0%', '18%'] : ['0%', '50%'],
234   - // formatter: `{value} ${unit ?? ''}`,
235 191 // },
236   - // } as SeriesOption['data'];
  192 + // };
237 193 // });
238   - // const xAxisData = dataSource.map((item: any) => item.fontColor as any);
239   - // console.log(series, xAxisData, 'xAxisData');
240   - // unref(chartInstance)?.setOption({
241   - // series: [{ data: series, pointer: { show: false } }],
242   - // color: xAxisData as any,
  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 + // });
243 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 || [];
  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'];
  235 + });
  236 + // console.log(series, 'series');
  237 + const xAxisData = unref(getDesign).dataSource.map((item: any) => item.fontColor as any);
  238 + unref(chartInstance)?.setOption({
  239 + series: [{ data: series, pointer: { show: false } }],
  240 + color: xAxisData as any,
  241 + });
244 242 // updateChart(series, xAxisData);
245 243 };
246 244
... ... @@ -267,10 +265,10 @@
267 265 series: [
268 266 {
269 267 title: {
270   - fontSize: 14 * unref(getRatio),
  268 + fontSize: 10 * unref(getRatio),
271 269 },
272 270 detail: {
273   - fontSize: 14 * unref(getRatio),
  271 + fontSize: 10 * unref(getRatio),
274 272 },
275 273 axisLine: {
276 274 lineStyle: {
... ...
... ... @@ -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);
... ...