简柏林 / thingskit-front · Commits

Commit dc75ef9bb1b4f58e2c95b65d796323da747a0c46

Authored by loveumiko
1 parent 6b2e4aaa

feat: 看板仪表盘组件增加选取范围的字段

Inline Side-by-side
Showing 19 changed files with 230 additions and 78 deletions
@@ -123,6 +123,12 @@ @@ -123,6 +123,12 @@
123 }; 123 };
124 124
125 const handleCopy = (record: DataSourceType) => { 125 const handleCopy = (record: DataSourceType) => {
  126 + const { key } = props.componentConfig || {};
  127 + if (key == 'HumidityComponent2' && props.dataSource.length >= 6) {
  128 + createMessage.warning('绑定的数据源不能超过6条~');
  129 + return;
  130 + }
  131 +
126 if (props.dataSource.length >= DATA_SOURCE_LIMIT_NUMBER) { 132 if (props.dataSource.length >= DATA_SOURCE_LIMIT_NUMBER) {
127 createMessage.warning('绑定的数据源不能超过10条~'); 133 createMessage.warning('绑定的数据源不能超过10条~');
128 return; 134 return;
@@ -113,6 +113,11 @@ @@ -113,6 +113,11 @@
113 }; 113 };
114 114
115 const handleNewRecord = () => { 115 const handleNewRecord = () => {
  116 + const { componentKey } = unref(selectWidgetKeys);
  117 + if (componentKey === 'HumidityComponent2' && unref(dataSource).length >= 6) {
  118 + createMessage.warning('绑定的数据源不能超过6条~');
  119 + return;
  120 + }
116 if (unref(dataSource).length >= DATA_SOURCE_LIMIT_NUMBER) { 121 if (unref(dataSource).length >= DATA_SOURCE_LIMIT_NUMBER) {
117 createMessage.warning('绑定的数据源不能超过10条~'); 122 createMessage.warning('绑定的数据源不能超过10条~');
118 return; 123 return;
@@ -22,6 +22,7 @@ export enum GradientColor { @@ -22,6 +22,7 @@ export enum GradientColor {
22 export const option: PublicPresetOptions = { 22 export const option: PublicPresetOptions = {
23 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 23 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
24 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 24 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  25 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
25 [ComponentConfigFieldEnum.SHOW_TIME]: false, 26 [ComponentConfigFieldEnum.SHOW_TIME]: false,
26 [ComponentConfigFieldEnum.UNIT]: '℃', 27 [ComponentConfigFieldEnum.UNIT]: '℃',
27 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', 28 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
1 <script lang="ts" setup> 1 <script lang="ts" setup>
  2 + import { nextTick } from 'vue';
2 import { ComponentConfigFieldEnum } from '../../../enum'; 3 import { ComponentConfigFieldEnum } from '../../../enum';
3 import { option, Gradient, GradientColor } from './config'; 4 import { option, Gradient, GradientColor } from './config';
4 import { useForm, BasicForm } from '/@/components/Form'; 5 import { useForm, BasicForm } from '/@/components/Form';
@@ -29,10 +30,18 @@ @@ -29,10 +30,18 @@
29 defaultValue: option.pointerColor, 30 defaultValue: option.pointerColor,
30 }, 31 },
31 { 32 {
32 - field: ComponentConfigFieldEnum.UNIT,  
33 - label: '数值单位',  
34 - component: 'Input',  
35 - defaultValue: option.unit, 33 + field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
  34 + label: '起始颜色',
  35 + component: 'ColorPicker',
  36 + changeEvent: 'update:value',
  37 + defaultValue: GradientColor.FIRST,
  38 + },
  39 + {
  40 + field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR,
  41 + label: '结尾颜色',
  42 + component: 'ColorPicker',
  43 + changeEvent: 'update:value',
  44 + defaultValue: GradientColor.SECOND,
36 }, 45 },
37 // { 46 // {
38 // field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH, 47 // field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH,
@@ -55,18 +64,31 @@ @@ -55,18 +64,31 @@
55 }, 64 },
56 65
57 { 66 {
58 - field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,  
59 - label: '起始颜色',  
60 - component: 'ColorPicker',  
61 - changeEvent: 'update:value',  
62 - defaultValue: GradientColor.FIRST, 67 + field: ComponentConfigFieldEnum.UNIT,
  68 + label: '数值单位',
  69 + component: 'Input',
  70 + defaultValue: option.unit,
63 }, 71 },
64 { 72 {
65 - field: ComponentConfigFieldEnum.SECOND_PHASE_COLOR,  
66 - label: '结尾颜色',  
67 - component: 'ColorPicker',  
68 - changeEvent: 'update:value',  
69 - defaultValue: GradientColor.SECOND, 73 + field: ComponentConfigFieldEnum.MAX_NUMBER,
  74 + label: '最大值',
  75 + component: 'InputNumber',
  76 + defaultValue: 100,
  77 + componentProps: ({ formActionType }) => {
  78 + const { setFieldsValue } = formActionType;
  79 + return {
  80 + placeholder: '请输入最大值',
  81 + min: 100,
  82 + onChange: async (e) => {
  83 + if (!e) {
  84 + await nextTick();
  85 + setFieldsValue({
  86 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  87 + });
  88 + }
  89 + },
  90 + };
  91 + },
70 }, 92 },
71 ], 93 ],
72 showActionButtonGroup: false, 94 showActionButtonGroup: false,
@@ -97,12 +119,14 @@ @@ -97,12 +119,14 @@
97 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 119 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
98 showTime: item[ComponentConfigFieldEnum.SHOW_TIME], 120 showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
99 pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR], 121 pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
  122 + maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
100 } as ComponentInfo; 123 } as ComponentInfo;
101 }; 124 };
102 125
103 const setFormValues = (data: Recordable) => { 126 const setFormValues = (data: Recordable) => {
104 // return setFieldsValue(data); 127 // return setFieldsValue(data);
105 - const { gradientInfo, unit, fontColor, showDeviceName, pointerColor, showTime } = data; 128 + const { gradientInfo, unit, fontColor, showDeviceName, pointerColor, showTime, maxNumber } =
  129 + data;
106 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 130 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
107 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 131 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
108 132
@@ -116,6 +140,7 @@ @@ -116,6 +140,7 @@
116 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1, 140 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
117 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color, 141 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
118 [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor, 142 [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor,
  143 + [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
119 }; 144 };
120 return setFieldsValue(value); 145 return setFieldsValue(value);
121 }; 146 };
@@ -31,9 +31,17 @@ @@ -31,9 +31,17 @@
31 instrumentPanelColor: presetInstrumentPanelColor, 31 instrumentPanelColor: presetInstrumentPanelColor,
32 gradientInfo: presetGradientInfo, 32 gradientInfo: presetGradientInfo,
33 showTime: persetShowTime, 33 showTime: persetShowTime,
  34 + maxNumber: persetMaxNumber,
34 } = persetOption || {}; 35 } = persetOption || {};
35 - const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo, showTime } =  
36 - componentInfo || {}; 36 + const {
  37 + unit,
  38 + fontColor,
  39 + pointerColor,
  40 + instrumentPanelColor,
  41 + gradientInfo,
  42 + showTime,
  43 + maxNumber,
  44 + } = componentInfo || {};
