refactor(uni-app pages): 优化滑块交互与弹窗配置

1.  为滑块添加拖拽状态类，禁用拖拽时的过渡动画避免卡顿
2.  修复滑块点击无变化时重复更新表单的问题
3.  统一弹窗配置，开启遮罩关闭和取消按钮
4.  调整小时选择器范围为1-12时
5.  初始化默认选中第一个设备分组

pages/cb/zhamenFirst/controls.vue

@@ -70,7 +70,7 @@
 					<view class="slider-row" style="display:flex;align-items:center;"><view class="slider-container">
           <view class="slider-min-value">10</view>
           <view
-            class="custom-progress"
+            :class="['custom-progress', { dragging: sliderDragging }]"
             @touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 100)"
             @touchmove="onSliderTouchMove($event, 10, 100)"
             @touchend.stop="onSliderTouchEnd"
@@ -87,7 +87,15 @@
 				<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit">提交</u-button>
 			</u-form>
 		</u-popup>
-    <u-modal v-model="show2" :title="'提示'"  :content="content" @confirm="confirmHandle" @cancel="show2 = false"></u-modal>
+    <u-modal
+      v-model="show2"
+      :title="'提示'"
+      :content="content"
+      @confirm="confirmHandle"
+      @cancel="show2 = false"
+      :mask-close-able="true" 
+      :show-cancel-button="true"
+    ></u-modal>
     <u-select v-model="show1" :list="hours" @confirm="changeHour"></u-select>
     <u-popup v-model="show4" mode="center" width="80%" :mask-close-able="false">
 			<view class="progress-container">
@@ -127,6 +135,7 @@ export default {
         name:'定时',
         value:1
       }],
+      sliderDragging: false,
       equipContrlForm: {
         openingValue: 60,
       },
@@ -158,7 +167,7 @@ export default {
       }, 125);
     },
     getHours(){
-      for(let i = 0; i < 24; i++){
+      for(let i = 1; i <= 12; i++){
         this.hours.push({
           label: i + ' 时',
           value: i,
@@ -213,6 +222,7 @@ export default {
       this.deviceList = this.leftList[this.activeIndex]?.device_list || [];
     },
     onSliderTouchStart(e, field, min, max) {
+      this.sliderDragging = true
       const clientX = e.touches[0].clientX
       this.sliderField = field
       this.sliderMin = min
@@ -230,6 +240,7 @@ export default {
     },
     onSliderTouchEnd() {
       this.sliderField = ''
+      this.sliderDragging = false
     },
     onSliderTap(e, field, min, max) {
       const query = uni.createSelectorQuery().in(this)
@@ -243,6 +254,7 @@ export default {
       let ratio = (clientX - this.sliderRect.left) / this.sliderRect.width
       ratio = Math.max(0, Math.min(1, ratio))
       const value = Math.round(min + ratio * (max - min))
+      if (this.equipContrlForm[field] === value) return
       this.$set(this.equipContrlForm, field, value)
     },
     openAll(){
@@ -257,6 +269,8 @@ export default {
       res?.forEach((item) => {
         this.leftList.push(item);
       });
+      this.activeIndex = 0;
+      this.deviceList = this.leftList[this.activeIndex]?.device_list || [];
     },
     async getdeviceSfStatus() {
       this.activeIndex = 0;
@@ -419,6 +433,12 @@ uni-page-body {
   .custom-progress{
     width: 500rpx;
     padding: 0;
+    &.dragging{
+      .progress-fill,
+      .progress-thumb{
+        transition: none;
+      }
+    }
     .progress-track{
       position: relative;
       height: 12rpx;

pages/equipList2/index.vue

@@ -169,7 +169,7 @@
 					<view class="slider-row" style="display:flex;align-items:center;"><view class="slider-container">
           <view class="slider-min-value">10</view>
           <view
-            class="custom-progress"
+            :class="['custom-progress', { dragging: sliderDragging }]"
             @touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 100)"
             @touchmove="onSliderTouchMove($event, 10, 100)"
             @touchend.stop="onSliderTouchEnd"
@@ -192,7 +192,7 @@
 					<view class="slider-row" style="display:flex;align-items:center;"><view class="slider-container">
           <view class="slider-min-value">10</view>
           <view
-            class="custom-progress"
+            :class="['custom-progress', { dragging: sliderDragging }]"
             @touchstart.stop="onSliderTouchStart($event, 'openingValue', 10, 100)"
             @touchmove="onSliderTouchMove($event, 10, 100)"
             @touchend.stop="onSliderTouchEnd"
@@ -209,7 +209,14 @@
 				<u-button type="success" style="width: 94%;margin-left: 3%;margin-bottom: 40rpx" @click="submit2">提交</u-button>
 			</u-form>
 		</u-popup>
-		<u-modal v-model="show3" :content="content" @confirm="confirmClose" @cancel="cancelClose"></u-modal>
+		<u-modal
+			v-model="show3"
+			:content="content"
+			@confirm="confirmClose"
+			@cancel="cancelClose"
+			:mask-close-able="true"
+			:show-cancel-button="true"
+		></u-modal>
 		<u-select v-model="show1" :list="hours" @confirm="changeHour"></u-select>
 		<u-select v-model="show2" :list="minutes" @confirm="changeMinute"></u-select>
 		<u-popup v-model="show4" mode="center" width="80%" :mask-close-able="false">
@@ -301,6 +308,7 @@ import openingDegree from '../assets/openingDegree.png';
 				current_device_id: '', //当前设备ID
 				menuList: [],
 				sliderRect: {},
+				sliderDragging: false,
 				equipContrlForm: {
 					openingValue: 60,
 				},
@@ -436,6 +444,7 @@ import openingDegree from '../assets/openingDegree.png';
 				}
 			},
 			onSliderTouchStart(e, field, min, max) {
+				this.sliderDragging = true
 				const clientX = e.touches[0].clientX
 				this.sliderField = field
 				this.sliderMin = min
@@ -453,6 +462,7 @@ import openingDegree from '../assets/openingDegree.png';
 			},
 			onSliderTouchEnd() {
 				this.sliderField = ''
+				this.sliderDragging = false
 			},
 			onSliderTap(e, field, min, max) {
 				const query = uni.createSelectorQuery().in(this)
@@ -466,6 +476,7 @@ import openingDegree from '../assets/openingDegree.png';
 				let ratio = (clientX - this.sliderRect.left) / this.sliderRect.width
 				ratio = Math.max(0, Math.min(1, ratio))
 				const value = Math.round(min + ratio * (max - min))
+				if (this.equipContrlForm[field] === value) return
 				this.$set(this.equipContrlForm, field, value)
 			},
 			submit(){
@@ -486,7 +497,7 @@ import openingDegree from '../assets/openingDegree.png';
 				this.showPopup2 = false;
 			},
 			getHours(){
-				for(let i = 0; i < 24; i++){
+				for(let i = 1; i <= 12; i++){
 					this.hours.push({
 						label: i + ' 时',
 						value: i,
@@ -1208,6 +1219,12 @@ import openingDegree from '../assets/openingDegree.png';
   .custom-progress{
     width: 500rpx;
     padding: 0;
+    &.dragging{
+      .progress-fill,
+      .progress-thumb{
+        transition: none;
+      }
+    }
     .progress-track{
       position: relative;
       height: 12rpx;