遥控控制界面开发

pages/Workorder/Remotecontrol/Remotecontrol.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
-		
-	<!-- 	<view class="position">
+
+		<!-- 	<view class="position">
 			<picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange"
 				@change="(val)=>confirmHandle(val,'position')" :range="positionList" style="width:100%;height: 100%;"
 				range-key="orgName">
@@ -10,14 +10,14 @@
 				<u-icon name="arrow-rightward" class="inline" color="#fff"></u-icon>
 			</picker>
 		</view> -->
-		
+
 		<u-cell-group class="toptemplate">
-			<u-cell :title="mytitle"  @click="floorchange">
-				<u-icon slot="icon" size="40" color="#fff" name="map"></u-icon>				
-					<u-icon slot="right-icon" size="40" color="#fff" name="search"></u-icon>
+			<u-cell :title="mytitle" @click="floorchange">
+				<u-icon slot="icon" size="40" color="#fff" name="map"></u-icon>
+				<u-icon slot="right-icon" size="40" color="#fff" name="search"></u-icon>
 			</u-cell>
 		</u-cell-group>
-		
+
 		<view class="form">
 			<view class="drawdownMenu">
 				<picker @change="(val)=>confirmHandle(val,'deviceType')" :value="deviceTypeIndex"
@@ -39,25 +39,41 @@
 		</view>
 		<!-- 列表 -->
 		<view class="list">
-			<view class="each" v-for="(item,index) in dataList">
-				<template v-if="deviceType == 'AirConditioner'">
-					<view class="l1">{{item.airConditionerName}}</view>
-					<view class="l2">空间信息:{{ item.installSite }}{{ item.roomNumbers }}</view>
-					<view class="l2" v-if="item.attributeList">室温:{{ item.attributeList[4].value }}℃</view>
+
+			<template v-if="deviceType == 'AirConditioner'">
+				<view class="each c" v-for="(item,index) in dataList" :class="'bg'+item.attributeList[2].value">
+					<div class="top1">
+						<image  v-if="item.attributeList[2].value == '1'"
+                        src="../../../static/management/taiyang.png"></image>
+						<image  v-if="item.attributeList[2].value == '2'||item.attributeList[2].value == '0'"
+						src="../../../static/management/zl.png"></image>
+						<image  v-if="item.attributeList[2].value == '4'"
+						src="../../../static/management/auto.png"</image>
+						<image  v-if="item.attributeList[2].value == '8'"
+						src="../../../static/management/cs.png"</image>
+						<view class="l1">{{item.airConditionerName}}</view>
+						<view class="l2">{{ item.installSite }}{{ item.roomNumbers }}</view>
+						<view class="l3">{{item.attributeList[5].value}}</view>
+						<view class="l4" v-if="item.attributeList">室温:{{ item.attributeList[4].value }}℃</view>
+					</div>
+					</div>
 					<view class="operation" v-if="item.attributeList">
-						<picker @change="(val)=>confirmHandle(val,'modeType',item.deviceId)"
+						<picker
+							@change="(val)=>confirmHandle(val,'modeType',item.deviceId,item.attributeList[2].sensorAddress)"
 							:value="item.attributeList[2].value|findInd(modeTypeList)" :range="modeTypeList"
 							style="width:100%;height: 100%;" range-key="dictLabel">
 							<view class="uni-input">{{findInd2(item.attributeList[2].value,modeTypeList)}}</view>
 							<u-icon name="arrow-down" color="#999" size="16" class="inline"></u-icon>
 						</picker>
-						<picker @change="(val)=>confirmHandle(val,'temp',item.deviceId)"
+						<picker
+							@change="(val)=>confirmHandle(val,'temp',item.deviceId,item.attributeList[5].sensorAddress)"
 							:value="item.attributeList[5].value|findInd(temperatureList)" :range="temperatureList"
 							style="width:100%;height: 100%;">
 							<view class="uni-input">{{item.attributeList[5].value}}</view>
 							<u-icon name="arrow-down" color="#999" size="16" class="inline"></u-icon>
 						</picker>
-						<picker @change="(val)=>confirmHandle(val,'speedType',item.deviceId)"
+						<picker
+							@change="(val)=>confirmHandle(val,'speedType',item.deviceId,item.attributeList[0].sensorAddress)"
 							:value="item.attributeList[0].value|findInd(speedTypeList)" :range="speedTypeList"
 							style="width:100%;height: 100%;" range-key="dictLabel">
 							<view class="uni-input">{{findInd2(item.attributeList[0].value,speedTypeList)}}</view>
