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 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="state" nzPlaceHolder="请选择状态"
                            (ngModelChange)="tableChange($event)">
                            <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 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" *ngIf="isLicenseTable">
            <div class="table">
                <div nz-row class="th">
                    <div nz-col nzSpan="3">
                        <span style="margin-left: 26px;">证件名称</span>
                    </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="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">
                        <div nz-col nzSpan="3">
                            <span style="margin-left: 26px;">{{item.violatedItemSnapshotObj.name}}</span>
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.violatedItemSnapshotObj.code}}
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.gasStation.stationName}}
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.violatedItemSnapshotObj.startTime |
                            date:"yyyy-MM-dd"}}至{{item.violatedItemSnapshotObj.endTime | date:"yyyy-MM-dd"}}
                        </div>
                        <div nz-col nzSpan="2">
                            {{item.violatedItemSnapshotObj.hasAnnualInspection ? '是' : '否'}}
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.violatedItemSnapshotObj.annualInspectionTime | date:"yyyy-MM-dd"}}
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.violatedItemSnapshotObj.annualInspectionOrganizationName}}
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.gasStation.leaderContact}}
                        </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 class="tablebox" *ngIf="!isLicenseTable">
            <div class="table">
                <div nz-row class="th">
                    <div nz-col nzSpan="4">
                        <span style="margin-left: 26px;">消防器材名称</span>
                    </div>
                    <div nz-col nzSpan="4">
                        所属油站
                    </div>
                    <div nz-col nzSpan="3">
                        规格
                    </div>
                    <div nz-col nzSpan="4">
                        购入日期
                    </div>
                    <div nz-col nzSpan="4">
                        出厂日期（生产日期）
                    </div>
                    <div nz-col nzSpan="4">
                        有效期
                    </div>
                    <div nz-col nzSpan="1">
                        <span>操作</span>
                    </div>
                </div>
                <div class="tbody" id="tbody">
                    <div nz-row class="tr" *ngFor="let item of list">
                        <div nz-col nzSpan="4">
                            <span style="margin-left: 26px;">{{item.violatedItemSnapshotObj.name}}</span>
                        </div>
                        <div nz-col nzSpan="4">
                            {{item.gasStation.stationName}}
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.violatedItemSnapshotObj.specification}}
                        </div>
                        <div nz-col nzSpan="4">
                            {{item.violatedItemSnapshotObj.purchaseDate | date:"yyyy-MM-dd"}}
                        </div>
                        <div nz-col nzSpan="4">
                            {{item.violatedItemSnapshotObj.productionDate | date:"yyyy-MM-dd"}}
                        </div>
                        <div nz-col nzSpan="4">
                            {{item.violatedItemSnapshotObj.validityEndTime | date:"yyyy-MM-dd"}}
                        </div>
                        <div nz-col nzSpan="1">
                            <span [ngClass]="{'grey': item.handleTime}" style="cursor: pointer;color: #36A2FF;" (click)="dispose(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>