Merge branch 'fix/components-lateralNumericalControl' into 'main_dev'

fix: 修改控制组件滑块

See merge request yunteng/thingskit-front!697

@@ -2,19 +2,24 @@
   import { ComponentPropsConfigType, DataFetchUpdateFn } from '/@/views/visual/packages/index.type';
   import { option } from './config';
   import { useDataFetch } from '/@/views/visual/packages/hook/useSocket';
-  import { Slider } from 'ant-design-vue';
-  import { computed, ref } from 'vue';
+  import { Slider, Spin } from 'ant-design-vue';
+  import { computed, ref, unref } from 'vue';
   import { useComponentScale } from '../../../hook/useComponentScale';
   import { DeviceName } from '/@/views/visual/commonComponents/DeviceName';
+  import { useSendCommand } from '../../../hook/useSendCommand';
+  import { useReceiveValue } from '../../../hook/useReceiveValue';
 
   const props = defineProps<{
     config: ComponentPropsConfigType<typeof option>;
   }>();
 
   const sliderValue = ref<number>(33);
+  const oldSliderValue = ref<number>(33);
   const sMin = ref<number>(0);
   const sMax = ref<number>(100);
 
+  const { loading, sendCommand } = useSendCommand();
+
   const getDesign = computed(() => {
     const { option, persetOption } = props.config;
     const { componentInfo, attribute, attributeRename } = option;
@@ -28,10 +33,29 @@
     };
   });
 
-  const handleChange = async () => {};
+  const index = ref<number>(0);
+
+  const handleChange = async (e) => {
+    index.value++;
+    if (index.value == 1) {
+      oldSliderValue.value = unref(sliderValue);
+    }
+    sliderValue.value = e;
+  };
+
+  const handleAfterChange = async (e) => {
+    const flag = await sendCommand(props.config.option, unref(sliderValue));
+    flag
+      ? ((sliderValue.value = e), (oldSliderValue.value = sliderValue.value), (index.value = 0))
+      : (sliderValue.value = unref(oldSliderValue));
+  };
 
-  const updateFn: DataFetchUpdateFn = () => {
-    // console.log(message, 'message', attribute, 'attribute');
+  const { getNumberValue } = useReceiveValue();
+  const updateFn: DataFetchUpdateFn = (message, attribute) => {
+    const { data = {} } = message;
+    const [latest] = data[attribute] || [];
+    const [_, value] = latest;
+    sliderValue.value = getNumberValue(value);
   };
 
   useDataFetch(props, updateFn);
@@ -42,28 +66,31 @@
   <main class="w-full h-full flex flex-col justify-center">
     <DeviceName :config="config" class="text-center" />
     <main :style="getScale">
-      <div class="flex flex-col ml-11 mr-11">
-        <span
-          :style="{ color: getDesign.fontColor }"
-          class="font-bold text-xl mt-3 truncate text-center"
-          >{{ sliderValue }}</span
-        >
-        <Slider
-          :style="{ '--slider-color': getDesign.controlBarColor }"
-          class="no-drag"
-          v-model:value="sliderValue"
-          :min="sMin"
-          :max="sMax"
-          @change="handleChange"
-        />
+      <Spin :spinning="loading" class="w-full h-full">
+        <div class="flex flex-col ml-11 mr-11 w-full">
+          <span
+            :style="{ color: getDesign.fontColor }"
+            class="font-bold text-xl mt-3 truncate text-center"
+            >{{ sliderValue }}</span
+          >
+          <Slider
+            :style="{ '--slider-color': getDesign.controlBarColor }"
+            class="no-drag"
+            :value="sliderValue"
+            :min="sMin"
+            :max="sMax"
+            @change="handleChange"
+            @afterChange="handleAfterChange"
+          />
 
-        <span
-          :style="{ color: getDesign.fontColor }"
-          class="mt-3 truncate font-bold text-xs text-center"
-        >
-          {{ getDesign.attribute || '设备1' }}
-        </span>
-      </div>
+          <span
+            :style="{ color: getDesign.fontColor }"
+            class="mt-3 truncate font-bold text-xs text-center"
+          >
+            {{ getDesign.attribute || '设备1' }}
+          </span>
+        </div>
+      </Spin>
     </main>
   </main>
 </template>

@@ -244,7 +244,9 @@ export const commonDataSourceSchemas = (): FormSchema[] => {
                 return await getDeviceAttribute({
                   deviceProfileId,
                   dataType:
-                    isControlComponent(category!) || isBooleanComponent(unref(selectWidgetKeys))
+                    (isControlComponent(category!) &&
+                      unref(selectWidgetKeys).componentKey !== 'LateralNumericalControl') ||
+                    isBooleanComponent(unref(selectWidgetKeys))
                       ? DataTypeEnum.IS_BOOL
                       : undefined,
                 });