水肥一体化基本完成

pages/waterandfernew/details.vue

@@ -24,10 +24,15 @@
 					</view>
 					<view class="histimeBox">
 						<u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
-						<view class="time" @click="calendarshow = true">{{historyTime.startDate ? historyTime.startDate : '开始'}}</view>
+						<view class="time" @click="calendarshow = true">
+							{{historyTime.startDate ? historyTime.startDate : '开始'}}
+						</view>
 						<view class="">至</view>
-						<view class="time" @click="calendarshow = true">{{historyTime.endDate ? historyTime.endDate : '结束'}}</view>
-						<u-icon name="close-circle" color="#C1C1C1" size="28" @click="historyTime={};getHistoryData()" v-if="historyTime.startDate"></u-icon>
+						<view class="time" @click="calendarshow = true">
+							{{historyTime.endDate ? historyTime.endDate : '结束'}}
+						</view>
+						<u-icon name="close-circle" color="#C1C1C1" size="28" @click="historyTime={};getHistoryData()"
+							v-if="historyTime.startDate"></u-icon>
 					</view>
 					<u-calendar v-model="calendarshow" mode="range" @change="changeDate"></u-calendar>
 					<view class="chartBox">
@@ -42,20 +47,90 @@
 			</view>
 		</view>
 		<!-- 历史记录弹框 -->
-		<u-tabs :list="list" active-color="#14A478" bar-width="300" :is-scroll="false" :current="current"
+		<u-tabs :list="list" active-color="#14A478" bar-width="100" :is-scroll="false" :current="current"
 			@change="change"></u-tabs>
 		<!-- 设备图 -->
 		<view class="devicePhoto" v-if="current == 0">
-
+			<view class="titleBox">
+				<u-alert-tips type="primary" :title-style="alertTipColor" title="点击按钮可对应控制阀门开关"
+					:show-icon="true"></u-alert-tips>
+				<view class="btn" @click="statusPanel=true">控制面板</view>
+				<u-popup v-model="statusPanel" mode="bottom">
+					<view class="consoleBox">
+						<view class="swichBox">
+							<u-row :gutter="16" justify="space-between">
+								<u-col span="6" v-for="item in facilityvalve">
+									<view class="preSwich">
+										<view>{{item.name}}</view>
+										<u-switch v-model="item.off" active-color="#14A478"
+											inactive-color="#AEB4C2"></u-switch>
+									</view>
+								</u-col>
+							</u-row>
+						</view>
+						<u-button type="success" @click="statusPanel=false">确定</u-button>
+					</view>
+				</u-popup>
+			</view>
+			<view class="main">
+				<image class="mainContent" src="../../static/images/waterandfernew/main.png"></image>
+				<view class="sourceBox">
+					<view class="smallBox">
+						水源
+					</view>
+				</view>
+				<!-- 桶 -->
+				<view class="colList">
+					<view class="preClo" v-for="(fei, index) in Array(feiNum / 2)" :key="`fei${index}`">
+						<view>
+							肥料{{ index + 1 }}
+						</view>
+						<image src="../../static/images/waterandfernew/col.png"></image>
+					</view>
+				</view>
+				<!-- 电风扇 -->
+				<view class="fengBox">
+					<view class="relativeBox">
+						<image src="../../static/images/waterandfernew/fengmain.png"></image>
+						<image src="../../static/images/waterandfernew/fengleafs.png"></image>
+					</view>
+				</view>
+				<!-- 水管控制阀 -->
+				<view class="benList">
+					<view class="preBen" v-for="item, index in buttonList" v-if="(index + 1) % 2 == 1"
+						@click="switchchange(!item.off, item.number, item, index, true)">
+						<image class="daoguan" src="../../static/images/waterandfernew/bottom.png"
+							v-if="(index + 1) % 2 < 4"></image>
+						<view class="info">
+							肥料{{ (index + 1) / 2 > 1 ? (index + 2) / 2 : 1 }}开关
+						</view>
+						<image class="status" v-if="item.off" src="../../static/images/waterandfernew/open.png"></image>
+						<image class="status" v-else src="../../static/images/waterandfernew/close.png"></image>
+					</view>
+					<view class="preBen" v-for="item, index in facilityvalve" v-if="index > buttonList.length - 1"
+						@click="switchchange(!item.off, item.number, item, index)">
+						<image class="daoguan" src="../../static/images/waterandfernew/bottom.png"
+							v-if="(index-buttonList.length + buttonList.length/2) < 4"></image>
+						<view class="info">
+							{{item.name}}
+						</view>
+						<image class="status" v-if="item.off" src="../../static/images/waterandfernew/open.png"></image>
+						<image class="status" v-else src="../../static/images/waterandfernew/close.png"></image>
+					</view>
+				</view>
+			</view>
 		</view>
 		<!-- 操作记录 -->
 		<view class="consoleList" v-else>
 			<view class="histimeBox">
 				<u-icon name="calendar" color="#C1C1C1" size="24"></u-icon>
