FE-lab-xcx/pages_manage/views/laboratory/iotControl.vue

<template>
	<view class="iotControl">
		<view class="device-type">
			<view v-for="(item,index) in deviceType" :key="index" @click="deviceTypeFun(item)">
				<img :src="item.img">
				<view>{{item.hardwareName}}</view>
				<img src="@/pages_manage/images/icon_wdwg_gd.png">
			</view>
		</view>
		<!-- 传感器监测 -->
		<view class="small-title">
			<view></view>
			<view>传感器监测</view>
		</view>
		<view class="sensor">
			<view v-for="(item,index) in sensorData" :key="index">
				<img :src="baseUrl+item.icon">
				<veiw>{{item.deviceName}}: {{item.deviceValue?item.deviceValue:''}}{{item.unit?item.unit:''}}</veiw>
			</view>
		</view>
		<!-- 智能控制 -->
		<view class="small-title">
			<view></view>
			<view>智能控制</view>
		</view>
		<view class="intelligent-control">
			<view v-for="(item,index) in labHardwareVOList" :key="index" v-if="item.hardwareTypeKey !='airConditioner'">
				<view class="for-button-p">{{item.hardwareName}}
					<text v-if="item.reservedThree">({{item.reservedThree}})</text>
				</view>
				<img v-if="item.online && item.operatingState" src="@/pages_manage/images/icon_10.png"
					@click="buttonClick('switch',item,'0')">
				<img v-if="item.online && !item.operatingState" src="@/pages_manage/images/icon_11.png"
					@click="buttonClick('switch',item,'1')">
				<view class="for-button-p" v-if="!item.online">离线</view>
			</view>
		</view>
		<!-- 智能终端 -->
		<view class="small-title">
			<view></view>
			<view>智能终端</view>
		</view>
		<view class="intelligent-control">
			<view v-for="(item,index) in terminalData" :key="index">
				<view class="for-button-p">{{item.deviceName}}</view>
				<view class="for-button-p" v-if="!item.online">离线</view>
				<view class="for-button-p" v-if="item.online" style="color:#0183FA;">在线</view>
			</view>
		</view>

	</view>
</template>

