resource-alarm.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)="search()" 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 nz-row [nzGutter]="4" class="search-form" >
    <div nz-col nzSpan="3" >
        <nz-select style="width: 100%;" nzPlaceHolder="所有分组" [(ngModel)]="obj.groupid">
            <ng-container *ngFor="let item of groupList">
                <nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option>
            </ng-container>
        </nz-select>
    </div>
    <div nz-col nzSpan="3" >
        <nz-select style="width: 100%;" nzPlaceHolder="所有告警" [(ngModel)]="obj.priorityName">
            <nz-option nzLabel="告警" nzValue="告警"></nz-option>
            <nz-option nzLabel="严重" nzValue="严重"></nz-option>
        </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>
<div nz-row nzGutter="4">
    <div nz-col nzSpan="12" style="height: 400px">
        <nz-spin [nzSpinning]="isLoading">
            <div echarts [options]="chartTopOption" style="height: 400px;width: 100%"></div>
        </nz-spin>
    </div>
    <div nz-col nzSpan="12" style="height: 400px">
        <nz-spin [nzSpinning]="isLoading">
            <div echarts [options]="charTrendOption" style="height: 400px;width: 100%"></div>
        </nz-spin>
    </div>
</div>
<h3 style="margin-top: 20px">常见问题TOP10</h3>
<nz-table #nzTable [nzData]="commonList">
    <thead>
    <tr>
        <th nzWidth="20%">资源名称</th>
        <th>所在分组</th>
        <th>告警名称</th>
        <th>严重性</th>
        <th>时间段内发生次数</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let item of commonList">
        <tr>
            <td>{{item.hostname}}</td>
            <td>{{item.groupname}}</td>
            <td>{{item.description}}</td>
            <td>{{item.priority}}</td>
            <td>{{item.count}}</td>
        </tr>
    </ng-container>
    </tbody>
</nz-table>
<h3 style="margin-top: 20px">统计报告</h3>
<nz-table #nzTable1 [nzData]="reportList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)">
    <thead>
    <tr>
        <th nzWidth="20%">时间</th>
        <th>异常总数</th>
        <th>告警次数</th>
        <th>严重告警次数</th>
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of reportList">
        <tr >
            <td>{{data.dateTime}}</td>
            <td>{{data.countNumber}}</td>
            <td>
                <span class="cursor" (click)="showWarnModal()">{{data.waring}}</span>
            </td>
            <td>
                <span class="cursor" (click)="showErrorModal()"> {{data.error}}</span>
             </td>
        </tr>
    </ng-container>
    </tbody>
</nz-table>
<nz-modal [(nzVisible)]="isVisiable" [nzTitle]="title" [nzFooter]="null" (nzOnCancel)="handleCancel()">
    <nz-table #nzTable [nzData]="warnList">
        <thead>
        <tr>
            <th nzShowSort>告警名称</th>
            <th>告警时间</th>
            <th>告警设备</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of warnList">
            <td>{{data.hostname}}</td>
            <td>{{data.description}}</td>
            <td>{{data.equipmentType}}</td>
        </tr>
        </tbody>
    </nz-table>
</nz-modal>