Skip to content

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

网站监测

parent 3bb0c10b
Hide whitespace changes
Inline Side-by-side
Showing with 198 additions and 24 deletions
src/main/webapp/app/alarm/alarm-list/alarm-list.component.ts
View file @ 9bbf5dfc
...@@ -89,30 +89,30 @@ export class AlarmListComponent implements OnInit { ...@@ -89,30 +89,30 @@ export class AlarmListComponent implements OnInit {
this.obj.startTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 00:00:00'; this.obj.startTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 00:00:00';
this.obj.endTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 23:59:59'; this.obj.endTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 23:59:59';
break; break;
}; }
case'2':{ case'2':{
day1 = nowDate - 1*24*60*60*1000; day1 = nowDate - 1*24*60*60*1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00'; this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 23:59:59'; this.obj.endTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 23:59:59';
break; break;
}; }
case'3':{ case'3':{
day1 = nowDate - 3*24*60*60*1000; day1 = nowDate - 3*24*60*60*1000;
day2 = nowDate - 1*24*60*60*1000; day2 = nowDate - 1*24*60*60*1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00'; this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59'; this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59';
break; break;
}; }
case'4':{ case'4':{
day1 = nowDate - 7*24*60*60*1000; day1 = nowDate - 7*24*60*60*1000;
day2 = nowDate - 1*24*60*60*1000; day2 = nowDate - 1*24*60*60*1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00'; this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59'; this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59';
break; break;
}; }
case'5':{ case'5':{
break; break;
}; }
} }
} }
......
src/main/webapp/app/overAll/network-check/network-detail/network-detail.component.html
View file @ 9bbf5dfc
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
<span>监测数据图表</span> <span>监测数据图表</span>
</div> </div>
<div nz-col [nzSpan]="8"> <div nz-col [nzSpan]="8">
<nz-radio-group style="width: 100%;" [nzButtonStyle]="'solid'"> <nz-radio-group style="width: 100%;" [(ngModel)]="timeType" (ngModelChange)="changeType()" [nzButtonStyle]="'solid'">
<label nz-radio-button nzValue="1">今天</label> <label nz-radio-button nzValue="1">今天</label>
<label nz-radio-button nzValue="2">昨天</label> <label nz-radio-button nzValue="2">昨天</label>
<label nz-radio-button nzValue="3">三天</label> <label nz-radio-button nzValue="3">三天</label>
...@@ -106,23 +106,38 @@ ...@@ -106,23 +106,38 @@
<label nz-radio-button nzValue="5">自定义</label> <label nz-radio-button nzValue="5">自定义</label>
</nz-radio-group> </nz-radio-group>
</div> </div>
</div> <div nz-col nzSpan="8" *ngIf="timeType == '5'">
<div nz-row> <nz-date-picker
<div nz-col [nzSpan]="6"> nzShowTime
[(ngModel)]="obj.startTime"
</div> nzPlaceHolder="开始时间"
<div nz-col [nzSpan]="18"> ></nz-date-picker>
<nz-date-picker
nzShowTime
nzFormat="yyyy-MM-dd HH:mm:ss"
[(ngModel)]="obj.endTime"
nzPlaceHolder="结束时间"
></nz-date-picker>
</div> </div>
</div> </div>
<div nz-row> <nz-spin [nzSpinning]="isSpinning" [nzDelay]="500">
<div nz-col [nzSpan]="6"> <div nz-row class="chart-div">
<div nz-col [nzSpan]="6">
</div>
<div nz-col [nzSpan]="18">
<div echarts [options]="chartSpeed" style="height: 250px;width: 100%;"></div>
</div>
</div> </div>
<div nz-col [nzSpan]="18"> <div nz-row class="chart-div">
<div nz-col [nzSpan]="6">
</div>
<div nz-col [nzSpan]="18">
<div echarts [options]="chartTime" style="height: 250px;width: 100%;"></div>
</div>
</div> </div>
</div> </nz-spin>
</div> </div>
</section> </section>
</nz-tab> </nz-tab>
......
src/main/webapp/app/overAll/network-check/network-detail/network-detail.component.ts
View file @ 9bbf5dfc
...@@ -2,11 +2,20 @@ import {Component, OnInit} from '@angular/core'; ...@@ -2,11 +2,20 @@ import {Component, OnInit} from '@angular/core';
import {OverAllService} from '../../overAll.service'; import {OverAllService} from '../../overAll.service';
import {ActivatedRoute} from '@angular/router'; import {ActivatedRoute} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd'; import {NzMessageService} from 'ng-zorro-antd';
import {DatePipe} from '@angular/common';
@Component({ @Component({
selector: 'smart-network-detail', selector: 'smart-network-detail',
templateUrl: './network-detail.component.html', templateUrl: './network-detail.component.html',
styles: [] styles: [
`
.chart-div{
border: 1px solid #dadada;
margin-top: 20px;
padding: 10px;
}
`
]
}) })
export class NetworkDetailComponent implements OnInit { export class NetworkDetailComponent implements OnInit {
...@@ -16,8 +25,19 @@ export class NetworkDetailComponent implements OnInit { ...@@ -16,8 +25,19 @@ export class NetworkDetailComponent implements OnInit {
nowStatus; nowStatus;
triggerList; triggerList;
chart; chart;
//图表
isSpinning = false;
chartSpeed;
chartTime;
timeType;
obj = {
startTime:'',
endTime:''
}
constructor(private overAllSer: OverAllService, private routerInfo: ActivatedRoute, constructor(private overAllSer: OverAllService, private routerInfo: ActivatedRoute,
private message:NzMessageService) { private message: NzMessageService, private datePipe: DatePipe) {
} }
ngOnInit() { ngOnInit() {
...@@ -50,7 +70,7 @@ export class NetworkDetailComponent implements OnInit { ...@@ -50,7 +70,7 @@ export class NetworkDetailComponent implements OnInit {
getNowStatus() { getNowStatus() {
this.overAllSer.findCurrentState(this.httptestid).subscribe( this.overAllSer.findCurrentState(this.httptestid).subscribe(
(res) => { (res) => {
if(res.errCode == 10000){ if (res.errCode == 10000) {
this.nowStatus = res.data; this.nowStatus = res.data;
} }
} }
...@@ -61,27 +81,166 @@ export class NetworkDetailComponent implements OnInit { ...@@ -61,27 +81,166 @@ export class NetworkDetailComponent implements OnInit {
findTrigger() { findTrigger() {
this.overAllSer.findTrigger(this.httptestid).subscribe( this.overAllSer.findTrigger(this.httptestid).subscribe(
(res) => { (res) => {
if(res.errCode == 10000){ if (res.errCode == 10000) {
this.triggerList = res.data; this.triggerList = res.data;
}else{ } else {
this.message.info(res.errMsg); this.message.info(res.errMsg);
} }
} }
); );
} }
//选择时间
//时间改变
changeType(){
this.isSpinning = true;
const nowDate = new Date().getTime();
let day1,day2;
switch (this.timeType){
case'1':{
this.obj.startTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 00:00:00';
this.obj.endTime = this.datePipe.transform(nowDate,'yyyy-MM-dd') +' 23:59:59';
break;
}
case'2':{
day1 = nowDate - 1*24*60*60*1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'3':{
day1 = nowDate - 3*24*60*60*1000;
day2 = nowDate - 1*24*60*60*1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'4':{
day1 = nowDate - 7*24*60*60*1000;
day2 = nowDate - 1*24*60*60*1000;
this.obj.startTime = this.datePipe.transform(day1,'yyyy-MM-dd') + ' 00:00:00';
this.obj.endTime = this.datePipe.transform(day2,'yyyy-MM-dd') + ' 23:59:59';
break;
}
case'5':{
break;
}
}
this.findChart();
}
//监测图表 //监测图表
findChart() { findChart() {
const data = { const data = {
startTime: '', startTime: this.obj.startTime,
endTime: this.obj.endTime,
limit: '', limit: '',
httptestid: this.httptestid httptestid: this.httptestid
}; };
this.overAllSer.findChart(data).subscribe( this.overAllSer.findChart(data).subscribe(
(res) => { (res) => {
if (res.errCode == 10000) {
const speed = res.data.speed;
const time = res.data.time;
this.setOption(speed, time);
}
} }
); );
} }
//绘制图表
setOption(speed, time) {
this.chartSpeed = {
title: {
text: '速度',
left: '40%',
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
show:false
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: speed[0].data.map(res => {
return res.clockDate;
})
},
yAxis: {
type: 'value'
},
series: speed.map(res1 => {
const number = res1.data.map(res2 => {
return res2.num;
});
const obj = {
name: res1.name,
type: 'line',
stack: '总量',
data: number
};
return obj;
})
};
this.chartTime = {
title: {
text: '响应时间',
left: '40%',
},
tooltip: {
trigger: 'axis'
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {
show:false
}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data:time[0].data.map(res => {
return res.clockDate;
})
},
yAxis: {
type: 'value'
},
series: time.map(res1 => {
const number = res1.data.map(res2 => {
return res2.num;
});
const obj = {
name: res1.name,
type: 'line',
stack: '总量',
data: number
};
return obj;
})
};
this.isSpinning = false;
}
} }
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