<template>
  <div class="newMapComponent">
    <div class="addressTitleComponent">
      <div class="top-num-max-box">
        <p class="null-p"></p>
        <div class="for-address-box" v-for="(item,index) in addressList" :key="index">
          <p class="icon-p" v-if="index != 0">|</p>
          <p class="name-p">{{item}}</p>
        </div>
        <div class="for-address-box" v-if="mapType">
          <p class="icon-p">|</p>
          <p class="name-p">{{roomNum?subName+'('+roomNum+')':subName}}</p>
          <p class="icon-p">|</p>
        </div>
        <div class="for-address-box" v-if="mapType">
          <p class="name-p">实时实验人数</p>
          <p class="num-p" v-for="(item,index) in floorUserNum" :key="index">{{item}}</p>
          <p class="name-p">人</p>
        </div>
        <p class="null-p"></p>
        <p class="content-evacuate-button" @click="evacuationButton">{{evacuationType?'结束疏散':'立即疏散'}}</p>
      </div>
    </div>
    <div class="newMapComponent-page">
      <div class="newEvacuation-map-max-big-box"
           v-if="mapType"
           :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;transform: scale('+mapData.zoomData+');margin-top:-'+mapData.height/2+'px;margin-left:-'+mapData.width/2+'px;'">
        <div class="newEvacuation-map-big-box"
             :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;'">
          <div class="newEvacuation-map-for-box for-map-box-one"
               :class="!item.planType && checkSubId ==item.subId ? 'room-type-one':(
                           item.planType && checkSubId !=item.subId ? 'room-type-two':(
                           item.planType && checkSubId ==item.subId ? 'room-type-three':(
                           !item.loginAdmin ? 'room-type-noe':''
                           )))"
               @click="checkSubClick(item)"
               v-for="(item,index) in mapList" :key="item.key" v-if="item.type == 1"
               :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'+(item.levelColor?'background-color:'+item.levelColor+';':'')">
            <div class="newEvacuation-map-for-min-box">
              <!--实验室名称及房间号-->
              <el-tooltip class="item" effect="dark" :content="item.roomType == '-99'?item.roomName:(item.subName?item.subName:'未绑定')" placement="top">
                <p class="map-for-num-p" :style="'height:'+item.h/2+'px;line-height:'+item.h/2+'px;margin:'+item.h/4+'px 0'">({{item.roomNum}})</p>
              </el-tooltip>
              <!--门-->
              <div class="position-box"
                   :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+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
            </div>
          </div>
          <div class="newEvacuation-map-for-box for-map-box"
               v-for="(item,indexOne) in mapList" :key="item.key" v-if="item.type == 2"
               :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
            <div class="newEvacuation-map-for-min-box">
              <!--灯-->
              <div class="position-box" @click="shadeButton(2,minItem)"
                   :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+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
            </div>
          </div>
          <div class="newEvacuation-map-for-box for-map-box-two"
               v-for="(item,indexTwo) in mapList" :key="item.key" v-if="item.type == 3"
               :class="item.roomCheckType?'for-map-box-two-check':''"
               :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
            <div class="newEvacuation-map-for-min-box"></div>
          </div>
          <div class="plan-map-for-box" :class="checkPlanId == item.subId?'check-plan-map-for-box':''"
               :style="'width:'+item.width+'px;height:'+item.height+'px;left:'+item.left+'px;top:'+item.top+'px;'"
               @click="checkPlanButton(item.subId)"
               v-for="(item,index) in planMapList" :key="item.subId" v-if="item.planType">
            <div class="plan-top-button-box">
              <p></p>
              <p class="el-icon-close" @click="offPlanShade(index)"></p>
            </div>
            <div class="plan-time-box">
              <img src="@/assets/ZDimages/emergencyManagement/icon_dp_bjsj.png">
              <p>{{item.riskPlanTriggerTime}}</p>
            </div>
            <div class="plan-text-box">
              <p class="plan-title-p" :class="item.riskPlanLevel==1?'color-type-1':(item.riskPlanLevel==2?'color-type-2':(item.riskPlanLevel==3?'color-type-3':(item.riskPlanLevel==4?'color-type-4':'')))">{{item.riskPlanLevelName}}</p>
              <p class="plan-text-p">{{item.name}}</p>
            </div>
            <p class="plan-button-p" @click="shadeButton(7,item.groupId)">结束预案</p>
          </div>
        </div>
      </div>
      <p class="null-mapList" v-if="!mapList[0]">暂无数据</p>
    </div>
    <!--疏散选择-->
    <div class="evacuation-shade-max-big-box" v-if="evacuationShadeType">
      <div class="evacuation-shade-big-box">
        <p class="position-title-p">请确定疏散出口</p>
        <p class="position-off-button-p el-icon-close" @click="executeEvacuation(2)"></p>
        <div class="evacuation-shade-map-max-big-box">
          <div class="evacuation-shade-map-big-box"
               :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;transform: scale('+mapData.zoomData+');margin-top:-'+mapData.height/2+'px;margin-left:-'+mapData.width/2+'px;'">
            <div class="evacuation-shade-map-box"
                 :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;'">
              <div class="evacuation-shade-map-for-box for-map-box-one"
                   :class="!item.planType && checkSubId ==item.subId ? 'room-type-one':(
                           item.planType && checkSubId !=item.subId ? 'room-type-two':(
                           item.planType && checkSubId ==item.subId ? 'room-type-three':(
                           !item.loginAdmin ? 'room-type-noe':''
                           )))"
                   v-for="(item,index) in shadeMapList" :key="index" v-if="item.type == 1"
                   :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                <div class="evacuation-shade-map-min-box">
                  <!--实验室名称及房间号-->
                  <el-tooltip class="item" effect="dark" :content="item.roomType == '-99'?item.roomName:(item.subName?item.subName:'未绑定')" placement="top">
                    <p class="map-for-num-p" :style="'height:'+item.h/2+'px;line-height:'+item.h/2+'px;margin:'+item.h/4+'px 0'">({{item.roomNum}})</p>
                  </el-tooltip>
                  <!--门-->
                  <div class="position-box"
                       :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+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
                </div>
              </div>
              <div class="evacuation-shade-map-for-box for-map-box"
                   v-for="(item,indexOne) in shadeMapList" :key="indexOne" v-if="item.type == 2"
                   :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                <div class="evacuation-shade-map-min-box"></div>
              </div>
              <div class="evacuation-shade-map-for-box for-map-box-two"
                   v-for="(item,indexTwo) in shadeMapList" :key="indexTwo" v-if="item.type == 3"
                   @click="shadeCheckRoomClick(item)"
                   :class="item.roomCheckType?'for-map-box-two-check':''"
                   :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                <div class="evacuation-shade-map-min-box"></div>
              </div>
            </div>
          </div>
        </div>
        <p class="evacuation-button-p" @click="executeEvacuation(1)">已确定疏散出口，立即执行疏散</p>
      </div>
    </div>
    <!--确认弹层-->
    <div class="shade-max-big-box" v-if="shadeType != 0">
      <div class="shade-big-box">
        <p class="off-button el-icon-close" @click="shadeButton(4)"></p>
        <div class="text-box" v-if="shadeType == 2 || shadeType == 3 || shadeType == 4 || shadeType == 5 || shadeType == 6">
          <p>{{shadeText}}</p>
          <p>{{shadeType==5?'关闭报警后，3分钟内系统不再触发预案报警，请核实确认后再执行此操作.':''}}</p>
        </div>
        <div class="button-box">
          <p class="button-null"></p>
          <p class="button-p" style="margin-right:39px;" @click="shadeButton(4)">取消</p>
          <p class="button-p" @click="shadeButton(5)">提交</p>
          <p class="button-null"></p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import mqtt from 'mqtt'
  import {
    laboratoryBigViewGetFloorByBigView,
    laboratoryExitLineGetRedisEvacuation,
    laboratoryBigViewSelectTriggerInfo,
    laboratoryExitLineExecuteEvacuation,
    laboratoryPlanCloseRiskPlan,
    laboratoryExitLineEndEvacuation,
  } from "@/api/index";
  export default {
    name: 'newMapComponent',
    data () {
      return {
        //地址
        addressList: [],
        //人数
        floorUserNum: null,
        buildId:'',
        floorId:'',
        //地图相关数据
        mapData:{},
        zoomData:null,
        mapList:[],
        mapType:false,
        planMapList:[],
        //展示相关
        subName:'',
        roomNum:'',
        checkSubId:'',
        subId:'',
        adminId:'',
        shadeMapList:[],
        checkSubData:null,
        //当前疏散状态
        evacuationType:false,
        //疏散弹窗状态
        evacuationShadeType:false,
        shadeType:0,
        shadeText:'',
        //预警id
        checkPlanId:null,
        //结束预案时使用的预案ID
        checkRiskPlanId:null,
        /****************** MQTT相关 ******************/
        //疏散灯
        lightOpic:"iot/hardware/evacuationLight/floor/",
        lightClient:{},
        //疏散
        evacuateOpic:"lab/floor/exit/line",
        evacuateClient:{},
        //预案
        planOpic:'lab/risk/plan/change',
        planClient:{},
      }
    },
    created(){

    },
    mounted(){

    },
    methods:{
      //初始化
      initialize(data){
        console.log('选中楼层',data)
        this.$set(this,'buildId',data.buildId);
        this.$set(this,'floorId',data.floorId);
        this.offPlanMQTT('on');
        this.offEvacuateMQTT('on');
        this.offLightMQTT('on')
        this.laboratoryBigViewGetFloorByBigView();
      },
      //选中实验室
      checkSubClick(item){
        let self = this;
        if((this.checkSubId != item.subId)&&item.subId!= -1&&item.type == 1){
          this.$set(this,'subId',item.subId);
          this.$set(this,'adminId',item.adminId);
          this.$set(this,'checkSubId',item.subId);
          this.$set(this,'subName',item.subName);
          this.$set(this,'roomNum',item.roomNum);
          this.$parent.checkButtonSub(item)
        }
        if(item.planType){
          for(let i=0;i<self.planMapList.length;i++){
            if(self.planMapList[i].subId == item.subId){
              this.$set(self.planMapList[i],'planType',true)
            }
          }
        }
      },
      //刷新地址
      getAddress(list) {
        this.$set(this, 'addressList', list);
      },
      //刷新人数
      getUserNum(num) {
        this.$set(this, 'floorUserNum', num ? num + '' : '0');
      },
      //获取楼层布局数据
      laboratoryBigViewGetFloorByBigView(){
        let self = this;
        laboratoryBigViewGetFloorByBigView({id:this.floorId}).then(response => {
          if(response.data[0]){
            if(response.data[0].buildLayoutVoList && response.data[0].labExitLineVo){
              let list = JSON.parse(response.data[0].labExitLineVo.layoutJoinData)
              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'){
                  const hex2Rgba = (bgColor) => {
                    let color = bgColor.slice(1); // 去掉'#'号
                    let rgba = [
                      parseInt("0x" + color.slice(0, 2)),
                      parseInt("0x" + color.slice(2, 4)),
                      parseInt("0x" + color.slice(4, 6)),
                      0.6
                    ];
                    return "rgba(" + rgba.toString() + ")";
                  };
                  for(let o=0;o<response.data[0].buildLayoutVoList.length;o++){
                    if(list[i].key == response.data[0].buildLayoutVoList[o].pointName){
                      list[i].id = response.data[0].buildLayoutVoList[o].id;
                      list[i].buildId = response.data[0].buildLayoutVoList[o].buildId;
                      list[i].floorId = response.data[0].buildLayoutVoList[o].floorId;
                      list[i].roomType = response.data[0].buildLayoutVoList[o].roomType;
                      list[i].roomName = response.data[0].buildLayoutVoList[o].roomName;
                      list[i].roomNum = response.data[0].buildLayoutVoList[o].roomNum;
                      list[i].subName = response.data[0].buildLayoutVoList[o].subName;
                      list[i].subId = response.data[0].buildLayoutVoList[o].subId;
                      list[i].adminId = response.data[0].buildLayoutVoList[o].adminId;
                      list[i].onLineNum = response.data[0].buildLayoutVoList[o].onLineNum;
                      list[i].loginAdmin = response.data[0].buildLayoutVoList[o].loginAdmin;
                      list[i].levelColor = response.data[0].buildLayoutVoList[o].levelColor?hex2Rgba(response.data[0].buildLayoutVoList[o].levelColor):'';
                      list[i].planType = false;
                    }
                  }
                }else if(list[i].type == 3){
                  list[i].roomCheckType = false;
                }
              }
              let obj = this.calculateMapMax(list)
              this.$set(this.mapData,'width',obj.maxWidth);
              this.$set(this.mapData,'height',obj.maxHeight);
              this.$set(this.mapData,'zoomData',obj.zoomData);
              //标记第一间实验室
              let subNum = 0;
              for(let x=0;x<list.length;x++){
                if(list[x].subId != -1 &&list[x].type == 1){
                  subNum++
                  this.$set(this,'subName',list[x].subName);
                  this.$set(this,'roomNum',list[x].roomNum);
                  this.$set(this,'checkSubId',list[x].subId);
                  this.$set(this,'subId',list[x].subId);
                  this.$set(this,'adminId',list[x].adminId);
                  this.$set(this,'checkSubData',{
                    subId:list[x].subId,
                    floorId:this.floorId,
                  });
                  break
                }
              }
              if(subNum == 0){
                this.$set(this,'subName','');
                this.$set(this,'roomNum','');
                this.$set(this,'checkSubId','');
                this.$set(this,'adminId','');
                console.log('1')
                this.$parent.checkButtonSub(null)
              }
              this.$set(this,'mapList',JSON.parse(JSON.stringify(list)));
              this.$set(this,'shadeMapList',JSON.parse(JSON.stringify(list)));
              this.$set(this,'mapType',true);
              //处理实验室弹窗数据
              let roomList = [];
              for(let i=0;i<list.length;i++){
                if(list[i].type == 1 && list[i].subId){
                  let roomObj = {
                    subId:list[i].subId
                  };
                  if(list[i].doorList[0].toward == 'top'){
                    roomObj.width = 266;
                    roomObj.height = 142;
                    roomObj.left = (list[i].w/2) + (list[i].x) - 133;
                    roomObj.top = list[i].y - 111;
                    roomObj.planType = false;
                  }else if(list[i].doorList[0].toward == 'bottom'){
                    roomObj.width = 266;
                    roomObj.height = 142;
                    roomObj.left = (list[i].w/2) + (list[i].x) - 133;
                    roomObj.top = list[i].y + list[i].h;
                    roomObj.planType = false;
                  }else if(list[i].doorList[0].toward == 'left'){
                    roomObj.width = 266;
                    roomObj.height = 142;
                    roomObj.left = list[i].x - 133;
                    roomObj.top = (list[i].h/2) + (list[i].y) - 56;
                    roomObj.planType = false;
                  }else if(list[i].doorList[0].toward == 'fight'){
                    roomObj.width = 266;
                    roomObj.height = 142;
                    roomObj.left = list[i].x + list[i].w + 133;
                    roomObj.top = (list[i].h/2) + (list[i].y) - 56;
                    roomObj.planType = false;
                  }
                  roomList.push(roomObj);
                }
              }
              this.$set(this,'planMapList',roomList);
              this.laboratoryBigViewSelectTriggerInfo();
              this.laboratoryExitLineGetRedisEvacuation();
            }else{
              this.$set(this,'mapData',{});
              this.$set(this,'mapList',[]);
              this.$set(this,'mapType',false);
              this.$set(this,'planMapList',[]);
              this.$set(this,'checkSubData',null);
              console.log('2')
              this.$parent.checkButtonSub(null)
            }
          }else{
            this.$set(this,'checkSubData',null);
            console.log('3')
            this.$parent.checkButtonSub(null)
          }
        })
      },
      //查询当前正在发生的预案
      laboratoryBigViewSelectTriggerInfo(){
        console.log('查询当前正在发生的预案');
        let self = this;
        laboratoryBigViewSelectTriggerInfo().then(response => {
          if(response.data){
            //实验室预案标记
            let maxNum = 0;
            for(let o=0;o<self.mapList.length;o++){
              let num = 0;
              //循环地图数据找出实验室
              if(self.mapList[o].type == 1){
                let newData = {};
                //对比预案触发实验室ID与地图中实验室ID
                for(let i=0;i<response.data.length;i++){
                  if(response.data[i].subId == self.mapList[o].subId){
                    num++
                    maxNum++
                    newData = response.data[i];
                  }
                }
                if(num != 0){
                  self.$set(self.mapList[o],'planType',true);
                  for(let x=0;x<self.planMapList.length;x++){
                    if(self.planMapList[x].subId == self.mapList[o].subId){
                      self.$set(self.planMapList[x],'riskPlanTriggerTime',this.parseTime(newData.eventStartTime,"{y}-{m}-{d} {h}:{i}:{s}"));
                      self.$set(self.planMapList[x],'riskAttribute',newData.riskAttribute);
                      self.$set(self.planMapList[x],'riskPlanLevel',newData.riskPlanLevel);
                      self.$set(self.planMapList[x],'riskPlanLevelName',newData.riskPlanLevel==1?'低风险':(newData.riskPlanLevel==2?'中风险':(newData.riskPlanLevel==3?'较高风险':(newData.riskPlanLevel==4?'高风险':''))));
                      self.$set(self.planMapList[x],'name',newData.riskPlanName);
                      self.$set(self.planMapList[x],'groupId',newData.eventId);
                      self.$set(self.planMapList[x],'planType',true);
                    }
                  }
                  let checkNum = 0;
                  for(let x=0;x<self.planMapList.length;x++){
                    if(self.planMapList[x].subId == self.mapList[o].subId){
                      this.$set(this,'subName',self.mapList[o].subName);
                      this.$set(this,'roomNum',self.mapList[o].roomNum);
                      this.$set(this,'checkSubId',self.mapList[o].subId);
                      this.$set(this,'adminId',self.mapList[o].adminId);
                      this.$set(this,'checkSubData',{
                        subId:self.mapList[o].subId,
                        floorId:this.floorId,
                      });
                      console.log('4')
                      this.$parent.checkButtonSub(self.mapList[o])
                      this.$parent.$refs['newSensorComponent'].sensorAlarm(response)
                      checkNum++
                      break
                    }
                  }
                }else{
                  self.mapList[o].planType = false;
                  for(let x=0;x<self.planMapList.length;x++){
                    if(self.planMapList[x].subId == self.mapList[o].subId){
                      self.$set(self.planMapList[x],'planType',false);
                      self.$set(self.planMapList[x],'riskPlanTriggerTime',null);
                      self.$set(self.planMapList[x],'riskAttribute',null);
                      self.$set(self.planMapList[x],'riskPlanLevel',null);
                      self.$set(self.planMapList[x],'riskPlanLevelName',null);
                      self.$set(self.planMapList[x],'groupId',null);
                      self.$set(self.planMapList[x],'name',null);
                    }
                  }
                }
              }
            }
            //浮层实验室预案标记
            for(let o=0;o<self.shadeMapList.length;o++){
              if(self.shadeMapList[o].type == 1){
                let num = 0;
                for(let i=0;i<response.data.length;i++){
                  if(response.data[i].subId == self.shadeMapList[o].subId){
                    num++
                  }
                }
                self.$set(self.shadeMapList[o],'planType',num != 0);
              }
            }
            if(maxNum==0){
              console.log('5')
              if(this.checkSubData){
                this.$parent.checkButtonSub(this.checkSubData)
              }else{
                this.$parent.checkButtonSub(null)
              }
            }
            this.$forceUpdate();
          }else{
            console.log('6')
            if(this.checkSubData){
              this.$parent.checkButtonSub(this.checkSubData)
            }else{
              this.$parent.checkButtonSub(null)
            }
          }
        })
      },
      //查询当前楼栋楼层下发生的疏散数据
      laboratoryExitLineGetRedisEvacuation(){
        let self = this;
        let obj = {
          buildId:this.buildId,
          floorId:this.floorId,
        }
        laboratoryExitLineGetRedisEvacuation(obj).then(response => {
          if(response.data.doorPointNames){
            this.$set(this,'evacuationType',true);
            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<response.data.lightPointSet.length;i++){
                    if(response.data.lightPointSet[i]){//处理后端返回的异常的NULL
                      if(self.mapList[o].lightList[x].key == response.data.lightPointSet[i].key){
                        num++
                      }
                    }
                  }
                  self.mapList[o].lightList[x].openType = num != 0;
                }
              }
              if(self.mapList[o].type == 3){
                let age = 0;
                for(let i=0;i<response.data.doorPointNames.length;i++){
                  if(response.data.doorPointNames[i] == self.mapList[o].key){
                    age++
                  }
                }
                self.mapList[o].roomCheckType = age != 0;
              }
            }
          }else{
            this.$set(this,'evacuationType',false);
            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++){
                  self.mapList[o].lightList[x].openType = false;
                }
              }
              if(self.mapList[o].type == 3){
                self.mapList[o].roomCheckType = false;
              }
            }
          }
        });
      },
      //计算布局最大尺寸
      calculateMapMax(list) {
        //基础参数
        let height = 550;
        let width = 1530;
        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++
        }
        //缩放判断
        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);
        }
        return { maxWidth: maxWidth, maxHeight: maxHeight,zoomData:zoomData }
      },
      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)
      },
      //选中优先展示的预案弹窗
      checkPlanButton(id){
        this.$set(this,'checkPlanId',id);
      },
      //关闭实验室预案弹窗
      offPlanShade(index){
        this.$set(this.planMapList[index],'planType',false)
      },
      //开始/结束疏散按钮
      evacuationButton(){
        let self = this;
        if(this.evacuationType){
          //结束疏散
          this.$set(this,'shadeText','是否结束疏散?');
          this.$set(this,'shadeType',4);
        }else{
          //开始疏散
          //默认勾选所有疏散口
          if(!this.mapList[0]){
            this.msgError('没有楼层数据,无法疏散')
            return
          }
          for(let i=0;i<self.shadeMapList.length;i++){
            if(self.shadeMapList[i].type == 3){
              self.shadeMapList[i].roomCheckType = true;
            }
          }
          this.$set(this,'evacuationShadeType',true);
        }
      },
      //选中疏散通道
      shadeCheckRoomClick(item){
        item.roomCheckType = !item.roomCheckType;
      },
      //执行疏散 上报疏散通道
      executeEvacuation(type){
        let self = this;
        if(type == 1){
          let list = [];
          let doorPointNames = [];
          for(let i=0;i<self.shadeMapList.length;i++){
            if(self.shadeMapList[i].type == 3){
              if(!self.shadeMapList[i].roomCheckType){
                list.push(self.shadeMapList[i].key)
              }else{
                doorPointNames.push(self.shadeMapList[i].key)
              }
            }
          }
          if(!doorPointNames[0]){
            this.msgError('请选择疏散出口')
            return
          }
          let obj = {
            buildId:this.buildId,
            floorId:this.floorId,
            subId: this.checkSubId,
            badPointNames:list,
            doorPointNames:doorPointNames,
          }
          laboratoryExitLineExecuteEvacuation(obj).then(response => {
            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<response.data.lightPointSet.length;i++){
                    if(self.mapList[o].lightList[x].key == response.data.lightPointSet[i].key){
                      num++
                    }
                  }
                  self.mapList[o].lightList[x].openType = num != 0;
                }
              }
            }
            for(let i=0;i<response.data.doorPointNames.length;i++){
              for(let o=0;o<self.mapList.length;o++){
                if(self.mapList[o].type == 3){
                  if(response.data.doorPointNames[i] == self.mapList[o].key){
                    self.mapList[o].roomCheckType = true;
                  }
                }
              }
            }
            this.msgSuccess(response.message);
            this.$set(this,'evacuationShadeType',false);
            this.$set(this,'evacuationType',true);
            this.$forceUpdate();
          })
        }else if(type == 2){
          this.$set(this,'evacuationShadeType',false);
        }
      },
      //遮罩层开关/弹层提示确认
      shadeButton(type,text){
        if(type == 1){
          this.$set(this,'shadeType',1);
        }else if(type == 2){
          //疏散灯开关   执行疏散时才可以开启
          if(this.evacuationType){
            let newText = `是否`+(text.openType?'关闭':'开启')+`该疏散灯？`
            this.$set(this,'shadeData',text);
            this.$set(this,'shadeText',newText);
            this.$set(this,'shadeType',2);
          }
        }else if(type == 3){
          //设备开关
          this.$set(this,'shadeText',text);
          this.$set(this,'shadeType',3);
        }else if(type == 4){
          this.$set(this,'shadeType',0)
        }else if(type == 5){
          if(this.shadeType == 4){
            //结束疏散
            let obj = {
              buildId:this.buildId,
              floorId:this.floorId,
            }
            laboratoryExitLineEndEvacuation(obj).then(response => {
              this.$set(this,'shadeType',0);
              this.laboratoryExitLineGetRedisEvacuation();
            })
          }else if(this.shadeType == 5){
            //结束预案
            laboratoryPlanCloseRiskPlan({eventId:this.checkRiskPlanId}).then(response => {
              this.$set(this,'shadeType',0);
              this.laboratoryBigViewSelectTriggerInfo();
            });
          }
        }else if(type == 6){
          this.$set(this,'shadeText','是否结束疏散?');
          this.$set(this,'shadeType',4);
        }else if(type == 7){
          this.$set(this,'shadeText','传感器数据监测异常，确定要强制结束预案?');
          this.$set(this,'checkRiskPlanId',text);
          this.$set(this,'shadeType',5);
        }
      },
      /*********************************** MQTT相关 *********************************/
      //预案-MQTT连接
      offPlanMQTT(type){
        let self = this;
        if(self.planClient.unsubscribe){
          self.planClient.unsubscribe(self.planOpic, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.planClient.end();
          this.$set(this,'planClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.planMQTT();
        }
      },
      //预案-MQTT订阅
      planMQTT(){
        let self = this;
        this.planClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.planClient.on("connect", e =>{
          this.planClient.subscribe(self.planOpic, (err) => {
            if (!err) {
              console.log("预案-订阅成功:" + self.planOpic);
            }else{
              // console.log("预案-连接错误:" + err);
            }
          });
        });
        this.planClient.on("message", (topic, message) => {
          if (message){
            //获取预案数据
            this.laboratoryBigViewSelectTriggerInfo();
          }
        });
      },
      //疏散-MQTT连接
      offEvacuateMQTT(type){
        let self = this;
        if(self.evacuateClient.unsubscribe){
          self.evacuateClient.unsubscribe(self.evacuateOpic, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.evacuateClient.end();
          this.$set(this,'evacuateClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.evacuateMQTT();
        }
      },
      //疏散-MQTT订阅
      evacuateMQTT(){
        let self = this;
        this.evacuateClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.evacuateClient.on("connect", e =>{
          this.evacuateClient.subscribe(self.evacuateOpic, (err) => {
            if (!err) {
              console.log("疏散-订阅成功:" + self.evacuateOpic);
            }else{
              // console.log("疏散-连接错误:" + err);
            }
          });
        });
        this.evacuateClient.on("message", (topic, message) => {
          if (message){
            //获取疏散数据
            this.laboratoryExitLineGetRedisEvacuation();
          }
        });
      },
      //疏散灯-MQTT连接
      offLightMQTT(type){
        let self = this;
        if(self.lightClient.unsubscribe){
          self.lightClient.unsubscribe(self.lightOpic+self.floorId, error => {
            if (error) {
              // console.log('mqtt关闭连接错误:', error)
            }
          })
          self.lightClient.end();
          this.$set(this,'lightClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.lightMQTT();
        }
      },
      //疏散灯-MQTT订阅
      lightMQTT(){
        let self = this;
        this.lightClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password:localStorage.getItem('mqttPassword')
        });
        this.lightClient.on("connect", e =>{
          this.lightClient.subscribe(self.lightOpic+self.floorId, (err) => {
            if (!err) {
              console.log("疏散灯-订阅成功:" + self.lightOpic+self.floorId);
            }else{
              // console.log("疏散灯-连接错误:" + err);
            }
          });
        });
        this.lightClient.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            for(let i=0;i<self.mapList.length;i++){
              if(self.mapList[i].type == 2){
                for(let o=0;o<self.mapList[i].lightList.length;o++){
                  if(data.hardwareNo == self.mapList[i].lightList[o].configName){
                    self.$set(self.mapList[i].lightList[o],'openType',data.operatingState);
                  }
                }
              }
            }
          }
        });
      },
    },
    beforeDestroy() {
      //清除MQTT
      let self = this;
      self.offPlanMQTT();
      self.offLightMQTT();
      self.offEvacuateMQTT();
    },
  }
