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>
          <view class="picker-min-box" style="background:#f5f5f5;">
            <view>{{collegeArray[deptIndex].name}}</view>
            <img src="@/images/icon_06.png">
          </view>
        </view>
        <view class="picker-max-box">
          <view class="picker-title-box">
            <view></view>
            <view>楼层楼栋</view>
          </view>
          <view class="picker-min-box" style="background:#f5f5f5;">
            <view>{{deptArray[deptIndex].name}}</view>
            <img src="@/images/icon_06.png">
          </view>
        </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>{{fjListIndex?fjListArray[fjListIndex].subjectName:'请选择实验室'}}</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">环境与气象研究院ECI公共实验室区</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="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">
              <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="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">
              <!-- <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,jndxGetStartList,getCameraByFloor,nanhuGetStartList,lineEvacuateTow,laboratoryInfo } from '@/api/index.js'
export default {
  data() {
    return {
      videoCover:uni.getStorageSync('videoCover'),
      //页面状态
      pageType:"",
      //学院
      collegeArray:[{name:"环境与气象研究院",id:"142"}],
      //楼栋
      deptArray:[{name:"ECI公共实验室区",id:"137"}],
      deptIndex:0,
      //实验室
      fjListArray:[],
      fjListIndex:"",
      //疏散方向
      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:{},
      broadcastType:false,
      videoHardwareNUM:[],//实验室和楼道摄像头编码

    }
  },
  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.getAppExitLine();
    this.lablayout();
    getApp().watch(this.getMqttLineData,'lineData');


  },
  methods: {
    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 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:5})
      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--;
              }
            }
          }
          console.log(list)


          this.nanhuGetStartList(list);
        }
      }
    },
    async nanhuGetStartList(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 jndxGetStartList(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.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
    },
    //录制
    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.subId = data.data.subId;
          this.subName = data.data.subName;
          this.evacuate();
        }else{
          this.pageType = 1;
          this.isEvacuate=true;
        }
      }

    },
    //实验室选择
    fjListChange(e){
      this.fjListIndex = e.detail.value;
      this.$set(this,'subName',this.fjListArray[this.fjListIndex].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
      this.itemData.subjectId=this.fjListArray[e.detail.value].subjectId
    },
    //疏散路线选择
    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.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 ={
        floorId:5,
        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;
    },
    //获取实验室布局
    async lablayout(){
      let self = this;
      const {data} = await lablayout(137)
      if(data.code == 200){
        for(let i=0;i<data.data.length;i++){
          if(data.data[i].id == 5){
            self.fjList = data.data[i].list;
            let newList = [];
            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);
          }
        }

      }
    },
  },
  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;
          .evacuation-map-big-box{
            height:285rpx;
            width:641rpx;
            background:url(../images/kuangdaMap/map4.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);
            }
            .evacuation-map-min-for-box:nth-child(1){
              margin:0rpx 80rpx 0 0;
              height:92rpx;
              width:92rpx;
            }
            .evacuation-map-min-for-box:nth-child(2){
              margin: 0rpx 0 0 0;
              height: 92rpx;
              width: 57rpx;
            }
            .evacuation-map-min-for-box:nth-child(3){
              margin: 0rpx 0 0 0;
              width:58rpx;
              height:92rpx;
            }
            .evacuation-map-min-for-box:nth-child(4){
              margin: 0rpx 0 0 0;
              width:58rpx;
              height:92rpx;
            }
            .evacuation-map-min-for-box:nth-child(5){
              margin: 0rpx 0 0 0;
              width:58rpx;
              height:92rpx;
            }
            .evacuation-map-min-for-box:nth-child(6){
              margin: 0rpx 0 0 0;
              width:58rpx;
              height:92rpx;
            }
            .evacuation-map-min-for-box:nth-child(7){
              margin: 0rpx 0 0 0;
              width:58rpx;
              height:92rpx;
            }
            .evacuation-map-min-for-box:nth-child(8){
              margin: 0rpx 50rpx 0 0;
              width:58rpx;
              height:92rpx;
            }
            /* 第二层 */
            .evacuation-map-min-for-box:nth-child(9){
              margin:0rpx 0rpx 0 0;
              width:52rpx;
              height:135rpx;
            }
            .evacuation-map-min-for-box:nth-child(10){
              margin:46rpx 0 0 0rpx;
              width:59rpx;
              height:135rpx;
            }
            .evacuation-map-min-for-box:nth-child(11){
              margin:46rpx 0 0 0rpx;
              width:63rpx;
              height:135rpx;
            }
            .evacuation-map-min-for-box:nth-child(12){
              margin:46rpx 0 0 0rpx;
              width:57rpx;
              height:135rpx;
            }
            .evacuation-map-min-for-box:nth-child(13){
              margin:46rpx 0 0 0rpx;
              width:58rpx;
              height:135rpx;
            }
            .evacuation-map-min-for-box:nth-child(14){
              margin:46rpx 0 0 0rpx;;
width:58rpx;
height:135rpx;
}
.evacuation-map-min-for-box:nth-child(15){
  margin:46rpx 0 0 0rpx;
  width:60rpx;
  height:135rpx;
}
.evacuation-map-min-for-box:nth-child(16){
  margin:46rpx 0 0 0rpx;
  width:57rpx;
  height:135rpx;
}
.evacuation-map-min-for-box:nth-child(17){
  margin:46rpx 0 0 0rpx;
  width:58rpx;
  height:135rpx;
}
.evacuation-map-min-for-box:nth-child(18){
  margin:46rpx 0 0 0rpx;
  width:58rpx;
  height:135rpx;
}





.map-min-img{
  position: absolute;
  width:34rpx;
  height:22rpx;
}
.map-min-img:nth-child(19){
  top: 113rpx;
  left: 70rpx;
}
.map-min-img:nth-child(20){
  top: 113rpx;
  left: 120rpx;
}
.map-min-img:nth-child(21){
  top: 113rpx;
  left:230rpx;
}
.map-min-img:nth-child(22){
  top: 113rpx;
  left:280rpx;
}
.map-min-img:nth-child(23){
  top: 113rpx;
  left:350rpx;
}
.map-min-img:nth-child(24){
  top: 113rpx;
  left:400rpx;
}
}
}

}
.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;
      flex-wrap: wrap;
      margin-top :22rpx;
      .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>