简柏林 / thingskit-front · Commits

Commit ba4ca8667b704b999e2327fae8201edc8b02fdfb

Authored by xp.Huang
2 parents 040ceabb dc75ef9b

Merge branch 'perf/board-control-add-range' into 'main_dev' 

feat：看板组件仪表盘增加选取最大值字段

See merge request yunteng/thingskit-front!752
Inline Side-by-side
Showing 27 changed files with 348 additions and 105 deletions
... ... @@ -123,6 +123,12 @@
123 123 };
124 124
125 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 132 if (props.dataSource.length >= DATA_SOURCE_LIMIT_NUMBER) {
127 133 createMessage.warning('绑定的数据源不能超过10条~');
128 134 return;
... ...
... ... @@ -113,6 +113,11 @@
113 113 };
114 114
115 115 const handleNewRecord = () => {
  116 + const { componentKey } = unref(selectWidgetKeys);
  117 + if (componentKey === 'HumidityComponent2' && unref(dataSource).length >= 6) {
  118 + createMessage.warning('绑定的数据源不能超过6条~');
  119 + return;
  120 + }
116 121 if (unref(dataSource).length >= DATA_SOURCE_LIMIT_NUMBER) {
117 122 createMessage.warning('绑定的数据源不能超过10条~');
118 123 return;
... ...
... ... @@ -13,6 +13,8 @@ export const option: PublicPresetOptions = {
13 13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
14 14 [ComponentConfigFieldEnum.CONTROL_BAR_COLOR]: '#0072ff',
15 15 [ComponentConfigFieldEnum.FONT_COLOR]: '#000000',
  16 + [ComponentConfigFieldEnum.MIN_NUMBER]: 0,
  17 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
16 18 };
17 19
18 20 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
... ... @@ -3,6 +3,7 @@
3 3 import { useForm, BasicForm } from '/@/components/Form';
4 4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
5 5 import { option } from './config';
  6 + import { nextTick } from 'vue';
6 7
7 8 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
8 9 schemas: [
... ... @@ -21,6 +22,46 @@
21 22 defaultValue: option.fontColor,
22 23 },
23 24 {
  25 + field: ComponentConfigFieldEnum.MIN_NUMBER,
  26 + label: '最小值',
  27 + component: 'InputNumber',
  28 + defaultValue: option.minNumber,
  29 + componentProps: ({ formActionType }) => {
  30 + const { setFieldsValue } = formActionType;
  31 + return {
  32 + placeholder: '请输入最小值',
  33 + onChange: async (e) => {
  34 + if ((typeof e === 'string' || typeof e === 'object') && !e) {
  35 + await nextTick();
  36 + setFieldsValue({ [ComponentConfigFieldEnum.MIN_NUMBER]: 0 });
  37 + }
  38 + },
  39 + };
  40 + },
  41 + },
  42 + {
  43 + field: ComponentConfigFieldEnum.MAX_NUMBER,
  44 + label: '最大值',
  45 + component: 'InputNumber',
  46 + defaultValue: option.maxNumber,
  47 + componentProps: ({ formModel, formActionType }) => {
  48 + const { setFieldsValue } = formActionType;
  49 + return {
  50 + placeholder: '请输入最大值',
  51 + min: formModel[ComponentConfigFieldEnum.MIN_NUMBER] + 100,
  52 + onChange: async (e) => {
  53 + if (!e) {
  54 + await nextTick();
  55 + setFieldsValue({
  56 + [ComponentConfigFieldEnum.MAX_NUMBER]:
  57 + formModel[ComponentConfigFieldEnum.MIN_NUMBER] + 100,
  58 + });
  59 + }
  60 + },
  61 + };
  62 + },
  63 + },
  64 + {
24 65 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
25 66 label: '显示设备名称',
26 67 component: 'Checkbox',
... ...
... ... @@ -17,8 +17,6 @@
17 17 const sliderValue = ref<number>(33);
18 18 const oldSliderValue = ref<number>(33);
19 19 const noSendValue = ref<number>(0);
20   - const sMin = ref<number>(0);
21   - const sMax = ref<number>(100);
22 20 const sliderEl = ref<Nullable<InstanceType<typeof Slider>>>(null);
23 21
24 22 const { loading, sendCommand } = useSendCommand();
... ... @@ -26,28 +24,39 @@
26 24 const getDesign = computed(() => {
27 25 const { option, persetOption } = props.config;
28 26 const { componentInfo, attribute, attributeRename, attributeName } = option;
29   - const { controlBarColor: persetControlBarColor, fonColor: persetFontColor } =
30   - persetOption || {};
31   - const { controlBarColor, fontColor } = componentInfo || {};
  27 + const {
  28 + controlBarColor: persetControlBarColor,
  29 + fonColor: persetFontColor,
  30 + minNumber: persetMinNumber,
  31 + maxNumber: persetMaxNumber,
  32 + } = persetOption || {};
  33 + const { controlBarColor, fontColor, minNumber, maxNumber } = componentInfo || {};
32 34 return {
33 35 attribute: attributeRename || attributeName || attribute,
34 36 controlBarColor: controlBarColor ?? persetControlBarColor,
35 37 fontColor: fontColor ?? persetFontColor,
  38 + minNumber: minNumber ?? persetMinNumber,
  39 + maxNumber: maxNumber ?? persetMaxNumber,
36 40 };
37 41 });
38 42
39 43 const index = ref<number>(0);
  44 + const afterValue = ref<number>(0); //点击Slider获取的值
40 45
41 46 const handleChange = async (e) => {
42 47 index.value++;
  48 + afterValue.value = e;
43 49 if (index.value == 1) {
44 50 oldSliderValue.value = unref(sliderValue);
  51 + return; //这个是因为设置了最大值时，当sliderValue的值大于最大值时只会显示设置的最大值，会执行一次change
45 52 }
46 53 sliderValue.value = e;
47 54 };
48 55
49 56 const handleAfterChange = async () => {
50 57 unref(sliderEl)?.blur();
  58 + if (unref(sliderValue) == unref(afterValue)) return;
  59 + sliderValue.value = afterValue.value; //这一步是因为当我们是点击不是拖动时候，会让值更新不了，所以需要赋值一次
51 60 };
52 61
53 62 const handleBlur = async () => {
... ... @@ -90,8 +99,8 @@
90 99 :style="{ '--slider-color': getDesign.controlBarColor }"
91 100 class="no-drag"
92 101 :value="sliderValue"
93   - :min="sMin"
94   - :max="sMax"
  102 + :min="getDesign.minNumber"
  103 + :max="getDesign.maxNumber"
95 104 @change="handleChange"
96 105 @afterChange="handleAfterChange"
97 106 @blur="handleBlur"
... ...
... ... @@ -57,7 +57,7 @@
57 57 componentProps: ({ formActionType }) => {
58 58 const { setFieldsValue } = formActionType;
59 59 return {
60   - placeholder: '请输入最小值',
  60 + placeholder: '请输入最大值',
61 61 min: 100,
62 62 onChange: async (e) => {
63 63 if (!e) {
... ...
... ... @@ -63,7 +63,7 @@
63 63 componentProps: ({ formActionType }) => {
64 64 const { setFieldsValue } = formActionType;
65 65 return {
66   - placeholder: '请输入最小值',
  66 + placeholder: '请输入最大值',
67 67 min: 100,
68 68 onChange: async (e) => {
69 69 if (!e) {
... ...
... ... @@ -22,6 +22,7 @@ export enum GradientColor {
22 22 export const option: PublicPresetOptions = {
23 23 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
24 24 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
  25 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
25 26 [ComponentConfigFieldEnum.SHOW_TIME]: false,
26 27 [ComponentConfigFieldEnum.UNIT]: '℃',
27 28 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
... ...
1 1 <script lang="ts" setup>
  2 + import { nextTick } from 'vue';
2 3 import { ComponentConfigFieldEnum } from '../../../enum';
3 4 import { option, Gradient, GradientColor } from './config';
4 5 import { useForm, BasicForm } from '/@/components/Form';
... ... @@ -29,10 +30,18 @@
29 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 47 // field: ComponentConfigFieldEnum.INSTRUMENT_PANEL_WIDTH,
... ... @@ -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 94 showActionButtonGroup: false,
... ... @@ -97,12 +119,14 @@
97 119 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
98 120 showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
99 121 pointerColor: item[ComponentConfigFieldEnum.POINTER_COLOR],
  122 + maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
100 123 } as ComponentInfo;
101 124 };
102 125
103 126 const setFormValues = (data: Recordable) => {
104 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 130 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
107 131 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
108 132
... ... @@ -116,6 +140,7 @@
116 140 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
117 141 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
118 142 [ComponentConfigFieldEnum.POINTER_COLOR]: pointerColor,
  143 + [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
119 144 };
120 145 return setFieldsValue(value);
121 146 };
... ...
... ... @@ -31,9 +31,17 @@
31 31 instrumentPanelColor: presetInstrumentPanelColor,
32 32 gradientInfo: presetGradientInfo,
33 33 showTime: persetShowTime,
  34 + maxNumber: persetMaxNumber,
34 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 45 return {
38 46 unit: unit ?? presetUnit,
39 47 fontColor: fontColor ?? presetFontColor,
... ... @@ -42,6 +50,7 @@
42 50 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
43 51 gradientInfo: gradientInfo ?? presetGradientInfo,
44 52 showTime: showTime ?? persetShowTime,
  53 + maxNumber: maxNumber || persetMaxNumber,
45 54 };
46 55 });
47 56
... ... @@ -49,13 +58,6 @@
49 58 if (!isArray(array)) {
50 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 61 const colorList = array.map((item) => ({
60 62 offset: item.value,
61 63 color: item.color,
... ... @@ -64,7 +66,7 @@
64 66 };
65 67
66 68 const options = (): EChartsOption => {
67   - const { unit, fontColor, pointerColor, gradientInfo } = unref(getDesign);
  69 + const { unit, fontColor, pointerColor, gradientInfo, maxNumber } = unref(getDesign);
68 70
69 71 const instrumentPanelColor = getStageColor(gradientInfo);
70 72 // getStageColor(gradientInfo);
... ... @@ -72,6 +74,8 @@
72 74 series: [
73 75 {
74 76 type: 'gauge',
  77 + min: 0,
  78 + max: maxNumber,
75 79 center: ['50%', '60%'],
76 80 startAngle: 150,
77 81 endAngle: 30,
... ...
... ... @@ -25,6 +25,7 @@ export const option: PublicPresetOptions = {
25 25 [ComponentConfigFieldEnum.UNIT]: '℃',
26 26 [ComponentConfigFieldEnum.POINTER_COLOR]: '#15E2C6',
27 27 [ComponentConfigFieldEnum.INSTRUMENT_PANEL_COLOR]: '#61D4C5',
  28 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
28 29 [ComponentConfigFieldEnum.GRADIENT_INFO]: [
29 30 { key: Gradient.FIRST, value: 0, color: GradientColor.FIRST },
30 31 { key: Gradient.SECOND, value: 1, color: GradientColor.SECOND },
... ...
1 1 <script lang="ts" setup>
  2 + import { nextTick } from 'vue';
2 3 import { ComponentConfigFieldEnum } from '../../../enum';
3 4 import { option, Gradient, GradientColor } from './config';
4 5 import { useForm, BasicForm } from '/@/components/Form';
... ... @@ -22,10 +23,10 @@
22 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 32 field: ComponentConfigFieldEnum.FIRST_PHASE_COLOR,
... ... @@ -42,10 +43,10 @@
42 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 52 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
... ... @@ -59,6 +60,27 @@
59 60 component: 'Checkbox',
60 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 85 showActionButtonGroup: false,
64 86 labelWidth: 120,
... ... @@ -88,12 +110,21 @@
88 110 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
89 111 showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
90 112 progressBarCircle: item[ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE],
  113 + maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
91 114 } as ComponentInfo;
92 115 };
93 116
94 117 const setFormValues = (data: Recordable) => {
95 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 128 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
98 129 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
99 130
... ... @@ -107,6 +138,7 @@
107 138 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: 1,
108 139 [ComponentConfigFieldEnum.SECOND_PHASE_COLOR]: secondRecord?.color,
109 140 [ComponentConfigFieldEnum.PROGRESS_BAR_CIRCLE]: progressBarCircle,
  141 + [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
110 142 };
111 143 return setFieldsValue(value);
112 144 };
... ...
... ... @@ -32,6 +32,7 @@
32 32 progressBarCircle: presetProgressBarCircle,
33 33 gradientInfo: presetGradientInfo,
34 34 showTime: persetShowTime,
  35 + maxNumber: persetMaxNumber,
35 36 } = persetOption || {};
36 37 const {
37 38 unit,
... ... @@ -41,6 +42,7 @@
41 42 progressBarCircle,
42 43 instrumentPanelColor,
43 44 showTime,
  45 + maxNumber,
44 46 } = componentInfo || {};
45 47 return {
46 48 unit: unit ?? presetUnit,
... ... @@ -51,6 +53,7 @@
51 53 progressBarCircle: progressBarCircle ?? presetProgressBarCircle,
52 54 gradientInfo: gradientInfo ?? presetGradientInfo,
53 55 showTime: showTime ?? persetShowTime,
  56 + maxNumber: maxNumber || persetMaxNumber,
54 57 };
55 58 });
56 59
... ... @@ -68,7 +71,7 @@
68 71 const titleValue = ref<number>(20);
69 72
70 73 const options = (): EChartsOption => {
71   - const { unit, fontColor, progressBarCircle, gradientInfo } = unref(getDesign);
  74 + const { unit, fontColor, progressBarCircle, gradientInfo, maxNumber } = unref(getDesign);
72 75 const instrumentPanelColor = getStageColor(gradientInfo);
73 76 return {
74 77 title: {
... ... @@ -85,6 +88,8 @@
85 88 {
86 89 type: 'gauge',
87 90 center: ['50%', '50%'],
  91 + min: 0,
  92 + max: maxNumber,
88 93 startAngle: '90',
89 94 endAngle: '-270',
90 95 progress: {
... ...
... ... @@ -64,7 +64,7 @@
64 64 case 1:
65 65 return (offsetList.value = [
66 66 ['0%', '0%'],
67   - ['0%', '10%'],
  67 + ['0%', '15%'],
68 68 ]);
69 69 break;
70 70 case 2:
... ... @@ -119,7 +119,7 @@
119 119 : ['0%', '60%'],
120 120 ]);
121 121 break;
122   - case 6 || 7 || 8 || 9 || 10:
  122 + case 6:
123 123 return (offsetList.value = [
124 124 index == 0
125 125 ? ['0%', '-55%']
... ... @@ -256,23 +256,6 @@
256 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 259 const { forEachGroupMessage } = useReceiveMessage();
277 260 const { getNumberValue } = useReceiveValue();
278 261 const updateFn: MultipleDataFetchUpdateFn = (message, deviceId, attribute) => {
... ...
... ... @@ -21,6 +21,7 @@ export const option: PublicPresetOptions = {
21 21 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
22 22 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
23 23 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  24 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
24 25 [ComponentConfigFieldEnum.UNIT]: 'kw',
25 26 };
26 27
... ...
1 1 <script lang="ts" setup>
  2 + import { nextTick } from 'vue';
2 3 import { ComponentConfigFieldEnum } from '../../../enum';
3 4 import { option } from './config';
4 5 import { useForm, BasicForm } from '/@/components/Form';
... ... @@ -32,6 +33,27 @@
32 33 component: 'Checkbox',
33 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 58 showActionButtonGroup: false,
37 59 labelWidth: 120,
... ... @@ -48,18 +70,20 @@
48 70 unit: item[ComponentConfigFieldEnum.UNIT],
49 71 showDeviceName: item[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
50 72 showTime: item[ComponentConfigFieldEnum.SHOW_TIME],
  73 + maxNumber: item[ComponentConfigFieldEnum.MAX_NUMBER],
51 74 } as ComponentInfo;
52 75 };
53 76
54 77 const setFormValues = (data: Recordable) => {
55 78 // return setFieldsValue(data);
56   - const { unit, fontColor, showDeviceName, showTime } = data;
  79 + const { unit, fontColor, showDeviceName, showTime, maxNumber } = data;
57 80
58 81 const value = {
59 82 [ComponentConfigFieldEnum.UNIT]: unit,
60 83 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
61 84 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
62 85 [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
  86 + [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
63 87 };
64 88 return setFieldsValue(value);
65 89 };
... ...
... ... @@ -30,9 +30,17 @@
30 30 instrumentPanelColor: presetInstrumentPanelColor,
31 31 gradientInfo: presetGradientInfo,
32 32 showTime: persetShowTime,
  33 + maxNumber: persetMaxNumber,
33 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 44 return {
37 45 unit: unit ?? presetUnit,
38 46 fontColor: fontColor ?? presetFontColor,
... ... @@ -41,17 +49,20 @@
41 49 instrumentPanelColor: instrumentPanelColor ?? presetInstrumentPanelColor,
42 50 gradientInfo: gradientInfo ?? presetGradientInfo,
43 51 showTime: showTime ?? persetShowTime,
  52 + maxNumber: maxNumber || persetMaxNumber,
44 53 };
45 54 });
46 55
47 56 const options = (): EChartsOption => {
48   - const { unit, fontColor, pointerColor } = unref(getDesign);
  57 + const { unit, fontColor, pointerColor, maxNumber } = unref(getDesign);
49 58
50 59 // getStageColor(gradientInfo);
51 60 return {
52 61 series: [
53 62 {
54 63 type: 'gauge',
  64 + min: 0,
  65 + max: maxNumber,
55 66 progress: {
56 67 show: true,
57 68 width: unref(getRatio) ? 6 * unref(getRatio) : 6,
... ...
... ... @@ -13,6 +13,7 @@ export const option: PublicPresetOptions = {
13 13 [ComponentConfigFieldEnum.FONT_COLOR]: '#FD7347',
14 14 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
15 15 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  16 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
16 17 [ComponentConfigFieldEnum.UNIT]: '℃',
17 18 };
18 19
... ...
1 1 <script lang="ts" setup>
  2 + import { nextTick } from 'vue';
2 3 import { ComponentConfigFieldEnum } from '../../../enum';
3 4 import { option } from './config';
4 5 import { useForm, BasicForm } from '/@/components/Form';
... ... @@ -31,6 +32,27 @@
31 32 component: 'Checkbox',
32 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 57 showActionButtonGroup: false,
36 58 labelWidth: 120,
... ...
... ... @@ -31,28 +31,30 @@
31 31 fontColor: presetFontColor,
32 32 unit: presetUnit,
33 33 showTime: persetShowTime,
  34 + maxNumber: persetMaxNumber,
34 35 } = persetOption || {};
35   - const { unit, fontColor, showTime } = componentInfo || {};
  36 + const { unit, fontColor, showTime, maxNumber } = componentInfo || {};
36 37 return {
37 38 unit: unit ?? presetUnit,
38 39 fontColor: fontColor ?? presetFontColor,
39 40 attribute: attributeRename || attributeName || attribute,
40 41 showTime: persetShowTime || showTime,
  42 + maxNumber: maxNumber || persetMaxNumber,
41 43 };
42 44 });
43 45
44 46 const options = (): EChartsOption => {
45   - const { unit, fontColor } = unref(getDesign);
  47 + const { unit, fontColor, maxNumber } = unref(getDesign);
46 48 return {
47 49 series: [
48 50 {
49 51 type: 'gauge',
  52 + min: 0,
  53 + max: maxNumber,
50 54 radius: '50%',
51 55 center: ['50%', '60%'],
52 56 startAngle: 200,
53 57 endAngle: -20,
54   - min: 0,
55   - max: 100,
56 58 splitNumber: 10,
57 59 itemStyle: {
58 60 color: fontColor,
... ... @@ -120,7 +122,7 @@
120 122 startAngle: 200,
121 123 endAngle: -20,
122 124 min: 0,
123   - max: 100,
  125 + max: maxNumber,
124 126 itemStyle: {
125 127 color: fontColor,
126 128 },
... ...
... ... @@ -30,6 +30,7 @@ export const option: PublicPresetOptions = {
30 30 [ComponentConfigFieldEnum.UNIT]: 'km/h',
31 31 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
32 32 [ComponentConfigFieldEnum.SHOW_TIME]: false,
  33 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
33 34 };
34 35
35 36 export default class Config extends PublicConfigClass implements CreateComponentType {
... ...
... ... @@ -4,6 +4,7 @@
4 4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
5 5 import { Gradient, GradientColor, option } from './config';
6 6 import { ComponentInfo } from '/@/views/visual/palette/types';
  7 + import { nextTick } from 'vue';
7 8
8 9 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
9 10 schemas: [
... ... @@ -87,6 +88,27 @@
87 88 component: 'Checkbox',
88 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 113 showActionButtonGroup: false,
92 114 labelWidth: 120,
... ... @@ -119,11 +141,12 @@
119 141 unit: value[ComponentConfigFieldEnum.UNIT],
120 142 showDeviceName: value[ComponentConfigFieldEnum.SHOW_DEVICE_NAME],
121 143 showTime: value[ComponentConfigFieldEnum.SHOW_TIME],
  144 + maxNumber: value[ComponentConfigFieldEnum.MAX_NUMBER],
122 145 } as ComponentInfo;
123 146 };
124 147
125 148 const setFormValues = (data: ComponentInfo) => {
126   - const { gradientInfo, unit, fontColor, showDeviceName, showTime } = data;
  149 + const { gradientInfo, unit, fontColor, showDeviceName, showTime, maxNumber } = data;
127 150 const firstRecord = gradientInfo.find((item) => item.key === Gradient.FIRST);
128 151 const secondRecord = gradientInfo.find((item) => item.key === Gradient.SECOND);
129 152 const thirdRecord = gradientInfo.find((item) => item.key === Gradient.THIRD);
... ... @@ -132,6 +155,7 @@
132 155 [ComponentConfigFieldEnum.FONT_COLOR]: fontColor,
133 156 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: showDeviceName,
134 157 [ComponentConfigFieldEnum.SHOW_TIME]: showTime,
  158 + [ComponentConfigFieldEnum.MAX_NUMBER]: maxNumber,
135 159 [ComponentConfigFieldEnum.FIRST_PHASE_VALUE]: firstRecord?.value,
136 160 [ComponentConfigFieldEnum.FIRST_PHASE_COLOR]: firstRecord?.color,
137 161 [ComponentConfigFieldEnum.SECOND_PHASE_VALUE]: secondRecord?.value,
... ...
... ... @@ -37,15 +37,17 @@
37 37 unit: presetUnit,
38 38 gradientInfo: presetGradientInfo,
39 39 showTime: persetShowTime,
  40 + maxNumber: persetMaxNumber,
40 41 } = persetOption || {};
41 42
42   - const { unit, fontColor, gradientInfo, showTime } = componentInfo || {};
  43 + const { unit, fontColor, gradientInfo, showTime, maxNumber } = componentInfo || {};
43 44 return {
44 45 unit: unit ?? presetUnit,
45 46 fontColor: fontColor ?? presetFontColor,
46 47 gradientInfo: gradientInfo ?? presetGradientInfo,
47 48 attribute: attributeRename || attributeName || attribute,
48 49 showTime: showTime || persetShowTime,
  50 + maxNumber: maxNumber || persetMaxNumber,
49 51 };
50 52 });
51 53
... ... @@ -55,7 +57,7 @@
55 57 };
56 58
57 59 const options = (): EChartsOption => {
58   - const { gradientInfo, unit, fontColor } = unref(getDesign);
  60 + const { gradientInfo, unit, fontColor, maxNumber } = unref(getDesign);
59 61 const firstRecord = getGradient(Gradient.FIRST, gradientInfo);
60 62 const secondRecord = getGradient(Gradient.SECOND, gradientInfo);
61 63 const thirdRecord = getGradient(Gradient.THIRD, gradientInfo);
... ... @@ -69,18 +71,18 @@
69 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 77 return {
76 78 series: [
77 79 {
78 80 type: 'gauge',
79 81 min: 0,
80   - max,
  82 + max: maxNumber,
81 83 axisLine: {
82 84 lineStyle: {
83   - width: 20,
  85 + width: unref(getRatio) ? 20 * unref(getRatio) : 20,
84 86 color: [
85 87 [firstGradient, firstRecord?.color || GradientColor.FIRST],
86 88 [secondGradient, secondRecord?.color || GradientColor.SECOND],
... ... @@ -94,33 +96,33 @@
94 96 },
95 97 },
96 98 axisTick: {
97   - distance: -30,
  99 + distance: unref(getRatio) ? -30 * unref(getRatio) : -30,
98 100 length: 8,
99 101 splitNumber: max / 100,
100 102 lineStyle: {
101 103 color: '#fff',
102   - width: 2,
  104 + width: unref(getRatio) ? 2 * unref(getRatio) : 2,
103 105 },
104 106 },
105 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 110 lineStyle: {
109 111 color: '#fff',
110   - width: 4,
  112 + width: unref(getRatio) ? unref(getRatio) * 4 : 4,
111 113 },
112 114 },
113 115 axisLabel: {
114 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 120 detail: {
119 121 valueAnimation: true,
120 122 formatter: `{value} ${unit ?? ''}`,
121 123 color: fontColor || 'inherit',
122 124 offsetCenter: [0, '70%'],
123   - fontSize: 14,
  125 + fontSize: unref(getRatio) ? unref(getRatio) * 14 : 14,
124 126 },
125 127 data: [
126 128 {
... ...
... ... @@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
12 12 export const option: PublicPresetOptions = {
13 13 multipleDataSourceComponent: true,
14 14 [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
  15 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
15 16 [ComponentConfigFieldEnum.UNIT]: '℃',
16 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
17 18 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#377dff',
... ...
... ... @@ -3,6 +3,7 @@
3 3 import { useForm, BasicForm } from '/@/components/Form';
4 4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
5 5 import { option } from './config';
  6 + import { nextTick } from 'vue';
6 7 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
7 8 schemas: [
8 9 {
... ... @@ -23,7 +24,27 @@
23 24 defaultValue: option.backgroundColor,
24 25 },
25 26 },
26   -
  27 + {
  28 + field: ComponentConfigFieldEnum.MAX_NUMBER,
  29 + label: '最大值',
  30 + component: 'InputNumber',
  31 + defaultValue: 100,
  32 + componentProps: ({ formActionType }) => {
  33 + const { setFieldsValue } = formActionType;
  34 + return {
  35 + placeholder: '请输入最大值',
  36 + min: 100,
  37 + onChange: async (e) => {
  38 + if (!e) {
  39 + await nextTick();
  40 + setFieldsValue({
  41 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
  42 + });
  43 + }
  44 + },
  45 + };
  46 + },
  47 + },
27 48 {
28 49 field: ComponentConfigFieldEnum.UNIT,
29 50 label: '数值单位',
... ...
1 1 <script lang="ts" setup>
2 2 import { option } from './config';
3 3 import { ComponentPropsConfigType } from '../../../index.type';
4   - import { Progress } from 'ant-design-vue';
  4 + import { Slider } from 'ant-design-vue';
5 5 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
6 6 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
7 7 import { buildUUID } from '/@/utils/uuid';
... ... @@ -28,6 +28,7 @@
28 28 deviceName?: string;
29 29 attributeName?: string;
30 30 deviceRename?: string;
  31 + maxNumber?: number;
31 32 }
32 33
33 34 const defaultValue: PercentType[] = [
... ... @@ -58,10 +59,11 @@
58 59 unit: presetUnit,
59 60 fontColor: presetFontColor,
60 61 backgroundColor: persetBackgroundColor,
  62 + maxNumber: persetMaxNumber,
61 63 } = persetOption || {};
62 64 return {
63 65 dataSource: dataSource.map((item) => {
64   - const { unit, fontColor, backgroundColor } = item.componentInfo || {};
  66 + const { unit, fontColor, backgroundColor, maxNumber } = item.componentInfo || {};
65 67 const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
66 68 item;
67 69 return {
... ... @@ -71,7 +73,7 @@
71 73 deviceName: deviceRename || deviceName,
72 74 attribute,
73 75 attributeName: attributeRename || attributeName,
74   -
  76 + maxNumber: maxNumber || persetMaxNumber,
75 77 id: deviceId,
76 78 } as PercentType;
77 79 }),
... ... @@ -122,24 +124,39 @@
122 124 >
123 125 </div>
124 126 <div>
125   - <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" />
  127 + <!-- <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" /> -->
  128 + <Slider
  129 + ref="sliderEl"
  130 + :style="{ '--slider-color': item.backgroundColor }"
  131 + :value="item.value"
  132 + :disabled="true"
  133 + :min="0"
  134 + :max="item.maxNumber"
  135 + />
126 136 </div>
127 137 </div>
128 138 <!-- <UpdateTime :time="time" /> -->
129 139 </main>
130 140 </template>
131 141 <style lang="less" scoped>
132   - // :deep(.ant-progress-success-bg, .ant-progress-bg) {
133   - // background: '#2196F3' !important;
134   - // }
135   - // :deep(.ant-slider-handle) {
136   - // all: unset;
137   - // }
138   - // :deep(.ant-slider-track) {
139   - // background: var(--slider-color) !important;
140   - // height: 8px;
141   - // }
142   - // :deep(.ant-slider-rail) {
143   - // height: 8px;
144   - // }
  142 + :deep(.ant-progress-success-bg, .ant-progress-bg) {
  143 + background: #2196f3 !important;
  144 + }
  145 +
  146 + :deep(.ant-slider-handle) {
  147 + all: unset;
  148 + }
  149 +
  150 + :deep(.ant-slider-track) {
  151 + background: var(--slider-color) !important;
  152 + height: 8px;
  153 + }
  154 +
  155 + :deep(.ant-slider-rail) {
  156 + height: 8px;
  157 + }
  158 +
  159 + :deep(.ant-slider-disabled) {
  160 + cursor: auto !important;
  161 + }
145 162 </style>
... ...
... ... @@ -60,6 +60,8 @@ export interface ComponentInfo {
60 60 instrumentPanelColor?: string;
61 61 // instrumentPanelWidth?: string | number;
62 62 progressBarCircle?: Boolean;
  63 + lineColor?: string;
  64 + maxNumber?: number;
63 65 [key: string]: any;
64 66 }
65 67
... ...