@@ -65,23 +81,42 @@
 						</picker>
 					</view>
 					<switch :checked="item.attributeList[3].value==1?true:false"
-						@change="(val)=>changeSwitch('AirConditioner', val, item.deviceId, index)"
+						@change="(val)=>changeSwitch('AirConditioner', val, item.deviceId, index,item.attributeList[3].sensorAddress)"
 						style="transform:scale(0.7)" class="switch" />
-				</template>
-				<template v-if="deviceType == 'Relay'">
-					<view class="l1">{{item.controlName}}</view>
-					<view class="l2">空间信息:{{ item.installSite }}</view>
-					<switch :checked="item.status==1?true:false"
-						@change="(val)=>changeSwitch('Relay', val, item.deviceId, index)" style="transform:scale(0.7)"
-						class="switch" />
-				</template>
-			</view>
+				</view>
+			</template>
+			<template v-if="deviceType == 'Relay'">
+				<view :class="item.status==0?'each':'each on2'" v-for="(item,index) in dataList">
+					<div class="top">
+						<view class="l1">{{item.controlName}}</view>
+						<view class="l2">空间信息:{{ item.installSite }}</view>
+						<div class="open">
+							<image src="../../../static/management/kg.png" @click="control(item.deviceId, item.status)">
+							</image>
+							<p>{{ item | delStatus }}</p>
+						</div>
+					</div>
+					<div class="operation2" v-if="item.attributeList && item.attributeList.length > 0">
+						<div v-for="(ope, index2) in item.relayNames" :key="index2" class="s">
+							<p>{{ ope.name }}</p>
+							<u-switch :value="item.attributeList[index2].value | delTimestamp" active-value="a"
+								inactive-value="b" @change="handleChange(
+							                    'switch',
+							                    $event,
+							                    index,
+							                    item.attributeList[index2].sensorAddress
+							                  )
+							                " style="margin: 0 auto;"></u-switch>
+						</div>
+					</div>
+				</view>
+			</template>
 		</view>
-		
-		<u-picker :show="showfloor" ref="uPicker"  @confirm="confirmfloor" @cancel='cancelfloor'
-					:columns="columns" keyName="orgName" @change="changeHandler"></u-picker>
+
+		<u-picker :show="showfloor" ref="uPicker" @confirm="confirmfloor" @cancel='cancelfloor' :columns="columns"
+			keyName="orgName" @change="changeHandler" visibleItemCount="7" itemHeight="70"></u-picker>
 	</view>
-	
+
 </template>
 
 <script>
