FE-V2-PC/src/views/newEvacuationBigDataHome.vue

<template>
    <div class="newEvacuationBigDataHome" ref="maxBox">
      <newEvacuationBigDataSubPageKYDXNH v-if="versionField() === 'kuangYeDaXue_nanHu'"></newEvacuationBigDataSubPageKYDXNH>
      <newEvacuationBigDataSubPagePublic v-else></newEvacuationBigDataSubPagePublic>
      <div class="evacuation-out-button-position-box">
        <i class="el-icon-switch-button"></i>
        <p @click="goRoute">{{routeType?'退出全屏':'全屏'}}</p>
      </div>
      <div class="left-max-big-box">
        <div class="left-top-big-box">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_znjc_tb.png">
            <p>智能监测</p>
          </div>
          <div class="left-top-for-big-box scrollbar-box">
            <div class="left-top-for-box" v-for="(item,index) in lotStaticList" :key="index">
              <p>{{item.sensorTotal}}</p>
              <p>{{item.sensorName}}</p>
              <img v-if="item.sensorType == 1" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_zcbg.png">
              <img v-if="item.sensorType == 2" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_hyjc.png">
              <img v-if="item.sensorType == 3" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_qtjc.png">
              <img v-if="item.sensorType == 4" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_wsd.png">
              <img v-if="item.sensorType == 5" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_wsd(1).png">
              <img v-if="item.sensorType == 6" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_fcjc.png">
              <img v-if="item.sensorType == 7" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_znjk.png">
              <img v-if="item.sensorType == 8" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_znmj.png">
              <img v-if="item.sensorType == 9" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_ytj.png">
              <img v-if="item.sensorType == 10" src="@/assets/ZDimages/bigData3_2/home/icon_dqkz.png">
              <img v-if="item.sensorType == 11" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_zntf.png">
              <img v-if="item.sensorType == 12" src="@/assets/ZDimages/bigData3_2/home/img_zdmh_znmh.png">
              <img src="@/assets/ZDimages/bigData3_2/home/icon_znjc_bg.png">
            </div>
          </div>
          <p class="hazardSum-p" v-if="lotStaticSum">总数：{{lotStaticSum}}</p>
        </div>
        <div class="left-bottom-big-box">
          <div class="big-title-box">
            <img src="@/assets/ZDimages/bigData3_2/icon_znjc_tb.png">
            <p>危险源</p>
          </div>
          <div id="eCharts"></div>
          <p class="hazardSum-p" v-if="hazardSum">总数：{{hazardSum}}</p>
          <p class="eCharts-null-p" v-if="!eChartsData.nameList[0]">暂无数据</p>
        </div>
      </div>
      <div class="center-max-big-box">
        <div class="top-button-box">
          <div class="top-button-left-select-box">
            <el-select v-model="buildingId" placeholder="请选择"
                       :popper-append-to-body="false"
                       @change="buildingChange"
                       class="building-select-box">
              <el-option
                v-for="item in buildingOptions"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
          <div class="top-button-right-num-box">

          </div>
        </div>
        <div id="container" ref="container" @mousedown="getMouseXY($event)">

        </div>
        <div class="position-floor-user-box">
          <img src="@/assets/ZDimages/bigData3_2/icon_zhpt_rs.png">
          <p>实时人数：</p>
          <p>{{userNum}}人</p>
        </div>
        <div class="position-floor-button-box" v-if="mapList[0]">
          <p class="position-floor-for-button-p" :class="item.checkType?'check-button-box':''"
             @click="dataDispose(item.index)"
            v-for="(item,index) in maxMapButtonList" :key="index">
            {{item.indexName}}
          </p>
        </div>
      </div>
      <div class="right-max-big-box scrollbar-box">
        <p class="null-p" v-if="!monitorNumList[0]">暂无数据</p>
        <div class="monitor-max-for-box" v-for="(item,index) in monitorNumList" :key="index">
          <div class="monitor-title-box">
            <p>{{item.name}}</p>
            <i :class="index == monitorType?'el-icon-arrow-up':'el-icon-arrow-down'" @click="getMonitorUrl(index)"></i>
          </div>
          <div class="video-mx-big-box" v-show="index == monitorType"
               v-for="(videoItem,videoIndex) in item.hardwareList" :key="videoIndex">
            <video class="video-box" :id="videoItem" ref="videoRef" :poster="videoCover"
                   autoplay controls  muted width="366px" height="210px"></video>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import mqtt from 'mqtt'
  import flvjs from 'flv.js'
  import { subjectInfo,startUrl } from "@/api/laboratory/subject";
  import { getBuildOrFloorList,exitHazardTotalByBuildId,getLotStatis,
           getBuildOrFloorDetailList,getBuildOrFloorInfo,selectTriggerInfo } from '@/api/evacuationBigData/index.js'
  import * as Three from 'three'
  import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js'
  import { mergeBufferGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils'
  import { SceneUtils } from 'three/examples/jsm/utils/SceneUtils.js'
  import newEvacuationBigDataSubPageKYDXNH from './differenceComponent/newEvacuationBigDataSubPageKYDXNH.vue'
  import newEvacuationBigDataSubPagePublic from './differenceComponent/newEvacuationBigDataSubPagePublic.vue'
  export default {
    name: 'newEvacuationBigDataHome',
    components: {
      newEvacuationBigDataSubPageKYDXNH,
      newEvacuationBigDataSubPagePublic,
    },
    computed:{
      Obj(){
        return this.$store.state.settings.planData
      }
    },
    watch:{
      Obj(newVal,oldVal){
        //可以对数据执行相应的操作
        console.log(newVal,oldVal)
        this.selectTriggerInfo();
      }
    },
    data() {
      return {
        videoCover:window.location.href.split('://')[0]+'://' + this.judgmentNetworkReturnAddress() + "/admin/" + localStorage.getItem('videoCover'),
        //当前路由状态
        routeType:false,
        containerType:false,
        buttonIndex:null,
        mapData:[{"x":1,"y":160,"w":797,"h":100,"type":"2","lightList":[{"type":"light","state":"4","w":40,"h":40,"x":520,"y":30,"relayType":2,"configName":"2","configStatus":"2","key":"light0","openType":false},{"type":"light","state":"3","w":40,"h":40,"x":266,"y":30,"relayType":2,"configName":"1","configStatus":"1","key":"light1","openType":false}],"key":"corridor0"},{"x":1,"y":1,"w":398,"h":159,"type":"1","doorList":[{"type":"door","toward":"bottom","w":34,"h":34,"x":193,"y":123}],"roomType":1,"roomNum":"1-1","roomName":null,"subId":160,"subName":"管理员测试实验室1","key":"lab0","id":486,"buildId":48,"floorId":49,"online":0,"loginAdmin":true,"planType":false},{"x":399,"y":1,"w":398,"h":159,"type":"1","doorList":[{"type":"door","toward":"bottom","w":34,"h":34,"x":181,"y":123}],"roomType":-99,"roomNum":"1-2","roomName":"其他房间","subId":-1,"subName":null,"key":"lab1","id":487,"buildId":48,"floorId":49,"online":null,"loginAdmin":false,"planType":false},{"x":1,"y":260,"w":301,"h":139,"type":"1","doorList":[{"type":"door","toward":"top","w":34,"h":34,"x":131,"y":2}],"roomType":-99,"roomNum":"1-3","roomName":"其他房间","subId":-1,"subName":null,"key":"lab2","id":488,"buildId":48,"floorId":49,"online":null,"loginAdmin":false,"planType":false},{"x":302,"y":260,"w":316,"h":139,"type":"1","doorList":[{"type":"door","toward":"top","w":34,"h":34,"x":153,"y":2}],"roomType":-99,"roomNum":"1-4","roomName":"其他房间","subId":-1,"subName":null,"key":"lab3","id":489,"buildId":48,"floorId":49,"online":null,"loginAdmin":false,"planType":false},{"x":618,"y":260,"w":181,"h":139,"type":"3","doorList":[{"type":"door","toward":"top","w":34,"h":34,"x":80,"y":2}],"key":"escape0","roomCheckType":false}],
        maxMapButtonList:[],
        maxMapList:[],
        mapList:[],
        // 地基数据
        foundation:{
          bgColor:'#999',
          bgOpacity:1,
          x:null,//镜头位置
          y:null,//镜头位置
          spacing:300,
          visualDistance:null,
          planColor:'#f15b6c'
        },
        //数据类型1.实验室
        roomData_1:{
          bgColor:'#2a5caa',
          bgOpacity:0.4,
        },
        //数据类型 2.走廊
        roomData_2:{
          bgColor:'#84bf96',
          bgOpacity:1,
        },
        //数据类型 3.逃生通道
        roomData_3:{
          bgColor:'#007d65',
          bgOpacity:0.4,
        },
        //dom
        container:null,
        //场景
        scene: null,
        camera:null,
        controls:null,
        renderer:null,
        //楼栋数据
        buildingId:null,
        buildingOptions:[],
        //楼栋下传感器数据
        lotStaticSum:null,
        lotStaticList:[],
        //楼栋下危险源数量
        hazardSum:null,
        //实时人数
        userNum:null,
        //eCharts
        eChartsData:{
          nameList: [],
          numList: [],
          maxNumList: [],
        },
        //mqtt
        //全局MQTT相关
        allClient:{},
        planTopic:"lab/newexit/line",//预案
        //楼栋MQTT相关
        buildingClient:{},
        userTopic:"lab/horn",//消息
        //摄像头数据
        monitorNumList:[],
        monitorType:null,
        videoList:[],
        videoPlayList:[],
        //动画数据
        animateData:null,
      }
    },
    created() {
      if(this.$route.path == '/newEvacuationBigData'){
        this.$set(this,'routeType',true);
      }else{
        this.$set(this,'routeType',false);
      }
    },
    mounted(){
      // this.offAllMQTT('on');
      //获取楼栋数据
      this.getBuilding();
    },
    methods: {
      //数据处理
      dataDispose(num){
        let self = this;
        if(this.maxMapList[num]){
          let list = [];
          let index = 0;
          if(num == self.maxMapList.length-1){
            index = 0
          }else if(num-2<=0 && num+2>=(self.maxMapList.length-1)){
            index = 0;
          }else if (num > (self.maxMapList.length-6) && (num-2) > 0){
            if(num + 2 > (self.maxMapList.length-1)){
              index = self.maxMapList.length-5;
            }else{
              index = num - 2;
            }
          }else{
            if(num - 2 > 0){
              index = num - 2;
            }else{
              index = 0;
            }
          }
          let pushNum = 0
          for (let i=0 ;i < self.maxMapList.length;i++){
            if(index == i && pushNum < 5){
              list.push(self.maxMapList[i])
              self.maxMapList[i].checkType = true;
              pushNum ++
              index ++
            }else{
              self.maxMapList[i].checkType = false;
            }
          }
          this.$set(this,'mapList',list);
          if(this.mapList[0]){
            let newList = [];
            for(let i=0;i<self.maxMapList.length;i++){
              let obj = JSON.parse(JSON.stringify(self.maxMapList[i]))
              obj.index = i;
              newList.unshift(obj);
            }
            this.$set(this,'maxMapButtonList',newList);
            this.$set(this,'buttonIndex',num);
            this.selectTriggerInfo();
          }
        }
      },
      //初始化
      initAdd(){
        let self = this;
        let maxWidth = 0;
        let maxHeight = 0;
        let minWidth = 0;
        let minHeight = 0;
        //数据初始化
        for(let i=0;i<self.mapList.length;i++){
          self.mapList[i].maxWidth = 0;
          self.mapList[i].maxHeight = 0;
          for(let o=0;o<self.mapList[i].relationalData.length;o++){
            if ((self.mapList[i].relationalData[o].x + self.mapList[i].relationalData[o].w) > self.mapList[i].maxWidth) {
              self.mapList[i].maxWidth = self.mapList[i].relationalData[o].x + self.mapList[i].relationalData[o].w
            }
            if ((self.mapList[i].relationalData[o].y + self.mapList[i].relationalData[o].h) > self.mapList[i].maxHeight) {
              self.mapList[i].maxHeight = self.mapList[i].relationalData[o].y + self.mapList[i].relationalData[o].h
            }
          }
          //找出最大高度
          if(self.mapList[i].maxHeight > maxHeight){
            maxHeight = self.mapList[i].maxHeight;
          }
          //找出最大宽度
          if(self.mapList[i].maxWidth > maxWidth){
            maxWidth = self.mapList[i].maxWidth;
          }
          //找出最小高度
          if(minHeight == 0){
            minHeight = self.mapList[i].maxHeight;
          }else if(self.mapList[i].maxHeight < minHeight){
            minHeight = self.mapList[i].maxHeight;
          }
          //找出最小宽度
          if(minWidth == 0){
            minWidth = self.mapList[i].maxWidth;
          }else if(self.mapList[i].maxWidth < minWidth){
            minWidth = self.mapList[i].maxWidth;
          }
        }
        this.$set(this.foundation,'x',maxHeight);
        this.$set(this.foundation,'y',maxWidth);
        //根据楼层宽度或高度来设定每层之间的间距
        // this.$set(this.foundation,'spacing',minWidth>minHeight?minHeight:minWidth);
        if(maxWidth>maxHeight){
          if(maxWidth>1120){
            maxWidth/1120
          }else{

          }
        }else{
          if(maxHeight>1120){

          }else{

          }
        }
        this.$set(this.foundation,'spacing',maxWidth>maxHeight?maxHeight*0.6:maxWidth*0.6);
        this.$set(this.foundation,'visualDistance',maxWidth>maxHeight?maxWidth:maxHeight);
        /*
         * 创建场景对象Scene
         */
        // this.scene = new Three.Scene()
        //创建层数据
        let maxList = [];
        for(let i=0;i<self.mapList.length;i++){
          /*
           * 创建楼层地基
           */
          let geometryList = [];
          let materialList = [];
          let geometry = new Three.BoxGeometry(self.mapList[i].maxWidth, 4, self.mapList[i].maxHeight);
          //位置偏移
          geometry.translate((self.mapList[i].maxWidth/2)-self.mapList[i].maxWidth/2,
            (i*self.foundation.spacing),
            (self.mapList[i].maxHeight/2)-self.mapList[i].maxHeight/2)
          //材质
          let material = new Three.MeshLambertMaterial()
          //透明度开启关闭
          material.transparent = true;
          //透明度
          material.opacity = self.foundation.bgOpacity;
          material.emissive.setStyle(self.foundation.bgColor);
          //添加
          geometryList.push(geometry)
          materialList.push(material)
          /*
           * 创建楼层房间
           */
          for(let o=0;o<self.mapList[i].relationalData.length;o++){
            let geometry = new Three.BoxGeometry(self.mapList[i].relationalData[o].w, self.mapList[i].relationalData[o].type == 2?4:1, self.mapList[i].relationalData[o].h);
            //位置偏移
            geometry.translate((self.mapList[i].relationalData[o].x+(self.mapList[i].relationalData[o].w/2))-self.mapList[i].maxWidth/2,
              ((i*self.foundation.spacing)+(self.mapList[i].relationalData[o].type == 2?4:20)),
              (self.mapList[i].relationalData[o].y+(self.mapList[i].relationalData[o].h/2))-self.mapList[i].maxHeight/2)
            //材质
            let material = new Three.MeshPhongMaterial()
            //区分房间类型 生成文字
            //透明度开启关闭
            material.transparent = true;
            //透明度
            material.opacity = self.mapList[i].relationalData[o].type == 1?self.roomData_1.bgOpacity:(self.mapList[i].relationalData[o].type == 2?self.roomData_2.bgOpacity:(self.mapList[i].relationalData[o].type == 3?self.roomData_3.bgOpacity:''))
            if(self.mapList[i].relationalData[o].planType){
              material.emissive.setStyle(self.foundation.planColor);
            }else{
              material.emissive.setStyle(self.mapList[i].relationalData[o].type == 1?self.roomData_1.bgColor:(self.mapList[i].relationalData[o].type == 2?self.roomData_2.bgColor:(self.mapList[i].relationalData[o].type == 3?self.roomData_3.bgColor:'')));
            }
            //添加
            geometryList.push(geometry)
            materialList.push(material)
            if(self.mapList[i].relationalData[o].type != 2){
              //生成墙体
              let qt_1 = new Three.BoxGeometry(self.mapList[i].relationalData[o].w, 20, 2);
              qt_1.translate((self.mapList[i].relationalData[o].x+(self.mapList[i].relationalData[o].w/2))-self.mapList[i].maxWidth/2,
                ((i*self.foundation.spacing)+10),
                self.mapList[i].relationalData[o].y-self.mapList[i].maxHeight/2)
              let cz_1 = new Three.MeshLambertMaterial()
              cz_1.opacity = 1
              if(self.mapList[i].relationalData[o].planType){
                cz_1.emissive.setStyle(self.foundation.planColor);
              }else{
                cz_1.emissive.setStyle(self.mapList[i].relationalData[o].type == 1?self.roomData_1.bgColor:(self.mapList[i].relationalData[o].type == 2?self.roomData_2.bgColor:(self.mapList[i].relationalData[o].type == 3?self.roomData_3.bgColor:'')));
              }
              geometryList.push(qt_1)
              materialList.push(cz_1)
              let qt_2 = new Three.BoxGeometry(self.mapList[i].relationalData[o].w, 20, 2);
              qt_2.translate(self.mapList[i].relationalData[o].x+(self.mapList[i].relationalData[o].w/2)-self.mapList[i].maxWidth/2,
                ((i*self.foundation.spacing)+10),
                self.mapList[i].relationalData[o].y+self.mapList[i].relationalData[o].h-self.mapList[i].maxHeight/2)
              let cz_2 = new Three.MeshLambertMaterial()
              cz_2.opacity = 1
              if(self.mapList[i].relationalData[o].planType){
                cz_2.emissive.setStyle(self.foundation.planColor);
              }else{
                cz_2.emissive.setStyle(self.mapList[i].relationalData[o].type == 1?self.roomData_1.bgColor:(self.mapList[i].relationalData[o].type == 2?self.roomData_2.bgColor:(self.mapList[i].relationalData[o].type == 3?self.roomData_3.bgColor:'')));
              }
              geometryList.push(qt_2)
              materialList.push(cz_2)
              let qt_3 = new Three.BoxGeometry(2, 20, self.mapList[i].relationalData[o].h);
              qt_3.translate(self.mapList[i].relationalData[o].x-self.mapList[i].maxWidth/2,
                ((i*self.foundation.spacing)+10),
                self.mapList[i].relationalData[o].y+(self.mapList[i].relationalData[o].h/2)-self.mapList[i].maxHeight/2)
              let cz_3 = new Three.MeshLambertMaterial()
              cz_3.opacity = 1
              if(self.mapList[i].relationalData[o].planType){
                cz_3.emissive.setStyle(self.foundation.planColor);
              }else{
                cz_3.emissive.setStyle(self.mapList[i].relationalData[o].type == 1?self.roomData_1.bgColor:(self.mapList[i].relationalData[o].type == 2?self.roomData_2.bgColor:(self.mapList[i].relationalData[o].type == 3?self.roomData_3.bgColor:'')));
              }
              geometryList.push(qt_3)
              materialList.push(cz_3)
              let qt_4 = new Three.BoxGeometry(2, 20, self.mapList[i].relationalData[o].h);
              qt_4.translate(self.mapList[i].relationalData[o].x+self.mapList[i].relationalData[o].w-self.mapList[i].maxWidth/2,
                ((i*self.foundation.spacing)+10),
                self.mapList[i].relationalData[o].y+(self.mapList[i].relationalData[o].h/2)-self.mapList[i].maxHeight/2)
              let cz_4 = new Three.MeshLambertMaterial()
              cz_4.opacity = 1
              if(self.mapList[i].relationalData[o].planType){
                cz_4.emissive.setStyle(self.foundation.planColor);
              }else{
                cz_4.emissive.setStyle(self.mapList[i].relationalData[o].type == 1?self.roomData_1.bgColor:(self.mapList[i].relationalData[o].type == 2?self.roomData_2.bgColor:(self.mapList[i].relationalData[o].type == 3?self.roomData_3.bgColor:'')));
              }
              geometryList.push(qt_4)
              materialList.push(cz_4)


              //生成文字图片
              let canvas = document.createElement("canvas");
              let ctx = canvas.getContext('2d')
              canvas.width = self.mapList[i].relationalData[o].w/2
              canvas.height = self.mapList[i].relationalData[o].h/2
              //制作矩形
              ctx.fillStyle = "gray";
              ctx.fillRect(0, 0, 0, 0)
              //设置文字
              ctx.fillStyle = "white";
              ctx.font = 'normal 14px "楷体"'
              ctx.fillText(self.mapList[i].relationalData[o].type==3?'紧急出口':(self.mapList[i].relationalData[o].roomName?self.mapList[i].relationalData[o].roomName:self.mapList[i].relationalData[o].subName),0, 20)
              //生成图片
              let url = canvas.toDataURL('image/png');
              let geometry1 = new Three.PlaneGeometry(self.mapList[i].relationalData[o].w/2, 60)
              geometry1.translate(self.mapList[i].relationalData[o].x+(self.mapList[i].relationalData[o].w/2)-self.mapList[i].maxWidth/2,
                ((i*self.foundation.spacing)+10),
                self.mapList[i].relationalData[o].y+(self.mapList[i].relationalData[o].h/2)-self.mapList[i].maxHeight/2)
              let material1 = new Three.MeshBasicMaterial({
                map: new Three.TextureLoader().load(url),
                side: Three.DoubleSide,
                opacity: 1,
                transparent: true, // 设为透明
              })
              geometryList.push(geometry1)
              materialList.push(material1)
            }
          }

          maxList.push({
            geometryList:geometryList,
            materialList:materialList,
            name:self.mapList[i].name,
            floorId:self.mapList[i].id,
            subNum:self.mapList[i].subNum,
          })



          // //合并数据
          // let merged = mergeBufferGeometries(geometryList, true)
          // let mergeMesh = new Three.Mesh(merged, materialList)
          // //给合并项增加名称
          // mergeMesh.name = self.mapList[i].name;
          // mergeMesh.floorId = self.mapList[i].id;
          // mergeMesh.subNum = self.mapList[i].subNum;
          // //插入合并数据
          // self.scene.add(mergeMesh);
        }

        //清除动画数据
        if(this.renderer){
          cancelAnimationFrame(this.animateData);
          this.scene.traverse((child) => {
            if (child.material) {
              for(let i=0;i<child.material.length;i++){
                child.material[i].dispose();
              }
            }
            if (child.geometry) {
              child.geometry.dispose();
            }
            child = null;
          });
          this.container.innerHTML = '';
          this.renderer.forceContextLoss();
          this.renderer.dispose();
          this.scene.clear();
          this.$set(this,'scene',null);
          this.$set(this,'camera',null);
          this.$set(this,'controls',null);
          this.$set(this.renderer,'domElement',null);
          this.$set(this,'renderer',null);
          this.$set(this,'animateData',null);
          this.$set(this,'container',null);
        }
        this.scene = new Three.Scene()
        for(let i=0;i<maxList.length;i++){
          //合并数据
          let merged = mergeBufferGeometries(maxList[i].geometryList, true)
          let mergeMesh = new Three.Mesh(merged, maxList[i].materialList)
          //给合并项增加名称
          mergeMesh.name = maxList[i].name;
          mergeMesh.floorId = maxList[i].floorId;
          mergeMesh.subNum = maxList[i].subNum;
          //插入合并数据
          self.scene.add(mergeMesh);
        }
        this.lens();
      },
      //镜头
      lens(){
        this.container = document.getElementById('container')
        /*
         * 创建相机对象
         */
        this.camera = new Three.PerspectiveCamera(75, this.container.clientWidth / this.container.clientHeight, 0.1, 3000)
        //根据楼层间距与显示层数设定相机距离
        this.camera.position.set(0,
          this.foundation.visualDistance+(this.foundation.spacing*this.maxMapButtonList.length)*0.2,
          this.foundation.visualDistance+(this.foundation.spacing*this.maxMapButtonList.length)*0.2)
        /*
         * 创建渲染器对象
         */
        this.renderer = new Three.WebGLRenderer({antialias: true})
        this.renderer.setClearColor(0xf4f4f4, 0)
        //设置渲染区域尺寸
        this.renderer.setSize(this.container.clientWidth, this.container.clientHeight)
        //设置背景颜色
        //body元素中插入canvas对象
        this.container.appendChild(this.renderer.domElement)
        //执行渲染操作   指定场景、相机作为参数
        this.renderer.render(this.scene, this.camera)
        //镜头控制器
        this.createControls();
        //执行渲染
        // this.render();
      },
      //渲染
      render() {
        this.renderer.render(this.scene,this.camera);//执行渲染操作
      },
      // 创建控件对象
      createControls() {
        this.controls = new OrbitControls(this.camera, this.renderer.domElement)
        this.controls.enablePan = false // 是否开启右键拖拽
        this.controls.maxPolarAngle = 1 // 上下翻转的最大角度
        this.controls.minPolarAngle = 1 // 上下翻转的最小角度
        this.controls.autoRotate = true // 是否自动旋转
        this.controls.enableZoom = true // 是否可以缩放 默认是true
        this.controls.dampingFactor = 0.5 // 动态阻尼系数 就是鼠标拖拽旋转灵敏度，阻尼越小越灵敏
        // this.controls.addEventListener('change', this.render)
        this.animate();
      },
      //旋转动画
      animate() {
        let t0 = new Date()
        this.controls.update();
        let t1 = new Date(); //本次时间
        let t = t1 - t0; // 时间差
        this.camera.rotateY(0.0001 * t / 3); //物体的均匀从左到又平移可以用相机旋转Y轴来实现
        this.controls.target = new Three.Vector3(0,((this.foundation.visualDistance/40)*(this.maxMapButtonList.length*4)),0);
        this.renderer.render(this.scene, this.camera);
        this.animateData = requestAnimationFrame(this.animate);
      },
      // 点击事件
      getMouseXY(event){
        let self = this;
        let dom = document.getElementById('container');
        var mouse=new Three.Vector3();
        var raycaster=new Three.Raycaster();
        if(this.routeType){
          mouse.x = ((event.clientX - dom.offsetParent.offsetLeft) / dom.clientWidth) * 2 - 1;//因为布局原因获取父级的offsetLeft
          mouse.y = -((event.clientY - dom.offsetTop) / dom.clientHeight) * 2 + 1;
        }else{
          let borderLeft = Math.round(this.$refs.maxBox.getBoundingClientRect().left);
          let borderTop = Math.round(this.$refs.maxBox.getBoundingClientRect().top);
          let str = this.$refs.maxBox.style.transform + '';
          let index1=str.indexOf('(')
          let index2=str.indexOf(')')
          str = this.accMul(parseFloat(str.substring(index1+1,index2)),100)
          let x = event.clientX - borderLeft;
          x = x/str
          x = this.accMul(x,100)
          x = x - dom.offsetParent.offsetLeft
          let y = event.clientY - borderTop;
          y = y/str
          y = this.accMul(y,100)
          y = y - dom.offsetTop
          mouse.x = (x / dom.clientWidth) * 2 - 1
          mouse.y = -(y / dom.clientHeight) * 2 + 1;
        }
        raycaster.setFromCamera(mouse, this.camera);
        const intersects = raycaster.intersectObjects(this.scene.children);
        if(intersects[0]){
          if(intersects[0].object.subNum > 0){
            for(let i=0;i<self.mapList.length;i++){
              if(self.mapList[i].id == intersects[0].object.floorId){
                for(let o=0;o<self.mapList[i].relationalData.length;o++){
                  if(self.mapList[i].relationalData[o].type == '1'){
                    if(self.mapList[i].relationalData[o].roomType != '-99'){
                      if(self.mapList[i].relationalData[o].planType){
                        for(let x=0;x<self.mapList[i].buildFloorLayoutVoList.length;x++){
                          if(self.mapList[i].buildFloorLayoutVoList[x].loginAdmin){
                            if(self.mapList[i].buildFloorLayoutVoList[x].subId == self.mapList[i].relationalData[o].subId){
                              if(self.$route.query.buildId){
                                delete self.$route.query.buildId;
                              }
                              if(self.$route.query.subId){
                                delete self.$route.query.subId;
                              }
                              if(self.$route.query.floorId){
                                delete self.$route.query.floorId;
                              }
                              if(self.$route.query.groupId){
                                delete self.$route.query.groupId;
                              }
                              let obj = {
                                buildId:self.buildingId,
                                floorId:self.mapList[i].id,
                                subId:self.mapList[i].buildFloorLayoutVoList[x].subId,
                                planType:true
                              }
                              self.$parent.goPage(2,obj);
                              return
                            }
                          }
                        }
                      }
                    }
                  }
                }
                for(let o=0;o<self.mapList[i].buildFloorLayoutVoList.length;o++){
                  if(self.mapList[i].buildFloorLayoutVoList[o].loginAdmin){
                    if(self.$route.query.buildId){
                      delete self.$route.query.buildId;
                    }
                    if(self.$route.query.subId){
                      delete self.$route.query.subId;
                    }
                    if(self.$route.query.floorId){
                      delete self.$route.query.floorId;
                    }
                    if(self.$route.query.groupId){
                      delete self.$route.query.groupId;
                    }
                    let obj = {
                      buildId:self.buildingId,
                      floorId:self.mapList[i].id,
                      subId:self.mapList[i].buildFloorLayoutVoList[o].subId,
                      planType:false
                    }
                    self.$parent.goPage(2,obj);
                    return
                  }
                }
              }
            }
          }
        }
      },
      //获取楼栋数据
      getBuilding(){
        getBuildOrFloorList({type:2,parentId:''}).then(response => {
          if(response.data[0]){
            this.$set(this,'buildingOptions',response.data);
            this.$set(this,'buildingId',response.data[0].id);
            //获取楼层数据
            this.getFloor();
            //获取楼栋人数
            this.getBuildOrFloorInfo();
            //获取eCharts数据
            this.exitHazardTotalByBuildId();
            //获取楼栋传感器数据接口
            this.getLotStatis();
            //楼栋MQTT
            this.offBuildingMQTT('on');
          }
        })
      },
      //楼栋数据选择
      buildingChange(){
        this.$set(this,'monitorType',null);
        //获取楼层数据
        this.getFloor();
        //获取楼栋人数
        this.getBuildOrFloorInfo();
        //获取eCharts数据
        this.exitHazardTotalByBuildId();
        //获取楼栋传感器数据接口
        this.getLotStatis();
        //楼栋MQTT
        this.offBuildingMQTT('on');
      },
      //获取楼栋人数
      getBuildOrFloorInfo(){
        let obj = {
          type:2,
          id:this.buildingId
        }
        getBuildOrFloorInfo(obj).then(response => {
          this.$set(this,'userNum',response.data.online);
        })
      },
      //获取楼层数据
      getFloor(){
        getBuildOrFloorDetailList({parentId : this.buildingId}).then(response => {
          let list = [];
          let monitorList = [];
          for(let i=0;i<response.data.length;i++){
            let obj = {
              id:response.data[i].id,
              name:response.data[i].name,
              parentId:response.data[i].parentId,
              subNum:response.data[i].subNum,
              buildFloorLayoutVoList:response.data[i].buildFloorLayoutVoList,
              relationalData:JSON.parse(response.data[i].exitLineVertexList[0].layoutJoinData),
              checkType:false,
              indexName:i+1,
            }
            list.push(obj);
            //处理楼层摄像头
            if(response.data[i].sparseHardwareList[0]){
              let newObj = {
                name:response.data[i].name,
                type:i==0?true:false,
                hardwareList:[],
                urlList:[],
              }
              for(let o=0;o<response.data[i].sparseHardwareList.length;o++){
                newObj.hardwareList.push(response.data[i].sparseHardwareList[o].hardwareNum)
              }
              monitorList.push(newObj)
            }
          }
          this.$set(this,'maxMapList',list);
          //处理楼层摄像头
          this.$set(this,'monitorNumList',monitorList);
          if(monitorList[0]){
            this.getMonitorUrl(0);
          }
          //初始化
          this.dataDispose(0);
        })
      },
      //获取楼栋摄像头
      async getMonitorUrl(index){
        let self = this;
        if(index !== this.monitorType){
          this.videoOff()
          let obj = {
            page:"1",
            count:"100",
            deviceIds:this.monitorNumList[index].hardwareList+'',
          };
          const { data } = await startUrl(obj);
          if(data){
            let newData = data;
            let urlText = window.location.href;
            let videoList = [];
            if(urlText.indexOf(localStorage.getItem('ipIdentify')) != -1){
              for(let i=0;i<newData.length;i++){
                let obj = {
                  divId:newData[i].deviceID,
                  hasAudio:false,
                  height:false,
                  videoUrl:newData[i].ws_flv,
                }
                videoList.push(obj)
              }
            }else{
              for(let i=0;i<newData.length;i++){
                let text = localStorage.getItem('cameraUrl');
                let url = newData[i].ws_flv;
                url = url.split("rtp/");
                let newUrl = text+'rtp/'+url[1];
                let obj = {
                  divId:newData[i].deviceID,
                  hasAudio:false,
                  height:false,
                  videoUrl:newUrl,
                }
                videoList.push(obj)
              }
            }
            this.$set(this,'videoList',videoList);
            this.$set(this,'monitorType',index);
            setTimeout(function(){
              self.videoPlay();
            },300);
          }
        }
      },
      //播放视频流
      videoPlay(){
        let self = this;
        this.loading = false;
        let videoList = JSON.parse(JSON.stringify(this.videoList))
        for(let i=0;i<videoList.length;i++){
          let obj = {
            player :{},
            flvPlayer:{}
          };
          obj.player = document.getElementById(videoList[i].divId);
          obj.flvPlayer = flvjs.createPlayer(
            {
              // isLive: true, //=> 是否为直播流
              // hasAudio: false, //=> 是否开启声音
              type: 'flv', //媒体类型 flv 或 mp4
              url: videoList[i].videoUrl //视频流地址
            },
            {
              enableStashBuffer: true,//启用 IO 存储缓冲区。 如果您需要实时流播放（最小延迟），请设置为 false，但如果存在网络抖动，则可能会停止。
              stashInitialSize: 128,//IO 存储缓冲区初始大小。 默认值为 384KB。 指示合适的大小可以改善视频加载/搜索时间。
              isLive: true,//是否是直播
              lazyLoadRecoverDuration: 30,//指示以秒为单位的lazyLoad 恢复时间边界。
              autoCleanupSourceBuffer: true,//进行自动清理
              autoCleanupMaxBackwardDuration: 3 * 60,//3 * 60 当向后缓冲持续时间超过这个值（以秒为单位）时，对 SourceBuffer 进行自动清理
              autoCleanupMinBackwardDuration: 2 * 60,//2 * 60 指示在执行自动清理时为后向缓冲区保留的持续时间（以秒为单位）。
            }
          );
          self.videoPlayList.push(obj);
        }
        for(let i=0;i<self.videoPlayList.length;i++){
          self.videoPlayList[i].flvPlayer.attachMediaElement(self.videoPlayList[i].player);
          self.videoPlayList[i].flvPlayer.load(); //加载
          self.videoPlayList[i].flvPlayer.play(); //加载
        }
      },
      //断开视频流
      videoOff(){
        let self = this;
        if(self.videoPlayList[0]){
          for(let i=0;i<self.videoPlayList.length;i++){
            if(self.videoPlayList[i].flvPlayer){
              self.videoPlayList[i].flvPlayer.pause();
              self.videoPlayList[i].flvPlayer.unload();
              self.videoPlayList[i].flvPlayer.detachMediaElement();
              self.videoPlayList[i].flvPlayer.destroy();
              self.videoPlayList[i].flvPlayer = null;
            }
          }
          self.$set(self,'videoList',[]);
          self.$set(self,'videoPlayList',[]);
        }
      },
      //获取楼栋下传感器数据
      getLotStatis(){
        getLotStatis({buildId:this.buildingId}).then(response => {
          this.$set(this,'lotStaticList',response.data.lotStaticList);
          this.$set(this,'lotStaticSum',response.data.lotStaticSum);
        })
      },
      //获取eCharts数据
      exitHazardTotalByBuildId(){
        exitHazardTotalByBuildId({buildId:this.buildingId}).then(response => {
          if(response.data.hazardTotal[0]){
            this.$set(this,'hazardSum',response.data.hazardSum);
            let obj = {
              nameList: [],
              numList: [],
              maxNumList: [],
            }
            for(let i=0;i<response.data.hazardTotal.length;i++){
              obj.nameList.push(response.data.hazardTotal[i].name)
              obj.numList.push(response.data.hazardTotal[i].percentage)
              obj.maxNumList.push(100)
            }
            this.$set(this,'eChartsData',obj);
            this.eChartsFunction(this.eChartsData);
          }else{
            this.$set(this,'hazardSum',0);
            let obj = {
              nameList: [],
              numList: [],
              maxNumList: [],
            }
            this.$set(this,'eChartsData',obj);
            this.eChartsFunction(this.eChartsData);
          }
        });
      },
      //eCharts表格
      eChartsFunction(obj){
        let self = this;
        // document.getElementById('eCharts').innerHTML = '';
        this.myChart = this.$echarts.init(document.getElementById('eCharts'));
        let option = {
          backgroundColor: 'rgba(0,0,0,0)',
          grid: {
            left: '10%',
            right: '10%',
            bottom: '10%',
            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]
              },

              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: 12,
              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
            },
          ],
        }
        this.myChart.setOption(option);
      },
      //查询预案发生
      selectTriggerInfo(){
        let self = this;
        selectTriggerInfo().then(response => {
          if(response.data[0]){
            for(let i=0;i<response.data.length;i++){
              for(let o=0;o<self.mapList.length;o++){
                for(let x=0;x<self.mapList[o].relationalData.length;x++){
                  if (self.mapList[o].relationalData[x].type == '1' && self.mapList[o].relationalData[x].roomType!='-99'){
                    if(response.data[i].subId == self.mapList[o].relationalData[x].subId){
                      self.mapList[o].relationalData[x].planType = true;
                      //判断预案是否进入过
                      for(let s=0;s<response.data.length;s++){
                        if(response.data[s].riskAttribute != '1'&&response.data[s].ifCheck != '1'){
                          setTimeout(function (){
                            if(self.$route.query.buildId){
                              delete self.$route.query.buildId;
                            }
                            if(self.$route.query.subId){
                              delete self.$route.query.subId;
                            }
                            if(self.$route.query.floorId){
                              delete self.$route.query.floorId;
                            }
                            if(self.$route.query.groupId){
                              delete self.$route.query.groupId;
                            }
                            let obj = {
                              buildId:response.data[s].buildId,
                              floorId:response.data[s].floorId,
                              subId:response.data[s].subId,
                              groupId:response.data[s].groupId,
                              planType:true
                            }
                            self.$parent.goPage(2,obj);
                          },5000)
                          break
                        }
                      }
                    }else{
                      self.mapList[o].relationalData[x].planType = false;
                    }
                  }
                }
              }
            }
          }else{
            for(let o=0;o<self.mapList.length;o++){
              for(let x=0;x<self.mapList[o].relationalData.length;x++){
                if (self.mapList[o].relationalData[x].type == '1' && self.mapList[o].relationalData[x].roomType!='-99'){
                  self.mapList[o].relationalData[x].planType = false;
                }
              }
            }
          }
          this.initAdd();
        })
      },
      //全局-MQTT订阅
      onAllMQTT(){
        let self = this;
        this.allClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password: localStorage.getItem('mqttPassword')
        });
        this.allClient.on("connect", e =>{
          console.log("连接成功");
          this.allClient.subscribe(self.planTopic, (err) => {
            if (!err) {
              console.log("预案-订阅成功:" + self.planTopic);
            }
          });
        });
        this.allClient.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            if(data){
              console.log('data',data);
              if(topic == self.planTopic){
                //传感器状态
                console.log('预案-状态');
                self.selectTriggerInfo();
              }
            }
          }
        });
      },
      //楼层-MQTT订阅
      onBuildingMQTT(){
        let self = this;
        this.buildingClient = mqtt.connect(localStorage.getItem('mqttUrl'), {
          username: localStorage.getItem('mqttUser'),
          password: localStorage.getItem('mqttPassword')
        });
        this.buildingClient.subscribe(self.userTopic+self.buildingId, (err) => {
          if (!err) {
            console.log("实验室人数-订阅成功:" + self.userTopic+self.buildingId);
          }
        });
        this.buildingClient.on("message", (topic, message) => {
          if (message){
            let data = JSON.parse(message)
            if(data){
              console.log('data',data);
              if(topic == (self.userTopic+self.buildingId)){
                console.log('实验室人数-状态');
                //实验室人数
                self.getBuildOrFloorInfo();
              }
            }
          }
        });
      },
      //取消订阅-全局-关闭MQTT连接
      offAllMQTT(type){
        console.log('type',type)
        let self = this;
        //判断是否已有连接如果有责断开
        if(this.allClient.unsubscribe){
          this.allClient.unsubscribe(self.planTopic, error => {
            if (error) {
              console.log('预案-MQTT断开报错=>', error)
            }
          })
          this.allClient.end();
          this.$set(this,'allClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.onAllMQTT();
        }
      },
      //取消订阅-楼层-关闭MQTT连接
      offBuildingMQTT(type){
        let self = this;
        //判断是否已有连接如果有责断开
        if(this.buildingClient.unsubscribe){
          this.buildingClient.unsubscribe(self.userTopic+self.buildingId, error => {
            if (error) {
              console.log('实验室人数-MQTT断开报错=>', error)
            }
          })
          this.buildingClient.end();
          this.$set(this,'buildingClient',{});
        }
        //判断传入参数如果存在 发起一次新的连接
        if(type){
          this.onBuildingMQTT();
        }
      },
      //跳转
      goRoute(){
        if(this.routeType){
          this.$router.push({
            path: "/emergencyManagement/newPerformEvacuation"
          })
        }else{
          this.$router.push({
            path: "/newEvacuationBigData"
          })
        }
      },
      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)
      },
    },
    beforeDestroy() {
      //清除定时器
      let self = this;
      self.videoOff();
      // self.offAllMQTT();
      self.offBuildingMQTT();
      cancelAnimationFrame(self.animateData);
      self.scene.traverse((child) => {
        if (child.material) {
          for(let i=0;i<child.material.length;i++){
            child.material[i].dispose();
          }
        }
        if (child.geometry) {
          child.geometry.dispose();
        }
        child = null;
      });
      self.container.innerHTML = '';
      self.renderer.forceContextLoss();
      self.renderer.dispose();
      self.scene.clear();
      self.$set(self,'scene',null);
      self.$set(self,'camera',null);
      self.$set(self,'controls',null);
      self.$set(self.renderer,'domElement',null);
      self.$set(self,'renderer',null);
      self.$set(self,'animateData',null);
      self.$set(self,'container',null);
      console.log("beforeDestroy");
    },
  }
