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)">
      <label nz-dropdown [nzDropdownMenu]="menu" [nzDisabled]="item != '基本信息'">{{item}}<i nz-icon nzType="caret-up" nzTheme="outline" *ngIf="key === 0"></i></label>
    </button>
    <nz-dropdown-menu #menu="nzDropdownMenu">
      <ul nz-menu class="dropDown">
        <li nz-menu-item><label nz-checkbox>毗邻</label></li>
        <li nz-menu-item><label nz-checkbox>区域</label></li>
        <li nz-menu-item><label nz-checkbox>图片</label></li>
        <li nz-menu-item><label nz-checkbox>点位</label></li>
      </ul>
    </nz-dropdown-menu>
    <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="nature" *ngIf="isShowNature && selectFence === 0 && beforeOnePropertyData && beforeOnePropertyData.getPropertyData()" [ngStyle]="{'right': editMode? '5%' : null}">
      <div class="natureHeader"><i nz-icon nzType="close-circle" nzTheme="outline" title="关闭" (click)="isShowNature = false;"></i></div>
      <div class="natureContent" *ngIf="beforeOnePropertyData.getPropertyData().info != undefined">
        <div class="natureTitle">详情</div>
        <div><textarea [(ngModel)]="beforeOnePropertyData.getPropertyData().info"></textarea></div>
      </div>
      <div class="natureContent" *ngIf="beforeOnePropertyData.getPropertyData().img != undefined">
        <div class="natureTitle">图片</div>
        <div class="natureImg" *ngIf="beforeOnePropertyData.getPropertyData().img"><img [src]="beforeOnePropertyData.getPropertyData().img"></div>
        <div><a href="javascript:;" class="bottomPlanUpload natureUpload"><input type="file"><i nz-icon nzType="plus" nzTheme="outline"></i></a></div>
      </div>
    </div>
    <div class="nature natureLook" *ngIf="isShowNature && (selectFence === 1 || selectFence === 2) && beforeOnePropertyData" [ngStyle]="{'top': naturePosition.top,'right': naturePosition.right}">
      <div *ngIf="selectFence === 1">
        <div class="natureTitle">{{beforeOnePropertyData.getPropertyData().name}}</div>
        <div class="flowPower">
          <div>
            <img src="../../../assets/images/flow.png">
            <label><p>流量</p><p><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().flow" [disabled]="!editMode"></p></label>
          </div>
          <div>
            <img src="../../../assets/images/power.png">
            <label><p>功率</p><p><input type="text" [(ngModel)]="beforeOnePropertyData.getPropertyData().power" [disabled]="!editMode"></p></label>
          </div>
        </div>
        <div class="everyNature"><span>品牌 :</span><label>{{beforeOnePropertyData.getPropertyData().brand}}</label></div>
        <div class="everyNature"><span>油枪数量 :</span><label>{{beforeOnePropertyData.getPropertyData().oilGunNum}}</label></div>
        <div class="everyNature"><span>油品品号 :</span><label>{{beforeOnePropertyData.getPropertyData().oilProductNo}}</label></div>
      </div>
      <div *ngIf="selectFence === 2">
        <div class="natureTitle">{{beforeOnePropertyData.getPropertyData().name}}</div>
        <div class="everyNature"><span>油品品号 :</span><label>{{beforeOnePropertyData.getPropertyData().oilProductNo}}</label></div>
        <div class="everyNature"><span>油罐容积 :</span><label>{{beforeOnePropertyData.getPropertyData().oilTankVolume}}</label></div>
        <div class="everyNature"><span>安全容积 :</span><label>{{beforeOnePropertyData.getPropertyData().safeVolume}}</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><input type="text" [(ngModel)]="beforePlanNode.name" [disabled]="!editMode"></p>
          <textarea [(ngModel)]="beforePlanNode.describe" [disabled]="!editMode"></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 nz-dropdown [nzDropdownMenu]="plan" nzTrigger="click">{{beforeEmergencyPlan.name}}</button></label>
        <nz-dropdown-menu #plan="nzDropdownMenu">
          <ul nz-menu class="dropDown dropDownPlan" *ngIf="allMarkPlanData">
            <li nz-menu-item *ngFor="let item of allMarkPlanData.datas;let key = index;" (click)="selectChildNode(item)" [ngStyle]="{'color': beforeEmergencyPlan.id === item.id? '#23D9FF' : null}">{{item.name}}</li>
          </ul>
        </nz-dropdown-menu>
        <label>
          <nz-steps *ngIf="beforeEmergencyPlan.nodes && beforeEmergencyPlan.nodes.length" [nzCurrent]="nzCurrent" [nzProgressDot]="progressTemplate" (nzIndexChange)="changePlanNode($event)">
            <nz-step *ngFor="let item of beforeEmergencyPlan.nodes;" title="{{item.name}}"></nz-step>
            <nz-step></nz-step>
          </nz-steps>
          <ng-template #progressTemplate let-index="index">
            <img src="../../../assets/images/stepIcon.png" style="margin-left: -100%;" *ngIf="index != beforeEmergencyPlan.nodes.length">
            <i nz-icon nzType="play-circle" nzTheme="outline" *ngIf="index === nzCurrent && index != beforeEmergencyPlan.nodes.length"></i>
          </ng-template>
        </label>
        <label>
          <i nz-icon nzType="backward" nzTheme="outline" (click)="toLast()"></i>
          <i nz-icon nzType="pause" nzTheme="outline" (click)="suspend()"></i>
          <i nz-icon nzType="border" nzTheme="outline" (click)="initialize()"></i>
          <i nz-icon nzType="forward" nzTheme="outline" (click)="toNext()"></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>