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 *ngIf="isMisinformation" class="grey" (click)="goMisinformationList()">预警误报统计</span> -->
                        <span>卸油统计</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="num">{{num}}</div>
                        <div class="numname">总数</div>
                    </div>
                    <span *ngIf="isgoback" class="goback" (click)="goback()">返回</span>
                    <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">
                    <nz-form-control>
                        <nz-select nzAllowClear 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 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: 15px;">序号</span>
                    </div>
                    <div nz-col nzSpan="3">
                        <span>油站名称</span>
                    </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" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        卸油准备
                    </div>
                    <div nz-col nzSpan="3" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        卸油操作
                    </div>
                    <!-- <div nz-col nzSpan="3" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
                        全流程准备预警节点数量
                    </div> -->
                    <div nz-col nzSpan="1">
                        状态
                    </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: 15px;">{{key + 1}}</span>
                        </div>
                        <div nz-col nzSpan="3" [title]="item.gasStation.stationName">
                            <span>{{item.gasStation.stationName}}</span>
                        </div>
                        <div nz-col nzSpan="2" [title]="item.gasStation.companyName">
                            {{item.gasStation.companyName}}
                        </div>
                        <div nz-col nzSpan="4" [title]="item.gasStation.locationName">
                            {{item.gasStation.locationName}}
                        </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.proccessingCount}}
                        </div>
                        <!-- <div nz-col nzSpan="3">
                            {{item.allProccessCount}}
                        </div> -->
                        <div nz-col nzSpan="1">
                            <ng-container *ngIf="item.endTime; else elseTemplate">
                                <ng-container
                                    *ngIf="item.proccessBeforeCount == 0 && item.proccessingCount == 0; else elseTemplate">
                                    <span style="color: #4BFFD4;">合规</span>
                                </ng-container>
                                <ng-template #elseTemplate>
                                    <span style="color: #FF4B65;">预警</span>
                                </ng-template>
                            </ng-container>
                            <ng-template #elseTemplate>
                                <span style="color: #4BFFD4;">卸油中</span>
                            </ng-template>




                        </div>
                        <div nz-col nzSpan="1">
                            <span style="color: #36A2FF;cursor: pointer;" (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>