@@ -94,13 +129,13 @@
 	export default {
 		data() {
 			return {
-				showfloor:false,
+				showfloor: false,
 				showtype: false,
 				modeTypeList: [],
 				modeTypeIndex: 0,
 				temperatureList: [],
 				tempIndex: 0,
-					columns: [],
+				columns: [],
 				speedTypeList: [],
 				speedTypeIndex: 0,
 				dataForm: {
@@ -111,7 +146,12 @@
 					status: "",
 					controlCategory: "CommonLighting",
 				},
-				mytitle:'',
+				airIcon:{
+					2:'',
+					4:'',
+					8:''
+				},
+				mytitle: '',
 				total: 0,
 				refreshing: false,
 				finished: false,
@@ -125,7 +165,7 @@
 					[],
 					[]
 				],
-				columnData:[],
+				columnData: [],
 				deviceType: "AirConditioner",
 				deviceStatus: '',
 				deviceTypeList: [],
@@ -159,16 +199,17 @@
 			for (let i = 0; i < getDictDataList.length; i++) {
 				if (getDictDataList[i].dictType == 'ModeType') {
 					this.modeTypeList = getDictDataList[i].dataList
+					this.modeTypeList.push({dictLabel: "制冷",dictTypeId: "1610183082852225025",dictValue: "0"})
 				}
-				
+
 				if (getDictDataList[i].dictType == 'SpeedType') {
 					this.speedTypeList = getDictDataList[i].dataList
 				}
-				
+
 				if (getDictDataList[i].dictType == 'DeviceCategory') {
 					this.deviceTypeList = getDictDataList[i].dataList;
-					 // console.log('7777',this.deviceTypeList)
-					
+					// console.log('7777',this.deviceTypeList)
+
 					this.deviceTypeList.forEach((item) => {
 						item.text = item.dictLabel;
 						item.value = item.dictValue;
@@ -180,10 +221,10 @@
 			}
 
 
-		
+
 			this.getBuildList();
-		//	this.getDeviceTypeList();
-			
+			//	this.getDeviceTypeList();
+
 			this.setTemperatureList();
 			this.getDataList()
 		},
@@ -200,6 +241,40 @@
 			},
 		},
 		filters: {
+			delTimestamp(val) {
+				if (!val) return "b";
+				if (val.indexOf("n") > -1) {
+					return 'a'; //开a
+				} else {
+					return 'b'; //关b
+				}
+			},
+			delStatus(item) {
+				let status = 0;
+				if (item.attributeList && item.attributeList.length > 0) {
+					for (let i = 0; i < item.relayNames.length; i++) {
+						if (
+							item.attributeList[i].value &&
+							item.attributeList[i].value.indexOf("n") > -1
+						) {
+							status++;
+						} else {
+							status--;
+						}
+					}
+					if (status == item.relayNames.length) {
+						item.status = 1;
+						return "全关";
+					}
+					if (status == 0 - item.relayNames.length) {
+						item.status = 0;
+						return "全开";
+					}
+					return "全关";
+				} else {
+					return "全关";
+				}
+			},
 			findInd(val, list) {
 				if (isEmpty(val)) {
 					return 0;
@@ -213,6 +288,58 @@
 			}
 		},
 		methods: {
+			handleChange(type, val, index, identifier) {
+				let that = this;
+				if (type == "switch") {
+					let msg = "";
+					let deviceId = this.dataList[index].deviceId;
+					let params = {
+						// keyword: "setRelay",
+						value: val,
+						deviceId: deviceId,
+						identifier: identifier,
+						action: 0,
+					};
+					if (val == "a") {
+						msg = "开启";
+					}
+					if (val == "b") {
+						msg = "关闭";
+					}
+					uni.showModal({
+						title: '提示',
+						content: `确定执行${msg}操作`,
+						success(res) {
+							if (res.confirm) {
+								that.switchLighting(type, params, index, msg, identifier);
+							} else {
+								uni.showToast({
+									icon: 'none',
+									title: '已取消'
+								})
+							}
+
+						},
+
+					})
+				}
+			},
+			switchLighting(type, val, index, msg, identifier) {
+				uni.showLoading({
+					title: `正在${msg},请稍后`
+				});
+				if (type == "switch") {
+					Api.setControlElec(val).then((res) => {
+						uni.hideLoading()
+						if (res.data.code == 0) {
+							this.getDataList();
+							uni.showToast({
+								title: '操作成功'
+							})
+						}
+					});
+				}
+			},
 			findInd2(val, list) {
 				if (isEmpty(val)) {
 					return 0;
@@ -223,20 +350,19 @@
 					return list[0].dictLabel
 				}
 			},
-			
+
 			floorchange() {
 				this.showfloor = true;
 			},
 			confirmfloor(e) {
-				console.log('222222', e.value)
 				this.mytitle = e.value[0].orgName + e.value[1].orgName;
 				this.dataForm.buildingId = e.value[0].orgId;
 				this.dataForm.storeyId = e.value[1].orgId;
-					
+
 				this.showfloor = false;
-			this.dataList = []; // 清空数组
-			this.dataForm.page = 1;
-			this.getDataList()
+				this.dataList = []; // 清空数组
+				this.dataForm.page = 1;
+				this.getDataList()
 			},
 			cancelfloor() {
 				this.showfloor = false;
@@ -253,18 +379,18 @@
 					picker.setColumnValues(1, this.columnData[index])
 					this.loading = false
 				}
-			// this.dataList = []; // 清空数组
-			// this.dataForm.page = 1;
-			// this.getDataList()
+				// this.dataList = []; // 清空数组
+				// this.dataForm.page = 1;
+				// this.getDataList()
 			},
 			//获取楼栋
 			getBuildList() {
 				this.$api.get('/control/getOrgStructureTree/', {})
 					.then(res => {
-				
+
 						if (res.data.code == 0) {
 							this.dataForm.projectId = res.data.data[0].orgId;
-				
+
 							this.mytitle = res.data.data[0].orgName;
 							this.alldata = res.data.data[0].childrenList;
 							//console.log('111111111111111111',  res.data.data[0].childrenList)			
@@ -284,20 +410,50 @@
 						} else {
 							this.showdct = true
 						}
-					})	
+					})
+			},
+			control(deviceId, status) {
+				let msg = status == 0 ? '全开' : '全关';
+				let that = this;
+				uni.showModal({
+					title: '提示',
+					content: `确定执行${msg}操作`,
+					success(res) {
+						if (res.confirm) {
+							uni.showLoading({
+								title: "正在操作，请稍后。。。",
+							})
+							Api.setControlElec({
+								action: 0,
+								identifier: "",
+								deviceId: deviceId,
+								value: status == 0 ? "qk" : "qg",
+							}).then((res) => {
+								uni.hideLoading()
+								if (res.data.code == 0) {
+									that.getDataList();
+									uni.showLoading({
+										title: "操作成功",
+									})
+								}
+							});
+						} else {
+							uni.showToast({
+								icon: 'none',
+								title: '已取消'
+							})
+						}
+					},
+
+				})
 			},
-			
-			
-			
-		
-			
 			setTemperatureList() {
 				this.temperatureList = [];
 				for (let i = 16; i < 33; i++) {
 					this.temperatureList.push(i);
 				}
 			},
-			confirmHandle(e, type, deviceId) {
+			confirmHandle(e, type, deviceId, identifier) {
 				this.dataForm.page = 1;
 				if (type == 'position') {
 					// this.p1 = e.detail.value[0];
@@ -319,17 +475,9 @@
 						this.dataForm.status = this.deviceStatus;
 						this.onRefresh();
 					}
-					if (type == "modeType") {
+					if (type == "modeType" || type == "speedType" || type == "temp") {
 						let data = this.modeTypeList[e.detail.value].dictValue;
-						this.onConfirmMode(data, 'modeTypeList', deviceId);
-					}
-					if (type == "speedType") {
-						let data = this.speedTypeList[e.detail.value].dictValue;
-						this.onConfirmMode(data, 'speedTypeList', deviceId);
-					}
-					if (type == "temp") {
-						let data = this.temperatureList[e.detail.value];
-						this.onConfirmMode(data, 'temperatureList', deviceId);
+						this.onConfirmMode(data, 'modeTypeList', deviceId, identifier);
 					}
 				}
 
@@ -417,7 +565,11 @@
 								this.finished = true; // 停止加载
 							}
 							// 若数据条数不等于0
-							this.dataList.push(...res.data.data.list); // 将数据放入list中
+							if (this.dataForm.page == 1) {
+								this.dataList = res.data.data.list;
+							} else {
+								this.dataList.push(...res.data.data.list); // 将数据放入list中
+							}
 							this.loading = false; // 加载状态结束
 							this.total = res.data.data.total;
 							// 如果list长度大于等于总数据条数,数据全部加载完成
@@ -436,7 +588,7 @@
 				});
 			},
 			//下发指令开关
