<!--运行报告-->
<nz-modal [nzWidth]="1080" [(nzVisible)]="isVisiable" nzTitle="运行报告" [nzFooter]="null" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <div nz-row style="padding: 10px 20px;">
    <div nz-col [nzSpan]="8">
      运行报告
    </div>
    <div nz-col [nzSpan]="16" class="text-right">
      期间
      <nz-select style="width: 200px" name="select-error" [(ngModel)]="period" (ngModelChange)="getList()">
        <ng-container *ngFor="let item of periodList">
          <nz-option [nzValue]="item.value" [nzLabel]="item.label"></nz-option>
        </ng-container>
      </nz-select>
      年
      <nz-select style="width: 200px" name="select-error" [(ngModel)]="year" (ngModelChange)="getList()">
        <ng-container *ngFor="let item of yearList">
          <nz-option [nzValue]="item" [nzLabel]="item"></nz-option>
        </ng-container>
      </nz-select>
    </div>
  </div>
  <div>
    <nz-table #nzKeyTable [nzData]="dataSet" [nzFrontPagination]="'true'" [nzLoading]="isLoading" [nzPageSize]="'5'">
      <thead>
      <tr>
        <th width="20%">自从</th>
        <th width="20%">直到</th>
        <th>正常</th>
        <th>问题</th>
        <th>断线时间</th>
        <th>SLA</th>
        <th>可接受的SLA</th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let data of nzKeyTable.data">
        <td class="main-color cursor">{{data.fromValue}}</td>
        <td>{{data.toValue}}</td>
        <td class="green">{{data.okTImeValue}}</td>
        <td class="red">{{data.problemTimeValue}}</td>
        <td>{{data.downtimeTimeValue}}</td>
        <td>{{data.describes}}</td>
        <td>{{data.describes}}</td>
      </tr>
      </tbody>
    </nz-table>
  </div>
</nz-modal>
