Sinopec-Anxin/src/app/pages/today-warning-admin/today-warning-admin.component.html

<div class="warningbox" id="warningboxadmin">
  <div class="title">
    <app-title [name]="'当日预警事件列表'"></app-title>
    <div class="warningnumber">
      <img src="../../../assets/images/warningnum.png" alt="">
      <span class="today">今日预警</span>
      <span class="num">{{totalCount}}</span>
    </div>
  </div>
  <div class="search">
    <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-select id="level" nzAllowClear formControlName="level" nzPlaceHolder="请选择级别">
            <nz-option nzValue="1" nzLabel="Ⅰ级"></nz-option>
            <nz-option nzValue="2" nzLabel="Ⅱ级"></nz-option>
            <nz-option nzValue="3" nzLabel="Ⅲ级"></nz-option>
            <nz-option nzValue="4" nzLabel="Ⅳ级"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="searchParams searchParamsLong">
        <nz-form-control>
          <nz-tree-select [nzAllowClear]="false" [nzDropdownClassName]="'maxHeightTreeSelect'" nzShowSearch
            [(ngModel)]="defaultOrId" formControlName="organization" [nzNodes]="nodes" nzPlaceHolder="请选择所属机构"
            [nzExpandedIcon]="multiExpandedIconTpl">
          </nz-tree-select>
          <ng-template #multiExpandedIconTpl let-node let-origin="origin">
            <ng-container *ngIf="node.children.length == 0; else elseTemplate">

            </ng-container>
            <ng-template #elseTemplate>
              <i nz-icon [nzType]="node.isExpanded ? 'caret-down' : 'caret-right'"
                class="ant-tree-switcher-line-icon"></i>
            </ng-template>
          </ng-template>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-select nzAllowClear formControlName="type" (ngModelChange)="typeChange($event)" nzPlaceHolder="请选择预警类型">
            <nz-option *ngFor="let item of warningTypes" [nzValue]="item.key" [nzLabel]="item.key"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-select nzAllowClear formControlName="event" nzPlaceHolder="请选择预警事件">
            <nz-option *ngFor="let item of warningTypesDetails" [nzValue]="item.id" [nzLabel]="item.eventSystemName">
            </nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-select nzAllowClear id="area" formControlName="area" nzPlaceHolder="请选择区域">
            <nz-option nzValue="出入口" nzLabel="出入口"></nz-option>
            <nz-option nzValue="加油区" nzLabel="加油区"></nz-option>
            <nz-option nzValue="油罐区" nzLabel="油罐区"></nz-option>
            <nz-option nzValue="便利店" nzLabel="便利店"></nz-option>
            <nz-option nzValue="办公区" nzLabel="办公区"></nz-option>
            <nz-option nzValue="其他区域" nzLabel="其他区域"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>


      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-select nzAllowClear formControlName="disposalState" nzPlaceHolder="请选择处置状态">
            <nz-option nzValue="0" nzLabel="已处置"></nz-option>
            <nz-option nzValue="1" nzLabel="未处置"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-time-picker [nzAllowEmpty]="false" nzPlaceHolder="请选择开始时间" formControlName="datePickerStart"
            nzFormat="HH:mm"></nz-time-picker>
        </nz-form-control>
      </nz-form-item>
      <i style="display: flex;align-items: center;color: #fff;" nz-icon nzType="swap-right" nzTheme="outline"></i>
      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-time-picker [nzAllowEmpty]="false" nzPlaceHolder="请选择结束时间" formControlName="datePickerEnd"
            nzFormat="HH:mm"></nz-time-picker>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="btn">
        <nz-form-control>
          <button nz-button type="submit" class="submit"><i nz-icon [nzType]="'search'"></i>查询</button>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="btn">
        <nz-form-control>
          <button nz-button type="button" class="reset" (click)="resetForm($event)"><i nz-icon
              [nzType]="'sync'"></i>重置</button>
        </nz-form-control>
      </nz-form-item>
    </form>
  </div>
  <div class="listbox" style="text-align: center;">

    <div nz-row class="listitem listitemhead">
      <div nz-col nzSpan="2" style="box-sizing: border-box;padding-left: 30px;">
        预警级别
      </div>
      <div nz-col nzSpan="2">
        预警类型
      </div>
      <div nz-col nzSpan="2">
        预警事件
      </div>
      <div nz-col nzSpan="2">
        所属公司
      </div>
      <div nz-col nzSpan="3">
        管理区域
      </div>
      <div nz-col nzSpan="2">
        加油站
      </div>
      <div nz-col nzSpan="2">
        预警区域
      </div>
      <div nz-col nzSpan="2">
        摄像头名称
      </div>
      <div nz-col nzSpan="3">
        预警时间
      </div>
      <div nz-col nzSpan="2">
        状态
      </div>
      <div nz-col nzSpan="2">
        操作
      </div>
    </div>

    <div nz-row class="listitem" *ngFor="let item of list">
      <div nz-col nzSpan="2" class="imgbox">
        <span *ngIf="item.violation.violationType == '卸油作业检查'">
          <img src="../../../assets/images/warning2.png">
        </span>
        <span
          *ngIf="item.violation.violationType != '卸油作业检查' && item.violation.violationType != '证件临期' && item.violation.violationType != '器材临期' ">
          <img src=" ../../../assets/images/warning1.png">
        </span>
        <span *ngIf="item.violation.violationType === '证件临期'">
          <img src="../../../assets/images/warning3.png">
        </span>
        <span *ngIf="item.violation.violationType === '器材临期'">
          <img src="../../../assets/images/warning3.png">
        </span>
        <span *ngIf="item.violation.level == 1">
          Ⅰ级
        </span>
        <span *ngIf="item.violation.level == 2">
          Ⅱ级
        </span>
        <span *ngIf="item.violation.level == 3">
          Ⅲ级
        </span>
        <span *ngIf="item.violation.level == 4">
          Ⅳ级
        </span>
      </div>
      <div nz-col nzSpan="2" [title]="item.violation.violationType">
        {{item.violation.violationType}}
      </div>
      <div nz-col nzSpan="2" [title]="item.violation.eventSystemName">
        {{item.violation.eventSystemName}}
      </div>
      <div nz-col nzSpan="2" [title]="item.gasStation.companyName">
        {{item.gasStation.companyName}}
      </div>
      <div nz-col nzSpan="3" [title]="item.gasStation.locationName">
        {{item.gasStation.locationName}}
      </div>
      <div nz-col nzSpan="2" [title]="item.gasStation.stationName">
        {{item.gasStation.stationName}}
      </div>
      <div nz-col nzSpan="2" [title]="item.violateArea">
        {{item.violateArea}}
      </div>
      <div nz-col nzSpan="2" [title]="item.cameraNo">
        {{item.cameraNo}}
      </div>
      <div nz-col nzSpan="3">
        {{item.violateTime | date:"yyyy-MM-dd HH:mm:ss"}}
      </div>
      <div nz-col nzSpan="2">
        <ng-container *ngIf="!item.handleTime; else elseTemplate">
          未处置
        </ng-container>
        <ng-template #elseTemplate>
          <span style="color: #23D9FF;">已处置</span>
        </ng-template>
      </div>
      <div nz-col nzSpan="2" style="min-width: 64px;">
        <button nz-button (click)="look(item)">查看</button>
      </div>
    </div>
    <nz-spin nzSimple *ngIf="isSpin"></nz-spin>
  </div>

</div>