简柏林 / thingskit-front · Commits

Commit 6b2e4aaa01db3faf12da332f6ac47152a1b55345

Authored by loveumiko
1 parent cfe71af3

feat: 看板控制组件4新增范围取值

Inline Side-by-side
Showing 8 changed files with 118 additions and 27 deletions
@@ -13,6 +13,8 @@ export const option: PublicPresetOptions = { @@ -13,6 +13,8 @@ export const option: PublicPresetOptions = {
13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 13 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
14 [ComponentConfigFieldEnum.CONTROL_BAR_COLOR]: '#0072ff', 14 [ComponentConfigFieldEnum.CONTROL_BAR_COLOR]: '#0072ff',
15 [ComponentConfigFieldEnum.FONT_COLOR]: '#000000', 15 [ComponentConfigFieldEnum.FONT_COLOR]: '#000000',
  16 + [ComponentConfigFieldEnum.MIN_NUMBER]: 0,
  17 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
16 }; 18 };
17 19
18 export default class Config extends PublicConfigClass implements CreateComponentType { 20 export default class Config extends PublicConfigClass implements CreateComponentType {
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 import { useForm, BasicForm } from '/@/components/Form'; 3 import { useForm, BasicForm } from '/@/components/Form';
4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type'; 4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
5 import { option } from './config'; 5 import { option } from './config';
  6 + import { nextTick } from 'vue';
6 7
7 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ 8 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
8 schemas: [ 9 schemas: [
@@ -21,6 +22,46 @@ @@ -21,6 +22,46 @@
21 defaultValue: option.fontColor, 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 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME, 65 field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
25 label: '显示设备名称', 66 label: '显示设备名称',
26 component: 'Checkbox', 67 component: 'Checkbox',
@@ -17,8 +17,6 @@ @@ -17,8 +17,6 @@
17 const sliderValue = ref<number>(33); 17 const sliderValue = ref<number>(33);
18 const oldSliderValue = ref<number>(33); 18 const oldSliderValue = ref<number>(33);
19 const noSendValue = ref<number>(0); 19 const noSendValue = ref<number>(0);
20 - const sMin = ref<number>(0);  
21 - const sMax = ref<number>(100);  
22 const sliderEl = ref<Nullable<InstanceType<typeof Slider>>>(null); 20 const sliderEl = ref<Nullable<InstanceType<typeof Slider>>>(null);
23 21
24 const { loading, sendCommand } = useSendCommand(); 22 const { loading, sendCommand } = useSendCommand();
@@ -26,28 +24,39 @@ @@ -26,28 +24,39 @@
26 const getDesign = computed(() => { 24 const getDesign = computed(() => {
27 const { option, persetOption } = props.config; 25 const { option, persetOption } = props.config;
28 const { componentInfo, attribute, attributeRename, attributeName } = option; 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 return { 34 return {
33 attribute: attributeRename || attributeName || attribute, 35 attribute: attributeRename || attributeName || attribute,
34 controlBarColor: controlBarColor ?? persetControlBarColor, 36 controlBarColor: controlBarColor ?? persetControlBarColor,
35 fontColor: fontColor ?? persetFontColor, 37 fontColor: fontColor ?? persetFontColor,
  38 + minNumber: minNumber ?? persetMinNumber,
  39 + maxNumber: maxNumber ?? persetMaxNumber,
36 }; 40 };
37 }); 41 });
38 42
39 const index = ref<number>(0); 43 const index = ref<number>(0);
  44 + const afterValue = ref<number>(0); //点击Slider获取的值
40 45
41 const handleChange = async (e) => { 46 const handleChange = async (e) => {
42 index.value++; 47 index.value++;
  48 + afterValue.value = e;
43 if (index.value == 1) { 49 if (index.value == 1) {
44 oldSliderValue.value = unref(sliderValue); 50 oldSliderValue.value = unref(sliderValue);
  51 + return; //这个是因为设置了最大值时，当sliderValue的值大于最大值时只会显示设置的最大值，会执行一次change
45 } 52 }
46 sliderValue.value = e; 53 sliderValue.value = e;
47 }; 54 };
48 55
49 const handleAfterChange = async () => { 56 const handleAfterChange = async () => {
50 unref(sliderEl)?.blur(); 57 unref(sliderEl)?.blur();
  58 + if (unref(sliderValue) == unref(afterValue)) return;
  59 + sliderValue.value = afterValue.value; //这一步是因为当我们是点击不是拖动时候，会让值更新不了，所以需要赋值一次
51 }; 60 };
52 61
53 const handleBlur = async () => { 62 const handleBlur = async () => {
@@ -90,8 +99,8 @@ @@ -90,8 +99,8 @@
90 :style="{ '--slider-color': getDesign.controlBarColor }" 99 :style="{ '--slider-color': getDesign.controlBarColor }"
91 class="no-drag" 100 class="no-drag"
92 :value="sliderValue" 101 :value="sliderValue"
93 - :min="sMin"  
94 - :max="sMax" 102 + :min="getDesign.minNumber"
  103 + :max="getDesign.maxNumber"
95 @change="handleChange" 104 @change="handleChange"
96 @afterChange="handleAfterChange" 105 @afterChange="handleAfterChange"
97 @blur="handleBlur" 106 @blur="handleBlur"
@@ -57,7 +57,7 @@ @@ -57,7 +57,7 @@
57 componentProps: ({ formActionType }) => { 57 componentProps: ({ formActionType }) => {
58 const { setFieldsValue } = formActionType; 58 const { setFieldsValue } = formActionType;
59 return { 59 return {
60 - placeholder: '请输入最小值', 60 + placeholder: '请输入最大值',
61 min: 100, 61 min: 100,
62 onChange: async (e) => { 62 onChange: async (e) => {
63 if (!e) { 63 if (!e) {
@@ -63,7 +63,7 @@ @@ -63,7 +63,7 @@
63 componentProps: ({ formActionType }) => { 63 componentProps: ({ formActionType }) => {
64 const { setFieldsValue } = formActionType; 64 const { setFieldsValue } = formActionType;
65 return { 65 return {
66 - placeholder: '请输入最小值', 66 + placeholder: '请输入最大值',
67 min: 100, 67 min: 100,
68 onChange: async (e) => { 68 onChange: async (e) => {
69 if (!e) { 69 if (!e) {
@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum'; @@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
12 export const option: PublicPresetOptions = { 12 export const option: PublicPresetOptions = {
13 multipleDataSourceComponent: true, 13 multipleDataSourceComponent: true,
14 [ComponentConfigFieldEnum.FONT_COLOR]: '#000', 14 [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
  15 + [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
15 [ComponentConfigFieldEnum.UNIT]: '℃', 16 [ComponentConfigFieldEnum.UNIT]: '℃',
16 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false, 17 [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
17 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#377dff', 18 [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#377dff',
@@ -3,6 +3,7 @@ @@ -3,6 +3,7 @@
3 import { useForm, BasicForm } from '/@/components/Form'; 3 import { useForm, BasicForm } from '/@/components/Form';
4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type'; 4 import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
5 import { option } from './config'; 5 import { option } from './config';
  6 + import { nextTick } from 'vue';
6 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({ 7 const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
7 schemas: [ 8 schemas: [
8 { 9 {
@@ -23,7 +24,27 @@ @@ -23,7 +24,27 @@
23 defaultValue: option.backgroundColor, 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 field: ComponentConfigFieldEnum.UNIT, 49 field: ComponentConfigFieldEnum.UNIT,
29 label: '数值单位', 50 label: '数值单位',
1 <script lang="ts" setup> 1 <script lang="ts" setup>
2 import { option } from './config'; 2 import { option } from './config';
3 import { ComponentPropsConfigType } from '../../../index.type'; 3 import { ComponentPropsConfigType } from '../../../index.type';
4 - import { Progress } from 'ant-design-vue'; 4 + import { Slider } from 'ant-design-vue';
5 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName'; 5 import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
6 import { useReceiveMessage } from '../../../hook/useReceiveMessage'; 6 import { useReceiveMessage } from '../../../hook/useReceiveMessage';
7 import { buildUUID } from '/@/utils/uuid'; 7 import { buildUUID } from '/@/utils/uuid';
@@ -28,6 +28,7 @@ @@ -28,6 +28,7 @@
28 deviceName?: string; 28 deviceName?: string;
29 attributeName?: string; 29 attributeName?: string;
30 deviceRename?: string; 30 deviceRename?: string;
  31 + maxNumber?: number;
31 } 32 }
32 33
33 const defaultValue: PercentType[] = [ 34 const defaultValue: PercentType[] = [
@@ -58,10 +59,11 @@ @@ -58,10 +59,11 @@
58 unit: presetUnit, 59 unit: presetUnit,
59 fontColor: presetFontColor, 60 fontColor: presetFontColor,
60 backgroundColor: persetBackgroundColor, 61 backgroundColor: persetBackgroundColor,
  62 + maxNumber: persetMaxNumber,
61 } = persetOption || {}; 63 } = persetOption || {};
62 return { 64 return {
63 dataSource: dataSource.map((item) => { 65 dataSource: dataSource.map((item) => {
64 - const { unit, fontColor, backgroundColor } = item.componentInfo || {}; 66 + const { unit, fontColor, backgroundColor, maxNumber } = item.componentInfo || {};
65 const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } = 67 const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
66 item; 68 item;
67 return { 69 return {
@@ -71,7 +73,7 @@ @@ -71,7 +73,7 @@
71 deviceName: deviceRename || deviceName, 73 deviceName: deviceRename || deviceName,
72 attribute, 74 attribute,
73 attributeName: attributeRename || attributeName, 75 attributeName: attributeRename || attributeName,
74 - 76 + maxNumber: maxNumber || persetMaxNumber,
75 id: deviceId, 77 id: deviceId,
76 } as PercentType; 78 } as PercentType;
77 }), 79 }),
@@ -122,24 +124,39 @@ @@ -122,24 +124,39 @@
122 > 124 >
123 </div> 125 </div>
124 <div> 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 </div> 136 </div>
127 </div> 137 </div>
128 <!-- <UpdateTime :time="time" /> --> 138 <!-- <UpdateTime :time="time" /> -->
129 </main> 139 </main>
130 </template> 140 </template>
131 <style lang="less" scoped> 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 </style> 162 </style>