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)="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: 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>
      </div>
    </div>
  </div>
  <!-- 左侧建筑 -->

  <!-- 右上角快捷栏 -->
  <div class="rightTopFast">
    <div style="margin: 0 10px; background-color: #0080FF;" title="保存"><button (click)="preserve()"><i nz-icon nzType="save" nzTheme="outline" style="font-size: 20px;"></i></button></div>
  </div>
  <!-- 右上角快捷栏 -->

  <!-- 新增/编辑左侧建筑弹窗 -->
  <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>
  </nz-modal>
  <!-- 新增/编辑左侧建筑弹窗 -->

</div>