远程管控完成

App.vue

@@ -1,6 +1,6 @@
 <script>
 	window.SITE_CONFIG = {};
-	window.SITE_CONFIG["dictList"] = [];
+	window.SITE_CONFIG["dictList"] = JSON.parse(localStorage.getItem('dictList'))||[];
 	import Api from "./@/http/Api.js";
 	export default {
 		data() {
@@ -13,16 +13,15 @@
 			  Api.getDictList().then((res) => {
 				  console.log(res.data)
 			    window.SITE_CONFIG["dictList"] = res.data.data;
+				localStorage.setItem("dictList",JSON.stringify(res.data.data));
 			  });
 			},
 		},
 		onLaunch: function() {
+			this.getDictAll();
 			// 获取字典列表, 添加并全局变量保存
 		},
 		onShow: function() {
-			console.log('App Show')
-			this.getDictAll();
-			
 		},
 		onHide: function() {
 			console.log('App Hide')

pages.json

@@ -1,7 +1,5 @@
 {
 	"pages": [ 
-
-
 		{
 			"path": "pages/login/login",
 			"style": {
@@ -153,7 +151,11 @@
             "style" :                                                                                    
             {
                 "navigationBarTitleText": "远程管控",
-                "enablePullDownRefresh": false
+                "enablePullDownRefresh": false,
+				"navigationStyle": "custom",
+				"app-plus": {
+					
+				}
             }
             
         }

pages/Workorder/Remotecontrol/Remotecontrol.vue

@@ -2,58 +2,559 @@
 	<view>
 		<view class="header"></view>
 		<view class="position">
-			<u-icon name="map-fill"></u-icon>
-			<text>{{name}}</text>
-			<u-icon name="arrow-rightward"></u-icon>
+			<picker mode= "multiSelector" @columnchange="bindMultiPickerColumnChange"  @change="(val)=>confirmHandle(val,'position')"
+				:range="positionList" style="width:100%;height: 100%;" range-key="orgName">
+				<u-icon name="map-fill" color="#fff" class="inline"></u-icon>
+				<view class="uni-input inline positionName">{{name}}</view>
+				<u-icon name="arrow-rightward" class="inline" color="#fff"></u-icon>
+			</picker>
 		</view>
 		<view class="form">
-			<view class="topbilledit">
-				<view class="changetime1">
-					<picker mode="date" :value="myday" fields="month" @change="dateChange">
-						<view class="selestDate">{{myday}}</view>
-					</picker>
-				</view>
-				<view class="changetime2">
-					<u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
-				</view>
+			<view class="drawdownMenu">
+				<picker @change="(val)=>confirmHandle(val,'deviceType')" :value="deviceTypeIndex"
+					:range="deviceTypeList" style="width:100%;height: 100%;" range-key="dictLabel">
+					<view class="uni-input">{{deviceTypeList[deviceTypeIndex].dictLabel}}</view>
+					<u-icon name="arrow-down-fill" color="#666" size="16" class="inline"></u-icon>
+				</picker>
 			</view>
-			<view class="topbilledit" @click="typechange">
-				<view class="changetime1">
-					{{mytype}}
-				</view>
-				<view class="changetime2">
-					<u-icon name="arrow-down-fill" color="#666666" size="20"></u-icon>
-				</view>
+			<view class="drawdownMenu">
+				<picker @change="(val)=>confirmHandle(val,'deviceStatus')" :value="deviceStatusIndex"
+					:range="deviceStatusList" style="width:100%;height: 100%;" range-key="text">
+					<view class="uni-input">{{deviceStatusList[deviceStatusIndex].text}}</view>
+					<u-icon name="arrow-down-fill" color="#666" size="16" class="inline"></u-icon>
+				</picker>
+			</view>
+		</view>
+		<view class="total">
+			共有<text style="color: #f44;">{{total}}</text>条记录
+		</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>
+					<view class="operation" v-if="item.attributeList">
+						<picker @change="(val)=>confirmHandle(val,'modeType',item.deviceId)"
+							: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)" :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>
+						{{item.attributeList[0].value|findInd(speedTypeList)}}
+						<picker @change="(val)=>confirmHandle(val,'speedType',item.deviceId)" :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>
+							<u-icon name="arrow-down" color="#999" size="16" class="inline"></u-icon>
+						</picker>
+					</view>
+					<switch :checked="item.attributeList[3].value==1?true:false" @change="(val)=>changeSwitch('AirConditioner', val, item.deviceId, index)"
+						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>
-		
+	</view>
+	</view>
+
+
 	</view>
 </template>
 
 <script>
+	import {
+		isEmpty,
+		getDictDataList,
+		getUrlKey
+	} from "@/utils/index";
+	import Api from "./@/http/Api.js";
 	export default {
 		data() {
 			return {
-				name:'',
+				modeTypeList: [],
+				modeTypeIndex: 0,
+				temperatureList: [],
+				tempIndex: 0,
+				speedTypeList: [],
+				speedTypeIndex: 0,
+				dataForm: {
+					page: 1,
+					limit: 10,
+					buildingId: "",
+					storeyId: "",
+					status: "",
+					controlCategory: "CommonLighting",
+				},
+				total: 0,
+				refreshing: false,
+				finished: false,
+				deviceTypeIndex: 0,
+				deviceStatusIndex: 0,
+				name: '跨境电商',
+				projectName: '',
+				p1:0,
+				p2:0,
+				positionList: [[],[]],
+				deviceType: "AirConditioner",
+				deviceStatus: '',
+				deviceTypeList: [],
+				dataList: [],
+				deviceStatusList: [{
+						text: "全部",
+						value: ""
+					},
+					{
+						text: "开启",
+						value: 1
+					},
+					{
+						text: "关闭",
+						value: 0
+					},
+				],
+			}
+		},
+		onReachBottom() {
+			if (!this.finished) {
+				this.dataForm.page++;
+				this.getDataList();
+			}
+		},
+		onLoad() {
+			this.getModeTypeList();
+			this.getBuildList();
+			this.getDeviceTypeList();
+			this.getSpeedTypeList();
+			this.setTemperatureList();
+			this.getDataList()
+		},
+		  watch: {
+		    "dataForm.buildingId"(newval, oldval) {
+		      if (newval != oldval) {
+		        this.onRefresh();
+		      }
+		    },
+		    "dataForm.storeyId"(newval, oldval) {
+		      if (newval != oldval) {
+		        this.onRefresh();
+		      }
+		    },
+		  },
+		filters: {
+			findInd(val, list) {
+				if (isEmpty(val)) {
+					return 0;
+				}
+				if(list.length>5){
+					return list.findIndex((item) =>item== val);
+				}else{
+					return list.findIndex((item) => parseFloat(item.dictValue) == val);
+				}
+				
 			}
 		},
 		methods: {
-			 getDeviceTypeList() {
-			      this.deviceTypeList = JSON.parse(
-			        JSON.stringify(getDictDataList("DeviceCategory"))
-			      );
-			      this.deviceTypeList.forEach((item) => {
-			        item.text = item.dictLabel;
-			        item.value = item.dictValue;
+			findInd2(val,list){
+				if (isEmpty(val)) {
+					return 0;
+				}
+				if(list.find((item) => parseFloat(item.dictValue) == val)){
+					return list.find((item) => parseFloat(item.dictValue) == val).dictLabel;
+				}else{
+					return list[0].dictLabel
+				}
+			},
+			//获取楼栋
+			getBuildList() {
+				Api.getBuildInfo().then((res) => {
+					if (res.data.code == 0) {
+						this.name = this.projectName = res.data.data[0].orgName;
+						this.positionList[0]=[];
+						let positionList = res.data.data[0].childrenList;
+						if (positionList) {
+							let json = {
+								category: "s",
+								childrenList: null,
+								orgId: "",
+								orgName: "全部",
+							};
+							for (let i = 0; i <positionList.length; i++) {
+								positionList[i].childrenList.unshift(json);
+								this.positionList[0].push(positionList[i]);
+							}
+							this.positionList[0].unshift(json);
+							this.positionList[1]=this.positionList[0][0].childrenList;
+						}
+					}
+				});
+			},
+			bindMultiPickerColumnChange(e){
+				this.positionList[1]=this.positionList[1]=this.positionList[0][e.detail.value].childrenList;
+			},
+			getModeTypeList() {
+				this.modeTypeList = getDictDataList("ModeType");
+				console.log(this.modeTypeList)
+			},
+			getSpeedTypeList() {
+				this.speedTypeList = getDictDataList("SpeedType");
+				console.log(this.speedTypeList)
+			},
+			setTemperatureList() {
+				this.temperatureList = [];
+				for (let i = 16; i < 33; i++) {
+					this.temperatureList.push(i);
+				}
+			},
+			confirmHandle(e, type,deviceId) {
+				console.log(e)
+				this.dataForm.page = 1;
+				if(type=='position'){
+					this.p1= e.detail.value[0];
+					this.p2= e.detail.value[1];
+					console.log(this.positionList[0])
+					this.dataForm.buildingId =this.p1==0?'':this.positionList[0][this.p1].orgId;
+					      this.dataForm.storeyId =this.p2==0?"":this.positionList[1][this.p2].orgId;
+						  let buildName = this.p1 ==0? "" :'-'+this.positionList[0][this.p1].orgName;
+					      let storeyName = this.p2 ==0? "" :'-'+this.positionList[1][this.p2].orgName;
+					      this.name = this.projectName+ buildName+storeyName;
+				}else{
+				let index = type + "Index";
+				this[index] = e.detail.value;
+				if (type == "deviceType") {
+					this.deviceType = this.deviceTypeList[e.detail.value].value;
+					this.onRefresh();
+				}
+				if (type == "deviceStatus") {
+					this.deviceStatus = this.deviceStatusList[e.detail.value].value;
+					this.dataForm.status=this.deviceStatus;
+					this.onRefresh();
+				}
+				if (type == "modeType") {
+					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);
+				}
+				}
+				
+				
+			},
+			//刷新
+			onRefresh() {
+				this.finished = false;
+				// 重新加载数据
+				this.dataList = [];
+				// 将 loading 设置为 true，表示处于加载状态
+				this.total = 0;
+				this.loading = true;
+				this.dataForm.page = 1; // 分页数赋值为1
+				this.loadData();
+			},
+			//加载数据
+			loadData() {
+				setTimeout(async () => {
+					if (this.refreshing) {
+						this.dataList = [];
+						this.refreshing = false;
+					}
+					await this.getDataList();
+					//this.dataForm.page++; // 分页数加一
+				}, 100);
+			},
+			getDataList() {
+				if (this.deviceType == "AirConditioner") {
+					this.getAircond();
+				}
+				if (this.deviceType == "Relay") {
+					this.getElec();
+				}
+			},
+			getDeviceTypeList() {
+				this.deviceTypeList = JSON.parse(
+					JSON.stringify(getDictDataList("DeviceCategory"))
+				);
+				this.deviceTypeList.forEach((item) => {
+					item.text = item.dictLabel;
+					item.value = item.dictValue;
+				});
+				this.deviceTypeList = this.deviceTypeList.filter(
+					(item) => item.value != "WaterMeter" && item.value != "Ammeter"
+				);
+			},
+			getAircond() {
+				this.dataForm.status="";
+				Api.airconditioner(this.dataForm).then((res) => {
+					if (res.data.code == 0) {
+						if (res.data.data) {
+							if (res.data.data.list.length == 0) {
+								// 判断获取数据条数若等于0
+								this.dataList = []; // 清空数组
+								this.finished = true; // 停止加载
+							}
+							// 若数据条数不等于0
+							this.dataList.push(...res.data.data.list); // 将数据放入list中
+							this.loading = false; // 加载状态结束
+							this.total = res.data.data.total;
+							// 如果list长度大于等于总数据条数,数据全部加载完成
+							if (this.dataList.length >= res.data.data.total) {
+								this.finished = true; // 结束加载状态
+							}
+						} else {
+							// 判断获取数据条数若等于0
+							this.dataList = []; // 清空数组
+							this.finished = true; // 停止加载
+						}
+					} else {
+						this.loading = false; // 加载状态结束
+						this.finished = true; // 停止加载
+					}
+				});
+			},
+
+			getElec() {
+				Api.getElec(this.dataForm).then((res) => {
+					if (res.data.code == 0) {
+						if (res.data.data) {
+							if (res.data.data.list.length == 0) {
+								// 判断获取数据条数若等于0
+								this.dataList = []; // 清空数组
+								this.finished = true; // 停止加载
+							}
+							// 若数据条数不等于0
+							this.dataList.push(...res.data.data.list); // 将数据放入list中
+							this.loading = false; // 加载状态结束
+							this.total = res.data.data.total;
+							// 如果list长度大于等于总数据条数,数据全部加载完成
+							if (this.dataList.length >= res.data.data.total) {
+								this.finished = true; // 结束加载状态
+							}
+						} else {
+							// 判断获取数据条数若等于0
+							this.dataList = []; // 清空数组
+							this.finished = true; // 停止加载
+						}
+					} else {
+						this.loading = false; // 加载状态结束
+						this.finished = true; // 停止加载
+					}
+				});
+			},
+			//下发指令开关
+			changeSwitch(type, val, deviceId, index) {
+				console.log(val)
+				let msg = "";
+				if (val.detail.value) {
+					msg = "开启";
+				} else {
+					msg = "关闭";
+				}
+				uni.showModal({
+					title: '提示',
+					content: `请确认是否【${msg}】此设备`,
+					success: function(res) {
+						if (res.confirm) {
+							if (type == "AirConditioner") {
+								Api.setControl({
+									keyword: "setPower",
+									param: val.detail.value ? 1 : 0,
+									deviceId: deviceId,
+								}).then((res) => {
+									if (res.data.code == 0) {
+										this.dataList[index].attributeList[3].value = val;
+										uni.showToast({
+											title: '操作成功',
+											duration: 2000
+										});
+									} else {
+										uni.showToast({
+											title: '操作失败',
+											duration: 2000
+										});
+									}
+								});
+							}
+							if (type == "Relay") {
+								Api.setControlElec({
+									keyword: "setRelay",
+									param: val.detail.value ? 1 : 0,
+									deviceId: deviceId,
+								}).then((res) => {
+									if (res.data.code == 0) {
+										this.dataList[index].status = val;
+										uni.showToast({
+											title: '操作成功',
+											duration: 2000
+										});
+									} else {
+										uni.showToast({
+											title: '操作失败',
+											duration: 2000
+										});
+									}
+								});
+							}
+						} else if (res.cancel) {
+							console.log('用户点击取消');
+						}
+					}
+				});
+			},
+			 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) => {
+			        this.$toast.clear();
+			        if (res.data.code == 0) {
+						uni.showToast({
+							title: '操作成功',
+							duration: 2000
+						});
+			        }
 			      });
-			      this.deviceTypeList = this.deviceTypeList.filter(
-			        (item) => item.value != "Relay"
-			      );
 			    },
 		}
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+	.uni-input {
+		margin-right: 4px;
+	}
+
+	.uni-input,
+	.inline {
+		display: inline-block;
+	}
+
+	.form {
+		display: flex;
+		height: 48px;
+		align-items: center;
+		background-color: #fff;
+
+		.drawdownMenu {
+			display: flex;
+			text-align: center;
+			width: 50%;
+		}
+	}
+
+	.header {
+		background-color: #5c8fff;
+		height: 25px;
 
+	}
+
+	.position {
+		font-size: 16px;
+		color: #fff;
+		padding: 10px 16px;
+		background: #5c8fff;
+		.positionName {
+			margin: 0 5px;
+		}
+	}
+
+	.total {
+		padding: 0 16px;
+		margin: 8px 0;
+		line-height: 15px;
+		display: flex;
+		text-align: left;
+
+		text {
+			font-size: 15px;
+			vertical-align: middle;
+		}
+	}
+
+	.list {
+		padding: 0 16px;
+
+		.each {
+			background: #ffffff;
+			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;
+
+			.l1 {
+				height: 22px;
+				font-size: 16px;
+				color: #0c1935;
+				line-height: 22px;
+				margin-bottom: 8px;
+			}
+
+			.l2,
+			.operation {
+				height: 18px;
+				font-size: 14px;
+				color: #999999;
+				line-height: 18px;
+				margin-bottom: 4px;
+			}
+
+			.operation {
+				display: flex;
+				width: 100%;
+				position: relative;
+				font-size: 13px;
+				margin-top: 10px;
+				text-align: center;
+			}
+
+			.switch {
+				position: absolute;
+				right: 10px;
+				font-size: 18px;
+				top: auto;
+				z-index: 1;
+
+			}
+		}
+	}
 </style>