刘向辉 3 years ago
parent
commit
e0b60e0765
  1. 4
      src/app/pages/pages.module.ts
  2. 21
      src/app/pages/plan/plan.component.html
  3. 67
      src/app/pages/plan/plan.component.scss
  4. 75
      src/app/pages/plan/plan.component.ts

4
src/app/pages/pages.module.ts

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

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

@ -1,3 +1,24 @@
<div class="content"> <div class="content">
<canvas id="center"></canvas> <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> </div>

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

@ -4,4 +4,71 @@
overflow: hidden; overflow: hidden;
position: relative; position: relative;
canvas{ width: 100%; height: 100%; border: none; outline: none; } 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;
} }

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

@ -1,5 +1,14 @@
import { Component, ElementRef, OnInit } from '@angular/core'; import { Component, ElementRef, OnInit } from '@angular/core';
import { Game } from 'src/app/babylon/game'; 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({ @Component({
selector: 'app-plan', selector: 'app-plan',
@ -8,21 +17,85 @@ import { Game } from 'src/app/babylon/game';
}) })
export class PlanComponent implements OnInit { export class PlanComponent implements OnInit {
constructor(private element: ElementRef,) { } constructor(private element: ElementRef,private buildingBISrv: BuildingBasicInfosService, private objectsSrv: ObjectsService,) { }
static instance: PlanComponent; static instance: PlanComponent;
public game: Game = new Game(); public game: Game = new Game();
public beforeOneSatus; //当前 satus
public canvas: HTMLCanvasElement; //canvas 实例 public canvas: HTMLCanvasElement; //canvas 实例
ngOnInit(): void { ngOnInit(): void {
PlanComponent.instance = this; PlanComponent.instance = this;
// ServeManager.Init(this.buildingBISrv, this.objectsSrv);
this.canvas = this.element.nativeElement.querySelector('#center') as HTMLCanvasElement; this.canvas = this.element.nativeElement.querySelector('#center') as HTMLCanvasElement;
this.game.init(this.canvas); 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 ngOnDestroy(): void { //组件销毁前 销毁canvas
this.game.dispose(); this.game.dispose();
this.game = null; 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) {
}
}
} }

Loading…
Cancel
Save