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 (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">
    <div nz-col nzSpan="16">
        <div class="leftDiv">
            <div #leftDiv class="leftDiv-container">
                <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.serious}}个，{{leftOneDataPre.seriousPer}}%</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.disable}}个，{{leftOneDataPre.disablePer}}%</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.serious}}个，{{leftTwoDataPre.seriousPer}}% </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.disable}}个，{{leftTwoDataPre.disablePer}}%</span>
                                </p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div #rightDiv nz-col nzSpan="8" class="rightDiv" style="height: 500px;">
        <h2>设备类型</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>