v3-school-level-big-data-web/src/views/emergencyManagement/pageComponent/mapComponent.vue

<template>
  <div class="mapComponent">
    <div class="top-num-max-box">
      <div class="for-address-box" v-for="(item,index) in addressList" :key="index">
        <p class="el-icon-d-arrow-right icon-p" v-if="index != 0"></p>
        <p class="name-p">{{item}}</p>
      </div>
      <img class="num-img" src="@/assets/ZDimages/icon_bg_rs@1x.png">
      <p class="name-p">实时人数</p>
      <div class="for-p" v-for="(item,index) in floorUserNum" :key="item.value">
        <p>{{item.label}}</p>
      </div>
      <p class="name-p" style="margin-left:10px;">人</p>
    </div>
    <!--楼层图/楼层选择-->
    <div class="content-map-select-box">
      <!--楼层图-->
      <div class="content-map-box">
        <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" @click="planButton('on',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-name-p" :style="'margin-top:'+((item.h/2)-20)+'px;'">{{item.roomType == '-99'?item.roomName:(item.subName?item.subName:'未绑定')}}</p>-->
                <!--</el-tooltip>-->
                <!--编号-->
                <el-tooltip class="item" effect="dark" :content="item.roomNum" placement="top">
                  <p class="map-for-num-p" :style="'height:'+item.h+'px;line-height:'+item.h+'px;'">{{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>
                <!--报警灯-->
                <img class="plan-img plan-img-animation" src="@/assets/ZDimages/emergencyManagement/img_fjbj_jb@1x.png" v-if="item.planType">
                <!--实验室人数-->
                <div v-if="item.onLineNum!=null && item.onLineNum > 0" class="user-num-box" :class="item.doorList[0].toward == 'top'?'user-num-two':'user-num-one'">
                  <img src="@/assets/ZDimages/emergencyManagement/icon_pmt_ry.png">
                  <p>{{item.onLineNum}} 人</p>
                </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"-->
                     <!--: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 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 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;'"-->
                 <!--v-for="(item,index) in planMapList" :key="item.subId" v-if="item.planType">-->
              <!--<div class="plan-top-button-box">-->
              <!--</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>-->
              <!--&lt;!&ndash;<p class="plan-button-p" @click="shadeButton(7,item.groupId)">结束预案</p>&ndash;&gt;-->
            <!--</div>-->
          </div>
        </div>
        <img v-if="!mapList[0]" class="null-img" src="@/assets/ZDimages/null-data-1.png">
      </div>
    </div>
  </div>
</template>
<script>
  import { laboratoryBigViewGetFloorByBigView,laboratoryBigViewSelectTriggerInfo } from "@/api/index";
  export default {
    name: 'mapComponent',
    data () {
      return {
        mapType:false,
        mapData:[],
        mapList:[],
        zoomData:null,
        //地址
        addressList:[],
        //人数
        planMapList:[],
        floorId:null,
        floorUserNum:null,
        //报警页面状态
        planType:false,
      }
    },
    created(){

    },
    mounted(){
      this.laboratoryBigViewSelectTriggerInfo();
    },
    methods:{
      // 报警页面查看关闭
      planButton(type,item){
        // if(type == 'off'){
        //   this.$set(this,'planType',false);
        // }else if(type == 'on'){
        //   if(item.planType){
        //     this.$set(this,'planType',true);
        //   }
        // }
      },
      initialize(item){
        this.$set(this,'floorId',item.floorId);
        this.$nextTick(()=>{
          this.laboratoryBigViewGetFloorByBigView();
        })
      },
      //刷新地址
      getAddress(list){
        this.$set(this,'addressList',list);
      },
      //刷新人数
      getUserNum(num){
        if(num == 0){
          this.$set(this,'floorUserNum',[{
            value:'a0',
            label:'0',
          }]);
        }else{
          let list = [];
          let newNum = num;
          newNum = newNum+'';
          for(let i=0;i<newNum.length;i++){
            list.push({
              value:'a'+i,
              label:newNum[i]+'',
            })
          }
          this.$set(this,'floorUserNum',list);
        }
      },
      //查询当前正在发生的预案
      laboratoryBigViewSelectTriggerInfo(){
        let self = this;
        laboratoryBigViewSelectTriggerInfo().then(response => {
          //实验室预案标记
          for(let o=0;o<self.mapList.length;o++){
            let num = 0;
            if(self.mapList[o].type == 1){
              let newData = {};
              for(let i=0;i<response.data.length;i++){
                if(response.data[i].subId == self.mapList[o].subId){
                  num++
                  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);
                  }
                }
              }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);
                  }
                }
              }
            }
          }
          this.$forceUpdate();
        })
      },
      //获取楼层布局数据
      laboratoryBigViewGetFloorByBigView(){
        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].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);
              this.$set(this,'mapList',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);
            }else{
              this.$set(this,'mapData',{});
              this.$set(this,'mapList',[]);
              this.$set(this,'mapType',false);
              this.$set(this,'planMapList',[]);
            }
            //获取预案列表
            this.laboratoryBigViewSelectTriggerInfo();
            //获取疏散数据
            // this.laboratoryExitLineGetRedisEvacuation();
          }else{
            this.$set(this,'mapType',false);
            this.$set(this,'mapData',[]);
            this.$set(this,'mapList',[]);
          }
        })
      },
      //计算布局最大尺寸
      calculateMapMax(list) {
        //基础参数
        let height = 700;
        let width = 1428;
        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)
      },
    },
  }
