v3-lab-xcx/pages_manage/views/emergencyEvacuationBig.vue

<!-- 应急疏散 -->
<template>
	<view id="emergencyEvacuationBig">
		<view class="setUpEvacuation" v-if="pageType == 1">
			<view class="evacuation-max-box">
				<view class="picker-max-box">
					<view class="picker-title-box">
						<view></view>
						<view>楼栋</view>
					</view>
					<picker @change="buildingChange" :range-key="'name'" :range="buildingList">
						<view class="picker-min-box">
							<view>{{buildingName?buildingName:'请选择楼栋'}}</view>
							<img src="@/pages_manage/images/icon_06.png">
						</view>
					</picker>
				</view>
				<view class="picker-max-box">
					<view class="picker-title-box">
						<view></view>
						<view>楼层</view>
					</view>
					<picker @change="floorChange" :disabled="!buildingId" :range-key="'name'" :range="floorList">
						<view class="picker-min-box">
							<view>{{floorName?floorName:'请选择楼层'}}</view>
							<img src="@/pages_manage/images/icon_06.png">
						</view>
					</picker>
				</view>
				<view class="picker-max-box">
					<view class="picker-title-box">
						<view></view>
						<view>实验室</view>
					</view>
					<picker @change="fjListChange" :disabled="!floorId" :range-key="'subName'" :range="fjListArray">
						<view class="picker-min-box">
							<view>{{subName?subName:'请选择实验室'}}</view>
							<img src="@/pages_manage/images/icon_06.png">
						</view>
					</picker>
				</view>
			</view>
			<view class="setUpEvacuation-bottom-button" @click="confirmBtn">确认</view>
		</view>
		<view class="implementEvacuation" v-if="pageType == 2">
			<view class="evacuation-max-box">
				<!-- 头部 -->
				<view class="evacuation-title-box">
					<view class="evacuation-title-left">
						<view class="evacuation-title-name-box">{{textFiltration(subName)}}</view>
						<view class="site"><img src="@/pages_manage/images/icon_14.png">{{textFiltration(buildingName)}}
							{{textFiltration(floorName)}}
						</view>
					</view>
					<view class="evacuation-title-right" @click="backButton()">选择房间</view>
				</view>
				<!-- 地图部分 -->
				<view class="roadmap">
					<view class="roadmap_t">
						<view class="monito_li_r_l"></view>
						<view class="monito_li_r_r_button" @click="goAllPage">全屏</view>
					</view>
					<view class="evacuation-map-box">
						<view class="emergencyEvacuationBigFullScreen-page" v-if="mapType"
							:style="'width:'+mapWidth+'rpx;height:'+mapHeight+'rpx;transform: scale('+zoomData+');margin-top:-'+mapHeight/2+'rpx;margin-left:-'+mapWidth/2+'rpx;'">
							<view class="map-max-box" :style="'width:'+mapWidth+'rpx;height:'+mapHeight+'rpx;'">
								<!-- 实验室 -->
								<view class="map-max-for-box for-map-box" v-if="item.type == 1" v-for="(item,index) in mapList"
									:key="index" :class="!item.policeType && subId ==item.subId ? 'room-type-one':(
									item.policeType && subId !=item.subId ? 'room-type-two':(
									item.policeType && subId ==item.subId ? 'room-type-three':(
									!item.loginAdmin ? 'room-type-noe':'')))"
									:style="'top:'+item.y+'rpx;left:'+item.x+'rpx;width:'+(item.w-4)+'rpx;height:'+(item.h-4)+'rpx;'">
									<view class="map-max-for-min-box">
										<view class="map-for-name-p" :style="'margin-top:'+((item.h/2)-20)+'rpx;'">
											{{item.roomType == '-99'?item.roomName:item.subName}}
										</view>
										<view class="map-for-num-p">({{item.roomNum}})</view>
										<view class="position-box" src="@/pages_manage/images/icon_sysbjt_m.png"
											:class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
											v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
											:style="'top:'+minItem.y+'rpx;left:'+minItem.x+'rpx;width:'+minItem.w+'rpx;height:'+minItem.h+'rpx;'">
										</view>
									</view>
								</view>
								<!-- 走廊 -->
								<view class="map-max-for-box for-map-box-one" v-if="item.type == 2" v-for="(item,index) in mapList"
									:key="index"
									:style="'top:'+item.y+'rpx;left:'+item.x+'rpx;width:'+item.w+'rpx;height:'+item.h+'rpx;'">
									<view class="map-max-for-min-box">
										<view class="position-box"
											:class="minItem.state=='1'&&minItem.openType?'lightTopOn':(minItem.state=='1'&&!minItem.openType?'lightTopOff':
									(minItem.state=='2'&&minItem.openType?'lightBottomOn':(minItem.state=='2'&&!minItem.openType?'lightBottomOff':
									(minItem.state=='3'&&minItem.openType?'lightLeftOn':(minItem.state=='3'&&!minItem.openType?'lightLeftOff':
									(minItem.state=='4'&&minItem.openType?'lightRightOn':(minItem.state=='4'&&!minItem.openType?'lightRightOff':'')))))))"
											v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
											:style="'top:'+minItem.y+'rpx;left:'+minItem.x+'rpx;width:'+minItem.w+'rpx;height:'+minItem.h+'rpx;'">
										</view>
									</view>
								</view>
								<!-- 疏散口 -->
								<view class="map-max-for-box for-map-box-two" v-if="item.type == 3" v-for="(item,index) in mapList"
									:key="index" :class="item.roomCheckType?'for-map-box-two-check':''"
									:style="'top:'+item.y+'rpx;left:'+item.x+'rpx;width:'+item.w+'rpx;height:'+item.h+'rpx;'">
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 视频部分 -->
				<view class="video-max-box" v-if="urlList[0]">
					<video v-for="(item,index) in urlList" :key="index" ref="videoRef" :src="item.url" :poster="videoCover"
						:custom-cache='false' :autoplay="true" :controls="true" :enable-danmu="false" :muted="true"
						:show-fullscreen-btn="true" :show-center-play-btn="false" :show-play-btn="false"
						@error="videoErrorCallback">
					</video>
				</view>
				<view class="bottom-button-box">
					<view class="voice" @click="shadeTypeClick()">语音广播</view>
					<view class="plan" v-if="planStatus" @click="closePlan()">结束预案</view>
					<view class="evacuate" @click="evacuationButton(1)" v-if="isEvacuate">执行疏散</view>
					<view class="evacuate" @click="evacuationButton(2)" v-if="!isEvacuate">结束疏散</view>
				</view>
			</view>
			<!-- 语音广播-->
			<view class="shade-max-big-box" v-if="broadcastType">
				<view class="null-box" @click="shadeTypeClick()"></view>
				<!-- 语音广播-执行疏散 -->
				<view class="broadcast">
					<view class="broadcast_t">语音广播<label>选择喇叭位置</label></view>
					<!-- 按钮部分 -->
					<view class="trumpet-max-box">
						<view @click="trumpetClick(index)" class="trumpet-for-box"
							:class="item.type?'trumpet-color-a':'trumpet-color-b'" v-for="(item,index) in trumpetList" :key="index">
							<img src="@/pages_manage/images/icon_sskz_zc.png" v-if="!item.type">
							<img src="@/pages_manage/images/icon_sskz_xz.png" v-if="item.type">
							{{item.deviceName}}
						</view>
					</view>
					<view class="broadcast_m">
						<view class="broadcast_m_t" :class="liveType?'broadcast_m_t_back_a':'broadcast_m_t_back_b'"
							@longpress.stop="recordButton" @touchmove.stop="cancelButton" @touchend.stop="sendButton">

							{{liveType?'松开发送':'按住说话'}}
						</view>
						<view class="broadcast_m_b" v-if="!liveType">按住说话，录入广播内容</view>
						<view class="broadcast_m_b" v-if="liveType">松开发送，向上滑动取消发送</view>
					</view>
				</view>
			</view>
		</view>
		<view></view>
	</view>
