<div nz-row class="breadcrumbs">
  <div nz-col nzSpan="16">
    <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="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 class="search-form">
  <div nz-col nzSpan="12">
    <nz-select style="width: 200px;" nzPlaceHolder="选择业务" [(ngModel)]="serviceId" (ngModelChange)="changeService()">
      <ng-container *ngFor="let item of rootList">
        <nz-option [nzLabel]="item.name" [nzValue]="item.serviceid"></nz-option>
      </ng-container>
    </nz-select>
  </div>
</div>
<div class="tabset">
  <div class="releative">
    <div nz-row class="header">
      <div nz-col class="text-center" nzSpan="4">
        <div class="position-center">
          <p class="p1">系统可用性</p>
          <p class="p2">{{analyObj?.available}}</p>
        </div>
      </div>
      <div nz-col nzSpan="7">
        <div  echarts [options]="analyOption" style="height: 250px;width: 100%;"></div>
      </div>
      <div nz-col nzSpan="5">
        <div class="position-center">
          <p class="tag-form">
            <nz-tag class="tag-red" [nzColor]="color.red"></nz-tag>
            严重：{{analyObj?.danger}}个，{{analyObj?.dangerPercent}}
          </p>
          <p class="tag-form">
            <nz-tag class="tag-yellow" [nzColor]="color.yellow"></nz-tag>
            告警：{{analyObj?.alarm}}个，{{analyObj?.alarmPercent}}
          </p>
          <p class="tag-form">
            <nz-tag class="tag-green" [nzColor]="color.green"></nz-tag>
            正常：{{analyObj?.normal}}个，{{analyObj?.normalPercent}}
          </p>
          <p class="tag-form">
            <nz-tag class="tag-gray" [nzColor]="color.gray"></nz-tag>
            未知：{{analyObj?.unknown}}个，{{analyObj?.unknownPercent}}
          </p>
        </div>
      </div>
      <div nz-col class="text-center" nzSpan="4">
        <div class="position-center">
          <p class="p1">系统使用人数</p>
          <p class="p2">{{analyObj?.onlineUser}}</p>
        </div>
      </div>
      <div nz-col class="text-center" nzSpan="4">
<!--        <div class="position-center">-->
<!--          <p class="p1">重要用户在线人数</p>-->
<!--          <p class="p2">{{analyObj?.importantUser}}</p>-->
<!--        </div>-->
      </div>
    </div>
    <nz-tabset  class="tabs-smart" [nzType]="'card'">
      <nz-tab nzTitle="网站监测">
        <div style="min-height: 500px">
          <ng-container *ngIf="noData">
            <div class="img-noData">
              <div class="noData" title="暂无数据"></div>
            </div>
          </ng-container>
          <ng-container *ngIf="!noData">
            <div style="margin: 30px 0;">
              <p>用户数量趋势</p>
              <ng-container *ngIf="!userData">
                <div class="img-noData" style="min-height: 250px">
                  <div class="noData" title="暂无数据"></div>
                </div>
              </ng-container>
              <ng-container *ngIf="userData">
                <div  echarts [options]="chartUser" style="height: 250px;width: 100%;"></div>
              </ng-container>
            </div>
            <div  style="margin: 30px 0;">
              <div nz-row>
                <div nz-col [nzSpan]="3">
                  <span>监测数据图表</span>
                </div>
                <div nz-col [nzSpan]="8">
                  <nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()">
                    <label nz-radio-button nzValue="1">今天</label>
                    <label nz-radio-button nzValue="2">昨天</label>
                    <label nz-radio-button nzValue="3">三天</label>
                    <label nz-radio-button nzValue="4">一周</label>
                    <label nz-radio-button nzValue="99">自定义</label>
                  </nz-radio-group>
                </div>
                <div nz-col nzSpan="8" *ngIf="timeType == '5'">
                  <nz-date-picker nzFormat="yyyy-MM-dd"
                                  [(ngModel)]="obj.startTime"
                                  nzPlaceHolder="开始时间"
                  ></nz-date-picker>
                  <nz-date-picker
                          nzFormat="yyyy-MM-dd"
                          [(ngModel)]="obj.endTime"
                          nzPlaceHolder="结束时间"
                          (ngModelChange)="findChart()"
                  ></nz-date-picker>
                </div>
              </div>
              <div class="spanBorder">
                <span *ngFor="let item of webList" [ngClass]="{'select': this.httptestid == item.httptestid}"  (click)="selectHttp(item)">{{item.name}}</span>
              </div>
              <nz-spin [nzSpinning]="isSpinning" [nzDelay]="500">
                <div nz-row class="chart-div">
                  <div nz-col [nzSpan]="6" >
                    <div #chartSpeedLeft class="chart-left" *ngFor="let item of speed,let i  = index;">
                      <p class="tag-form"> <nz-tag [nzColor]="colorArr[i]"></nz-tag> <span>{{item.name}}</span> </p>
                      <p>平均值   {{item.average}}</p>
                      <p>最大值   {{item.max}}</p>
                      <p>最小值   {{item.min}}</p>
                    </div>
                  </div>
                  <div nz-col [nzSpan]="18">
                    <div  echarts [options]="chartSpeed" style="height: 250px;width: 100%;"></div>
                  </div>
                </div>
                <div nz-row class="chart-div">
                  <div nz-col [nzSpan]="6" >
                    <div #chartTimeLeft class="chart-left" *ngFor="let item of time,let i  = index;">
                      <p class="tag-form"> <nz-tag [nzColor]="colorArr[i]"></nz-tag> <span>{{item.name}}</span> </p>
                      <p>平均值   {{(item.average)}}</p>
                      <p>最大值   {{(item.max)}}</p>
                      <p>最小值   {{(item.min)}}</p>
                    </div>
                  </div>
                  <div nz-col [nzSpan]="18">
                    <div echarts [options]="chartTime" style="height: 250px;width: 100%;"></div>
                  </div>
                </div>
              </nz-spin>
            </div>
          </ng-container>
        </div>
      </nz-tab>
      <nz-tab nzTitle="检测数据 ">
        <nz-table #nzTable [nzData]="triggerList" [nzFrontPagination]="true">
          <thead>
          <tr>
            <th nzWidth="10%">子节点名称</th>
            <th>触发器名称</th>
            <th>状态</th>
            <th>值</th>
            <th nzWidth="25%">阈值</th>
            <th nzWidth="20%">最近更新时间</th>
          </tr>
          </thead>
          <tbody>
          <tr *ngFor="let data of nzTable.data">
            <td>{{data.name}}</td>
            <td>{{data.triggerName}}</td>
            <td>
              <span class="color-green" *ngIf="data.status == 0">正常</span>
              <span class="color-red" *ngIf="data.status == 1">问题</span>
            </td>
            <td>{{data.lastValue}}</td>
            <td>{{data.expression}}</td>
            <td>{{data.lastTime}}</td>
          </tr>
          </tbody>
        </nz-table>
      </nz-tab>
    </nz-tabset>
  </div>
</div>
