|
|
@@ -18,7 +18,8 @@
|
|
|
<p class="name-p">人</p>
|
|
|
</div>
|
|
|
<p class="null-p"></p>
|
|
|
- <p class="content-evacuate-button" @click="evacuationButton">{{evacuationType?'结束疏散':'立即疏散'}}</p>
|
|
|
+ <p v-if="mapType" class="content-evacuate-button" @click="evacuationButton">{{evacuationType?'结束疏散':'立即疏散'}}</p>
|
|
|
+ <p v-if="mapType" class="content-evacuate-button" @click="fullScreenOpen" style="margin-left:10px;">布局全屏</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="newMapComponent-page">
|
|
|
@@ -155,6 +156,60 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <!--全屏布局-->
|
|
|
+ <div class="full-screen-map-max-big-box" v-if="fullScreenType">
|
|
|
+ <div class="full-screen-map-big-box">
|
|
|
+ <div class="full-screen-map-box"
|
|
|
+ v-if="mapType"
|
|
|
+ :style="'width:'+mapData.fullWidth+'px;height:'+mapData.fullHeight+'px;transform: scale('+mapData.fullZoomData+');margin-top:-'+mapData.fullHeight/2+'px;margin-left:-'+mapData.fullWidth/2+'px;'">
|
|
|
+ <div class="newEvacuation-map-big-box"
|
|
|
+ :style="'width:'+mapData.fullWidth+'px;height:'+mapData.fullHeight+'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-num-p" :style="'height:'+item.h/2+'px;line-height:'+item.h/2+'px;margin:'+item.h/4+'px 0'">({{item.roomNum}})</p>
|
|
|
+ </el-tooltip>
|
|
|
+ <!--门-->
|
|
|
+ <div class="position-box"
|
|
|
+ :class="minItem.toward=='top'?'center-move-door-p-t':(minItem.toward=='bottom'?'center-move-door-p-b':(minItem.toward=='left'?'center-move-door-p-l':(minItem.toward=='right'?'center-move-door-p-r':'')))"
|
|
|
+ v-for="(minItem,minIndex) in item.doorList" :key="minIndex"
|
|
|
+ :style="'top:'+minItem.y+'px;left:'+minItem.x+'px;width:'+minItem.w+'px;height:'+minItem.h+'px;'"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newEvacuation-map-for-box for-map-box"
|
|
|
+ v-for="(item,indexOne) in mapList" :key="item.key" v-if="item.type == 2"
|
|
|
+ :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
|
|
|
+ <div class="newEvacuation-map-for-min-box">
|
|
|
+ <!--灯-->
|
|
|
+ <div class="position-box"
|
|
|
+ :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>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <p class="full-close-button" @click="fullScreenClose">退出全屏</p>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -166,6 +221,8 @@
|
|
|
laboratoryExitLineExecuteEvacuation,
|
|
|
laboratoryPlanCloseRiskPlan,
|
|
|
laboratoryExitLineEndEvacuation,
|
|
|
+ laboratoryExitRelayOpenLight,
|
|
|
+ laboratoryExitRelayCloseLight,
|
|
|
} from "@/api/index";
|
|
|
export default {
|
|
|
name: 'newMapComponent',
|
|
|
@@ -195,8 +252,10 @@
|
|
|
evacuationType:false,
|
|
|
//疏散弹窗状态
|
|
|
evacuationShadeType:false,
|
|
|
+ //弹窗相关
|
|
|
shadeType:0,
|
|
|
shadeText:'',
|
|
|
+ shadeData:{},
|
|
|
//预警id
|
|
|
checkPlanId:null,
|
|
|
//结束预案时使用的预案ID
|
|
|
@@ -211,6 +270,8 @@
|
|
|
//预案
|
|
|
planOpic:'lab/risk/plan/change',
|
|
|
planClient:{},
|
|
|
+ //全屏
|
|
|
+ fullScreenType:false,
|
|
|
}
|
|
|
},
|
|
|
created(){
|
|
|
@@ -239,6 +300,10 @@
|
|
|
this.$set(this,'checkSubId',item.subId);
|
|
|
this.$set(this,'subName',item.subName);
|
|
|
this.$set(this,'roomNum',item.roomNum);
|
|
|
+ this.$set(this,'checkSubData',{
|
|
|
+ subId:item.subId,
|
|
|
+ floorId:this.floorId,
|
|
|
+ });
|
|
|
this.$parent.checkButtonSub(item)
|
|
|
}
|
|
|
if(item.planType){
|
|
|
@@ -303,9 +368,13 @@
|
|
|
}
|
|
|
}
|
|
|
let obj = this.calculateMapMax(list)
|
|
|
+ let fullObj = this.calculateMapMaxFullScreen(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.mapData,'fullWidth',fullObj.maxWidth);
|
|
|
+ this.$set(this.mapData,'fullHeight',fullObj.maxHeight);
|
|
|
+ this.$set(this.mapData,'fullZoomData',fullObj.zoomData);
|
|
|
//标记第一间实验室
|
|
|
let subNum = 0;
|
|
|
for(let x=0;x<list.length;x++){
|
|
|
@@ -370,6 +439,7 @@
|
|
|
}
|
|
|
}
|
|
|
this.$set(this,'planMapList',roomList);
|
|
|
+ console.log('获取楼层布局数据')
|
|
|
this.laboratoryBigViewSelectTriggerInfo();
|
|
|
this.laboratoryExitLineGetRedisEvacuation();
|
|
|
}else{
|
|
|
@@ -573,6 +643,42 @@
|
|
|
}
|
|
|
return { maxWidth: maxWidth, maxHeight: maxHeight,zoomData:zoomData }
|
|
|
},
|
|
|
+ calculateMapMaxFullScreen(list) {
|
|
|
+ //基础参数
|
|
|
+ let height = 910;
|
|
|
+ let width = 1920;
|
|
|
+ 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){}
|
|
|
@@ -690,7 +796,16 @@
|
|
|
}else if(type == 4){
|
|
|
this.$set(this,'shadeType',0)
|
|
|
}else if(type == 5){
|
|
|
- if(this.shadeType == 4){
|
|
|
+ if(this.shadeType == 2){
|
|
|
+ //开关灯弹窗
|
|
|
+ if(this.shadeData.openType){
|
|
|
+ //关闭
|
|
|
+ this.laboratoryExitRelayCloseLight();
|
|
|
+ }else{
|
|
|
+ //开启
|
|
|
+ this.laboratoryExitRelayOpenLight();
|
|
|
+ }
|
|
|
+ }else if(this.shadeType == 4){
|
|
|
//结束疏散
|
|
|
let obj = {
|
|
|
buildId:this.buildId,
|
|
|
@@ -716,6 +831,41 @@
|
|
|
this.$set(this,'shadeType',5);
|
|
|
}
|
|
|
},
|
|
|
+ //应急疏散时-开灯
|
|
|
+ laboratoryExitRelayOpenLight(){
|
|
|
+ let obj = {
|
|
|
+ buildId:this.buildId,
|
|
|
+ floorId:this.floorId,
|
|
|
+ pointName:this.shadeData.key
|
|
|
+ };
|
|
|
+ laboratoryExitRelayOpenLight(obj).then(response => {
|
|
|
+ if(response.code==200){
|
|
|
+ this.$set(this,'shadeType',0)
|
|
|
+ this.msgSuccess(response.message)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //应急疏散时-关灯
|
|
|
+ laboratoryExitRelayCloseLight(){
|
|
|
+ let obj = {
|
|
|
+ buildId:this.buildId,
|
|
|
+ floorId:this.floorId,
|
|
|
+ pointName:this.shadeData.key
|
|
|
+ };
|
|
|
+ laboratoryExitRelayCloseLight(obj).then(response => {
|
|
|
+ if(response.code==200){
|
|
|
+ this.$set(this,'shadeType',0)
|
|
|
+ this.msgSuccess(response.message)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //布局全屏开关
|
|
|
+ fullScreenOpen(){
|
|
|
+ this.$set(this,'fullScreenType',true);
|
|
|
+ },
|
|
|
+ fullScreenClose(){
|
|
|
+ this.$set(this,'fullScreenType',false);
|
|
|
+ },
|
|
|
/*********************************** MQTT相关 *********************************/
|
|
|
//预案-MQTT连接
|
|
|
offPlanMQTT(type){
|
|
|
@@ -752,6 +902,7 @@
|
|
|
});
|
|
|
this.planClient.on("message", (topic, message) => {
|
|
|
if (message){
|
|
|
+ console.log('message',message);
|
|
|
//获取预案数据
|
|
|
this.laboratoryBigViewSelectTriggerInfo();
|
|
|
}
|
|
|
@@ -833,6 +984,7 @@
|
|
|
this.lightClient.on("message", (topic, message) => {
|
|
|
if (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++){
|
|
|
@@ -1236,6 +1388,7 @@
|
|
|
top:0;
|
|
|
left:0;
|
|
|
background: rgba(0,0,0,0.5);
|
|
|
+ z-index:200;
|
|
|
.evacuation-shade-big-box{
|
|
|
position: absolute;
|
|
|
top:50%;
|
|
|
@@ -1510,5 +1663,308 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .full-screen-map-max-big-box{
|
|
|
+ position: fixed;
|
|
|
+ top:0;
|
|
|
+ left:0;
|
|
|
+ height:100%;
|
|
|
+ width:100%;
|
|
|
+ background: #062338;
|
|
|
+ z-index:200;
|
|
|
+ .full-screen-map-big-box{
|
|
|
+ height:915px;
|
|
|
+ width:1920px;
|
|
|
+ margin:0 auto;
|
|
|
+ position: relative;
|
|
|
+ .full-screen-map-box{
|
|
|
+ position: absolute;
|
|
|
+ top: 50%;
|
|
|
+ left: 50%;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ img{
|
|
|
+ -webkit-user-drag: none;
|
|
|
+ }
|
|
|
+ .newEvacuation-map-big-box{
|
|
|
+ position: relative;
|
|
|
+ /*border:1px dashed #24D1F9;*/
|
|
|
+ border:1px solid #24D1F9;
|
|
|
+ .newEvacuation-map-for-box{
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ overflow: hidden;
|
|
|
+ .newEvacuation-map-for-min-box{
|
|
|
+ height:100%;
|
|
|
+ position: relative;
|
|
|
+ .map-for-name-p{
|
|
|
+ padding:0 10px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ color:#24D1F9;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .map-for-num-p{
|
|
|
+ padding:0;
|
|
|
+ margin:0;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ color:#24D1F9;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .user-num-box{
|
|
|
+ position: absolute;
|
|
|
+ left:0;
|
|
|
+ display: flex;
|
|
|
+ img{
|
|
|
+ width:20px;
|
|
|
+ height:15px;
|
|
|
+ margin:10px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ line-height:35px;
|
|
|
+ font-size:14px;
|
|
|
+ color:#24D1F9;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .user-num-one{
|
|
|
+ top:0;
|
|
|
+ }
|
|
|
+ .user-num-two{
|
|
|
+ bottom:0;
|
|
|
+ }
|
|
|
+ .position-box{
|
|
|
+ position: absolute;
|
|
|
+ font-size:14px;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .center-move-door-p-t {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
|
|
|
+ background-size: 100% !important;
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+ .center-move-door-p-b {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
|
|
|
+ background-size: 100% !important;
|
|
|
+ }
|
|
|
+ .center-move-door-p-l {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
|
|
|
+ background-size: 100% !important;
|
|
|
+ transform: rotate(90deg);
|
|
|
+ }
|
|
|
+ .center-move-door-p-r {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_pmbjt_m.png") !important;
|
|
|
+ background-size: 100% !important;
|
|
|
+ transform: rotateZ(270deg);
|
|
|
+ }
|
|
|
+ .lightTopOn {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_sjt.png");
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightTopOff {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_shang_hs.png");
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightBottomOn {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_xjt.png");
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightBottomOff {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_xia_hs.png");
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightLeftOn {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_zuo.png");
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightLeftOff {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_zou_hs.png");
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightRightOn {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_yuo.png");
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ .lightRightOff {
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_you_hs.png");
|
|
|
+ background-size: 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .for-map-box-one{
|
|
|
+ border:1px solid #24D1F9;
|
|
|
+ }
|
|
|
+ .for-map-box{
|
|
|
+ background: rgba(1,16,32,0.5);
|
|
|
+ }
|
|
|
+ .for-map-box-two{
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(5,45,43,0.5);
|
|
|
+ background-size: 80px 80px;
|
|
|
+ }
|
|
|
+ .for-map-box-two-check{
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_jjck.png") center center no-repeat rgba(50,205,50,1);
|
|
|
+ background-size: 80px 80px;
|
|
|
+ }
|
|
|
+ .room-type-one{
|
|
|
+ //选中
|
|
|
+ background: rgba(30,118,142,0.4);
|
|
|
+ }
|
|
|
+ .room-type-two{
|
|
|
+ //报警
|
|
|
+ background: rgba(232,0,0,0.4);
|
|
|
+ box-shadow:0 0 10px 1px #E80000 inset;
|
|
|
+ }
|
|
|
+ .room-type-three{
|
|
|
+ //选中报警
|
|
|
+ background: rgba(30,118,142,0.4);
|
|
|
+ box-shadow:0 0 10px 1px #E80000 inset;
|
|
|
+ }
|
|
|
+ .room-type-noe{
|
|
|
+ /*border:1px solid #666;*/
|
|
|
+ /*background: rgba(102,102,102,0.6);*/
|
|
|
+ /*color:#666!important;*/
|
|
|
+ p{
|
|
|
+ /*color:#666!important;*/
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-map-for-box{
|
|
|
+ font-weight:500;
|
|
|
+ position:absolute;
|
|
|
+ z-index:100;
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/img_bg_yatk.png");
|
|
|
+ .plan-top-button-box{
|
|
|
+ display: flex;
|
|
|
+ p:nth-child(1){
|
|
|
+ flex:1;
|
|
|
+ }
|
|
|
+ p:nth-child(2){
|
|
|
+ font-size:14px;
|
|
|
+ color:#fff;
|
|
|
+ margin:9px 12px 0 0 ;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-time-box{
|
|
|
+ display: flex;
|
|
|
+ img{
|
|
|
+ width:24px;
|
|
|
+ height:24px;
|
|
|
+ margin-left:19px;
|
|
|
+ margin-right:8px;
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ line-height:24px;
|
|
|
+ color:#fff;
|
|
|
+ font-size:14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-text-box{
|
|
|
+ display: flex;
|
|
|
+ color:#fff;
|
|
|
+ margin-top:15px;
|
|
|
+ overflow: hidden;
|
|
|
+ .plan-title-p{
|
|
|
+ width:60px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ margin:0 10px 0 18px;
|
|
|
+ border-radius:15px;
|
|
|
+ }
|
|
|
+ .plan-text-p{
|
|
|
+ width:170px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .color-type-1{
|
|
|
+ background: #0183FA;
|
|
|
+ }
|
|
|
+ .color-type-2{
|
|
|
+ background: #FF9900;
|
|
|
+ }
|
|
|
+ .color-type-3{
|
|
|
+ background: #FF4800;
|
|
|
+ }
|
|
|
+ .color-type-4{
|
|
|
+ background: #FF0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-text-box-two{
|
|
|
+ display: flex;
|
|
|
+ color:#fff;
|
|
|
+ margin-top:22px;
|
|
|
+ overflow: hidden;
|
|
|
+ .plan-title-p{
|
|
|
+ width:60px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ text-align: center;
|
|
|
+ margin:0 10px 0 18px;
|
|
|
+ border-radius:15px;
|
|
|
+ }
|
|
|
+ .plan-text-p{
|
|
|
+ width:170px;
|
|
|
+ height:20px;
|
|
|
+ line-height:20px;
|
|
|
+ font-size:14px;
|
|
|
+ overflow:hidden;
|
|
|
+ text-overflow:ellipsis;
|
|
|
+ white-space:nowrap;
|
|
|
+ }
|
|
|
+ .color-type-1{
|
|
|
+ background: #0183FA;
|
|
|
+ }
|
|
|
+ .color-type-2{
|
|
|
+ background: #FF9900;
|
|
|
+ }
|
|
|
+ .color-type-3{
|
|
|
+ background: #FF4800;
|
|
|
+ }
|
|
|
+ .color-type-4{
|
|
|
+ background: #FF0000;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .plan-button-p{
|
|
|
+ margin:15px auto 0;
|
|
|
+ width:100px;
|
|
|
+ line-height:30px;
|
|
|
+ background: #163277;
|
|
|
+ color:#fff;
|
|
|
+ text-align: center;
|
|
|
+ border-radius:6px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .check-plan-map-for-box{
|
|
|
+ z-index:1000!important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .full-close-button{
|
|
|
+ width:100px;
|
|
|
+ height:30px;
|
|
|
+ line-height:30px;
|
|
|
+ color:#00D4FF;
|
|
|
+ text-align: center;
|
|
|
+ background: url("../../../assets/ZDimages/emergencyManagement/icon_sspt_ljssbk.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ margin:0;
|
|
|
+ position: absolute;
|
|
|
+ top:10px;
|
|
|
+ right:10px;
|
|
|
+ z-index:1000;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
dedsudiyu