Merge branch 'master' of http://39.106.78.171:3000/shaojiahao/Sinopec-Anxin

# Conflicts:
#	src/app/babylon/view/facility-window/facility-window.ts

src/app/babylon/view/facility-window/facility-window.ts

@@ -12,6 +12,7 @@ import {
     Image,
     Rectangle,
 } from '@babylonjs/gui';
+import { PlanComponent } from 'src/app/pages/plan/plan.component';
 import { ConfigManager } from '../../controller/config-manager';
 import { DataManager, ModelChangeType } from '../../controller/data-manager';
 import { Event_ChangeFacility } from '../../controller/event-manager/events/event-change-facility';
@@ -31,7 +32,6 @@ import { BabylonTool } from '../../tool/babylon-tool';
 import { BabylonUIStyleTool } from '../../tool/babylon-ui-style-tool';
 import { GizmoTool } from '../../tool/gizmo-tool';
 import { TsTool } from '../../tool/ts-tool';
-
 import { CopyFacilityInfo, FacilityInfoInSceneWindow } from '../facilityinfoinscene-window/facilityinfoinscene-window';
 import { ToolbarWindow } from '../toolbar-window/toobar-window';
 import { UIBase } from '../window-base/ui-base';
@@ -41,7 +41,7 @@ import { FacilityUIItem } from './facility-ui-item';
 export class FacilityWindow extends UIBase {
 
 
-    // three: ThreeDimensionalHomeComponent;//前端组件
+    three: PlanComponent;//前端组件
 
     allFacilityUIItemes: FacilityUIItem[] = [];
 
@@ -174,10 +174,10 @@ export class FacilityWindow extends UIBase {
             console.log("所有可用的设备", instance.allFacilityUIItemes);
 
 
-            // ThreeDimensionalHomeComponent.instance.getAllIcons(instance)
+            PlanComponent.instance.getAllIcons(instance)
 
         })
-        // instance.three = ThreeDimensionalHomeComponent.instance
+        instance.three = PlanComponent.instance
 
     }
 
@@ -247,7 +247,7 @@ export class FacilityWindow extends UIBase {
                     }
                 }
                 else { //右键取消
-                    // instance.three.unSelectBottomIcon();
+                    instance.three.unSelectBottomIcon();
                 }
 
                 break;

src/app/babylon/view/toolbar-window/toobar-window.ts

@@ -3,6 +3,7 @@ import { PointerEventTypes } from "@babylonjs/core/Events/pointerEvents";
 import { PointerInfo } from "@babylonjs/core/Events/pointerEvents";
 import { EventState } from "@babylonjs/core/Misc/observable";
 import { Button, Control, Rectangle } from "@babylonjs/gui";
+import { PlanComponent } from "src/app/pages/plan/plan.component";
 import { DataManager } from "../../controller/data-manager";
 import { ModeManager } from "../../controller/mode-manager";
 import { SceneManager } from "../../controller/scene-manager";
@@ -12,10 +13,8 @@ import { BabylonUIStyleTool } from "../../tool/babylon-ui-style-tool";
 import { GizmoTool, TransformUIType } from "../../tool/gizmo-tool";
 import { MeasureTool, MeasureType } from "../../tool/measure-tool";
 import { BuildingWindow } from "../building-window/building-window";
-
 import { FacilityWindow } from "../facility-window/facility-window";
 import { CopyFacilityInfo, FacilityInfoInSceneWindow } from "../facilityinfoinscene-window/facilityinfoinscene-window";