37 return { 45 return {
38 unit: unit ?? presetUnit, 46 unit: unit ?? presetUnit,
39 fontColor: fontColor ?? presetFontColor, 47 fontColor: fontColor ?? presetFontColor,
@@ -42,6 +50,7 @@ @@ -42,6 +50,7 @@
42 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 50 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
43 gradientInfo: gradientInfo ?? presetGradientInfo, 51 gradientInfo: gradientInfo ?? presetGradientInfo,
44 showTime: showTime ?? persetShowTime, 52 showTime: showTime ?? persetShowTime,
  53 + maxNumber: maxNumber || persetMaxNumber,
45 }; 54 };
46 }); 55 });
47 56
@@ -49,13 +58,6 @@ @@ -49,13 +58,6 @@
49 if (!isArray(array)) { 58 if (!isArray(array)) {
50 return; 59 return;
51 } 60 }
52 - // const item: any = [];  
53 - // array.forEach((value, index) => {  
54 - // item[index] =  
55 - // index == 0  
56 - // ? { offset: value.value == 100 ? 1 : 0, color: value.color }  
57 - // : { offset: Number((value.value / 100).toFixed(1)), color: value.color };  
58 - // });  
59 const colorList = array.map((item) => ({ 61 const colorList = array.map((item) => ({
60 offset: item.value, 62 offset: item.value,
61 color: item.color, 63 color: item.color,
@@ -64,7 +66,7 @@ @@ -64,7 +66,7 @@
64 }; 66 };
65 67
66 const options = (): EChartsOption => { 68 const options = (): EChartsOption => {
67 - const { unit, fontColor, pointerColor, gradientInfo } = unref(getDesign); 69 + const { unit, fontColor, pointerColor, gradientInfo, maxNumber } = unref(getDesign);
68 70
69 const instrumentPanelColor = getStageColor(gradientInfo); 71 const instrumentPanelColor = getStageColor(gradientInfo);
70 // getStageColor(gradientInfo); 72 // getStageColor(gradientInfo);
@@ -72,6 +74,8 @@ @@ -72,6 +74,8 @@
72 series: [ 74 series: [
73 { 75 {
74 type: 'gauge', 76 type: 'gauge',
  77 + min: 0,
  78 + max: maxNumber,
75 center: ['50%', '60%'], 79 center: ['50%', '60%'],
76 startAngle: 150, 80 startAngle: 150,
77 endAngle: 30, 81 endAngle: 30,
@@ -25,6 +25,7 @@ export const option: PublicPresetOptions = { @@ -25,6 +25,7 @@ export const option: PublicPresetOptions = {
25 [ComponentConfigFieldEnum.UNIT]: '℃', 25 [ComponentConfigFieldEnum.UNIT]: '℃',
26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6', 26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
27 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5', 27 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
  28 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
28 [ComponentConfigFieldEnum.GRADIENT_INFO]: [ 29 [ComponentConfigFieldEnum.GRADIENT_INFO]: [
29 { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST }, 30 { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST },
30 { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND }, 31 { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND },
1 <script lang="ts" setup> 1 <script lang="ts" setup>
  2 + import { nextTick } from 'vue';
2 import { ComponentConfigFieldEnum } from '../../../enum'; 3 import { ComponentConfigFieldEnum } from '../../../enum';
3 import { option, Gradient, GradientColor } from './config'; 4 import { option, Gradient, GradientColor } from './config';
4 import { useForm, BasicForm } from '/@/components/Form'; 5 import { useForm, BasicForm } from '/@/components/Form';
@@ -22,10 +23,10 @@ @@ -22,10 +23,10 @@
22 defaultValue: option.fontColor, 23 defaultValue: option.fontColor,
23 }, 24 },
24 { 25 {
25 - field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,  
26 - label: '显示进度条圆形',  
27 - component: 'Checkbox',  
28 - defaultValue: option.progressBarCircle, 26 + field: ComponentConfigFieldEnum.UNIT,
  27 + label: '数值单位',
  28 + component: 'Input',
  29 + defaultValue: option.unit,
29 }, 30 },
30 { 31 {
31 field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR, 32 field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
@@ -42,10 +43,10 @@ @@ -42,10 +43,10 @@
42 defaultValue: GradientColor.SECOND, 43 defaultValue: GradientColor.SECOND,
43 }, 44 },
44 { 45 {
45 - field: ComponentConfigFieldEnum.UNIT,  
46 - label: '数值单位',  
47 - component: 'Input',  
48 - defaultValue: option.unit, 46 + field: ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE,
  47 + label: '显示进度条圆形',
  48 + component: 'Checkbox',
  49 + defaultValue: option.progressBarCircle,
49 }, 50 },
50 { 51 {
51 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, 52 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
@@ -59,6 +60,27 @@ @@ -59,6 +60,27 @@
59 component: 'Checkbox', 60 component: 'Checkbox',
60 defaultValue: option.showTime, 61 defaultValue: option.showTime,
61 }, 62 },
  63 + {
  64 + field: ComponentConfigFieldEnum.MAX_NUMBER,
  65 + label: '最大值',
  66 + component: 'InputNumber',
  67 + defaultValue: 100,
  68 + componentProps: ({ formActionType }) => {
  69 + const { setFieldsValue } = formActionType;
  70 + return {
  71 + placeholder: '请输入最大值',
  72 + min: 100,
  73 + onChange: async (e) => {
  74 + if (!e) {
  75 + await nextTick();
  76 + setFieldsValue({
  77 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  78 + });
  79 + }
  80 + },
  81 + };
  82 + },
  83 + },
62 ], 84 ],
63 showActionButtonGroup: false, 85 showActionButtonGroup: false,
64 labelWidth: 120, 86 labelWidth: 120,
@@ -88,12 +110,21 @@ @@ -88,12 +110,21 @@
88 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 110 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
89 showTime: item[ComponentConfigFieldEnum.SHOW_TIME], 111 showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
90 progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE], 112 progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE],
  113 + maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
91 } as ComponentInfo; 114 } as ComponentInfo;
92 }; 115 };
93 116
94 const setFormValues = (data: Recordable) => { 117 const setFormValues = (data: Recordable) => {
95 // return setFieldsValue(data); 118 // return setFieldsValue(data);
96 - const { gradientInfo, unit, fontColor, showDeviceName, progressBarCircle, showTime } = data; 119 + const {
  120 + gradientInfo,
  121 + unit,
  122 + fontColor,
  123 + showDeviceName,
  124 + progressBarCircle,
  125 + showTime,
  126 + maxNumber,
  127 + } = data;
97 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 128 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
98 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 129 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
99 130
@@ -107,6 +138,7 @@ @@ -107,6 +138,7 @@
107 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1, 138 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
108 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color, 139 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
109 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle, 140 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle,
  141 + [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
110 }; 142 };
111 return setFieldsValue(value); 143 return setFieldsValue(value);
112 }; 144 };
@@ -32,6 +32,7 @@ @@ -32,6 +32,7 @@
32 progressBarCircle: presetProgressBarCircle, 32 progressBarCircle: presetProgressBarCircle,
33 gradientInfo: presetGradientInfo, 33 gradientInfo: presetGradientInfo,
34 showTime: persetShowTime, 34 showTime: persetShowTime,
  35 + maxNumber: persetMaxNumber,
35 } = persetOption || {}; 36 } = persetOption || {};
36 const { 37 const {
37 unit, 38 unit,
@@ -41,6 +42,7 @@ @@ -41,6 +42,7 @@
41 progressBarCircle, 42 progressBarCircle,
42 instrumentPanelColor, 43 instrumentPanelColor,
43 showTime, 44 showTime,
  45 + maxNumber,
44 } = componentInfo || {}; 46 } = componentInfo || {};
45 return { 47 return {
46 unit: unit ?? presetUnit, 48 unit: unit ?? presetUnit,
@@ -51,6 +53,7 @@ @@ -51,6 +53,7 @@
51 progressBarCircle: progressBarCircle ?? presetProgressBarCircle, 53 progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
52 gradientInfo: gradientInfo ?? presetGradientInfo, 54 gradientInfo: gradientInfo ?? presetGradientInfo,
53 showTime: showTime ?? persetShowTime, 55 showTime: showTime ?? persetShowTime,
  56 + maxNumber: maxNumber || persetMaxNumber,
54 }; 57 };
55 }); 58 });
56 59
@@ -68,7 +71,7 @@ @@ -68,7 +71,7 @@
68 const titleValue = ref<number>(20); 71 const titleValue = ref<number>(20);
69 72
70 const options = (): EChartsOption => { 73 const options = (): EChartsOption => {
71 - const { unit, fontColor, progressBarCircle, gradientInfo } = unref(getDesign); 74 + const { unit, fontColor, progressBarCircle, gradientInfo, maxNumber } = unref(getDesign);
72 const instrumentPanelColor = getStageColor(gradientInfo); 75 const instrumentPanelColor = getStageColor(gradientInfo);
73 return { 76 return {
74 title: { 77 title: {
@@ -85,6 +88,8 @@ @@ -85,6 +88,8 @@
85 { 88 {
86 type: 'gauge', 89 type: 'gauge',
87 center: ['50%', '50%'], 90 center: ['50%', '50%'],
  91 + min: 0,
  92 + max: maxNumber,
88 startAngle: '90', 93 startAngle: '90',
89 endAngle: '-270', 94 endAngle: '-270',
90 progress: { 95 progress: {
@@ -64,7 +64,7 @@ @@ -64,7 +64,7 @@
64 case 1: 64 case 1:
65 return (offsetList.value = [ 65 return (offsetList.value = [
66 ['0%', '0%'], 66 ['0%', '0%'],
67 - ['0%', '10%'], 67 + ['0%', '15%'],
68 ]); 68 ]);
69 break; 69 break;
70 case 2: 70 case 2:
@@ -119,7 +119,7 @@ @@ -119,7 +119,7 @@
119 : ['0%', '60%'], 119 : ['0%', '60%'],
120 ]); 120 ]);
121 break; 121 break;
122 - case 6 || 7 || 8 || 9 || 10: 122 + case 6:
123 return (offsetList.value = [ 123 return (offsetList.value = [
124 index == 0 124 index == 0
125 ? ['0%', '-55%'] 125 ? ['0%', '-55%']
@@ -256,23 +256,6 @@ @@ -256,23 +256,6 @@
256 chartInstance.value.setOption(options()); 256 chartInstance.value.setOption(options());
257 }; 257 };
258 258
259 - // const randomFn = () => {  
260 - // gaugeData[0].value = +(Math.random() * 100).toFixed(2);  
261 - // gaugeData[1].value = +(Math.random() * 100).toFixed(2);  
262 - // useIntervalFn(() => {  
263 - // unref(chartInstance)?.setOption({  
264 - // series: [  
265 - // {  
266 - // data: gaugeData,  
267 - // pointer: {  
268 - // show: false,  
269 - // },  
270 - // },  
271 - // ],  
272 - // });  
273 - // }, 3000);  
274 - // };  
275 -  
276 const { forEachGroupMessage } = useReceiveMessage(); 259 const { forEachGroupMessage } = useReceiveMessage();
277 const { getNumberValue } = useReceiveValue(); 260 const { getNumberValue } = useReceiveValue();
278 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => { 261 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
@@ -21,6 +21,7 @@ export const option: PublicPresetOptions = { @@ -21,6 +21,7 @@ export const option: PublicPresetOptions = {
21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
23 [ComponentConfigFieldEnum.SHOW_TIME]: false, 23 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  24 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
24 [ComponentConfigFieldEnum.UNIT]: 'kw', 25 [ComponentConfigFieldEnum.UNIT]: 'kw',
25 }; 26 };
26 27
1 <script lang="ts" setup> 1 <script lang="ts" setup>
  2 + import { nextTick } from 'vue';
2 import { ComponentConfigFieldEnum } from '../../../enum'; 3 import { ComponentConfigFieldEnum } from '../../../enum';
3 import { option } from './config'; 4 import { option } from './config';
4 import { useForm, BasicForm } from '/@/components/Form'; 5 import { useForm, BasicForm } from '/@/components/Form';
@@ -32,6 +33,27 @@ @@ -32,6 +33,27 @@
32 component: 'Checkbox', 33 component: 'Checkbox',
33 defaultValue: option.showTime, 34 defaultValue: option.showTime,
34 }, 35 },
  36 + {
  37 + field: ComponentConfigFieldEnum.MAX_NUMBER,
  38 + label: '最大值',
  39 + component: 'InputNumber',
  40 + defaultValue: 100,
  41 + componentProps: ({ formActionType }) => {
  42 + const { setFieldsValue } = formActionType;
  43 + return {
  44 + placeholder: '请输入最大值',
  45 + min: 100,
  46 + onChange: async (e) => {
  47 + if (!e) {
  48 + await nextTick();
  49 + setFieldsValue({
  50 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  51 + });
  52 + }
  53 + },
  54 + };
  55 + },
  56 + },
35 ], 57 ],
36 showActionButtonGroup: false, 58 showActionButtonGroup: false,
37 labelWidth: 120, 59 labelWidth: 120,
@@ -48,18 +70,20 @@ @@ -48,18 +70,20 @@
48 unit: item[ComponentConfigFieldEnum.UNIT], 70 unit: item[ComponentConfigFieldEnum.UNIT],
49 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 71 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
50 showTime: item[ComponentConfigFieldEnum.SHOW_TIME], 72 showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
  73 + maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
51 } as ComponentInfo; 74 } as ComponentInfo;
52 }; 75 };
53 76
54 const setFormValues = (data: Recordable) => { 77 const setFormValues = (data: Recordable) => {
55 // return setFieldsValue(data); 78 // return setFieldsValue(data);
56 - const { unit, fontColor, showDeviceName, showTime } = data; 79 + const { unit, fontColor, showDeviceName, showTime, maxNumber } = data;
57 80
58 const value = { 81 const value = {
59 [ComponentConfigFieldEnum.UNIT]: unit, 82 [ComponentConfigFieldEnum.UNIT]: unit,
60 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 83 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
61 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 84 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
62 [ComponentConfigFieldEnum.SHOW_TIME]: showTime, 85 [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
  86 + [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
63 }; 87 };
64 return setFieldsValue(value); 88 return setFieldsValue(value);
65 }; 89 };
@@ -30,9 +30,17 @@ @@ -30,9 +30,17 @@
30 instrumentPanelColor: presetInstrumentPanelColor, 30 instrumentPanelColor: presetInstrumentPanelColor,
31 gradientInfo: presetGradientInfo, 31 gradientInfo: presetGradientInfo,
32 showTime: persetShowTime, 32 showTime: persetShowTime,
  33 + maxNumber: persetMaxNumber,
33 } = persetOption || {}; 34 } = persetOption || {};
34 - const { unit, fontColor, pointerColor, instrumentPanelColor, gradientInfo, showTime } =  
35 - componentInfo || {}; 35 + const {
  36 + unit,
  37 + fontColor,
  38 + pointerColor,
  39 + instrumentPanelColor,
  40 + gradientInfo,
  41 + showTime,
  42 + maxNumber,
  43 + } = componentInfo || {};
36 return { 44 return {
37 unit: unit ?? presetUnit, 45 unit: unit ?? presetUnit,
38 fontColor: fontColor ?? presetFontColor, 46 fontColor: fontColor ?? presetFontColor,
@@ -41,17 +49,20 @@ @@ -41,17 +49,20 @@
41 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor, 49 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
42 gradientInfo: gradientInfo ?? presetGradientInfo, 50 gradientInfo: gradientInfo ?? presetGradientInfo,
43 showTime: showTime ?? persetShowTime, 51 showTime: showTime ?? persetShowTime,
  52 + maxNumber: maxNumber || persetMaxNumber,
44 }; 53 };
45 }); 54 });
46 55
47 const options = (): EChartsOption => { 56 const options = (): EChartsOption => {
48 - const { unit, fontColor, pointerColor } = unref(getDesign); 57 + const { unit, fontColor, pointerColor, maxNumber } = unref(getDesign);
49 58
50 // getStageColor(gradientInfo); 59 // getStageColor(gradientInfo);
51 return { 60 return {
52 series: [ 61 series: [
53 { 62 {
54 type: 'gauge', 63 type: 'gauge',
  64 + min: 0,
  65 + max: maxNumber,
55 progress: { 66 progress: {
56 show: true, 67 show: true,
57 width: unref(getRatio) ? 6 * unref(getRatio) : 6, 68 width: unref(getRatio) ? 6 * unref(getRatio) : 6,
@@ -13,6 +13,7 @@ export const option: PublicPresetOptions = { @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347', 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
15 [ComponentConfigFieldEnum.SHOW_TIME]: false, 15 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  16 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
16 [ComponentConfigFieldEnum.UNIT]: '℃', 17 [ComponentConfigFieldEnum.UNIT]: '℃',
17 }; 18 };
18 19
1 <script lang="ts" setup> 1 <script lang="ts" setup>
  2 + import { nextTick } from 'vue';
2 import { ComponentConfigFieldEnum } from '../../../enum'; 3 import { ComponentConfigFieldEnum } from '../../../enum';
3 import { option } from './config'; 4 import { option } from './config';
4 import { useForm, BasicForm } from '/@/components/Form'; 5 import { useForm, BasicForm } from '/@/components/Form';
@@ -31,6 +32,27 @@ @@ -31,6 +32,27 @@
31 component: 'Checkbox', 32 component: 'Checkbox',
32 defaultValue: option.showTime, 33 defaultValue: option.showTime,
33 }, 34 },
  35 + {
  36 + field: ComponentConfigFieldEnum.MAX_NUMBER,
  37 + label: '最大值',
  38 + component: 'InputNumber',
  39 + defaultValue: 100,
  40 + componentProps: ({ formActionType }) => {
  41 + const { setFieldsValue } = formActionType;
  42 + return {
  43 + placeholder: '请输入最大值',
  44 + min: 100,
  45 + onChange: async (e) => {
  46 + if (!e) {
  47 + await nextTick();
  48 + setFieldsValue({
  49 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  50 + });
  51 + }
  52 + },
  53 + };
  54 + },
  55 + },
34 ], 56 ],
35 showActionButtonGroup: false, 57 showActionButtonGroup: false,
36 labelWidth: 120, 58 labelWidth: 120,
@@ -31,28 +31,30 @@ @@ -31,28 +31,30 @@
31 fontColor: presetFontColor, 31 fontColor: presetFontColor,
32 unit: presetUnit, 32 unit: presetUnit,
33 showTime: persetShowTime, 33 showTime: persetShowTime,
  34 + maxNumber: persetMaxNumber,
34 } = persetOption || {}; 35 } = persetOption || {};
35 - const { unit, fontColor, showTime } = componentInfo || {}; 36 + const { unit, fontColor, showTime, maxNumber } = componentInfo || {};
36 return { 37 return {
37 unit: unit ?? presetUnit, 38 unit: unit ?? presetUnit,
38 fontColor: fontColor ?? presetFontColor, 39 fontColor: fontColor ?? presetFontColor,
39 attribute: attributeRename || attributeName || attribute, 40 attribute: attributeRename || attributeName || attribute,
40 showTime: persetShowTime || showTime, 41 showTime: persetShowTime || showTime,
  42 + maxNumber: maxNumber || persetMaxNumber,
41 }; 43 };
42 }); 44 });
43 45
44 const options = (): EChartsOption => { 46 const options = (): EChartsOption => {
45 - const { unit, fontColor } = unref(getDesign); 47 + const { unit, fontColor, maxNumber } = unref(getDesign);
46 return { 48 return {
47 series: [ 49 series: [
48 { 50 {
49 type: 'gauge', 51 type: 'gauge',
  52 + min: 0,
  53 + max: maxNumber,
50 radius: '50%', 54 radius: '50%',
51 center: ['50%', '60%'], 55 center: ['50%', '60%'],
52 startAngle: 200, 56 startAngle: 200,
53 endAngle: -20, 57 endAngle: -20,
54 - min: 0,  
55 - max: 100,  
56 splitNumber: 10, 58 splitNumber: 10,
57 itemStyle: { 59 itemStyle: {
58 color: fontColor, 60 color: fontColor,
@@ -120,7 +122,7 @@ @@ -120,7 +122,7 @@
120 startAngle: 200, 122 startAngle: 200,
121 endAngle: -20, 123 endAngle: -20,
122 min: 0, 124 min: 0,
123 - max: 100, 125 + max: maxNumber,
124 itemStyle: { 126 itemStyle: {
125 color: fontColor, 127 color: fontColor,
126 }, 128 },
@@ -30,6 +30,7 @@ export const option: PublicPresetOptions = { @@ -30,6 +30,7 @@ export const option: PublicPresetOptions = {
30 [ComponentConfigFieldEnum.UNIT]: 'km/h', 30 [ComponentConfigFieldEnum.UNIT]: 'km/h',
31 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 31 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
32 [ComponentConfigFieldEnum.SHOW_TIME]: false, 32 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  33 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
33 }; 34 };
34 35
35 export default class Config extends PublicConfigClass implements CreateComponentType { 36 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -4,6 +4,7 @@ @@ -4,6 +4,7 @@
4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type'; 4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
5 import { Gradient, GradientColor, option } from './config'; 5 import { Gradient, GradientColor, option } from './config';
6 import { ComponentInfo } from '/@/views/visual/palette/types'; 6 import { ComponentInfo } from '/@/views/visual/palette/types';
  7 + import { nextTick } from 'vue';
7 8
8 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ 9 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
9 schemas: [ 10 schemas: [
@@ -87,6 +88,27 @@ @@ -87,6 +88,27 @@
87 component: 'Checkbox', 88 component: 'Checkbox',
88 defaultValue: option.showTime, 89 defaultValue: option.showTime,
89 }, 90 },
  91 + {
  92 + field: ComponentConfigFieldEnum.MAX_NUMBER,
  93 + label: '最大值',
  94 + component: 'InputNumber',
  95 + defaultValue: 100,
  96 + componentProps: ({ formActionType }) => {
  97 + const { setFieldsValue } = formActionType;
  98 + return {
  99 + placeholder: '请输入最大值',
  100 + min: 100,
  101 + onChange: async (e) => {
  102 + if (!e) {
  103 + await nextTick();
  104 + setFieldsValue({
  105 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  106 + });
  107 + }
  108 + },
  109 + };
  110 + },
  111 + },
90 ], 112 ],
91 showActionButtonGroup: false, 113 showActionButtonGroup: false,
92 labelWidth: 120, 114 labelWidth: 120,
@@ -119,11 +141,12 @@ @@ -119,11 +141,12 @@
119 unit: value[ComponentConfigFieldEnum.UNIT], 141 unit: value[ComponentConfigFieldEnum.UNIT],
120 showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME], 142 showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
121 showTime: value[ComponentConfigFieldEnum.SHOW_TIME], 143 showTime: value[ComponentConfigFieldEnum.SHOW_TIME],
  144 + maxNumber: value[ComponentConfigFieldEnum.MAX_NUMBER],
122 } as ComponentInfo; 145 } as ComponentInfo;
123 }; 146 };
124 147
125 const setFormValues = (data: ComponentInfo) => { 148 const setFormValues = (data: ComponentInfo) => {
126 - const { gradientInfo, unit, fontColor, showDeviceName, showTime } = data; 149 + const { gradientInfo, unit, fontColor, showDeviceName, showTime, maxNumber } = data;
127 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST); 150 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
128 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND); 151 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
129 const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD); 152 const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD);
@@ -132,6 +155,7 @@ @@ -132,6 +155,7 @@
132 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor, 155 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
133 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName, 156 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
134 [ComponentConfigFieldEnum.SHOW_TIME]: showTime, 157 [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
  158 + [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
135 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value, 159 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value,
136 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color, 160 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
137 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value, 161 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value,
@@ -37,15 +37,17 @@ @@ -37,15 +37,17 @@
37 unit: presetUnit, 37 unit: presetUnit,
38 gradientInfo: presetGradientInfo, 38 gradientInfo: presetGradientInfo,
39 showTime: persetShowTime, 39 showTime: persetShowTime,
  40 + maxNumber: persetMaxNumber,
40 } = persetOption || {}; 41 } = persetOption || {};
41 42
42 - const { unit, fontColor, gradientInfo, showTime } = componentInfo || {}; 43 + const { unit, fontColor, gradientInfo, showTime, maxNumber } = componentInfo || {};
43 return { 44 return {
44 unit: unit ?? presetUnit, 45 unit: unit ?? presetUnit,
45 fontColor: fontColor ?? presetFontColor, 46 fontColor: fontColor ?? presetFontColor,
46 gradientInfo: gradientInfo ?? presetGradientInfo, 47 gradientInfo: gradientInfo ?? presetGradientInfo,
47 attribute: attributeRename || attributeName || attribute, 48 attribute: attributeRename || attributeName || attribute,
48 showTime: showTime || persetShowTime, 49 showTime: showTime || persetShowTime,
  50 + maxNumber: maxNumber || persetMaxNumber,
49 }; 51 };
50 }); 52 });
51 53
@@ -55,7 +57,7 @@ @@ -55,7 +57,7 @@
55 }; 57 };
56 58
57 const options = (): EChartsOption => { 59 const options = (): EChartsOption => {
58 - const { gradientInfo, unit, fontColor } = unref(getDesign); 60 + const { gradientInfo, unit, fontColor, maxNumber } = unref(getDesign);
59 const firstRecord = getGradient(Gradient.FIRST, gradientInfo); 61 const firstRecord = getGradient(Gradient.FIRST, gradientInfo);
60 const secondRecord = getGradient(Gradient.SECOND, gradientInfo); 62 const secondRecord = getGradient(Gradient.SECOND, gradientInfo);
61 const thirdRecord = getGradient(Gradient.THIRD, gradientInfo); 63 const thirdRecord = getGradient(Gradient.THIRD, gradientInfo);
@@ -69,18 +71,18 @@ @@ -69,18 +71,18 @@
69 .join('') 71 .join('')
70 ); 72 );
71 73
72 - const firstGradient = firstRecord?.value ? firstRecord.value / max : 0.3;  
73 - const secondGradient = secondRecord?.value ? secondRecord.value / max : 0.7; 74 + const firstGradient = firstRecord?.value ? firstRecord.value / maxNumber : 0.3;
  75 + const secondGradient = secondRecord?.value ? secondRecord.value / maxNumber : 0.7;