-				<view class="time" @click="consoleshow = true">{{consoleTime.startDate ? consoleTime.startDate : '开始'}}</view>
+				<view class="time" @click="consoleshow = true">{{consoleTime.startDate ? consoleTime.startDate : '开始'}}
+				</view>
 				<view class="">至</view>
-				<view class="time" @click="consoleshow = true">{{consoleTime.endDate ? consoleTime.endDate : '结束'}}</view>
-				<u-icon name="close-circle" color="#C1C1C1" size="28" @click="clearContime" v-if="consoleTime.startDate"></u-icon>
+				<view class="time" @click="consoleshow = true">{{consoleTime.endDate ? consoleTime.endDate : '结束'}}
+				</view>
+				<u-icon name="close-circle" color="#C1C1C1" size="28" @click="clearContime"
+					v-if="consoleTime.startDate"></u-icon>
 			</view>
 			<u-calendar v-model="consoleshow" mode="range" @change="changeConsoleDate"></u-calendar>
 			<view class="tableList tableTitle">
@@ -80,6 +155,10 @@
 	export default {
 		data() {
 			return {
+				alertTipColor: {
+					color: '#1890FF',
+					fontSize: "28rpx"
+				},
 				device_id: '',
 				mainBeng: false,
 				feiBeng: false,
@@ -89,6 +168,9 @@
 				cHeight: '350',
 				pixelRatio: 1,
 				facilityvalve: [],
+				feiNum: 0, //肥料桶实际占据通道个数
+				buttonList: [], // 肥料开关列表
+				colomRoundList: ['j1', 'j2', 'j3', 'j4', 'j5', 'j6', 'j7', 'j8'], // 废料桶的通道
 				ElementList: [],
 				typename: [
 					"-",
@@ -105,9 +187,12 @@
 				list: [{
 					name: '设备控制'
 				}, {
+					name: '执行结果'
+				}, {
 					name: '操作记录'
 				}],
-				current: 1,
+				statusPanel: false,
+				current: 0,
 				consoleshow: false,
 				consoleTime: {},
 				tableData: [],
@@ -117,6 +202,14 @@
 			}
 		},
 		methods: {
+			changeTimeStatus(item, changeIndex) {
+				this.timer = setTimeout(() => {
+					item.disabled = false; // 改变值
+					this.facilityvalve[changeIndex].disabled = false;
+					this.getEquipstatus()
+					this.timer = null; // 清空定时器引用
+				}, 15000);
+			},
 			// 选择日期
 			changeDate(e) {
 				console.log(e)
@@ -276,7 +369,12 @@
 			},
 			// 切换选项卡
 			change(index) {
+				this.page = 1;
+				this.total = 0;
 				this.current = index;
+				this.status = 'loadmore';
+				this.tableData = [];
+				this.getEquipcontroldata();
 			},
 			// 获取要素实时数据
 			async getElmentInfo() {
@@ -287,14 +385,14 @@
 					},
 				})
 				var conf = res.conf.eleName.split('/');
-				var dataList = res.data;
+				var dataList = [res.data.device_data];
 				if (dataList.length == 0) return
 				this.ElementList = [];
 				conf.forEach((item, index) => {
 					let obj = {}
 					if (item == '-') return
 					obj.name = item;
-					let valList = dataList[0].device_data[`e${index + 1}`].split('#');
+					let valList = dataList[0][`e${index + 1}`].split('#');
 					obj.value = valList[0];
 					obj.unit = valList[1];
 					obj.time = dataList[0].uptime;
@@ -383,42 +481,48 @@
 						this.feiBeng = true;
 					}
 				})
+				let feiNum = 0; // 记录废料桶占据通道个数，两个通道为一个肥料桶
+				this.buttonList = [];
+				this.facilityvalve.forEach((item, index) => {
+					if (this.colomRoundList.indexOf(item.type) > -1) {
+						feiNum++;
+						this.buttonList.push(item);
+					}
+					if (item.type == 'j10' && item.off == true) {
+						// 判断注水泵是否打开
+						this.mainBeng = true;
+					}
+					if (item.type == 'j9' && item.off == true) {
+						// 判断施肥阀是否打开
+						this.feiBeng = true;
+					}
+				})
+				this.feiNum = feiNum;
 				console.log(this.facilityvalve)
 			},
