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

@@ -13,6 +13,8 @@ export const option: PublicPresetOptions = {
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.CONTROL_BAR_COLOR]: '#0072ff',
   [ComponentConfigFieldEnum.FONT_COLOR]: '#000000',
+  [ComponentConfigFieldEnum.MIN_NUMBER]: 0,
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
 };
 
 export default class Config extends PublicConfigClass implements CreateComponentType {

@@ -3,6 +3,7 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
+  import { nextTick } from 'vue';
 
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
@@ -21,6 +22,46 @@
         defaultValue: option.fontColor,
       },
       {
+        field: ComponentConfigFieldEnum.MIN_NUMBER,
+        label: '最小值',
+        component: 'InputNumber',
+        defaultValue: option.minNumber,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最小值',
+            onChange: async (e) => {
+              if ((typeof e === 'string' || typeof e === 'object') && !e) {
+                await nextTick();
+                setFieldsValue({ [ComponentConfigFieldEnum.MIN_NUMBER]: 0 });
+              }
+            },
+          };
+        },
+      },
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: option.maxNumber,
+        componentProps: ({ formModel, formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: formModel[ComponentConfigFieldEnum.MIN_NUMBER] + 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]:
+                    formModel[ComponentConfigFieldEnum.MIN_NUMBER] + 100,
+                });
+              }
+            },
+          };
+        },
+      },
+      {
         field: ComponentConfigFieldEnum.SHOW_DEVICE_NAME,
         label: '显示设备名称',
         component: 'Checkbox',

@@ -17,8 +17,6 @@
   const sliderValue = ref<number>(33);
   const oldSliderValue = ref<number>(33);
   const noSendValue = ref<number>(0);
-  const sMin = ref<number>(0);
-  const sMax = ref<number>(100);
   const sliderEl = ref<Nullable<InstanceType<typeof Slider>>>(null);
 
   const { loading, sendCommand } = useSendCommand();
@@ -26,28 +24,39 @@
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeRename, attributeName } = option;
-    const { controlBarColor: persetControlBarColor, fonColor: persetFontColor } =
-      persetOption || {};
-    const { controlBarColor, fontColor } = componentInfo || {};
+    const {
+      controlBarColor: persetControlBarColor,
+      fonColor: persetFontColor,
+      minNumber: persetMinNumber,
+      maxNumber: persetMaxNumber,
+    } = persetOption || {};
+    const { controlBarColor, fontColor, minNumber, maxNumber } = componentInfo || {};
     return {
       attribute: attributeRename || attributeName || attribute,
       controlBarColor: controlBarColor ?? persetControlBarColor,
       fontColor: fontColor ?? persetFontColor,
+      minNumber: minNumber ?? persetMinNumber,
+      maxNumber: maxNumber ?? persetMaxNumber,
     };
   });
 
   const index = ref<number>(0);
