[修改]三维修改建筑弹出框

src/app/pages/left-domain/left-domain.component.html

@@ -309,7 +309,9 @@
     <!-- 弹窗 -->
     <nz-modal nzClassName="baseInfoDialog" [(nzVisible)]="isShowBaseDialog" nzFooter="null"
       (nzOnCancel)="closeBaseInfoDialog()" nzWidth="70%">
-      <app-oil-station-info *ngIf="isShowBaseDialog"></app-oil-station-info>
+      <ng-container *nzModalContent>
+        <app-oil-station-info *ngIf="isShowBaseDialog"></app-oil-station-info>
+      </ng-container>
     </nz-modal>
     <nz-modal [(nzVisible)]="addDisposalPop || addNodePop" nzTitle="创建预案/节点"
       (nzOnCancel)="addDisposalPop = false; addNodePop = null;" (nzOnOk)="addDisposal(form.value)">

src/app/pages/left-domain/left-domain.component.ts

@@ -17,6 +17,7 @@ import { ObjectsService } from 'src/app/service/objects.service';
 import Viewer from 'viewerjs';
 import { HttpClient } from '@angular/common/http';
 import { MarkTemplate } from 'src/app/babylon/model/data/mark/mark-template-data';
+import { FormGroup } from '@angular/forms';
 
 @Component({
   selector: 'app-left-domain',
@@ -26,8 +27,13 @@ import { MarkTemplate } from 'src/app/babylon/model/data/mark/mark-template-data
 export class LeftDomainComponent implements OnInit {
 
   constructor(private message: NzMessageService, private element: ElementRef, private http: HttpClient, private cd: ChangeDetectorRef) { }
-
+  validateForm!: FormGroup;
   ngOnInit(): void {
+    // this.validateForm = this.fb.group({
+    //   name: [null, [Validators.required]],
+    //   modelType: [null, [Validators.required]]
+    // });
+
     this.editMode = PlanComponent.instance.editMode
     this.initComponent()
   }
@@ -326,6 +332,10 @@ export class LeftDomainComponent implements OnInit {
 
   //创建预案/节点
   addDisposal(e) {
+
+
+
+
     if (this.addDisposalPop) { //创建预案
       if (e.selectMould) {
         MarkWindow.instance.addMarkPlanByTemplate(e.selectMould)

src/app/pages/plan-admin/oil-station-list/oil-station-list.component.html

@@ -74,6 +74,5 @@
                 </tr>
             </tbody>
         </nz-table>
-
     </div>
 </div>

src/app/pages/plan-admin/oil-station-list/oil-station-list.component.scss

@@ -4,8 +4,6 @@
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  box-sizing: border-box;
-  padding-bottom: 12px;
 }
 
 .search {

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

@@ -85,12 +85,12 @@
 
 .stationList {
   flex: 1;
-
-
+  display: flex;
+  flex-direction: column;
 
   .tabbox {
+    flex: 1;
     width: 100%;
-    height: 100%;
     display: flex;
     flex-direction: column;
   }

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

@@ -294,36 +294,39 @@
 
     <!-- 新增/编辑左侧建筑弹窗 -->
     <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)]="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)]="modelBuilding.modelType" name="modelType" required>
-              <nz-option nzValue="normal" nzLabel="建筑物"></nz-option>
-              <nz-option nzValue="environment" nzLabel="场景"></nz-option>
-            </nz-select>
-          </nz-form-control>
-        </nz-form-item>
-        <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"></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>
-      </form>
+      (nzOnCancel)="addBuildingPop = false; editBuildingPop = null;" (nzOnOk)="addModelBuilding()">
+      <ng-container *nzModalContent>
+        <form nz-form #form='ngForm' [formGroup]="validateForm">
+          <nz-form-item>
+            <nz-form-label [nzSpan]="6">名称</nz-form-label>
+            <nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
+              <input nz-input formControlName="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 formControlName="modelType" name="modelType" required>
+                <nz-option nzValue="normal" nzLabel="建筑物"></nz-option>
+                <nz-option nzValue="environment" nzLabel="场景"></nz-option>
+              </nz-select>
+            </nz-form-control>
+          </nz-form-item>
+          <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"></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>
+        </form>
+      </ng-container>
     </nz-modal>
+
+
     <!-- 新增/编辑左侧建筑弹窗 -->
     <!-- 应急预案设备任务弹窗 -->
     <nz-modal nzClassName="taskDialog" [(nzVisible)]="contingencyPlanTask" nzTitle="设备任务栏"

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

@@ -33,6 +33,7 @@ import { HttpClient } from '@angular/common/http';
 import { DataBuffer } from '@babylonjs/core';
 import { Photo360Tool } from 'src/app/babylon/tool/photo360-tool';
 import { SpeakingTool } from 'src/app/babylon/tool/speaking-tool';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 
 
 
@@ -42,11 +43,7 @@ import { SpeakingTool } from 'src/app/babylon/tool/speaking-tool';
   styleUrls: ['./plan.component.scss', './publicPop.scss']
 })
 export class PlanComponent implements OnInit {
-
-
-  constructor(private element: ElementRef, private buildingBISrv: BuildingBasicInfosService, private objectsSrv: ObjectsService, private eventManager: EventManager, private message: NzMessageService, private http: HttpClient) { }
-
-
+  constructor(private element: ElementRef, private buildingBISrv: BuildingBasicInfosService, private objectsSrv: ObjectsService, private eventManager: EventManager, private message: NzMessageService, private http: HttpClient, private fb: FormBuilder) { }
   static instance: PlanComponent;
   public game: Game;
   public beforeOneSatus; //当前 satus
@@ -60,7 +57,14 @@ export class PlanComponent implements OnInit {
   private readonly c_frameSpace = 16;//更新的帧间隔， 16大概是60帧每秒
   private lasteUpdateTime = 0;//上次更新的时间（毫秒）
 
+  validateForm!: FormGroup;
   ngOnInit(): void {
+    this.validateForm = this.fb.group({
+      name: [null, [Validators.required]],
+      modelType: [null, [Validators.required]]
+    });
+
+
     PlanComponent.instance = this;
     ServeManager.Init(this.buildingBISrv, this.objectsSrv);
     this.canvas = this.element.nativeElement.querySelector('#center') as HTMLCanvasElement;
@@ -338,7 +342,12 @@ export class PlanComponent implements OnInit {
   }
 
   //创建/编辑建筑
-  addModelBuilding(e: modelBuilding) {
+  addModelBuilding() {
+    if(!this.validateForm.valid){
+      this.message.create('warning', '请填写完整！');
+      return
+    }
+    let e: modelBuilding = this.validateForm.value
     if (this.addBuildingPop) { //新增
       let order = this.buildingUIItems.length + 1;
       this.beforeOneSatus = StatusManager.getStatus<BuildingStatus>(BuildingStatus);
@@ -359,6 +368,7 @@ export class PlanComponent implements OnInit {
   //打开编辑建筑 弹窗
   editModelBuilding(event, e: BuildingUIItem) {
     event.stopPropagation()
+    console.log('打开弹窗', e)
     this.modelBuilding.name = JSON.parse(JSON.stringify(e.getBuildingName()))
     this.modelBuilding.modelType = JSON.parse(JSON.stringify(e.getBuildingType()))
     this.editBuildingPop = e; //打开弹窗