b-overview.component.html

<div nz-row class="breadcrumbs">
  <div nz-col nzSpan="12">
    <nz-breadcrumb class="padding-8-0">
      <nz-breadcrumb-item>
        首页
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        业务监管
      </nz-breadcrumb-item>
      <nz-breadcrumb-item>
        业务概览
      </nz-breadcrumb-item>
    </nz-breadcrumb>
  </div>
  <div nz-col nzSpan="12" 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 class="search-form tag-form">
  <div nz-col nzSpan="12">
    <span>业务概览：
      <span style="margin-right: 8px" > <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
         正常
      </span>
      <span  style="margin-right: 8px"> <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
         告警
      </span>
      <span style="margin-right: 8px"> <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
          严重
      </span>
    </span>
  </div>
</div>

<div nz-row>
  <ng-container *ngFor="let item of list;let i = index;">
    <div nz-col nzSpan="12" class="follow">
      <div class="follow-container">
        <div nz-row class="follow-title">
          <div nz-col nzSpan="12">
            <p>{{item.name}}</p>
          </div>
          <div nz-col nzSpan="12" class="spanBorder">
            <span (click)="reportDetail(item)">运行报告</span>
            <span routerLink="../bTopology">业务拓扑</span>
            <span routerLink="../effectAnalysis">效能分析</span>
          </div>
        </div>
        <div nz-row>
          <div nz-col nzSpan="12" class="height-150 releative" style="border-right: 1px solid #ddd">
            <div nz-col nzSpan="12" class="height-150" echarts [options]="item.optionLeft"></div>
            <div nz-col nzSpan="12" class="height-150" echarts [options]="item.optionRight"></div>
          </div>
          <div nz-col nzSpan="12" class="chart-font">
            <p>
              <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
              {{item.danger}}
            </p>
            <p>
              <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
              {{item.alarm}}
            </p>
            <p>
              <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
              {{item.normal}}
            </p>
          </div>
        </div>

      </div>
    </div>
  </ng-container>
</div>

<!--运行报告-->
<smart-work-report #smartWorkReport></smart-work-report>