-
 import { UIBase } from "../window-base/ui-base";
 
 /**
@@ -33,7 +32,7 @@ export class ToolbarWindow extends UIBase {
 
 
     //#region 前端对接
-    // three: ThreeDimensionalHomeComponent;//前端组件
+    three: PlanComponent;//前端组件
     compassAlpha: number;//指南针旋转 0-2π
 
     /**
@@ -220,7 +219,7 @@ export class ToolbarWindow extends UIBase {
     //改变拾取状态
     changeMeshAdsorbY() {
         this.isMeshAdsorb = !this.isMeshAdsorb;
-        // this.three.updateSelectAdsorb();
+        PlanComponent.instance.updateSelectAdsorb();
     }
     //#endregion
 

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

@@ -1,7 +1,7 @@
 <div class="content">
   <canvas id="center"></canvas>
 
-  <!-- 左侧建筑 -->
+  <!-- 左侧建筑栏 -->
   <div class="showLeftBuilding" title="显示" *ngIf="!isShowLeftBuilding" (click)="toggleLeftBuilding(true)"><i nz-icon nzType="right" nzTheme="outline"></i></div>
   <div class="leftBuilding" [ngClass]="{'isShowLeftBuilding': isShowLeftBuilding === false}">
     <div class="hideLeft"><i nz-icon nzType="close" nzTheme="outline" title="隐藏" (click)="toggleLeftBuilding(false)"></i></div>
@@ -12,17 +12,38 @@
     <div class="leftCenter">
       <div class="everyBuilding" *ngFor="let item of buildingUIItems" (click)='selectLeftBuilding(item)' [ngClass]="{'selectLeftBuilding': beforeOneBuildingID == item.getBuildingID()}">
         <label style="flex: 1;" class="overflowText modelTitle">{{item.getBuildingName()}}</label>
-        <label style="width: 50px; overflow: hidden;">
+        <label style="width: 65px; overflow: hidden;">
-          <i nz-icon nzType="edit" nzTheme="outline" title="编辑" (click)="editModelBuilding($event,item)"></i>
+          <i nz-icon nzType="plus-circle" nzTheme="outline" title="聚焦" (click)="positionModelBuilding($event,item)"></i>
+          <i nz-icon nzType="edit" nzTheme="outline" title="编辑" (click)="editModelBuilding($event,item)" style="margin: 0 5px;"></i>
           <i nz-icon nzType="delete" nzTheme="outline" title="删除" (click)="deleteModelBuilding($event,item)"></i>
         </label>
       </div>
     </div>
   </div>
-  <!-- 左侧建筑 -->
+  <!-- 左侧建筑栏 -->
+
+  <!-- 底部图标栏 -->
+  <div class="bottomIcons">
+    <div class="autoScroll"><i nz-icon nzType="left" nzTheme="outline" (click)="bottomScroll(0)"></i></div>
+    <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">
+    <div class="publicFast leftFast">
+      <button title="平移" (click)="translation()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 0}"></button>
+      <button title="旋转" (click)="revolve()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 1}"></button>
+      <button title="缩放" (click)="scale()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 2}"></button>
+      <button title="吸附" (click)="adsorb()" [ngClass]="{'leftFastIsTure': selectAdsorb }"></button>
+      <button title="切换至顶视图" (click)="toggleTopLevelView()" [ngClass]="{'leftFastIsTure': topLevelView }"></button>
+    </div>
     <div style="margin: 0 10px; background-color: #0080FF;" title="保存"><button (click)="preserve()"><i nz-icon nzType="save" nzTheme="outline" style="font-size: 20px;"></i></button></div>
   </div>
   <!-- 右上角快捷栏 -->

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

@@ -5,7 +5,7 @@
   position: relative;
   canvas{ width: 100%; height: 100%; border: none; outline: none; }
 }
-.anticon { font-size: 16px; cursor: pointer; } //字体图标
+.anticon{ font-size: 16px; cursor: pointer; } //字体图标
 //文本溢出
 .overflowText{
   overflow: hidden;
@@ -65,7 +65,6 @@
       border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       .modelTitle { font-size: 14px; }
       label { display: block; }
-      .anticon { margin: 0 3px; } //字体图标
     }
     .selectLeftBuilding { background-color: #2196f3; } //选中样式
   }
@@ -75,9 +74,43 @@
   transition: margin-left 0.5s;
 }
 
+//底部图标栏
+.bottomIcons{
+  width: 80%;
+  height: 60px;
+  line-height: 60px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 1px;
+  margin: auto;/*这行代码是关键*/
+  color: #fff;
+  background: rgba(0,17,33,0.7);
+  border-radius: 10px 10px 0px 0px;
+  display: flex;
+  box-sizing: border-box;
+  padding: 1px;
+  .autoScroll{ width: 30px; text-align: center; }
+  .bottomCenter{
+    flex: 1;
+    overflow: hidden;
+    .everyIcon {
+      width: 100px;
+      height: 58px;
+      line-height: normal;
+      text-align: center;
+      display: inline-block;
+      overflow: hidden;
+      img { width: 40px; height: 40px; margin-top: 3px; cursor: pointer; }
+      p { height: 18px; line-height: 18px; margin-top: -3px; font-size: 12px; }
+    }
+  }
+  .selectLeftIcon { background: rgb(0,128,255,0.5); } //选中样式
+}
+
 //右上角快捷栏
 .rightTopFast{
-  width: 60px;
+  width: 250px;
   height: 38px;
   position: absolute;
   right: 1px;
@@ -95,4 +128,18 @@
     color: #fff;
     cursor: pointer;
   }
