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

<div class="loading" *ngIf="isShowLoading"><nz-spin nzSimple [nzSize]="'large'"></nz-spin></div>
<div class="content" id="threeDimensional">

  <div class="header">
    <button *ngFor="let item of allFence; let key = index;" [ngClass]="{'selectFence': selectFence === key}" (click)="toggleHeaderFence(key)">{{item}}</button>
    <div class="rightFence">
      <img src="../../../assets/images/awningShow.png" [hidden]="!isOpenAwning" (click)="toggleHeaderAwning(false)">
      <img src="../../../assets/images/awningHide.png" [hidden]="isOpenAwning" (click)="toggleHeaderAwning(true)">
      <img src="../../../assets/images/rangeFinding.png" title="测量距离" (click)="toggleMeasure(1)" [ngClass]="{'selectRightTopFast': selectMeasure == 1}">
      <img src="../../../assets/images/heightFinding.png" title="测量高度" (click)="toggleMeasure(2)" [ngClass]="{'selectRightTopFast': selectMeasure == 2}">
      <img src="../../../assets/images/measuredArea.png" title="测量面积" (click)="toggleMeasure(3)" [ngClass]="{'selectRightTopFast': selectMeasure == 3}">
    </div>
  </div>

  <div class="center">
    <canvas id="center"></canvas>

    <!-- 左侧子组件 -->
    <div class="leftChildComponent" *ngIf="isShowChildComponent" [ngStyle]="{ 'left': isShowLeftBuilding? '15%' : null }">
      <div class="leftChildHeader">
        <div><i nz-icon nzType="star" nzTheme="outline"></i></div>
        <div><p>{{allFence[selectFence]}}</p></div>
        <div (click)="toggleHeaderFence(selectFence)" title="关闭"><i nz-icon nzType="close-circle" nzTheme="outline"></i></div>
      </div>
      <div class="leftChildCenter"><app-left-domain #leftDomain></app-left-domain></div>
    </div>
    <!-- 左侧子组件 -->

    <!-- 左侧建筑栏 -->
    <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: 65px; overflow: hidden;">
            <i nz-icon nzType="plus-circle" nzTheme="outline" title="聚焦" (click)="positionModelBuilding($event,item)"></i>
            <i nz-icon nzType="edit" nzTheme="outline" title="编辑" (click)="editModelBuilding($event,item)" style="margin: 0 5px;"></i>
            <i nz-icon nzType="delete" nzTheme="outline" title="删除" (click)="deleteModelBuilding($event,item)"></i>
          </label>
        </div>
      </div>
    </div>
    <!-- 左侧建筑栏 -->
  
    <!-- 底部图标栏 -->
    <div class="bottomIcons">
      <div class="autoScroll"><i nz-icon nzType="left" nzTheme="outline" (click)="bottomScroll(0)"></i></div>
      <div class="bottomCenter" id="bottomCenter">
        <div class="everyIcon" (click)='selectBottomIcon(item)' *ngFor="let item of allFacilityUIItemes" [ngClass]="{'selectLeftIcon': beforeOneIcon == item.getIconID()}">
          <img [src]="item.getIconURL()">
          <p>{{item.getIconName()}}</p>
        </div>
      </div>
      <div class="autoScroll"><i nz-icon nzType="right" nzTheme="outline" (click)="bottomScroll(1)"></i></div>
    </div>
    <!-- 底部图标栏 -->

    <!-- 右上角快捷栏 -->
    <div class="rightTopFast">
      <div class="publicFast leftFunction">
        <button title="获取设备" (click)="getDevice()">获</button>
        <button title="清空设备" (click)="clearDevice()">清</button>
      </div>
      <div class="publicFast leftFast">
        <button title="平移" (click)="translation()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 0}"></button>
        <button title="旋转" (click)="revolve()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 1}"></button>
        <button title="缩放" (click)="scale()" [ngClass]="{'selectRightTopFast': selectRightTopFast == 2}"></button>
        <button title="吸附" (click)="adsorb()" [ngClass]="{'leftFastIsTure': selectAdsorb }"></button>
        <button title="切换至顶视图" (click)="toggleTopLevelView()" [ngClass]="{'leftFastIsTure': topLevelView }"></button>
      </div>
      <div class="save">
        <button (click)="preserve(false)" title="保存模块"><i nz-icon nzType="file-done" nzTheme="outline"></i></button>
        <button (click)="preserve(true)" title="保存"><i nz-icon nzType="save" nzTheme="outline"></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>

</div>