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

<div class="warningbox">
  <div class="title">
    <app-title [name]="'当日违规事件列表'"></app-title>
  </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" 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-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-select id="type" formControlName="type" nzPlaceHolder="请选择预警类型">
            <nz-option nzValue="1" nzLabel="一级"></nz-option>
            <nz-option nzValue="2" nzLabel="二级"></nz-option>
            <nz-option nzValue="3" nzLabel="三级"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>

      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-select id="company" formControlName="company" nzPlaceHolder="请选择所属公司">
            <nz-option nzValue="1" nzLabel="一级"></nz-option>
            <nz-option nzValue="2" nzLabel="二级"></nz-option>
            <nz-option nzValue="3" nzLabel="三级"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-select id="area" formControlName="area" nzPlaceHolder="请选择区域">
            <nz-option nzValue="1" nzLabel="一级"></nz-option>
            <nz-option nzValue="2" nzLabel="二级"></nz-option>
            <nz-option nzValue="3" nzLabel="三级"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item class="searchParams">
        <nz-form-control>
          <nz-select id="site" formControlName="site" nzPlaceHolder="请选择站点">
            <nz-option nzValue="1" nzLabel="一级"></nz-option>
            <nz-option nzValue="2" nzLabel="二级"></nz-option>
            <nz-option nzValue="3" nzLabel="三级"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
      <nz-form-item class="searchParams">
        <nz-form-control [nzSm]="16" [nzXs]="24">
          <nz-date-picker id="datePicker" formControlName="datePicker" nzPlaceHolder="请选择时间"></nz-date-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="warningnumber">
      <span class="num">39</span>
      <span class="today">今日违规</span>
    </div> -->
  <div class="listbox">
    <div nz-row class="listitem listitemhead">
      <div nz-col nzSpan="2" style="box-sizing: border-box;padding-left: 10px;">
        预警级别
      </div>
      <div nz-col nzSpan="2">
        预警类型
      </div>
      <div nz-col nzSpan="4">
        违规信息
      </div>
      <div nz-col nzSpan="3">
        所属公司
      </div>
      <div nz-col nzSpan="2">
        区域
      </div>
      <div nz-col nzSpan="3">
        站点
      </div>
      <div nz-col nzSpan="3">
        摄像头
      </div>
      <div nz-col nzSpan="3">
        违规时间
      </div>
      <div nz-col nzSpan="2">
        操作
      </div>
    </div>
    <div nz-row class="listitem" *ngFor="let item of list">
      <div nz-col nzSpan="2">
        <span *ngIf="item.level === 1" style="color: #FF4B65;">
          <img src="../../../assets/images/level1.png">
          Ⅰ级
        </span>
        <span *ngIf="item.level === 2" style="color: #FFBD4B;">
          <img src="../../../assets/images/level2.png">
          Ⅱ级
        </span>
        <span *ngIf="item.level === 3" style="color: #23D9FF;">
          <img src="../../../assets/images/level3.png">
          Ⅲ级
        </span>
      </div>
      <div nz-col nzSpan="2">
        加油站违规
      </div>
      <div nz-col nzSpan="4">
        工作人员倚靠加油机或立柱
      </div>
      <div nz-col nzSpan="3">
        中化北京分公司
      </div>
      <div nz-col nzSpan="2">
        北京-朝阳
      </div>
      <div nz-col nzSpan="3">
        北京市第十九加油站
        <span class="propsm propsm1" *ngIf="item.prop == 1">自营</span>
        <span class="propsm propsm2" *ngIf="item.prop == 2">加盟</span>
      </div>
      <div nz-col nzSpan="3">
        加油区2号摄像头
      </div>
      <div nz-col nzSpan="3">
        2021-10-12 09:28:13
      </div>
      <div nz-col nzSpan="2">
        <button nz-button (click)="look()">查看</button>
        <img style="margin-left: 24px;cursor: pointer;" src="../../../assets/images/excel.png" alt="">
      </div>
    </div>
  </div>
</div>