wit-uniapp/pages/Workorder/Remotecontrol/Remotecontrol.vue

<template>
	<view>
		<view class="header"></view>
		<view class="position">
			<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="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="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 {
				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: {
			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
						});
			        }
			      });
			    },
		}
	}
</script>

<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>