<!--资源可用性统计-->
<div nz-row class="breadcrumbs">
    <div nz-col nzSpan="16">
        <nz-breadcrumb class="padding-8-0">
            <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 nz-row nzGutter="4">
    <div nz-col nzSpan="16" >
        <div class="leftDiv">
            <div  #leftDiv class="leftDiv-container">
                <div style="padding: 10px;">
                    运行情况统计
                    <nz-select style="width: 200px;float: right"  nzPlaceHolder="选择分组" [(ngModel)]="obj.leftGroupId" (ngModelChange)="countGroupItem()">
                        <ng-container *ngFor="let item of groupList;let i = index;">
                            <nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option>
                        </ng-container>
                    </nz-select>
                </div>
                <div nz-row >
                    <div nz-col nzSpan="12">
                        <div echarts [options]="leftOneChart" style="height: 250px;width: 100%"></div>
                        <div class="flex-center">
                            <div class="flex-item round-tag tag-form">
                                <!--<p><nz-tag  [nzColor]="color.red"></nz-tag>严重 {{leftOneData?.high}}个，{{(leftOneData?.high / leftOneTotal).toFixed(2)*100}}% </p>-->
                                <!--<p><nz-tag  [nzColor]="color.yellow"></nz-tag>告警 {{leftOneData?.warning}}个，{{(leftOneData?.warning / leftOneTotal).toFixed(2)*100}}% </p>-->
                                <!--<p><nz-tag  [nzColor]="color.green"></nz-tag>正常 {{leftOneData?.normal}}个，{{(leftOneData?.normal / leftOneTotal).toFixed(2)*100}}% </p>-->
                                <!--<p><nz-tag  [nzColor]="color.gray"></nz-tag>禁止 {{leftOneData?.disabled}}个，{{(leftOneData?.disabled / leftOneTotal).toFixed(2)*100}}%</p>-->
                            </div>
                        </div>
                    </div>
                    <div nz-col nzSpan="12">
                        <div echarts [options]="leftTwoChart" style="height: 250px;width: 100%"></div>
                        <div class="flex-center">
                            <!--<div class="flex-item  round-tag tag-form">-->
                                <!--<p><nz-tag  [nzColor]="color.red"></nz-tag>严重 {{leftTwoData?.high}}个，{{(leftTwoData?.high / leftTwoTotal).toFixed(2)*100}}% </p>-->
                                <!--<p><nz-tag  [nzColor]="color.yellow"></nz-tag>告警 {{leftTwoData?.warning}}个，{{(leftTwoData?.warning / leftTwoTotal).toFixed(2)*100}}% </p>-->
                                <!--<p><nz-tag  [nzColor]="color.green"></nz-tag>正常 {{leftTwoData?.normal}}个，{{(leftTwoData?.normal / leftTwoTotal).toFixed(2)*100}}% </p>-->
                                <!--<p><nz-tag  [nzColor]="color.gray"></nz-tag>禁止 {{leftTwoData?.disabled}}个，{{(leftTwoData?.disabled / leftTwoTotal).toFixed(2)*100}}%</p>-->
                            <!--</div>-->
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div #rightDiv nz-col nzSpan="8" class="rightDiv">
        <p>资源数量统计<span><span class="main-color-font">{{rightTotal}}</span>个资源</span></p>
        <div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div>
        <div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div>
    </div>
</div>
<div style="margin: 15px 0;">
    当前告警
    <nz-select style="width: 200px;"  nzPlaceHolder="选择分组" [(ngModel)]="obj.alarmGroupId" (ngModelChange)="getAlarmList()">
        <ng-container *ngFor="let item of groupList">
            <nz-option [nzLabel]="item.name" [nzValue]="item.groupid"></nz-option>
        </ng-container>
    </nz-select>
</div>
<nz-table #nzTable [nzData]="warnList" [nzFrontPagination]="false" [nzTotal]="totalNum" [nzPageIndex]="pageNum" [nzPageSize]="pageCount" (nzPageIndexChange)="change($event)" [nzLoading]="loading">
    <thead>
    <tr>
        <th nzShowSort>产生时间</th>
        <th>级别</th>
        <th>资源名称</th>
        <th>告警信息</th>
        <th>持续时间</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of warnList">
        <td >
          {{data.clock | date:"yyyy-MM-dd HH:mm:ss"}}
        </td>
        <td class="round-tag tag-form">
            <nz-tag *ngIf="data.priority == 4 || data.priority == 5" [nzColor]="'#fc0d1b'"></nz-tag>
            <nz-tag *ngIf="data.priority == 2 || data.priority == 3" [nzColor]="'#fd9827'"></nz-tag>
        </td>
        <td>{{data.hostname}}</td>
        <td>{{data.description}}</td>
        <td>{{data.continuedTime}}</td>
    </tr>
    </tbody>
</nz-table>
<p (click)="showAddFollow()">添加关注</p>
    <div nz-row>
        <ng-container *ngFor="let item of followList">
        <div nz-col nzSpan="12" style="padding: 5px;">
            <div style="border: 1px solid #ddd;">
                <div style="border-bottom: 1px solid #ddd;padding: 10px 5px;background-color:#eee;">
                    <div>
                        <p>{{item.name}} <span style="margin-left: 10px">IP：{{item.host}}</span></p>
                        <p>所在分组</p>
                    </div>
                </div>
                <div nz-row>
                    <div nz-col nzSpan="12">
                        <div style="padding: 10px;">
                            <p>监测点</p>
                            <p>{{item.high}} {{item.warning}}</p>
                        </div>
                        <div style="padding: 10px;display: flex;align-items: center">
                            <p>PING值:{{item.lose}}</p>
                        </div>
                    </div>
                    <div nz-col nzSpan="12" echarts [options]="item.option"></div>
                </div>

            </div>

        </div>
        </ng-container>
    </div>
<smart-select-group #smartSelectGroup (done)="getItem($event)"></smart-select-group>
