开关loading

pages/waterandfernew/details.vue

@@ -92,21 +92,29 @@
 					</view> -->
 					<!-- 桶 -->
 					<view class="colList">
-						<view class="preClo" v-for="item, index in buttonList" v-if="(index + 1) % 2 == 1" :key="`fei${index}`">
+						<view class="preClo" v-for="item, index in buttonList" v-if="(index + 1) % 2 == 1"
+							:key="`fei${index}`">
 							<view>
 								肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }}
 							</view>
-							<image src="../../static/images/waterandfernew/colNew.png" v-if="buttonList.length == 2"></image>
-							<image src="../../static/images/waterandfernew/colLeft.png" v-else-if="buttonList.length > 2 && index == 0"></image>
-							<image src="../../static/images/waterandfernew/colRight.png" v-else-if="buttonList.length > 2 && index == buttonList.length - 2"></image>
+							<image src="../../static/images/waterandfernew/colNew.png" v-if="buttonList.length == 2">
+							</image>
+							<image src="../../static/images/waterandfernew/colLeft.png"
+								v-else-if="buttonList.length > 2 && index == 0"></image>
+							<image src="../../static/images/waterandfernew/colRight.png"
+								v-else-if="buttonList.length > 2 && index == buttonList.length - 2"></image>
 							<image src="../../static/images/waterandfernew/colCenter.png" v-else></image>
 							<view class="jiaoBtn" v-if="facilityvalve.length > 0">
-								<u-switch v-model="facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`]['off']" active-color="#14A478" inactive-color="#AEB4C2" :loading="facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`]['disabled']"
+								<u-switch v-model="facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`]['off']"
+									active-color="#14A478" inactive-color="#AEB4C2"
+									:loading="facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`]['disabled']"
 									@change="switchchange($event, facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`]['number'], facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`], index == 0 ? 10 : index == 2 ? 9 : 8)"></u-switch>
 							</view>
 							<view class="shanBox" v-if="facilityvalve.length > 0">
-								<image v-if="!facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`]['off']" src="../../static/images/waterandfernew/shan.png"></image>
-								<image v-else class="circleAnm" src="../../static/images/waterandfernew/shanannimate.png"></image>
+								<image v-if="!facilityvalve[`${index == 0 ? 10 : index == 2 ? 9 : 8}`]['off']"
+									src="../../static/images/waterandfernew/shan.png"></image>
+								<image v-else class="circleAnm"
+									src="../../static/images/waterandfernew/shanannimate.png"></image>
 							</view>
 							<view class="btnBox" @click="switchchange($event, item.number, item, index, true)">
 								<image v-if="item.off" src="../../static/images/waterandfernew/feiopen.png"></image>
@@ -119,7 +127,8 @@
 						<image src="../../static/images/waterandfernew/exit.png"></image>
 					</view>
 					<!-- 注肥泵 -->
-					<view class="feiLight" @click="switchchange(!feiBeng, facilityvalve[6].number, facilityvalve[6], 6)">
+					<view class="feiLight"
+						@click="switchchange(!feiBeng, facilityvalve[6].number, facilityvalve[6], 6)">
 						<image v-if="feiBeng" src="../../static/images/waterandfernew/feiAllopen.png"></image>
 						<image v-else src="../../static/images/waterandfernew/feiAllclose.png"></image>
 					</view>
@@ -129,7 +138,8 @@
 						<image v-else src="../../static/images/waterandfernew/kongopen.png"></image>
 					</view>
 					<!-- 进水泵 -->
-					<view class="warterIn" @click="switchchange(!mainBeng, facilityvalve[7].number, facilityvalve[7], 7)">
+					<view class="warterIn"
+						@click="switchchange(!mainBeng, facilityvalve[7].number, facilityvalve[7], 7)">
 						<image v-if="mainBeng" src="../../static/images/waterandfernew/feiopen.png"></image>
 						<image v-else src="../../static/images/waterandfernew/feiclose.png"></image>
 					</view>
@@ -611,7 +621,7 @@
 						duration: 2000,
 						icon: 'none'
 					})