+  .publicFast {
+    box-sizing: border-box;
+    padding: 1px 5px;
+    background-color: rgba(0,0,0,0.5);
+  }
+  .leftFast {
+    :first-child{ background: url(../../../assets/images/translationThree.png) no-repeat center; }
+    :nth-child(2){ background: url(../../../assets/images/revolveThree.png) no-repeat center; }
+    :nth-child(3){ background: url(../../../assets/images/scaleThree.png) no-repeat center; }
+    :nth-child(4){ background: url(../../../assets/images/adsorb.png) no-repeat center; }
+    :nth-child(5){ background: url(../../../assets/images/verticalView.png) no-repeat center; }
+    .leftFastIsTure { border: 1px solid #fff; } //吸附样式
+  }
+  .selectRightTopFast { border: 1px solid #fff; } //选种样式
 }

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

@@ -12,6 +12,8 @@ import { BuildingStatus } from 'src/app/babylon/controller/status/building-statu
 import { BuildingUIItem } from 'src/app/babylon/view/building-window/building-ui-item';
 import { BuildingType } from 'src/app/babylon/model/data/institution/building/building-data';
 import { BuildingWindow } from 'src/app/babylon/view/building-window/building-window';
+import { FacilityUIItem } from 'src/app/babylon/view/facility-window/facility-ui-item';
+import { FacilityWindow } from 'src/app/babylon/view/facility-window/facility-window';
 
 
 
@@ -124,6 +126,12 @@ export class PlanComponent implements OnInit {
     this.editBuildingPop = e; //打开弹窗
   }
 
+  //聚焦 建筑
+  positionModelBuilding(event, e: BuildingUIItem) {
+    event.stopPropagation()
+    e.lookAt()
+  }
+
   //删除建筑
   deleteModelBuilding(event, e: BuildingUIItem) {
     event.stopPropagation()
@@ -136,6 +144,79 @@ export class PlanComponent implements OnInit {
     }
   }
 
+  allFacilityUIItemes: FacilityUIItem[] = []; //底部所有 图标
+  beforeOneIcon: string = null; //当前选择 图标
+
+  // 获取 底部图标栏list
+  getAllIcons(e: FacilityWindow) {
+    this.allFacilityUIItemes = e.allFacilityUIItemes
+    this.beforeOneIcon = null
+  }
+
+  //选择底部图标
+  selectBottomIcon(e: FacilityUIItem) {
+    if (this.beforeOneIcon != e.getIconID()) {
+      this.beforeOneIcon = e.getIconID()
+      e.select()
+    } else {
+      this.beforeOneIcon = null
+      e.unSelect()
+    }
+  }
+
+  //取消选择 底部图标
+  unSelectBottomIcon() {
+    if (this.beforeOneIcon) {
+      let e: FacilityUIItem = this.allFacilityUIItemes.find(item => { return item.getIconID() === this.beforeOneIcon })
+      e ? e.unSelect() : null
+      this.beforeOneIcon = null
+    }
+  }
+
+  //底部图标栏 滚动条
+  bottomScroll(e) {
+    let bootomDiv = this.element.nativeElement.querySelector('#bottomCenter')
+    e == 0 ? bootomDiv.scrollLeft = bootomDiv.scrollLeft + 50 : bootomDiv.scrollLeft = bootomDiv.scrollLeft - 50
+  }
+
+  selectRightTopFast: number = 0; //当前选择功能 快捷栏
+  selectAdsorb: boolean = false; //吸附状态
+  topLevelView: boolean = false; //顶视图状态
+
+  //平移
+  translation() {
+    this.selectRightTopFast = 0
+    ToolbarWindow.instance.changeGizmoType_position();
+  }
+
+  //旋转
+  revolve() {
+    this.selectRightTopFast = 1
+    ToolbarWindow.instance.changeGizmoType_Rotation();
+  }
+
+  //缩放
+  scale() {
+    this.selectRightTopFast = 2
+    ToolbarWindow.instance.changeGizmoType_Scale();
+  }
+
+  //吸附
+  adsorb() {
+    ToolbarWindow.instance.changeMeshAdsorbY();
+  }
+
+  //获取吸附的状态
+  updateSelectAdsorb() {
+    this.selectAdsorb = ToolbarWindow.instance.isMeshAdsorb;
+  }
+
+  //切换至顶视图
+  toggleTopLevelView() {
+    this.topLevelView = !this.topLevelView
+    ToolbarWindow.instance.changeTopView(this.topLevelView)
+  }
+
   //保存
   preserve() {
     ToolbarWindow.instance.onBtnSave();