Sinopec-Anxin/src/app/pages/warning-statistics-list/warning-statistics-list.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 class="grey" (click)="gorecordList()">预警类型统计</span>
                        <!-- <span *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</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="2">
                        预警类别
                    </div>
                    <div nz-col nzSpan="3">
                        预警内容
                    </div>
                    <div nz-col nzSpan="3">
                        公司名称
                    </div>
                    <div nz-col nzSpan="5">
                        区域名称
                    </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="2">
                            <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="3">
                            <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" [title]="item.gasStation.companyName">
                            {{item.gasStation.companyName ? item.gasStation.companyName : '/'}}
                        </div>
                        <div nz-col nzSpan="5" [title]="item.gasStation.locationName">
                            {{item.gasStation.locationName ? item.gasStation.locationName : '/'}}
                        </div>
                        <div nz-col nzSpan="3" [title]="item.gasStation.stationName">
                            {{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.endTime ?
                            (item.violatedItemSnapshotObj.endTime | 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>