-					setTimeout(()=> {
+					setTimeout(() => {
 						this.getEquipstatus()
 					}, 2000)
 				}
@@ -739,21 +749,21 @@
 </script>
 
 <style scoped lang="less">
-	
 	.circleAnm {
 		animation: ancirle 2s linear infinite;
 	}
-	
+
 	// 旋转
 	@keyframes ancirle {
 		0% {
 			transform: rotate(0);
 		}
-	
+
 		100% {
 			transform: rotate(360deg);
 		}
 	}
+
 	.box {
 		position: relative;
 		width: 100%;
@@ -895,6 +905,7 @@
 		.axiosBox {
 			position: relative;
 			padding: 48rpx 32rpx;
+
 			.title {
 				color: #333333;
 				font-size: 28rpx;
@@ -1008,7 +1019,8 @@
 						width: 88rpx;
 						height: 272rpx;
 					}
-					.shanBox{
+
+					.shanBox {
 						position: absolute;
 						width: 64rpx;
 						height: 64rpx;
@@ -1016,12 +1028,14 @@
 						left: 50%;
 						transform: translateX(-50%);
 						z-index: 2;
+
 						image {
 							width: 64rpx;
 							height: 64rpx;
 						}
 					}
-					.jiaoBtn{
+
+					.jiaoBtn {
 						position: absolute;
 						width: 64rpx;
 						height: 32rpx;
@@ -1029,22 +1043,35 @@
 						left: 50%;
 						transform: translateX(-50%);
 						z-index: 2;
-						.u-switch{
+
+						.u-switch {
 							width: 64rpx;
 							height: 32rpx;
-							/deep/ .u-switch__node{
+
+							/deep/ .u-switch__node {
 								width: 28rpx !important;
 								height: 28rpx !important;
+								top: 2rpx !important;
+							}
+
+							/deep/ .u-switch__loading {
+								height: 20rpx !important;
 							}
 						}
+
+						/deep/ .u-switch--on .u-switch__node {
+							transform: translateX(36rpx) !important;
+						}
 					}
-					.btnBox{
+
+					.btnBox {
 						position: absolute;
 						width: 66rpx;
 						height: 72rpx;
 						bottom: 40rpx;
 						left: 22rpx;
 						z-index: 2;
+
 						image {
 							width: 66rpx;
 							height: 72rpx;
@@ -1083,69 +1110,79 @@
 					}
 				}
 			}
-			.lineExit{
-				
-			}
-			.exit{
+
+			.lineExit {}
+
+			.exit {
 				position: absolute;
 				width: 22rpx;
 				height: 20rpx;
 				top: 360rpx;
 				right: 252rpx;
 				z-index: 2;
-				image{
+
+				image {
 					width: 22rpx;
 					height: 20rpx;
 				}
 			}
-			.warterIn{
+
+			.warterIn {
 				position: absolute;
 				width: 66rpx;
 				height: 72rpx;
 				top: 190rpx;
 				left: 52rpx;
 				z-index: 3;
-				image{
+
+				image {
 					width: 66rpx;
 					height: 72rpx;
 				}
 			}
-			.warterLight{
+
+			.warterLight {
 				position: absolute;
 				width: 72rpx;
 				height: 48rpx;
 				top: 506rpx;
 				left: 110rpx;
 				z-index: 3;
-				image{
+
+				image {
 					width: 72rpx;
 					height: 48rpx;
 				}
 			}
-			.feiLight{
+
+			.feiLight {
 				position: absolute;
 				width: 72rpx;
 				height: 66rpx;
 				top: 424rpx;
 				right: 140rpx;
 				z-index: 3;
-				image{
+
+				image {
 					width: 72rpx;
 					height: 66rpx;
 				}
 			}
-			.kongBox{
+
+			.kongBox {
 				position: absolute;
 				width: 84rpx;
 				height: 108rpx;
 				top: 390rpx;
 				right: 228rpx;
 				z-index: 3;
-				image{
+
+				image {
 					width: 84rpx;
 					height: 108rpx;
 				}
 			}
+
 			.fengBox {
 				position: absolute;
 				right: 12rpx;