-			getEquipcontrol(num, state) {
+			async getEquipcontrol(num, state) {
 				//设备控制
-				this.$axios({
-					method: "POST",
+				let res = await this.$myRequest({
 					url: "/api/api_gateway?method=xphsp.views.control_order",
-					data: this.qs.stringify({
+					data: {
 						device_id: this.device_id,
 						relayNum: num,
 						relayState: state,
-					}),
-				}).then((res) => {
-					//console.log(res.data.data);
-					if (res.data.data && res.data.data.controlState) {
-						this.$message({
-							message: "指令下发成功",
-							type: "success",
-						});
-					} else {
-						// for (var i = 0; i < this.facilityvalve.length; i++) {
-						//   //console.log(this.facilityvalve[i].number, res.data.data.relayNum);
-						//   if (
-						//     this.facilityvalve[i].number == Number(num)
-						//   ) {
-						//     //console.log(this.facilityvalve[i]);
-						//     this.facilityvalve[i].off = !state;
-						//   }
-						// }
-						this.getEquipstatus()
-						this.$message({
-							message: res.data.message,
-							type: "warning",
-						});
-					}
-				});
+					},
+				})
+				if(res.controlState) {
+					 uni.showToast({
+					 	title: '指令下发成功',
+					 	duration: 2000,
+						icon:'none'
+					 });
+				} else {
+					uni.showToast({
+						title:res.message,
+						duration: 2000,
+						icon:'none'
+					})
+				}
 			},
 			// sf_control_data
 			// 操作记录日期
@@ -451,6 +555,7 @@
 						page_size: 15,
 						start: begin,
 						end: end,
+						sys_control: this.current - 1
 					},
 				})
 				// this.tableData = [];
@@ -464,36 +569,64 @@
 				}
 				console.log(this.tableData);
 			},