</script>
<style scoped lang="scss">
  .mapComponent{
    margin:83px 20px 0;
    height:837px;
    width:1650px;
    background: linear-gradient(180deg, rgba(4, 117, 129, 0.2) 0%, rgba(0, 15, 22, 0) 100%);
    .top-num-max-box{
      padding:0 51px;
      height:100px;
      display: flex;
      .for-address-box{
        display: flex;
      }
      .name-p{
        line-height:100px;
        font-size:24px;
        color:#ffffff;
      }
      .icon-p{
        width:60px;
        text-align: center;
        color:#03B7CA;
        font-size:20px;
        line-height:100px;
      }
      .num-img{
        display: block;
        margin:30px 10px 0 96px;
        width:40px;
        height:40px;
      }
      .for-p{
        margin:30px 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{
          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-map-select-box{
      flex:1;
      display: flex;
      .content-map-box{
        flex:1;
        height:700px;
        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 solid #33494E;
            /*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{
                  font-size:14px;
                  text-align: center;
                  color:#fff;
                  overflow: hidden;
                  text-overflow:ellipsis;
                  white-space:nowrap;
                }
                .user-num-box{
                  position: absolute;
                  right:0;
                  bottom:0;
                  display: flex;
                  img{
                    display: block;
                    width:18px;
                    height:18px;
                    margin-right:5px;
                  }
                  p{
                    height:18px;
                    line-height:18px;
                    font-size:14px;
                    color:#fff;
                  }
                }
                .user-num-one{
                  top:0;
                }
                .user-num-two{
                  bottom:0;
                }
                .position-box{
                  position: absolute;
                  font-size:14px;
                  overflow: hidden;
                }
                .plan-img{
                  width:27px;
                  height:27px;
                  display: block;
                  position: absolute;
                  top:0;
                  left:0;
                }
                .plan-img-animation {
                  animation: rotate 1s infinite linear;
                }
                @keyframes rotate {
                  from {
                    opacity:1;
                  }
                  to {
                    opacity:0;
                  }
                }
                .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 dashed #fff;
            }
            .for-map-box{
              background: rgba(1,16,32,1);
              /*background: #001319;*/
            }
            .for-map-box-two{
              /*background: url("../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(5,45,43,0.5);*/
              background: url("../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(50,205,50,1);
              background-size: 60px 60px;
              .position-box{
                position: absolute;
                font-size:14px;
                overflow: hidden;
              }
              .center-move-door-p-t {
                background: url("../../../assets/ZDimages/emergencyManagement/icon_aqtd_m.png") !important;
                background-size: 100% !important;
                transform: rotate(180deg);
              }
              .center-move-door-p-b {
                background: url("../../../assets/ZDimages/emergencyManagement/icon_aqtd_m.png") !important;
                background-size: 100% !important;
              }
              .center-move-door-p-l {
                background: url("../../../assets/ZDimages/emergencyManagement/icon_aqtd_m.png") !important;
                background-size: 100% !important;
                transform: rotate(90deg);
              }
              .center-move-door-p-r {
                background: url("../../../assets/ZDimages/emergencyManagement/icon_aqtd_m.png") !important;
                background-size: 100% !important;
                transform: rotateZ(270deg);
              }
            }
            .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{
                height:22px;
              }
              .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-img{
          display: block;
          width:300px;
          margin:100px auto;
        }
      }
      .content-select-box{
        width:158px;
        position: relative;
        .for-select-box{
          position: absolute;
          bottom:31px;
          left:59px;
          display: flex;
          flex-direction: column-reverse;
          .for-select-p:nth-child(1){
            border-bottom:1px solid #19667e;
            border-bottom-left-radius:4px;
            border-bottom-right-radius:4px;
          }
          .for-select-p:last-child{
            border-top-left-radius:4px;
            border-top-right-radius:4px;
          }
          .for-select-p{
            cursor: pointer;
            width:40px;
            line-height:40px;
            text-align: center;
            color:#19667e;
            border-top:1px solid #19667e;
            border-left:1px solid #19667e;
            border-right:1px solid #19667e;
          }
          .for-select-p-check{
            /*border:1px solid #20d0fa !important;*/
            color:#fff;
            box-shadow: inset 0 0 4px 1px rgba(32,208,250,1);
          }
        }
      }
    }
  }
</style>