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="'label'" :value="value" :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"
						: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"
						:range-key="'subjectName'" :value="id" :range="fjListArray">
						<view class="picker-min-box">
							<view>{{subName?subName:'请选择实验室'}}</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="buttonChangeTwo"
						:range-key="'name'" :value="id" :range="buttonArray">
						<view class="picker-min-box">
							<view>{{buttonArrayIndex?buttonArray[buttonArrayIndex].name:'请选择疏散路径'}}</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="monito">
					<view class="monito_li">
						视频监控
						<view class="monito_li_r monito_li_r_text" @click="goVideo()">查看监控<img src="@/images/icon_04.png"></view>
					</view>
					<view class="monito_li" style="border:0;">
						选择疏散路径
						<view class="monito_li_r">
							<picker @change="buttonChange"
								:range-key="'name'" :value="id" :range="buttonArray">
								<view class="evacuation-title-button-box">
									<view :class="buttonArrayIndex?'colorB':'colorA'">{{buttonArrayIndex?buttonArray[buttonArrayIndex].name:'修改疏散路径'}}</view>
									<img src="@/images/icon_06.png">
								</view>
							</picker>
						</view>
					</view>
				</view>
				<!-- 滚动部分 -->
				<!-- <view class="evacuation-scroll-box">
					<view :class="videoIndex == index?'scroll-box-color':''"
					@click="scrollBoxClick(index)"
					v-for="(item,index) in videoList" :key="index">{{item.name}}</view>
				</view> -->
				<!-- 视频部分 -->
				<!-- <view class="evacuation-video-box">
					<video
						:class="index == videoIndex?'video-a':'video-b'"
						v-for="(item,index) in videoList" :key="index"
						:id="urlList.id" :src="item.url"
						poster="http://lab.sxitdlc.com:9300/statics/logo/logo.png"
						: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="roadmap">
					<view class="roadmap_t">
						<view class="monito_li_r_l">选择疏散路径</view>
						<view class="monito_li_r">
							<picker @change="buttonChange"
								:range-key="'name'" :value="id" :range="buttonArray">
								<view class="evacuation-title-button-box">
									<view :class="buttonArrayIndex?'colorB':'colorA'">{{buttonArrayIndex?buttonArray[buttonArrayIndex].name:'修改疏散路径'}}</view>
									<img src="@/images/icon_06.png">
								</view>
							</picker>
						</view>
						</view>
					<view class="evacuation-map-box">
						<view class="evacuation-map-big-box" :class="floorId==5?'map-1':(floorId==6?'map-2':(floorId==7?'map-3':''))">
							<view class="evacuation-map-min-for-box" :class="subId == item.subjectId?'evacuation-map-min-for-box-color':''"
							v-for="(item,index) in fjList" :key="index">{{item.room}}</view>
							<img class="map-min-img" src="@/images/Version2.3/icon_zjt.gif" v-show="lightList[0].type">
							<img class="map-min-img" src="@/images/Version2.3/icon_yjt.gif" v-show="lightList[1].type">
							<img class="map-min-img" src="@/images/Version2.3/icon_zjt.gif" v-show="lightList[2].type">
							<img class="map-min-img" src="@/images/Version2.3/icon_yjt.gif" v-show="lightList[3].type">
							<img class="map-min-img" src="@/images/Version2.3/icon_zjt.gif" v-show="lightList[4].type">
							<img class="map-min-img" src="@/images/Version2.3/icon_yjt.gif" v-show="lightList[5].type">
						</view>
					</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="http://lab.sxitdlc.com:9300/statics/logo/logo.png"
						: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="lineEvacuate" v-if="isEvacuate">执行疏散</view>
					<view @click="closireButton" 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">
							<!-- <img src="@/images/icon_sskz_azsh.png" v-if="!liveType">
							<img src="@/images/icon_sskz_skfs.png" v-if="liveType"> -->
							<!-- <label class="slip_color" v-if="!liveType">按住说话</label>
							<label class="press_color" v-if="liveType">松开发送</label> -->
							{{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="live-button" :class="liveType?'live-color-a':'live-color-b'"
				@longpress.stop="recordButton" @touchmove.stop="cancelButton"  @touchend.stop="sendButton">开始广播</view> -->

		</view>
	</view>
</template>

<script>
    import { config } from '@/api/request/config.js'
    import { lablayout,evacuate,closure,lineEvacuate,getRedis,getDeviceList,textParseUrlIps,
	getCameraByFloor,jinanGetStartList,nanhuGetStartList,wenchangGetStartList,lineEvacuateTow,treeselectByUser,getBuilding} from '@/api/index.js'
    export default {
        data() {
            return {
				//页面状态
				pageType:"",
				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:"",
			}
		},
        onLoad(option) {
			let self = this;
			//判断入口(执行疏散)
			if(option.item){
				let item = JSON.parse(decodeURIComponent(option.item));
				this.subId = item.subId;
				this.title = item.title;
				this.type = item.type;
				this.evacuateTwo();
			}else{
				//判断入口(首页按钮)
				this.getRedis();
			}
		},
		onShow(){
			this.treeselectByUser();
			this.getAppExitLine();
			this.lablayout();
			getApp().watch(this.getMqttLineData,'lineData');
			this.getCameraByFloor();
		},
		methods: {
			//根据账户信息查询学院楼栋数据
			async treeselectByUser(){
				const {data} = await treeselectByUser()
				let list = [];
				for(let i=0;i<data.data.length;i++){
					for(let o=0;o<data.data[i].children.length;o++){
						let obj = {
							label:data.data[i].label+'-'+data.data[i].children[o].label,
							value:data.data[i].children[o].id,
						}
						list.push(obj);
						if(i==0&&o==0){
							this.$set(this,'buildingId',obj.value);
							this.$set(this,'buildingName',obj.label);
						}
					}
				}
				this.$set(this,'buildingList',list);
				this.getBuilding(this.buildingId);
			},
			//根据账户信息查询学院楼栋数据
			async getBuilding(buildingId){
				const {data} = await getBuilding(buildingId)
				// 过滤了三楼
				let list = [];
				for(let i=0;i<data.data.length;i++){
					if(data.data[i].id != 7){
						list.push(data.data[i]);
					}
				}
				this.$set(this,'floorList',list);
				if(data.data[0]){
					this.$set(this,'floorName',data.data[0].name);
					this.$set(this,'floorId',data.data[0].id);
					this.lablayout(this.buildingId,this.floorId);
				}
			},
			//获取实验室布局
			async lablayout(buildingId,floorId){
				console.log('buildingId',buildingId)
				console.log('floorId',floorId)
				let self = this;
				const {data} = await lablayout(buildingId)
				if(data.code == 200){
				  for(let i=0;i<data.data.length;i++){
					if(data.data[i].id == floorId){
					  let newList = [];
					  self.fjList = data.data[i].list;
					  for(let o=0;o<data.data[i].list.length;o++){
						if(data.data[i].list[o].subjectId != -1){
							newList.push(data.data[i].list[o]);
						}
					  }
					  this.$set(this,'fjListArray',newList);
					  if(newList[0]){
						  console.log("newList",newList[0])
						this.$set(this,'subName',newList[0].subjectName);
						this.$set(this,'subId',newList[0].subjectId);
					  }
					}
				  }
				}
			},
			//学院楼栋选中
			buildingChange(e){
				this.$set(this,'buildingIndex',e.detail.value);
				this.$set(this,'buildingName',this.buildingList[e.detail.value].label);
				this.$set(this,'buildingId',this.buildingList[e.detail.value].value);
				this.getBuilding(this.buildingList[e.detail.value].value);
			},
			//楼层选中
			floorChange(e){
				this.$set(this,'floorIndex',e.detail.value);
				this.$set(this,'floorName',this.floorList[e.detail.value].name);
				this.$set(this,'floorId',this.floorList[e.detail.value].id);
				this.lablayout(this.buildingId,this.floorList[e.detail.value].id);
			},
			//实验室选择
			fjListChange(e){
				this.$set(this,'subName',this.fjListArray[e.detail.value].subjectName);
				this.$set(this,'subId',this.fjListArray[e.detail.value].subjectId);
				this.$set(this,'deptId',this.fjListArray[e.detail.value].deptId);
				this.itemData.name=this.fjListArray[e.detail.value].subjectName
				this.itemData.floorId=this.fjListArray[e.detail.value].floorId
				this.itemData.id=this.fjListArray[e.detail.value].id
			},
			getAppExitLine(){
				let list = [{type:"lab/exit/line"}];
				getApp().appMqttOn(1,list);
			},
			shadeTypeClick(){
				this.broadcastType = !this.broadcastType
			},
			async evacuateTwo(){
				const {data} = await lineEvacuateTow(this.subId,0)
				if(data.code == 200){
					if(data.data){
						this.pageType = 2;
						uni.showToast({
							title: '执行成功',
							icon:"none",
							mask:true,
							duration: 2000
						});
						this.initialization(data.data);
					}
				}
			},
			//跳转摄像头列表
			goVideo(){
			    uni.navigateTo({
			        url:'/pages_manage/workbench/laboratory/monitor?item='+encodeURIComponent(JSON.stringify(this.itemData))+'&deptId='+this.deptId
			    })
			},
			//获取楼层摄像头列表
			async getCameraByFloor(){
				const {data} = await getCameraByFloor({floorId:this.floorId})
				if(data.code == 200){
					if(data.data[0]){
						//this.nanhuGetStartList(data.data);
						 this.itemData.hardwareNUM=data.data.join(',')
						// this.startUrl(response.data);
					}
				}
			},
			async wenchangGetStartList(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,
				  // deviceIds:'440102004920000000011111,2C440102004920000000011112',
				};
				const {data} = await jinanGetStartList(obj)
				if(data.code == 200){
                    let list = [];
                    for(let i=0;i<data.data.length;i++){
                         let text = 'https://lab.sxitdlc.com/jinandaxue/stream/';
                        let url = data.data[i].result.body.data.fmp4;
                        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
			},
			//录制
			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(res.data.url);
							self.textParseUrlIps(config.base_url+ '/' +res.data.url);
							// self.newData.imgList.push(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:"",
						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);
				}
			},
			//获取当前疏散数据
			async getRedis(){
				let self = this;
				const {data} = await getRedis()
				if(data.code == 200){
					if(data.data){
						this.isEvacuate=false;
						this.deptId = data.data.deptId;
						this.buildingId = data.data.buildId;
						this.floorId = data.data.floorId;
						this.subId = data.data.subId;
						this.subName = data.data.subName;
						this.address = data.data.deptName+'-'+data.data.buildName+'-'+data.data.floorName
						// this.lablayout(data.data.buildId,data.data.floorId);
						this.evacuate();
					}else{
						this.pageType = 1;
						this.isEvacuate=true;
					}
				}

			},
			//疏散路线选择
			buttonChangeTwo(e){
				this.buttonArrayIndex = e.detail.value;
			},
			//执行疏散
			async evacuate(){
				console.log("执行疏散")
				const {data} = await evacuate(this.subId)
				if(data.code == 200){
					if(data.data){
						this.initialization(data.data);
					}
				}
			},
			//结束疏散
			closireButton(){
				let self = this;
				uni.showModal({
				    content: '确认结束疏散吗?',
				    cancelColor:"#999",
				    confirmColor:"#0183FA",
				    success: function (res) {
				        if (res.confirm) {
				            self.closure();
							this.isEvacuate=true;
				            console.log('用户点击确定');
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			async closure(){
				const {data} = await closure(this.subId)
					if(data.code == 200){
						uni.showToast({
							title: '操作成功',
							icon:"none",
							mask:true,
							duration: 2000
						});
						setTimeout(function(){
							uni.navigateBack();
						},2000);
					}
			},
			buttonChange(e){
				this.buttonArrayIndex = e.detail.value;
				this.lineEvacuate();
			},
			/* 确认 */
			confirmBtn(){
				if(!this.subId){
					uni.showToast({
						title: '请选择实验室',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				this.address = this.buildingName+''+this.floorName
				this.lineEvacuateTow();
			},
			/* 2.5获取疏散线路 */
			async lineEvacuateTow(){

				if(!this.buttonArrayIndex){
					uni.showToast({
						title: '请选择疏散路线',
						icon:"none",
						mask:true,
						duration: 2000
					});
					return
				}
				const {data} = await lineEvacuateTow(this.subId,this.buttonArray[this.buttonArrayIndex].id)

				if(data.code == 200){
					if(data.data){
						this.pageType = 2;
						uni.showToast({
							title: '执行成功',
							icon:"none",
							mask:true,
							duration: 2000
						});
						this.initialization(data.data);
					}
				}
			},
			//执行疏散
			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.isEvacuate=false;
						uni.showToast({
							title: '执行成功',
							icon:"none",
							mask:true,
							duration: 2000
						});
						this.initialization(data.data);
					}
				}
			},
			//灯初始化
			initialization(list){
				console.log('灯数据',list);
				let self = this;
				let newList = [
					{
						id:"5",
						type:false,
					},
					{
						id:"2",
						type:false,
					},
					{
						id:"3",
						type:false,
					},
					{
						id:"4",
						type:false,
					},
					{
						id:"1",
						type:false,
					},
					{
						id:"6",
						type:false,
					},
				];
				for(let i=0;i<list.length;i++){
					for(let o=0;o<newList.length;o++){
						if(list[i].lightId == newList[o].id){
							newList[o].type = true;
						}
					}
				}
				this.lightList = newList;
				console.log('灯数据改变',this.lightList);

				this.pageType = 2;
				this.$forceUpdate();
				this.getDeviceList();
			},
			async getDeviceList(){
				let obj ={
					floorId:this.floorId,
					page:1,
					pageSize:100,
				};
				const {data} = await getDeviceList(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;
			},
		},
        beforeDestroy(){
			//断开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;
						}
						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-left:22rpx;
					padding-top:34rpx;
					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;
						}
					}
				}
				/* 视频监控-选择疏散路线 */
				.monito{
					width: 710rpx;
					height: 161rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					padding :0 14rpx;
					box-sizing border-box;
					margin-top :20rpx;
					.monito_li{
						width: 680rpx;
						height: 80rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #333333;
						line-height: 80rpx;
						border-bottom: 1rpx solid #E0E0E0;
						display :flex;
						justify-content :space-between;
						.monito_li_r_text{
							font-size:28rpx!important;
							padding-right:37rpx;
						}
						.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-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{
							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;
						.map-1{
							background:url(../images/kuangdaMap/map1.png);
							.evacuation-map-min-for-box:nth-child(1){
								margin:4rpx 0 0 0;
								width:54rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(2){
								margin:4rpx 54rpx 0 0;
								width:54rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(3){
								margin:4rpx 54rpx 0 0;
								width:100rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(4){
								margin:4rpx 0 0 0;
								width:135rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(5){
								margin:4rpx 0 0 0;
								width:95rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(6){
								margin:4rpx 0 0 0;
								width:54rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(7){
								margin:78rpx 0 0 0;
								width:130rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(8){
								margin:78rpx 0 0 0;
								width:149rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(9){
								margin:78rpx 0 0 0;
								width:84rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(10){
								margin:78rpx 0 0 0;
								width:84rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(11){
								margin:78rpx 0 0 0;
								width:94rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(12){
								margin:78rpx 0 0 0;
								width:44rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(13){
								margin:78rpx 0 0 0;
								width:64rpx;
								height:102rpx;
							}
							.map-min-img:nth-child(14){
								top: 134rpx;
								left: 80rpx;
							}
							.map-min-img:nth-child(15){
								top: 134rpx;
								left: 160rpx;
							}
							.map-min-img:nth-child(16){
								top: 134rpx;
								left:280rpx;
							}
							.map-min-img:nth-child(17){
								top: 134rpx;
								left:340rpx;
							}
							.map-min-img:nth-child(18){
								top: 134rpx;
								left:460rpx;
							}
							.map-min-img:nth-child(19){
								top: 134rpx;
								left:540rpx;
							}
						}
						.map-2{
							background:url(../images/kuangdaMap/map2.png);
							.evacuation-map-min-for-box:nth-child(1){
								margin:4rpx 0 0 0;
								width:54rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(2){
								margin:4rpx 54rpx 0 0;
								width:54rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(3){
								margin:4rpx 54rpx 0 0;
								width:100rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(4){
								margin:4rpx 0 0 0;
								width:135rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(5){
								margin:4rpx 0 0 0;
								width:145rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(6){
								margin:4rpx 0 0 0;
								width:106rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(7){
								margin:78rpx 0 0 0;
								width:106rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(8){
								margin:78rpx 0 0 0;
								width:100rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(9){
								margin:78rpx 0 0 0;
								width:100rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(10){
								margin:78rpx 0 0 0;
								width:92rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(11){
								margin:78rpx 0 0 0;
								width:90rpx;
								height:102rpx;
							}
							.evacuation-map-min-for-box:nth-child(12){
								margin:78rpx 0 0 0;
								width:53rpx;
								height:102rpx;
							}
							.map-min-img:nth-child(13){
								top: 134rpx;
								left: 80rpx;
							}
							.map-min-img:nth-child(14){
								top: 134rpx;
								left: 160rpx;
							}
							.map-min-img:nth-child(15){
								top: 134rpx;
								left:280rpx;
							}
							.map-min-img:nth-child(16){
								top: 134rpx;
								left:340rpx;
							}
							.map-min-img:nth-child(17){
								top: 134rpx;
								left:460rpx;
							}
							.map-min-img:nth-child(18){
								top: 134rpx;
								left:540rpx;
							}
						}
						.map-3{
							background:url(../images/kuangdaMap/map3.png);
						}
						.evacuation-map-big-box{
							height:293rpx;
							width:644rpx;
							// background:url(../images/Version2.3/icon_bj_syspmtcy_jinan.png);
							background-size 100%
							margin:28rpx 13rpx ;
							position relative
							.evacuation-map-min-for-box{
								overflow: hidden;
								display: inline-block;
								line-height:70rpx;
								text-align: center;
								font-size:14rpx;
							}
							.evacuation-map-min-for-box-color{
								background: rgba(0,189,255,0.3);
							}
							.map-min-img{
								position: absolute;
								width:34rpx;
								height:22rpx;
							}
						}
					}

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