<script>
	import $mqtt from '@/utils/mqtt.min.js';
	import {
		iotAppSensorFindBySubId,
		iotAppHardwareFindByType,
		iotAppHardwareOperatingHardware,
		iotAppDeviceFindByType,
	} from '@/pages_manage/api/index.js'
	import {
		config
	} from '@/api/request/config.js'
	export default {
		name: "iotControl",
		props: {
			subjectData: {},
		},
		data() {
			return {
				baseUrl: config.base_url,
				//MQTT请求参数-传感器
				mtopic: "iot/device/sensor/sub/",
				//MQTT请求参数-智能控制
				mtopicOne: "iot/hardware/all/sub/",
				client: {},
				newData: {},
				subId: '',
				deviceType: [{
						type: 'video',
						hardwareName: '视频监控',
						img: require('@/pages_manage/images/icon_xq_spjk.png'),
					},
					{
						type: 'speech',
						hardwareName: '语音广播',
						img: require('@/pages_manage/images/icon_sskz_xz.png'),
					},
				],
				sensorData: [],
				labHardwareVOList: [],
				terminalData: [{
					name: '智能管控一体机',
					pcType: 1,
				}],
			}
		},
		created() {

		},
		mounted() {
			this.$set(this, 'newData', this.subjectData);
			this.$set(this, 'subId', this.subjectData.subId);
			this.iotAppSensorFindBySubId();
			this.iotAppHardwareFindByType();
			this.iotAppDeviceFindByType();
			this.offMQTT('on');
		},
		methods: {
			//物联控制设备
			deviceTypeFun(item) {
				if (item.type == 'video') {

				} else if (item.type == 'speech') {
					//语音广播弹窗开启
					this.$parent.buttonClick('broadcastOpen', '');
				} else if (item.type == 'conditioning') {
					//空调弹窗开启
					this.$parent.buttonClick('conditioningOpen', '');
				}
			},
			buttonClick(type, row, status) {
				let self = this;
				if (type == 'switch') {
					//开关
					let text = '';
					if (status == '0') {
						text = '关闭';
					} else if (status == '1') {
						text = '开启';
					}
					uni.showModal({
						content: '确认要' + text + '吗?',
						cancelColor: "#999",
						confirmColor: "#0183FA",
						success: function(res) {
							if (res.confirm) {
								self.mangerControl(row, status);
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}

			},
			//设备开关
			async mangerControl(item, status) {
				let obj = {
					hardwareNo: item.hardwareNo,
					command: status,
				};
				const {
					data
				} = await iotAppHardwareOperatingHardware(obj);
				if (data.code == 200) {
					uni.showToast({
						title: '操作成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			//查询传感器状态
			async iotAppSensorFindBySubId() {
				const {
					data
				} = await iotAppSensorFindBySubId({
					subId: this.subId
				});
				if (data.code == 200) {
					this.$set(this, 'sensorData', data.data);
				}
			},
			//查询硬件设备
			async iotAppHardwareFindByType() {
				const {
					data
				} = await iotAppHardwareFindByType({
					subId: this.subId
				});
				if (data.code == 200) {
					this.$set(this, 'labHardwareVOList', data.data);
					for (let i = 0; i < data.data.length; i++) {
						if (data.data[i].hardwareTypeKey == 'airConditioner') {
							data.data[i].type = 'conditioning';
							data.data[i].img = require('@/pages_manage/images/icon_xq_kt.png');
							this.deviceType.push(data.data[i])
						}
					}
				}
			},
			//查询物联设备
			async iotAppDeviceFindByType() {
				const {
					data
				} = await iotAppDeviceFindByType({
					subjectId: this.subId,
					typeKeyList: ['aio']
				});
				if (data.code == 200) {
					this.$set(this, 'terminalData', data.data);
				}
			},
			//MQTT订阅
			sensorMQTT() {
				let self = this;
				this.client = $mqtt.connect('wxs://' + uni.getStorageSync('mqttUrl'), {
					username: uni.getStorageSync('mqttUser'),
					password: uni.getStorageSync('mqttPassword')
				});
				this.client.on("connect", e => {
					this.client.subscribe(this.mtopic + self.subId, (err) => {
						if (!err) {
							console.log("传感器订阅成功:" + this.mtopic + self.subId);
						} else {
							// console.log("连接错误:" + err);
						}
					});
					this.client.subscribe(this.mtopicOne + self.subId, (err) => {
						if (!err) {
							console.log("智能控制订阅成功:" + this.mtopicOne + self.subId);
						} else {
							// console.log("连接错误:" + err);
						}
					});
				});
				this.client.on("message", (topic, message) => {
					if (message) {
						if (topic == this.mtopic + this.subId) {
							//传感器
							let data = JSON.parse(message)
							let list = JSON.parse(JSON.stringify(this.sensorData))
							list.forEach((item) => {
								data.forEach((minItem) => {
									if (item.deviceNo == minItem.deviceNo) {
										item.deviceValue = minItem.deviceValue;
										item.online = minItem.online;
									}
								})
							})
							this.$set(this, 'sensorData', list);
						} else if (topic == this.mtopicOne + this.subId) {
							//智能控制
							let data = JSON.parse(message)
							let list = JSON.parse(JSON.stringify(this.labHardwareVOList))
							list.forEach((item) => {
								if (item.hardwareNo == data.hardwareNo) {
									item.operatingState = data.operatingState;
									item.online = data.online;
								}
							})
							this.$set(this, 'labHardwareVOList', list);
						}

					}
				});
			},
			//取消订阅关闭MQTT连接
			offMQTT(type) {
				let self = this;
				if (self.client.unsubscribe) {
					self.client.unsubscribe(self.mtopicOne + self.subId, error => {
						if (error) {
							// console.log('mqtt关闭连接错误:', error)
						}
					})
					self.client.end();
					this.$set(this, 'client', {});
				}
				//判断传入参数如果存在 发起一次新的连接
				if (type) {
					this.sensorMQTT();
				}
			},


		},
		beforeDestroy() {
			//清除定时器
			let self = this;
			self.offMQTT();
		},
	}
</script>

<style lang="stylus" scoped>
	.iotControl {
		width: 750rpx;

		.device-type {
			background: #fff;
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;

			>view {
				//width: 356rpx;
				height: 80rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				border-right: 1px dashed #E0E0E0;
				border-bottom: 1px dashed #E0E0E0;
				padding-left: 10rpx;
				padding-right: 10rpx;
				box-sizing: border-box;

				>img:nth-of-type(1) {
					width: 42rpx;
					height: 42rpx;
					margin-right: 12rpx;
				}

				>view {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 30rpx;
					color: #222222;
					line-height: 80rpx;
					width: 244rpx;
				}

				>img:nth-of-type(2) {
					width: 24rpx;
					height: 22rpx;
				}
			}

			>view:nth-child(2n) {
				border-right: none;
				padding-left: 20rpx;
				box-sizing: border-box;
			}

			>view:nth-last-child(1) {
				border-bottom: none;
			}

			>view:nth-last-child(2) {
				border-bottom: none;
			}
		}

		.small-title {
			height: 80rpx;
			border-bottom: 1rpx solid #E0E0E0;
			background: #FFFFFF;
			margin-top: 20rpx;
			display: flex;
			align-items: center;

			>view:nth-of-type(1) {
				width: 4rpx;
				height: 34rpx;
				background: #0D97EB;
				margin: 0rpx 24rpx 0 20rpx;
			}

			>view:nth-of-type(2) {
				font-family: PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
				line-height: 80rpx;
			}

		}

		.sensor {
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			background: #fff;
			padding: 12rpx 20rpx 30rpx;
			box-sizing: border-box;

			>view {
				display: flex;
				justify-content: flex-start;
				align-items: center;
				height: 66rpx;
				width: 355rpx;

				>img {
					width: 42rpx;
					height: 42rpx;
					margin-right: 20rpx;
				}

				>view {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #222222;
					line-height: 30rpx;
				}
			}
		}

		.intelligent-control {
			background: #fff;
			padding: 0 20rpx;
			box-sizing: border-box;

			>view {
				display flex;
				border-bottom: 1rpx solid #e0e0e0;

				.for-button-p {
					flex: 1;
					line-height: 90rpx;
					color: #333333;
					font-size: 28rpx;

					>text {
						font-size: 28rpx;
						color: #0183FA;
					}
				}

				>img {
					height: 50rpx;
					width: 100rpx;
					margin: 20rpx 0 20rpx 0;
				}

				view:nth-child(2) {
					text-align right;
					color: #999;
				}

				.pcType-button {
					width: 120rpx;
					line-height: 42rpx;
					border: 4rpx solid #0183FA;
					border-radius: 30rpx;
					color: #0183FA !important;
					font-size: 24rpx;
					text-align center !important;
					margin: 20rpx 0 20rpx 0;
				}
			}

			>view:nth-last-child(1) {
				border-bottom: none;
			}
		}
	}
</style>