建筑列表完善

src/app/pages/pages.module.ts

@@ -12,8 +12,6 @@ import { RouterModule } from '@angular/router';
 import { LoginComponent } from './login/login.component';
 import { RegisterComponent } from './register/register.component';
 import { HomeComponent } from './home/home.component';
-
-
 import { NzFormModule } from 'ng-zorro-antd/form';
 import { NzInputModule } from 'ng-zorro-antd/input';
 import { UiModule } from '../ui/ui.module';
@@ -22,12 +20,12 @@ import { PlanComponent } from './plan/plan.component';
 import { PagesRoutingModule } from './pages-routing.module';
 import { TodayWarningComponent } from './today-warning/today-warning.component';
 import { CriminalRecordsComponent } from './criminal-records/criminal-records.component';
-
 import { NzSelectModule } from 'ng-zorro-antd/select';
 import { NzDatePickerModule } from 'ng-zorro-antd/date-picker';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 import { NzGridModule } from 'ng-zorro-antd/grid';
 import { NzModalModule } from 'ng-zorro-antd/modal';
+
 @NgModule({
   declarations: [LoginComponent, RegisterComponent, HomeComponent, PlanComponent, TodayWarningComponent, CriminalRecordsComponent,],
   imports: [

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

@@ -1,3 +1,24 @@
 <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>
+    <div class="leftHeader">
+      <h1><label>模型列表</label></h1>
+      <button nz-button nzType="primary" (click)="addModelBuilding()">新建</button>
+    </div>
+    <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: 95px; overflow: hidden;">
+          <i nz-icon nzType="edit" nzTheme="outline" title="编辑" (click)="editModelBuilding($event,item)"></i>
+          <i nz-icon nzType="delete" nzTheme="outline" title="删除" (click)="deleteModelBuilding($event,item)"></i>
+        </label>
+      </div>
+    </div>
+  </div>
+  <!-- 左侧建筑 -->
+
 </div>

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

@@ -4,4 +4,71 @@
   overflow: hidden;
   position: relative;
   canvas{ width: 100%; height: 100%; border: none; outline: none; }
+}
+//文本溢出
+.overflowText{
+  overflow: hidden;
+  text-overflow:ellipsis;
+  white-space: nowrap;
+}
+
+//左侧建筑
+.showLeftBuilding{
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  text-align: center;
+  position: absolute;
+  left: 1px;
+  top: 50%;
+  margin-top: -15px;
+  color: #48A5FF;
+  background: rgba(0,17,33,0.7);
+  border-radius: 0px 50% 50% 0px;
+}
+.leftBuilding{
+  width: 230px;
+  height: 70%;
+  position: absolute;
+  left: 1px;
+  top: 0;
+  bottom: 0;
+  margin: auto;/*这行代码是关键*/
+  background: rgba(0,17,33,0.7);
+  border-radius: 0px 10px 10px 0px;
+  margin-left: 0;
+  transition: margin-left 0.5s;
+  display: flex;
+  flex-direction: column;
+  .hideLeft { text-align: right; color: #fff; padding: 3px 5px; z-index: 10; }
+  .leftHeader {
+    overflow: hidden;
+    text-align: center;
+    margin-top: -15px;
+    h1 { font-size: 18px; color: #fff; margin-bottom: 10px; }
+    button { width: 90%; }
+  }
+  .leftCenter{
+    flex: 1;
+    overflow-x: hidden;
+    overflow-y: auto;
+    .everyBuilding {
+      height: 30px;
+      line-height: 30px;
+      margin-top: 5px;
+      box-sizing: border-box;
+      padding-left: 5px;
+      color: #fff;
+      font-size: 16px;
+      display: flex;
+      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+      .modelTitle { font-size: 14px; }
+      label { display: block; }
+    }
+    .selectLeftBuilding { background-color: #2196f3; } //选中样式
+  }
+}
+.isShowLeftBuilding{ //隐藏 动态效果
+  margin-left: -300px;
+  transition: margin-left 0.5s;
 }

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

@@ -1,5 +1,14 @@
 import { Component, ElementRef, OnInit } 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';
+import { InsitutionDataSimple } from 'src/app/babylon/model/data/institution/institution-data-simple';
+import { ModeManager } from 'src/app/babylon/controller/mode-manager';
+import { ServeManager } from 'src/app/babylon/controller/serve-manager';
+import { BuildingBasicInfosService } from 'src/app/service/babylon/building-basic-infos.service';
+import { ObjectsService } from 'src/app/service/objects.service';
+
+
 
 @Component({
   selector: 'app-plan',
@@ -8,21 +17,85 @@ import { Game } from 'src/app/babylon/game';
 })
 export class PlanComponent implements OnInit {
 
-  constructor(private element: ElementRef,) { }
+  constructor(private element: ElementRef,private buildingBISrv: BuildingBasicInfosService, private objectsSrv: ObjectsService,) { }
 
   static instance: PlanComponent;
   public game: Game = new Game();
+  public beforeOneSatus; //当前 satus
   public canvas: HTMLCanvasElement; //canvas 实例
 
   ngOnInit(): void {
     PlanComponent.instance = this;
+    // ServeManager.Init(this.buildingBISrv, this.objectsSrv);
     this.canvas = this.element.nativeElement.querySelector('#center') as HTMLCanvasElement;
     this.game.init(this.canvas);
   }
 
+  ngAfterViewInit(): void {
+    let loginStatus = StatusManager.getStatus<LoginSatus>(LoginSatus);
+    loginStatus.getInstitutionListFromServe((result: InsitutionDataSimple[], data: any) => {
+      if (ModeManager.institutionDemoKey == ModeManager.c_demoKey_null) { //无指定测试单位，则为正式启动，根据当前单位key寻找
+        let key = 'ceshi';
+        let find = data.find(item => { return item.key === key })
+        if (find) { //如果在data中找到了对应的单位key，则表示已经有三维数据，直接进入
+          this.beforeOneSatus = StatusManager.getStatus<LoginSatus>(LoginSatus);
+          this.beforeOneSatus.onSelectInsSuccess(find)
+        } else { //如果没有找到对应的单位key，则调用新建单位
+          let name = 'ceshi';
+          loginStatus.createInsitution(key, name);
+        }
+      } else {
+        let find = data.find(item => { return item.key === ModeManager.institutionDemoKey })
+        if (find) {
+          sessionStorage.setItem('unitId', find.key)
+          this.beforeOneSatus = StatusManager.getStatus<LoginSatus>(LoginSatus);
+          this.beforeOneSatus.onSelectInsSuccess(find)
+        } else {
+          this.modelInit(data) //开发模式 选择单位 弹窗
+        }
+      }
+    });
+  }
+
   ngOnDestroy(): void { //组件销毁前 销毁canvas
     this.game.dispose();
     this.game = null;
   }
 
+  //开发模式 选择单位 弹窗
+  modelInit(InsList) {
+    console.log(InsList)
+  }
+
+  buildingUIItems: any[] = []; //左侧 建筑list
+  beforeOneBuildingID: string = null; //选中 左侧建筑ID
+  isShowLeftBuilding: boolean = true; //显隐 建筑
+  toggleLeftBuilding(e) { this.isShowLeftBuilding = e }; //显隐 建筑
+
+  //选择建筑
+  selectLeftBuilding(e) {
+
+  }
+
+  //创建建筑
+  addModelBuilding() {
+
+  }
+
+  //编辑建筑
+  editModelBuilding(event, e) {
+    event.stopPropagation()
+  }
+
+  //删除建筑
+  deleteModelBuilding(event, e) {
+    event.stopPropagation()
+    let isTrue = confirm('您确定要删除吗')
+    if (isTrue) {
+
+    }
+  }
+
+
+
 }