Skip to content

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

update

parent 232083c0
Show whitespace changes
Inline Side-by-side
Showing with 1328 additions and 1 deletion
src/main/webapp/app/app.main.module.ts
View file @ 683e2ce7
......@@ -112,6 +112,9 @@ import {SelectTriggerComponent} from './modal/select-trigger/select-trigger.comp
import {WebModalComponent} from './modal/web-modal/web-modal.component';
import {WorkReportComponent} from './business/modal/work-report/work-report.component';
import {SignalComponent} from './shared/signal/signal.component';
import {ServerComponent} from './overAll/modal/server/server.component';
import {DatabaseComponent} from './overAll/modal/database/database.component';
import {SwitchComponent} from './overAll/modal/switch/switch.component';
@NgModule({
imports: [
......@@ -226,6 +229,9 @@ import {SignalComponent} from './shared/signal/signal.component';
WebModalComponent,
WorkReportComponent,
SignalComponent,
ServerComponent,
DatabaseComponent,
SwitchComponent,
],
providers:[
OverAllService,
......
src/main/webapp/app/app.route.ts
View file @ 683e2ce7
......@@ -43,6 +43,9 @@ import {EffectAnalysisComponent} from './business/effect-analysis/effect-analysi
import {LogAnalysisComponent} from './business/log-analysis/log-analysis.component';
import {BConfigComponent} from './business/b-config/b-config.component';
import {SignalComponent} from './shared/signal/signal.component';
import {DatabaseComponent} from './overAll/modal/database/database.component';
import {ServerComponent} from './overAll/modal/server/server.component';
import {SwitchComponent} from './overAll/modal/switch/switch.component';
export const route: Routes = [
{path: '', redirectTo: 'app/main/home', pathMatch: 'prefix'}, //空路由定向
......@@ -93,6 +96,9 @@ export const route: Routes = [
{path: 'effectAnalysis', component: EffectAnalysisComponent, data: {breadcrumb: '效能分析'},},
{path: 'logAnalysis', component: LogAnalysisComponent, data: {breadcrumb: '日志分析'},},
{path: 'bConfig', component: BConfigComponent, data: {breadcrumb: '业务配置'},},
{path: 'database', component: DatabaseComponent, data: {breadcrumb: '数据库'},},
{path: 'server', component: ServerComponent, data: {breadcrumb: '服务器'},},
{path: 'switch', component: SwitchComponent, data: {breadcrumb: '交换机'},},
]
},
]
......
src/main/webapp/app/overAll/modal/database/database.component.html 0 → 100644
View file @ 683e2ce7
<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()">
<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()" [(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>
src/main/webapp/app/overAll/modal/database/database.component.ts 0 → 100644
View file @ 683e2ce7
import {Component, OnInit} from '@angular/core';
import {CommonService} from '../../../shared/common/common.service';
import {ActivatedRoute} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd';
import {OverAllService} from '../../overAll.service';
import {AlarmService} from '../../../alarm/alarm.service';
import {AnalysisService} from '../../../analysis/analysis.service';
@Component({
selector: 'smart-database',
templateUrl: './database.component.html',
styles: []
})
export class DatabaseComponent implements OnInit {
hostId;
charTrendOption;
chartDatabaseOption;
isFlowLoading = false;
isDatabaseLoading = false;
databaseList; //数据库列表
databaseType; // 选择的数据库类型
databaseDetail; //指标列表
eventList; //告警列表
indexDetail; //数据库详情指标
obj = {
groupid: null,
startTime: null,
endTime: null,
priorityName: null,
};
timeTypeFlow = '4';
flowObj = {
startTime: null,
endTime: null
};
timeTypeDatabase = '0';
databaseObj = {
startTime: null,
endTime: null
};
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService,
private alarmSer: AlarmService, private analysisSer: AnalysisService) {
this.routerInfo.queryParams.subscribe(queryParams => {
this.hostId = queryParams.hostId;
this.overAllSer.findDetailed(this.hostId).subscribe(
(res) => {
let data = res.data[0];
}
);
});
}
ngOnInit() {
this.findDatabase();
this.findIndexDetail();
this.eventFind();
this.changeTypeFlow();
this.changeTypeDatabase();
}
//查询所有数据库类型
findDatabase() {
this.overAllSer.findAllDatabaseByHost(this.hostId).subscribe(
(res) => {
if(res.errCode == 10000){
this.databaseList = res.data;
this.databaseType = this.databaseList[0].type;
this.findTarget();
}else{
this.message.error(res.errMsg);
}
}
);
}
//指标列表
findTarget() {
const data = {
'hostid': this.hostId,
'databaseType': this.databaseType
};
this.overAllSer.findDatabaseDetailByHost(data).subscribe(
(res) => {
this.databaseDetail = res.data;
}
);
}
//数据库详情指标
findIndexDetail() {
const data = {
hostid: this.hostId
};
this.overAllSer.findIndexDetail(data).subscribe(
(res) => {
this.indexDetail = res.data;
}
);
}
//当前告警
eventFind() {
const data = {
pageCount: 10,
pageNum: 1,
obj: {
isWaring: 'yes',
hostid: this.hostId
}
};
this.alarmSer.eventFind(data).subscribe(
(res) => {
this.eventList = res.data.data;
}
);
}
changeTypeFlow() {
this.isFlowLoading = true;
this.flowObj = this.commonSer.getTimeByType(this.timeTypeFlow);
this.getAlarmTrend();
}
//告警总数趋势
getAlarmTrend() {
const data = {
hostid: this.hostId,
startTime: this.flowObj.startTime,
endTime: this.flowObj.endTime,
};
this.overAllSer.waringTrendByHost(data).subscribe(
(res) => {
if (res.errCode == 10000) {
const response = res.data;
this.setAlarmTrend(response);
} else {
this.message.error(res.errMsg);
}
this.isFlowLoading = false;
}
);
}
//设置告警趋势echarts图表
setAlarmTrend(data) {
this.charTrendOption = {
tooltip: {
trigger: 'axis',
axisPointer: { // 坐标轴指示器，坐标轴触发有效
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
},
},
legend: {
textStyle: {color: '#ffffff'},
data: ['严重', '告警']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis: [
{
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.map((e) => {
return e.date;
})
}
],
yAxis: [
{
type: 'value',
minInterval: 1,
axisLabel: {
show: true,
interval: 'auto',
formatter: '{value} 个'
},
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
boundaryGap: [0, 0.1],
}
],
series: [
{
name: '严重',
type: 'bar',
stack: '严重',
itemStyle: {
normal: {
color: '#e96545'
}
},
data: data.map(e => {
return e.errorcount;
})
},
{
name: '告警',
type: 'bar',
stack: '告警',
itemStyle: {
normal: {
color: '#eede85'
}
},
data: data.map(e => {
return e.waringcount;
})
}
]
};
}
changeTypeDatabase() {
this.isDatabaseLoading = true;
this.databaseObj = this.commonSer.getTimeByType(this.timeTypeDatabase);
this.databaseChart();
}
//数据库图表
databaseChart() {
const data = {
hostid: this.hostId,
startTime: this.databaseObj.startTime,
endTime: this.databaseObj.endTime,
};
this.overAllSer.findChartData(data).subscribe(
(res) => {
if (res.data.list) {
this.setDatabaseChart(res.data);
}
this.isDatabaseLoading = false;
}
);
}
//设置数据库图表
setDatabaseChart(data) {
let arr = [];
data.databaseType.forEach(e => {
const obj = {
name: e,
stack: '数据库',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#2cfef7'
}
}
},
data: [],
};
data.list.forEach(f => {
obj.data.push(f[e]);
});
arr.push(obj);
});
this.chartDatabaseOption = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.list.map(e => {
return e.time;
})
},
yAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'value'
},
series: arr
};
}
}
src/main/webapp/app/overAll/modal/server/server.component.html 0 → 100644
View file @ 683e2ce7
<div>
<nz-row>
<nz-col nzSpan="12">
<div class="padding-10" style="height: 20%;">
<p class="host-item-title">关键指标</p>
<div class="host-item-content" style="height:100%">
<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 class="padding-10" style="height: 40%;position: relative">
<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="noData">
<div class="img-noData" style="min-height: 400px">
<div class="noData" title="暂无数据"></div>
</div>
</ng-container>
<ng-container *ngIf="hostObj.disk.length > 0">
<nz-spin [nzSpinning]="isDiskLoading">
<div echarts [options]="chartDiskOption" style="height: 150px;width: 100%"></div>
<div class="text-center margin-bottom-10">
<span style="border: 1px solid #d8c5c5;padding: 4px 8px;border-radius: 3px;">{{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 class="padding-10" style="height: 40%;">
<nz-row>
<nz-col class="padding-right-10" nzSpan="12">
<p class="host-item-title">基本信息</p>
<div class="host-item-content" style="height: 300px;">
<nz-row>
<nz-col nzSpan="8">资源状态：</nz-col>
<nz-col nzSpan="16">{{server?.waringName}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">名称：</nz-col>
<nz-col nzSpan="16">{{server?.name}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">IP地址：</nz-col>
<nz-col nzSpan="16">{{server?.ip || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">设备类型：</nz-col>
<nz-col nzSpan="16">{{equipmentType || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">资产编号：</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.no || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">负责人：</nz-col>
<nz-col nzSpan="16">{{server?.inventory?.person || '-'}}</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col class="padding-left-10" nzSpan="12">
<p class="host-item-title">指标列表</p>
<div class="host-item-content" style="height: 300px;">
<nz-row>
<nz-col nzSpan="16">CPU利用率(%)：</nz-col>
<nz-col nzSpan="8">{{hostObj.cpu || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="16">Ping延时(ms)：</nz-col>
<nz-col nzSpan="8">{{hostObj.response || '-'}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="16">内存利用率(%)：</nz-col>
<nz-col nzSpan="8">{{hostObj.used || '-'}}</nz-col>
</nz-row>
<!-- <nz-row>-->
<!-- <nz-col nzSpan="16">CPU个数：</nz-col>-->
<!-- <nz-col nzSpan="8">100</nz-col>-->
<!-- </nz-row>-->
<!-- <nz-row>-->
<!-- <nz-col nzSpan="16">接口数：</nz-col>-->
<!-- <nz-col nzSpan="8">100</nz-col>-->
<!-- </nz-row>-->
</div>
</nz-col>
</nz-row>
</div>
</nz-col>
<nz-col nzSpan="12">
<div class="padding-10" style="height: 50%;position: relative">
<div class="time-group" style="top: 18px;">
<nz-select style="width: 150px;" nzPlaceHolder="选择指标"
(ngModelChange)="changeTrend(trendObj.type)" [(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="选择时间" [(ngModel)]="timeTypeTrend"
(ngModelChange)="changeTrend($event)">
<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-title">
指标趋势
</div>
<div class="host-item-content">
<nz-spin [nzSpinning]="isTrendLoading">
<div echarts [options]="chartTrendOption" style="height:360px;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="选择时间" [(ngModel)]="timeTypeHistory"
(ngModelChange)="changeHistory($event)">
<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">
<nz-spin [nzSpinning]="isHistoryLoading">
<div echarts [options]="chartHistoryOption" style="height: 360px;width: 100%"></div>
</nz-spin>
</div>
</div>
</nz-col>
</nz-row>
</div>
src/main/webapp/app/overAll/modal/server/server.component.ts 0 → 100644
View file @ 683e2ce7
import {Component, OnInit} from '@angular/core';
import {CommonService} from '../../../shared/common/common.service';
import {ActivatedRoute} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd';
import {OverAllService} from '../../overAll.service';
import {HostFlow} from '../../../app.constants';
@Component({
selector: 'smart-server',
templateUrl: './server.component.html',
styles: []
})
export class ServerComponent implements OnInit {
hostId; //主机ID
equipmentType; //主机类型
server;
noData = false;
targetFlow = HostFlow; //主机指标
timeList = [
{'label': '最近一小时', value: '0'},
{'label': '最近一天', value: '2'},
{'label': '最近三天', value: '3'},
{'label': '最近一周', value: '4'},
];
timeTypeTrend = '0';
timeTypeHistory = '0';
isTrendLoading = false;
chartTrendOption;
isHistoryLoading = false;
chartHistoryOption;
trendObj = { //指标趋势
type: 'total_flow',
startTime: '',
endTime: ''
};
historyObj = {
startTime: '',
endTime: ''
};
hostObj = {
disk: [],
used: null,
cpu: null,
losed: null,
response: null
};
isDiskLoading = false;
chartDiskOption;
diskType;
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService,
) {
this.routerInfo.queryParams.subscribe(queryParams => {
this.hostId = queryParams.hostId;
this.equipmentType = queryParams.equipmentType;
});
}
ngOnInit() {
this.getDetail();
this.changeHistory('0');
this.changeTrend('0');
this.getDisk();
}
getDetail() {
const data = {
hostId: this.hostId,
};
this.overAllSer.findDetailed(this.hostId).subscribe(
(res) => {
if(res.errCode == 10000){
this.server = res.data[0];
}else{
this.message.error(res.errMsg);
}
}
);
//内存使用率
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.responseTime;
} 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.diskType = 0;
this.setDiskChart(0);
this.noData = false;
}else {
this.noData = true;
}
}
);
}
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: true
}
},
data: [
{value: data.used, name: '已使用'},
{value: data.total - data.used, name: '未使用'},
]
}
]
};
this.isDiskLoading = false;
}
//获取趋势数据
getTrend() {
const data = {
type: this.trendObj.type,
hostid: this.hostId,
startTime: this.trendObj.startTime,
endTime: this.trendObj.endTime
};
this.overAllSer.findChartByKey(data).subscribe(
(res) => {
this.setTrendChart(res.data);
}
);
}
//设置指标趋势
setTrendChart(data) {
this.chartTrendOption = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.map(e => {
return e.time;
})
},
yAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'value'
},
series: [
{
data: data.map(e => {
return e.val;
}),
type: 'line',
name: '',
}
]
};
this.isTrendLoading = false;
}
//获取历史趋势
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);
}
);
}
//设置指标趋势
setHistoryChart(data) {
this.chartHistoryOption = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.map(e => {
return e.time;
})
},
yAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'value'
},
series: [
{
data: data.map(e => {
return e.val;
}),
type: 'line'
}
]
};
this.isHistoryLoading = false;
}
changeTrend(e) {
this.isTrendLoading = true;
const timeObj = this.commonSer.getTimeByType(e);
this.trendObj.startTime = timeObj.startTime;
this.trendObj.endTime = timeObj.endTime;
this.getTrend();
}
changeHistory(e) {
this.isHistoryLoading = true;
const timeObj = this.commonSer.getTimeByType(e);
this.historyObj.startTime = timeObj.startTime;
this.historyObj.endTime = timeObj.endTime;
this.getHistory();
}
}
src/main/webapp/app/overAll/modal/switch/switch.component.html 0 → 100644
View file @ 683e2ce7
<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-col nzSpan="16">{{switch?.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?.no || '-'}}</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>
<nz-col nzSpan="16">{{hostObj.cpu}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">Ping延时(ms)：</nz-col>
<nz-col nzSpan="16">{{hostObj.response}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">丢包数：</nz-col>
<nz-col nzSpan="16">{{hostObj.losed}}</nz-col>
</nz-row>
<nz-row>
<nz-col nzSpan="8">内存利用率(%)：</nz-col>
<nz-col nzSpan="16">{{hostObj.used}}</nz-col>
</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>
src/main/webapp/app/overAll/modal/switch/switch.component.ts 0 → 100644
View file @ 683e2ce7
import {Component, OnInit} from '@angular/core';
import {CommonService} from '../../../shared/common/common.service';
import {ActivatedRoute} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd';
import {HostFlow, UnitList} from '../../../app.constants';
import {OverAllService} from '../../overAll.service';
import {timer} from 'rxjs/observable/timer';
@Component({
selector: 'smart-switch',
templateUrl: './switch.component.html',
styles: []
})
export class SwitchComponent implements OnInit {
hostId; //主机ID
switch;
targetFlow = HostFlow; //主机指标
timeList = [
{'label': '最近一小时', value: '0'},
{'label': '最近一天', value: '2'},
{'label': '最近三天', value: '3'},
{'label': '最近一周', value: '4'},
];
timeTypeTrend = '0';
timeTypeFLow = '0';
interfaceList = []; //接口数组
unitList = UnitList; // 单位
isNetworkLoading = false;
chartNetworkOption;
isTrendLoading = false;
chartTrendOption;
netWorkdObj = { //网卡图表参数
itemName: null,
unit: 'Mbps',
startTime: '',
endTime: '',
};
noData = false;
trendObj = {
type: 'total_flow',
startTime: '',
endTime: ''
};
hostObj = {
disk: null,
used: null,
cpu: null,
losed: null,
response:null
};
constructor(private commonSer: CommonService, private routerInfo: ActivatedRoute,
private message: NzMessageService, private overAllSer: OverAllService) {
this.routerInfo.queryParams.subscribe(queryParams => {
this.hostId = queryParams.hostId;
this.overAllSer.findDetailed(this.hostId).subscribe(
(res) => {
this.switch = res.data[0];
}
);
});
}
ngOnInit() {
this.overAllSer.findNetworkCard(this.hostId).subscribe(
(res) => {
this.interfaceList = res.data;
if(this.interfaceList && this.interfaceList.length > 0){
this.netWorkdObj.itemName = this.interfaceList[0];
this.changeTimeFlow('0');
this.noData = false;
}else{
this.noData = true;
}
}
);
this.changeTimeTarget('0');
this.getDetail();
}
getDetail() {
const data = {
hostId: this.hostId,
};
//内存使用率
this.overAllSer.used(data).subscribe(
(res) => {
if(res.errCode == 10000){
if (res.data) {
this.hostObj.used = res.data.used;
} else {
this.hostObj.used = 0;
}
}else{
this.message.error(res.errMsg);
}
}
);
//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;
}
}
)
}
//网卡流量
findNetwork() {
const data = {
itemName: this.netWorkdObj.itemName,
hostid: this.hostId,
startTime: this.netWorkdObj.startTime,
endTime: this.netWorkdObj.endTime,
unit: this.netWorkdObj.unit
};
this.overAllSer.findNetworkFlow(data).subscribe(
(res) => {
this.setNetWorkChart(res.data);
}
);
}
//设置网卡流量
setNetWorkChart(data) {
let arr = [];
const objSend = {
name: '发送速率',
stack: '网卡流量',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#2cfef7'
}
}
},
data: [],
};
const objReceived = {
name: '接受速率',
stack: '网卡流量',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#b6d0f0'
}
}
},
data: [],
};
data.forEach(e => {
objSend.data.push(e.sentValue);
objReceived.data.push(e.receivedValue);
});
arr.push(objSend, objReceived);
this.chartNetworkOption = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.map(e => {
return e.time;
})
},
yAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'value'
},
series: arr,
};
this.isNetworkLoading = false;
}
//指标趋势
findChart() {
const data = {
type: this.trendObj.type,
hostid: this.hostId,
startTime: this.trendObj.startTime,
endTime: this.trendObj.endTime
};
this.overAllSer.findChartByKey(data).subscribe(
(res) => {
this.setTrendChart(res.data);
}
);
}
//设置指标趋势
setTrendChart(data) {
this.chartTrendOption = {
xAxis: {
type: 'category',
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
data: data.map(e => {
return e.time;
})
},
yAxis: {
axisLine: {
lineStyle: {
color: '#b6d0f0',
}
},
type: 'value'
},
series:[{
name: '指标趋势',
type: 'line',
itemStyle: {
normal: {
lineStyle: {
color: '#b6d0f0'
}
}
},
data: data.map(e => {
return e.val;
})
},]
};
this.isTrendLoading= false;
}
/**********指标趋势**************/
changeTimeTarget(e) {
this.isTrendLoading = true;
timer(500).subscribe(
(res)=>{
const timeObj = this.commonSer.getTimeByType(e);
this.trendObj.startTime = timeObj.startTime;
this.trendObj.endTime = timeObj.endTime;
this.findChart();
}
)
}
/**********指标趋势**************/
/**********网卡流量**************/
changeTimeFlow(e) {
this.isNetworkLoading = true;
timer(500).subscribe(
(res)=>{
const timeObj = this.commonSer.getTimeByType(e);
this.netWorkdObj.startTime = timeObj.startTime;
this.netWorkdObj.endTime = timeObj.endTime;
this.findNetwork();
}
)
}
/**********网卡流量**************/
}
src/main/webapp/app/system/modal/user/user.component.ts
View file @ 683e2ce7
......@@ -36,7 +36,7 @@ export class UserComponent implements OnInit {
initForm(){
this.validateForm = this.fb.group({
name:[null,[Validators.required,Validators.minLength(6),Validators.maxLength(16)]],
name:[null,[Validators.required,Validators.minLength(2),Validators.maxLength(16)]],
phoneNumber:[null,[Validators.required,Validators.minLength(11),Validators.maxLength(11)]],
gender:[null,[Validators.required]],
email:[null,],
......
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