</script>
<style scoped lang="scss">
  *{
    margin:0;
    padding:0;
  }
  .newMapComponent{
    width:1530px;
    height:630px;
    .addressTitleComponent{
      height: 50px;
      width:1530px;
      overflow: hidden;
      .top-num-max-box{
        margin-top:10px;
        padding:0 20px;
        height:40px;
        display: flex;
        .null-p{
          flex:1;
        }
        .for-address-box{
          display: flex;
        }
        .name-p{
          margin:0;
          line-height:40px;
          font-size:16px;
          color:#ffffff;
        }
        .num-p{
          background: rgba(3,183,202,0.2);
          line-height:24px;
          height:24px;
          width:20px;
          text-align: center;
          font-size:20px;
          color:#24D1F9;
          margin:8px 4px;
        }
        .icon-p{
          width:40px;
          text-align: center;
          color:#03B7CA;
          font-size:16px;
          line-height:40px;
          margin:0;
        }
        .num-img{
          display: block;
          margin:0 10px 0 96px;
          width:40px;
          height:40px;
        }
        .for-p{
          margin:0 0 0 10px;
          width:34px;
          height:40px;
          line-height:40px;
          font-size:36px;
          text-align: center;
          border:1px solid #117977;
          background-color: #073e42;
          border-radius:2px;
          p{
            margin:0;
            background: -webkit-linear-gradient(0deg, #FFFFFF, #0183FA); /* Chrome, Safari */
            background: linear-gradient(0deg, #FFFFFF, #0183FA); /* 标准语法 */
            -webkit-background-clip: text; /* Chrome, Safari */
            background-clip: text;
            -webkit-text-fill-color: transparent; /* Chrome, Safari */
            color: transparent; /* 其他浏览器 */
          }
        }
        .content-evacuate-button{
          width:100px;
          height:30px;
          line-height:30px;
          color:#00D4FF;
          text-align: center;
          background: url("../../../assets/ZDimages/emergencyManagement/icon_sspt_ljssbk.png");
          background-size: 100% 100%;
          cursor: pointer;
          margin:0;
        }
      }
    }
    .newMapComponent-page{
      height:560px;
      width:1530px;
      margin:0 auto;
      position: relative;
    }
    .newEvacuation-map-max-big-box{
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-user-select: none;
      img{
        -webkit-user-drag: none;
      }
      .newEvacuation-map-big-box{
        position: relative;
        /*border:1px dashed #24D1F9;*/
        border:1px solid #24D1F9;
        cursor: pointer;
        .newEvacuation-map-for-box{
          position: absolute;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .newEvacuation-map-for-min-box{
            height:100%;
            position: relative;
            .map-for-name-p{
              padding:0 10px;
              height:20px;
              line-height:20px;
              font-size:14px;
              text-align: center;
              color:#24D1F9;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .map-for-num-p{
              padding:0;
              margin:0;
              font-size:14px;
              text-align: center;
              color:#24D1F9;
              overflow: hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .user-num-box{
              position: absolute;
              left:0;
              display: flex;
              img{
                width:20px;
                height:15px;
                margin:10px;
              }
              p{
                line-height:35px;
                font-size:14px;
                color:#24D1F9;
              }
            }
            .user-num-one{
              top:0;
            }
            .user-num-two{
              bottom:0;
            }
            .position-box{
              position: absolute;
              font-size:14px;
              overflow: hidden;
            }
            .center-move-door-p-t {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
              background-size: 100% !important;
              transform: rotate(180deg);
            }
            .center-move-door-p-b {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
              background-size: 100% !important;
            }
            .center-move-door-p-l {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
              background-size: 100% !important;
              transform: rotate(90deg);
            }
            .center-move-door-p-r {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
              background-size: 100% !important;
              transform: rotateZ(270deg);
            }
            .lightTopOn {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_sjt.png");
              background-size: 100%;
            }
            .lightTopOff {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_shang_hs.png");
              background-size: 100%;
            }
            .lightBottomOn {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_xjt.png");
              background-size: 100%;
            }
            .lightBottomOff {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_xia_hs.png");
              background-size: 100%;
            }
            .lightLeftOn {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_zuo.png");
              background-size: 100%;
            }
            .lightLeftOff {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_zou_hs.png");
              background-size: 100%;
            }
            .lightRightOn {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_yuo.png");
              background-size: 100%;
            }
            .lightRightOff {
              background: url("../../../assets/ZDimages/emergencyManagement/icon_you_hs.png");
              background-size: 100%;
            }
          }
        }
        .for-map-box-one{
          border:1px solid #24D1F9;
        }
        .for-map-box{
          background: rgba(1,16,32,0.5);
        }
        .for-map-box-two{
          background: url("../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(5,45,43,0.5);
          background-size: 80px 80px;
        }
        .for-map-box-two-check{
          background: url("../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(50,205,50,1);
          background-size: 80px 80px;
        }
        .room-type-one{
          //选中
          background: rgba(30,118,142,0.4);
        }
        .room-type-two{
          //报警
          background: rgba(232,0,0,0.4);
          box-shadow:0 0 10px 1px #E80000 inset;
        }
        .room-type-three{
          //选中报警
          background: rgba(30,118,142,0.4);
          box-shadow:0 0 10px 1px #E80000 inset;
        }
        .room-type-noe{
          /*border:1px solid #666;*/
          /*background: rgba(102,102,102,0.6);*/
          /*color:#666!important;*/
          p{
            /*color:#666!important;*/
          }
        }
        .plan-map-for-box{
          font-weight:500;
          position:absolute;
          z-index:100;
          background: url("../../../assets/ZDimages/emergencyManagement/img_bg_yatk.png");
          .plan-top-button-box{
            display: flex;
            p:nth-child(1){
              flex:1;
            }
            p:nth-child(2){
              font-size:14px;
              color:#fff;
              cursor: pointer;
              margin:9px 12px 0 0 ;
            }
          }
          .plan-time-box{
            display: flex;
            img{
              width:24px;
              height:24px;
              margin-left:19px;
              margin-right:8px;
            }
            p{
              line-height:24px;
              color:#fff;
              font-size:14px;
            }
          }
          .plan-text-box{
            display: flex;
            color:#fff;
            margin-top:15px;
            overflow: hidden;
            .plan-title-p{
              width:60px;
              height:20px;
              line-height:20px;
              font-size:14px;
              text-align: center;
              margin:0 10px 0 18px;
              border-radius:15px;
            }
            .plan-text-p{
              width:170px;
              height:20px;
              line-height:20px;
              font-size:14px;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .color-type-1{
              background: #0183FA;
            }
            .color-type-2{
              background: #FF9900;
            }
            .color-type-3{
              background: #FF4800;
            }
            .color-type-4{
              background: #FF0000;
            }
          }
          .plan-text-box-two{
            display: flex;
            color:#fff;
            margin-top:22px;
            overflow: hidden;
            .plan-title-p{
              width:60px;
              height:20px;
              line-height:20px;
              font-size:14px;
              text-align: center;
              margin:0 10px 0 18px;
              border-radius:15px;
            }
            .plan-text-p{
              width:170px;
              height:20px;
              line-height:20px;
              font-size:14px;
              overflow:hidden;
              text-overflow:ellipsis;
              white-space:nowrap;
            }
            .color-type-1{
              background: #0183FA;
            }
            .color-type-2{
              background: #FF9900;
            }
            .color-type-3{
              background: #FF4800;
            }
            .color-type-4{
              background: #FF0000;
            }
          }
          .plan-button-p{
            margin:15px auto 0;
            width:100px;
            line-height:30px;
            background: #163277;
            color:#fff;
            text-align: center;
            border-radius:6px;
            cursor: pointer;
          }
        }
        .check-plan-map-for-box{
          z-index:1000!important;
        }
      }
    }
    .null-mapList{
      text-align: center;
      font-size:16px;
      color:#fff;
      line-height:300px;
    }
    .evacuation-shade-max-big-box{
      height:100%;
      width:100%;
      position: absolute;
      top:0;
      left:0;
      background: rgba(0,0,0,0.5);
      .evacuation-shade-big-box{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-815px;
        margin-top:-390px;
        height:780px;
        width:1630px;
        background: #011020;
        border:1px solid #116e8e;
        border-radius:10px;
        .position-title-p{
          position: absolute;
          top:31px;
          left:28px;
          font-size:16px;
          color:#fff;
          line-height:18px;
        }
        .position-off-button-p{
          position: absolute;
          top:32px;
          right:28px;
          font-size:16px;
          width:14px;
          height:14px;
          color:#24D1F9;
          cursor: pointer;
        }
        .evacuation-shade-map-max-big-box{
          width:1530px;
          height:570px;
          margin:77px 50px 40px;
          position: relative;
          /*border:1px solid #1E768E;*/
          .evacuation-shade-map-big-box{
            position: absolute;
            top: 50%;
            left: 50%;
            -webkit-user-select: none;
            .evacuation-shade-map-box{
              position: relative;
              border:1px dashed #24D1F9;
              overflow: hidden;
              .evacuation-shade-map-for-box{
                position: absolute;
                display: flex;
                flex-direction: column;
                overflow: hidden;
                .evacuation-shade-map-min-box{
                  height:100%;
                  position: relative;
                  .map-for-name-p{
                    padding:0 10px;
                    height:20px;
                    line-height:20px;
                    font-size:14px;
                    text-align: center;
                    color:#24D1F9;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                  .map-for-num-p{
                    padding:0 10px;
                    height:20px;
                    line-height:20px;
                    font-size:14px;
                    text-align: center;
                    color:#24D1F9;
                    overflow: hidden;
                    text-overflow:ellipsis;
                    white-space:nowrap;
                  }
                  .user-num-box{
                    position: absolute;
                    left:0;
                    display: flex;
                    img{
                      width:20px;
                      height:15px;
                      margin:10px;
                    }
                    p{
                      line-height:35px;
                      font-size:14px;
                      color:#24D1F9;
                    }
                  }
                  .user-num-one{
                    top:0;
                  }
                  .user-num-two{
                    bottom:0;
                  }
                  .position-box{
                    position: absolute;
                    font-size:14px;
                    overflow: hidden;
                  }
                  .center-move-door-p-t {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(180deg);
                  }
                  .center-move-door-p-b {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                  }
                  .center-move-door-p-l {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotate(90deg);
                  }
                  .center-move-door-p-r {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
                    background-size: 100% !important;
                    transform: rotateZ(270deg);
                  }
                  .lightTopOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_sjt.png");
                    background-size: 100%;
                  }
                  .lightTopOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_shang_hs.png");
                    background-size: 100%;
                  }
                  .lightBottomOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_xjt.png");
                    background-size: 100%;
                  }
                  .lightBottomOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_xia_hs.png");
                    background-size: 100%;
                  }
                  .lightLeftOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_zuo.png");
                    background-size: 100%;
                  }
                  .lightLeftOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_zou_hs.png");
                    background-size: 100%;
                  }
                  .lightRightOn {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_yuo.png");
                    background-size: 100%;
                  }
                  .lightRightOff {
                    background: url("../../../assets/ZDimages/emergencyManagement/icon_you_hs.png");
                    background-size: 100%;
                  }
                }
              }
              .for-map-box-one{
                background: rgba(7,36,54,1);
                border:1px solid #24D1F9;
              }
              .for-map-box{
                /*background: rgba(1,16,32,1);*/
                background: rgba(6,30,48,1);
              }
              .for-map-box-two{
                background: url("../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(5,45,43,1);
                background-size: 80px 80px;
              }
              .for-map-box-two-check{
                background: url("../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(50,205,50,1);
                background-size: 80px 80px;
              }
              .room-type-one{
                //选中
                background: rgba(30,118,142,0.4);
              }
              .room-type-two{
                //报警
                background: rgba(232,0,0,0.4);
                box-shadow:0 0 10px 1px #E80000 inset;
              }
              .room-type-three{
                //选中报警
                background: rgba(30,118,142,0.4);
                box-shadow:0 0 10px 1px #E80000 inset;
              }
              .room-type-noe{
                /*border:1px solid #666;*/
                /*background: rgba(102,102,102,0.6);*/
              }
            }
          }
        }
        .evacuation-button-p{
          width:500px;
          line-height:50px;
          border:1px solid #1E768E;
          box-shadow:0 0 10px 1px #1E768E inset;
          color:#24D1F9;
          border-radius:6px;
          text-align: center;
          margin:0 auto;
          cursor: pointer;
        }
      }
    }
    .shade-max-big-box{
      height:100%;
      width:100%;
      position: absolute;
      top:0;
      left:0;
      background: rgba(0,0,0,0.5);
      .shade-big-box{
        position: absolute;
        top:50%;
        left:50%;
        margin-left:-315px;
        margin-top:-125px;
        width:630px;
        height:250px;
        background: #011020;
        border:1px solid #116e8e;
        border-radius:10px;
        .off-button{
          position: absolute;
          right:15px;
          top:15px;
          color:#fff;
          font-size:16px;
          cursor: pointer;
        }
        .text-box{
          height:160px;
          color:#fff;
          overflow: hidden;
          p{
            padding:0 45px;
            font-size:16px;
            height:20px;
            line-height:20px;
            font-weight:500;
          }
          p:nth-child(1){
            margin-top:55px;
          }
          p:nth-child(2){
            margin-top:20px;
          }
        }
        .button-box{
          height:88px;
          border-top:2px solid #116e8e;
          display: flex;
          .button-null{
            flex:1;
          }
          .button-p{
            width:80px;
            height:30px;
            line-height:30px;
            margin-top:29px;
            text-align: center;
            border:1px solid #24D1F9;
            color:#fff;
            font-size:16px;
            border-radius:4px;
            cursor: pointer;
          }
          .button-p:hover{
            border:1px solid #24D1F9;
            background: #24D1F9;
            color:#fff;
          }
        }
      }
    }
  }
</style>
