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

<div class="childContent">

  <div class="childCenter">
    <!-- 基本信息 -->
    <div class="publicBox baseInfo" *ngIf="beforeFence === 0 && baseInfo">
      <div class="interval">
        <p class="title">{{baseInfo.stationName || '暂无数据'}}<button class="titleBotton"><label *ngIf="baseInfo.stationType == 0">自营</label><label *ngIf="baseInfo.stationType == 1">加盟</label><label *ngIf="baseInfo.stationType != 0 && baseInfo.stationType != 1">其他</label></button></p>
        <p class="text"><img src="../../../assets/images/baseInfo/position.png" class="textIcon">{{baseInfo.address || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/building.png" class="textIcon">{{baseInfo.locationName || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/date.png" class="textIcon">{{baseInfo.openTime | date:"yyyy/MM/dd" || ''}}   开业</p>
        <p class="text"><img src="../../../assets/images/baseInfo/road.png" class="textIcon">{{baseInfo.laneCount || '0'}}   车道</p>
        <p class="text">所属公司:     {{baseInfo.companyName || '暂无数据'}}</p>
        <p class="text">联系人:     {{baseInfo.leaderName || '暂无数据'}}</p>
        <p class="text">联系电话:     {{baseInfo.leaderContact || '暂无数据'}}</p>
        <p class="text">油站等级:     {{baseInfo.stationLevel || '暂无数据'}}</p>
        <p class="text">经营品种:     {{baseInfo.sellVariety || '暂无数据'}}</p>
        <p class="text">油机数量:     {{baseInfo.gasStationCount || '暂无数据'}}</p>
        <p class="text">油罐容积:     {{baseInfo.tankVolume || '暂无数据'}}</p>
      </div>
      <div class="interval" *ngIf="baseInfo.govUnitDetail && baseInfo.govUnitDetail.policeStation">
        <p class="title">辖区派出所</p>
        <p class="text"><img src="../../../assets/images/baseInfo/police.png" class="textIcon">{{baseInfo.govUnitDetail.policeStation.name || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/position.png" class="textIcon">{{baseInfo.govUnitDetail.policeStation.address || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/phone.png" class="textIcon">{{baseInfo.govUnitDetail.policeStation.contactInformation || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/road.png" class="textIcon">{{baseInfo.govUnitDetail.policeStation.distance || '0公里'}}</p>
      </div>
      <div class="interval" *ngIf="baseInfo.govUnitDetail && baseInfo.govUnitDetail.hospital">
        <p class="title">辖区医院</p>
        <p class="text"><img src="../../../assets/images/baseInfo/hospital.png" class="textIcon">{{baseInfo.govUnitDetail.hospital.name || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/position.png" class="textIcon">{{baseInfo.govUnitDetail.hospital.address || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/phone.png" class="textIcon">{{baseInfo.govUnitDetail.hospital.contactInformation || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/road.png" class="textIcon">{{baseInfo.govUnitDetail.hospital.distance || '0公里'}}</p>
      </div>
      <div class="interval" *ngIf="baseInfo.govUnitDetail && baseInfo.govUnitDetail.fireBrigade">
        <p class="title">辖区消防队</p>
        <p class="text"><img src="../../../assets/images/baseInfo/police.png" class="textIcon">{{baseInfo.govUnitDetail.fireBrigade.name || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/position.png" class="textIcon">{{baseInfo.govUnitDetail.fireBrigade.address || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/phone.png" class="textIcon">{{baseInfo.govUnitDetail.fireBrigade.contactInformation || '暂无数据'}}</p>
        <p class="text"><img src="../../../assets/images/baseInfo/road.png" class="textIcon">{{baseInfo.govUnitDetail.fireBrigade.distance || '0公里'}}</p>
      </div>
      <div class="interval baseInfoImg" *ngIf="baseInfo.businessLicenseImage">
        <p class="title">营业执照</p>
        <p class="text" *ngIf="baseInfo.validityStartTime && baseInfo.validityEndTime">有效时间: {{baseInfo.validityStartTime | date:"yyyy/MM/dd"}}   -   {{baseInfo.validityEndTime | date:"yyyy/MM/dd"}}</p>
        <p class="text">提前预警时间天数: {{baseInfo.validityTermDays}}天</p>
        <p class="textImage"><img [src]="baseInfo.businessLicenseImage"></p>
      </div>
      <div class="interval baseInfoImg" *ngIf="baseInfo.dangerousChemicalLicenseImage">
        <p class="title">危险化学品经营许可证</p>
        <p class="text" *ngIf="baseInfo.dangerousStartTime && baseInfo.dangerousEndTime">有效时间: {{baseInfo.dangerousStartTime | date:"yyyy/MM/dd"}}   -   {{baseInfo.dangerousEndTime | date:"yyyy/MM/dd"}}</p>
        <p class="text">提前预警时间天数: {{baseInfo.dangerousTermDays}}天</p>
        <p class="textImage"><img [src]="baseInfo.dangerousChemicalLicenseImage"></p>
      </div>
      <div class="interval baseInfoImg" *ngIf="baseInfo.gasSellLicenseImage">
        <p class="title">成品油零售经营许可证</p>
        <p class="text" *ngIf="baseInfo.sellLicenseStartTime && baseInfo.sellLicenseEndTime">有效时间: {{baseInfo.sellLicenseStartTime | date:"yyyy/MM/dd"}}   -   {{baseInfo.sellLicenseEndTime | date:"yyyy/MM/dd"}}</p>
        <p class="text">提前预警时间天数: {{baseInfo.sellLicenseTermDays}}天</p>
        <p class="textImage"><img [src]="baseInfo.gasSellLicenseImage"></p>
      </div>
    </div>
    <!-- 基本信息 -->
    <!-- 加油机 -->
    <div class="publicBox refueller" *ngIf="beforeFence === 1">
      <div class="interval" *ngFor="let item of FacilityList | facilitySort" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
        <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name" (click)="stopBubbling($event)"></p>
        <div class="table">
          <div class="tableHeader">
            <p>品牌</p>
            <p>油枪数量</p>
            <p>油品品号</p>
            <p class="overflowP" id="title{{item.modelInfo.key}}">油枪编号</p>
          </div>
          <div class="tableContent"> 
            <p [title]="item.getPropertyData().brand"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().brand" (click)="stopBubbling($event)"></p>
            <p [title]="item.getPropertyData().oilGunNum"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNum" (click)="stopBubbling($event)"></p>
            <p [title]="item.getPropertyData().oilProductNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo" (click)="stopBubbling($event)"></p>
            <p [title]="item.getPropertyData().oilGunNo" class="overflowP" id="content{{item.modelInfo.key}}"><textarea nz-input nzAutosize id="num{{item.modelInfo.key}}" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)" (input)="textInput(item)"></textarea></p>
          </div>
        </div>
      </div>
    </div>
    <!-- 加油机 -->
    <!-- 油罐设备 -->
    <div class="publicBox refueller" *ngIf="beforeFence === 2">
      <div class="interval" *ngFor="let item of FacilityList | facilitySort" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
        <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name" (click)="stopBubbling($event)"></p>
        <div class="table">
          <div class="tableHeader">
            <p>油品品号</p>
            <p class="overflowP" id="title{{item.modelInfo.key}}">油枪编号</p>
            <p>油罐容积</p>
            <p>安全容积</p>
            <p>罐区</p>
            <p>油罐类型</p>
            <p>油泵类型</p>
          </div>
          <div class="tableContent">
            <p [title]="item.getPropertyData().oilProductNo"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilProductNo" (click)="stopBubbling($event)"></p>
            <p [title]="item.getPropertyData().oilGunNo" class="overflowP" id="content{{item.modelInfo.key}}"><textarea nz-input nzAutosize id="num{{item.modelInfo.key}}" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilGunNo" (click)="stopBubbling($event)" (input)="textInput(item)"></textarea></p>
            <p [title]="item.getPropertyData().oilTankVolume"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().oilTankVolume" (click)="stopBubbling($event)"></p>
            <p [title]="item.getPropertyData().safeVolume"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().safeVolume" (click)="stopBubbling($event)"></p>
            <p [title]="item.getPropertyData().tankFarm"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().tankFarm" (click)="stopBubbling($event)"></p>
            <p style="padding-left: 8px;" (click)="stopBubbling($event)">
              <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-select>
            </p>
            <p style="padding-left: 8px;" (click)="stopBubbling($event)">
              <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 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($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
        <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name" (click)="stopBubbling($event)"></p>
        <div class="table">
          <div class="tableHeader" style="flex: 50%;">
            <p>连接的加油机</p>
            <p>连接的油罐</p>
          </div>
          <div class="tableContent" style="flex: 50%;">
            <p [title]="item.getPropertyData().linkJYJ"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().linkJYJ" (click)="stopBubbling($event)"></p>
            <p [title]="item.getPropertyData().linkYG"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().linkYG" (click)="stopBubbling($event)"></p>
          </div>
        </div>
        <div class="propertyImage" id="pipelineViewer{{item.getID()}}">
          <p class="imgTitle">设计图纸</p>
          <img [hidden]="!item.getPropertyData().img" [src]="item.getPropertyData().img" [attr.data-original]="item.getPropertyData().img">
          <div class="positionHandleImgVideo" style="width: 120px;" *ngIf="editMode && item.getPropertyData().img" (click)="stopBubbling($event)">
            <a href="javascript:;" class="imgAndVideoUpload"><input type="file" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><i nz-icon nzType="upload" nzTheme="outline"></i></a>
            <i nz-icon nzType="delete" nzTheme="outline" (click)="deleteImg(item)"></i>
          </div>
          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode && !item.getPropertyData().img" (click)="stopBubbling($event)"><input type="file" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><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($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
        <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name" (click)="stopBubbling($event)"></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;" (click)="stopBubbling($event)">
              <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 [title]="item.getPropertyData().VRUPumpType"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().VRUPumpType" (click)="stopBubbling($event)"></p>
          </div>
        </div>
        <div class="propertyImage" id="orvrViewer{{item.getID()}}">
          <p class="imgTitle">设计图纸</p>
          <img [hidden]="!item.getPropertyData().img" [src]="item.getPropertyData().img" [attr.data-original]="item.getPropertyData().img">
          <div class="positionHandleImgVideo" style="width: 120px;" *ngIf="editMode && item.getPropertyData().img" (click)="stopBubbling($event)">
            <a href="javascript:;" class="imgAndVideoUpload"><input type="file" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><i nz-icon nzType="upload" nzTheme="outline"></i></a>
            <i nz-icon nzType="delete" nzTheme="outline" (click)="deleteImg(item)"></i>
          </div>
          <a href="javascript:;" class="bottomPlanUpload uploadImgBox" *ngIf="editMode && !item.getPropertyData().img" (click)="stopBubbling($event)"><input type="file" accept="image/*" (change)='uploadLeftDomainImg($event, item)'><i nz-icon nzType="plus" nzTheme="outline"></i></a>
        </div>
      </div>
    </div>
    <!-- 油气回收 -->
    <!-- 处置预案 -->
    <div class="publicBox disposalPlan" *ngIf="beforeFence === 7 && allMarkPlanData" id="disposalPlan">
      <nz-collapse>
        <nz-collapse-panel *ngFor="let item of allMarkPlanData.datas;let key = index;" [nzHeader]="extraTpl" nzActive="true" nzShowArrow="false">
          <ng-template #extraTpl>
            <div class="publicDisposal disposalHeader">
              <span>{{item.name}}</span>
              <label *ngIf="editMode">
                <i nz-icon nzType="plus-circle" nzTheme="outline" (click)="openAddDisposal($event,item.id)"></i>
                <i nz-icon nzType="edit" nzTheme="outline" (click)="openEditDisposal($event,item)"></i>
                <i nz-icon nzType="delete" nzTheme="outline" (click)="deleteDisposal($event,item)"></i>
              </label>
            </div>
          </ng-template>
          <ul>
            <li class="publicDisposal disposalContent" *ngFor="let items of item.nodes;let keys = index;">
              <span nz-popconfirm nzPopconfirmTitle="切换节点后,没保存的信息将会丢失!" [nzCondition]="!editMode" (nzOnConfirm)="selectNode(item,items,keys)" [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($event,item,items)"></i></label>
            </li>
          </ul>
        </nz-collapse-panel>
      </nz-collapse>
    </div>
    <!-- 处置预案 -->
    <!-- 阀门 -->
    <div class="publicBox refueller" *ngIf="beforeFence === 8">
      <div class="interval" *ngFor="let item of FacilityList" (click)="selectFacility($event, item)" [ngClass]="{'selectFacility': selectFacilityId === item.getID()}">
        <p class="title"><input type="text" class="tableInput" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().name" (click)="stopBubbling($event)"></p>
        <div class="table">
          <div class="tableHeader">
            <p class="overflowP" id="title{{item.modelInfo.key}}">描述</p>
          </div>
          <div class="tableContent"> 
            <p [title]="item.getPropertyData().describe" class="overflowP" id="content{{item.modelInfo.key}}"><textarea nz-input nzAutosize id="num{{item.modelInfo.key}}" [disabled]="!editMode" [(ngModel)]="item.getPropertyData().describe" (click)="stopBubbling($event)" (input)="textInput(item)"></textarea></p>
          </div>
        </div>
      </div>
    </div>
    <!-- 阀门 -->
    <!-- 弹窗 -->
    <nz-modal nzClassName="baseInfoDialog" [(nzVisible)]="isShowBaseDialog" nzFooter="null" (nzOnCancel)="closeBaseInfoDialog()" nzWidth="70%">
      <app-oil-station-info *ngIf="isShowBaseDialog"></app-oil-station-info>
    </nz-modal>
    <nz-modal [(nzVisible)]="addDisposalPop || addNodePop" nzTitle="创建预案/节点" (nzOnCancel)="addDisposalPop = false; addNodePop = null;" (nzOnOk)="addDisposal(form.value)">
      <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"/>
          </nz-form-control>
        </nz-form-item>
        <nz-form-item *ngIf="addDisposalPop">
          <nz-form-label [nzSpan]="6">选取模板</nz-form-label>
          <nz-form-control>
            <nz-select [(ngModel)]="selectMould" name="selectMould">
              <nz-option nzValue="" nzLabel="无"></nz-option>
              <nz-option [nzValue]="item.id" [nzLabel]="item.name" *ngFor="let item of allSandBoxTemplate"></nz-option>
            </nz-select>
            <button nz-button style="margin-top: 5px;" (click)="deleteMould(form.value)" *ngIf="userMode">删除模板</button>
          </nz-form-control>
        </nz-form-item>
      </form>
    </nz-modal>
    <nz-modal [(nzVisible)]="editSelectDisposal" nzTitle="编辑预案名称" [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>
      <div *nzModalFooter>
        <button nz-button nzType="primary" (click)="saveMould()" *ngIf="userMode">保存为模板</button>
        <button nz-button nzType="default" (click)="editSelectDisposal = null;">取消</button>
        <button nz-button nzType="primary" (click)="editDisposal(editForm.value)">确定</button>
      </div>
    </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>