FE-V2-XCX/pages/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'" :value="id" :range="buildingList">
						<view class="picker-min-box">
							<view>{{buildingName?buildingName:'请选择学院楼栋'}}</view>
							<img src="@/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'" :value="id"
						:range="floorList">
						<view class="picker-min-box">
							<view>{{floorName?floorName:'请选择楼层'}}</view>
							<img src="@/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'" :value="subId"
						:range="fjListArray">
						<view class="picker-min-box">
							<view>{{subName?subName:'请选择实验室'}}</view>
							<img src="@/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-name-box">{{subName}}</view>
					<view class="site"><img src="@/images/icon_14.png">{{address}}</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 && checkSubId ==item.subId ? 'room-type-one':(
									item.policeType && checkSubId !=item.subId ? 'room-type-two':(
									item.policeType && checkSubId ==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="@/images/evacuation3_2/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="outfire" v-if='outfireData.isexist'>
					<view class="outfire_li" v-if="outfireData.online">
						<img src="@/images/icon_sy_wt.png">
						<text style="color: #FF7B1A;">设备已离线，请及时处理。</text>
					</view>
					<view class="outfire_li" v-if="outfireData.outfireing">
						<img src="@/images/icon_sy_mhwc.png">
						<text style="color: #FF2333;">灭火中，灭火程序将于<text>{{conductCountdown}}</text>秒后结束</text>
					</view>
					<view class="outfire_li" v-if="outfireEnd">
						<img src="@/images/icon_sy_mhwc.png">
						<text style="color: #FF2333;">灭火完成，请您及时补充灭火设备耗材</text>
					</view>
					<template v-if="!outfireData.online && !outfireData.outfireing && !outfireEnd">
						<view class="outfire_li">
							<img v-if='!outfireData.smoke' src="@/images/icon_yw_zc.png">
							<img v-if='outfireData.smoke' src="@/images/icon_yw_yc.png">
							<text
								:class="outfireData.smoke?'abnormal':'normal'">{{outfireData.smoke?'有烟雾':'无烟雾'}}</text>
						</view>
						<view class="outfire_li">
							<img v-if='!outfireData.temperature' src="@/images/icon_wd_zc.png">
							<img v-if='outfireData.temperature' src="@/images/icon_wd_yc.png">
							<text
								:class="outfireData.temperature?'abnormal':'normal'">{{outfireData.temperature?'温度异常':'温度正常'}}</text>
						</view>
						<view class="outfire_li">
							<img v-if='!outfireData.fire' src="@/images/icon_hy_zc.png">
							<img v-if='outfireData.fire' src="@/images/icon_hy_yc.png">
							<text :class="outfireData.fire?'abnormal':'normal'">{{outfireData.fire?'发现火焰':'无火焰'}}</text>
						</view>
					</template>
					<view v-if="!outfireData.online && !outfireData.outfireing && !outfireEnd"
						:class="!outfireData.online?'outfire_yes_btn':'outfire_no_btn'" @click="outfireFun()">一键灭火
					</view>
				</view>
				<!-- 视频部分 -->
				<view class="video-max-box" v-if="urlList[0]">
					<video v-for="(item,index) in urlList" :key="index" :id="urlList.id" :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 @click="shadeTypeClick()">语音广播</view>
					<view @click="evacuationButton(1)" v-if="isEvacuate">执行疏散</view>
					<view @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="@/images/icon_sskz_zc.png" v-if="!item.type">
							<img src="@/images/icon_sskz_xz.png" v-if="item.type">
							{{item.name}}
						</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 class="shade-outfire" v-if="dialogVisible">
				<view class="null-box" @click="dialogOutfire()"></view>
				<view class="shade-outfire-n">
					<img class="shade-outfire-n-t" src="@/images/icon_mh.png" />
					<view class="shade-outfire-n-m">一键灭火启动中，倒计时<text>{{countdown}}</text>秒</view>
					<view class="shade-outfire-n-b" @click="cancelOutfire()">放弃一键灭火</view>
				</view>
			</view>
		</view>
		<view></view>
	</view>
</template>

<script>
	import $mqtt from '@/utils/mqtt.min.js';
	import {
		config
	} from '@/api/request/config.js'
	import {
		lablayout,
		evacuate,
		closure,
		lineEvacuate,
		getRedis,
		getDeviceList,
		textParseUrlIps,
		laboratoryInfo,
		getCameraByFloor,
		lineEvacuateTow,
		treeselectByUser,
		getBuilding,
		getDeviceListBySub,
		GetStartList,
		firedeviceStatus,
		firedeviceStatusTiming,
		firedeviceStart
	} from '@/api/index.js'
	import {
		getBuildOrFloorList,
		getFloorData,
		getRedisEvacuation,
		openLight,
		closeLight,
		executeEvacuation,
		endEvacuation
	} from '@/api/index.js'
	export default {
		data() {
			return {
				videoCover: uni.getStorageSync('videoCover'),
				//页面状态
				pageType: "1",
				deptIndex: 0,
				//院系楼栋数据
				buildingList: [],
				buildingName: "",
				buildingId: "",
				//楼层数据
				floorList: [],
				floorName: "",
				floorId: "",
				//实验室
				fjListArray: [],
				//疏散方向
				buttonArray: [{
						name: "向左疏散",
						id: "1"
					},
					{
						name: "向右疏散",
						id: "2"
					},
					{
						name: "两侧疏散",
						id: "0"
					},
				],
				buttonArrayIndex: "2",
				//视频数据
				urlList: [],
				//布局数据
				fjList: [],
				lightList: [{
						id: "5",
						type: false,
					},
					{
						id: "2",
						type: false,
					},
					{
						id: "3",
						type: false,
					},
					{
						id: "4",
						type: false,
					},
					{
						id: "1",
						type: false,
					},
					{
						id: "6",
						type: false,
					},
				],
				//接收参数
				subId: "",
				subName: "",
				title: "",
				type: "",
				//喇叭数据
				trumpetList: [],
				//广播相关
				liveType: false,
				sendLock: true, //发送锁，当为true时上锁，false时解锁发送
				recorderManager: wx.getRecorderManager(),
				isEvacuate: true, //疏散按钮控制，当为true时候执行疏散
				//滑动记录
				startPoint: {},
				//摄像头信息
				deptId: '',
				itemData: {
					hardwareNUM: '',
					name: '',
				},
				broadcastType: false,
				address: "",
				videoHardwareNUM: [], //实验室和楼道摄像头编码
				outfireData: {}, //一键灭火

				countdown: '', //倒计时
				timer2: null, //倒计时
				dialogVisible: false, //一键灭火弹出层

				conductCountdown: '',
				timer3: null, //倒计时
				outfireEnd: false, //灭火结束状态
				//新布局地图相关数据
				zoomData: null,
				mapType:false,
				mapList: [],
				mapWidth: null, //40边框距离
				mapHeight: null, //40边框距离
				//新MQTT
				floorClient: {},
				evacuationTopic: "lab/newexit/line", //疏散
			}
		},
		onLoad(option) {
			this.treeselectByUser();
      //一键灭火正式使用需要注销
      this.itemData.subjectId=85
      this.firedeviceStatus();
		},
		onShow() {

		},
		onUnload() {

		},
		methods: {
			//全屏疏散页面
			goAllPage() {
				let obj = {
					buildingId:this.buildingId,
					floorId:this.floorId
				}
				uni.navigateTo({
					url: '/pages/emergencyEvacuationBigFullScreen?item='+encodeURIComponent(JSON.stringify(obj)),
				});
			},
			//一键灭火-查询设备状态
			async firedeviceStatus() {
				let _this = this;

				const {
					data
				} = await firedeviceStatus(_this.itemData.subjectId)
				if (data.code == 200) {
					_this.outfireData = data.data
					//灭火进行中倒计时
					if (_this.conductCountdown == 30) {
						_this.conductCountdown += data.data.fireDevice.deviceCountDown
						_this.sendCode2()
					}

				}
			},
			//一键灭火-查询设备状态
			async firedeviceStatusTiming() {
				let _this = this;
				const {
					data
				} = await firedeviceStatusTiming(_this.outfireData.fireDevice.deviceCode)
				if (data.code == 200) {
					_this.outfireData.fire = data.data.fire
					_this.outfireData.online = data.data.online
					_this.outfireData.smoke = data.data.smoke
					_this.outfireData.temperature = data.data.temperature
				}
			},
			//启动灭火设备
			async firedeviceStart() {
				let _this = this;
				const {
					data
				} = await firedeviceStart(_this.itemData.subjectId)
				if (data.code == 200) {
					if (data.data.flg) {
						_this.conductCountdown = 30;
						_this.firedeviceStatus();

					} else {
						wx.showToast({
							title: '灭火失败!',
							icon: "none",
							duration: 6000
						});
					}
				}
			},

			//一键灭火按钮
			outfireFun() {
				let _this = this;
				uni.showModal({
					title: "是否确认执行一键灭火?",
					content: '该操作存在风险，请您务必确认实验室内人员已安全撤离?',
					cancelColor: "#999",
					confirmColor: "#0183FA",
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							_this.dialogVisible = true;
							_this.countdown = 6;
							_this.sendCode() //倒计时
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			//一键灭火弹出层关闭
			dialogOutfire() {
				this.dialogVisible = !this.dialogVisible
				this.clearTimer(); //关闭定时器
			},
			//取消一键灭火
			cancelOutfire() {
				this.dialogVisible = false;
				this.clearTimer(); //关闭定时器
			},
			//倒计时
			sendCode() {
				let _this = this;
				_this.loading(); //启动定时器
				_this.timer2 = setInterval(() => {
					//创建定时器
					if (_this.countdown === 1) {
						_this.clearTimer(); //关闭定时器
						_this.firedeviceStart(); //启动灭火设备

					} else {
						_this.loading();
					}
				}, 1000);
			},
			loading() {
				//启动定时器
				this.countdown--; //定时器减1
			},
			clearTimer() {
				//清除定时器
				clearInterval(this.timer2);
				this.timer2 = null;
				this.dialogVisible = false;
				this.countdown = 6;
			},
			//进行中倒计时
			sendCode2() {
				let _this = this;
				_this.loading2(); //启动定时器
				_this.timer3 = setInterval(() => {
					//创建定时器
					if (_this.conductCountdown === 1) {
						_this.clearTimer2(); //关闭定时器
						_this.outfireEnd = true; //灭火倒计时结束
					} else {
						_this.loading2();
					}
				}, 1000);
			},
			loading2() {
				//启动定时器
				this.conductCountdown--; //定时器减1
			},
			clearTimer2() {
				//清除定时器
				clearInterval(this.timer3);
				this.timer3 = null;
			},
			//获取楼栋数据
			async treeselectByUser(option) {
				const { data } = await getBuildOrFloorList({type:2,parentId:''})
				this.$set(this, 'buildingList', data.data);
				this.$set(this, 'buildingName', "");
				this.$set(this, 'buildingId', "");
				this.$set(this, 'deptId', "");
				this.$set(this, 'floorList', []);
				this.$set(this, 'floorName', "");
				this.$set(this, 'floorId', "");
				this.$set(this, 'fjListArray', []);
				this.$set(this, 'subName', "");
				this.$set(this, 'subId', "");
			},
			//获取楼层数据
			async getBuilding(buildingId) {
				const { data } = await getBuildOrFloorList({type:3,parentId: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', "");
			},
			//楼栋选中
			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.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.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);
			},
			getAppExitLine() {
				let list = [{
					type: "lab/exit/line"
				}, {
					type: "lab/fireDevice/Warn/"
				}];
				getApp().appMqttOn(1, list);
			},
			getAppOutfire() {
				// let list = [{type:"lab/fireDevice/Warn/"}]
				let list = [{
					type: "lab/function/data"
				}];
				getApp().appMqttOn(1, list);
			},
			shadeTypeClick() {
				this.broadcastType = !this.broadcastType
			},
			//获取实验室摄像头
			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) {
				let self = this;
				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].result.body.data.hls;
						url = url.split("rtp/");
						let newUrl = text + 'rtp/' + url[1];
						let obj = {
							name: "楼道监控" + (i + 1),
							id: data.data[i].result.body.data.deviceID,
							url: newUrl,
						}
						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 + '/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.textParseUrlIps(config.base_url + '/' + res.data.url);
						} else {
							uni.showToast({
								title: res.msg,
								icon: "none",
								mask: true,
								duration: 2000
							});
						}
					},
					fail: err => {
						uni.hideLoading()
					},
					complete: () => {}
				});
			},
			//发送语音
			async textParseUrlIps(text) {
				let self = this;
				let newList = [];
				for (let i = 0; i < self.trumpetList.length; i++) {
					if (self.trumpetList[i].type) {
						let obj = {
							sn: self.trumpetList[i].deviceSn,
							port: self.trumpetList[i].port,
							deviceIp: self.trumpetList[i].deviceIp,
							type: "",
							name: "",
							speed: "",
							params: {
								tid: "",
								vol: self.trumpetList[i].deviceVol,
								urls: []
							}
						};
						newList.push(obj);
					}
				}
				const {
					data
				} = await textParseUrlIps(newList, text)
				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,'address',this.buildingName + '' + this.floorName);
				this.$set(this,'pageType',2);
				this.getDeviceList();
				this.laboratoryInfo();
				this.offMQTT('on');
			},
			//执行疏散
			async lineEvacuate() {
				if (!this.subId) {
					uni.showToast({
						title: '请选择实验室',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				if (!this.buttonArrayIndex) {
					uni.showToast({
						title: '请选择疏散路线',
						icon: "none",
						mask: true,
						duration: 2000
					});
					return
				}
				const {
					data
				} = await lineEvacuate(this.subId, this.buttonArray[this.buttonArrayIndex].id)

				if (data.code == 200) {
					if (data.data) {
						console.log('执行疏散')
						this.initialization(data.data);
					}
				}
			},
			//获取喇叭列表
			async getDeviceList() {
				let obj = {
					subId: this.itemData.subjectId,
					floorId: this.floorId,
					page: 1,
					pageSize: 100,
				};
				const {
					data
				} = await getDeviceListBySub(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 getFloorData(this.floorId)
				console.log('data', data)
				if (data.code == 200) {
					if (data.data.buildFloorLayoutVoList[0]) {
						let list = JSON.parse(data.data.labExitLineVertex.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.buildFloorLayoutVoList.length; o++) {
									if (list[i].key == data.data.buildFloorLayoutVoList[o].pointName) {
										list[i].id = data.data.buildFloorLayoutVoList[o].id;
										list[i].buildId = data.data.buildFloorLayoutVoList[o].buildId;
										list[i].floorId = data.data.buildFloorLayoutVoList[o].floorId;
										list[i].roomType = data.data.buildFloorLayoutVoList[o].roomType;
										list[i].roomName = data.data.buildFloorLayoutVoList[o].roomName;
										list[i].roomNum = data.data.buildFloorLayoutVoList[o].roomNum;
										list[i].subName = data.data.buildFloorLayoutVoList[o].subName;
										list[i].subId = data.data.buildFloorLayoutVoList[o].subId;
										list[i].online = data.data.buildFloorLayoutVoList[o].online;
										list[i].loginAdmin = data.data.buildFloorLayoutVoList[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.buildFloorLayoutVoList.length; o++) {
							if(data.data.buildFloorLayoutVoList[o].loginAdmin){
								subList.push(data.data.buildFloorLayoutVoList[o])
							}
						}
						this.$set(this,'fjListArray', subList);
						this.$set(this, 'mapList', JSON.parse(JSON.stringify(list)));
						// this.$set(this, 'shadeMapList', JSON.parse(JSON.stringify(list)));
						this.$set(this, 'mapType', true);
						setTimeout(function() {
							self.getRedisEvacuation();
						}, 500);

					}
				}
			},
			//获取疏散数据
			async getRedisEvacuation() {
				let self = this;
				let obj = {
					buildId: this.buildingId,
					floorId: this.floorId,
				}
				const {
					data
				} = await getRedisEvacuation(obj)
				if (data.code == 200) {
					if (data.data.doorPointNames) {
						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++
											}
										}
									}
									console.log('灯',num)
									self.mapList[o].lightList[x].openType = num != 0;
								}
							}
						}
						for (let i = 0; i < data.data.doorPointNames.length; i++) {
							for (let o = 0; o < self.mapList.length; o++) {
								if (self.mapList[o].type == 3) {
									if (data.data.doorPointNames[i] == self.mapList[o].key) {
										self.mapList[o].roomCheckType = true;
									}
								}
							}
						}
						this.$forceUpdate();
					}
				};
			},
			//缩放计算
			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);
				//缩放判断
				if(maxHeight>height&&maxWidth>width){
				  if((maxHeight-height)>(maxWidth-width)){
					zoomData = height/maxHeight;
					this.$set(this,'zoomData',height/maxHeight);
				  }else{
					zoomData = width / maxWidth;
					this.$set(this,'zoomData',width / maxWidth);
				  }
				}else if(maxHeight<height&&maxWidth<width){
				  if((height-maxHeight)>(width-maxWidth)){
					zoomData = width / maxWidth;
					this.$set(this,'zoomData',width / maxWidth);
				  }else{
					zoomData = height / maxHeight;
					this.$set(this,'zoomData',height / maxHeight);
				  }
				}else if(maxHeight<height&&maxWidth>width){
				  zoomData = width / maxWidth;
				  this.$set(this,'zoomData',width / maxWidth);
				}else if(maxHeight>height&&maxWidth<width){
				  zoomData = height / maxHeight;
				  this.$set(this,'zoomData',height / maxHeight);
				}
			},
			//结束疏散
			evacuationButton() {
				let self = this;
				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 executeEvacuation(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 endEvacuation(obj)
				console.log('data', data)
				if (data.code == 200) {
					this.$set(this,'isEvacuate',true);
					uni.showToast({
						title: '执行成功',
						icon: "none",
						mask: true,
						duration: 2000
					});
				}
			},
			/*MQTT*/
			//订阅
			onMQTT() {
				let self = this;
				const mqttOptions = {
					keepalive: 30,
					clean: true, //保留会话
					connectTimeout: 600000, // 超时时间
					reconnectPeriod: 5000, // 重连间隔
					clientId: uni.getStorageSync('token') + 'lab/function/data',
					username: uni.getStorageSync('mqttUrl'),
					password: uni.getStorageSync('mqttUrl'),
				}
				const connectUrl = uni.getStorageSync('mqttUrl');
				this.floorClient = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
				this.floorClient.on('connect', () => {
					this.floorClient.subscribe(this.evacuationTopic + this.floorId, (err) => {
						if (!err) {
							console.log("疏散-订阅成功", )
							this.getBuildingData();
						}
					});
				});
				// 自动重连
				this.floorClient.on('reconnect', (msg) => {
					console.log('自动重连-reconnect-1', msg)
				});
				// 错误
				this.floorClient.on('error', () => {
					console.log('错误-error-1')
				});
				// 断开
				this.floorClient.on('end', () => {
					console.log('断开-end-1')
				});
				// 掉线
				this.floorClient.on('offline', (msg) => {
					console.log('掉线-offline-1', msg)
				});
				// 收到消息
				this.floorClient.on('message', (topic, message) => {
					let data = JSON.parse(message)
					if (data) {
						if (topic == (this.evacuationTopic + this.floorId)) {
							console.log('疏散通知', data)
							//疏散消息
							if (data.data == 'FLOOR_EXITLINE') {
								this.getRedisEvacuation();
							} else if (data.data == 'FLOOR_OVER_EXITLINE') {
								uni.showToast({
									title: '疏散已结束',
									icon: "none",
									mask: true,
									duration: 2000
								});
								setTimeout(function() {
									self.getBuildingData();
								}, 2000);
							}
						}
					}
				});
				// 全局监听是否有关闭mqtt的消息的事件
				uni.$on('closeMqtt', () => {
					this.floorClient.end(true); // 主动断开连接
				})
			},
			//关闭MQTT连接
			offMQTT(type) {
				if (this.floorClient.unsubscribe) {
					this.floorClient.unsubscribe(this.evacuationTopic + this.floorId, error => {
						if (error) {
							console.log('疏散连接-关闭错误', error)
						}
					});
					this.floorClient.end(true);
					this.$set(this, 'floorClient', {});
				}
				if (type) {
					this.onMQTT();
				}
			},
		},
		beforeDestroy() {
			this.offMQTT();
			//断开mqtt连接
			// getApp().offMQTT();
			//删除应急疏散监听
			// getApp().deleteLineData();
		}
	}
