更新

pages/6170/deviceControl/index.vue

@@ -67,10 +67,12 @@
 				</view>
 
 				<!-- 灯光亮度控制 -->
-				<view class="control-card" @touchmove.prevent>
-					<slider :value="sliderValue" min="10" max="100" activeColor="rgb(187, 230, 0)"
-						backgroundColor="rgb(26, 26, 26)" :show-value="false" @changing="onSliderChanging"
-						@change="onSliderChanging" />
+				<view class="control-card" @touchstart="cardTouchStart" @touchmove="cardTouchMove" @touchend="cardTouchEnd">
+					<view @touchmove.prevent>
+						<slider :value="sliderValue" min="10" max="100" activeColor="rgb(187, 230, 0)"
+							backgroundColor="rgb(26, 26, 26)" :show-value="false" @changing="onSliderChanging"
+							@change="onSliderChangeEnd" block-color="#BBE600" block-size="20" />
+					</view>
 				</view>
 
 				<!-- 灯光模式选择 -->
@@ -257,6 +259,11 @@
 	export default {
 		data() {
 			return {
+				lastBrightnessTime: 0,
+				isCardSliding: false,
+				cardRect: null,
+				touchStartX: 0,
+				touchStartY: 0,
 				pageLoading: true,
 				mainMode: 'string',
 				secondaryMode: 'string',
@@ -328,18 +335,107 @@
 				})
 			},
 			// ***********进度条***********
+			cardTouchStart(e) {
+				if (!this.cardRect) return;
+				this.touchStartX = e.touches[0].clientX;
+				this.touchStartY = e.touches[0].clientY;
+			},
+			
+			cardTouchMove(e) {
+				if (!this.cardRect || e.touches.length === 0) return;
+			
+				const deltaX = e.touches[0].clientX - this.touchStartX;
+				const deltaY = e.touches[0].clientY - this.touchStartY;
+			
+				// 只有当水平滑动距离大于垂直距离时，才判断为有效滑动
+				if (Math.abs(deltaX) > Math.abs(deltaY)) {
+					this.isCardSliding = true;
+					this.updateSliderFromTouch(e);
+				}
+			},
+			
+			cardTouchEnd(e) {
+				if (this.isCardSliding) {
+					// 触摸结束时，调用滑动结束的处理函数来发送最终值
+					this.onSliderChangeEnd({
+						detail: {
+							value: this.sliderValue
+						}
+					});
+					this.isCardSliding = false;
+				}
+				this.touchStartX = 0;
+				this.touchStartY = 0;
+			},
+			
+			updateSliderFromTouch(e) {
+				const touchX = e.touches[0].clientX;
+				const cardLeft = this.cardRect.left;
+				const cardWidth = this.cardRect.width;
+			
+				let relativeX = touchX - cardLeft;
+			
+				// 边界处理
+				if (relativeX < 0) relativeX = 0;
+				if (relativeX > cardWidth) relativeX = cardWidth;
+			
+				const newValue = Math.round((relativeX / cardWidth) * 100);
+			
+				// 调用已有的节流函数来更新值和发送命令
+				this.onSliderChanging({
+					detail: {
+						value: newValue
+					}
+				});
+			},
 			onSliderChanging(e) {
-				console.log('这是我滑动的吗');
-				this.sliderValue = e.detail.value;
+				if (!this.cardRect) return;
+				let value = e.detail.value;
+				if (value < 10) {
+					value = 10;
+				}
+				this.sliderValue = value; // 实时更新UI
+			
+				const now = Date.now();
+				// 使用节流防止指令发送过于频繁
+				if (now - this.lastBrightnessTime > 200) { // 200毫秒节流
+					this.lastBrightnessTime = now;
+			
+					// 增加轻微的震动反馈，提升手感
+					uni.vibrateShort({
+						type: 'light'
+					});
+			
+					let data = {
+						deviceId: this.deviceID,
+						instructValue: this.sliderValue + '.00'
+					}
+					lightBrightnessSettings(data).then((res) => {
+						if (res.code !== 200) {
+							// 可以在这里处理错误，但滑动中不建议用toast
+						}
+					})
+				}
+			},
+			onSliderChangeEnd(e) {
+				let value = e.detail.value;
+				if (value < 10) {
+					value = 10;
+				}
+				this.sliderValue = value;
+			
 				let data = {
 					deviceId: this.deviceID,
 					instructValue: this.sliderValue + '.00'
 				}
 				lightBrightnessSettings(data).then((res) => {
 					if (res.code == 200) {
-
+						// 可以在此处理成功反馈
 					} else {
-
+						uni.showToast({
+							icon: 'none',
+							title: res.msg || '亮度调节失败'
+						})
 					}
 				})
 			},
@@ -675,6 +771,13 @@
 				if (res.code == 200) {
 					// 最后关闭加载状态
 					this.pageLoading = false
+					this.$nextTick(() => {
+						uni.createSelectorQuery().in(this).select('.control-card').boundingClientRect(data => {
+							if (data) {
+								this.cardRect = data;
+							}
+						}).exec();
+					})
 					this.deviceInfo = res.data
 					this.personnelInfo = {
 						unitName: res.data.personnelInfo?.unitName || '',