Sinopec-Anxin/src/app/pages/criminal-records-admin/criminal-records-admin.component.html

<div class="recordsboxadmin" id="recordsboxadmin">
  <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="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>
          <nz-range-picker formControlName="datePicker"></nz-range-picker>
          <br />
        </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="content">
    <div class="title">
      <app-title [name]="'违规类型统计'"></app-title>
    </div>
    <div class="chartsbox">
      <div class="chart">
        <div class="leftbox">
          <span class="chartname">
            <img src="../../../assets/images/flower.png" alt="">
            违规事件统计
          </span>
          <div class="centerContent">
            <div class="numname">违规事件总数</div>
            <div class="num">206</div>
          </div>
          <div class="piechart" id="piechart">

          </div>
        </div>
        <div class="rightbox">
          <span class="chartname">
            <img src="../../../assets/images/flower.png" alt="">
            违规趋势
          </span>
          <div class="btnbox">
            <button class="rankingBtn" *ngIf="selectedType == '排名'" nz-button (click)="echartClick2('站点排名')"
              [ngClass]="{'selectedbtn': selectedRankingType == '站点排名'}">站点排名</button>
            <button class="rankingBtn" *ngIf="selectedType == '排名'" nz-button (click)="echartClick2('事件排名')"
              [ngClass]="{'selectedbtn':  selectedRankingType == '事件排名'}">事件排名</button>
            <button nz-button (click)="echartClick('分布')" [ngClass]="{'selectedbtn': selectedType == '分布'}">分布</button>
            <button nz-button (click)="echartClick('排名')" [ngClass]="{'selectedbtn': selectedType == '排名'}">排名</button>
          </div>
          <div class="barchart" id="barchart">

          </div>
        </div>
      </div>
    </div>

    <div class="title">
      <app-title [name]="'违规类型统计'"></app-title>
    </div>
    <div class="tablebox">
      <div class="table">
        <div nz-row class="th">
          <div nz-col nzSpan="4" style="box-sizing: border-box;padding-left: 18px;">
            事件编号
          </div>
          <div nz-col nzSpan="2">
            事件级别
          </div>
          <div nz-col nzSpan="4">
            事件类型
          </div>
          <div nz-col nzSpan="2">
            区域
          </div>
          <div nz-col nzSpan="1">

          </div>
          <div nz-col nzSpan="4">
            加油站
          </div>
          <div nz-col nzSpan="3">
            地点
          </div>
          <div nz-col nzSpan="3">
            违规时间
          </div>
          <div nz-col nzSpan="1">
            操作
          </div>
        </div>
        <div class="tbody">
          <div nz-row class="tr" *ngFor="let item of list">
            <div nz-col nzSpan="4" style="box-sizing: border-box;padding-left: 18px;">
              {{item.id}}
            </div>
            <div nz-col nzSpan="2">
              {{item.level}}
            </div>
            <div nz-col nzSpan="4">
              {{item.type}}
            </div>
            <div nz-col nzSpan="2">
              山东淄博
            </div>
            <div nz-col nzSpan="1" style="text-align: right;box-sizing: border-box;padding-right: 8px;">
              自营
            </div>
            <div nz-col nzSpan="4">
              {{item.name}}
            </div>
            <div nz-col nzSpan="3">
              {{item.site}}
            </div>
            <div nz-col nzSpan="3">
              {{item.time}}
            </div>
            <div nz-col nzSpan="1">
              <span (click)="look()">查看</span>
            </div>
          </div>
        </div>
      </div>
      <div class="pagination">
        <nz-pagination [nzPageIndex]="1" [nzTotal]="85" [nzPageSize]="20" [nzShowTotal]="totalTemplate"
          nzShowQuickJumper></nz-pagination>
        <ng-template #totalTemplate let-total> 16条/页,共100条 </ng-template>
      </div>
    </div>
  </div>
</div>