-			switchchange(e, state, item, index) {
+			switchchange(e, state, item, index, isfeiButton) {
+				// 是否是肥料开关，是的话 两个合并为一个
+				if (isfeiButton) {
+					item.disabled = true;
+					this.changeTimeStatus(item, index);
+					// 当前是打开
+					if (e) {
+						// 打开通道传1，关闭通道传0
+						this.getEquipcontrol(state, 1);
+						this.getEquipcontrol(state + 1, 0);
+					} else {
+						this.getEquipcontrol(state + 1, 0);
+						this.getEquipcontrol(state, 1);
+					}
+					return
+				}
 				item.off = e;
-				if (item.type == 'j9') {
+				if (item.type == 'j10') {
 					// 判断注水泵是否打开
 					this.mainBeng = e;
 				}
-				if (item.type == 'j10') {
+				if (item.type == 'j9') {
 					// 判断施肥阀是否打开
 					this.feiBeng = e;
 				}
-				if (['j1', 'j2', 'j3', 'j4', 'j5', 'j6'].indexOf(item.type) > 0) {
-					let changeIndex = index;
-					if ((index + 1) % 2 == 0) {
-						// 偶数 往前取值
-						this.facilityvalve[index - 1].disabled = true;
-						changeIndex = index - 1;
-					} else if ((index + 1) % 2 == 1) {
-						// 基数 往后取值
-						this.facilityvalve[index + 1].disabled = true;
-						changeIndex = index + 1;
-					}
-					item.disabled = true;
-					this.changeTimeStatus(item, changeIndex);
-				}
+				// if (this.colomRoundList.indexOf(item.type) > -1) {
+				//   let changeIndex = index;
+				//   if ((index + 1) % 2 == 0) {
+				//     // 偶数 往前取值
+				//     this.facilityvalve[index - 1].disabled = true;
+				//     changeIndex = index - 1;
+				//   } else if ((index + 1) % 2 == 1) {
+				//     // 基数 往后取值
+				//     this.facilityvalve[index + 1].disabled = true;
+				//     changeIndex = index + 1;
+				//   }
+				//   item.disabled = true;
+				//   this.changeTimeStatus(item, changeIndex);
+				//   this.getEquipcontrol(changeIndex, Number(!e));
+				// } else {
+				// }
+				item.disabled = true;
+				this.changeTimeStatus(item, index);
 				//console.log(Number(e), state);
 				this.getEquipcontrol(state, Number(e));
 			},
+			currentchange(e) {
+				//页码
+				if (this.type == 0) {
+					this.pageDialog = e;
+				} else {
+					this.page = e;
+				}
+				this.getEquipcontroldata(this.type);
+			},
 		},
 		onReachBottom() {
-			if (this.current == 1 && this.status == 'loadmore') {
+			if (this.current != 0 && this.status == 'loadmore') {
 				this.page++;
 				this.getEquipcontroldata()
 			}
@@ -521,7 +654,7 @@
 
 	.bigOpen {
 		overflow: hidden;
-		height: 100%;
+		height: 100vh;
 	}
 
 	/deep/ .u-flex {
@@ -580,9 +713,11 @@
 		border-radius: 8rpx;
 		margin-top: 54rpx;
 		border: 2rpx solid var(--neutral-color-border-light, #E4EDEA);
-		.u-icon{
+
+		.u-icon {
 			z-index: 10;
 		}
+
 		.time {
 			width: 280rpx;
 			color: #C1C1C1;
@@ -594,6 +729,50 @@
 		}
 	}
 
+	.consoleBox {
+		position: relative;
+		max-height: 75vh;
+		padding-bottom: 80rpx;
+		overflow: auto;
+
+		.u-row {
+			box-sizing: border-box;
+
+			.u-col {
+				box-sizing: border-box;
+			}
+		}
+
+		.u-btn {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+			background: #14A478;
+		}
+
+		.swichBox {
+			position: relative;
+			padding: 32rpx;
+			overflow: hidden;
+
+			.preSwich {
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				padding: 24rpx 18rpx;
+				border-radius: 8rpx;
+				background: #EFF2FA;
+				margin-bottom: 32rpx;
+
+				view {
+					color: #333333;
+					font-size: 28rpx;
+				}
+			}
+		}
+	}
+
 	.hisBox {
 		padding-bottom: 100rpx;
 
@@ -622,9 +801,153 @@
 		}
 	}
 
+	.devicePhoto {
+		padding: 32rpx;
+
+		.titleBox {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+
+			.btn {
+				padding: 10rpx 14rpx;
+				border-radius: 8rpx;
+				background: #14A478;
+				color: #fff;
+				font-size: 28rpx;
+			}
+		}
+
+		.main {
+			position: relative;
+			padding-top: 32rpx;
+
+			.mainContent {
+				position: absolute;
+				left: 50%;
+				transform: translateX(-50%);
+				width: 565rpx;
+				top: 112rpx;
+				height: 242rpx;
+				z-index: 1;
+			}
+
+			.sourceBox {
+				position: absolute;
+				left: 20rpx;
+				z-index: 2;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				width: 112rpx;
+				height: 112rpx;
+				background: #E3FDFF;
+				border-radius: 112rpx;
+				color: #fff;
+
+				view {
+					width: 85rpx;
+					height: 85rpx;
+					background: #1890FF;
+					border-radius: 85rpx;
+					text-align: center;
+					line-height: 85rpx;
+					font-size: 28rpx;
+				}
+			}
+
+			.colList {
+				position: absolute;
+				z-index: 2;
+				top: 24rpx;
+				left: 120rpx;
+				width: 470rpx;
+				display: flex;
+				justify-content: space-between;
+
+				.preClo {
+					width: 80rpx;
+					margin-left: 40rpx;
+
+					view {
+						text-align: center;
+						color: #333333;
+						font-size: 28rpx;
+						margin-bottom: 20rpx;
+					}
+
+					image {
+						width: 80rpx;
+						height: 164rpx;
+					}
+				}
+			}
+
+			.benList {
+				position: absolute;
+				width: 565rpx;
+				left: 50%;
+				transform: translateX(-50%);
+				top: 342rpx;
+
+				.preBen {
+					float: left;
+					text-align: center;
+					width: 25%;
+
+					.daoguan {
+						width: 20rpx;
+						height: 40rpx;
+					}
+
+					.info {
+						color: #333333;
+						font-size: 12px;
+						font-weight: 400;
+					}
+
+					.status {
+						width: 76rpx;
+						height: 100rpx;
+						margin-top: 10rpx;
+					}
+				}
+			}
+
+			.fengBox {
+				position: absolute;
+				right: 12rpx;
+				top: 270rpx;
+				width: 55rpx;
+				height: 44rpx;
+				z-index: 2;
+
+				.relativeBox {
+					position: relative;
+					width: 100%;
+					height: 100%;
+
+					image:nth-child(1) {
+						width: 16rpx;
+						height: 32rpx;
+					}
+
+					image:nth-child(2) {
+						position: absolute;
+						right: 0;
+						top: -6rpx;
+						width: 44rpx;
+						height: 44rpx;
+					}
+				}
+			}
+		}
+	}
+
 	.consoleList {
 		padding: 0 32rpx;
-		.histimeBox{
+
+		.histimeBox {
 			margin: 32rpx 0;
 		}