</template>

<script>
	import $mqtt from '@/utils/mqtt.min.js';
	import {
		textParseUrlIps,
		laboratoryInfo,
		getCameraByFloor,
		getDeviceListBySub,
		GetStartList,
		firedeviceStatus,
		firedeviceStart,
		firedeviceCancel,
		closeRiskPlan,
		getBuildOrFloorList,
		getFloorData,
		getRedisEvacuation,
		openLight,
		closeLight,
		executeEvacuation,
		endEvacuation,
		selectTriggerInfo,
		riskPlanId
	} from '@/api/apiDemo/index.js'
	import {
		config
	} from '@/api/request/config.js'
	import {
		iotAppSpeakerFindHorn,
		iotAppSpeakerPlayVoice
	} from '@/pages_manage/api/index.js'
	import {
		laboratoryBigViewGetBuildByBigView,
		laboratoryBigViewSelectTriggerInfo,
		laboratoryBigViewGetFloorByBigView,
		laboratoryExitLineGetRedisEvacuation,
		laboratoryPlanCloseRiskPlan,
		laboratoryExitLineExecuteEvacuation,
		laboratoryexitLineEndEvacuation,
	} from '@/pages_manage/api/index.js'

	export default {
		data() {
			return {
				videoCover: uni.getStorageSync('videoCover'),
				//页面状态
				pageType: "1",
				deptIndex: 0,
				//院系楼栋数据
				buildingList: [],
				buildingName: "",
				buildingId: "",
				//楼层数据
				floorList: [],
				floorName: "",
				floorId: "",
				//实验室
				fjListArray: [],
				//视频数据
				urlList: [],
				//接收参数
				subId: "",
				subName: "",
				title: "",
				type: "",
				//喇叭数据
				trumpetList: [],
				//广播相关
				liveType: false,
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				recorderManager: wx.getRecorderManager(),
				isEvacuate: true, //疏散按钮控制，当为true时候执行疏散
				//滑动记录
				startPoint: {},
				//摄像头信息
				deptId: '',
				itemData: {
					hardwareNUM: '',
					name: '',
				},
				broadcastType: false,
				//选中楼栋
				checkSubName: "",
				address: "",
				videoHardwareNUM: [], //实验室和楼道摄像头编码
				//新布局地图相关数据
				zoomData: null,
				mapType: false,
				mapList: [],
				mapWidth: null, //40边框距离
				mapHeight: null, //40边框距离
				//MQTT请求参数-预案
				mtopic: "lab/risk/plan/change",
				//MQTT请求参数-疏散
				mtopicOne: "lab/floor/exit/line",
				client: {},
				groupId: null,
				planStatus: false,
				warnData: null,
			}
		},
		onLoad(option) {
			console.log('option', option);
			if (option.item) {
				let obj = JSON.parse(decodeURIComponent(option.item));
				this.$set(this, 'warnData', obj);
				console.log('obj', obj);
				this.$set(this, 'buildingId', obj.buildId);
				this.$set(this, 'deptId', obj.buildId);
				this.$set(this, 'floorId', obj.floorId);
				this.$set(this, 'subId', obj.subId);
				this.$set(this.itemData, 'subjectId', obj.subId);
				this.$set(this, 'groupId', obj.groupId);
				this.$set(this, 'pageType', 2);
			}

		},
		onShow() {
			if (this.warnData) {
				this.getDataA();
			} else {
				this.laboratoryBigViewGetBuildByBigView();
			}
		},
		onUnload() {},
		methods: {
			//跳转进来后的初始化
			async getDataA() {
				const {
					data
				} = await laboratoryBigViewGetBuildByBigView({
					type: 2
				})
				if(data.code == 200){
					this.$set(this, 'buildingList', data.data);
					data.data.forEach((item)=>{
						if(this.buildingId == item.id){
							this.$set(this,'buildingName',item.name);
						}
					}),
					this.selectTriggerInfo(1);
					this.getDataB()
				}
			},
			async getDataB() {
				const {
					data
				} = await laboratoryBigViewGetBuildByBigView({
					type: 3,
					id: this.deptId
				})
				if (data.code == 200) {
					this.$set(this, 'floorList', data.data);
					data.data.forEach((item)=>{
						if(this.floorId == item.id){
							this.$set(this,'floorName',item.name);
						}
					}),
					this.selectTriggerInfo(2);
					this.confirmBtn();
					this.getBuildingData();
				}
			},
			//返回按钮
			backButton() {
				let self = this;
				this.$set(this, 'pageType', 1);
				this.$set(this, 'urlList', []);
				this.laboratoryBigViewGetBuildByBigView();
			},
			//结束预案
			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.groupId
				});
				if (data.code == 200) {
					this.planStatus = false;
					uni.showToast({
						title: '操作成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			//全屏疏散页面
			goAllPage() {
				let obj = {
					buildingId: this.buildingId,
					floorId: this.floorId,
					type: 1,
				}
				uni.navigateTo({
					url: '/pages_manage/views/emergencyEvacuationBigFullScreen?item=' + encodeURIComponent(JSON
						.stringify(obj)),
				});
			},
			//获取楼栋数据
			async laboratoryBigViewGetBuildByBigView(option) {
				const {
					data
				} = await laboratoryBigViewGetBuildByBigView({
					type: 2
				})
				this.$set(this, 'buildingList', data.data);
				this.selectTriggerInfo(1);
			},
			//获取楼层数据
			async getBuilding(buildingId) {
				const {
					data
				} = await laboratoryBigViewGetBuildByBigView({
					type: 3,
					id: buildingId
				})
				this.$set(this, 'floorList', data.data);
				this.$set(this, 'floorName', "");
				this.$set(this, 'floorId', "");
				this.$set(this, 'fjListArray', []);
				this.$set(this, 'subName', "");
				this.$set(this, 'subId', "");
				this.selectTriggerInfo(2);
			},
			//楼栋选中
			buildingChange(e) {
				this.$set(this, 'buildingName', this.buildingList[e.detail.value].name);
				this.$set(this, 'buildingId', this.buildingList[e.detail.value].id);
				this.$set(this, 'deptId', this.buildingList[e.detail.value].id);
				this.$set(this, 'floorId', null);
				this.$set(this, 'floorName', null);
				this.$set(this, 'subId', null);
				this.$set(this, 'subName', null);
				this.$set(this.itemData, 'subjectId', null);
				this.$set(this, 'floorList', []);
				this.$set(this, 'fjListArray', []);
				this.getBuilding(this.buildingList[e.detail.value].id);
			},
			//楼层选中
			floorChange(e) {
				this.$set(this, 'floorName', this.floorList[e.detail.value].name);
				this.$set(this, 'floorId', this.floorList[e.detail.value].id);
				this.$set(this, 'subId', null);
				this.$set(this, 'subName', null);
				this.$set(this.itemData, 'subjectId', null);
				this.$set(this, 'fjListArray', []);
				this.getBuildingData();
			},
			//实验室选择
			fjListChange(e) {
				this.$set(this, 'subName', this.fjListArray[e.detail.value].subName);
				this.$set(this, 'subId', this.fjListArray[e.detail.value].subId);
				this.$set(this.itemData, 'subjectId', this.fjListArray[e.detail.value].subId);
			},
			shadeTypeClick() {
				this.broadcastType = !this.broadcastType
			},
			//获取预案数据
			async selectTriggerInfo(type) {
				let self = this;
				const {
					data
				} = await laboratoryBigViewSelectTriggerInfo();
				if (data.code == 200) {
					if (type == 1) {
						//标记楼栋
						for (let o = 0; o < self.buildingList.length; o++) {
							for (let i = 0; i < data.data.length; i++) {
								if (data.data[i].buildId == self.buildingList[o].id) {
									self.buildingList[o].name.replace('(预案发生)')
									self.buildingList[o].name = '(预案发生) ' + self.buildingList[o].name
								}
							}
						}
					}
					if (type == 2) {
						//标记楼层
						for (let o = 0; o < self.floorList.length; o++) {
							for (let i = 0; i < data.data.length; i++) {
								if (data.data[i].floorId == self.floorList[o].id) {
									self.floorList[o].name.replace('(预案发生)')
									self.floorList[o].name = '(预案发生) ' + self.floorList[o].name
								}
							}
						}
					}
					if (type == 3) {
						//标记实验室
						for (let o = 0; o < self.fjListArray.length; o++) {
							let num = 0;
							for (let i = 0; i < data.data.length; i++) {
								if (data.data[i].subId == self.fjListArray[o].subId) {
									num++
									self.$set(this, 'groupId', data.data[i].groupId)
									self.fjListArray[o].subName.replace('(预案发生)')
									self.fjListArray[o].subName = '(预案发生) ' + self.fjListArray[o].subName
								}
							}
							if (num != 0) {
								self.planStatus = true; //如果有预案发生
							} else {
								self.planStatus = false; //如果有预案发生
								self.fjListArray[o].subName.replace('(预案发生)')
							}
						}
						for (let o = 0; o < self.mapList.length; o++) {
							if (self.mapList[o].type == 1) {
								let num = 0;
								for (let i = 0; i < data.data.length; i++) {
									if (data.data[i].subId == self.mapList[o].subId) {
										num++
									}
								}
								if (num != 0) {
									self.mapList[o].policeType = true;
								} else {
									self.mapList[o].policeType = false;
								}
							}
						}
					}
          this.$forceUpdate();
				}
			},
			getAppExitLine() {
				let list = [{
					type: "lab/exit/line"
				}, {
					type: "lab/fireDevice/Warn/"
				}];
				getApp().appMqttOn(1, list);
			},

			//获取实验室摄像头
			async laboratoryInfo() {

				let _this = this;
				const {
					data
				} = await laboratoryInfo(_this.itemData.subjectId);
				if (data.code == 200) {
					let list = data.data[0];
					list.labHardwareVOList.forEach(function(item) {
						if (item.hardwareTypeEnum.enumName == 'VIDEO_MONITOR') {
							console.log(item.hardwareNUM)
							_this.videoHardwareNUM.push(item.hardwareNUM)
						}
					})

					this.getCameraByFloor();

				}
			},
			//获取楼层摄像头列表
			async getCameraByFloor() {
				let _this = this;
				const {
					data
				} = await getCameraByFloor({
					floorId: this.floorId
				})
				if (data.code == 200) {
					if (data.data[0]) {
						let list = _this.videoHardwareNUM.concat(data.data)
						let qc = []
						for (var i = 0; i < list.length - 1; i++) {
							for (var j = i + 1; j < list.length; j++) {
								if (list[i] === list[j]) {
									list.splice(j, 1);
									j--;
								}
							}
						}
						this.GetStartList(list);
					} else {
						this.GetStartList(_this.videoHardwareNUM);
					}
				}
			},
			async GetStartList(rows) {
				console.log(rows)
				let self = this;
				if (!rows[0]) {
					return
				}
				let list = "";
				for (let i = 0; i < rows.length; i++) {
					list = list + rows[i] + ","
				}
				let obj = {
					page: "1",
					count: "100",
					deviceIds: list,
				};
				const {
					data
				} = await GetStartList(obj)
				if (data.code == 200) {
					let list = [];
					for (let i = 0; i < data.data.length; i++) {
						let text = uni.getStorageSync('cameraUrl');
						let url = data.data[i].hls;
						url = url.split("rtp/");
						let newUrl = text + 'rtp/' + url[1];
						let obj = {
							name: "楼道监控" + (i + 1),
							id: data.data[i].deviceID,
							url: newUrl,
							videoContext: wx.createVideoContext(data.data[i].deviceID)
						}
						list.push(obj)
					}
					this.urlList = list;
				}
			},
			//点击选择喇叭
			trumpetClick(index) {
				this.trumpetList[index].type = !this.trumpetList[index].type
				// let _this = this;
				// if (_this.trumpetList[index].type == true) {
				//   _this.trumpetList.forEach(function(item2) {
				//     if (item2.deviceSn == _this.trumpetList[index].deviceSn) {
				//       item2.type = true
				//     } else {
				//       item2.type = false
				//     }
				//   })
				// }
			},
			//录制
			recordButton(e) {
				console.log("按下")
				let self = this;
				let num = 0;
				for (let i = 0; i < self.trumpetList.length; i++) {
					if (self.trumpetList[i].type) {
						num++
					}
				}
				if (num == 0) {
					uni.showToast({
						title: '请选择喇叭',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				this.liveType = true;
				console.log('录制', e)
				this.startPoint = e.touches[0]; //记录长按时开始点信息，后面用于计算上划取消时手指滑动的距离。
				const options = {
					duration: 10000,
					sampleRate: 16000,
					numberOfChannels: 1,
					encodeBitRate: 48000,
					format: 'mp3',
					frameSize: 50
				}
				this.recorderManager.start(options); //开始录音
				this.recorderManager.onStart(() => {
					console.log('recorder start')
				})
				this.recorderManager.onError((res) => {
					console.log(res);
				})
				wx.showToast({
					title: "正在录音，上划取消发送",
					icon: "none",
					duration: 60000 //先定义个60秒，后面可以手动调用wx.hideToast()隐藏
				});
				this.sendLock = false; //长按时是不上锁的。
			},
			//取消
			cancelButton(e) {
				console.log("移动")
				let self = this;
				let num = 0;
				for (let i = 0; i < self.trumpetList.length; i++) {
					if (self.trumpetList[i].type) {
						num++
					}
				}
				if (num == 0) {
					return
				}
				this.liveType = false;
				console.log('取消', e)
				let moveLenght = e.touches[e.touches.length - 1].clientY - this.startPoint.clientY; //移动距离
				if (Math.abs(moveLenght) > 50) {
					wx.showToast({
						title: "松开手指,取消发送",
						icon: "none",
						duration: 60000
					});
					this.sendLock = true; //触发了上滑取消发送，上锁
				} else {
					wx.showToast({
						title: "正在录音，上划取消发送",
						icon: "none",
						duration: 60000
					});
					this.sendLock = false; //上划距离不足，依然可以发送，不上锁
				}
			},
			//发送
			sendButton(e) {
				console.log("松开")
				let self = this;
				let num = 0;
				for (let i = 0; i < self.trumpetList.length; i++) {
					if (self.trumpetList[i].type) {

						num++
					}
				}
				if (num == 0) {
					return
				}
				this.liveType = false;
				console.log('发送', e)
				wx.hideToast(); //结束录音、隐藏Toast提示框
				this.recorderManager.stop(); //结束录音
				this.recorderManager.onStop((res) => {
					if (!this.sendLock) {
						console.log('1', this.recorderManager)
						this.uploadImg(res.tempFilePath);
					}
					console.log('停止录音', res.tempFilePath)
					console.log("sendLock", this.sendLock);
				})
			},
			//上传MP3
			async uploadImg(tempFilePaths) {
				var self = this;
				uni.uploadFile({
					url: config.base_url + '/system/file/upload', //仅为示例，非真实的接口地址
					header: {
						'Authorization': uni.getStorageSync('token')
					},
					filePath: tempFilePaths,
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						let res = JSON.parse(uploadFileRes.data);
						if (res.code == 200) {
							console.log("上传成功", res)
							self.iotAppSpeakerPlayVoice(config.base_url + '/' + res.data.url);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {
						uni.hideLoading()
					},
					complete: () => {}
				});
			},
			//发送语音
			async iotAppSpeakerPlayVoice(text) {
				let self = this;
				let list = [];
				for (let i = 0; i < self.trumpetList.length; i++) {
					if (self.trumpetList[i].type) {
						list.push(self.trumpetList[i].deviceNo)
					}
				}
				console.log(text)
				let obj = {
					deviceNo: list.join(','),
					voiceUrls: text,
					cycle: 1,
				}
				const {
					data
				} = await iotAppSpeakerPlayVoice(obj)
				if (data.code == 200) {
					uni.showToast({
						title: '发送成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			//监听应急疏散数据变更
			getMqttLineData(val) {
				console.log('收到疏散MQTT')
				let self = this;
				if (val.EXIT_LINE_MESSAGE) {
					console.log('数据改变')
					this.evacuate();
				} else {
					console.log('应急疏散已结束')
					uni.showToast({
						title: '应急疏散已结束',
						icon: "none",
						mask: true,
						duration: 2000
					});
					setTimeout(function() {
						uni.navigateBack();
					}, 2000);
				}
			},
			/* 确认 */
			confirmBtn() {
				if (!this.subId) {
					uni.showToast({
						title: '请选择实验室',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				this.$set(this, 'pageType', 2);
				this.getDeviceList();
				//this.laboratoryInfo();
				this.getRedisEvacuation();

			},
			//执行疏散
			async lineEvacuate() {
				let obj = {
					buildingId: this.buildingId,
					floorId: this.floorId,
					type: 2,
				}
				uni.navigateTo({
					url: '/pages_manage/views/emergencyEvacuationBigFullScreen?item=' + encodeURIComponent(JSON
						.stringify(obj)),
				});
			},
			//获取喇叭列表
			async getDeviceList() {
				let obj = {
					subId: this.itemData.subjectId,
					floorId: this.floorId,
				};
				const {
					data
				} = await iotAppSpeakerFindHorn(obj)
				if (data.code == 200) {
					for (let i = 0; i < data.data.length; i++) {
						data.data[i].type = false;
					}
					this.$set(this, 'trumpetList', data.data)
				}
			},
			//摄像头切换
			scrollBoxClick(index) {
				this.videoIndex = index;
			},
			/*新疏散相关接口*/
			//地图数据
			async getBuildingData() {
				let self = this;
				const {
					data
				} = await laboratoryBigViewGetFloorByBigView({
					id: this.floorId
				})
				console.log('data', data)
				if (data.code == 200) {
					if (data.data[0].buildLayoutVoList[0]) {
						let list = JSON.parse(data.data[0].labExitLineVo.layoutJoinData)
						this.zoomCalculate(list, 348, 668);
						for (let i = 0; i < list.length; i++) {
							if (list[i].type == '2') {
								//楼道
								for (let o = 0; o < list[i].lightList.length; o++) {
									list[i].lightList[o].openType = false;
								}
							} else if (list[i].type == '1') {
								for (let o = 0; o < data.data[0].buildLayoutVoList.length; o++) {
									if (list[i].key == data.data[0].buildLayoutVoList[o].pointName) {
										list[i].id = data.data[0].buildLayoutVoList[o].id;
										list[i].buildId = data.data[0].buildLayoutVoList[o].buildId;
										list[i].floorId = data.data[0].buildLayoutVoList[o].floorId;
										list[i].roomType = data.data[0].buildLayoutVoList[o].roomType;
										list[i].roomName = data.data[0].buildLayoutVoList[o].roomName;
										list[i].roomNum = data.data[0].buildLayoutVoList[o].roomNum;
										list[i].subName = data.data[0].buildLayoutVoList[o].subName;
										list[i].subId = data.data[0].buildLayoutVoList[o].subId;
										list[i].online = data.data[0].buildLayoutVoList[o].online;
										list[i].loginAdmin = data.data[0].buildLayoutVoList[o].loginAdmin;
										list[i].policeType = false;
									}
								}
							} else if (list[i].type == 3) {
								list[i].roomCheckType = false;
							}
						}
						let subList = [];
						for (let o = 0; o < data.data[0].buildLayoutVoList.length; o++) {
							subList.push(data.data[0].buildLayoutVoList[o])
							// if (self.subId == data.data[0].buildLayoutVoList[o].subId) {
							// 	self.$set(self, 'checkSubName', data.data[0].buildLayoutVoList[o].subName);
							// 	self.$set(self, 'address', data.data.labExitLineVo.buildName + '' + data.data[0]
							// 		.labExitLineVo.floorName);
							// }
						}
						this.$set(this, 'fjListArray', subList);
						subList.forEach((item)=>{
							if(this.subId == item.subId){
								this.$set(this,'subName',item.subName);
							}
						})
						this.$set(this, 'mapList', JSON.parse(JSON.stringify(list)));
						// this.$set(this, 'shadeMapList', JSON.parse(JSON.stringify(list)));
						this.$set(this, 'mapType', true);
						this.offMQTT('on');
						this.selectTriggerInfo(3);
					}
					setTimeout(function() {
						self.getRedisEvacuation();
					}, 500);
				}
			},
			//获取疏散数据
			async getRedisEvacuation() {
				let self = this;
				let obj = {
					buildId: this.buildingId,
					floorId: this.floorId,
				}
				const {
					data
				} = await laboratoryExitLineGetRedisEvacuation(obj)
				if (data.code == 200) {
					if (data.data.doorPointNames) {
						this.$set(this, 'isEvacuate', false);
						for (let o = 0; o < self.mapList.length; o++) {
							if (self.mapList[o].type == 2) {
								for (let x = 0; x < self.mapList[o].lightList.length; x++) {
									let num = 0;
									for (let i = 0; i < data.data.lightPointSet.length; i++) {
										if (data.data.lightPointSet[i]) { //处理后端返回的异常的NULL
											if (self.mapList[o].lightList[x].key == data.data.lightPointSet[i].key) {
												num++
											}
										}
									}
									self.mapList[o].lightList[x].openType = num != 0;
								}
							}
							if (self.mapList[o].type == 3) {
								let age = 0;
								for (let i = 0; i < data.data.doorPointNames.length; i++) {
									if (data.data.doorPointNames[i] == self.mapList[o].key) {
										age++
									}
								}
								self.mapList[o].roomCheckType = age != 0;
							}
						}
					} else {
						this.$set(this, 'isEvacuate', true);
						for (let o = 0; o < self.mapList.length; o++) {
							if (self.mapList[o].type == 2) {
								for (let x = 0; x < self.mapList[o].lightList.length; x++) {
									self.mapList[o].lightList[x].openType = false;
								}
							}
							if (self.mapList[o].type == 3) {
								self.mapList[o].roomCheckType = false;
							}
						}
					}
				};
			},
			//缩放计算
			zoomCalculate(list, height, width) {
				let maxWidth = 0
				let maxHeight = 0
				let zoomData = 1;
				for (let i = 0; i < list.length; i++) {
					if ((list[i].x + list[i].w) > maxWidth) {
						maxWidth = list[i].x + list[i].w
					}
					if ((list[i].y + list[i].h) > maxHeight) {
						maxHeight = list[i].y + list[i].h
					}
				}
				//处理等值数据
				if (maxHeight == height) {
					maxHeight--
				}
				if (maxWidth == width) {
					maxWidth--
				}
				this.$set(this, 'mapWidth', maxWidth);
				this.$set(this, 'mapHeight', maxHeight);
				//缩放判断
				let zoomNumOne = height / maxHeight;
				if (parseInt(this.accMul(zoomNumOne, maxHeight)) <= height && parseInt(this.accMul(zoomNumOne,
						maxWidth)) <= width) {
					zoomData = zoomNumOne;
					this.$set(this, 'zoomData', zoomNumOne);
				}
				let zoomNumTwo = width / maxWidth;
				if (parseInt(this.accMul(zoomNumTwo, maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo,
						maxWidth)) <= width) {
					zoomData = zoomNumTwo;
					this.$set(this, 'zoomData', zoomNumTwo);
				}
			},
			accMul(arg1, arg2) {
				var m = 0,
					s1 = arg1.toString(),
					s2 = arg2.toString();
				try {
					m += s1.split(".")[1].length
				} catch (e) {}
				try {
					m += s2.split(".")[1].length
				} catch (e) {}
				return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m)
			},
			//结束疏散
			evacuationButton() {
				let self = this;
				if (this.isEvacuate) {
					let obj = {
						buildingId: this.buildingId,
						floorId: this.floorId,
						subId: this.subId,
						type: 2,
					}
					uni.navigateTo({
						url: '/pages_manage/views/emergencyEvacuationBigFullScreen?item=' + encodeURIComponent(JSON
							.stringify(obj)),
					});
				} else {
					uni.showModal({
						content: '确认' + (this.isEvacuate ? '执行' : '结束') + '疏散吗?',
						cancelColor: "#999",
						confirmColor: "#0183FA",
						success: function(res) {
							if (res.confirm) {
								if (self.isEvacuate) {
									self.executeEvacuation();
								} else {
									self.endEvacuation();
								}
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			//开始疏散
			async executeEvacuation() {
				let self = this;
				let doorPointNames = [];
				for (let i = 0; i < self.mapList.length; i++) {
					if (self.mapList[i].type == 3) {
						doorPointNames.push(self.mapList[i].key)
					}
				}
				let obj = {
					buildId: this.buildingId,
					floorId: this.floorId,
					subId: this.subId,
					badPointNames: [],
					doorPointNames: doorPointNames,
				}
				const {
					data
				} = await laboratoryExitLineExecuteEvacuation(obj)
				console.log('data', data)
				if (data.code == 200) {
					this.$set(this, 'isEvacuate', false);
					uni.showToast({
						title: '执行成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			//结束疏散
			async endEvacuation() {
				let self = this;
				let obj = {
					buildId: this.buildingId,
					floorId: this.floorId,
				}
				const {
					data
				} = await laboratoryexitLineEndEvacuation(obj)
				console.log('data', data)
				if (data.code == 200) {
					this.$set(this, 'isEvacuate', true);
					uni.showToast({
						title: '执行成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			videoErrorCallback(e) {
				//console.log("播放失败",e);
				// uni.showToast({
				//     title: '视频播放失败',
				//     icon:"none",
				//     mask:true,
				//     duration: 3000
				// });
			},
			//过滤'预案发生'标记文字并返回数据
			textFiltration(str) {
				if (str.indexOf("(预案发生)") != -1) {
					return str.slice(str.indexOf(")") + 1);
				} else {
					return str
				}
			},
			//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, (err) => {
						if (!err) {
							console.log("预案订阅成功:" + this.mtopic);
						} else {
							// console.log("连接错误:" + err);
						}
					});
					this.client.subscribe(this.mtopicOne, (err) => {
						if (!err) {
							console.log("疏散订阅成功:" + this.mtopicOne);
						} else {
							// console.log("连接错误:" + err);
						}
					});
				});
				this.client.on("message", (topic, message) => {
					console.log('message', message);
					console.log('topic,', topic);
					if (message) {
						if (topic == this.mtopic) {
							//预案触发
							this.selectTriggerInfo(3);
						} else if (topic == this.mtopicOne) {
							//疏散触发
							this.getRedisEvacuation();
						}
					}
				});
			},
			//取消订阅关闭MQTT连接
			offMQTT(type) {
				let self = this;
				if (self.client.unsubscribe) {
					self.client.unsubscribe(self.mtopicOne, error => {
						if (error) {
							// console.log('mqtt关闭连接错误:', error)
						}
					})
					self.client.unsubscribe(self.mtopic, 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>
	#emergencyEvacuationBig {
		height: 100%;
		width: 100%;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;

		.setUpEvacuation {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow-y: scroll;

			.evacuation-max-box {
				width: 710rpx;
				margin: 20rpx 20rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 20rpx 0;

				.picker-max-box {
					.picker-title-box {
						padding: 0 20rpx;
						display: flex;

						view {
							line-height: 80rpx;
							font-size: 28rpx;
						}

						view:nth-child(1) {
							color: red;
						}

						view:nth-child(2) {}

						view:nth-child(3) {
							color: #999;
						}
					}

					.picker-min-box {
						display: flex;
						height: 80rpx;
						width: 667rpx;
						border: 1rpx solid #a2a2a2;
						border-radius: 10rpx;
						margin: 0 20rpx;

						view {
							flex: 1;
							line-height: 80rpx;
							padding: 0 20rpx;
							color: #999;
							font-size: 28rpx;
							overflow: hidden;
						}

						img {
							width: 24rpx;
							height: 12rpx;
							margin: 35rpx 23rpx;
						}
					}
				}
			}
		}

		.implementEvacuation {
			flex: 1;
			display: flex;
			flex-direction: column;
			overflow-y: scroll;

			.evacuation-max-box {
				width: 710rpx;
				margin: 20rpx 20rpx;
				/* background #fff */
				border-radius: 20rpx;
				padding: 20rpx 0 30rpx;

				.evacuation-title-box {
					// height:150rpx;
					//border-bottom:1rpx solid #dedede;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 34rpx 22rpx;
					box-sizing: border-box;
					display: flex;

					.evacuation-title-left {
						flex: 1;

						.evacuation-title-name-box {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
							line-height: 30rpx;
						}

						.site {
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 30rpx;
							margin-top: 32rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;

							>img {
								width: 28rpx;
								height: 30rpx;
								margin-right: 18rpx;
							}
						}
					}

					.evacuation-title-right {
						color: #0183FA;
						font-size: 28rpx;
						line-height: 100rpx;
					}
				}

				/* 一键灭火 */
				.outfire {
					width: 710rpx;
					height: auto;
					background: #FFFFFF;
					border-radius: 20rpx;
					margin: 20rpx 0;
					padding: 26 10rpx;
					box-sizing: border-box;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.outfire_li {
						display: flex;
						justify-content: flex-start;
						padding: 20rpx 10rpx;
						box-sizing: border-box;

						//align-items: center;
						.finish {
							flex: 1;
						}

						>img {
							width: 24rpx;
							height: 30rpx;
							margin-right: 12rpx;
							margin-top: 8rpx;
						}

						.normal {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #333333;
						}

						.abnormal {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #F11C00;
						}
					}

					.outfire_li:nth-of-type(1) {
						>img {
							width: 30rpx;
							height: 28rpx;
							margin-right: 12rpx;
						}
					}

					.outfire_yes_btn {
						width: 120rpx;
						height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #F21C00;
						line-height: 40rpx;
						border: 1px solid #F21C00;
						border-radius: 8rpx;
						text-align: center;
						margin-left: 54rpx;
					}

					.outfire_no_btn {
						width: 120rpx;
						height: 40rpx;
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #CCCCCC;
						line-height: 40rpx;
						border: 1px solid #E0E0E0;
						border-radius: 8rpx;
						text-align: center;
						margin-left: 54rpx;
					}
				}

				.evacuation-scroll-box {
					height: 95rpx;
					overflow-x: scroll;
					overflow-y: hidden;
					white-space: nowrap;
					margin: 0 20rpx;

					view {
						line-height: 95rpx;
						font-size: 28rpx;
						display: inline-block;
						margin-right: 45rpx;
					}

					.scroll-box-color {
						color: #0183FA;
					}
				}

				.evacuation-video-box {
					width: 668rpx;
					height: 341rpx;
					margin: 0 auto;
					position: relative;

					video {
						position: absolute;
						top: 0;
						left: 0;
						width: 668rpx;
						height: 341rpx;
						margin: 0 auto;

					}

					.video-a {
						z-index: 100;
					}

					.video-b {
						z-index: 0;
					}
				}

				/* 路线图 */
				.roadmap {
					width: 710rpx;
					height: 464rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 20rpx 20rpx 0;
					box-sizing: border-box;
					margin-top: 20rpx;

					.roadmap_t {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 30rpx;
						display: flex;

						.monito_li_r_l {
							flex: 1;
							line-height: 61rpx;
							font-size: 28rpx;
						}

						.monito_li_r_r_button {
							width: 100rpx;
							text-align: center;
							line-height: 61rpx;
							font-size: 28rpx;
							color: #0183FA;
						}

						.monito_li_r {
							width: 380rpx;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #0183FA;
							line-height: 80rpx;
							display: flex;
							justify-content: flex-end;
							align-items: center;

							>img {
								width: 9rpx;
								height: 22rpx;
								margin-left: 20rpx;
							}

							.evacuation-title-button-box {
								display: flex;
								overflow: hidden;

								view {
									line-height: 61rpx;
									font-size: 28rpx;
								}

								.colorA {
									color: #0183FA;
								}

								.colorB {
									color: #0183FA;
								}

								img {
									margin: 28rpx 20rpx 0;
									width: 24rpx;
									height: 9rpx;
								}
							}
						}
					}

					.evacuation-map-box {
						width: 668rpx;
						height: 348rpx;
						margin: 0 auto;
						overflow: hidden;
						border: 1rpx solid #E0E0E0;
						margin-top: 20rpx;
						position: relative;

						.emergencyEvacuationBigFullScreen-page {
							// overflow: scroll;
							overflow: hidden;
							position: absolute;
							top: 50%;
							left: 50%;

							.map-max-box {
								position: relative;

								.map-max-for-box {
									position: absolute;
									display: flex;
									flex-direction: column;

									.map-max-for-min-box {
										position: relative;

										.position-box {
											position: absolute;
										}

										.map-for-name-p {
											padding: 0 10rpx;
											height: 20rpx;
											line-height: 20rpx;
											font-size: 14rpx;
											text-align: center;
											color: #333;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}

										.map-for-num-p {
											padding: 0 10rpx;
											height: 20rpx;
											line-height: 20rpx;
											font-size: 14rpx;
											text-align: center;
											color: #333;
											overflow: hidden;
											text-overflow: ellipsis;
											white-space: nowrap;
										}

										.center-move-door-p-t {
											background: url("@/pages_manage/images/icon_sysbjt_m.png") !important;
											background-size: 100% !important;
											transform: rotate(180deg);
										}

										.center-move-door-p-b {
											background: url("@/pages_manage/images/icon_sysbjt_m.png") !important;
											background-size: 100% !important;
										}

										.center-move-door-p-l {
											background: url("@/pages_manage/images/icon_sysbjt_m.png") !important;
											background-size: 100% !important;
											transform: rotate(90deg);
										}

										.center-move-door-p-r {
											background: url("@/pages_manage/images/icon_sysbjt_m.png") !important;
											background-size: 100% !important;
											transform: rotateZ(270deg);
										}

										.lightTopOn {
											background: url("@/pages_manage/images/icon_sjt.png");
											background-size: 100%;
										}

										.lightTopOff {
											background: url("@/pages_manage/images/icon_shang_hs.png");
											background-size: 100%;
										}

										.lightBottomOn {
											background: url("@/pages_manage/images/icon_xjt.png");
											background-size: 100%;
										}

										.lightBottomOff {
											background: url("@/pages_manage/images/icon_xia_hs.png");
											background-size: 100%;
										}

										.lightLeftOn {
											background: url("@/pages_manage/images/icon_zuo.png");
											background-size: 100%;
										}

										.lightLeftOff {
											background: url("@/pages_manage/images/icon_zou_hs.png");
											background-size: 100%;
										}

										.lightRightOn {
											background: url("@/pages_manage/images/icon_yuo.png");
											background-size: 100%;
										}

										.lightRightOff {
											background: url("@/pages_manage/images/icon_you_hs.png");
											background-size: 100%;
										}
									}
								}

								.for-map-box {
									border: 2rpx solid #fff;
									background: #CEF2FD;
								}

								.for-map-box-one {
									background: #CEFDD5;
								}

								.for-map-box-two {
									background: url("@/pages_manage/images/icon_yjtd.png") center center no-repeat #006400;
									background-size: 60rpx 60rpx;
								}

								.for-map-box-two-check {
									background: url("@/pages_manage/images/icon_yjtd.png") center center no-repeat rgba(50, 205, 50, 1);
									background-size: 80rpx 80rpx;
								}

								.room-type-one {
									//选中
									background: rgba(178, 235, 255, 1);
								}

								.room-type-two {
									//报警
									background: rgba(232, 0, 0, 0.4);
									box-shadow: 0 0 10rpx 1rpx #E80000 inset;
								}

								.room-type-three {
									//选中报警
									background: rgba(178, 235, 255, 1);
									box-shadow: 0 0 10rpx 1rpx #E80000 inset;
								}
							}
						}
					}

				}

				.video-max-box {
					width: 710rpx;
					height: 780rpx;
					overflow-y: scroll;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding: 22rpx 30rpx 30rpx;
					box-sizing: border-box;
					margin-top: 20rpx;
					margin-bottom: 120rpx;

					video {
						width: 645rpx;
						height: 355rpx;
					}
				}

				.bottom-button-box {
					position: absolute;
					bottom: 20rpx;
					display: flex;
					width: 670rpx;
					margin: 20rpx;

					view {
						width: 335rpx;
						height: 100rpx;
						line-height: 100rpx;
						text-align: center;
						color: #fff;
						font-size: 28rpx;
					}

					.voice {
						border-top-left-radius: 50rpx;
						border-bottom-left-radius: 50rpx;
						background: #FF9C00;
					}

					.plan {
						background: #21A743;
					}

					.evacuate {
						border-top-right-radius: 50rpx;
						border-bottom-right-radius: 50rpx;
						background: #0183FA;
					}
				}
			}

			.live-button {
				width: 650rpx;
				height: 100rpx;
				line-height: 100rpx;
				text-align: center;
				font-size: 28rpx;
				margin: 50rpx auto 0;
				border-radius: 20rpx;
			}

			.live-color-a {
				color: #fff;
				background: #FF8686;
			}

			.live-color-b {
				color: #fff;
				background: #25C95B;
			}

			/* 语音广播 */
			.shade-max-big-box {
				height: 100%;
				width: 100%;
				position: fixed;
				display: flex;
				flex-direction: column;
				z-index: 10;
				background: rgba(0, 0, 0, 0.2);

				.null-box {
					flex: 1;
				}

				/* 语音广播-执行疏散 */
				.broadcast {
					width: 100%;
					// height: 532rpx;
					background: #FFFFFF;
					border-top-left-radius: 20rpx;
					border-top-right-radius: 20rpx;
					padding: 22rpx 30rpx 30rpx;
					box-sizing: border-box;
					margin-top: 20rpx;

					.broadcast_t {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 30rpx;

						>label {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 30rpx;
							margin-left: 16rpx;
						}
					}

					.trumpet-max-box {
						display: flex;
						justify-content: flex-start;
						margin-top: 22rpx;
						flex-wrap: wrap;

						.trumpet-for-box {
							display: inline-block;
							width: auto;
							height: 60rpx;
							line-height: 60rpx;
							font-size: 24rpx;
							text-align: center;
							cursor: pointer;
							overflow: hidden;
							border: 1rpx solid #E0E0E0;
							border-radius: 10rpx;
							color: #E0E0E0;
							display: flex;
							justify-content: center;
							margin-right: 20rpx;
							margin-bottom: 10rpx;
							padding: 0 12rpx;
							box-sizing: border-box;

							>img {
								width: 36rpx;
								height: 34rpx;
								margin: 12rpx 20rpx 0 25rpx;
							}
						}

						.trumpet-color-a {
							border: 1px solid #0183FA;
							color: #0183FA;
						}

						.trumpet-color-b {
							border: 1px solid #CCCCCC;
							color: #999;
						}
					}

					.broadcast_m {
						width: 100%;
						margin-bottom: 80rpx;

						.broadcast_m_t {
							width: 142rpx;
							height: 142rpx;
							margin: 30rpx 0 0 258rpx;
							position: relative;
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							line-height: 170rpx;
							text-align: center;

							>img {
								width: 142rpx;
								height: 142rpx;
								position: absolute;

							}

							>label {
								width: 100%;
								font-size: 24rpx;
								font-family: PingFang SC;
								font-weight: 500;
								color: #0183FA;
								line-height: 24rpx;
								display: inline-block;
								text-align: center;
								position: absolute;
								top: 76rpx;
							}

							/* 按下 */
							.press_color {
								color: #FFFFFF;
							}

							/* 松开 */
							.slip_color {
								color: #0183FA;
							}
						}

						.broadcast_m_t_back_a {
							background: url(@/pages_manage/images/icon_sskz_skfs.png);
							background-size: 100%;
							color: #FFFFFF;
						}

						.broadcast_m_t_back_b {
							background: url(@/pages_manage/images/icon_sskz_azsh.png);
							background-size: 100%;
							color: #0183FA;
						}

						.broadcast_m_b {
							font-size: 24rpx;
							font-family: PingFang SC;
							font-weight: 500;
							color: #999999;
							line-height: 24rpx;
							text-align: center;
							margin-top: 14rpx;
						}
					}

					/* 疏散按钮 */
					.evacuation-button-box {
						width: 650rpx;
						height: 100rpx;
						background: #0183FA;
						color: #fff;
						text-align center;
						line-height: 100rpx;
						font-size: 28rpx;
						margin: 88rpx auto 0;
						border-radius: 20rpx;
					}
				}
			}

		}

		.setUpEvacuation-bottom-button {
			width: 650rpx;
			height: 100rpx;
			background: #0183FA;
			color: #fff;
			text-align: center;
			line-height: 100rpx;
			font-size: 28rpx;
			margin: 50rpx auto;
			border-radius: 20rpx;
		}
	}
</style>