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]="10">
        <nz-col class="padding-10" nzSpan="12">
            <div nz-row class="host-item-title">
                <div nz-col nzSpan="12">运行情况统计</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 class="host-item-content">
                <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>
        </nz-col>
        <nz-col class="padding-10" nzSpan="12" style="position: relative">
            <div class="host-item-title">告警总数趋势</div>
            <div class="time-group" style="top: 18px;">
                <nz-select style="width: 150px;" nzPlaceHolder="选择时间" [(ngModel)]="timeTypeTrend"
                           (ngModelChange)="changeTrend($event)">
                    <ng-container *ngFor="let time of timeList">
                        <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
                    </ng-container>
                </nz-select>
            </div>
            <div class="host-item-content">
                <ng-container *ngIf="noData">
                    <div class="img-noData" style="min-height: 400px">
                        <div class="noData" title="暂无数据"></div>
                    </div>
                </ng-container>
                <ng-container *ngIf="!noData">
                    <nz-spin [nzSpinning]="isTrendLoading">
                        <div echarts [options]="charTrendOption" style="height: 360px;width: 100%"></div>
                    </nz-spin>
                </ng-container>
            </div>
        </nz-col>
    </nz-row>

    <nz-row [nzGutter]="10">
        <nz-col class="padding-10" nzSpan="12">
            <div class="host-item-title">运行情况统计</div>
            <div class="host-item-table" style="height: 500px">
                <nz-row class="text-center table-title">
                    <nz-col nzSpan="3">状态</nz-col>
                    <nz-col nzSpan="7">资源名称</nz-col>
                    <nz-col nzSpan="7">CPU利用率</nz-col>
                    <nz-col nzSpan="7">内存利用率</nz-col>
                </nz-row>
                <ng-container *ngFor="let flow of countOrderList;">
                    <nz-row class="table-content">
                        <nz-col class="text-center" nzSpan="3">状态</nz-col>
                        <nz-col nzSpan="7">{{flow.name}}</nz-col>
                        <nz-col nzSpan="7">
                            <div class="width-host">
                                <div class="space" [style.width]="flow.cpuUseRate + '%'"></div>
                            </div>
                        </nz-col>
                        <nz-col nzSpan="7">
                            <div class="width-host">
                                <div class="space" [style.width]="flow.vmUseRate + '%'"></div>
                            </div>
                        </nz-col>
                    </nz-row>
                </ng-container>
            </div>
        </nz-col>
        <nz-col class="padding-10" nzSpan="12">
            <div class="host-item-title">资源数量统计</div>
            <div class="host-item-content" style="height: 500px">
                <!--                <div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div>-->
                <div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div>
            </div>
        </nz-col>
    </nz-row>
    <nz-row [nzGutter]="10">
        <nz-col class="padding-10" nzSpan="12">
            <div class="host-item-title">接口流量排行</div>
            <div class="host-item-table" style="height: 500px">
                <nz-row class="text-center table-title">
                    <nz-col nzSpan="8">资源名称</nz-col>
                    <nz-col nzSpan="8">发送流量</nz-col>
                    <nz-col nzSpan="8">接受流量</nz-col>
                </nz-row>
                <ng-container *ngFor="let flow of flowListNum;">
                    <nz-row class="table-content">
                        <nz-col nzSpan="8">{{flow.name}}</nz-col>
                        <nz-col nzSpan="8">{{flow.send}}</nz-col>
                        <nz-col nzSpan="8">{{flow.receive}}</nz-col>
                    </nz-row>
                </ng-container>
            </div>
        </nz-col>
        <nz-col class="padding-10" nzSpan="12">
            <div class="host-item-title">接口指标排行</div>
            <div class="host-item-table" style="height: 500px">
                <nz-row class="text-center table-title">
                    <nz-col nzSpan="8">资源名称</nz-col>
                    <nz-col nzSpan="16">发送利用率</nz-col>
                </nz-row>
                <ng-container *ngFor="let flow of flowListPre">
                    <nz-row class="table-content">
                        <nz-col nzSpan="8">{{flow.name}}</nz-col>
                        <nz-col nzSpan="16">
                            <div class="width-host">
                                <div class="space" [style.width]="flow.useRate *100 + '%'"></div>
                            </div>
                        </nz-col>
                    </nz-row>
                </ng-container>
            </div>
        </nz-col>
    </nz-row>
    <nz-row [nzGutter]="10">
        <nz-col class="padding-10" nzSpan="24">
            <div class="host-item-title">网络拓扑图</div>
            <div class="time-group" style="top: 18px;">
                <nz-select style="width: 200px;" nzPlaceHolder="选择拓扑图" [(ngModel)]="topoId"
                           (ngModelChange)="getDetail($event)">
                    <ng-container *ngFor="let item of dataSet">
                        <nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
                    </ng-container>
                </nz-select>
            </div>
            <div class="host-item-content">
                <smart-topology-view #smartTopologyView></smart-topology-view>
            </div>
        </nz-col>
    </nz-row>
</div>