Sinopec-Anxin/src/app/pages/plan/plan.component.html

<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)="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.value)" [nzOkDisabled]='name.invalid||modelType.invalid||upload.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/>
        </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-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 #upload='ngModel' ngModel name="upload" required>上传文件<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>
  </nz-modal>
  <!-- 新增/编辑左侧建筑弹窗 -->

</div>