+  const afterValue = ref<number>(0); //点击Slider获取的值
 
   const handleChange = async (e) => {
     index.value++;
+    afterValue.value = e;
     if (index.value == 1) {
       oldSliderValue.value = unref(sliderValue);
+      return; //这个是因为设置了最大值时，当sliderValue的值大于最大值时只会显示设置的最大值，会执行一次change
     }
     sliderValue.value = e;
   };
 
   const handleAfterChange = async () => {
     unref(sliderEl)?.blur();
+    if (unref(sliderValue) == unref(afterValue)) return;
+    sliderValue.value = afterValue.value; //这一步是因为当我们是点击不是拖动时候，会让值更新不了，所以需要赋值一次
   };
 
   const handleBlur = async () => {
@@ -90,8 +99,8 @@
             :style="{ '--slider-color': getDesign.controlBarColor }"
             class="no-drag"
             :value="sliderValue"
-            :min="sMin"
-            :max="sMax"
+            :min="getDesign.minNumber"
+            :max="getDesign.maxNumber"
             @change="handleChange"
             @afterChange="handleAfterChange"
             @blur="handleBlur"

@@ -57,7 +57,7 @@
         componentProps: ({ formActionType }) => {
           const { setFieldsValue } = formActionType;
           return {
-            placeholder: '请输入最小值',
+            placeholder: '请输入最大值',
             min: 100,
             onChange: async (e) => {
               if (!e) {

@@ -63,7 +63,7 @@
         componentProps: ({ formActionType }) => {
           const { setFieldsValue } = formActionType;
           return {
-            placeholder: '请输入最小值',
+            placeholder: '请输入最大值',
             min: 100,
             onChange: async (e) => {
               if (!e) {

@@ -12,6 +12,7 @@ import { ComponentConfigFieldEnum } from '/@/views/visual/packages/enum';
 export const option: PublicPresetOptions = {
   multipleDataSourceComponent: true,
   [ComponentConfigFieldEnum.FONT_COLOR]: '#000',
+  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
   [ComponentConfigFieldEnum.UNIT]: '℃',
   [ComponentConfigFieldEnum.SHOW_DEVICE_NAME]: false,
   [ComponentConfigFieldEnum.BACKGROUND_COLOR]: '#377dff',

@@ -3,6 +3,7 @@
   import { useForm, BasicForm } from '/@/components/Form';
   import { PublicFormInstaceType } from '/@/views/visual/dataSourceBindPanel/index.type';
   import { option } from './config';
+  import { nextTick } from 'vue';
   const [register, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
     schemas: [
       {
@@ -23,7 +24,27 @@
           defaultValue: option.backgroundColor,
         },
       },
-
+      {
+        field: ComponentConfigFieldEnum.MAX_NUMBER,
+        label: '最大值',
+        component: 'InputNumber',
+        defaultValue: 100,
+        componentProps: ({ formActionType }) => {
+          const { setFieldsValue } = formActionType;
+          return {
+            placeholder: '请输入最大值',
+            min: 100,
+            onChange: async (e) => {
+              if (!e) {
+                await nextTick();
+                setFieldsValue({
+                  [ComponentConfigFieldEnum.MAX_NUMBER]: 100,
+                });
+              }
+            },
+          };
+        },
+      },
       {
         field: ComponentConfigFieldEnum.UNIT,
         label: '数值单位',

 <script lang="ts" setup>
   import { option } from './config';
   import { ComponentPropsConfigType } from '../../../index.type';
-  import { Progress } from 'ant-design-vue';
+  import { Slider } from 'ant-design-vue';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
   import { useReceiveMessage } from '../../../hook/useReceiveMessage';
   import { buildUUID } from '/@/utils/uuid';
@@ -28,6 +28,7 @@
     deviceName?: string;
     attributeName?: string;
     deviceRename?: string;
+    maxNumber?: number;
   }
 
   const defaultValue: PercentType[] = [
@@ -58,10 +59,11 @@
       unit: presetUnit,
       fontColor: presetFontColor,
       backgroundColor: persetBackgroundColor,
+      maxNumber: persetMaxNumber,
     } = persetOption || {};
     return {
       dataSource: dataSource.map((item) => {
-        const { unit, fontColor, backgroundColor } = item.componentInfo || {};
+        const { unit, fontColor, backgroundColor, maxNumber } = item.componentInfo || {};
         const { attribute, attributeRename, deviceName, deviceRename, deviceId, attributeName } =
           item;
         return {
@@ -71,7 +73,7 @@
           deviceName: deviceRename || deviceName,
           attribute,
           attributeName: attributeRename || attributeName,
-
+          maxNumber: maxNumber || persetMaxNumber,
           id: deviceId,
         } as PercentType;
       }),
@@ -122,24 +124,39 @@
         >
       </div>
       <div>
-        <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" />
+        <!-- <Progress :strokeColor="item.backgroundColor" :percent="item.value" :showInfo="false" /> -->
+        <Slider
+          ref="sliderEl"
+          :style="{ '--slider-color': item.backgroundColor }"
+          :value="item.value"
+          :disabled="true"
+          :min="0"
+          :max="item.maxNumber"
+        />
       </div>
     </div>
     <!-- <UpdateTime :time="time" /> -->
   </main>
 </template>
 <style lang="less" scoped>
-  // :deep(.ant-progress-success-bg, .ant-progress-bg) {
-  //   background: '#2196F3' !important;
-  // }
-  // :deep(.ant-slider-handle) {
-  //   all: unset;
-  // }
-  // :deep(.ant-slider-track) {
-  //   background: var(--slider-color) !important;
-  //   height: 8px;
-  // }
-  // :deep(.ant-slider-rail) {
-  //   height: 8px;
-  // }
+  :deep(.ant-progress-success-bg, .ant-progress-bg) {
+    background: #2196f3 !important;
+  }
+
+  :deep(.ant-slider-handle) {
+    all: unset;
+  }
+
+  :deep(.ant-slider-track) {
+    background: var(--slider-color) !important;
+    height: 8px;
+  }
+
+  :deep(.ant-slider-rail) {
+    height: 8px;
+  }
+
+  :deep(.ant-slider-disabled) {
+    cursor: auto !important;
+  }
 </style>