Newer
Older
<nz-row>
<nz-col nzSpan="8">
<div class="padding-10" style="height: 30%;">
<p class="host-item-title">关键指标</p>
<div class="host-item-content" style="height:100px">
<nz-row>
<nz-col nzSpan="12">
<p class="text-center margin-bottom-15">cpu利用率</p>
<div class="width-host">
<div class="space" [style.width]="this.hostObj.cpu + '%'"></div>
</div>
</nz-col>
<nz-col nzSpan="12">
<p class="text-center margin-bottom-15" style="color: #b7d1f1;">内存使用率</p>
<div class="width-host">
<div class="space" [style.width]="this.hostObj.used + '%'"></div>
</div>
</nz-col>
</nz-row>
</div>
</div>
<div class="padding-10" style="height: 35%;">
<p class="host-item-title">基本信息</p>
<div class="host-item-content" style="height: 100%;">
<nz-row>
<nz-col nzSpan="8">资源状态：</nz-col>
<nz-col nzSpan="16">{{switch?.waringName}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">名称：</nz-col>
<nz-col nzSpan="16">{{switch?.name}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">IP地址：</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">设备类型：</nz-col>
<nz-col nzSpan="16">交换机</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">资产编号：</nz-col>
<nz-col nzSpan="16">{{switch?.inventory?.inventoryNo || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">负责人：</nz-col>
<nz-col nzSpan="16">{{switch?.inventory?.person || '-'}}</nz-col>
</nz-row>
</div>
</div>
<div class="padding-10" style="height: 35%;">
<p class="host-item-title">指标列表</p>
<div class="host-item-content" style="height: 100%;">
<nz-row>
<nz-col nzSpan="8">CPU利用率(%)：</nz-col>
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
</nz-row>
</div>
</div>
</nz-col>
<nz-col nzSpan="16">
<div class="padding-10" style="height: 50%;position: relative">
<div class="host-item-title">指标趋势</div>
<div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="changeTimeTarget(timeTypeTrend)" [(ngModel)]="trendObj.type">
<ng-container *ngFor="let flow of targetFlow">
<nz-option [nzLabel]="flow.label" [nzValue]="flow.value"></nz-option>
</ng-container>
</nz-select>
<nz-select style="width: 150px;" nzPlaceHolder="选择时间"
(ngModelChange)="changeTimeTarget($event)" [(ngModel)]="timeTypeTrend">
<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" style="height: 300px">
<nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="chartTrendOption" style="height: 300px;width: 100%"></div>
</nz-spin>
</div>
</div>
<div class="padding-10" style="height: 50%;position: relative">
<div class="host-item-title">网卡流量</div>
<div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择接口"
(ngModelChange)="changeTimeFlow(timeTypeFLow)" [(ngModel)]="netWorkdObj.itemName">
<ng-container *ngFor="let interface of interfaceList">
<nz-option [nzLabel]="interface" [nzValue]="interface"></nz-option>
</ng-container>
</nz-select>
<nz-select style="width: 150px;" nzPlaceHolder="选择单位"
(ngModelChange)="changeTimeFlow(timeTypeFLow)" [(ngModel)]="netWorkdObj.unit">
<ng-container *ngFor="let unit of unitList">
<nz-option [nzLabel]="unit.label" [nzValue]="unit.value"></nz-option>
</ng-container>
</nz-select>
<nz-select style="width: 150px;" nzPlaceHolder="选择时间"
(ngModelChange)="changeTimeFlow($event)" [(ngModel)]="timeTypeFLow">
<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" style="height: 300px">
<ng-container *ngIf="noData">
<div class="img-noData" style="min-height: 300px">
<div class="noData" title="暂无数据"></div>
</div>
</ng-container>
<ng-container *ngIf="!noData">
<nz-spin [nzSpinning]="isNetworkLoading">
<div echarts [options]="chartNetworkOption" style="height: 300px;width: 100%"></div>
</nz-spin>
</ng-container>
</div>
</div>
</nz-col>
</nz-row>