</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;

					.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;
						}
					}
				}

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

					.outfire_li {
						display: flex;
						justify-content: flex-start;
						align-items: center;

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

						.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("../images/evacuation3_2/icon_sysbjt_m.png") !important;
											background-size: 100% !important;
											transform: rotate(180deg);
										}

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

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

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

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

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

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

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

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

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

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

										.lightRightOff {
											background: url("../images/evacuation3_2//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("../images/evacuation3_2/icon_yjtd.png") center center no-repeat #006400;
									background-size: 60rpx 60rpx;
								}

								.for-map-box-two-check {
									background: url("../images/evacuation3_2/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;
					}

					view:nth-child(1) {
						border-top-left-radius: 50rpx;
						border-bottom-left-radius: 50rpx;
						background: #FF9C00;
					}

					view:nth-child(2) {
						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: 200rpx;
							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;

							>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%;

						.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(@/images/icon_sskz_skfs.png);
							background-size: 100%;
							color: #FFFFFF;
						}

						.broadcast_m_t_back_b {
							background: url(@/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;
					}
				}
			}

			/* 一键灭火 */
			.shade-outfire {
				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;
				}

				/* 语音广播-执行疏散 */
				.shade-outfire-n {
					width: 625rpx;
					height: 450rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					position: absolute;
					top: 370rpx;
					left: 62rpx;

					.shade-outfire-n-t {
						width: 172rpx;
						height: 172rpx;
						margin: 38rpx 0 0 226rpx;
					}

					.shade-outfire-n-m {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #E30000;
						line-height: 84rpx;
						text-align: center;
						border-bottom: 1px solid #E0E0E0;

						>text {
							font-size: 40rpx;
						}
					}

					.shade-outfire-n-b {
						width: 402rpx;
						height: 82rpx;
						background: #FFFFFF;
						border: 2rpx solid #0183FA;
						border-radius: 10rpx;
						font-size: 28rpx;
						line-height: 82rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #0183FA;
						text-align: center;
						margin: 30rpx 0 0 112rpx;
					}
				}
			}
		}

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