-			changeSwitch(type, val, deviceId, index) {
+			changeSwitch(type, val, deviceId, index, identifier) {
 				let msg = "";
 				if (val.detail.value) {
 					msg = "开启";
@@ -450,8 +602,9 @@
 						if (res.confirm) {
 							if (type == "AirConditioner") {
 								Api.setControl({
-									keyword: "setPower",
-									param: val.detail.value ? 1 : 0,
+									identifier: identifier,
+									action: 0,
+									value: val.detail.value ? 1 : 0,
 									deviceId: deviceId,
 								}).then((res) => {
 									if (res.data.code == 0) {
@@ -470,8 +623,9 @@
 							}
 							if (type == "Relay") {
 								Api.setControlElec({
-									keyword: "setRelay",
-									param: val.detail.value ? 1 : 0,
+									identifier: identifier,
+									action: 0,
+									value: val.detail.value ? 1 : 0,
 									deviceId: deviceId,
 								}).then((res) => {
 									if (res.data.code == 0) {
@@ -494,32 +648,38 @@
 					}
 				});
 			},
-			onConfirmMode(data, module, deviceId) {
-				let deviceCommandDTO = {};
-				switch (module) {
-					case "modeTypeList":
-						deviceCommandDTO = {
-							keyword: "setMode",
-							param: data,
-							deviceId: deviceId,
-						};
-						break;
-					case "temperatureList":
-						deviceCommandDTO = {
-							keyword: "setTemp",
-							param: data,
-							deviceId: deviceId,
-						};
-			 		break;
-					case "speedTypeList":
-						deviceCommandDTO = {
-			  		keyword: "setFan",
-							param: data,
-							deviceId: deviceId,
-						};
-						break;
-				}
-			 Api.setControl(deviceCommandDTO).then((res) => {
+			onConfirmMode(data, module, deviceId, identifier) {
+				let deviceCommandDTO = {
+					action: 0,
+					identifier: identifier,
+					value: data,
+					deviceId: deviceId,
+				};
+				// switch (module) {
+				// 	case "modeTypeList":
+				// 		deviceCommandDTO = {
+				// 			action: 0,
+				// 			identifier:identifier,
+				// 			value: data,
+				// 			deviceId: deviceId,
+				// 		};
+				// 		break;
+				// 	case "temperatureList":
+				// 		deviceCommandDTO = {
+				// 			keyword: "setTemp",
+				// 			param: data,
+				// 			deviceId: deviceId,
+				// 		};
+				// 		break;
+				// 	case "speedTypeList":
+				// 		deviceCommandDTO = {
+				// 			keyword: "setFan",
+				// 			param: data,
+				// 			deviceId: deviceId,
+				// 		};
+				// 		break;
+				// }
+				Api.setControl(deviceCommandDTO).then((res) => {
 					this.$toast.clear();
 					if (res.data.code == 0) {
 						uni.showToast({
@@ -527,7 +687,7 @@
 							duration: 2000
 						});
 					}
-			 });
+				});
 			},
 		}
 	}
@@ -594,36 +754,112 @@
 			box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
 			border-radius: 4px;
 			margin-bottom: 12px;
-			padding: 12px 16px;
-			display: flex;
-			flex-direction: column;
-			align-items: flex-start;
 			position: relative;
+			box-shadow: 0px 0px 2px 4px rgba(87, 134, 238, 0.03);
+
+			&.on2 {
+				background: linear-gradient(to bottom,
+						rgba(255, 155, 37, 0.25),
+				  rgba(255, 234, 200, 0.13),
+						rgba(255, 255, 255, 0.04));
+
+			}
+
+			&.c {
+				display: flex;
+				flex-direction: column;
+
+				.top1 {
+					padding: 16px 20px;
+					border-bottom: 1px solid #E6E7EA;
+					image{
+						width: 54px;
+						    height: 56px;
+						    position: absolute;
+						    left: 0;
+						    top: 0;
+						    z-index: 1;
+					}
+				}
+			}
+			&.bg0,&.bg2{
+				background: linear-gradient(to bottom,#D2F0FF,#FFFFFF)
+			}
+			&.bg1{
+				background: linear-gradient(to bottom,#FFE2DF,#FFFFFF)
+			}
+			
+			&.bg4{
+				background: linear-gradient(to bottom,#DDF8DC,#FFFFFF)
+			}
+			&.bg8{
+				background: linear-gradient(to bottom,#DEE4FE,#FFFFFF)
+			}
+
+			.top {
+				padding: 16px 20px;
+				border-bottom: 1px solid #ddd;
+				position: relative;
+
+				.open {
+					position: absolute;
+					right: 0;
+					top: 0;
+					height: 100%;
+					width: 60px;
+					display: flex;
+					flex-direction: column;
+					justify-content: space-between;
+					align-items: center;
+					color: #2e69eb;
+					font-size: 14px;
+					padding: 12px 0;
+					border-left: 1px solid #e6e7ea;
+					box-sizing: border-box;
+
+					image {
+						width: 28px;
+						height: 26px;
+						cursor: pointer;
+					}
+				}
+			}
 
 			.l1 {
 				height: 22px;
 				font-size: 16px;
 				color: #0c1935;
 				line-height: 22px;
-				margin-bottom: 8px;
+				margin-bottom: 2px;
 			}
 
-			.l2,
-			.operation {
-				height: 18px;
+			.l2 {
+				font-size: 12px;
+				color: #697081;
+			}
+
+			.l3 {
+				text-align: center;
+				font-size: 32px;
+			}
+
+			.l4 {
+				text-align: right;
 				font-size: 14px;
-				color: #999999;
-				line-height: 18px;
-				margin-bottom: 4px;
+				color: #0C1935;
 			}
 
 			.operation {
 				display: flex;
 				width: 100%;
 				position: relative;
-				font-size: 13px;
-				margin-top: 10px;
+				font-size: 14px;
+				padding: 18px;
 				text-align: center;
+				.uni-input{
+					color: #2e69eb;
+				}
+
 			}
 
 			.switch {
@@ -634,6 +870,30 @@
 				z-index: 1;
 
 			}
+
+
+			.operation2 {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				box-sizing: border-box;
+
+				.s {
+					flex: 1;
+					width: 200px;
+					text-align: center;
+					line-height: 26px;
+					padding: 10px 0;
+					font-size: 14px;
+					color: #697081;
+					border-right: 1px solid #ddd;
+
+					&:last-child {
+						border-right: none;
+					}
+				}
+			}
 		}
 	}
 </style>