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

<div class="recordsbox" id="recordsbox">

  <div class="content">
    <div class="title">
      <div class="titlebox">
        <img src="../../../assets/images/logosm.png" alt="">
        <div class="content">
          <div class="contentitem">
            <span>预警类型统计</span>
            <!-- <span *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</span> -->
            <span class="grey" (click)="goOilList()">卸油统计</span>
            <span class="grey" (click)="goWarningList()">证照预警统计</span>
          </div>
        </div>
      </div>
      <img (click)="isEchartsShow()" class="packup" src="../../../assets/images/packup.png" alt="">
    </div>
    <div class="chartsbox" [hidden]="!isEcharts">
      <div class="chart">
        <div class="leftbox" style="position: relative;">
          <span class="chartname">
            <img src="../../../assets/images/flower.png" alt="">
            预警类别统计
          </span>
          <div class="centerContent">
            <div class="numname">预警事件总数</div>
            <div class="num">{{num}}</div>
          </div>
          <div class="piechart" id="piechart">

          </div>
          <nz-spin *ngIf="chartsSpin" nzSimple class="nzspin"></nz-spin>
        </div>
        <div class="rightbox" style="position: relative;">
          <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>
          <nz-spin *ngIf="chartsSpin" nzSimple class="nzspin"></nz-spin>
        </div>
      </div>
    </div>
    <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 (ngModelChange)="levelChange($event)" nzAllowClear id="level" formControlName="level"
              nzPlaceHolder="请选择预警级别">
              <nz-option *ngFor="let item of warningLevels" [nzValue]="item.key"
                [nzLabel]="item.key == 1 ? 'Ⅰ级' : item.key == 2 ? 'Ⅱ级' : item.key == 3 ? 'Ⅲ级' : item.key == 4 ? 'Ⅳ级' : null">
              </nz-option>
            </nz-select>
          </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="searchParamsZ eventInput">
          <nz-form-control>
            <nz-select [nzMaxTagCount]="1" nzMode="multitagsple" 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="searchParamsS eventInput">
          <nz-form-control>
            <nz-select [nzMaxTagCount]="1" nzMode="multitagsple" nzAllowClear formControlName="site" 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 searchParams2">
          <nz-form-control>
            <nz-range-picker [nzAllowClear]="false" formControlName="datePicker"></nz-range-picker>
            <br />
          </nz-form-control>
        </nz-form-item>
        <nz-form-item class="searchParams" [hidden]="!isMisinformation">
          <nz-form-control>
            <nz-select nzAllowClear formControlName="misinformation" nzPlaceHolder="是否显示标记">
              <nz-option nzValue="true" nzLabel="隐藏标记"></nz-option>
              <nz-option nzValue="false" nzLabel="显示标记"></nz-option>
            </nz-select>
          </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="tablebox">
      <div class="table">
        <div nz-row class="th">
          <div nz-col nzSpan="1" style="text-align: center;">
            <span>序号</span>
          </div>
          <div nz-col nzSpan="2">
            <span style="margin-left: 6px;">预警级别</span>
          </div>
          <div nz-col nzSpan="2">
            预警类型
          </div>
          <div nz-col nzSpan="2">
            预警事件
          </div>
          <div nz-col nzSpan="4">
            管理区域
          </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 nz-col nzSpan="2">
            操作
          </div>
        </div>
        <div class="tbody" id="tbody">
          <div nz-row class="tr" *ngFor="let item of list;let key = index">
            <div nz-col nzSpan="1" style="text-align: center;">
              <span>{{key + 1}}</span>

            </div>
            <div nz-col nzSpan="2">
              <img *ngIf="item.violation.level == 1" src="../../../assets/images/level1.png" alt="">
              <img *ngIf="item.violation.level == 2" src="../../../assets/images/level2.png" alt="">
              <img *ngIf="item.violation.level == 3" src="../../../assets/images/level3.png" alt="">
              <img *ngIf="item.violation.level == 4" src="../../../assets/images/level4.png" alt="">
              <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="4" [title]="item.gasStation.locationName">
              {{item.gasStation.locationName}}
            </div>
            <div nz-col nzSpan="3" [title]="item.violateArea">
              {{item.violateArea}}
            </div>
            <div nz-col nzSpan="3" [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.positive; else elseTemplate">
                误报
              </ng-container>
              <ng-template #elseTemplate>
                <span *ngIf="item.handleTime">已处置</span>
                <span *ngIf="!item.handleTime" style="color: #FF4B65;">未处置</span>
              </ng-template>
            </div>
            <div nz-col nzSpan="2">
              <span class="look" (click)="look(item)" style="margin-right: 12px;">查看</span>
              <!-- <span *ngIf="!item.handleTime" style="color: #36A2FF;cursor: pointer;" (click)="dispose(item)">处置</span>
              <span *ngIf="item.handleTime" style="color: rgba(145, 204, 255, 0.24);;">处置</span> -->
            </div>
          </div>
          <div nz-row class="tr" *ngIf="tableSpin">
            <div nz-col nzSpan="24" style="text-align: center;">
              <nz-spin nzSimple></nz-spin>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>