20 changed files with 343 additions and 159 deletions
@ -1,3 +1,37 @@ |
|||||||
<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)="isShowBuildingPop = 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;"> |
||||||
|
<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> |
||||||
|
<!-- 左侧建筑 --> |
||||||
|
|
||||||
|
<!-- 新增/编辑左侧建筑弹窗 --> |
||||||
|
<nz-modal [(nzVisible)]="isShowBuildingPop" nzTitle="创建/编辑建筑" (nzOnCancel)="isShowBuildingPop = false" (nzOnOk)="addModelBuilding()"> |
||||||
|
<form nz-form> |
||||||
|
<nz-form-item> |
||||||
|
<nz-form-label [nzSpan]="5">名称</nz-form-label> |
||||||
|
<nz-form-control [nzSpan]="12" nzErrorTip="请输入必填项"> |
||||||
|
<input nz-input ngModel name="name" required/> |
||||||
|
</nz-form-control> |
||||||
|
</nz-form-item> |
||||||
|
</form> |
||||||
|
</nz-modal> |
||||||
|
<!-- 新增/编辑左侧建筑弹窗 --> |
||||||
|
|
||||||
</div> |
</div> |
||||||
@ -1,28 +1,104 @@ |
|||||||
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', |
||||||
templateUrl: './plan.component.html', |
templateUrl: './plan.component.html', |
||||||
styleUrls: ['./plan.component.scss'] |
styleUrls: ['./plan.component.scss','./publicPop.scss'] |
||||||
}) |
}) |
||||||
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，则表示已经有三维数据，直接进入
|
||||||
|
console.log("找到已有单位" + key); |
||||||
|
this.beforeOneSatus = StatusManager.getStatus<LoginSatus>(LoginSatus); |
||||||
|
this.beforeOneSatus.onSelectInsSuccess(find) |
||||||
|
} else { //如果没有找到对应的单位key，则调用新建单位
|
||||||
|
let name = 'ceshi'; |
||||||
|
console.log("没找到单位，新建" + key); |
||||||
|
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
|
||||||
|
isShowBuildingPop: boolean = false; //显隐 新增/编辑左侧建筑弹窗
|
||||||
|
isShowLeftBuilding: boolean = true; //显隐 建筑
|
||||||
|
toggleLeftBuilding(e) { this.isShowLeftBuilding = e }; //显隐 建筑
|
||||||
|
|
||||||
|
//选择建筑
|
||||||
|
selectLeftBuilding(e) { |
||||||
|
|
||||||
|
} |
||||||
|
|
||||||
|
//创建建筑
|
||||||
|
addModelBuilding() { |
||||||
|
console.log('add') |
||||||
|
} |
||||||
|
|
||||||
|
//编辑建筑
|
||||||
|
editModelBuilding(event, e) { |
||||||
|
event.stopPropagation() |
||||||
|
} |
||||||
|
|
||||||
|
//删除建筑
|
||||||
|
deleteModelBuilding(event, e) { |
||||||
|
event.stopPropagation() |
||||||
|
let isTrue = confirm('您确定要删除吗') |
||||||
|
if (isTrue) { |
||||||
|
|
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
} |
} |
||||||
|
|||||||
@ -0,0 +1,30 @@ |
|||||||
|
.keyMargin { |
||||||
|
width: 100%; |
||||||
|
margin-bottom: 10px; |
||||||
|
text-align: center; |
||||||
|
.mat-form-field { width: 100%; } |
||||||
|
//上传CAD弹窗 inputfile |
||||||
|
.uploadBackGround { |
||||||
|
width: 125px; |
||||||
|
padding: 0 25px; |
||||||
|
height: 30px; |
||||||
|
line-height: 30px; |
||||||
|
position: relative; |
||||||
|
cursor: pointer; |
||||||
|
color: #0275e7; |
||||||
|
font-size: 14px; |
||||||
|
background: #fafafa; |
||||||
|
border: 1px solid #0275e7; |
||||||
|
border-radius: 5px; |
||||||
|
overflow: hidden; |
||||||
|
display: inline-block; |
||||||
|
} |
||||||
|
.uploadBackGround input { |
||||||
|
position: absolute; |
||||||
|
width: 100%; |
||||||
|
right: 0; |
||||||
|
top: 0; |
||||||
|
opacity: 0; |
||||||
|
cursor: pointer |
||||||
|
} |
||||||
|
} |
||||||
@ -1,87 +0,0 @@ |
|||||||
import { HttpClient } from '@angular/common/http'; |
|
||||||
import { Injectable } from '@angular/core'; |
|
||||||
import { Observable } from 'rxjs'; |
|
||||||
|
|
||||||
@Injectable({ |
|
||||||
providedIn: 'root' |
|
||||||
}) |
|
||||||
export class ObjectsService { |
|
||||||
|
|
||||||
static readonly c_apiRoot = "/api/";//普通上传的API根路径
|
|
||||||
static readonly c_apiRoot_Multipart = "/api/";//分块上传的API根路径
|
|
||||||
|
|
||||||
// static testPath = "f1/f2";//测试路径
|
|
||||||
|
|
||||||
constructor(private http: HttpClient) { } |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//普通上传，单个文件上限5M
|
|
||||||
static baseUrl = ObjectsService.c_apiRoot + 'Objects/WebPlan/'; |
|
||||||
postFile(extensionPath: string, file: File): Observable<Object> { |
|
||||||
let formData = new FormData() |
|
||||||
//console.log(file.name + file.type);
|
|
||||||
formData.append("file", file, file.name) |
|
||||||
|
|
||||||
let data = { keepOriginalName: 'true' } |
|
||||||
return this.http.post(ObjectsService.baseUrl + extensionPath, formData, { params: data }); |
|
||||||
} |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//分块上传
|
|
||||||
static baseUrl_MultipartUpload = ObjectsService.c_apiRoot_Multipart + 'NewMultipartUpload/WebPlan/'; |
|
||||||
// {
|
|
||||||
// "objectName": "string",
|
|
||||||
// "uploadId": "string"
|
|
||||||
// }
|
|
||||||
postFile_MultipartUpload(extensionPath: string, file: File): Promise<Object> { |
|
||||||
// let formData = new FormData()
|
|
||||||
// formData.append("file", file, file.name)
|
|
||||||
// return this.http.post(ObjectsService.baseUrl + extensionPath, formData);
|
|
||||||
let data = { keepOriginalName: 'true', filename: file.name } |
|
||||||
return new Promise((resolve, reject) => { |
|
||||||
this.http.post(ObjectsService.baseUrl_MultipartUpload + extensionPath, {}, { params: data }).subscribe(async (data: any) => { //初始化分段上传
|
|
||||||
let objectName = data.objectName |
|
||||||
let uploadId = data.uploadId |
|
||||||
let PartNumberETag = []; //每次返回需要保存的信息
|
|
||||||
//分块 处理
|
|
||||||
let fileSize = file.size || null //上传文件的总大小
|
|
||||||
let shardSize = 5 * 1024 * 1024 //5MB一个分片
|
|
||||||
let allSlice = Math.ceil(fileSize / shardSize) //总文件/5MB===共分多少段
|
|
||||||
|
|
||||||
for (let i = 0; i < allSlice; i++) { //循环分段上传
|
|
||||||
let start = i * shardSize //切割文件开始位置
|
|
||||||
let end = Math.min(fileSize, start + shardSize); //切割文件结束位置
|
|
||||||
let formData = new FormData() |
|
||||||
formData.append("file", file.slice(start, end)) |
|
||||||
|
|
||||||
//同步写法实现异步调用
|
|
||||||
let result = await new Promise((resolve, reject) => { |
|
||||||
// await 需要后面返回一个 promise 对象
|
|
||||||
this.http.post(ObjectsService.c_apiRoot_Multipart + `MultipartUpload/WebPlan/${objectName}?uploadId=${uploadId}&partNumber=${i + 1}`, formData).subscribe((data: any) => { |
|
||||||
let msg = { "partNumber": data.partNumber || null, "eTag": data.eTag || null } |
|
||||||
resolve(msg) // 调用 promise 内置方法处理成功
|
|
||||||
}) |
|
||||||
}); |
|
||||||
PartNumberETag.push(result) |
|
||||||
|
|
||||||
if (PartNumberETag.length === allSlice) { //分块上传完成
|
|
||||||
let data = PartNumberETag |
|
||||||
let paramsData = { uploadId: uploadId }; |
|
||||||
let path = ObjectsService.c_apiRoot_Multipart + 'CompleteMultipartUpload/WebPlan/' + objectName; |
|
||||||
this.http.post(path, data, { params: paramsData }).subscribe(data => { |
|
||||||
let objData: any = new Object(); |
|
||||||
objData.fileName = file.name; |
|
||||||
objData.filePath = (ObjectsService.baseUrl + objectName).replace(file.name, ""); |
|
||||||
resolve(objData) |
|
||||||
}) |
|
||||||
} |
|
||||||
}//for循环
|
|
||||||
|
|
||||||
//分块 处理
|
|
||||||
}) |
|
||||||
}) |
|
||||||
} |
|
||||||
} |
|
||||||
|
Before Width: | Height: | Size: 1.2 MiB After Width: | Height: | Size: 963 KiB |
|
Before Width: | Height: | Size: 2.9 MiB After Width: | Height: | Size: 2.7 MiB |
Loading…
Reference in new issue