v3-h5-web/pages/component/topWarn.vue

<!-- 顶部警告 -->
<template>
	<view class="top-warn" v-if="pageType">
		<view class="left-title">预警</view>
		<view class="text-view">{{text}}</view>
		<view class="button-view" @click="buttonClick" v-if="buttonType">处置</view>
	</view>
</template>

<script>
	import {
		itoOrVideoLimits
	} from '@/utils/index'
	import $mqtt from '@/utils/mqtt.min.js';
	import {
		controlsRestrictVerify
	} from '@/utils/index'
	import {
		laboratoryBigViewSelectTriggerInfo,
		laboratoryPlanCloseRiskPlan,
		laboratoryBigViewGetFloorByBigView,
	} from '@/pages_manage/api/index.js'

	export default {
		data() {
			return {
				pageType: false,
				buttonType:false,
				text: "",
				buildId: "",
				floorId: "",
				subId: "",
				//预案MQTT
				mtopic: 'lab/risk/plan/change',
				client: {},
				planData: {},
			}
		},
		created() {

		},
		mounted() {
			this.offPlanMQTT('on');
			this.laboratoryBigViewSelectTriggerInfo();
		},
		methods: {
			//预案-MQTT连接
			offPlanMQTT(type) {
				let self = this;
				if (self.client.unsubscribe) {
					self.client.unsubscribe(self.mtopic, error => {
						if (error) {
							// console.log('mqtt关闭连接错误:', error)
						}
					})
					self.client.end();
					this.$set(this, 'client', {});
				}
				//判断传入参数如果存在 发起一次新的连接
				if (type) {
					this.planMQTT();
				}
			},
			//预案-MQTT订阅
			planMQTT() {
				let self = this;
				this.client = $mqtt.connect(
				// #ifdef WEB
				'wss://' + uni.getStorageSync('mqttUrl')
				// #endif
				// #ifdef MP-WEIXIN
				'wxs://' + uni.getStorageSync('mqttUrl')
				// #endif
				, {
					username: uni.getStorageSync('mqttUser'),
					password: uni.getStorageSync('mqttPassword')
				});
				this.client.on("connect", e => {
					this.client.subscribe(this.mtopic, (err) => {
						if (!err) {
							console.log("预案订阅成功:" + this.mtopic);
						} else {
							// console.log("连接错误:" + err);
						}
					});
				});
				this.client.on("message", (topic, message) => {
					console.log('message', message);
					console.log('topic,', topic);
					if (message) {
						if (topic == this.mtopic) {
							//预案触发
							console.log('触发预案')
							this.laboratoryBigViewSelectTriggerInfo();
						}
					}
				});
			},
			//获取预案数据
			async laboratoryBigViewSelectTriggerInfo(type) {
				let self = this;
				const {
					data
				} = await laboratoryBigViewSelectTriggerInfo();
				if (data.code == 200) {
					// console.log('条幅触发',data.data);
					if (data.data[0]) {
						let list1 = [];
						let list2 = [];
						data.data.forEach((item)=>{
							if(itoOrVideoLimits(item.adminId,item.safeIds)){
								list1.push(item);
							}else{
								list2.push(item);
							}
						})
						if(list1[0]){
							// console.log('条幅触发-有');
							this.$set(this, 'planData', list1);
							this.$set(this, 'text', list1[1] ? '有多个实验室发生预案' : '有实验室发生预案');
							this.$set(this, 'pageType', true);
							this.$set(this, 'buttonType', true);
							//传感器
							let planSensorList = [];
							list1.forEach((item) => {
								let list = JSON.parse(item.triggerUploadData)
								list.forEach((minItem) => {
									planSensorList.push(minItem.deviceNo)
							 })
							})
							uni.setStorageSync("planSensorList", planSensorList);
						}else{
							this.$set(this, 'planData', list2);
							this.$set(this, 'text', list2[1] ? '有多个实验室发生预案' : '有实验室发生预案');
							this.$set(this, 'pageType', true);
							this.$set(this, 'buttonType', false);
							//传感器
							let planSensorList = [];
							list2.forEach((item) => {
								let list = JSON.parse(item.triggerUploadData)
								list.forEach((minItem) => {
									planSensorList.push(minItem.deviceNo)
							 })
							})
							uni.setStorageSync("planSensorList", planSensorList);
						}
					} else {
						// console.log('条幅触发-无');
						this.$set(this, 'pageType', false);
						this.$set(this, 'buttonType', false);
						this.$set(this, 'planData', []);
						this.$set(this, 'text', '');
						uni.setStorageSync("planSensorList", []);
					}
				}
			},
			//条幅操作按钮
			buttonClick() {
				let self = this;
				if(self.planData[1]){
					let list = [];
					for(let i=0;i<self.planData.length;i++){
						list.push(self.planData[i].subName+'-'+self.planData[i].eventName)
					}
					uni.showActionSheet({
						itemList: list,
						success: function(res) {
							let obj = {
								buildId: self.planData[res.tapIndex].buildId,
								floorId: self.planData[res.tapIndex].floorId,
								subId: self.planData[res.tapIndex].subId,
								adminId: self.planData[res.tapIndex].adminId,
								groupId: self.planData[res.tapIndex].eventId,
							}
							let buttonList = [];
							if (!itoOrVideoLimits(self.planData[res.tapIndex].adminId,self.planData[res.tapIndex].safeIds)) {
								buttonList = ['查看'];
							} else {
								buttonList = ['查看', '结束预案'];
							}
							setTimeout(() => {
								uni.showActionSheet({
									itemList: buttonList,
									success: function(res) {
										if (res.tapIndex == 0) {
											self.laboratoryBigViewGetFloorByBigView(obj);
										} else if (res.tapIndex == 1) {
											uni.showModal({
												content: '传感器数据监测异常，确定要强制结束预案?关闭报警后，3分钟内系统不再触发预案报警，请核实确认后再执行此操作?',
												cancelColor: "#999",
												confirmColor: "#0183FA",
												success: function(resData) {
													if (resData.confirm) {
														self.closeRiskPlan(res.tapIndex);
													} else if (resData.cancel) {
											
													}
												}
											});
										}
									},
									fail: function(res) {
										console.log(res.errMsg);
									}
								});
							}, 300);
						},
						fail: function(res) {
							// console.log(res.errMsg);
						}
					});
				}else{
					let obj = {
						buildId: self.planData[0].buildId,
						floorId: self.planData[0].floorId,
						subId: self.planData[0].subId,
						adminId: self.planData[0].adminId,
						groupId: self.planData[0].eventId,
					}
					let buttonList = [];
					if (!itoOrVideoLimits(self.planData[0].adminId,self.planData[0].safeIds)) {
						buttonList = ['查看'];
					} else {
						buttonList = ['查看', '结束预案'];
					}
					uni.showActionSheet({
						itemList: buttonList,
						success: function(res) {
							if (res.tapIndex == 0) {
								self.laboratoryBigViewGetFloorByBigView(obj);
							} else if (res.tapIndex == 1) {
								uni.showModal({
									content: '传感器数据监测异常，确定要强制结束预案?关闭报警后，3分钟内系统不再触发预案报警，请核实确认后再执行此操作?',
									cancelColor: "#999",
									confirmColor: "#0183FA",
									success: function(resData) {
										if (resData.confirm) {
											self.closeRiskPlan(0);
										} else if (resData.cancel) {
								
										}
									}
								});
							}
						},
						fail: function(res) {
							console.log(res.errMsg);
						}
					});
				}
			},
			//结束预案方法
			async closeRiskPlan(index) {
				console.log('index',index)
				let self = this;
				const {
					data
				} = await laboratoryPlanCloseRiskPlan({
					eventId: self.planData[index].eventId
				});
				if (data.code == 200) {
					uni.showToast({
						title: '操作成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					self.laboratoryBigViewSelectTriggerInfo();
				}
			},
			//查询实验室是否配置地图
			async laboratoryBigViewGetFloorByBigView(obj) {
				const {
					data
				} = await laboratoryBigViewGetFloorByBigView({
					id: obj.floorId
				})
				if (data.code == 200) {
					if(data.data[0]){
						if(data.data[0].buildLayoutVoList){
							if (data.data[0].buildLayoutVoList[0]) {
								uni.navigateTo({
									url: '/pages_manage/views/emergencyEvacuationBig?item=' + encodeURIComponent(JSON.stringify(
										obj))
								});
							}else{
								uni.showToast({
									title: '该实验室楼层未配置地图数据,请联系管理员.',
									icon: "none",
									mask: true,
									duration: 4000
								});
							}
						}else{
							uni.showToast({
								title: '该实验室楼层未配置地图数据,请联系管理员.',
								icon: "none",
								mask: true,
								duration: 4000
							});
						}
					}else{
						uni.showToast({
							title: '该实验室楼层未配置地图数据,请联系管理员.',
							icon: "none",
							mask: true,
							duration: 4000
						});
					}
				}
			},
		},
		onHide() {
			//清除定时器
			let self = this;
			console.log('onHide')
			self.offPlanMQTT();
		},
		beforeDestroy() {
			//清除定时器
			let self = this;
			console.log('beforeDestroy')
			self.offPlanMQTT();
		},
	}
</script>

<style lang="stylus" scoped>
	.top-warn {
		height: 80rpx;
		line-height: 80rpx;
		background rgba(2550, 0, 0, 0.2);
		margin: 20rpx 30rpx 0;
		display flex;
		overflow hidden;
		border-radius: 20rpx;

		.left-title {
			width: 100rpx;
			height: 40rpx;
			text-align: center;
			line-height: 40rpx;
			margin: 20rpx 18rpx 0 30rpx;
			color: #fff;
			font-size: 28rpx;
			background-color: #FF0000;
			border-radius: 10rpx;
		}

		.text-view {
			color: #FF0000;
			flex: 1;
			white-space: nowrap;
		}

		.button-view {
			width: 120rpx;
			height: 48rpx;
			line-height: 48rpx;
			color: #FF0000;
			border: 1px solid #FF0000;
			text-align center;
			border-radius: 50rpx;
			margin: 16rpx 12rpx 0 0;
		}
	}
</style>