info-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>