v3-lab-web/src/views/emergencyManagement/performEvacuation/performEvacuationHome.vue

<!-- 应急疏散首页 -->
<template>
  <div class="performEvacuationHome" ref="maxBox">
    <div class="top-title-box">
      <div class="top-title-img-box">应 急 处 置</div>
      <div class="top-title-button-box" @click="goRoute">
        <i class="el-icon-switch-button"></i>
        <p>{{routeType?'退出全屏':'全屏'}}</p>
      </div>
    </div>
    <div class="content-box">
      <div class="content-left-max-big-box">
        <!--楼层选择/实时人数-->
        <div class="content-floor-num-box">
          <!--楼层选择-->
          <div class="content-floor-box">
            <el-select v-model="buildId" placeholder="请选择"
                       :popper-append-to-body="false"
                       @change="buildingChange"
                       style="width:240px;"
                       class="building-select-box">
              <el-option
                v-for="item in buildOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
                <div style="display: flex" v-if="item.planType">
                  <img src="@/assets/ZDimages/emergencyManagement/icon_lc_yc.png" style="margin:11px 10px 0 0;width:14px;height:12px;">
                  <p style="margin-right:24px;">{{ item.name }}</p>
                </div>
                <div style="display: flex" v-else>
                  <p  style="margin:0 24px;">{{ item.name }}</p>
                </div>
              </el-option>
            </el-select>
          </div>
          <!--实时人数-->
          <div class="content-num-box">
            <img src="@/assets/ZDimages/emergencyManagement/newImg/icon_zhpt_rs.png">
            <p>实时人数：</p>
            <p>{{floorUserNum}} 人</p>
          </div>
        </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" @click="clickMap"
                   :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':''
                           )))"
                     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">({{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 v-if="item.onLineNum!=null" 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>
                <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>
                  <!--<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="content-select-box">
            <div class="for-select-box">
              <p class="for-select-p" :class="checkFloor == index ?'for-select-p-check':''"
                 @click="clickFloor(item,index)"
                 v-for="(item,index) in floorOptions" :key="index">
                {{index+1}}
              </p>
            </div>
          </div>
        </div>
        <!--智能物联/危险源-->
        <div class="content-monitor-danger-box">
          <!--智能物联-->
          <div class="content-monitor-box">
            <div class="big-title-box">
              <img src="@/assets/ZDimages/emergencyManagement/icon_znjc_tb.png">
              <p>智能物联</p>
            </div>
            <p class="content-position-monitor-num-p">总数：{{monitorNum}}</p>
            <div class="content-monitor-for-box scrollbar-box" :class="!monitorList[0]?'content-monitor-null-box':''">
              <div class="monitor-for-box" v-for="(item,index) in monitorList" :key="index">
                <div class="monitor-num-box">
                  <p class="monitor-num-p">{{item.count}}</p>
                  <div class="monitor-img-box">
                    <!--svg组件-->
                    <!--<svg-icon class="svg-img" icon-class="http://192.168.1.43/labSystem/admin/statics/statics/bigFile/2022020818/404.svg"/>-->
                    <svg-icon v-if="item.exceptionIcon" class="svg-img" :icon-class="item.exceptionIcon"/>
                  </div>
                </div>
                <p class="monitor-name-p">{{item.name}}</p>
              </div>
              <div class="null-box" v-if="!monitorList[0]">
                <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_znjcsj.png">
                <p class="null-p">暂无数据</p>
              </div>
            </div>
          </div>
          <!--危险源-->
          <div class="content-danger-box">
            <div class="big-title-box">
              <img src="@/assets/ZDimages/emergencyManagement/icon_yygb_wxy.png">
              <p>危险源</p>
            </div>
            <div class="content-danger-for-box" :class="!dangerList.nameList[0]?'content-danger-null-box':''">
              <div class="danger-for-box" id="eCharts" v-show="dangerList.nameList[0]"></div>
              <div class="null-box" v-if="!dangerList.nameList[0]">
                <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_zwzzsj.png">
                <p class="null-p">暂无数据</p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--摄像头-->
      <div class="content-right-max-big-box">
        <div class="big-title-box">
          <img src="@/assets/ZDimages/emergencyManagement/icon_sysnry_jk.png">
          <p>视频监控</p>
        </div>
        <div class="content-video-for-box" :class="!videoList[0]?'content-video-null-box':''">
          <div class="video-for-box" v-if="videoType">
            <H5PlayerVideo style="margin:10px 0 0;"
              v-for="(item,index) in videoList" :key="index" :videoProps="item"></H5PlayerVideo>
          </div>
          <div class="pagination-box">
            <p class="flex-null-p"></p>
            <pagination
              v-show="videoTotal > 3"
              :total="videoTotal"
              layout="total, prev, pager, next"
              :page.sync="videoQueryParams.page"
              :limit.sync="videoQueryParams.pageSize"
              @pagination="videoInitialize"
            />
            <p class="flex-null-p"></p>
          </div>
          <div class="null-box" v-if="!videoList[0]">
            <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_zwsj.png">
            <p class="null-p">暂无数据</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import mqtt from 'mqtt'
  import { laboratoryBigViewGetBuildByBigView,laboratoryBigViewGetFloorByBigView,
    laboratoryBigViewHazardCensus, iotBigViewStatisticsHardwareDeviceType,
    laboratoryBigViewOnLineUserList, laboratoryExitLineGetRedisEvacuation } from "@/api/emergencyManagement/index";
  import { laboratoryBigViewSelectTriggerInfo } from "@/api/commonality/permission";
  import { iotCameraFindByCondition } from "@/api/basicsModules/index";
  import H5PlayerVideo from '@/components/H5PlayerVideo/H5PlayerVideo.vue';
  export default {
    name: 'performEvacuationHome',
    components: {
      H5PlayerVideo,
    },
    props:{
      propsBigData:{},
    },
    data () {
      return {
        //当前路由状态
        routeType:false,
        //楼栋数据
        buildId:null,
        buildOptions:[],
        //楼层数据
        floorId:null,
        floorOptions:[],
        //楼层人数
        floorUserNum:0,
        //选中楼层
        checkFloor:0,
        //智能物联
        monitorList:[],
        monitorNum:0,
        //危险源
        dangerList:{
          nameList: [],
          numList: [],
          maxNumList: [],
        },
        width:397,
        height:223,
        videoType:false,
        //视频数据
        videoQueryParams:{
          page:1,
          pageSize:3,
        },
        videoList:[],
        videoTotal:0,
        //地图数据
        mapList:[],
        zoomData:null,
        mapData:{},
        planMapList:[],
        mapType:false,
        //实验室选中/报警数据
        checkSubId:null,
        //优先显示的提示
        checkPlanId:null,
        //疏散灯
        lightOpic:"iot/hardware/evacuationLight/floor/",
        lightClient:{},
        //疏散
        evacuateOpic:"lab/floor/exit/line",
        evacuateClient:{},
        //预案
        planOpic:'lab/risk/plan/change',
        planClient:{},
      }
    },
    created () {
      //根据判定当前全屏状态
      if(this.$route.path == '/performEvacuationBig'){
        this.$set(this,'routeType',true);
      }else{
        this.$set(this,'routeType',false);
      }
      this.$set(this,'buildId',this.propsBigData.buildId);
      this.$set(this,'floorId',this.propsBigData.floorId);
    },
    mounted () {
      this.getBuild();
    },
    methods: {
      //地图点击跳转2级
      clickMap(){
        let obj = {
          buildId:this.buildId,
          floorId:this.floorId,
        }
        this.$parent.goPage(2,obj);
      },
      //获取楼层相关数据
      getFloorData(){
        //重置 摄像头查询参数
        this.$set(this,'videoQueryParams',{
          page:1,
          pageSize:3,
        });
        //获取楼层-摄像头列表;
        this.videoInitialize();
        //获取楼层布局数据
        this.laboratoryBigViewGetFloorByBigView();
        //获取楼层-总人数;
        this.laboratoryBigViewOnLineUserList();
        //获取楼层-智能物联设备列表;
        this.iotBigViewStatisticsHardwareDeviceType();
        //获取楼层-危险源统计;
        this.laboratoryBigViewHazardCensus();
        this.offLightMQTT('on')
        //判断是否已有链接
        if(!this.evacuateClient.unsubscribe){
          this.offEvacuateMQTT('on');
        }
        //判断是否已有链接
        if(!this.planClient.unsubscribe){
          this.offPlanMQTT('on');
        }
      },
      videoInitialize() {
        let self = this;
        self.$set(self, 'videoType', false);
        self.$set(self, 'videoList', []);
        // type 1.楼栋 2.楼层 3.楼道 4.实验室
        let obj = {
          page:this.videoQueryParams.page,
          pageSize:this.videoQueryParams.pageSize,
          buildId:'',
          floorId:this.floorId,
          passageway:'',
          subIds:[],
        };
        iotCameraFindByCondition(obj).then(response => {
          let list = [];
          for(let i=0;i<response.data.records.length;i++){
            list.push(
              {
                width: this.width, //(宽度:非必传-默认600)
                height: this.height, //(高度:非必传-默认338)
                url: response.data.records[i].streamUrl,
              }
            )
          }
          this.$set(this,'videoList',list)
          this.$set(this,'videoTotal',response.data.total);
          this.$nextTick(()=>{
            setTimeout(function(){
              self.$set(self, 'videoType', true);
            },1000);
          })
        });
      },
      //切换楼层
      clickFloor(item,index){
        this.$set(this,'checkFloor',index);
        this.$set(this,'floorId',item.id);
        this.getFloorData();
      },
      //楼栋数据选择
      buildingChange(){
        //获取楼层数据
        this.getFloor(2);
      },
      //跳转
      goRoute(){
        if(this.routeType){
          this.$router.push({
            path: "/emergencyManagement/performEvacuation",
            query: {
              buildId: this.buildId,
              floorId:this.floorId,
              type:1,
            }
          })
          this.exitfull();
        }else{
          this.$router.push({
            path: "/performEvacuationBig",
            query: {
              buildId: this.buildId,
              floorId:this.floorId,
              type:1,
            }
          })
          this.fullScreen();
        }
      },
      //获取楼栋数据
      getBuild(){
        laboratoryBigViewGetBuildByBigView({type:2}).then(response => {
          if(response.data[0]){
            this.$set(this,'buildOptions',response.data);
            if(!this.buildId){
              this.$set(this,'buildId',response.data[0].id);
            }
            //获取楼层数据
            this.getFloor(1);
          }
        })
      },
      //获取楼层数据
      getFloor(type){
        let self = this;
        laboratoryBigViewGetBuildByBigView({id:this.buildId,type:3}).then(response => {
          //重置 楼层数据
          this.$set(this,'floorOptions',response.data);
          if(type == 1){
            if(self.floorId){
              response.data.forEach((item,index)=>{
                if(item.id == self.floorId){
                  this.$set(this,'checkFloor',index);
                }
              })
            }else{
              this.$set(this,'floorId',response.data[0].id);
              //重置 选中楼层
              this.$set(this,'checkFloor',0);
            }
          }else if(type == 2){
            this.$set(this,'floorId',response.data[0].id);
            //重置 选中楼层
            this.$set(this,'checkFloor',0);
          }
          this.getFloorData();
        })
      },
      //获取楼层布局数据
      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();
          }
        })
      },
      //查询楼层人数
      laboratoryBigViewOnLineUserList(){
        laboratoryBigViewOnLineUserList({floorId:this.floorId}).then(response => {
          this.$set(this,'floorUserNum',response.data);
        })
      },
      //查询当前正在发生的预案
      laboratoryBigViewSelectTriggerInfo(){
        let self = this;
        laboratoryBigViewSelectTriggerInfo().then(response => {
          //楼栋预案标记
          for(let o=0;o<self.buildOptions.length;o++){
            let num = 0;
            for(let i=0;i<response.data.length;i++){
              if(response.data[i].buildId == self.buildOptions[o].id){
                num++
              }
            }
            self.$set(self.buildOptions[o],'planType',num != 0);
          }
          //实验室预案标记
          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();
        })
      },
      //查询当前楼栋楼层下发生的疏散数据
      laboratoryExitLineGetRedisEvacuation(){
        let self = this;
        let obj = {
          buildId:this.buildId,
          floorId:this.floorId,
        }
        laboratoryExitLineGetRedisEvacuation(obj).then(response => {
          if(response.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<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{
            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;
              }
            }
          }
          this.$forceUpdate();
        });
      },
      //获取楼层-智能物联设备列表;
      iotBigViewStatisticsHardwareDeviceType(){
        iotBigViewStatisticsHardwareDeviceType({floorId:this.floorId}).then(response => {
          response.data.devices.forEach((item)=>{
            item.exceptionIcon = item.exceptionIcon?localStorage.getItem('fileBrowseEnvironment')+item.exceptionIcon:null;
          })
          this.$set(this,'monitorList',response.data.devices);
          this.$set(this,'monitorNum',response.data.total);
        })
      },
      //查询实验室危险源
      laboratoryBigViewHazardCensus(){
        laboratoryBigViewHazardCensus({floorId:this.floorId}).then(response => {
          if(response.data[0]){
            let obj = {
              nameList: [],
              numList: [],
              maxNumList: [],
            }
            for(let i=0;i<response.data.length;i++){
              obj.nameList.push(response.data[i].name)
              obj.numList.push(response.data[i].total)
              obj.maxNumList.push(response.data[i].total+5)
            }
            this.$set(this,'dangerList',obj);
            this.eChartsFunction(this.dangerList);
          }else{
            let obj = {
              nameList: [],
              numList: [],
              maxNumList: [],
            }
            this.$set(this,'dangerList',obj);
            this.eChartsFunction(this.dangerList);
          }
        })
      },
      //eCharts表格
      eChartsFunction(obj){
        let self = this;
        let myChart = this.$echarts.init(document.getElementById('eCharts'));
        let option = {
          backgroundColor: 'rgba(0,0,0,0)',
          grid: {
            left: '6%',
            right: '4%',
            bottom: '5%',
            top: '10%',
            containLabel: true,
          },
          legend: [{
            show: false,
          }],
          xAxis: [
            {
              type: 'category',
              data: obj.nameList,
              axisLine: {
                lineStyle: {
                  color: 'rgba(5, 80, 93, 1)',
                },
              },
              axisLabel: {
                fontSize: 12,
                // color: 'black',
                color: '#fff',
                fontFamily: 'DIN-Medium',
                padding: [3, 0, 0, 0],
                //设置一行显示几个字,自己设置
                formatter: function (params) {
                  var newParamsName = "";
                  var paramsNameNumber = params.length;
                  var provideNumber = 6;
                  var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
                  if (paramsNameNumber > provideNumber) {
                    for (var p = 0; p < rowNumber; p++) {
                      var tempStr = "";
                      var start = p * provideNumber;
                      var end = start + provideNumber;
                      if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                      } else {
                        tempStr = params.substring(start, end) + "\n";
                      }
                      newParamsName += tempStr;
                    }
                  } else {
                    newParamsName = params;
                  }
                  return newParamsName;
                },
                interval: 0,//使x轴上的文字显示完全,
              },

              axisTick: {
                show: false,
              },
            },
            {
              type: 'category',
              data: obj.nameList,
              show: false,
            },],
          yAxis: [{
            type: 'value',
            name: "",
            nameTextStyle: {
              fontSize: 14,
              fontFamily: 'Source Han Sans CN',
              fontWeight: '400',
              color: 'rgba(255, 255, 255, 1)',
              padding: [0, 75, -8, 0]
            },
            nameGap: 24,
            axisLine: {
              show: true,
              lineStyle: {
                color: 'rgba(5, 80, 93, 1)',
              }
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: 'rgba(5, 80, 93, 1)',
                type: "dashed",
              },
            },
            alignTicks: true,
            axisLabel: {
              fontSize: 14,
              color: 'rgba(255, 255, 255, 1)',
              fontFamily: 'DIN-Medium',
              padding: [0, 7, 0, 0]
            },
            splitArea: {
              show: false,
            },
          }],
          series: [
            {
              type: 'bar',
              label: {
                normal: {
                  show: true,
                  position: 'top',
                  fontSize: 12,
                  color: 'rgba(16, 213, 223, 1)',
                  formatter: function (params) {
                    return params.value
                  },
                  offset: [0, -10],
                },
              },
              tooltip: {
                show: false
              },
              barWidth: 14,
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0, x2: 0, y: 0, y2: 1,
                  colorStops: [
                    { offset: 0, color: '#00FCFC' },
                    { offset: 1, color: '#016FCC' }
                  ]
                },
              },
              name: '',
              data: obj.numList
            },
            {
              // 分隔
              type: 'pictorialBar',
              itemStyle: {
                normal: {
                  color: 'rgba(3, 72, 84, 0.5)',
                },
              },
              symbolRepeat: 'fixed',//重复
              symbolMargin: 2,//上下间隔
              symbol: 'rect',//图形类型
              symbolClip: true,//是否裁剪
              symbolSize: [20, 2],//图形的大小,可以用数组分开表示宽和高
              symbolPosition: 'center',//图形的定位位置
              symbolOffset: [0, 2],//图形相对于原本位置的偏移
              data: obj.numList,
              z: 0,
              zlevel: 1,
            },
            {
              type: 'bar',
              barWidth: 40,
              xAxisIndex: 1,
              itemStyle: {
                color: 'rgba(0, 0, 0, 0)'
              },
              name: '',
              data: obj.maxNumList
            },
          ],
        }
        myChart.setOption(option);
      },
      //计算布局最大尺寸
      calculateMapMax(list) {
        //基础参数
        let height = 500;
        let width = 1020;
        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)
      },/*********************************** MQTT相关 *********************************/
      //疏散-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){
            // console.log('疏散-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){
            // console.log('疏散灯-message',message);
            let data = JSON.parse(message)
            // console.log('疏散灯-data',data);
            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);
                  }
                }
              }
            }
          }
        });
      },
      //预案-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){
            // console.log('预案-message',message);
            //获取预案数据
            this.laboratoryBigViewSelectTriggerInfo();
          }
        });
      },
      //退出全屏
      exitfull() {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      },
      //进入全屏
      fullScreen() {
        let element = document.documentElement;
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.msRequestFullscreen) {
          element.msRequestFullscreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.webkitRequestFullscreen) {
          element.webkitRequestFullscreen();
        }
      },
    },
    beforeDestroy() {
      //清除MQTT
      let self = this;
      self.offEvacuateMQTT();
      self.offLightMQTT();
      self.offPlanMQTT();
    },
  }
