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" :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="'subjectName'" :value="id" :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">
              <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="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>
			<template v-if="!outfireData.online">
				<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 :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="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">
            
              {{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>
</template>

<script>
import { config } from '@/api/request/config.js'
import { lablayout,evacuate,closure,lineEvacuate,getRedis,getDeviceList,textParseUrlIps,laboratoryInfo,
  getCameraByFloor,lineEvacuateTow,treeselectByUser,getBuilding,getDeviceListBySub,GetStartList,firedeviceStatus,firedeviceStatusTiming} from '@/api/index.js'
export default {
  data() {
    return {
	   videoCover:uni.getStorageSync('videoCover'),
      //页面状态
      pageType:"2",
      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:{},//一键灭火
	  timer:'',
	  countdown:'5',
	  timer2: null,//倒计时
    }
  },
  onLoad(option) {
	   let self = this;
	  //一键灭火正式使用需要注销
	  this.itemData.subjectId=63
	  this.firedeviceStatus();
	  //定时请求一键灭火设备状态
	  this.timer=setInterval(self.firedeviceStatusTiming,5000)
	  this.sendCode()
    this.treeselectByUser(option);
    this.getAppExitLine();
    getApp().watch(this.getMqttLineData,'lineData');
   
    //判断入口(执行疏散)
  },
  onShow(){
  },
  onUnload(){
	  //销毁定时器
	  clearInterval(this.timer)
  },
  methods: {
    //根据账户信息查询学院楼栋数据
    async treeselectByUser(option){
      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);
        }
      }
      this.$set(this,'buildingList',list);
      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',"");
      // this.getBuilding(this.buildingId);
      if(option.item){
        let item = JSON.parse(decodeURIComponent(option.item));
        console.log("item",item)
        this.subId = item.subId;
        this.subName = item.subjectName;
        this.address = item.address
        this.buildingId = item.buildingId;
        this.deptId = item.buildingId;
        this.floorId = item.floorId;
        this.title = item.title;
        this.type = item.type;
        this.lablayout(this.buildingId,this.floorId);
        this.evacuateTwo();
        this.itemData.subjectId = item.subId;
        this.laboratoryInfo();
        this.firedeviceStatus();
      }else{
        //判断入口(首页按钮)
        this.getRedis();
      }
    },
	//一键灭火-查询设备状态
	async firedeviceStatus(){
		let _this=this;
	    const {data} = await firedeviceStatus(_this.itemData.subjectId)
		if(data.code==200){
			_this.outfireData=data.data
		}
	},
	//一键灭火-查询设备状态
	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
		}
	},
	//一键灭火按钮
	outfireFun(){
		uni.showModal({
			title:"是否确认执行一键灭火?",
		    content: '该操作存在风险，请您务必确认实验室内人员已安全撤离?',
		    cancelColor:"#999",
		    confirmColor:"#0183FA",
		    success: function (res) {
		        if (res.confirm) {
		            console.log('用户点击确定');
		        } else if (res.cancel) {
		            console.log('用户点击取消');
		        }
		    }
		});

	},
	 //倒计时
	sendCode(){
		this.loading();  //启动定时器
		this.timer2 = setInterval(() =>{
			 //创建定时器
			if(this.countdown === 1){
				this.clearTimer();  //关闭定时器
				
			}else{
				this.loading();
			}
		},1000);
	},
	loading(){
	  //启动定时器
	  this.countdown--;  //定时器减1
	},
	clearTimer(){
	   //清除定时器
	   clearInterval(this.timer);
	   this.timer = null;
	},
	
    //根据账户信息查询学院楼栋数据
    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);
      this.$set(this,'floorName',"");
      this.$set(this,'floorId',"");
      this.$set(this,'fjListArray',[]);
      this.$set(this,'subName',"");
      this.$set(this,'subId',"");
    },
    //获取实验室布局
    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);
          }
        }
      }
    },
    //学院楼栋选中
    buildingChange(e){
      this.$set(this,'buildingName',this.buildingList[e.detail.value].label);
      this.$set(this,'buildingId',this.buildingList[e.detail.value].value);
      this.$set(this,'deptId',this.buildingList[e.detail.value].value);
      this.getBuilding(this.buildingList[e.detail.value].value);
    },
    //楼层选中
    floorChange(e){
      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.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
      this.itemData.subjectId=this.fjListArray[e.detail.value].subjectId
    },
    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);
        }
      }
    },
    //获取实验室摄像头
    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);
      }
    },
    //获取当前疏散数据
    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(this.buildingId,this.floorId);
          this.evacuate();
          this.itemData.subjectId = data.data.subId;
          this.laboratoryInfo();
          this.firedeviceStatus();
        }else{
          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();
      this.laboratoryInfo();
    },
    /* 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 ={
        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;
    },
  },
  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;
            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{
            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>