左侧子组件完善

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

@@ -1 +1,12 @@
-<p>left-domain works!</p>
+<div class="childContent">
+
+  <div class="childCenter">
+
+  </div>
+
+  <div class="childBottom" *ngIf="beforeFence === 0">
+    <button (click)="editInfo()"><i nz-icon nzType="edit" nzTheme="outline"></i>编辑信息</button>
+    <button (click)="deriveExcel()"><i nz-icon nzType="file-excel" nzTheme="outline"></i>导出Excel</button>
+  </div>
+
+</div>

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

@@ -0,0 +1,34 @@
+.childContent{
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  font-family: Source Han Sans CN;
+  color: #fff;
+  .childCenter{
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+  .childBottom{
+    width: 100%;
+    height: 50px;
+    line-height: 50px;
+    text-align: center;
+    background: linear-gradient(360deg, #000D21 0%, #003B6E 100%);
+    box-shadow: 0px -2px 6px #36A2FF;
+    button{
+      width: 35%;
+      height: 32px;
+      line-height: 32px;
+      padding: 0;
+      margin: 0 10px;
+      color: #91CCFF;
+      background: rgba(0, 129, 255, 0.61);
+      border: 1px solid #36A2FF;
+      cursor: pointer;
+      .anticon{ margin-right: 3px; } //字体图标
+    }
+  }
+}

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

@@ -1,4 +1,5 @@
 import { Component, OnInit } from '@angular/core';
+import { PlanComponent } from '../plan/plan.component';
 
 @Component({
   selector: 'app-left-domain',
@@ -10,6 +11,30 @@ export class LeftDomainComponent implements OnInit {
   constructor() { }
 
   ngOnInit(): void {
+    this.initComponent()
   }
 
+  beforeFence: number; //当前选中功能栏
+
+  //初始化组件
+  initComponent(type?: number) {
+    if (type != undefined && type != null) {
+      this.beforeFence = type
+    } else {
+      this.beforeFence = PlanComponent.instance.selectFence
+    }
+  }
+
+  //编辑信息
+  editInfo() {
+
+  }
+
+  //导出Excel
+  deriveExcel() {
+
+  }
+
+
+
 }

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

@@ -16,13 +16,13 @@
     <canvas id="center"></canvas>
 
     <!-- 左侧子组件 -->
-    <div class="leftChildComponent" *ngIf="isShowChildComponent">
+    <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 (click)="toggleHeaderFence(selectFence)" title="关闭"><i nz-icon nzType="close-circle" nzTheme="outline"></i></div>
       </div>
-      <div class="leftChildCenter"><app-left-domain></app-left-domain></div>
+      <div class="leftChildCenter"><app-left-domain #leftDomain></app-left-domain></div>
     </div>
     <!-- 左侧子组件 -->
 

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

@@ -72,9 +72,8 @@
   bottom: 0;
   margin: auto;/*这行代码是关键*/
   z-index: 10;
-  box-sizing: border-box;
-  padding: 5px;
   color: #fff;
+  transition: left 0.5s;
   background: linear-gradient(360deg, #000D21 0%, rgba(0, 59, 110, 0.8) 100%);
   display: flex;
   flex-direction: column;
@@ -83,7 +82,7 @@
     width: 95%;
     height: 30px;
     line-height: 30px;
-    margin: 10px auto;
+    margin: 15px auto;
     background: linear-gradient(270deg, rgba(35, 153, 255, 0) 0%, rgba(35, 153, 255, 0.8) 50%, rgba(35, 153, 255, 0) 100%);
     div:first-child{
       width: 30px;

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

@@ -1,4 +1,4 @@
-import { Component, ElementRef, OnInit } from '@angular/core';
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
 import { Game } from 'src/app/babylon/game';
 import { LoginSatus } from 'src/app/babylon/controller/status/login-status';
 import { StatusManager } from 'src/app/babylon/controller/status/status-manager';
@@ -17,6 +17,7 @@ import { FacilityWindow } from 'src/app/babylon/view/facility-window/facility-wi
 import { FacilityInfoUIItem } from 'src/app/babylon/view/facilityinfoinscene-window/facilityinfo-ui-item';
 import { EventManager } from '@angular/platform-browser';
 import { NzMessageService } from 'ng-zorro-antd/message';
+import { LeftDomainComponent } from '../left-domain/left-domain.component';
 
 
 
@@ -95,6 +96,7 @@ export class PlanComponent implements OnInit {
   allFence: string[] = ["基本信息", "加油机", "油罐设备", "消防设施", "安全疏散", "输油管线", "油气回收", "应急处置"]; //头部 功能栏
   selectFence: number = -1; //选中 头部功能栏
   isShowChildComponent: boolean = false; //是否 显示左侧子组件
+  @ViewChild('leftDomain')leftDomain: LeftDomainComponent; //子组件引用
   isOpenAwning: boolean = true; //是否 打开罩棚
   selectMeasure: number = 0; //当前选择 测量工具
 
@@ -104,6 +106,7 @@ export class PlanComponent implements OnInit {
     let buildingWindow: BuildingWindow = this.beforeOneSatus.buildingWindow;
     let fenceType: JYZInfoMoudleType = this.getFenceType(type)
     if (this.selectFence != type) {
+      this.isShowChildComponent && this.leftDomain? this.leftDomain.initComponent(type) : null; //手动初始化子组件
       this.selectFence = type
       this.isShowChildComponent = true
       type>0 && type<7? buildingWindow.showJYZInfoModel(fenceType, true) : null
@@ -136,6 +139,7 @@ export class PlanComponent implements OnInit {
   //切换 头部罩棚
   toggleHeaderAwning(isOpen: boolean) {
     this.isOpenAwning = isOpen
+    ToolbarWindow.instance.showZP(isOpen)
   }
 
   //切换 测量工具