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>
						<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() {

			let getDictDataList = uni.getStorageSync('getDictDataList');


			for (let i = 0; i < getDictDataList.length; i++) {
				if (getDictDataList[i].dictType == 'ModeType') {
					this.modeTypeList = getDictDataList[i].dataList
				}
				
				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)
					
					this.deviceTypeList.forEach((item) => {
						item.text = item.dictLabel;
						item.value = item.dictValue;
					});
					this.deviceTypeList = this.deviceTypeList.filter(
						(item) => item.value != "WaterMeter" && item.value != "Ammeter"
					);
				}
			}


		
			this.getBuildList();
		//	this.getDeviceTypeList();
			
			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;
			},
			
			setTemperatureList() {
				this.temperatureList = [];
				for (let i = 16; i < 33; i++) {
					this.temperatureList.push(i);
				}
			},
			confirmHandle(e, type, deviceId) {
				this.dataForm.page = 1;
				if (type == 'position') {
					this.p1 = e.detail.value[0];
					this.p2 = e.detail.value[1];
					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) {
				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>