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 && selectFence != 4" [ngStyle]="{ 'left': isShowLeftBuilding && editMode && userMode? '15%' : null }" [ngClass]="{'publicMoveUp': selectFence === 7}">
      <div class="leftChildHeader">
        <div><i nz-icon nzType="star" nzTheme="outline"></i></div>
        <div>{{allFence[selectFence]}}<i nz-icon nzType="plus-circle" nzTheme="outline" *ngIf="selectFence === 7 && editMode" (click)="noticeChildComponent(true)"></i><i nz-icon nzType="save" nzTheme="outline" *ngIf="selectFence === 7 && editMode" (click)="noticeChildComponent(false)"></i></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 && editMode && userMode" (click)="toggleLeftBuilding(true)"><i nz-icon nzType="right" nzTheme="outline"></i></div>
    <div class="leftBuilding" *ngIf="editMode && userMode" [ngClass]="{'isShowLeftBuilding': isShowLeftBuilding === false, 'publicMoveUp': selectFence === 7}">
      <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="rightIcons" *ngIf="editMode && (selectFence === 0 || selectFence === 7)" [ngClass]="{'publicMoveUp': selectFence === 7}" [ngStyle]="{'width': selectFence === 0? '60px' : null}">
      <div class="bottomCenter" id="bottomCenter">
        <ng-container *ngIf="selectFence === 0">
          <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>
        </ng-container>
        <ng-container *ngIf="selectFence === 7">
          <nz-collapse [nzBordered]="false">
            <nz-collapse-panel [nzHeader]="allMarkData.iconsName[key]" [nzActive]="true" *ngFor="let element of allMarkData.icons; let key = index;">
              <div class="everyIcon" (click)='selectBottomIcon(item)' *ngFor="let item of element" [ngClass]="{'selectLeftIcon': beforeOneIcon == item.key}">
                <img [src]="item.iconURL">
                <p>{{item.name}}</p>
              </div>
            </nz-collapse-panel>
          </nz-collapse>
        </ng-container>
      </div>
    </div>
    <!-- 右侧图标栏 -->

    <!-- 右上角快捷栏 -->
    <div class="rightTopFast">
      <div class="publicFast leftFunction" *ngIf="editMode && userMode">
        <button title="获取设备" (click)="getDevice()">获</button>
        <button title="清空设备" (click)="clearDevice()">清</button>
      </div>
      <div class="publicFast leftFast" *ngIf="editMode && selectFence === 7">
        <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" *ngIf="editMode">
        <button (click)="preserve(false)" title="保存模块" *ngIf="userMode"><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>
    <!-- 右上角快捷栏 -->

    <!-- 底部处置预案 -->
    <div class="bottomPlan" *ngIf="selectFence === 7">
      <div class="pulicPlanDiv bottomPlanHeader">
        <div class="planHeaderText">
          <p>灾情描述</p>
          <textarea></textarea>
        </div>
        <div class="planHeaderImg"><a href="javascript:;" class="bottomPlanUpload"><input type="file"><img src="../../../assets/images/uploadImg.png"></a></div>
        <div class="planHeaderVideo"><a href="javascript:;" class="bottomPlanUpload" style="width: 100px;"><input type="file"><img src="../../../assets/images/uploadVideo.png"></a></div>
      </div>
      <div style="height: 5px;"></div>
      <div class="pulicPlanDiv bottomPlanCenter">
        <label><button>处置预案</button></label>
        <label>
          <nz-steps>
            <nz-step [nzIcon]="iconTemplate"></nz-step>
            <nz-step [nzIcon]="iconTemplate"></nz-step>
            <nz-step [nzIcon]="iconTemplate"></nz-step>
            <ng-template #iconTemplate><img src="../../../assets/images/stepIcon.png"></ng-template>
          </nz-steps>
        </label>
        <label>
          <i nz-icon nzType="backward" nzTheme="outline"></i>
          <i nz-icon nzType="pause" nzTheme="outline"></i>
          <i nz-icon nzType="border" nzTheme="outline"></i>
          <i nz-icon nzType="forward" nzTheme="outline"></i>
        </label>
      </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>