fix: 优化滑块交互体验并完善弹窗、列表功能

1. 为滑块添加拖拽状态样式，移除拖拽时的过渡动画避免卡顿
2. 新增滑块值变化重复判断，减少不必要的状态更新
3. 统一给u-modal添加遮罩关闭和取消按钮
4. 将小时选择列表从0-23改为1-12
5. 初始化时默认选中第一个设备分类
6. 修复equipList2页面滑块绑定类和事件的问题

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

@@ -168,7 +168,7 @@
 					<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.stop.prevent="onSliderTouchMove($event, 10, 100)"
             @touchend.stop="onSliderTouchEnd"
@@ -192,7 +192,7 @@
 					<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.stop.prevent="onSliderTouchMove($event, 10, 100)"
             @touchend.stop="onSliderTouchEnd"
@@ -210,7 +210,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">
@@ -302,6 +309,7 @@ import openingDegree from '../assets/openingDegree.png';
 				current_device_id: '', //当前设备ID
 				menuList: [],
 				sliderRect: {},
+				sliderDragging: false,
 				equipContrlForm: {
 					openingValue: 60,
 				},
@@ -437,6 +445,7 @@ import openingDegree from '../assets/openingDegree.png';
 				}
 			},
 			onSliderTouchStart(e, field, min, max) {
+				this.sliderDragging = true
 				this.sliderField = field
 				this.sliderMin = min
 				this.sliderMax = max
@@ -452,6 +461,7 @@ import openingDegree from '../assets/openingDegree.png';
 			},
 			onSliderTouchEnd() {
 				this.sliderField = ''
+				this.sliderDragging = false
 			},
 			onSliderTap(e, field, min, max) {
 				const query = uni.createSelectorQuery().in(this)
@@ -465,6 +475,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(){
@@ -485,7 +496,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,
@@ -1207,6 +1218,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;