FE-V2-XCX/pages/emergencyEvacuationBig.vue

<!-- 应急疏散 -->
<template>
  <view id="emergencyEvacuationBig">
    <view class="setUpEvacuation" v-if="pageType == 1">
      <view class="evacuation-max-box">
        <view class="picker-max-box">
          <view class="picker-title-box">
            <view></view>
            <view>学院楼栋</view>
          </view>
          <picker @change="buildingChange" :range-key="'name'" :value="id" :range="buildingList">
            <view class="picker-min-box">
              <view>{{buildingName?buildingName:'请选择学院楼栋'}}</view>
              <img src="@/images/icon_06.png">
            </view>
          </picker>
        </view>
        <view class="picker-max-box">
          <view class="picker-title-box">
            <view></view>
            <view>楼层</view>
          </view>
          <picker @change="floorChange" :disabled="!buildingId" :range-key="'name'" :value="id"
                  :range="floorList">
            <view class="picker-min-box">
              <view>{{floorName?floorName:'请选择楼层'}}</view>
              <img src="@/images/icon_06.png">
            </view>
          </picker>
        </view>
        <view class="picker-max-box">
          <view class="picker-title-box">
            <view></view>
            <view>实验室</view>
          </view>
          <picker @change="fjListChange" :disabled="!floorId" :range-key="'subName'" :value="subId"
                  :range="fjListArray">
            <view class="picker-min-box">
              <view>{{subName?subName:'请选择实验室'}}</view>
              <img src="@/images/icon_06.png">
            </view>
          </picker>
        </view>
      </view>
      <view class="setUpEvacuation-bottom-button" @click="confirmBtn">确认</view>
    </view>
    <view class="implementEvacuation" v-if="pageType == 2">
      <view class="evacuation-max-box">
        <!-- 头部 -->
        <view class="evacuation-title-box">
          <view class="evacuation-title-left">
            <view class="evacuation-title-name-box">{{checkSubName}}</view>
            <view class="site"><img src="@/images/icon_14.png">{{address}}</view>
          </view>
          <view class="evacuation-title-right" @click="backButton()">选择房间</view>
        </view>
        <!-- 地图部分 -->
        <view class="roadmap">
          <view class="roadmap_t">
            <view class="monito_li_r_l"></view>
            <view class="monito_li_r_r_button" @click="goAllPage">全屏</view>
          </view>
          <view class="evacuation-map-box">
            <view class="emergencyEvacuationBigFullScreen-page" v-if="mapType"
                  :style="'width:'+mapWidth+'rpx;height:'+mapHeight+'rpx;transform: scale('+zoomData+');margin-top:-'+mapHeight/2+'rpx;margin-left:-'+mapWidth/2+'rpx;'">
              <view class="map-max-box" :style="'width:'+mapWidth+'rpx;height:'+mapHeight+'rpx;'">
                <view class="map-max-for-box for-map-box" v-if="item.type == 1"
                      v-for="(item,index) in mapList":key="index"
                      :class="!item.policeType && checkSubId ==item.subId ? 'room-type-one':(
									item.policeType && checkSubId !=item.subId ? 'room-type-two':(
									item.policeType && checkSubId ==item.subId ? 'room-type-three':(
									!item.loginAdmin ? 'room-type-noe':'')))"
                      :style="'top:'+item.y+'rpx;left:'+item.x+'rpx;width:'+(item.w-4)+'rpx;height:'+(item.h-4)+'rpx;'">
                  <view class="map-max-for-min-box">
                    <view class="map-for-name-p" :style="'margin-top:'+((item.h/2)-20)+'rpx;'">
                      {{item.roomType == '-99'?item.roomName:item.subName}}</view>
                    <view class="map-for-num-p">({{item.roomNum}})</view>
                    <view class="position-box" src="@/images/evacuation3_2/icon_sysbjt_m.png"
                          :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
                          v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
                          :style="'top:'+minItem.y+'rpx;left:'+minItem.x+'rpx;width:'+minItem.w+'rpx;height:'+minItem.h+'rpx;'">
                    </view>
                  </view>
                </view>
                <view class="map-max-for-box for-map-box-one" v-if="item.type == 2" v-for="(item,index) in mapList"
                      :key="index" :style="'top:'+item.y+'rpx;left:'+item.x+'rpx;width:'+item.w+'rpx;height:'+item.h+'rpx;'">
                  <view class="map-max-for-min-box">
                    <view class="position-box"
                          :class="minItem.state=='1'&&minItem.openType?'lightTopOn':(minItem.state=='1'&&!minItem.openType?'lightTopOff':
									(minItem.state=='2'&&minItem.openType?'lightBottomOn':(minItem.state=='2'&&!minItem.openType?'lightBottomOff':
									(minItem.state=='3'&&minItem.openType?'lightLeftOn':(minItem.state=='3'&&!minItem.openType?'lightLeftOff':
									(minItem.state=='4'&&minItem.openType?'lightRightOn':(minItem.state=='4'&&!minItem.openType?'lightRightOff':'')))))))"
                          v-for="(minItem,minIndex) in item.lightList" :key="minIndex"
                          :style="'top:'+minItem.y+'rpx;left:'+minItem.x+'rpx;width:'+minItem.w+'rpx;height:'+minItem.h+'rpx;'">
                    </view>
                  </view>
                </view>
                <view class="map-max-for-box for-map-box-two" v-if="item.type == 3" v-for="(item,index) in mapList"
                      :key="index" :class="item.roomCheckType?'for-map-box-two-check':''"
                      :style="'top:'+item.y+'rpx;left:'+item.x+'rpx;width:'+item.w+'rpx;height:'+item.h+'rpx;'">
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 一键灭火 -->
        <view class="outfire" v-if='fireType'>
          <view class="outfire_li" v-if="!fireListType">
            <img src="@/images/icon_sy_wt.png">
            <text style="color: #FF7B1A;">设备已离线，请及时处理。</text>
          </view>
          <view class="outfire_li" v-if="fireStartType">
            <img src="@/images/icon_sy_mhwc.png">
            <text style="color: #FF2333;">灭火中，灭火程序将于<text>{{conductCountdown}}</text>秒后结束</text>
          </view>
          <view class="outfire_li" v-if="outfireEnd">
            <img src="@/images/icon_sy_mhwc.png">
            <text style="color: #FF2333;">灭火完成，请您及时补充灭火设备耗材</text>
          </view>
          <template v-if="fireListType && !fireStartType && !outfireEnd">
            <view class="outfire_li">
              <img v-if='!outfireData.smoke' src="@/images/icon_yw_zc.png">
              <img v-if='outfireData.smoke' src="@/images/icon_yw_yc.png">
              <text
                  :class="outfireData.smoke?'abnormal':'normal'">{{outfireData.smoke?'有烟雾':'无烟雾'}}</text>
            </view>
            <view class="outfire_li">
              <img v-if='!outfireData.temperature' src="@/images/icon_wd_zc.png">
              <img v-if='outfireData.temperature' src="@/images/icon_wd_yc.png">
              <text
                  :class="outfireData.temperature?'abnormal':'normal'">{{outfireData.temperature?'温度异常':'温度正常'}}</text>
            </view>
            <view class="outfire_li">
              <img v-if='!outfireData.fire' src="@/images/icon_hy_zc.png">
              <img v-if='outfireData.fire' src="@/images/icon_hy_yc.png">
              <text :class="outfireData.fire?'abnormal':'normal'">{{outfireData.fire?'发现火焰':'无火焰'}}</text>
            </view>
          </template>
          <view v-if="fireListType && !fireStartType && !outfireEnd"
                :class="fireListType?'outfire_yes_btn':'outfire_no_btn'" @click="outfireFun()">一键灭火
          </view>
        </view>
        <!-- 视频部分 -->
        <view class="video-max-box" v-if="urlList[0]">
          <video v-for="(item,index) in urlList" :key="index" :id="urlList.id" :src="item.url"
                 :poster="videoCover" :custom-cache='false' :autoplay="true" :controls="true"
                 :enable-danmu="false" :muted="true" :show-fullscreen-btn="true" :show-center-play-btn="false"
                 :show-play-btn="false" @error="videoErrorCallback">
          </video>
        </view>
        <view class="bottom-button-box">
          <view @click="shadeTypeClick()">语音广播</view>
          <view @click="evacuationButton(1)" v-if="isEvacuate">执行疏散</view>
          <view @click="evacuationButton(2)" v-if="!isEvacuate">结束疏散</view>
        </view>
      </view>
      <!-- 语音广播-->
      <view class="shade-max-big-box" v-if="broadcastType">
        <view class="null-box" @click="shadeTypeClick()"></view>
        <!-- 语音广播-执行疏散 -->
        <view class="broadcast">
          <view class="broadcast_t">语音广播<label>选择喇叭位置</label></view>
          <!-- 按钮部分 -->
          <view class="trumpet-max-box">
            <view @click="trumpetClick(index)" class="trumpet-for-box"
                  :class="item.type?'trumpet-color-a':'trumpet-color-b'" v-for="(item,index) in trumpetList"
                  :key="index">
              <img src="@/images/icon_sskz_zc.png" v-if="!item.type">
              <img src="@/images/icon_sskz_xz.png" v-if="item.type">
              {{item.name}}
            </view>
          </view>
          <view class="broadcast_m">
            <view class="broadcast_m_t" :class="liveType?'broadcast_m_t_back_a':'broadcast_m_t_back_b'"
                  @longpress.stop="recordButton" @touchmove.stop="cancelButton" @touchend.stop="sendButton">

              {{liveType?'松开发送':'按住说话'}}
            </view>
            <view class="broadcast_m_b" v-if="!liveType">按住说话，录入广播内容</view>
            <view class="broadcast_m_b" v-if="liveType">松开发送，向上滑动取消发送</view>
          </view>
        </view>
      </view>
      <!-- 一键灭火遮罩-->
      <view class="shade-outfire" v-if="dialogVisible">
        <view class="null-box" @click="dialogOutfire()"></view>
        <view class="shade-outfire-n">
          <img class="shade-outfire-n-t" src="@/images/icon_mh.png" />
          <view class="shade-outfire-n-m">一键灭火启动中，倒计时<text>{{countdown}}</text>秒</view>
          <view class="shade-outfire-n-b" @click="cancelOutfire()">放弃一键灭火</view>
        </view>
      </view>
    </view>
    <view></view>
  </view>
