alarm-log.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 (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
        <smart-full-screen></smart-full-screen>
    </div>
</div>
<div nz-row [nzGutter]="4" class="search-form">
    <div nz-col nzSpan="3">
        <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择发送方式" [(ngModel)]="obj.mediatypeids">
            <ng-container *ngFor="let item of sendList">
                <nz-option [nzLabel]="item.description" [nzValue]="item.mediatypeid"></nz-option>
            </ng-container>
        </nz-select>
    </div>
    <div nz-col nzSpan="3">
        <nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择告警组" [(ngModel)]="obj.alertGroupId">
            <ng-container *ngFor="let item of groupList;">
                <nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
            </ng-container>
        </nz-select>
    </div>
    <div nz-col nzSpan="7">
        <nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (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>
    <div nz-col nzSpan="8" *ngIf="timeType == '5'">
        <nz-date-picker
                nzShowTime
                [(ngModel)]="startTime"
                nzPlaceHolder="开始时间"
        ></nz-date-picker>
        <nz-date-picker
                nzShowTime
                nzFormat="yyyy-MM-dd HH:mm:ss"
                [(ngModel)]="endTime"
                nzPlaceHolder="结束时间"
        ></nz-date-picker>
    </div>
    <div nz-col nzSpan="3">
        <button (click)="search()"   nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
    </div>
</div>

<nz-table #nzTable [nzData]="logList" [nzLoading]="loading" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)">
    <thead>
    <tr>
        <th nzWidth="20%">告警名称</th>
        <th>告警时间</th>
        <th>告警目标</th>
        <th>告警内容</th>
        <th>状态</th>
        <th>发送方式</th>
        <th>发送对象</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of logList">
        <td class="round-tag tag-form">
            {{data.name}}
        </td>
        <td>{{data.clock | date:"yyyy-MM-dd HH:mm:ss"}}</td>
        <td>
            <ng-container *ngIf="data.hosts">
                {{data.hosts[0].name}}
            </ng-container>
        </td>
        <td class="handle">
            <span (click)="showDeleteModal(data)">查看</span>
        </td>
        <td>
            <span *ngIf="data.status == 0">消息未发送</span>
            <span *ngIf="data.status == 1">消息已发送</span>
            <span *ngIf="data.status == 2">经多次重试后失败</span>
        </td>
        <td>
            <ng-container *ngIf="data.mediatypes">
                {{data.mediatypes[0].description}}
            </ng-container>
        </td>
        <td>
            {{data.sendto}}
        </td>
        <td class="handle main-color">
            <span (click)="deleteLog(data)">删除</span>
        </td>
    </tr>
    </tbody>
</nz-table>
<!--告警内容-->
<nz-modal [(nzVisible)]="isVisible" [nzFooter]="null" nzTitle="查看告警内容" (nzOnCancel)="handleCancel()">
    <div style="padding: 10px;">
        <p>主题：</p>
        <p>{{title}}</p>
        <p>消息：</p>
        <p>{{content}}</p>
    </div>
</nz-modal>

<!--告警目标-->
<smart-alarm-target #smartAlarmTarget></smart-alarm-target>