Sinopec-Anxin/src/app/pages/plan-admin/update-license-list/update-license-list.component.html

<div class="box">
    <div class="search">
        <div class="legendbox">
            <div class="legendItem">
                <div style="background: #4BFFD4;box-shadow: 0px 2px 6px 1px #4BFFD4;"></div>办理提醒
            </div>
            <div class="legendItem">
                <div style="background: #FFBD4B;box-shadow: 0px 2px 6px 1px #FFBD4B;"></div>临期提醒
            </div>
            <div class="legendItem">
                <div style="background: #FF4B65;box-shadow: 0px 2px 6px 1px #FF4B65;"></div>逾期提醒
            </div>
        </div>
        <form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()">
            <nz-form-item class="searchParams">
                <nz-form-control>
                    <nz-input-group>
                        <input required nz-input type="text" formControlName="name" placeholder="请输入加油站名称" />
                    </nz-input-group>
                </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" id="tablebox">
        <nz-table [nzLoading]="tableSpin" [nzPageSize]='999' #headerTable [nzData]="list" [nzShowPagination]="false"
            [nzScroll]="{ y:tableScrollHeight }" [nzNoResult]='null' nzTableLayout="fixed">
            <thead>
                <tr>
                    <th style="text-align: center">序号</th>
                    <th *ngFor="let item of headerTable.data[0]">
                        {{item.name}}
                    </th>

                </tr>
            </thead>
            <tbody id="table">
                <tr *ngFor="let item of headerTable.data;let key = index">
                    <td style="text-align: center">{{key + 1}}</td>

                    <td *ngFor="let i of item">
                        <ng-container *ngIf="i.value; else elseTemplate">
                            <ng-container *ngIf="i.value.endDate; else elseTemplate">
                                <span (click)="lookDetails(i.value)" style="cursor: pointer;" [ngClass]="{'green': i.value.licenseViolationType == 1,'yellow': i.value.licenseViolationType == 2,'red': i.value.licenseViolationType == 3}">
                                    {{i.value.endDate | date:"yyyy-MM-dd"}}
                                </span>
                            </ng-container>
                            <ng-template #elseTemplate>
                                {{i.value}}
                            </ng-template>

                        </ng-container>
                        <ng-template #elseTemplate>
                            /
                        </ng-template>

                    </td>
                </tr>
            </tbody>
        </nz-table>

    </div>
</div>