应急预案UI完善

src/app/pages/left-domain/left-domain.component.html

@@ -91,6 +91,16 @@
       </ng-template>
     </div>
     <!-- 消防设施 -->
+    <!-- 处置预案 -->
+    <div class="publicBox disposalPlan" *ngIf="beforeFence === 7">
+      <div class="interval">
+        <div class="publicDisposal disposalHeader">处置预案<label><i nz-icon nzType="plus-circle" nzTheme="outline"></i><i nz-icon nzType="delete" nzTheme="outline"></i></label></div>
+        <ul>
+          <li class="publicDisposal disposalContent">处置预案<label><i nz-icon nzType="save" nzTheme="outline"></i><i nz-icon nzType="delete" nzTheme="outline"></i></label></li>
+        </ul>
+      </div>
+    </div>
+    <!-- 处置预案 -->
   </div>
 
   <div class="childBottom" *ngIf="beforeFence === 0">

src/app/pages/left-domain/left-domain.component.scss

@@ -76,4 +76,22 @@
 // }
 .fireFacilities{ //消防设施
   .treeRow{ width: 100%; display: flex; height: 30px; line-height: 30px; p:first-child{ flex: 1; }; p{ margin: 0; padding: 0; .anticon{ margin-right: 5px; font-size: 16px; } } }
+}
+.disposalPlan{ //处置预案
+  .interval{ margin-top: 10px; } //分隔div
+  font-size: 15px;
+  ul,li { width: 100%; }
+  li:before{ content: ""; width: 5px; height: 5px; border-radius: 50%; display: inline-block; vertical-align: 3px; background: #23D9FF; margin-right: 10px; }
+  .publicDisposal{
+    height: 35px;
+    line-height: 35px;
+    color: #23D9FF;
+    padding-left: 20px;
+    label{ float: right; .anticon{ margin-right: 15px; font-size: 18px; cursor: pointer; } }
+  }
+  .disposalContent { color: #fff; .anticon{ color: #23D9FF; } }
+  .disposalHeader {
+    background: rgba(35, 153, 255, 0.41);
+    border: 1px solid rgba(35, 217, 255, 0.4);
+  }
 }

src/app/pages/left-domain/left-domain.component.ts

@@ -5,6 +5,9 @@ import { PlanComponent } from '../plan/plan.component';
 import { FacilityInfoUIItem } from "../../babylon/view/facilityinfoinscene-window/facilityinfo-ui-item";
 import { ConfigManager } from 'src/app/babylon/controller/config-manager';
 import { FacilityType } from 'src/app/babylon/model/data/model-data/model-data-facility';
+import { EventManager } from 'src/app/babylon/controller/event-manager/event-manager';
+import { Event_GetAllMarkPlanData } from 'src/app/babylon/controller/event-manager/events/event-get-markplandata-success';
+import { AllMarkPlanData } from 'src/app/babylon/model/data/mark/mark-plan-data';
 
 @Component({
   selector: 'app-left-domain',
@@ -23,8 +26,6 @@ export class LeftDomainComponent implements OnInit {
   beforeFence: number; //当前选中功能栏
   FacilityList: FacilityInfoUIItem[] = []; //统计设备 list
   selectFacilityId: string = null; //选中设备 ID
-  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
-  treeData: NzTreeNodeOptions[] = []; //tree data
 
   //初始化组件
   initComponent(type?: number) {
@@ -39,6 +40,13 @@ export class LeftDomainComponent implements OnInit {
 
   //处理 设备data
   handleFacility() {
+    if (this.beforeFence === 7) { //应急预案
+      EventManager.addListener(Event_GetAllMarkPlanData, (data: Event_GetAllMarkPlanData)=>{
+        this.allMarkPlanData = data.data
+        console.log(this.allMarkPlanData,777)
+      })
+      return
+    }
     let list: FacilityInfoUIItem[] = []
     FacilityInfoInSceneWindow.instance.facilityInfoUIItemes.forEach(item=>{
       if (this.beforeFence === 1) { //加油机
@@ -67,6 +75,9 @@ export class LeftDomainComponent implements OnInit {
     }
   }
 
+  @ViewChild('nzTreeComponent', { static: false }) nzTreeComponent!: NzTreeComponent;
+  treeData: NzTreeNodeOptions[] = []; //tree data
+
   //处理 treeData
   handleTreeData(list: FacilityInfoUIItem[]) {
     this.treeData = []
@@ -137,6 +148,10 @@ export class LeftDomainComponent implements OnInit {
     }
   }
 
+  allMarkPlanData: AllMarkPlanData; //处置预案节点数据
+  selectPlanId: number;
+  selectNodeId: number;
+
   //编辑信息
   editInfo() {
 

src/app/pages/plan/plan.component.html

@@ -19,7 +19,7 @@
     <div class="leftChildComponent" *ngIf="isShowChildComponent" [ngStyle]="{ 'left': isShowLeftBuilding? '15%' : null }">
       <div class="leftChildHeader">
         <div><i nz-icon nzType="star" nzTheme="outline"></i></div>
-        <div><p>{{allFence[selectFence]}}</p></div>
+        <div>{{allFence[selectFence]}}<i nz-icon nzType="plus-circle" nzTheme="outline" *ngIf="selectFence === 7"></i><i nz-icon nzType="save" nzTheme="outline" *ngIf="selectFence === 7"></i></div>
         <div (click)="toggleHeaderFence(selectFence)" title="关闭"><i nz-icon nzType="close-circle" nzTheme="outline"></i></div>
       </div>
       <div class="leftChildCenter"><app-left-domain #leftDomain></app-left-domain></div>
@@ -46,19 +46,17 @@
       </div>
     </div>
     <!-- 左侧建筑栏 -->
-  
-    <!-- 底部图标栏 -->
-    <div class="bottomIcons">
-      <div class="autoScroll"><i nz-icon nzType="left" nzTheme="outline" (click)="bottomScroll(0)"></i></div>
+
+    <!-- 右侧图标栏 -->
+    <div class="rightIcons">
       <div class="bottomCenter" id="bottomCenter">
         <div class="everyIcon" (click)='selectBottomIcon(item)' *ngFor="let item of allFacilityUIItemes" [ngClass]="{'selectLeftIcon': beforeOneIcon == item.getIconID()}">
           <img [src]="item.getIconURL()">
           <p>{{item.getIconName()}}</p>
         </div>
       </div>
-      <div class="autoScroll"><i nz-icon nzType="right" nzTheme="outline" (click)="bottomScroll(1)"></i></div>
     </div>
-    <!-- 底部图标栏 -->
+    <!-- 右侧图标栏 -->
 
     <!-- 右上角快捷栏 -->
     <div class="rightTopFast">

src/app/pages/plan/plan.component.scss

@@ -100,6 +100,8 @@
       letter-spacing: 3px;
       font-style: italic;
       flex: 1;
+      .anticon{ margin-left: 65px; font-size: 18px; color: #23D9FF; vertical-align: -4px; }
+      .anticon:last-child { margin-left: 10px; }
     }
     div:last-child{
       width: 30px;
@@ -176,28 +178,29 @@
   transition: margin-left 0.5s;
 }
 
-//底部图标栏
-.bottomIcons{
-  width: 80%;
-  height: 60px;
-  line-height: 60px;
+//右侧图标栏
+.rightIcons{
+  width: 60px;
+  height: 70%;
   position: absolute;
-  left: 0;
-  right: 0;
-  bottom: 0px;
+  top: 0;
+  bottom: 0;
+  right: 1%;
   margin: auto;/*这行代码是关键*/
   color: #fff;
   background: rgba(0,17,33,0.7);
-  border-radius: 10px 10px 0px 0px;
+  border-radius: 10px;
   display: flex;
-  box-sizing: border-box;
-  padding: 1px;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
   .autoScroll{ width: 30px; text-align: center; }
   .bottomCenter{
     flex: 1;
-    overflow: hidden;
+    overflow-x: hidden;
+    overflow-y: auto;
     .everyIcon {
-      width: 100px;
+      width: 60px;
       height: 58px;
       line-height: normal;
       text-align: center;

src/app/pages/plan/plan.component.ts

@@ -94,7 +94,7 @@ export class PlanComponent implements OnInit {
   //开发模式 选择单位 弹窗
   modelInit(InsList) { }
 
-  allFence: string[] = ["基本信息", "加油机", "油罐设备", "消防设施", "安全疏散", "输油管线", "油气回收", "应急处置"]; //头部 功能栏
+  allFence: string[] = ["基本信息", "加油机", "油罐设备", "消防设施", "安全疏散", "输油管线", "油气回收", "应急预案"]; //头部 功能栏
   selectFence: number = -1; //选中 头部功能栏
   isShowChildComponent: boolean = false; //是否 显示左侧子组件
   @ViewChild('leftDomain') leftDomain: LeftDomainComponent; //子组件引用