|
@@ -3,9 +3,9 @@
|
|
|
<div class="performEvacuationHome" ref="maxBox">
|
|
|
<div class="top-title-box">
|
|
|
<div class="top-title-img-box">应 急 处 置</div>
|
|
|
- <div class="top-title-button-box">
|
|
|
+ <div class="top-title-button-box" @click="goRoute">
|
|
|
<i class="el-icon-switch-button"></i>
|
|
|
- <p @click="goRoute">{{routeType?'退出全屏':'全屏'}}</p>
|
|
|
+ <p>{{routeType?'退出全屏':'全屏'}}</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="content-box">
|
|
@@ -17,6 +17,7 @@
|
|
|
<el-select v-model="buildingId" placeholder="请选择"
|
|
|
:popper-append-to-body="false"
|
|
|
@change="buildingChange"
|
|
|
+ style="width:240px;"
|
|
|
class="building-select-box">
|
|
|
<el-option
|
|
|
v-for="item in buildingOptions"
|
|
@@ -28,35 +29,146 @@
|
|
|
</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"
|
|
|
+ :style="'width:'+mapData.width+'px;height:'+mapData.height+'px;'">
|
|
|
+ <div class="newEvacuation-map-for-box for-map-box-one"
|
|
|
+ :class="!item.planType && checkSubId ==item.subId ? 'room-type-one':(
|
|
|
+ item.planType && checkSubId !=item.subId ? 'room-type-two':(
|
|
|
+ item.planType && checkSubId ==item.subId ? 'room-type-three':(
|
|
|
+ !item.loginAdmin ? 'room-type-noe':''
|
|
|
+ )))"
|
|
|
+ @click="checkSubClick(item)"
|
|
|
+ v-for="(item,index) in mapList" :key="item.key" v-if="item.type == 1"
|
|
|
+ :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'+(item.levelColor?'background-color:'+item.levelColor+';':'')">
|
|
|
+ <div class="newEvacuation-map-for-min-box">
|
|
|
+ <!--名称/实验室名称-->
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.roomType == '-99'?item.roomName:(item.subName?item.subName:'未绑定')" placement="top">
|
|
|
+ <p class="map-for-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.online!=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.online}} 人</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;'"
|
|
|
+ @click="checkPlanButton(item.subId)"
|
|
|
+ v-for="(item,index) in planMapList" :key="item.subId" v-if="item.planType">
|
|
|
+ <div class="plan-top-button-box">
|
|
|
+ <p></p>
|
|
|
+ <p class="el-icon-close" @click="offPlanShade(index)"></p>
|
|
|
+ </div>
|
|
|
+ <div class="plan-time-box">
|
|
|
+ <img src="@/assets/ZDimages/emergencyManagement/icon_dp_bjsj.png">
|
|
|
+ <p>{{item.riskPlanTriggerTime}}</p>
|
|
|
+ </div>
|
|
|
+ <div class="plan-text-box">
|
|
|
+ <p class="plan-title-p" :class="item.riskPlanLevel==1?'color-type-1':(item.riskPlanLevel==2?'color-type-2':(item.riskPlanLevel==3?'color-type-3':(item.riskPlanLevel==4?'color-type-4':'')))">{{item.riskPlanLevelName}}</p>
|
|
|
+ <p class="plan-text-p">{{item.name}}</p>
|
|
|
+ </div>
|
|
|
+ <!--<p class="plan-button-p" @click="shadeButton(7,item.groupId)">结束预案</p>-->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="null-mapList" v-if="!mapList[0]">暂无数据</p>
|
|
|
</div>
|
|
|
<!--楼层选择-->
|
|
|
<div class="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_yygb_tb.png">
|
|
|
+ <p>智能物联</p>
|
|
|
+ </div>
|
|
|
+ <div class="content-monitor-for-box" :class="!monitorList[0]?'content-monitor-null-box':''">
|
|
|
+ <div class="null-box">
|
|
|
+ <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_tb.png">
|
|
|
+ <p>危险源</p>
|
|
|
+ </div>
|
|
|
+ <div class="content-danger-for-box" :class="!dangerList[0]?'content-danger-null-box':''">
|
|
|
+ <div class="null-box">
|
|
|
+ <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_yygb_tb.png">
|
|
|
+ <p>视频监控</p>
|
|
|
+ </div>
|
|
|
+ <div class="content-video-for-box" :class="!videoList[0]?'content-video-null-box':''">
|
|
|
+ <div class="null-box">
|
|
|
+ <img class="null-img" src="@/assets/ZDimages/emergencyManagement/newImg/img_zhpt_zwsj.png">
|
|
|
+ <p class="null-p">暂无数据</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
@@ -75,6 +187,24 @@
|
|
|
//楼层数据
|
|
|
floorId:null,
|
|
|
floorOptions:[],
|
|
|
+ //楼层人数
|
|
|
+ floorUserNum:0,
|
|
|
+ //选中楼层
|
|
|
+ checkFloor:0,
|
|
|
+ //智能物联
|
|
|
+ monitorList:[],
|
|
|
+ //危险源
|
|
|
+ dangerList:[],
|
|
|
+ //视频数据
|
|
|
+ videoList:[],
|
|
|
+ //地图数据
|
|
|
+ mapList:[],
|
|
|
+ zoomData:null,
|
|
|
+ mapData:{},
|
|
|
+ planMapList:[],
|
|
|
+ mapType:false,
|
|
|
+ //实验室选中/报警数据
|
|
|
+ checkSubId:null,
|
|
|
}
|
|
|
},
|
|
|
created () {
|
|
@@ -89,6 +219,12 @@
|
|
|
this.getBuild();
|
|
|
},
|
|
|
methods: {
|
|
|
+ //切换楼层
|
|
|
+ clickFloor(item,index){
|
|
|
+ this.$set(this,'checkFloor',index);
|
|
|
+ this.$set(this,'floorId',item.id);
|
|
|
+ this.laboratoryBigViewGetFloorByBigView();
|
|
|
+ },
|
|
|
//楼栋数据选择
|
|
|
buildingChange(){
|
|
|
//获取楼层数据
|
|
@@ -100,10 +236,12 @@
|
|
|
this.$router.push({
|
|
|
path: "/emergencyManagement/performEvacuation"
|
|
|
})
|
|
|
+ this.exitfull();
|
|
|
}else{
|
|
|
this.$router.push({
|
|
|
path: "/performEvacuationBig"
|
|
|
})
|
|
|
+ this.fullScreen();
|
|
|
}
|
|
|
},
|
|
|
//获取楼栋数据
|
|
@@ -122,15 +260,178 @@
|
|
|
laboratoryBigViewGetBuildByBigView({id:this.buildingId,type:3}).then(response => {
|
|
|
this.$set(this,'floorOptions',response.data);
|
|
|
this.$set(this,'floorId',response.data[0].id);
|
|
|
+ this.$set(this,'checkFloor',0);
|
|
|
+ //获取楼层数据
|
|
|
this.laboratoryBigViewGetFloorByBigView();
|
|
|
+ //获取楼层-总人数;
|
|
|
+ //获取楼层-智能物联设备列表;
|
|
|
+ //获取楼层-摄像头列表;
|
|
|
+ //获取楼层-危险源统计;
|
|
|
+ //获取楼层-内实验室内人数;
|
|
|
})
|
|
|
},
|
|
|
//获取楼层布局数据
|
|
|
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){
|
|
|
+ console.log('response.data[0].buildLayoutVoList[o]',response.data[0].buildLayoutVoList[o])
|
|
|
+ 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].online = response.data[0].buildLayoutVoList[o].online;
|
|
|
+ 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);
|
|
|
+ }
|
|
|
+ }
|
|
|
})
|
|
|
},
|
|
|
+ //计算布局最大尺寸
|
|
|
+ calculateMapMax(list) {
|
|
|
+ //基础参数
|
|
|
+ let height = 500;
|
|
|
+ let width = 1000;
|
|
|
+ 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)
|
|
|
+ },
|
|
|
+ //退出全屏
|
|
|
+ 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();
|
|
|
+ }
|
|
|
+ },
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
@@ -194,9 +495,10 @@
|
|
|
overflow: hidden;
|
|
|
.content-floor-num-box{
|
|
|
height:87px;
|
|
|
+ display: flex;
|
|
|
.content-floor-box{
|
|
|
::v-deep .building-select-box{
|
|
|
- margin:12px 0 0 30px;
|
|
|
+ margin:12px 0 0 33px;
|
|
|
.el-input__inner{
|
|
|
background:rgba(0,0,0,0);
|
|
|
border:1px solid #24D1F9;
|
|
@@ -209,6 +511,7 @@
|
|
|
}
|
|
|
}
|
|
|
::v-deep .el-select-dropdown{
|
|
|
+ width:240px;
|
|
|
background:#01294d;
|
|
|
border:1px solid #24D1F9;
|
|
|
.el-select-dropdown__item{
|
|
@@ -221,7 +524,27 @@
|
|
|
}
|
|
|
}
|
|
|
.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{
|
|
@@ -300,54 +623,54 @@
|
|
|
overflow: hidden;
|
|
|
}
|
|
|
.center-move-door-p-t {
|
|
|
- /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;*/
|
|
|
+ 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: 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: 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: 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: url("../../../assets/ZDimages/emergencyManagement/icon_sjt.png");
|
|
|
background-size: 100%;
|
|
|
}
|
|
|
.lightTopOff {
|
|
|
- /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_shang_hs.png");*/
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_shang_hs.png");
|
|
|
background-size: 100%;
|
|
|
}
|
|
|
.lightBottomOn {
|
|
|
- /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_xjt.png");*/
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_xjt.png");
|
|
|
background-size: 100%;
|
|
|
}
|
|
|
.lightBottomOff {
|
|
|
- /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_xia_hs.png");*/
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_xia_hs.png");
|
|
|
background-size: 100%;
|
|
|
}
|
|
|
.lightLeftOn {
|
|
|
- /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_zuo.png");*/
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_zuo.png");
|
|
|
background-size: 100%;
|
|
|
}
|
|
|
.lightLeftOff {
|
|
|
- /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_zou_hs.png");*/
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_zou_hs.png");
|
|
|
background-size: 100%;
|
|
|
}
|
|
|
.lightRightOn {
|
|
|
- /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_yuo.png");*/
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_yuo.png");
|
|
|
background-size: 100%;
|
|
|
}
|
|
|
.lightRightOff {
|
|
|
- /*background: url("../../../../assets/ZDimages/emergencyManagement/icon_you_hs.png");*/
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_you_hs.png");
|
|
|
background-size: 100%;
|
|
|
}
|
|
|
}
|
|
@@ -359,11 +682,11 @@
|
|
|
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: 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: url("../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(50,205,50,1);
|
|
|
background-size: 80px 80px;
|
|
|
}
|
|
|
.room-type-one{
|
|
@@ -392,7 +715,7 @@
|
|
|
font-weight:500;
|
|
|
position:absolute;
|
|
|
z-index:100;
|
|
|
- /*background: url("../../../../assets/ZDimages/emergencyManagement/img_bg_yatk.png");*/
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/img_bg_yatk.png");
|
|
|
.plan-top-button-box{
|
|
|
display: flex;
|
|
|
p:nth-child(1){
|
|
@@ -516,20 +839,164 @@
|
|
|
}
|
|
|
.content-select-box{
|
|
|
width:158px;
|
|
|
+ position: relative;
|
|
|
+ .for-select-box{
|
|
|
+ position: absolute;
|
|
|
+ bottom:31px;
|
|
|
+ left:59px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column-reverse;
|
|
|
+ .for-select-p:nth-child(1){
|
|
|
+ border-bottom:1px solid #19667e;
|
|
|
+ border-bottom-left-radius:4px;
|
|
|
+ border-bottom-right-radius:4px;
|
|
|
+ }
|
|
|
+ .for-select-p:last-child{
|
|
|
+ border-top-left-radius:4px;
|
|
|
+ border-top-right-radius:4px;
|
|
|
+ }
|
|
|
+ .for-select-p{
|
|
|
+ cursor: pointer;
|
|
|
+ width:40px;
|
|
|
+ line-height:40px;
|
|
|
+ text-align: center;
|
|
|
+ color:#19667e;
|
|
|
+ border-top:1px solid #19667e;
|
|
|
+ border-left:1px solid #19667e;
|
|
|
+ border-right:1px solid #19667e;
|
|
|
+ }
|
|
|
+ .for-select-p-check{
|
|
|
+ /*border:1px solid #20d0fa !important;*/
|
|
|
+ color:#fff;
|
|
|
+ box-shadow: inset 0 0 4px 1px rgba(32,208,250,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
.content-monitor-danger-box{
|
|
|
height:367px;
|
|
|
+ display: flex;
|
|
|
.content-monitor-box{
|
|
|
-
|
|
|
+ width:954px;
|
|
|
+ .big-title-box{
|
|
|
+ margin-left:33px;
|
|
|
+ }
|
|
|
+ .content-monitor-for-box{
|
|
|
+ margin-left:33px;
|
|
|
+ margin-top:20px;
|
|
|
+ width:820px;
|
|
|
+ height:260px;
|
|
|
+ position: relative;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
.content-danger-box{
|
|
|
-
|
|
|
+ width:539px;
|
|
|
+ .content-danger-for-box{
|
|
|
+ margin-top:20px;
|
|
|
+ width:480px;
|
|
|
+ height:260px;
|
|
|
+ position: relative;
|
|
|
+ .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;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|