底部图标栏完善

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

@@ -11,6 +11,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';
@@ -29,7 +30,6 @@ import { ModelInfo_facility } from '../../model/info/model/model-info-facility';
 import { BabylonTool } from '../../tool/babylon-tool';
 import { BabylonUIStyleTool } from '../../tool/babylon-ui-style-tool';
 import { GizmoTool } from '../../tool/gizmo-tool';
-
 import { CopyFacilityInfo, FacilityInfoInSceneWindow } from '../facilityinfoinscene-window/facilityinfoinscene-window';
 import { ToolbarWindow } from '../toolbar-window/toobar-window';
 import { UIBase } from '../window-base/ui-base';
@@ -39,7 +39,7 @@ import { FacilityUIItem } from './facility-ui-item';
 export class FacilityWindow extends UIBase {
 
 
-    // three: ThreeDimensionalHomeComponent;//前端组件
+    three: PlanComponent;//前端组件
 
     allFacilityUIItemes: FacilityUIItem[] = [];
 
@@ -172,10 +172,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
 
     }
 
@@ -245,7 +245,7 @@ export class FacilityWindow extends UIBase {
                     }
                 }
                 else { //右键取消
-                    // instance.three.unSelectBottomIcon();
+                    instance.three.unSelectBottomIcon();
                 }
 
                 break;

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>
@@ -19,7 +19,20 @@
       </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">

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;
@@ -75,6 +75,40 @@
   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: -5px; font-size: 12px; }
+    }
+  }
+  .selectLeftIcon { background: rgb(0,128,255,0.5); } //选中样式
+}
+
 //右上角快捷栏
 .rightTopFast{
   width: 60px;

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';
 
 
 
@@ -136,6 +138,41 @@ 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
+  }
+
   //保存
   preserve() {
     ToolbarWindow.instance.onBtnSave();