</script>

<style scoped lang="scss">
  .newEvacuationBigDataHome{
    flex:1;
    position: relative;
    display: flex;
    width:1920px;
    height:1080px;
    background: url("../assets/ZDimages/bigData3_2/img_bg.png") repeat;
    background-size: 100% 100%;
    p{
      margin:0;
    }
    .evacuation-title-position-box{
      position: absolute;
      top:0;
      height:92px;
      left:41px;
      width: 1837px;
      background: url("../assets/ZDimages/bigData3_2/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
    }
    .evacuation-out-button-position-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;
      }
    }
    .left-max-big-box{
      width:400px;
      .left-top-big-box{
        height:688px;
        margin-top:71px;
        position: relative;
        .left-top-for-big-box{
          .left-top-for-box{
            display: inline-block;
            width:78px;
            height:118px;
            position: relative;
            margin:30px 0 0 43px;
            p:nth-child(1){
              line-height: 32px;
              font-size:20px;
              font-weight:700;
              text-align: center;
              color:#24d1f9;
            }
            p:nth-child(2){
              line-height: 18px;
              font-size:16px;
              font-weight:500;
              text-align: center;
              color:#fff;
            }
            img:nth-child(3){
              position: absolute;
              bottom:14px;
              left:19px;
              width:40px;
              height:40px;
            }
            img:nth-child(4){
              position: absolute;
              bottom:0;
              left:0;
              width:78px;
              height:86px;
            }
          }
        }
        .hazardSum-p{
          position: absolute;
          top:26px;
          right:60px;
          color:#fff;
          font-size:14px;
          text-align: right;
        }
      }
      .left-bottom-big-box{
        height:321px;
        position: relative;
        #eCharts{
          height:262px;
        }
        .eCharts-null-p{
          position: absolute;
          top:180px;
          left:165px;
          color:#fff;
          font-size:14px;
        }
        .hazardSum-p{
          position: absolute;
          top:26px;
          right:60px;
          color:#fff;
          font-size:14px;
          text-align: right;
        }
      }
      .big-title-box{
        margin:0 0 0 29px;
        width:181px;
        height:59px;
        background: url("../assets/ZDimages/bigData3_2/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;
        }
      }
    }
    .center-max-big-box{
      flex:1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      position: relative;
      .top-button-box{
        height:226px;
        position: relative;
        .top-button-left-select-box{
          position: absolute;
          top:146px;
          left:69px;
        }
        .top-button-right-num-box{

        }
      }
      #container{
        flex:1;
        background: rgba(0,0,0,0)!important;
      }
      .position-floor-user-box{
        position: absolute;
        right:120px;
        top:146px;
        height:40px;
        display: flex;
        img{
          width:26px;
          height:24px;
          margin:8px 16px 0 0;
        }
        p:nth-child(2){
          font-size:16px;
          color:#24D1F9;
          line-height: 40px;
        }
        p:nth-child(3){
          margin-left:10px;
          font-size:20px;
          color:#24D1F9;
          line-height: 40px;
          font-weight:900;
        }
      }
      .position-floor-button-box{
        position: absolute;
        right:90px;
        top:300px;
        .position-floor-for-button-p:first-child{
          border-top:2px solid #1e7790;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
        }
        .position-floor-for-button-p:last-child{
          border-bottom:2px solid #1e7790;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
        }
        .check-button-box:first-child{
          border-top:2px solid #24d1f9;
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;
        }
        .check-button-box:last-child{
          border-bottom:2px solid #24d1f9;
          border-bottom-left-radius: 4px;
          border-bottom-right-radius: 4px;
        }
        .position-floor-for-button-p{
          width:38px;
          height:36px;
          text-align: center;
          line-height:36px;
          color:#1e7790;
          border-left:2px solid #1e7790;
          border-right:2px solid #1e7790;
          border-bottom:1px solid #1e7790;
          border-top:1px solid #1e7790;
          font-size:12px;
          cursor: pointer;
        }
        .check-button-box{
          border-left:2px solid #24d1f9;
          border-right:2px solid #24d1f9;
          border-bottom:1px solid #24d1f9;
          border-top:1px solid #24d1f9;
          color:#fff;
          box-shadow:0 0 6px 1px #24D1F9 inset;
        }
      }
    }
    .right-max-big-box{
      width:400px;
      margin-top:71px;
      .null-p{
        text-align: center;
        line-height:500px;
        color:#fff;
      }
      .monitor-max-for-box:nth-child(1){
        .monitor-title-box{
          border-top:none;
        }
      }
      .monitor-max-for-box{
        width:366px;
        .monitor-title-box{
          display: flex;
          border-top:1px dashed #24D1F9;
          border-bottom:1px dashed #24D1F9;
          p{
            color:#24D1F9;
            font-size:16px;
            line-height:54px;
            flex:1;
            margin-left:7px;
          }
          i{
            color:#24D1F9;
            font-size:18px;
            line-height:54px;
            text-align: center;
            width:20px;
            cursor: pointer;
            margin-right:32px;
          }
        }
        .video-mx-big-box:nth-child(2){
          margin-top:20px;
        }
        .video-mx-big-box{
          margin-bottom:20px;
        }
      }
    }
  }
</style>

<style lang="scss">
  .newEvacuationBigDataHome{
    .building-select-box{
      .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;
      }
    }
    .floor-select-box{
      width:100px;
      .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;
      }
    }
    .el-select-dropdown{
      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;
      }
    }
    .popper__arrow{
      top:-7px;
      border-bottom-color:#24D1F9!important;
    }
    ::after{
      border-bottom-color:#24D1F9!important;
    }
    ::placeholder{
      color: #fff;
    }
    .scrollbar-box::-webkit-scrollbar{
      width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
      height: 4px;
    }
    .scrollbar-box::-webkit-scrollbar-thumb{
      border-radius: 5px;
      -webkit-box-shadow: inset 0 0 5px #116e8e;
      background: #116e8e;
    }
    .scrollbar-box::-webkit-scrollbar-track{
      -webkit-box-shadow: inset 0 0 5px rgba(255,255,255,0);
      border-radius: 0;
      background: rgba(255,255,255,0);
    }
  }
</style>