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)="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="4">
        <nz-select style="width: 100%;" nzPlaceHolder="所有分组" nzShowSearch [(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 nzAllowClear 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()">
            <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="99">自定义</label>
        </nz-radio-group>
    </div>
    <div nz-col nzSpan="8">
        <ng-container  *ngIf="timeType == '99'">
            <nz-date-picker
                    nzFormat="yyyy-MM-dd"
                    [(ngModel)]="startTime"
                    nzPlaceHolder="开始时间"
            ></nz-date-picker>
            <nz-date-picker
                    nzFormat="yyyy-MM-dd"
                    [(ngModel)]="endTime"
                    nzPlaceHolder="结束时间"
            ></nz-date-picker>
        </ng-container>
    </div>
    <div nz-col nzSpan="2" class="search-input text-right">
        <button (click)="search()" nz-button nzType="default"><i class="anticon anticon-search" style="color: #6097b7"></i>搜索</button>
    </div>
</div>
<nz-spin [nzSpinning]="isLoading">
    <div nz-row nzGutter="4">
        <div nz-col nzSpan="12" style="height: 400px">
            <ng-container *ngIf="data.left">
                <div class="img-noData">
                    <div class="noData" title="暂无数据"></div>
                </div>
            </ng-container>
            <ng-container *ngIf="!data.left">
                <div echarts [options]="chartTopOption" style="height: 400px;width: 100%"></div>
            </ng-container>
        </div>
        <div nz-col nzSpan="12" style="height: 400px">
            <ng-container *ngIf="data.right">
                <div class="img-noData">
                    <div class="noData" title="暂无数据"></div>
                </div>
            </ng-container>
            <ng-container *ngIf="!data.right">
                <div echarts [options]="charTrendOption" style="height: 400px;width: 100%"></div>
            </ng-container>
        </div>
    </div>
</nz-spin>
<div nz-row  nzGutter="4" style="margin: 20px 0">
    <div nz-col  nzSpan="20">
        <h3>常见问题TOP10</h3>
    </div>
    <div nz-col nzSpan="4" class="text-right">
        <button [nzLoading]="isDownload1" (click)="downLoadCommon()" nz-button nzType="default"><i class="anticon anticon-download"></i>下载</button>
    </div>
</div>
<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.priorityName}}</td>
            <td>{{item.count}}</td>
        </tr>
    </ng-container>
    </tbody>
</nz-table>
<div nz-row  nzGutter="4" style="margin: 20px 0">
    <div nz-col  nzSpan="20">
        <h3>统计报告</h3>
    </div>
    <div nz-col nzSpan="4" class="text-right">
        <button [nzLoading]="isDownload2" (click)="downLoadReport()" nz-button nzType="default"><i class="anticon anticon-download"></i>下载</button>
    </div>
</div>
<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 main-color" (click)="showWarnModal(data)">{{data.waring}}</span>
            </td>
            <td>
                <span class="cursor main-color" (click)="showErrorModal(data)"> {{data.error}}</span>
            </td>
        </tr>
    </ng-container>
    </tbody>
</nz-table>
<nz-modal [(nzVisible)]="isVisiable" nzWidth="780" [nzTitle]="title" [nzFooter]="null" (nzOnCancel)="handleCancel()">
    <nz-table #nzTable [nzData]="modalList" [nzFrontPagination]="true">
        <thead>
        <tr>
            <th nzShowSort>告警名称</th>
            <th>告警时间</th>
            <th>告警设备</th>
        </tr>
        </thead>
        <tbody>
        <tr *ngFor="let data of nzTable.data">
            <td>{{data.description}}</td>
            <td>{{data.lastchangeDate}}</td>
            <td>
                <span style="margin-right: 5px;" *ngFor="let item of data.hosts">{{item.name}}</span>
            </td>
        </tr>
        </tbody>
    </nz-table>
</nz-modal>