zc

src/views/emergencyManagement/evacuation/emergencyEvacuation/newPerformEvacuation.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="newPerformEvacuation scrollbar-box">
       <div style="position: relative">
-        <emergency-evacuation-big style="transform: scale(0.822);position: absolute;top:50%;left:50%;margin-top:-90px;margin-left:-956px;"></emergency-evacuation-big>
+        <emergency-evacuation-big style="transform: scale(0.822);position: absolute;top:50%;left:50%;margin-top:-95px;margin-left:-960px;"></emergency-evacuation-big>
       </div>
     </div>
 </template>
@@ -21,6 +21,7 @@
     flex:1;
     display: flex;
     flex-direction: column;
+    margin:5px 20px 20px 10px;
     box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
     border-radius:10px;
   }

src/views/newEvacuationBigData.vue

@@ -144,7 +144,7 @@
                 </div>
               </div>
               <div class="newEvacuation-map-for-box for-map-box"
-                   v-for="(item,index) in mapList" :key="index" v-if="item.type == 2"
+                   v-for="(item,indexOne) in mapList" :key="indexOne" 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">
                   <!--灯-->
@@ -160,26 +160,28 @@
                 </div>
               </div>
               <div class="newEvacuation-map-for-box for-map-box-two"
-                   v-for="(item,index) in mapList" :key="index" v-if="item.type == 3"
+                   v-for="(item,indexTwo) in mapList" :key="indexTwo" v-if="item.type == 3"
                    :class="item.roomCheckType?'for-map-box-two-check':''"
                    :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                 <div class="newEvacuation-map-for-min-box"></div>
               </div>
               <div class="plan-map-for-box" :class="checkPlanId == item.subId?'check-plan-map-for-box':''"
                    :style="'width:'+item.width+'px;height:'+item.height+'px;left:'+item.left+'px;top:'+item.top+'px;'"
-                   v-for="(item,index) in planMapList" :key="index" v-if="item.planType">
+                   @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>
+                  <p class="el-icon-close" @click="offPlanShade(planIndex)"></p>
                 </div>
                 <div class="plan-time-box">
                   <img src="@/assets/ZDimages/bigData3_2/icon_dp_bjsj.png">
                   <p>{{item.riskPlanTriggerTime}}</p>
                 </div>
-                <div class="plan-text-box">
+                <div :class="item.riskAttribute == 1?'plan-text-box':'plan-text-box-two'">
                   <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.riskPlanLevel==1?'发生风险:火灾预警':'发生风险预警'}}</p>
+                  <p class="plan-text-p">{{item.name}}</p>
                 </div>
+                <p class="plan-button-p" v-if="item.riskAttribute == 1" @click="shadeButton(7,item.riskPlanId)">结束预案</p>
               </div>
             </div>
           </div>
@@ -386,12 +388,12 @@
                   </div>
                 </div>
                 <div class="evacuation-shade-map-for-box for-map-box"
-                     v-for="(item,index) in shadeMapList" :key="index" v-if="item.type == 2"
+                     v-for="(item,indexOne) in shadeMapList" :key="indexOne" v-if="item.type == 2"
                      :style="'top:'+item.y+'px;left:'+item.x+'px;width:'+item.w+'px;height:'+item.h+'px;'">
                   <div class="evacuation-shade-map-min-box"></div>
                 </div>
                 <div class="evacuation-shade-map-for-box for-map-box-two"
-                     v-for="(item,index) in shadeMapList" :key="index" v-if="item.type == 3"
+                     v-for="(item,indexTwo) in shadeMapList" :key="indexTwo" v-if="item.type == 3"
                      @click="shadeCheckRoomClick(item)"
                      :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;'">
@@ -558,6 +560,10 @@
         checkSubId:null,
         //传参状态
         planDataType:false,
+        //优先显示的提示
+        checkPlanId:null,
+        //结束预案时使用的预案ID
+        checkRiskPlanId:null
       }
     },
     created() {
@@ -720,12 +726,30 @@
               this.$set(this,'shadeType',0);
               this.getBuildingData();
             })
+          }else if(this.shadeType == 5){
+            //结束预案
+            let obj = {
+              buildId:this.buildingId,
+              floorId:this.floorId,
+            }
+            endEvacuation(obj).then(response => {
+              this.$set(this,'shadeType',0);
+              this.getBuildingData();
+            })
           }
         }else if(type == 6){
           this.$set(this,'shadeText','是否结束疏散?');
           this.$set(this,'shadeType',4);
+        }else if(type == 6){
+          this.$set(this,'shadeText','是否结束预案?');
+          this.$set(this,'checkRiskPlanId',text);
+          this.$set(this,'shadeType',5);
         }
       },
+      //选中优先展示的预案弹窗
+      checkPlanButton(id){
+        this.$set(this,'checkPlanId',id);
+      },
       //实验室视频展开收起开关
       subjectVideoCheckClick(){
         if(this.subjectVideoType){
@@ -1740,6 +1764,7 @@
                       self.planMapList[x].riskAttribute = response.data[i].riskAttribute;
                       self.planMapList[x].riskPlanLevel = response.data[i].riskPlanLevel;
                       self.planMapList[x].riskPlanLevelName = response.data[i].riskPlanLevelName;
+                      self.planMapList[x].name = response.data[i].name;
                       self.planMapList[x].planType = true;
                     }
                   }
@@ -2564,6 +2589,7 @@
               }
             }
             .plan-map-for-box{
+              font-weight:500;
               position:absolute;
               z-index:100;
               background: url("../assets/ZDimages/bigData3_2/img_zhpt_bg.png");
@@ -2596,6 +2622,42 @@
               .plan-text-box{
                 display: flex;
                 color:#fff;
+                margin-top:10px;
+                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{
@@ -2629,6 +2691,16 @@
                   background: #FF0000;
                 }
               }
+              .plan-button-p{
+                margin:5px auto 0;
+                width:80px;
+                line-height:22px;
+                background: #00a0e9;
+                color:#fff;
+                text-align: center;
+                border-radius:10px;
+                cursor: pointer;
+              }
             }
             .check-plan-map-for-box{
               z-index:1000!important;