Newer
Older
<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 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 class="position-center">
<p class="p1">系统当前使用人数</p>
<p class="p2">{{analyObj?.onlineUser}}</p>
</div>
<div class="position-center">
<p class="p1">重要用户在线人数</p>
<p class="p2">{{analyObj?.importantUser}}</p>
</div>
<div style="min-height: 500px">
<ng-container *ngIf="noData">
<div class="img-noData">
<div class="noData" title="暂无数据"></div>
<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 nz-col [nzSpan]="8">
<nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()" [nzButtonStyle]="'solid'">
<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="5">自定义</label>
</nz-radio-group>
<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>
<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 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>
<nz-table #nzTable [nzData]="triggerList" [nzFrontPagination]="true">
</tr>
</thead>
<tbody>
<tr *ngFor="let data of nzTable.data">
<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>