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.waring}}个，{{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.waring}}个，{{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 nzWidth="15%">告警信息</th>
        <th>状态</th>
    </tr>
    </thead>
    <tbody>
    <tr *ngFor="let data of warnList">
        <td>
            {{data.createTime}}
        </td>
        <td class="round-tag tag-form">
            <nz-tag class="tag-green" *ngIf="data.level == 0 " [nzColor]="'#58ca13'"></nz-tag>
            <nz-tag class="tag-red" *ngIf="data.level == 2 " [nzColor]="'#fc0d1b'"></nz-tag>
            <nz-tag class="tag-yellow" *ngIf="data.level == 1 " [nzColor]="'#fd9827'"></nz-tag>
        </td>
        <td>{{data.name}}</td>
        <td>{{data.description}}</td>
        <td>
            <ng-container *ngIf="data.r_clock"><span class="color-green"><i class="anticon anticon-check-square-o"></i></span>
            </ng-container>
            <ng-container *ngIf="!data.r_clock"><span class="color-red">  <i class="anticon anticon-warning"></i></span>
            </ng-container>
        </td>
    </tr>
    </tbody>
</nz-table>