alarm-list.component.html

<div nz-row class="breadcrumbs" >
  <div nz-col nzSpan="16">
    <nz-breadcrumb class="padding-8-0">
      <nz-breadcrumb-item>
        首页
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        <a>告警管理</a>
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        告警记录
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
  <div nz-col nzSpan="8" class="text-right">
    <button nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
    <button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
    <button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
  </div>
</div>

<div style="margin-bottom: 20px">
  <nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="选择级别" [(ngModel)]="selectedValue" (ngModelChange)="select()">
    <nz-option nzLabel="告警" nzValue="type"></nz-option>
    <nz-option nzLabel="严重" nzValue="group"></nz-option>
  </nz-select>
  <nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="选择分组" [(ngModel)]="selectedValue" (ngModelChange)="select()">
    <ng-container *ngFor="let item of groupList;">
      <nz-option nzLabel="{{item.name}}" nzValue="{{item.id}}"></nz-option>
    </ng-container>
  </nz-select>
  <nz-select style="width: 200px;" nzShowSearch nzAllowClear nzPlaceHolder="选择资源类型" [(ngModel)]="selectedValue" (ngModelChange)="select()">
    <ng-container *ngFor="let item of warnCountList;">
      <nz-option nzLabel="{{item.name}}" nzValue="{{item.id}}"></nz-option>
    </ng-container>
  </nz-select>
  <nz-radio-group [(ngModel)]="itemTypeValue" (ngModelChange)="changeType()" [nzButtonStyle]="'solid'">
    <label nz-radio-button nzValue="1">今天</label>
    <label nz-radio-button nzValue="2">昨天</label>
    <label nz-radio-button nzValue="3">三天</label>
    <label nz-radio-button nzValue="4">一周</label>
    <label nz-radio-button nzValue="5">自定义</label>
  </nz-radio-group>
</div>

<smart-warn-list #warnList></smart-warn-list>