Sinopec-Anxin/src/app/pages/left-domain/left-domain.component.html

<div class="childContent">

  <div class="childCenter">
    <!-- 基本信息 -->
    <div class="publicBox baseInfo" *ngIf="beforeFence === 0">
      <div class="interval">
        <p class="title">北京市第十九加油站<button class="titleBotton">自营</button></p>
        <p class="text"><img src="../../../assets/images/baseInfo/position.png" class="textIcon">北京市朝阳区朝外大街关东店33号</p>
        <p class="text"><img src="../../../assets/images/baseInfo/building.png" class="textIcon">山东省淄博市</p>
        <p class="text"><img src="../../../assets/images/baseInfo/date.png" class="textIcon">2020.7.26开业</p>
        <p class="text"><img src="../../../assets/images/baseInfo/road.png" class="textIcon">4车道</p>
      </div>
      <div class="interval">
        <p class="title">营业执照</p>
        <p class="textImage"><img src="../../../assets/images/upload.png"></p>
      </div>
    </div>
    <!-- 基本信息 -->
    <!-- 加油机 -->
    <div class="publicBox refueller" *ngIf="beforeFence === 1">
      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility(item)">
        <!-- 选中样式 -->
        <div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
        <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
        <!-- 选中样式 -->
        <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name"></p>
        <div class="table">
          <div class="tableHeader">
            <p>品牌</p>
            <p>油枪数量</p>
            <p>油品品号</p>
            <p>油泵类型</p>
          </div>
          <div class="tableContent">
            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().brand"></p>
            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNum"></p>
            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo"></p>
            <p style="padding-left: 8px;">
              <nz-select class="tableSelect" [nzBorderless]="true" [nzDisabled]="!editMode" [(ngModel)]="item.getPropertyData().oilPumpType">
                <nz-option nzValue="zxb" nzLabel="自吸泵"></nz-option>
                <nz-option nzValue="qyb" nzLabel="潜油泵"></nz-option>
              </nz-select>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 加油机 -->
    <!-- 油罐设备 -->
    <div class="publicBox refueller" *ngIf="beforeFence === 2">
      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility(item)">
        <!-- 选中样式 -->
        <div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
        <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
        <!-- 选中样式 -->
        <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name"></p>
        <div class="table">
          <div class="tableHeader">
            <p>油品品号</p>
            <p>油罐容积</p>
            <p>安全容积</p>
            <p>数量</p>
            <p>罐区</p>
            <p>油罐类型</p>
          </div>
          <div class="tableContent">
            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo"></p>
            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilTankVolume"></p>
            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().safeVolume"></p>
            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().quantity"></p>
            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().tankFarm"></p>
            <p style="padding-left: 8px;">
              <nz-select class="tableSelect" [nzBorderless]="true" [nzDisabled]="!editMode" [(ngModel)]="item.getPropertyData().oilTankType">
                <nz-option nzValue="scg" nzLabel="双层罐"></nz-option>
                <nz-option nzValue="dcg" nzLabel="单层罐"></nz-option>
                <nz-option nzValue="fsgc" nzLabel="防渗罐池"></nz-option>
              </nz-select>
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 油罐设备 -->
    <!-- 消防设施 -->
    <div class="publicBox fireFacilities" *ngIf="beforeFence === 3">
      <nz-tree [nzData]="treeData" [nzTreeTemplate]="nzTreeTemplate" (nzClick)="nzClick($event)"></nz-tree>
      <ng-template #nzTreeTemplate let-node let-origin="origin">
        <div class="treeRow"><p>{{node.title}}</p><p><i nz-icon nzType="eye" nzTheme="outline" *ngIf="node.isSelected"></i>{{getFacilityNum(node.key)}}</p></div>
      </ng-template>
    </div>
    <!-- 消防设施 -->
    <!-- 输油管线 -->
    <div class="publicBox refueller" *ngIf="beforeFence === 5">
      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility(item)">
        <!-- 选中样式 -->
        <div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
        <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
        <!-- 选中样式 -->
        <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name"></p>
        <div class="propertyImage">
          <p class="imgTitle" style="margin-top: 0px;">设计图纸</p>
          <img src="../../../assets/images/upload.png">
          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode"><input type="file"><i nz-icon nzType="plus" nzTheme="outline"></i></a>
        </div>
      </div>
    </div>
    <!-- 输油管线 -->
    <!-- 油气回收 -->
    <div class="publicBox refueller" *ngIf="beforeFence === 6">
      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility(item)">
        <!-- 选中样式 -->
        <div class="positionLeftTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionLeftBottom" *ngIf="selectFacilityId === item.getID()"></div>
        <div class="positionRightTop" *ngIf="selectFacilityId === item.getID()"></div><div class="positionRightBottom" *ngIf="selectFacilityId === item.getID()"></div>
        <!-- 选中样式 -->
        <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name"></p>
        <div class="table">
          <div class="tableHeader" style="flex: 55%;">
            <p>油气回收系统类型</p>
            <p>油气回收泵类型</p>
          </div>
          <div class="tableContent" style="flex: 45%;">
            <p style="padding-left: 8px;">
              <nz-select class="tableSelect" [nzBorderless]="true" [nzDisabled]="!editMode" [(ngModel)]="item.getPropertyData().VRUType">
                <nz-option nzValue="fss" nzLabel="分散式"></nz-option>
                <nz-option nzValue="jzs" nzLabel="集中式"></nz-option>
              </nz-select>
            </p>
            <p><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().VRUPumpType"></p>
          </div>
        </div>
        <div class="propertyImage">
          <p class="imgTitle">设计图纸</p>
          <img src="../../../assets/images/upload.png">
          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode"><input type="file"><i nz-icon nzType="plus" nzTheme="outline"></i></a>
        </div>
      </div>
    </div>
    <!-- 油气回收 -->
    <!-- 处置预案 -->
    <div class="publicBox disposalPlan" *ngIf="beforeFence === 7 && allMarkPlanData">
      <div class="interval" *ngFor="let item of allMarkPlanData.datas;let key = index;">
        <div class="publicDisposal disposalHeader">
          {{item.name}}
          <label *ngIf="editMode">
            <i nz-icon nzType="plus-circle" nzTheme="outline" (click)="addNodePop = item.id;"></i>
            <i nz-icon nzType="edit" nzTheme="outline" (click)="openEditDisposal(item)"></i>
            <i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal(item)"></i>
          </label>
        </div>
        <ul>
          <li class="publicDisposal disposalContent" *ngFor="let items of item.nodes;let keys = index;">
            <span (click)='selectNode(item,items)' [ngClass]="{'selectNode': selectNodeId == items.id && selectPlanId == item.id}">{{items.name}}</span>
            <label *ngIf="editMode"><i nz-icon nzType="save" nzTheme="outline" (click)="saveDisposal(item.id,items.id)"></i><i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal(item,items)"></i></label>
          </li>
        </ul>
      </div>
    </div>
    <!-- 处置预案 -->
    <!-- 弹窗 -->
    <nz-modal [(nzVisible)]="addDisposalPop || addNodePop" nzTitle="创建预案/节点" (nzOnCancel)="addDisposalPop = false; addNodePop = null;" (nzOnOk)="addDisposal(form.value)" [nzOkDisabled]='nodeName.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 #nodeName='ngModel' ngModel name="name" required/>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-modal>
    <nz-modal [(nzVisible)]="editSelectDisposal" nzTitle="编辑预案名称" (nzOnCancel)="editSelectDisposal = null;" (nzOnOk)="editDisposal(editForm.value)" [nzOkDisabled]='name.invalid'>
      <form nz-form #editForm='ngForm'>
        <nz-form-item>
          <nz-form-label [nzSpan]="6">预案名称</nz-form-label>
          <nz-form-control [nzSpan]="18" nzErrorTip="请输入必填项">
            <input nz-input #name='ngModel' [(ngModel)]="editDisposalName" name="name" required/>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-modal>
    <nz-modal [(nzVisible)]="saveDisposalDialog" nzTitle="处置节点保存" (nzOnCancel)="saveDisposalDialog = false;" [nzFooter]="null">
      <div class="submitBottom">
        <button (click)='saveNode(true)'>新建节点并保存</button><button (click)='saveNode(false)'>保存到已有节点</button>
      </div>
    </nz-modal>
    <nz-modal [(nzVisible)]="saveType" [nzTitle]="saveType === 1? '新建节点并保存' : '保存到已有节点'" (nzOnCancel)="saveType = null;" (nzOnOk)="saveDisposalNode(saveForm.value)">
      <form nz-form #saveForm='ngForm'>
        <nz-form-item *ngIf="saveType === 1">
          <nz-form-label [nzSpan]="6">节点名称<span style="color: red;">*</span></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 *ngIf="saveType === 1">
          <nz-form-label [nzSpan]="6"><span>根</span>节点</nz-form-label>
          <nz-form-control [nzSpan]="18" nzErrorTip="请选择节点">
            <nz-select #root='ngModel'ngModel name="root" required>
              <nz-option *ngFor="let item of allNodeList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="saveType === 2">
          <nz-form-label [nzSpan]="6">节点</nz-form-label>
          <nz-form-control [nzSpan]="18" nzErrorTip="请选择节点">
            <nz-select #node='ngModel'ngModel name="node" required>
              <nz-option *ngFor="let item of allNodeList" [nzValue]="item" [nzLabel]="item.name"></nz-option>
            </nz-select>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-modal>
    <!-- 弹窗 -->
  </div>

  <div class="childBottom" *ngIf="beforeFence === 0 && editMode">
    <button (click)="editInfo()"><i nz-icon nzType="edit" nzTheme="outline"></i>编辑信息</button>
    <button (click)="deriveExcel()"><i nz-icon nzType="file-excel" nzTheme="outline"></i>导出Excel</button>
  </div>

</div>