</template>

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


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

      conductCountdown: '',
      timer3: null, //倒计时
      outfireEnd: false, //灭火结束状态
      //新布局地图相关数据
      zoomData: null,
      mapType:false,
      mapList: [],
      mapWidth: null, //40边框距离
      mapHeight: null, //40边框距离
      //新MQTT
      floorClient: {},
      evacuationTopic: "lab/newexit/line", //疏散
      //灭火设备MQTT相关
      fireClient:{},
      fireTopic:"lab/fireDevice/Warn/",//传感器状态异常
      fireOnlineTopic:"lab/fireDevice/isOnline/",//设备是否在线
      firePerformTopic:"lab/fireDevice/executing/",//是否正在执行灭火操作


      fireType:false,//有无火焰设备状态
      fireListType:false,//灭火设备在线离线
      fireCode:null,// //灭火设备code
      fireStartType:false, //灭火启动状态
      outfireData: {}, //一键灭火
    }
  },
  onLoad(option) {
    console.log('option',option)
    if(option.item){
      let obj = JSON.parse(decodeURIComponent(option.item));
      this.$set(this,'buildingId',obj.buildId);
      this.$set(this,'deptId',obj.buildId);
      this.$set(this,'floorId',obj.floorId);
      this.$set(this,'subId',obj.subId);
      this.$set(this,'pageType',2);
      this.getBuildingData();
      this.confirmBtn();
    }else{
      this.treeselectByUser();
    }
    //一键灭火正式使用需要注销
    // this.itemData.subjectId=85
    // this.firedeviceStatus();

  },
  onShow() {
    console.log('asd')
    this.treeselectByUser();
    if(this.floorId&&this.subId){
      this.getBuildingData();
    }
  },
  onUnload() {
  },
  methods: {
    //返回按钮
    backButton(){
      this.offMQTT();
      this.$set(this,'buildingName',null);
      this.$set(this,'buildingId',null);
      this.$set(this,'deptId',null);
      this.$set(this,'floorName',null);
      this.$set(this,'floorId',null);
      this.$set(this,'subId',null);
      this.$set(this,'subName',null);
      this.$set(this,'pageType',1);
      this.treeselectByUser();
    },
    //全屏疏散页面
    goAllPage() {
      let obj = {
        buildingId:this.buildingId,
        floorId:this.floorId,
        type:1,
      }
      uni.navigateTo({
        url: '/pages/emergencyEvacuationBigFullScreen?item='+encodeURIComponent(JSON.stringify(obj)),
      });
    },
    //一键灭火-查询设备状态
    async firedeviceStatus() {
      let _this = this;

      const {data} = await firedeviceStatus(_this.subId)
      if (data.code == 200) {
        if(data.data.isexist){//是否有灭火设备
          this.$set(this,'fireType',data.data.isexist);
          if(data.data.online){
            _this.outfireData = data.data
            _this.$set(this,'fireListType',data.data.online);
            _this.$set(this,'fireCode',data.data.fireDevice.deviceCode);
            _this.offMQTT('on');
            if(data.data.temperature && data.data.smoke){
              if(!this.fireStartType){
                this.$set(this,'fireStartType',true);
                this.sendCode2(data.data.timeDifference);
              }
            }
          }else{
            this.$set(this,'fireListType',false);
            this.$set(this,'fireCode',null);
            this.offMQTT('on');
          }
        }else{
          this.$set(this,'fireType',false);
          this.offMQTT('on');
        }
      }
    },
    //启动灭火设备
    async firedeviceStart() {
      let _this = this;
      let obj={
        subjectId:this.subId,
        deviceCode:_this.fireCode
      }
      const {data} = await firedeviceStart(obj)
      if (data.code == 200) {
        if (data.data.online) {
          _this.dialogVisible = true;
          _this.$set(this,'fireListType',data.data.online);
          _this.countdown = data.data.waitTime;//灭火倒计时
          _this.sendCode() //倒计时

        } else {
          wx.showToast({
            title: '一键灭火启动失败!',
            icon: "none",
            duration: 6000
          });
        }
      }
    },
    //取消灭火设备
    async firedeviceCancel() {
      let _this = this;
      const {data} = await firedeviceCancel(_this.itemData.subjectId)
      if (data.code == 200) {
        wx.showToast({
          title: '放弃一键灭火!',
          icon: "none",
          duration: 2000
        });
      }
    },
    //一键灭火按钮
    outfireFun() {
      let _this = this;
      uni.showModal({
        title: "是否确认执行一键灭火?",
        content: '该操作存在风险，请您务必确认实验室内人员已安全撤离?',
        cancelColor: "#999",
        confirmColor: "#0183FA",
        success: function(res) {
          if (res.confirm) {
            _this.firedeviceStart(); //启动灭火设备

          } else if (res.cancel) {

          }
        }
      });

    },
    //一键灭火弹出层关闭
    dialogOutfire() {
      this.dialogVisible = !this.dialogVisible
      this.clearTimer(); //关闭定时器
    },
    //取消一键灭火
    cancelOutfire() {
      this.dialogVisible = false;
      this.clearTimer(); //关闭定时器
      this.firedeviceCancel()
    },
    //倒计时
    sendCode() {
      let _this = this;
      _this.loading(); //启动定时器
      _this.timer2 = setInterval(() => {
        //创建定时器
        if (_this.countdown === 1) {
          _this.clearTimer(); //关闭定时器
        } else {
          _this.loading();
        }
      }, 1000);
    },
    loading() {
      //启动定时器
      this.countdown--; //定时器减1
    },
    clearTimer() {
      //清除定时器
      clearInterval(this.timer2);
      this.timer2 = null;
      this.dialogVisible = false;

    },
    //进行中倒计时
    sendCode2(time) {
      let _this = this;
      _this.conductCountdown=time
      _this.loading2(); //启动定时器
      _this.timer3 = setInterval(() => {
        //创建定时器
        if (_this.conductCountdown === 1) {
          _this.clearTimer2(); //关闭定时器
          _this.outfireEnd = true; //灭火倒计时结束
          _this.fireStartType = false; //灭火状态

          console.log()
        } else {
          _this.loading2();
        }
      }, 1000);
    },
    loading2() {
      //启动定时器
      this.conductCountdown--; //定时器减1
    },
    clearTimer2() {
      //清除定时器
      clearInterval(this.timer3);
      this.timer3 = null;
    },
    //获取楼栋数据
    async treeselectByUser(option) {
      const { data } = await getBuildOrFloorList({type:2,parentId:''})
      this.$set(this, 'buildingList', data.data);
      // this.$set(this, 'buildingName', "");
      // this.$set(this, 'buildingId', "");
      // this.$set(this, 'deptId', "");
      // this.$set(this, 'floorList', []);
      // this.$set(this, 'floorName', "");
      // this.$set(this, 'floorId', "");
      // this.$set(this, 'fjListArray', []);
      // this.$set(this, 'subName', "");
      // this.$set(this, 'subId', "");
      this.selectTriggerInfo(1);
    },
    //获取楼层数据
    async getBuilding(buildingId) {
      const { data } = await getBuildOrFloorList({type:3,parentId:buildingId})
      this.$set(this, 'floorList', data.data);
      this.$set(this, 'floorName', "");
      this.$set(this, 'floorId', "");
      this.$set(this, 'fjListArray', []);
      this.$set(this, 'subName', "");
      this.$set(this, 'subId', "");
      this.selectTriggerInfo(2);
    },
    //楼栋选中
    buildingChange(e) {
      this.$set(this, 'buildingName', this.buildingList[e.detail.value].name);
      this.$set(this, 'buildingId', this.buildingList[e.detail.value].id);
      this.$set(this, 'deptId', this.buildingList[e.detail.value].id);
      this.$set(this, 'floorId', null);
      this.$set(this, 'floorName', null);
      this.$set(this, 'subId', null);
      this.$set(this, 'subName', null);
      this.$set(this.itemData, 'subjectId', null);
      this.$set(this, 'floorList', []);
      this.$set(this, 'fjListArray', []);
      this.getBuilding(this.buildingList[e.detail.value].id);
    },
    //楼层选中
    floorChange(e) {
      this.$set(this, 'floorName', this.floorList[e.detail.value].name);
      this.$set(this, 'floorId', this.floorList[e.detail.value].id);
      this.$set(this, 'subId', null);
      this.$set(this, 'subName', null);
      this.$set(this.itemData, 'subjectId', null);
      this.$set(this, 'fjListArray', []);
      this.getBuildingData();
    },
    //实验室选择
    fjListChange(e) {
      this.$set(this, 'subName', this.fjListArray[e.detail.value].subName);
      this.$set(this, 'subId', this.fjListArray[e.detail.value].subId);
      this.$set(this.itemData, 'subjectId', this.fjListArray[e.detail.value].subId);
    },
    //获取预案数据
    async selectTriggerInfo(type){
      let self = this;
      const {data} = await selectTriggerInfo();
      if(data.code == 200){
        if(type == 1){
          //标记楼栋
          for(let o=0;o<self.buildingList.length;o++){
            for(let i=0;i<data.data.length;i++){
              if(data.data[i].buildId == self.buildingList[o].id){
                self.buildingList[o].name = '(预案发生) '+self.buildingList[o].name
              }
            }
          }
        }
        if(type == 2){
          //标记楼层
          for(let o=0;o<self.floorList.length;o++){
            for(let i=0;i<data.data.length;i++){
              if(data.data[i].floorId == self.floorList[o].id){
                self.floorList[o].name = '(预案发生) '+self.floorList[o].name
              }
            }
          }
        }
        if(type == 3){
          //标记实验室
          for(let o=0;o<self.fjListArray.length;o++){
            for(let i=0;i<data.data.length;i++){
              if(data.data[i].subId == self.fjListArray[o].subId){
                self.fjListArray[o].subName = '(预案发生) '+self.fjListArray[o].subName
              }
            }
          }
        }
      }
      console.log('data.data',data.data);
    },
    getAppExitLine() {
      let list = [{
        type: "lab/exit/line"
      }, {
        type: "lab/fireDevice/Warn/"
      }];
      getApp().appMqttOn(1, list);
    },
    getAppOutfire() {
      // let list = [{type:"lab/fireDevice/Warn/"}]
      let list = [{
        type: "lab/function/data"
      }];
      getApp().appMqttOn(1, list);
    },
    shadeTypeClick() {
      this.broadcastType = !this.broadcastType
    },
    //获取实验室摄像头
    async laboratoryInfo() {

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

        this.getCameraByFloor();

      }
    },
    //获取楼层摄像头列表
    async getCameraByFloor() {
      let _this = this;
      const {
        data
      } = await getCameraByFloor({
        floorId: this.floorId
      })
      if (data.code == 200) {
        if (data.data[0]) {
          let list = _this.videoHardwareNUM.concat(data.data)
          let qc = []
          for (var i = 0; i < list.length - 1; i++) {
            for (var j = i + 1; j < list.length; j++) {
              if (list[i] === list[j]) {
                list.splice(j, 1);
                j--;
              }
            }
          }
          this.GetStartList(list);
        } else {
          this.GetStartList(_this.videoHardwareNUM);
        }
      }
    },
    async GetStartList(rows) {
      let self = this;
      let list = "";
      for (let i = 0; i < rows.length; i++) {
        list = list + rows[i] + ","
      }
      let obj = {
        page: "1",
        count: "100",
        deviceIds: list,
      };
      const {
        data
      } = await GetStartList(obj)
      if (data.code == 200) {
        let list = [];
       for(let i=0;i<data.data.data.length;i++){
          let text = uni.getStorageSync('cameraUrl');
           let url = data.data.data[i].hls;
          url = url.split("rtp/");
          let newUrl = text + 'rtp/' + url[1];
          let obj = {
            name: "楼道监控" + (i + 1),
             id:data.data.data[i].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 + '/base/file/upload', //仅为示例，非真实的接口地址
        header: {
          'Authorization': uni.getStorageSync('token')
        },
        filePath: tempFilePaths,
        name: 'file',
        formData: {
          'user': 'test'
        },
        success: (uploadFileRes) => {
          let res = JSON.parse(uploadFileRes.data);
          if (res.code == 200) {
            console.log("上传成功", res)
            self.textParseUrlIps(config.base_url + '/' + res.data.url);
          } else {
            uni.showToast({
              title: res.msg,
              icon: "none",
              mask: true,
              duration: 2000
            });
          }
        },
        fail: err => {
          uni.hideLoading()
        },
        complete: () => {}
      });
    },
    //发送语音
    async textParseUrlIps(text) {
      let self = this;
      let newList = [];
      for (let i = 0; i < self.trumpetList.length; i++) {
        if (self.trumpetList[i].type) {
          let obj = {
            sn: self.trumpetList[i].deviceSn,
            port: self.trumpetList[i].port,
            deviceIp: self.trumpetList[i].deviceIp,
            type: "",
            name: "",
            speed: "",
            params: {
              tid: "",
              vol: self.trumpetList[i].deviceVol,
              urls: []
            }
          };
          newList.push(obj);
        }
      }
      const {
        data
      } = await textParseUrlIps(newList, text)
      if (data.code == 200) {
        uni.showToast({
          title: '发送成功',
          icon: "none",
          mask: true,
          duration: 2000
        });
      }
    },
    //监听应急疏散数据变更
    getMqttLineData(val) {
      console.log('收到疏散MQTT')
      let self = this;
      if (val.EXIT_LINE_MESSAGE) {
        console.log('数据改变')
        this.evacuate();
      } else {
        console.log('应急疏散已结束')
        uni.showToast({
          title: '应急疏散已结束',
          icon: "none",
          mask: true,
          duration: 2000
        });
        setTimeout(function() {
          uni.navigateBack();
        }, 2000);
      }
    },
    /* 确认 */
    confirmBtn() {
      if (!this.subId) {
        uni.showToast({
          title: '请选择实验室',
          icon: "none",
          mask: true,
          duration: 2000
        });
        return
      }
      this.$set(this,'checkSubName',this.subName.replace('(预案发生) ',""));
      this.$set(this,'address',this.buildingName.replace('(预案发生) ',"") + '' + this.floorName.replace('(预案发生) ',""));
      this.$set(this,'pageType',2);
      this.getDeviceList();
      this.laboratoryInfo();
      this.firedeviceStatus();

    },
    //执行疏散
    async lineEvacuate() {
      let obj = {
        buildingId:this.buildingId,
        floorId:this.floorId,
        type:2,
      }
      uni.navigateTo({
        url: '/pages/emergencyEvacuationBigFullScreen?item='+encodeURIComponent(JSON.stringify(obj)),
      });
    },
    //获取喇叭列表
    async getDeviceList() {
      let obj = {
        subId: this.itemData.subjectId,
        floorId: this.floorId,
        page: 1,
        pageSize: 100,
      };
      const {
        data
      } = await getDeviceListBySub(obj)
      if (data.code == 200) {
        for (let i = 0; i < data.data.length; i++) {
          data.data[i].type = false;
        }
        this.$set(this, 'trumpetList', data.data)
      }
    },
    //摄像头切换
    scrollBoxClick(index) {
      this.videoIndex = index;
    },
    /*新疏散相关接口*/
    //地图数据
    async getBuildingData() {
      let self = this;
      const {
        data
      } = await getFloorData(this.floorId)
      console.log('data', data)
      if (data.code == 200) {
        if (data.data.buildFloorLayoutVoList[0]) {
          let list = JSON.parse(data.data.labExitLineVertex.layoutJoinData)
          this.zoomCalculate(list, 348, 668);
          for (let i = 0; i < list.length; i++) {
            if (list[i].type == '2') {
              //楼道
              for (let o = 0; o < list[i].lightList.length; o++) {
                list[i].lightList[o].openType = false;
              }
            } else if (list[i].type == '1') {
              for (let o = 0; o < data.data.buildFloorLayoutVoList.length; o++) {
                if (list[i].key == data.data.buildFloorLayoutVoList[o].pointName) {
                  list[i].id = data.data.buildFloorLayoutVoList[o].id;
                  list[i].buildId = data.data.buildFloorLayoutVoList[o].buildId;
                  list[i].floorId = data.data.buildFloorLayoutVoList[o].floorId;
                  list[i].roomType = data.data.buildFloorLayoutVoList[o].roomType;
                  list[i].roomName = data.data.buildFloorLayoutVoList[o].roomName;
                  list[i].roomNum = data.data.buildFloorLayoutVoList[o].roomNum;
                  list[i].subName = data.data.buildFloorLayoutVoList[o].subName;
                  list[i].subId = data.data.buildFloorLayoutVoList[o].subId;
                  list[i].online = data.data.buildFloorLayoutVoList[o].online;
                  list[i].loginAdmin = data.data.buildFloorLayoutVoList[o].loginAdmin;
                  list[i].policeType = false;
                }
              }
            } else if (list[i].type == 3) {
              list[i].roomCheckType = false;
            }
          }
          let subList = [];
          for (let o = 0; o < data.data.buildFloorLayoutVoList.length; o++) {
            if(data.data.buildFloorLayoutVoList[o].loginAdmin){
              subList.push(data.data.buildFloorLayoutVoList[o])
            }
          }
          this.$set(this,'fjListArray', subList);
          this.$set(this, 'mapList', JSON.parse(JSON.stringify(list)));
          // this.$set(this, 'shadeMapList', JSON.parse(JSON.stringify(list)));
          this.$set(this, 'mapType', true);
          setTimeout(function() {
            self.getRedisEvacuation();
          }, 500);
          this.selectTriggerInfo(3);

        }
      }
    },
    //获取疏散数据
    async getRedisEvacuation() {
      let self = this;
      let obj = {
        buildId: this.buildingId,
        floorId: this.floorId,
      }
      const {
        data
      } = await getRedisEvacuation(obj)
      if (data.code == 200) {
        if (data.data.doorPointNames) {
          for (let o = 0; o < self.mapList.length; o++) {
            if (self.mapList[o].type == 2) {
              for (let x = 0; x < self.mapList[o].lightList.length; x++) {
                let num = 0;
                for (let i = 0; i < data.data.lightPointSet.length; i++) {
                  if (data.data.lightPointSet[i]) { //处理后端返回的异常的NULL
                    if (self.mapList[o].lightList[x].key == data.data.lightPointSet[i].key) {
                      num++
                    }
                  }
                }
                console.log('灯',num)
                self.mapList[o].lightList[x].openType = num != 0;
              }
            }
          }
          for (let i = 0; i < data.data.doorPointNames.length; i++) {
            for (let o = 0; o < self.mapList.length; o++) {
              if (self.mapList[o].type == 3) {
                if (data.data.doorPointNames[i] == self.mapList[o].key) {
                  self.mapList[o].roomCheckType = true;
                }
              }
            }
          }
          this.$set(this,'isEvacuate',false)
          this.$forceUpdate();
        }else{
          this.$set(this,'isEvacuate',true)
        }
      };
    },
    //缩放计算
    zoomCalculate(list, height, width) {
      let maxWidth = 0
      let maxHeight = 0
      let zoomData = 1;
      for (let i = 0; i < list.length; i++) {
        if ((list[i].x + list[i].w) > maxWidth) {
          maxWidth = list[i].x + list[i].w
        }
        if ((list[i].y + list[i].h) > maxHeight) {
          maxHeight = list[i].y + list[i].h
        }
      }
      //处理等值数据
      if(maxHeight == height){
        maxHeight--
      }
      if(maxWidth == width){
        maxWidth--
      }
      this.$set(this, 'mapWidth', maxWidth);
      this.$set(this, 'mapHeight', maxHeight);
      //缩放判断
        let zoomNumOne = height / maxHeight;
        if(parseInt(this.accMul(zoomNumOne,maxHeight)) <= height && parseInt(this.accMul(zoomNumOne,maxWidth)) <= width){
          zoomData = zoomNumOne;
          this.$set(this,'zoomData',zoomNumOne);
        }
        let zoomNumTwo = width / maxWidth;
        if(parseInt(this.accMul(zoomNumTwo,maxHeight)) <= height && parseInt(this.accMul(zoomNumTwo,maxWidth)) <= width){
          zoomData = zoomNumTwo;
          this.$set(this,'zoomData',zoomNumTwo);
        }
      // if(maxHeight>height&&maxWidth>width){
      //   if((maxHeight-height)>(maxWidth-width)){
      //     zoomData = height/maxHeight;
      //     this.$set(this,'zoomData',height/maxHeight);
      //   }else{
      //     zoomData = width / maxWidth;
      //     this.$set(this,'zoomData',width / maxWidth);
      //   }
      // }else if(maxHeight<height&&maxWidth<width){
      //   if((height-maxHeight)>(width-maxWidth)){
      //     zoomData = width / maxWidth;
      //     this.$set(this,'zoomData',width / maxWidth);
      //   }else{
      //     zoomData = height / maxHeight;
      //     this.$set(this,'zoomData',height / maxHeight);
      //   }
      // }else if(maxHeight<height&&maxWidth>width){
      //   zoomData = width / maxWidth;
      //   this.$set(this,'zoomData',width / maxWidth);
      // }else if(maxHeight>height&&maxWidth<width){
      //   zoomData = height / maxHeight;
      //   this.$set(this,'zoomData',height / maxHeight);
      // }
    },
      accMul(arg1,arg2){
        var m=0,s1=arg1.toString(),s2=arg2.toString();
        try{m+=s1.split(".")[1].length}catch(e){}
        try{m+=s2.split(".")[1].length}catch(e){}
        return Number(s1.replace(".",""))*Number(s2.replace(".",""))/Math.pow(10,m)
      },
    //结束疏散
    evacuationButton() {
      let self = this;
      if(this.isEvacuate){
        let obj = {
          buildingId:this.buildingId,
          floorId:this.floorId,
          subId:this.subId,
          type:2,
        }
        uni.navigateTo({
          url: '/pages/emergencyEvacuationBigFullScreen?item='+encodeURIComponent(JSON.stringify(obj)),
        });
      }else{
        uni.showModal({
          content: '确认'+(this.isEvacuate?'执行':'结束')+'疏散吗?',
          cancelColor: "#999",
          confirmColor: "#0183FA",
          success: function(res) {
            if (res.confirm) {
              if(self.isEvacuate){
                self.executeEvacuation();
              }else{
                self.endEvacuation();
              }
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      }
    },
    //开始疏散
    async executeEvacuation(){
      let self = this;
      let doorPointNames = [];
      for(let i=0;i<self.mapList.length;i++){
        if(self.mapList[i].type == 3){
          doorPointNames.push(self.mapList[i].key)
        }
      }
      let obj = {
        buildId:this.buildingId,
        floorId:this.floorId,
        subId: this.subId,
        badPointNames:[],
        doorPointNames:doorPointNames,
      }
      const {	data } = await executeEvacuation(obj)
      console.log('data', data)
      if (data.code == 200) {
        this.$set(this,'isEvacuate',false);
        uni.showToast({
          title: '执行成功',
          icon: "none",
          mask: true,
          duration: 2000
        });
      }
    },
    //结束疏散
    async endEvacuation(){
      let self = this;
      let obj = {
        buildId:this.buildingId,
        floorId:this.floorId,
      }
      const {	data } = await endEvacuation(obj)
      console.log('data', data)
      if (data.code == 200) {
        this.$set(this,'isEvacuate',true);
        uni.showToast({
          title: '执行成功',
          icon: "none",
          mask: true,
          duration: 2000
        });
      }
    },
    /*MQTT*/
    //订阅
    onMQTT() {
      let self = this;
      const mqttOptions = {
        keepalive: 30,
        clean: true, //保留会话
        connectTimeout: 60000, // 超时时间
        reconnectPeriod: 5000, // 重连间隔
        clientId: uni.getStorageSync('token') + 'lab/function/data',
        username: uni.getStorageSync('mqttUser'),
        password: uni.getStorageSync('mqttPassword'),
      }
      const connectUrl = uni.getStorageSync('mqttUrl');
      self.floorClient = $mqtt.connect('wxs://' + connectUrl, mqttOptions);
      self.floorClient.on('connect', () => {
        self.floorClient.subscribe(self.evacuationTopic + self.floorId, (err) => {
          if (!err) {
            console.log("疏散-订阅成功", )
            self.getBuildingData();
          }
        });
        self.floorClient.subscribe(self.fireTopic+self.fireCode, (err) => {
          if (!err) {
            console.log("火灾传感器状态-订阅成功:" + self.fireTopic+self.fireCode);
          }
        });
        self.floorClient.subscribe(self.fireOnlineTopic+self.fireCode, (err) => {
          if (!err) {
            console.log("火灾设备是否在线-订阅成功:" + self.fireOnlineTopic+self.fireCode);
          }
        });
        self.floorClient.subscribe(self.firePerformTopic+self.fireCode, (err) => {
          if (!err) {
            console.log("火灾是否正在执行灭火操作-订阅成功:" + self.firePerformTopic+self.fireCode);
          }
        });
      });
      // 自动重连
      this.floorClient.on('reconnect', (msg) => {
        console.log('自动重连-reconnect-1', msg)
      });
      // 错误
      this.floorClient.on('error', () => {
        console.log('错误-error-1')
      });
      // 断开
      this.floorClient.on('end', () => {
        console.log('断开-end-1')
      });
      // 掉线
      this.floorClient.on('offline', (msg) => {
        console.log('掉线-offline-1', msg)
      });
      // 收到消息
      this.floorClient.on('message', (topic, message) => {
        let data = JSON.parse(message)
        console.log('设备状态'+data)
        if (data) {
          if (topic == (this.evacuationTopic + this.floorId)) {
            console.log('疏散通知', data)
            //疏散消息
            if (data.data == 'FLOOR_EXITLINE') {
              this.getRedisEvacuation();
            } else if (data.data == 'FLOOR_OVER_EXITLINE') {
              uni.showToast({
                title: '疏散已结束',
                icon: "none",
                mask: true,
                duration: 2000
              });
              setTimeout(function() {
                self.getBuildingData();
              }, 2000);
            }
          }else if(topic == (self.fireTopic + self.fireCode)){
            //传感器状态
            console.log('传感器状态');
            self.firedeviceStatus();
          }else if(topic == (self.fireOnlineTopic + self.fireCode)){
            //设备在线状态
            console.log('设备在线状态');
          }else if(topic == (self.firePerformTopic + self.fireCode)){
            console.log('灭火中'+data.fireStatus)
            //灭火执行操作
            if(data.fireStatus == 1){
              if(!self.fireStartType){
                self.$set(self,'fireStartType',true);
                self.sendCode2(data.direTime);
              }
            }else if(data.fireStatus == 0){
				uni.showToast({
				  title: '一键灭火启动失败',
				  icon: "none",
				  mask: true,
				  duration: 2000
				});
            }
          }
        }
      });
      // 全局监听是否有关闭mqtt的消息的事件
      uni.$on('closeMqtt', () => {
        this.floorClient.end(true); // 主动断开连接
      })
    },
    //关闭MQTT连接
    offMQTT(type) {
      let self = this;
      if (this.floorClient.unsubscribe) {
        this.floorClient.unsubscribe(this.evacuationTopic + this.floorId, error => {
          if (error) {
            console.log('疏散连接-关闭错误', error)
          }
        });
        if(self.fireCode){
          this.floorClient.unsubscribe(self.fireTopic+self.fireCode, error => {
            if (error) {
              console.log('火灾传感器状态-MQTT断开报错=>', error)
            }
          })
          this.floorClient.unsubscribe(self.fireOnlineTopic+self.fireCode, error => {
            if (error) {
              console.log('火灾设备是否在线-MQTT断开报错=>', error)
            }
          })
          this.floorClient.unsubscribe(self.firePerformTopic+self.fireCode, error => {
            if (error) {
              console.log('火灾是否正在执行灭火操作-MQTT断开报错=>', error)
            }
          })
        }
        this.floorClient.end(true);
        this.$set(this, 'floorClient', {});
      }
      if (type) {
        this.onMQTT();
      }
    },
  },
  beforeDestroy() {
    this.offMQTT();
    //断开mqtt连接
    // getApp().offMQTT();
    //删除应急疏散监听
    // getApp().deleteLineData();
  }
}
</script>

<style lang="stylus" scoped>
#emergencyEvacuationBig {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: scroll;

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

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

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

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

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

          view:nth-child(2) {}

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

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

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

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

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

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

      .evacuation-title-box {
        // height:150rpx;
        //border-bottom:1rpx solid #dedede;
        background: #FFFFFF;
        border-radius: 20rpx;
        padding: 34rpx 22rpx;
        box-sizing: border-box;
        display: flex;
        .evacuation-title-left{
          flex:1;
          .evacuation-title-name-box {
            font-size: 30rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: #333333;
            line-height: 30rpx;
          }

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

            >img {
              width: 28rpx;
              height: 30rpx;
              margin-right: 18rpx;
            }
          }
        }
        .evacuation-title-right{
          color:#0183FA;
          font-size: 28rpx;
          line-height: 100rpx;
        }
      }

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

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

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

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

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

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

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

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

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

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

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

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

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

        }

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

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

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

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

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

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

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

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

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

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

              .colorA {
                color: #0183FA;
              }

              .colorB {
                color: #0183FA;
              }

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

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

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

            .map-max-box {
              position: relative;

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

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

                  .position-box {
                    position: absolute;
                  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

      }

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

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

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

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

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

        view:nth-child(2) {
          border-top-right-radius: 50rpx;
          border-bottom-right-radius: 50rpx;
          background: #0183FA;
        }
      }
    }

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

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

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

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

      .null-box {
        flex: 1;
      }

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

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

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

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

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

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

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

        .broadcast_m {
          width: 100%;

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

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

            }

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

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

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

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

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

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

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

    /* 一键灭火 */
    .shade-outfire {
      height: 100%;
      width: 100%;
      position: fixed;
      display: flex;
      flex-direction: column;
      z-index: 10;
      background: rgba(0, 0, 0, 0.2);

      .null-box {
        flex: 1;
      }

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

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

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

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

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

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