</script>
<style scoped lang="scss">
  .performEvacuationHome{
    flex:1;
    position: relative;
    display: flex;
    flex-direction: column;
    width:1920px;
    height:1080px;
    background: url("../../../assets/ZDimages/emergencyManagement/img_bg.png") repeat;
    background-size: 100% 100%;
    overflow: hidden;
    .top-title-box{
      height:92px;
      position: relative;
      .top-title-img-box{
        position: absolute;
        top:0;
        height:92px;
        left:41px;
        width: 1837px;
        background: url("../../../assets/ZDimages/emergencyManagement/sy_db_bg.png");
        background-size: 100% 100%;
        text-align: center;
        font-size:40px;
        line-height:82px;
        color:#24d1f9;
        font-weight:900;
        letter-spacing:10px
      }
      .top-title-button-box{
        display: flex;
        position: absolute;
        top:0;
        right:0;
        width:110px;
        cursor: pointer;
        i{
          margin:0 10px;
          line-height:40px;
          color:#24D1F9;
          font-size:18px;
        }
        p{
          line-height:40px;
          color:#24D1F9;
          font-size:14px;
        }
      }
    }
    .content-box{
      flex: 1;
      display: flex;
      overflow: hidden;
      .content-left-max-big-box{
        flex:1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .content-floor-num-box{
          height:87px;
          display: flex;
          .content-floor-box{
            ::v-deep .building-select-box{
              margin:12px 0 0 33px;
              .el-input__inner{
                background:rgba(0,0,0,0);
                border:1px solid #24D1F9;
                box-shadow:0 0 5px 1px #24D1F9 inset;
                color:#fff;
              }
              .el-input__inner:hover{
                border:1px solid #24D1F9;
                box-shadow:0 0 5px 1px #24D1F9 inset;
              }
            }
            ::v-deep .el-select-dropdown{
              width:240px;
              background:#01294d;
              border:1px solid #24D1F9;
              .el-select-dropdown__item{
                background: rgba(0,0,0,0);
                color:#fff;
              }
              .el-select-dropdown__item:hover{
                background: #24D1F9;
              }
            }
          }
          .content-num-box{
            margin-left:92px;
            display: flex;
            img{
              margin:20px 13px 0 0;
              display: block;
              width:26px;
              height:23px;
            }
            p{
              margin-top: 12px;
              line-height:40px;
              color:#24D1F9;
            }
            p:nth-child(2){
              margin-right:22px;
              font-size:16px;
            }
            p:nth-child(3){
              font-size:30px;
              font-weight:700;
            }
          }
        }
        .content-map-select-box{
          flex:1;
          display: flex;
          .content-map-box{
            margin-left:92px;
            flex:1;
            height:500px;
            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;
                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 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{
                  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{
                    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-mapList{
              text-align: center;
              font-size:16px;
              color:#fff;
              line-height:300px;
            }
          }
          .content-select-box{
            width:128px;
            height: 534px;
            margin-right:30px;
            display: flex;
            overflow: hidden;
            .for-select-box::-webkit-scrollbar{
              width: 6px!important;     /*高宽分别对应横竖滚动条的尺寸*/
              height: 6px!important;
            }
            .for-select-box::-webkit-scrollbar-thumb{
              border-radius: 5px!important;
              -webkit-box-shadow: inset 0 0 5px #116e8e!important;
              background: #116e8e!important;
            }
            .for-select-box::-webkit-scrollbar-track{
              -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0)!important;
              border-radius: 0!important;
              background: rgba(255,255,255,0)!important;
            }
            .for-select-box{
              flex:1;
              margin: 0 0 51px 29px;
              padding-right:30px;
              display: flex;
              flex-direction: column-reverse;
              align-items: flex-end;
              overflow-y: scroll;
              .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);
              }
            }
          }
        }
        .content-monitor-danger-box{
          height:367px;
          display: flex;
          .content-monitor-box{
            width:954px;
            position: relative;
            overflow: hidden;
            .content-position-monitor-num-p{
              position: absolute;
              top:27px;
              right:90px;
              color:#CCD6D6;
              font-size:16px;
            }
            .big-title-box{
              margin-left:33px;
            }
            .content-monitor-for-box{
              margin-left:33px;
              margin-top:20px;
              width:870px;
              height:260px;
              position: relative;
              .monitor-for-box{
                display: inline-block;
                margin:14px 30px 0 0;
                .monitor-num-box{
                  background: url("../../../assets/ZDimages/emergencyManagement/monitor/icon_znjc_bg.png");
                  background-size: 100%;
                  width:77px;
                  height:86px;
                  .monitor-num-p{
                    line-height:24px;
                    text-align: center;
                    font-size:24px;
                    color:#23FFFC;
                  }
                  .monitor-img-box{
                    height:62px;
                    width:77px;
                    //栅格布局居中
                    display: grid;
                    align-items: center;
                    justify-items: center;
                    overflow: hidden;
                    .svg-img{
                      display: block;
                      width:40px;
                      height:40px;
                      color:#24D1F9;
                      /*svg投影改色*/
                      //filter: drop-shadow(#24D1F9 100px 0);
                      //transform: translateX(-100px);
                    }
                  }
                }
                .monitor-name-p{
                  text-align: center;
                  font-size:16px;
                  line-height:30px;
                  color:#fff;
                }
              }
              .null-box{
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-88px;
                margin-top:-91px;
                width:176px;
                height:183px;
                .null-img{
                  width:176px;
                  height:143px;
                }
                .null-p{
                  margin-top:20px;
                  line-height:20px;
                  text-align: center;
                  font-size:16px;
                  color:#CCD6D6;
                }
              }
            }
            .content-monitor-null-box{
              background-color: #021e30;
            }
            //滚动条
            .scrollbar-box::-webkit-scrollbar{
              width: 6px!important;     /*高宽分别对应横竖滚动条的尺寸*/
              height: 6px!important;
            }
            .scrollbar-box::-webkit-scrollbar-thumb{
              border-radius: 5px!important;
              -webkit-box-shadow: inset 0 0 5px #116e8e!important;
              background: #116e8e!important;
            }
            .scrollbar-box::-webkit-scrollbar-track{
              -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0)!important;
              border-radius: 0!important;
              background: rgba(255,255,255,0)!important;
            }
          }
          .content-danger-box{
            width:539px;
            .content-danger-for-box{
              margin-top:20px;
              width:480px;
              height:260px;
              position: relative;
              .danger-for-box{
                width:480px;
                height:260px;
              }
              .null-box{
                position: absolute;
                left:50%;
                top:50%;
                margin-left:-91px;
                margin-top:-98px;
                width:183px;
                height:196px;
                .null-img{
                  width:183px;
                  height:156px;
                }
                .null-p{
                  margin-top:20px;
                  line-height:20px;
                  text-align: center;
                  font-size:16px;
                  color:#CCD6D6;
                }
              }
            }
            .content-danger-null-box{
              background-color: #021e30;
            }
          }
        }
      }
      .content-right-max-big-box{
        width:427px;
        .big-title-box{
          margin-top:12px;
        }
        .content-video-for-box{
          margin:20px 30px 30px 0;
          height:870px;
          position: relative;
          display: flex;
          flex-direction: column;
          overflow: hidden;
          .video-for-box{
            /*height:818px;*/
            height:740px;
          }
          ::v-deep .pagination-box{
            display: flex;
            .flex-null-p{
              flex:1;
            }
            .el-pagination__total,.active{
              color:#24D1F9;
            }
            .active{
              border:1px solid #24D1F9!important;
            }
            .btn-next,.btn-prev,.number{
              border:1px solid #19667e;
              background-color: rgba(0,0,0,0);
            }
          }
          .null-box{
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-82px;
            margin-top:-75px;
            width:165px;
            height:150px;
            .null-img{
              width:165px;
              height:110px;
            }
            .null-p{
              margin-top:20px;
              line-height:20px;
              text-align: center;
              font-size:16px;
              color:#CCD6D6;
            }
          }
        }
        .content-video-null-box{
          background-color: #021e30;
        }
      }
      .big-title-box{
        width:181px;
        height:59px;
        background: url("../../../assets/ZDimages/emergencyManagement/img_zjdp_bg.png");
        background-size: 100%;
        display: flex;
        img{
          width:18px;
          height:18px;
          margin:27px 16px 0 20px;
        }
        p{
          margin-top:16px;
          line-height:40px;
          color:#fff;
          font-size:16px;
        }
      }
    }
  }
</style>