home.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>
    </div>
    <div nz-col nzSpan="8" class="text-right">
        <button nzType="primary" (click)="returnBack()" nz-button>返回上一页</button>
        <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="home-container">
    <div nz-col nzSpan="16">
        <div class="leftDiv">
            <div #leftDiv class="leftDiv-container">
                <div nz-row class="padding-10">
                    <div nz-col nzSpan="12"> <h2>运行情况统计</h2></div>
                    <div nz-col nzSpan="12">
                        <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>
                <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 class="tag-red" [nzColor]="color.red"></nz-tag>
                                    <span class="margin-0-10">严重 {{leftOneData.high}}个，{{leftOneDataPre.highPer}}%</span>
                                </p>
                                <p>
                                    <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                                    <span class="margin-0-10">告警 {{leftOneData.warning}}个，{{leftOneDataPre.warningPer}}% </span>
                                </p>
                                <p>
                                    <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
                                    <span class="margin-0-10">正常 {{leftOneData.normal}}个，{{leftOneDataPre.normalPer}}% </span>
                                </p>
                                <p>
                                    <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
                                    <span class="margin-0-10">禁止 {{leftOneData.disabled}}个，{{leftOneDataPre.disabledPer}}%</span>
                                </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 class="tag-red" [nzColor]="color.red"></nz-tag>
                                    <span class="margin-0-10">严重 {{leftTwoData.high}}个，{{leftTwoDataPre.highPer}}% </span>
                                </p>
                                <p>
                                    <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                                    <span class="margin-0-10">告警 {{leftTwoData.warning}}个，{{leftTwoDataPre.warningPer}}% </span>
                                </p>
                                <p>
                                    <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
                                    <span class="margin-0-10">正常 {{leftTwoData.normal}}个，{{leftTwoDataPre.normalPer}}% </span>
                                </p>
                                <p>
                                    <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
                                    <span class="margin-0-10">禁止 {{leftTwoData.disabled}}个，{{leftTwoDataPre.disabledPer}}%</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div #rightDiv nz-col nzSpan="8" class="rightDiv" style="height: 500px;">
        <h2>资源数量统计<span><span class="main-color-font">{{deviceNo}}</span>个资源</span></h2>
        <div echarts [options]="rightTwoChart" style="height: 250px;width: 100%;margin-top: 50px"></div>
    </div>
</div>
<div nz-row class="padding-15-0">
    <div nz-col nzSpan="12">
        <h2>当前告警</h2>
    </div>
    <div nz-col nzSpan="12" class="text-right">
        <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>
</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 nzTable.data">
        <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" class="tag-red" [nzColor]="color.red"></nz-tag>
            <nz-tag *ngIf="data.priority == 2 || data.priority == 3" class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
        </td>
        <td class="cursor main-color" (click)="goToDetail(data)">{{data.hostname}}</td>
        <td>{{data.description}}</td>
        <td>{{data.continuedTime}}</td>
    </tr>
    </tbody>
</nz-table>
<div nz-row class="padding-15-0">
    <div nz-col nzSpan="12">
        <h2>关注资源</h2>
    </div>
    <div nz-col nzSpan="12" class="text-right">
        <button nz-button nzType="default" (click)="showAddFollow()"><i class="anticon anticon-plus-circle-o"></i>添加资源
        </button>
    </div>
</div>
<div nz-row>
    <ng-container *ngFor="let item of followList;let i = index;">
        <div nz-col nzSpan="12" class="follow">
            <span (click)="cancel(i,item)" class="cursor calcle-follow"><i
                    class="anticon anticon-close-circle"></i></span>
            <div class="follow-container">
                <div class="follow-title">
                    <div>
                        <p>{{item.name}} <span>类型：{{item.extendName}}</span> <span style="margin-left: 10px">IP：{{item.host}}</span>
                        </p>
                        <p>所在分组：<span style="margin-right: 5px;" *ngFor="let groups of item.groupName">{{groups}}</span></p>
                    </div>
                </div>
                <div nz-row>
                    <div nz-col nzSpan="12" class="height-150 releative">
                        <div class="container-top">
                            <p>监测点</p>
                            <p class="round-tag tag-form">
                                <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
                                <span style="margin-right: 10px">{{item.item.high}}</span>
                                <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
                                <span style="margin-right: 10px"> {{item.item.warning}}</span>
                            </p>
                        </div>
                        <div class="container-bottom">
                            <p>PING值:{{item.lose}}</p>
                        </div>
                    </div>
                    <div nz-col nzSpan="12" class="height-150" echarts [options]="item.option"></div>
                    <div class="chart-font">
                        <p>
                            <nz-tag nzColor="#f09363"></nz-tag>
                            CPU使用率 {{item.cpu}}%
                        </p>
                        <p>
                            <nz-tag nzColor="#80ba78"></nz-tag>
                            内存使用率 {{(item.memory).toFixed(2)}}%
                        </p>
                        <!--<p>-->
                        <!--<nz-tag nzColor="#73b6e4"></nz-tag>-->
                        <!--带宽使用率 {{item.lose}}%-->
                        <!--</p>-->
                    </div>
                </div>

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