header完善

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

@@ -1,5 +1,18 @@
 <div class="loading" *ngIf="isShowLoading"><nz-spin nzSimple [nzSize]="'large'"></nz-spin></div>
 <div class="content">
+
+  <div class="header">
+    <button *ngFor="let item of allFence; let key = index;" [ngClass]="{'selectFence': selectFence === key}" (click)="toggleHeaderFence(key)">{{item}}</button>
+    <div class="rightFence">
+      <img src="../../../assets/images/awningShow.png" [hidden]="!isOpenAwning" (click)="toggleHeaderAwning(false)">
+      <img src="../../../assets/images/awningHide.png" [hidden]="isOpenAwning" (click)="toggleHeaderAwning(true)">
+      <img src="../../../assets/images/rangeFinding.png" title="测量距离" (click)="toggleMeasure(1)" [ngClass]="{'selectRightTopFast': selectMeasure == 1}">
+      <img src="../../../assets/images/heightFinding.png" title="测量高度" (click)="toggleMeasure(2)" [ngClass]="{'selectRightTopFast': selectMeasure == 2}">
+      <img src="../../../assets/images/measuredArea.png" title="测量面积" (click)="toggleMeasure(3)" [ngClass]="{'selectRightTopFast': selectMeasure == 3}">
+    </div>
+  </div>
+
+  <div class="center">
     <canvas id="center"></canvas>
 
     <!-- 左侧建筑栏 -->
@@ -81,5 +94,6 @@
       </form>
     </nz-modal>
     <!-- 新增/编辑左侧建筑弹窗 -->
+  </div>
 
 </div>

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

@@ -2,7 +2,10 @@
   width: 100%;
   height: 100%;
   overflow: hidden;
-  position: relative;
+  padding: 0px 10px 10px 10px;
+  display: flex;
+  flex-direction: column;
+  .center { flex: 1; overflow: hidden; position: relative; border: 1px solid #2399FF; box-shadow: 0px 0px 16px #2399FF; }
   canvas{ width: 100%; height: 100%; border: none; outline: none; }
 }
 .loading{ //loading
@@ -25,6 +28,40 @@
   white-space: nowrap;
 }
 
+//头部 功能栏
+.header{
+  width: 100%;
+  height: 50px;
+  text-align: center;
+  overflow: hidden;
+  position: relative;
+  button {
+    box-sizing: border-box;
+    width: 120px;
+    height: 36px;
+    line-height: 36px;
+    color: #fff;
+    border: 1px solid #23D9FF;
+    outline: none;
+    background: linear-gradient(180deg, #000D21 0%, #002751 42%, #57A9FF 100%);
+    border-radius: 0px;
+    cursor: pointer;
+    margin: 7px 10px 0px;
+    padding: 0;
+  }
+  .selectFence { background: linear-gradient(180deg, #000D21 0%, #00404D 49%, #23D9FF 100%); } //选种样式
+  .rightFence{
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    width: 200px;
+    height: 50px;
+    line-height: 50px;
+    img { cursor: pointer; box-sizing: border-box; width: 36px; height: 36px; margin-left: 10px; }
+  }
+  .selectRightTopFast { border: 1px solid #fff; } //选种样式
+}
+
 //左侧建筑
 .showLeftBuilding{
   width: 30px;
@@ -32,7 +69,7 @@
   line-height: 30px;
   text-align: center;
   position: absolute;
-  left: 1px;
+  left: 0px;
   top: 50%;
   margin-top: -15px;
   color: #48A5FF;
@@ -43,7 +80,7 @@
   width: 230px;
   height: 70%;
   position: absolute;
-  left: 1px;
+  left: 0px;
   top: 0;
   bottom: 0;
   margin: auto;/*这行代码是关键*/
@@ -94,7 +131,7 @@
   position: absolute;
   left: 0;
   right: 0;
-  bottom: 1px;
+  bottom: 0px;
   margin: auto;/*这行代码是关键*/
   color: #fff;
   background: rgba(0,17,33,0.7);

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

@@ -92,6 +92,38 @@ export class PlanComponent implements OnInit {
   //开发模式 选择单位 弹窗
   modelInit(InsList) { }
 
+  allFence: string[] = ["基本信息", "加油机", "油罐设备", "消防设施", "安全疏散", "输油管线", "油气回收", "应急处置"]; //头部 功能栏
+  selectFence: number = 0; //选中 头部功能栏
+  isOpenAwning: boolean = true; //是否 打开罩棚
+  selectMeasure: number = 0; //当前选择 测量工具
+
+  //切换 头部功能栏
+  toggleHeaderFence(type: number) {
+    this.selectFence = type
+  }
+
+  //切换 头部罩棚
+  toggleHeaderAwning(isOpen: boolean) {
+    this.isOpenAwning = isOpen
+  }
+
+  //切换 测量工具
+  toggleMeasure(type: number) {
+    if (this.selectMeasure != type) { //切换工具
+      this.selectMeasure = type
+      if (type === 1) {
+        ToolbarWindow.instance.measureDistance()
+      } else if (type === 2) {
+        ToolbarWindow.instance.measureHeight()
+      } else {
+        ToolbarWindow.instance.measureArea()
+      }
+    } else { //关闭测量工具
+      this.selectMeasure = 0
+      ToolbarWindow.instance.endMeasure()
+    }
+  }
+
   buildingUIItems: BuildingUIItem[] = []; //左侧 建筑list
   beforeOneBuildingID: string = null; //选中 左侧建筑ID
   modelBuilding: modelBuilding = new modelBuilding(); //创建/编辑 建筑ngModel数据