Sinopec-Anxin/src/app/pages/oil-unloading-process-list/oil-unloading-process-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>卸油统计</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">
                    <span class="chartname">
                        <img src="../../../assets/images/flower.png" alt="">
                        卸油预警统计
                    </span>
                    <div class="centerContent">
                        <div class="num">{{num}}</div>
                        <div class="numname">总数</div>
                    </div>
                    <span *ngIf="isgoback" class="goback" (click)="goback()">返回</span>
                    <div class="piechart" id="piechart">

                    </div>
                </div>
                <div class="rightbox">
                    <span class="chartname">
                        <img src="../../../assets/images/flower.png" alt="">
                        近30天卸油作业总数走势
                    </span>
                    <div class="barchart" id="barchart">

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

        <div class="title">
            <app-title [name]="'卸油作业留证列表'"></app-title>
        </div>
        <div class="search" [hidden]="!isEcharts">
            <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
                <nz-form-item class="searchParams">
                    <nz-form-control>
                        <nz-select formControlName="state" 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" *ngIf="isOrShow">
                    <nz-form-control>
                        <nz-tree-select [nzDropdownClassName]="'maxHeightTreeSelect'" nzShowSearch
                            [(ngModel)]="defaultOrId" formControlName="organization" [nzNodes]="nodes"
                            nzPlaceHolder="请选择所属机构">
                        </nz-tree-select>
                    </nz-form-control>
                </nz-form-item>
                <!-- 
                <nz-form-item class="searchParams">
                    <nz-form-control>
                        <nz-select formControlName="type" 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="searchParams">
                    <nz-form-control>
                        <nz-select formControlName="site" nzPlaceHolder="请选择处置状态">
                            <nz-option nzValue="0" nzLabel="已处置"></nz-option>
                            <nz-option nzValue="1" nzLabel="未处置"></nz-option>
                            <nz-option nzValue="2" 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="tablebox">
            <div class="table">
                <div nz-row class="th">
                    <div nz-col nzSpan="1">
                    </div>
                    <div nz-col nzSpan="2">
                        油站名称
                    </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="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">
                        <div nz-col nzSpan="1">
                        </div>
                        <div nz-col nzSpan="2">
                            油站名称
                        </div>
                        <div nz-col nzSpan="2">
                            组织机构
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.startTime ? (item.startTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}}
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.endTime ? (item.endTime | date:"yyyy-MM-dd HH:mm:ss") : '/'}}
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.proccessBeforeCount}}
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.proccessAfterCount}}
                        </div>
                        <div nz-col nzSpan="3">
                            {{item.allProccessCount}}
                        </div>
                        <div nz-col nzSpan="2">
                            <ng-container
                                *ngIf="item.proccessBeforeCount == 0 && item.proccessAfterCount == 0 && item.allProccessCount == 0; else elseTemplate">
                                <span style="color: #4BFFD4;">合规</span>
                            </ng-container>
                            <ng-template #elseTemplate>
                                <span style="color: #FF4B65;">预警</span>
                            </ng-template>
                        </div>
                        <div nz-col nzSpan="2">
                            <span style="color: #36A2FF;cursor: pointer;" (click)="look(item)">查看</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>