Browse Source

编辑建筑完善

dev
陈鹏飞 3 years ago
parent
commit
5cc005eb9e
  1. 12
      src/app/pages/plan/plan.component.html
  2. 2
      src/app/pages/plan/plan.component.scss
  3. 57
      src/app/pages/plan/plan.component.ts

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

@ -7,12 +7,12 @@
<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)="isShowBuildingPop = true">新建</button>
<button nz-button nzType="primary" (click)="addBuildingPop = true">新建</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;">
<label style="width: 50px; 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>
@ -28,18 +28,18 @@
<!-- 右上角快捷栏 -->
<!-- 新增/编辑左侧建筑弹窗 -->
<nz-modal [(nzVisible)]="isShowBuildingPop" nzTitle="创建/编辑建筑" (nzOnCancel)="isShowBuildingPop = false" (nzOnOk)="addModelBuilding(form.value)" [nzOkDisabled]='name.invalid||modelType.invalid'>
<nz-modal [(nzVisible)]="addBuildingPop || editBuildingPop" nzTitle="创建/编辑建筑" (nzOnCancel)="addBuildingPop = false; editBuildingPop = null;" (nzOnOk)="addModelBuilding(form.value)" [nzOkDisabled]='name.invalid||modelType.invalid'>
<form nz-form #form='ngForm'>
<nz-form-item>
<nz-form-label [nzSpan]="6">名称</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
<input nz-input #name='ngModel' ngModel name="name" required/>
<input nz-input #name='ngModel' [(ngModel)]="modelBuilding.name" name="name" required/>
</nz-form-control>
</nz-form-item>
<nz-form-item>
<nz-form-label [nzSpan]="6">请选择模型类型</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请选择必填项">
<nz-select #modelType='ngModel' ngModel name="modelType" required>
<nz-select #modelType='ngModel' [(ngModel)]="modelBuilding.modelType" name="modelType" required>
<nz-option nzValue="normal" nzLabel="建筑物"></nz-option>
<nz-option nzValue="environment" nzLabel="场景"></nz-option>
</nz-select>
@ -48,7 +48,7 @@
<nz-form-item>
<nz-form-label [nzSpan]="6">上传文件</nz-form-label>
<nz-form-control [nzSpan]="18" nzErrorTip="请上传文件">
<a href="javascript:;" class="uploadBackGround"><input type="file" (change)='selectFile($event)' multiple>上传文件<i nz-icon nzType="cloud-upload" nzTheme="outline" style="font-size: 16px;"></i></a>
<a href="javascript:;" class="uploadBackGround"><input type="file" (change)='selectFile($event)' multiple>上传文件<i nz-icon nzType="cloud-upload" nzTheme="outline"></i></a>
<p *ngIf="uploadList.length" style="font-size: 14px; text-align: left; max-height: 500px; overflow: hidden;">选择文件: <label *ngFor="let item of uploadList">{{item.name}}, </label></p>
</nz-form-control>
</nz-form-item>

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

@ -5,6 +5,7 @@
position: relative;
canvas{ width: 100%; height: 100%; border: none; outline: none; }
}
.anticon { font-size: 16px; cursor: pointer; } //字体图标
//文本溢出
.overflowText{
overflow: hidden;
@ -64,6 +65,7 @@
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; } //选中样式
}

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

@ -10,6 +10,8 @@ import { ObjectsService } from 'src/app/service/objects.service';
import { ToolbarWindow } from 'src/app/babylon/view/toolbar-window/toobar-window';
import { BuildingStatus } from 'src/app/babylon/controller/status/building-status';
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';
@ -69,13 +71,13 @@ export class PlanComponent implements OnInit {
}
//开发模式 选择单位 弹窗
modelInit(InsList) {
console.log(InsList)
}
modelInit(InsList) { }
buildingUIItems: BuildingUIItem[] = []; //左侧 建筑list
beforeOneBuildingID: string = null; //选中 左侧建筑ID
isShowBuildingPop: boolean = false; //显隐 新增/编辑左侧建筑弹窗
modelBuilding: modelBuilding = new modelBuilding(); //创建/编辑 建筑ngModel数据
addBuildingPop: boolean = false; //显隐 新增左侧建筑弹窗
editBuildingPop: BuildingUIItem = null; //显隐 编辑左侧建筑弹窗
isShowLeftBuilding: boolean = true; //显隐 建筑list
toggleLeftBuilding(e) { this.isShowLeftBuilding = e }; //显隐 建筑list
@ -95,29 +97,42 @@ export class PlanComponent implements OnInit {
item.select();
}
//创建建筑
addModelBuilding(e) {
let order = this.buildingUIItems.length + 1;
this.beforeOneSatus = StatusManager.getStatus<BuildingStatus>(BuildingStatus);
let buildingWindow = this.beforeOneSatus.buildingWindow;
let newBuildingData = this.beforeOneSatus.createOneBuildingInData(e.name, e.name, e.modelType);
buildingWindow.changeModel(this.uploadList, newBuildingData);
buildingWindow.createOneBuildingItem(newBuildingData, order);
this.buildingUIItems = this.beforeOneSatus.buildingWindow.buildingUIItems //更新 建筑列表list
this.isShowBuildingPop = false; //关闭弹窗
//创建/编辑建筑
addModelBuilding(e: modelBuilding) {
if (this.addBuildingPop) { //新增
let order = this.buildingUIItems.length + 1;
this.beforeOneSatus = StatusManager.getStatus<BuildingStatus>(BuildingStatus);
let buildingWindow: BuildingWindow = this.beforeOneSatus.buildingWindow;
let newBuildingData = this.beforeOneSatus.createOneBuildingInData(e.name, e.name, e.modelType);
buildingWindow.changeModel(this.uploadList, newBuildingData);
buildingWindow.createOneBuildingItem(newBuildingData, order);
this.modelBuilding = new modelBuilding();
this.buildingUIItems = this.beforeOneSatus.buildingWindow.buildingUIItems; //更新 建筑列表list
this.addBuildingPop = false; //关闭弹窗
} else if (this.editBuildingPop) { //编辑
this.editBuildingPop.setBuildingName(e.name);
this.editBuildingPop.changeModel(this.uploadList);
this.editBuildingPop = null; //关闭弹窗
}
}
//编辑建筑
editModelBuilding(event, e) {
//打开编辑建筑 弹窗
editModelBuilding(event, e: BuildingUIItem) {
event.stopPropagation()
this.modelBuilding.name = JSON.parse(JSON.stringify(e.getBuildingName()))
this.modelBuilding.modelType = JSON.parse(JSON.stringify(e.getBuildingType()))
this.editBuildingPop = e; //打开弹窗
}
//删除建筑
deleteModelBuilding(event, e) {
deleteModelBuilding(event, e: BuildingUIItem) {
event.stopPropagation()
let isTrue = confirm('您确定要删除吗')
if (isTrue) {
this.beforeOneSatus = StatusManager.getStatus<BuildingStatus>(BuildingStatus);
let buildingWindow: BuildingWindow = this.beforeOneSatus.buildingWindow;
buildingWindow.deleteBuilding(e)
this.buildingUIItems = this.beforeOneSatus.buildingWindow.buildingUIItems; //更新 建筑列表list
}
}
@ -129,3 +144,9 @@ export class PlanComponent implements OnInit {
}
//创建/编辑 建筑dataType
export class modelBuilding {
name: string = "";
modelType: BuildingType = BuildingType.Normal;
}

Loading…
Cancel
Save