Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div>
<nz-row>
<nz-col nzSpan="12">
<div>
<nz-row>
<nz-col class="padding-10" nzSpan="12">
<p class="host-item-title">数据库</p>
<nz-row class="padding-15 host-item-content">
<ng-container *ngFor="let database of databaseList">
<nz-col nzSpan="8" class="text-center">
<img src="../../../../content/images/database.png">
</nz-col>
<nz-col nzSpan="16">
<p><span class="database-name">{{database.name}}</span></p>
<nz-row class="margin-top-8">
<nz-col class="gray-font-color text-right" nzSpan="8">大小：</nz-col>
<nz-col class="blue-font-color"
nzSpan="16">{{database.storageSize}}</nz-col>
<nz-col class="gray-font-color text-right" nzSpan="8">版本：</nz-col>
<nz-col class="blue-font-color" nzSpan="16">{{database.version}}</nz-col>
</nz-row>
</nz-col>
</ng-container>
</nz-row>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<p class="host-item-title">指标列表</p>
<div class="host-item-content">
<nz-row>
<ng-container *ngFor="let item of databaseDetail">
<nz-col nzSpan="14">{{item.name}}：</nz-col>
<nz-col nzSpan="10">{{item.val}}</nz-col>
</ng-container>
</nz-row>
</div>
</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-title">
告警总数趋势
</div>
<div class="host-item-content">
<nz-radio-group class="time-group" [(ngModel)]="timeTypeFlow" (ngModelChange)="changeTypeFlow($event)">
<label nz-radio-button nzValue="3">三天</label>
<label nz-radio-button nzValue="4">一周</label>
<label nz-radio-button nzValue="5">一月</label>
</nz-radio-group>
<nz-spin [nzSpinning]="isFlowLoading">
<div echarts [options]="charTrendOption" style="height: 400px;width: 100%"></div>
</nz-spin>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-content">
<nz-row>
<nz-col nzSpan="4" style="position: relative;height: 380px;">
<div class="dataChart">
<p>MTTR</p>
<p class="text-right">{{indexDetail?.mttr + 'h'}}</p>
<p>MTBF</p>
<p class="text-right">{{indexDetail?.mtbf + 'h'}}</p>
<p>MTTF</p>
<p class="text-right">{{indexDetail?.mttf + 'h'}}</p>
<p>最近一次宕机时间</p>
<p class="text-right">{{indexDetail?.downTime}}</p>
<p>宕机次数</p>
<p class="text-right">{{indexDetail?.downCount}}</p>
</div>
</nz-col>
<nz-col nzSpan="20" class="padding-left-10" style="position: relative;">
<div>
<nz-select class="time-group" nzPlaceHolder="选择分组"
(ngModelChange)="changeTypeDatabase($event)" [(ngModel)]="timeTypeDatabase">
<nz-option nzLabel="最近一小时" nzValue="0"></nz-option>
<nz-option nzLabel="最近一天" nzValue="2"></nz-option>
<nz-option nzLabel="最近三天" nzValue="3"></nz-option>
<nz-option nzLabel="最近一周" nzValue="4"></nz-option>
</nz-select>
</div>
<nz-spin [nzSpinning]="isDatabaseLoading">
<div echarts [options]="chartDatabaseOption" style="height: 360px;width: 100%"></div>
</nz-spin>
</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col class="padding-10" nzSpan="12">
<div class="host-item-table" style="height: 400px">
<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 event of eventList;">
<nz-row class="table-content">
<nz-col nzSpan="8">{{event.itemName}}</nz-col>
<nz-col nzSpan="8">{{event.description}}</nz-col>
<nz-col nzSpan="8">{{event.clock}}</nz-col>
</nz-row>
</ng-container>
</div>
</nz-col>
</nz-row>
</div>