You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
186 lines
8.9 KiB
186 lines
8.9 KiB
<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 class="grey" (click)="gorecordList()">预警类型统计</span> |
|
<span class="grey" (click)="goOilList()">卸油统计</span> |
|
<span>证照预警统计</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="num">{{num}}</div> |
|
<div class="numname">总数</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=""> |
|
近30天预警走势 |
|
</span> |
|
<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 searchParamsLong"> |
|
<nz-form-control> |
|
<nz-select [nzAllowClear]="false" nzAllowClear formControlName="eventSystemName" |
|
nzPlaceHolder="请选择状态"> |
|
<nz-option *ngFor="let item of eventSystemNameOption" [nzValue]="item.id" |
|
[nzLabel]="item.name"></nz-option> |
|
</nz-select> |
|
</nz-form-control> |
|
</nz-form-item> |
|
<nz-form-item class="searchParams searchParamsLong" *ngIf="isOrShow"> |
|
<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 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="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"> |
|
<span style="margin-left: 20px;white-space:nowrap; |
|
overflow:hidden; |
|
text-overflow:ellipsis;">序号</span> |
|
</div> |
|
<div nz-col nzSpan="3"> |
|
预警类别 |
|
</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="3"> |
|
证照/消防设施名称 |
|
</div> |
|
<div nz-col nzSpan="3"> |
|
有效期限 |
|
</div> |
|
<div nz-col nzSpan="1"> |
|
操作 |
|
</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"> |
|
<span style="margin-left: 20px;">{{key+1}}</span> |
|
</div> |
|
<div nz-col nzSpan="3"> |
|
<ng-container *ngIf="item.numberOfTimes; else elseTemplate"> |
|
<span *ngIf="item.numberOfTimes == 1">办理提醒</span> |
|
<span *ngIf="item.numberOfTimes == 2">临期提醒</span> |
|
<span *ngIf="item.numberOfTimes == 3">逾期报警</span> |
|
</ng-container> |
|
<ng-template #elseTemplate> |
|
逾期报警 |
|
</ng-template> |
|
</div> |
|
<div nz-col nzSpan="4"> |
|
<ng-container *ngIf="item.numberOfTimes; else elseTemplate2"> |
|
<span *ngIf="item.numberOfTimes == 1">{{item.desc}}办理提醒</span> |
|
<span *ngIf="item.numberOfTimes == 2">{{item.desc}}临期提醒</span> |
|
<span *ngIf="item.numberOfTimes == 3">{{item.desc}}逾期报警</span> |
|
</ng-container> |
|
<ng-template #elseTemplate2> |
|
消防设备逾期报警 |
|
</ng-template> |
|
</div> |
|
<div nz-col nzSpan="3"> |
|
{{item.gasStation.companyName ? item.gasStation.companyName : '/'}} |
|
</div> |
|
<div nz-col nzSpan="3"> |
|
{{item.gasStation.locationName ? item.gasStation.locationName : '/'}} |
|
</div> |
|
<div nz-col nzSpan="3"> |
|
{{item.gasStation.stationName ? item.gasStation.stationName : '/'}} |
|
</div> |
|
<div nz-col nzSpan="3"> |
|
{{item.violatedItemSnapshotObj.name ? item.violatedItemSnapshotObj.name : '/'}} |
|
</div> |
|
<div nz-col nzSpan="3"> |
|
{{item.violatedItemSnapshotObj.validityEndTime ? |
|
(item.violatedItemSnapshotObj.validityEndTime | date:"yyyy-MM-dd") : '/'}} |
|
</div> |
|
<div nz-col nzSpan="1"> |
|
<span style="cursor: pointer;color: #36A2FF;" (click)="look(item)">查看</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> |