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

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

		<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>
		</u-cell-group>

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

			<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,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,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,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>
							<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,item.attributeList[3].sensorAddress)"
						style="transform:scale(0.7)" class="switch" />
				</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" visibleItemCount="7" itemHeight="70"></u-picker>
	</view>

</template>

<script>
	import {
		isEmpty,
		getDictDataList,
		getUrlKey
	} from "@/utils/index";
	import Api from "./@/http/Api.js";
	export default {
		data() {
			return {
				showfloor: false,
				showtype: false,
				modeTypeList: [],
				modeTypeIndex: 0,
				temperatureList: [],
				tempIndex: 0,
				columns: [],
				speedTypeList: [],
				speedTypeIndex: 0,
				dataForm: {
					page: 1,
					limit: 10,
					buildingId: "",
					storeyId: "",
					status: "",
					controlCategory: "CommonLighting",
				},
				airIcon:{
					2:'',
					4:'',
					8:''
				},
				mytitle: '',
				total: 0,
				refreshing: false,
				finished: false,
				deviceTypeIndex: 0,
				deviceStatusIndex: 0,
				name: '跨境电商',
				projectName: '',
				p1: 0,
				p2: 0,
				positionList: [
					[],
					[]
				],
				columnData: [],
				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
					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)

					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: {
			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;
				}
				if (list.length > 5) {
					return list.findIndex((item) => item == val);
				} else {
					return list.findIndex((item) => parseFloat(item.dictValue) == val);
				}

			}
		},
		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;
				}
				if (list.find((item) => parseFloat(item.dictValue) == val)) {
					return list.find((item) => parseFloat(item.dictValue) == val).dictLabel;
				} else {
					return list[0].dictLabel
				}
			},

			floorchange() {
				this.showfloor = true;
			},
			confirmfloor(e) {
				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()
			},
			cancelfloor() {
				this.showfloor = false;
			},
			changeHandler(e) {
				const {
					columnIndex,
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					this.loading = true
					picker.setColumnValues(1, this.columnData[index])
					this.loading = false
				}
				// 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)			
							this.columns = [
								res.data.data[0].childrenList,
								res.data.data[0].childrenList[0].childrenList
							]
							let allfloor = [];
							for (let i = 0; i < res.data.data[0].childrenList.length; i++) {
								allfloor.push(res.data.data[0].childrenList[i].childrenList)
							}
							//  console.log('111111111111111111',allfloor)
							this.columnData = allfloor;
							this.dataList = []; // 清空数组
							this.dataForm.page = 1;
							this.getDataList()
						} 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, identifier) {
				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" || type == "speedType" || type == "temp") {
						let data = this.modeTypeList[e.detail.value].dictValue;
						this.onConfirmMode(data, 'modeTypeList', deviceId, identifier);
					}
				}


			},
			//刷新
			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
							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长度大于等于总数据条数,数据全部加载完成
							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, identifier) {
				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({
									identifier: identifier,
									action: 0,
									value: 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({
									identifier: identifier,
									action: 0,
									value: 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, 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({
							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;
			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: 2px;
			}

			.l2 {
				font-size: 12px;
				color: #697081;
			}

			.l3 {
				text-align: center;
				font-size: 32px;
			}

			.l4 {
				text-align: right;
				font-size: 14px;
				color: #0C1935;
			}

			.operation {
				display: flex;
				width: 100%;
				position: relative;
				font-size: 14px;
				padding: 18px;
				text-align: center;
				.uni-input{
					color: #2e69eb;
				}

			}

			.switch {
				position: absolute;
				right: 10px;
				font-size: 18px;
				top: auto;
				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>