Skip to content

S
smart
Commit f91ff121 authored by wangqinghua's avatar wangqinghua
Browse files
Options

服务器

parent 783a7ebc
Show whitespace changes
Inline Side-by-side
Showing with 301 additions and 72 deletions
src/main/webapp/app/component/topology-view/topology-view.component.html
View file @ f91ff121
<div #topologyBody id="topology-body" class="topology-context"> <div #topologyBody id="topology-body" class="topology-context" style="height: 400px;">
<nz-spin [nzSpinning]="isLoading"> <nz-spin [nzSpinning]="isLoading">
<canvas class="topology-context" id="topology-canvas" width="1190" height="520" #topologyCanvas> <canvas class="topology-context" id="topology-canvas" width="1190" height="520" #topologyCanvas>
您的浏览器不支持HTML5! 您的浏览器不支持HTML5!
......
src/main/webapp/app/component/topology-view/topology-view.component.ts
View file @ f91ff121
...@@ -6,7 +6,12 @@ declare let editor: any; ...@@ -6,7 +6,12 @@ declare let editor: any;
@Component({ @Component({
selector: 'smart-topology-view', selector: 'smart-topology-view',
templateUrl: './topology-view.component.html', templateUrl: './topology-view.component.html',
styles: [] styles: [
`
.topology-context {
background: rgba(0, 0, 0, 0.2);
}`
]
}) })
export class TopologyViewComponent implements OnInit, AfterViewInit { export class TopologyViewComponent implements OnInit, AfterViewInit {
@ViewChild('topologyCanvas') topologyCanvas: ElementRef; @ViewChild('topologyCanvas') topologyCanvas: ElementRef;
......
src/main/webapp/app/home/home.component.html
View file @ f91ff121
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
</ng-container> </ng-container>
</nz-select> </nz-select>
</div> </div>
<div class="host-item-content" > <div class="host-item-content">
<nz-spin [nzSpinning]="isTrendLoading"> <nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="charTrendOption" style="height: 360px;width: 100%"></div> <div echarts [options]="charTrendOption" style="height: 360px;width: 100%"></div>
</nz-spin> </nz-spin>
...@@ -110,8 +110,16 @@ ...@@ -110,8 +110,16 @@
<nz-row class="table-content"> <nz-row class="table-content">
<nz-col class="text-center" nzSpan="3">状态</nz-col> <nz-col class="text-center" nzSpan="3">状态</nz-col>
<nz-col nzSpan="7">{{flow.name}}</nz-col> <nz-col nzSpan="7">{{flow.name}}</nz-col>
<nz-col nzSpan="7">{{flow.cpuUseRate}}</nz-col> <nz-col nzSpan="7">
<nz-col nzSpan="7">{{flow.vmUseRate}}</nz-col> <div class="width-host">
<div class="space" [style.width]="flow.cpuUseRate + '%'"></div>
</div>
</nz-col>
<nz-col nzSpan="7">
<div class="width-host">
<div class="space" [style.width]="flow.vmUseRate + '%'"></div>
</div>
</nz-col>
</nz-row> </nz-row>
</ng-container> </ng-container>
</div> </div>
...@@ -119,7 +127,7 @@ ...@@ -119,7 +127,7 @@
<nz-col class="padding-10" nzSpan="12"> <nz-col class="padding-10" nzSpan="12">
<div class="host-item-title">资源数量统计</div> <div class="host-item-title">资源数量统计</div>
<div class="host-item-content" style="height: 500px"> <div class="host-item-content" style="height: 500px">
<div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div> <!-- <div echarts [options]="rightOneChart" style="height: 250px;width: 100%"></div>-->
<div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div> <div echarts [options]="rightTwoChart" style="height: 250px;width: 100%"></div>
</div> </div>
</nz-col> </nz-col>
...@@ -145,14 +153,16 @@ ...@@ -145,14 +153,16 @@
<div class="host-item-table" style="height: 500px"> <div class="host-item-table" style="height: 500px">
<nz-row class="text-center table-title"> <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-col nzSpan="16">发送利用率</nz-col>
<nz-col nzSpan="8">接受利用率</nz-col>
</nz-row> </nz-row>
<ng-container *ngFor="let flow of flowListPre"> <ng-container *ngFor="let flow of flowListPre">
<nz-row class="table-content"> <nz-row class="table-content">
<nz-col nzSpan="8">{{flow.name}}</nz-col> <nz-col nzSpan="8">{{flow.name}}</nz-col>
<nz-col nzSpan="8">{{flow.useRate}}</nz-col> <nz-col nzSpan="16">
<nz-col nzSpan="8">{{flow.useRate}}</nz-col> <div class="width-host">
<div class="space" [style.width]="flow.useRate *100 + '%'"></div>
</div>
</nz-col>
</nz-row> </nz-row>
</ng-container> </ng-container>
</div> </div>
...@@ -160,7 +170,8 @@ ...@@ -160,7 +170,8 @@
<nz-col class="padding-10" nzSpan="16"> <nz-col class="padding-10" nzSpan="16">
<div class="host-item-title">网络拓扑图</div> <div class="host-item-title">网络拓扑图</div>
<div class="time-group" style="top: 18px;"> <div class="time-group" style="top: 18px;">
<nz-select style="width: 200px;" nzPlaceHolder="选择拓扑图" [(ngModel)]="topoId" (ngModelChange)="getDetail($event)"> <nz-select style="width: 200px;" nzPlaceHolder="选择拓扑图" [(ngModel)]="topoId"
(ngModelChange)="getDetail($event)">
<ng-container *ngFor="let item of dataSet"> <ng-container *ngFor="let item of dataSet">
<nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option> <nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
</ng-container> </ng-container>
...@@ -172,7 +183,7 @@ ...@@ -172,7 +183,7 @@
</nz-col> </nz-col>
<nz-col class="padding-10" nzSpan="8"> <nz-col class="padding-10" nzSpan="8">
<div class="host-item-title">业务系统安全运行天数</div> <div class="host-item-title">业务系统安全运行天数</div>
<div class="host-item-table" style="height: 500px"> <div class="host-item-table" style="height: 400px">
<nz-row class="text-center table-title"> <nz-row class="text-center table-title">
<nz-col nzSpan="12">系统名称</nz-col> <nz-col nzSpan="12">系统名称</nz-col>
<nz-col nzSpan="12">运行天数</nz-col> <nz-col nzSpan="12">运行天数</nz-col>
......
src/main/webapp/app/home/home.component.ts
View file @ f91ff121
...@@ -11,6 +11,7 @@ import {Router} from '@angular/router'; ...@@ -11,6 +11,7 @@ import {Router} from '@angular/router';
import {CommonService} from '../shared/common/common.service'; import {CommonService} from '../shared/common/common.service';
import {AnalysisService} from '../analysis/analysis.service'; import {AnalysisService} from '../analysis/analysis.service';
import {TopologyViewComponent} from '../component/topology-view/topology-view.component'; import {TopologyViewComponent} from '../component/topology-view/topology-view.component';
import {TopologyService} from '../netTopology/topology.service';
@Component({ @Component({
selector: 'jhi-home', selector: 'jhi-home',
...@@ -95,7 +96,7 @@ export class HomeComponent implements OnInit, AfterViewInit { ...@@ -95,7 +96,7 @@ export class HomeComponent implements OnInit, AfterViewInit {
private overAllSer: OverAllService, private message: NzMessageService, private overAllSer: OverAllService, private message: NzMessageService,
private alarmSer: AlarmService, private renderer: Renderer2, private alarmSer: AlarmService, private renderer: Renderer2,
private layoutSer: LayoutService, private layoutSer: LayoutService,
private principal: Principal, private principal: Principal,private topologySer:TopologyService,
private eventManager: JhiEventManager, private analysisSer: AnalysisService, private eventManager: JhiEventManager, private analysisSer: AnalysisService,
private router: Router, private commonSer: CommonService, private router: Router, private commonSer: CommonService,
) { ) {
...@@ -112,6 +113,8 @@ export class HomeComponent implements OnInit, AfterViewInit { ...@@ -112,6 +113,8 @@ export class HomeComponent implements OnInit, AfterViewInit {
this.countOrde(); this.countOrde();
this.findSafeRunDay(); this.findSafeRunDay();
this.getList();
} }
ngAfterViewInit() { ngAfterViewInit() {
...@@ -131,6 +134,19 @@ export class HomeComponent implements OnInit, AfterViewInit { ...@@ -131,6 +134,19 @@ export class HomeComponent implements OnInit, AfterViewInit {
); );
} }
//获取拓扑图列表
getList() {
this.topologySer.findAll().subscribe(
(res) => {
if (res.errCode == 10000) {
this.dataSet = res.data;
} else {
this.message.create('error', res.errMsg);
}
}
);
}
//主机组中统计 //主机组中统计
countGroupItem() { countGroupItem() {
this.getAlarmTrend(); this.getAlarmTrend();
......
src/main/webapp/app/overAll/modal/database/database.component.html
View file @ f91ff121
<nz-spin [nzSpinning]="isLoading"> <div>
<div>
<nz-row> <nz-row>
<nz-col nzSpan="12"> <nz-col nzSpan="12">
<div> <div>
...@@ -37,9 +36,6 @@ ...@@ -37,9 +36,6 @@
</nz-col> </nz-col>
</nz-row> </nz-row>
</div> </div>
<div>
</div>
</nz-col> </nz-col>
<nz-col class="padding-10" nzSpan="12"> <nz-col class="padding-10" nzSpan="12">
<div class="host-item-title"> <div class="host-item-title">
...@@ -107,5 +103,4 @@ ...@@ -107,5 +103,4 @@
</div> </div>
</nz-col> </nz-col>
</nz-row> </nz-row>
</div> </div>
</nz-spin>
src/main/webapp/app/overAll/modal/server/server.component.html
View file @ f91ff121
...@@ -20,8 +20,38 @@ ...@@ -20,8 +20,38 @@
</nz-row> </nz-row>
</div> </div>
</div> </div>
<div class="padding-10" style="height: 40%;"> <div class="padding-10" style="height: 40%;position: relative">
<p class="host-item-title">分区</p> <p class="host-item-title">分区</p>
<div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="setDiskChart($event)" [(ngModel)]="diskType">
<ng-container *ngFor="let disk of hostObj.disk;let i = index;">
<nz-option [nzLabel]="disk.name" [nzValue]="i"></nz-option>
</ng-container>
</nz-select>
</div>
<div class="host-item-content" style="height: 300px;">
<ng-container *ngIf="hostObj.disk.length > 0">
<nz-spin [nzSpinning]="isDiskLoading">
<div echarts [options]="chartDiskOption" style="height: 360px;width: 100%"></div>
<div>
<span>{{hostObj.disk[diskType].name}}</span>
</div>
<nz-row>
<nz-col nzSpan="12">总大小</nz-col>
<nz-col nzSpan="12">{{hostObj.disk[diskType].total}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="12">已用大小</nz-col>
<nz-col nzSpan="12">{{hostObj.disk[diskType].use}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="12">剩余容量</nz-col>
<nz-col nzSpan="12">{{hostObj.disk[diskType].total - hostObj.disk[diskType].use}}</nz-col>
</nz-row>
</nz-spin>
</ng-container>
</div>
</div> </div>
<div class="padding-10" style="height: 40%;"> <div class="padding-10" style="height: 40%;">
<nz-row> <nz-row>
...@@ -38,19 +68,19 @@ ...@@ -38,19 +68,19 @@
</nz-row> </nz-row>
<nz-row> <nz-row>
<nz-col nzSpan="8">IP地址：</nz-col> <nz-col nzSpan="8">IP地址：</nz-col>
<nz-col nzSpan="16">{{server?.ip}}</nz-col> <nz-col nzSpan="16">{{server?.ip || '-'}}</nz-col>
</nz-row> </nz-row>
<nz-row> <nz-row>
<nz-col nzSpan="8">设备类型：</nz-col> <nz-col nzSpan="8">设备类型：</nz-col>
<nz-col nzSpan="16">{{equipmentType}}</nz-col> <nz-col nzSpan="16">{{equipmentType || '-'}}</nz-col>
</nz-row> </nz-row>
<nz-row> <nz-row>
<nz-col nzSpan="8">资产编号：</nz-col> <nz-col nzSpan="8">资产编号：</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.no}}</nz-col> <nz-col nzSpan="16">{{server?.inventory?.no || '-'}}</nz-col>
</nz-row> </nz-row>
<nz-row> <nz-row>
<nz-col nzSpan="8">负责人：</nz-col> <nz-col nzSpan="8">负责人：</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.person}}</nz-col> <nz-col nzSpan="16">{{server?.inventory?.person || '-'}}</nz-col>
</nz-row> </nz-row>
</div> </div>
</nz-col> </nz-col>
...@@ -88,7 +118,7 @@ ...@@ -88,7 +118,7 @@
<div class="padding-10" style="height: 50%;position: relative"> <div class="padding-10" style="height: 50%;position: relative">
<div class="time-group" style="top: 18px;"> <div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标" <nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="changeTrend(null)" [(ngModel)]="trendObj.type"> (ngModelChange)="changeTrend(trendObj.type)" [(ngModel)]="trendObj.type">
<ng-container *ngFor="let flow of targetFlow"> <ng-container *ngFor="let flow of targetFlow">
<nz-option [nzLabel]="flow.label" [nzValue]="flow.value"></nz-option> <nz-option [nzLabel]="flow.label" [nzValue]="flow.value"></nz-option>
</ng-container> </ng-container>
...@@ -103,10 +133,12 @@ ...@@ -103,10 +133,12 @@
<div class="host-item-title"> <div class="host-item-title">
指标趋势 指标趋势
</div> </div>
<div class="host-item-content">
<nz-spin [nzSpinning]="isTrendLoading"> <nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div> <div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div>
</nz-spin> </nz-spin>
</div> </div>
</div>
<div class="padding-10" style="height: 50%;position: relative"> <div class="padding-10" style="height: 50%;position: relative">
<div class="host-item-title"> <div class="host-item-title">
可用性历史趋势 可用性历史趋势
...@@ -119,10 +151,12 @@ ...@@ -119,10 +151,12 @@
</ng-container> </ng-container>
</nz-select> </nz-select>
</div> </div>
<div class="host-item-content">
<nz-spin [nzSpinning]="isHistoryLoading"> <nz-spin [nzSpinning]="isHistoryLoading">
<div echarts [options]="chartHistoryOption" style="height: 360px;width: 100%"></div> <div echarts [options]="chartHistoryOption" style="height: 360px;width: 100%"></div>
</nz-spin> </nz-spin>
</div> </div>
</div>
</nz-col> </nz-col>
</nz-row> </nz-row>
</div> </div>
src/main/webapp/app/overAll/modal/server/server.component.ts
View file @ f91ff121
...@@ -24,8 +24,8 @@ export class ServerComponent implements OnInit { ...@@ -24,8 +24,8 @@ export class ServerComponent implements OnInit {
{'label': '最近三天', value: '3'}, {'label': '最近三天', value: '3'},
{'label': '最近一周', value: '4'}, {'label': '最近一周', value: '4'},
]; ];
timeTypeTrend; timeTypeTrend = '0';
timeTypeHistory; timeTypeHistory = '0';
isTrendLoading = false; isTrendLoading = false;
chartTrendOption; chartTrendOption;
...@@ -45,12 +45,17 @@ export class ServerComponent implements OnInit { ...@@ -45,12 +45,17 @@ export class ServerComponent implements OnInit {
}; };
hostObj = { hostObj = {
disk: null, disk: [],
used: null, used: null,
cpu: null, cpu: null,
losed: null, losed: null,
response: null
}; };
isDiskLoading = false;
chartDiskOption;
diskType;
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute, constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService, private message: NzMessageService, private overAllSer: OverAllService,
private hostCom: HostComponent) { private hostCom: HostComponent) {
...@@ -62,7 +67,9 @@ export class ServerComponent implements OnInit { ...@@ -62,7 +67,9 @@ export class ServerComponent implements OnInit {
ngOnInit() { ngOnInit() {
this.getDetail(); this.getDetail();
this.getTrend(); this.changeHistory('0');
this.changeTrend('0');
this.getDisk();
} }
getDetail() { getDetail() {
...@@ -74,17 +81,11 @@ export class ServerComponent implements OnInit { ...@@ -74,17 +81,11 @@ export class ServerComponent implements OnInit {
this.server = res.data[0]; this.server = res.data[0];
} }
); );
//磁盘使用率
this.overAllSer.disks(data).subscribe(
(res) => {
this.hostObj.disk = res.data;
}
);
//内存使用率 //内存使用率
this.overAllSer.used(data).subscribe( this.overAllSer.used(data).subscribe(
(res) => { (res) => {
if (res.data) { if (res.data) {
this.hostObj.used = res.data; this.hostObj.used = res.data.used;
} else { } else {
this.hostObj.used = 0; this.hostObj.used = 0;
} }
...@@ -94,7 +95,7 @@ export class ServerComponent implements OnInit { ...@@ -94,7 +95,7 @@ export class ServerComponent implements OnInit {
this.overAllSer.cupUsed(data).subscribe( this.overAllSer.cupUsed(data).subscribe(
(res) => { (res) => {
if (res.data) { if (res.data) {
this.hostObj.cpu = res.data; this.hostObj.cpu = res.data.cpuUsed;
} else { } else {
this.hostObj.cpu = 0; this.hostObj.cpu = 0;
} }
...@@ -110,6 +111,73 @@ export class ServerComponent implements OnInit { ...@@ -110,6 +111,73 @@ export class ServerComponent implements OnInit {
} }
} }
); );
//响应时间
this.overAllSer.responseTime(this.hostId).subscribe(
(res) => {
if (res.data) {
this.hostObj.response = res.data.response;
} else {
this.hostObj.response = 0;
}
}
);
}
// 分区
getDisk() {
const data = {
hostId: this.hostId,
};
this.isDiskLoading = true;
//磁盘使用率
this.overAllSer.disks(data).subscribe(
(res) => {
this.hostObj.disk = res.data.disks;
if (this.hostObj.disk.length > 0) {
this.setDiskChart(0);
}
}
);
}
setDiskChart(index) {
const data = this.hostObj.disk[index];
this.chartDiskOption = {
tooltip: {
trigger: 'item',
formatter: '{a} <br/>{b}: {c} ({d}%)'
},
series: [
{
type: 'pie',
radius: ['50%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
emphasis: {
show: true,
textStyle: {
fontSize: '30',
fontWeight: 'bold'
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{value: data.used, name: '已使用'},
{value: data.total - data.used, name: '未使用'},
]
}
]
};
} }
//获取趋势数据 //获取趋势数据
...@@ -149,16 +217,32 @@ export class ServerComponent implements OnInit { ...@@ -149,16 +217,32 @@ export class ServerComponent implements OnInit {
}, },
type: 'value' type: 'value'
}, },
series: data.map(e => { series: [
return e.value; {
}) data: data.map(e => {
return e.val;
}),
type: 'line',
name: '',
}
]
}; };
this.isTrendLoading = false; this.isTrendLoading = false;
} }
//获取历史趋势 //获取历史趋势
getHistory() { getHistory() {
const data = {
type: 'icmpping',
hostid: this.hostId,
startTime: this.historyObj.startTime,
endTime: this.historyObj.endTime
};
this.overAllSer.findChartByKey(data).subscribe(
(res) => {
this.setHistoryChart(res.data);
}
);
} }
//设置指标趋势 //设置指标趋势
...@@ -183,14 +267,19 @@ export class ServerComponent implements OnInit { ...@@ -183,14 +267,19 @@ export class ServerComponent implements OnInit {
}, },
type: 'value' type: 'value'
}, },
series: data.map(e => { series: [
return e.value; {
}) data: data.map(e => {
return e.val;
}),
type: 'line'
}
]
}; };
this.isHistoryLoading = false; this.isHistoryLoading = false;
} }
changeTrend(e){ changeTrend(e) {
this.isTrendLoading = true; this.isTrendLoading = true;
const timeObj = this.commonSer.getTimeByType(e); const timeObj = this.commonSer.getTimeByType(e);
this.trendObj.startTime = timeObj.startTime; this.trendObj.startTime = timeObj.startTime;
...@@ -198,7 +287,7 @@ export class ServerComponent implements OnInit { ...@@ -198,7 +287,7 @@ export class ServerComponent implements OnInit {
this.getTrend(); this.getTrend();
} }
changeHistory(e){ changeHistory(e) {
this.isHistoryLoading = true; this.isHistoryLoading = true;
const timeObj = this.commonSer.getTimeByType(e); const timeObj = this.commonSer.getTimeByType(e);
this.historyObj.startTime = timeObj.startTime; this.historyObj.startTime = timeObj.startTime;
......
src/main/webapp/app/overAll/modal/switch/switch.component.html
View file @ f91ff121
...@@ -2,8 +2,21 @@ ...@@ -2,8 +2,21 @@
<nz-col nzSpan="8"> <nz-col nzSpan="8">
<div class="padding-10" style="height: 30%;"> <div class="padding-10" style="height: 30%;">
<p class="host-item-title">关键指标</p> <p class="host-item-title">关键指标</p>
<div class="host-item-content" style="height: 100%;"> <div class="host-item-content" style="height:100px">
<nz-row>
<nz-col nzSpan="12">
<p style="text-align: center">cpu利用率</p>
<div class="width-host">
<div class="space" [style.width]="this.hostObj.cpu + '%'"></div>
</div>
</nz-col>
<nz-col nzSpan="12">
<p style="text-align: center;color: #b7d1f1;">内存使用率</p>
<div class="width-host">
<div class="space" [style.width]="this.hostObj.used + '%'"></div>
</div>
</nz-col>
</nz-row>
</div> </div>
</div> </div>
<div class="padding-10" style="height: 35%;"> <div class="padding-10" style="height: 35%;">
...@@ -12,21 +25,26 @@ ...@@ -12,21 +25,26 @@
<nz-row> <nz-row>
<nz-col nzSpan="8">资源状态：</nz-col> <nz-col nzSpan="8">资源状态：</nz-col>
<nz-col nzSpan="16">{{switch?.waringName}}</nz-col> <nz-col nzSpan="16">{{switch?.waringName}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">名称：</nz-col> <nz-col nzSpan="8">名称：</nz-col>
<nz-col nzSpan="16">{{switch?.name}}</nz-col> <nz-col nzSpan="16">{{switch?.name}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">IP地址：</nz-col> <nz-col nzSpan="8">IP地址：</nz-col>
<nz-col nzSpan="16">{{switch?.ip}}</nz-col> <nz-col nzSpan="16">{{switch?.ip || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">设备类型：</nz-col> <nz-col nzSpan="8">设备类型：</nz-col>
<nz-col nzSpan="16">交换机</nz-col> <nz-col nzSpan="16">交换机</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">资产编号：</nz-col> <nz-col nzSpan="8">资产编号：</nz-col>
<nz-col nzSpan="16">{{switch?.inventory?.no}}</nz-col> <nz-col nzSpan="16">{{switch?.inventory?.no || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">负责人：</nz-col> <nz-col nzSpan="8">负责人：</nz-col>
<nz-col nzSpan="16">{{switch?.inventory?.person}}</nz-col> <nz-col nzSpan="16">{{switch?.inventory?.person || '-'}}</nz-col>
</nz-row> </nz-row>
</div> </div>
</div> </div>
...@@ -35,19 +53,19 @@ ...@@ -35,19 +53,19 @@
<div class="host-item-content" style="height: 100%;"> <div class="host-item-content" style="height: 100%;">
<nz-row> <nz-row>
<nz-col nzSpan="8">CPU利用率(%)：</nz-col> <nz-col nzSpan="8">CPU利用率(%)：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">{{hostObj.cpu}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">Ping延时(ms)：</nz-col> <nz-col nzSpan="8">Ping延时(ms)：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">{{hostObj.response}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">丢包数：</nz-col> <nz-col nzSpan="8">丢包数：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">{{hostObj.losed}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">内存利用率(%)：</nz-col> <nz-col nzSpan="8">内存利用率(%)：</nz-col>
<nz-col nzSpan="16">100</nz-col> <nz-col nzSpan="16">{{hostObj.used}}</nz-col>
<nz-col nzSpan="8">总流速(Kbps)：</nz-col>
<nz-col nzSpan="16">100</nz-col>
</nz-row> </nz-row>
</div> </div>
</div> </div>
...@@ -57,7 +75,7 @@ ...@@ -57,7 +75,7 @@
<div class="host-item-title">指标趋势</div> <div class="host-item-title">指标趋势</div>
<div class="time-group" style="top: 18px;"> <div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标" <nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="changeTimeTarget(null)" [(ngModel)]="trendObj.type"> (ngModelChange)="changeTimeTarget(timeTypeTrend)" [(ngModel)]="trendObj.type">
<ng-container *ngFor="let flow of targetFlow"> <ng-container *ngFor="let flow of targetFlow">
<nz-option [nzLabel]="flow.label" [nzValue]="flow.value"></nz-option> <nz-option [nzLabel]="flow.label" [nzValue]="flow.value"></nz-option>
</ng-container> </ng-container>
...@@ -69,37 +87,40 @@ ...@@ -69,37 +87,40 @@
</ng-container> </ng-container>
</nz-select> </nz-select>
</div> </div>
<div class="host-item-content" style="height: 300px">
<nz-spin [nzSpinning]="isTrendLoading"> <nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div> <div echarts [options]="chartTrendOption" style="height: 360px;width: 100%"></div>
</nz-spin> </nz-spin>
</div> </div>
</div>
<div class="padding-10" style="height: 50%;position: relative"> <div class="padding-10" style="height: 50%;position: relative">
<div class="host-item-title">网卡流量</div> <div class="host-item-title">网卡流量</div>
<div class="time-group" style="top: 18px;"> <div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择接口" <nz-select style="width: 150px;" nzPlaceHolder="选择接口"
(ngModelChange)="changeTimeFlow(null)" [(ngModel)]="netWorkdObj.itemName"> (ngModelChange)="changeTimeFlow(timeTypeFLow)" [(ngModel)]="netWorkdObj.itemName">
<ng-container *ngFor="let interface of interfaceList"> <ng-container *ngFor="let interface of interfaceList">
<nz-option [nzLabel]="interface" [nzValue]="interface"></nz-option> <nz-option [nzLabel]="interface" [nzValue]="interface"></nz-option>
</ng-container> </ng-container>
</nz-select> </nz-select>
<nz-select style="width: 150px;" nzPlaceHolder="选择单位" <nz-select style="width: 150px;" nzPlaceHolder="选择单位"
(ngModelChange)="changeTimeFlow(null)" [(ngModel)]="netWorkdObj.unit"> (ngModelChange)="changeTimeFlow(timeTypeFLow)" [(ngModel)]="netWorkdObj.unit">
<ng-container *ngFor="let unit of unitList"> <ng-container *ngFor="let unit of unitList">
<nz-option [nzLabel]="unit.label" [nzValue]="unit.value"></nz-option> <nz-option [nzLabel]="unit.label" [nzValue]="unit.value"></nz-option>
</ng-container> </ng-container>
</nz-select> </nz-select>
<nz-select style="width: 150px;" nzPlaceHolder="选择时间" <nz-select style="width: 150px;" nzPlaceHolder="选择时间"
(ngModelChange)="changeTimeFlow(null)" [(ngModel)]="timeTypeFLow"> (ngModelChange)="changeTimeFlow($event)" [(ngModel)]="timeTypeFLow">
<ng-container *ngFor="let time of timeList"> <ng-container *ngFor="let time of timeList">
<nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option> <nz-option [nzLabel]="time.label" [nzValue]="time.value"></nz-option>
</ng-container> </ng-container>
</nz-select> </nz-select>
</div> </div>
<div class="host-item-content" style="height: 300px">
<nz-spin [nzSpinning]="isNetworkLoading"> <nz-spin [nzSpinning]="isNetworkLoading">
<div echarts [options]="chartNetworkOption" style="height: 360px;width: 100%"></div> <div echarts [options]="chartNetworkOption" style="height: 360px;width: 100%"></div>
</nz-spin> </nz-spin>
</div> </div>
</div>
</nz-col> </nz-col>
</nz-row> </nz-row>
src/main/webapp/app/overAll/modal/switch/switch.component.ts
View file @ f91ff121
...@@ -32,6 +32,7 @@ export class SwitchComponent implements OnInit { ...@@ -32,6 +32,7 @@ export class SwitchComponent implements OnInit {
isNetworkLoading = false; isNetworkLoading = false;
chartNetworkOption; chartNetworkOption;
isTrendLoading = false; isTrendLoading = false;
chartTrendOption; chartTrendOption;
...@@ -48,6 +49,14 @@ export class SwitchComponent implements OnInit { ...@@ -48,6 +49,14 @@ export class SwitchComponent implements OnInit {
endTime: '' endTime: ''
}; };
hostObj = {
disk: null,
used: null,
cpu: null,
losed: null,
response:null
};
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute, constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService) { private message: NzMessageService, private overAllSer: OverAllService) {
this.routerInfo.queryParams.subscribe(queryParams => { this.routerInfo.queryParams.subscribe(queryParams => {
...@@ -64,11 +73,60 @@ export class SwitchComponent implements OnInit { ...@@ -64,11 +73,60 @@ export class SwitchComponent implements OnInit {
this.overAllSer.findNetworkCard(this.hostId).subscribe( this.overAllSer.findNetworkCard(this.hostId).subscribe(
(res) => { (res) => {
this.interfaceList = res.data; this.interfaceList = res.data;
if(this.interfaceList && this.interfaceList.length > 0){
this.netWorkdObj.itemName = this.interfaceList[0]; this.netWorkdObj.itemName = this.interfaceList[0];
this.changeTimeFlow('0'); this.changeTimeFlow('0');
} }
}
); );
this.changeTimeTarget('0'); this.changeTimeTarget('0');
this.getDetail();
}
getDetail() {
const data = {
hostId: this.hostId,
};
//内存使用率
this.overAllSer.used(data).subscribe(
(res) => {
if (res.data) {
this.hostObj.used = res.data.used;
} else {
this.hostObj.used = 0;
}
}
);
//cpu使用率
this.overAllSer.cupUsed(data).subscribe(
(res) => {
if (res.data) {
this.hostObj.cpu = res.data.cpuUsed;
} else {
this.hostObj.cpu = 0;
}
}
);
//丢包率
this.overAllSer.losed(this.hostId).subscribe(
(res) => {
if (res.data) {
this.hostObj.losed = res.data.losed;
} else {
this.hostObj.losed = 0;
}
}
);
//响应时间
this.overAllSer.responseTime(this.hostId).subscribe(
(res)=>{
if (res.data) {
this.hostObj.response = res.data.response;
} else {
this.hostObj.response = 0;
}
}
)
} }
//网卡流量 //网卡流量
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment