v3-lab-xcx/pages/component/topWarn.vue

<!-- 顶部警告 -->
<template>
	<view class="top-warn" v-if="pageType">
		<view class="text-view">{{text}}</view>
		<view class="button-view" @click="buttonClick">查看</view>
	</view>
</template>

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

	export default {
		data() {
			return {
				pageType: 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('wxs://' + uni.getStorageSync('mqttUrl'), {
					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]) {
						// console.log('条幅触发-有');
						this.$set(this, 'planData', data.data);
						this.$set(this, 'text', data.data[1] ? '有多个实验室发生预案' : '有实验室发生预案');
						this.$set(this, 'pageType', true);
					} else {
						// console.log('条幅触发-无');
						this.$set(this, 'pageType', false);
						this.$set(this, 'planData', []);
						this.$set(this, 'text', '');
					}
				}
			},
			//条幅操作按钮
			buttonClick() {
				let self = this;
				let list = [];
				list = ['查看', '结束预案'];
				uni.showActionSheet({
					itemList: list,
					success: function(res) {
						if (res.tapIndex == 0) {
							self.goPage();
						} else if (res.tapIndex == 1) {
							self.closePlan();
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//结束预案弹窗
			closePlan() {
				let self = this;
				uni.showModal({
					content: '传感器数据监测异常，确定要强制结束预案?关闭报警后，3分钟内系统不再触发预案报警，请核实确认后再执行此操作?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							self.closeRiskPlan();
						} else if (res.cancel) {

						}
					}
				});
			},
			//结束预案方法
			async closeRiskPlan() {
				const {
					data
				} = await laboratoryPlanCloseRiskPlan({
					eventId: this.planData[0].eventId
				});
				if (data.code == 200) {
					uni.showToast({
						title: '操作成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
					this.laboratoryBigViewSelectTriggerInfo();
				}
			},
			//页面跳转
			goPage() {
				let obj = {
					buildId: this.planData[0].buildId,
					floorId: this.planData[0].floorId,
					subId: this.planData[0].subId,
					groupId: this.planData[0].eventId,
				}
				uni.navigateTo({
					url: '/pages_manage/views/emergencyEvacuationBig?item=' + encodeURIComponent(JSON.stringify(obj))
				});
			},
		}
	}
</script>

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

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

		.button-view {
			width: 140rpx;
			color: #0183FA;
			text-align center;
		}
	}
</style>