74 76
75 return { 77 return {
76 series: [ 78 series: [
77 { 79 {
78 type: 'gauge', 80 type: 'gauge',
79 min: 0, 81 min: 0,
80 - max, 82 + max: maxNumber,
81 axisLine: { 83 axisLine: {
82 lineStyle: { 84 lineStyle: {
83 - width: 20, 85 + width: unref(getRatio) ? 20 * unref(getRatio) : 20,
84 color: [ 86 color: [
85 [firstGradient, firstRecord?.color || GradientColor.FIRST], 87 [firstGradient, firstRecord?.color || GradientColor.FIRST],
86 [secondGradient, secondRecord?.color || GradientColor.SECOND], 88 [secondGradient, secondRecord?.color || GradientColor.SECOND],
@@ -94,33 +96,33 @@ @@ -94,33 +96,33 @@
94 }, 96 },
95 }, 97 },
96 axisTick: { 98 axisTick: {
97 - distance: -30, 99 + distance: unref(getRatio) ? -30 * unref(getRatio) : -30,
98 length: 8, 100 length: 8,
99 splitNumber: max / 100, 101 splitNumber: max / 100,
100 lineStyle: { 102 lineStyle: {
101 color: '#fff', 103 color: '#fff',
102 - width: 2, 104 + width: unref(getRatio) ? 2 * unref(getRatio) : 2,
103 }, 105 },
104 }, 106 },
105 splitLine: { 107 splitLine: {
106 - distance: -10,  
107 - length: 30, 108 + distance: unref(getRatio) ? -10 * unref(getRatio) : -10,
  109 + length: unref(getRatio) ? unref(getRatio) * 30 : 30,
108 lineStyle: { 110 lineStyle: {
109 color: '#fff', 111 color: '#fff',
110 - width: 4, 112 + width: unref(getRatio) ? unref(getRatio) * 4 : 4,
111 }, 113 },
112 }, 114 },
113 axisLabel: { 115 axisLabel: {
114 color: 'inherit', 116 color: 'inherit',
115 - distance: 5,  
116 - fontSize: 6, 117 + distance: unref(getRatio) ? unref(getRatio) * 5 : 5,
  118 + fontSize: unref(getRatio) ? unref(getRatio) * 6 : 6,
117 }, 119 },
118 detail: { 120 detail: {
119 valueAnimation: true, 121 valueAnimation: true,
120 formatter: `{value} ${unit ?? ''}`, 122 formatter: `{value} ${unit ?? ''}`,
121 color: fontColor || 'inherit', 123 color: fontColor || 'inherit',
122 offsetCenter: [0, '70%'], 124 offsetCenter: [0, '70%'],
123 - fontSize: 14, 125 + fontSize: unref(getRatio) ? unref(getRatio) * 14 : 14,
124 }, 126 },
125 data: [ 127 data: [
126 { 128 {
@@ -60,6 +60,8 @@ export interface ComponentInfo { @@ -60,6 +60,8 @@ export interface ComponentInfo {
60 instrumentPanelColor?: string; 60 instrumentPanelColor?: string;
61 // instrumentPanelWidth?: string | number; 61 // instrumentPanelWidth?: string | number;
62 progressBarCircle?: Boolean; 62 progressBarCircle?: Boolean;
  63 + lineColor?: string;
  64 + maxNumber?: number;
63 [key: string]: any; 65 [key: string]: any;
64 } 66 }
65 67