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 {
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;
};
}
}
}
......
src/main/webapp/app/overAll/network-check/network-detail/network-detail.component.html
View file @ 9bbf5dfc
......@@ -98,7 +98,7 @@
<span>监测数据图表</span>
</div>
<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="2">昨天</label>
<label nz-radio-button nzValue="3">三天</label>
......@@ -106,23 +106,38 @@
<label nz-radio-button nzValue="5">自定义</label>
</nz-radio-group>
</div>
</div>
<div nz-row>
<div nz-col [nzSpan]="6">
</div>
<div nz-col [nzSpan]="18">
<div nz-col nzSpan="8" *ngIf="timeType == '5'">
<nz-date-picker
nzShowTime
[(ngModel)]="obj.startTime"
nzPlaceHolder="开始时间"
></nz-date-picker>
<nz-date-picker
nzShowTime
nzFormat="yyyy-MM-dd HH:mm:ss"
[(ngModel)]="obj.endTime"
nzPlaceHolder="结束时间"
></nz-date-picker>
</div>
</div>
<div nz-row>
<div nz-col [nzSpan]="6">
<nz-spin [nzSpinning]="isSpinning" [nzDelay]="500">
<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 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>
</nz-spin>
</div>
</section>
</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';
import {OverAllService} from '../../overAll.service';
import {ActivatedRoute} from '@angular/router';
import {NzMessageService} from 'ng-zorro-antd';
import {DatePipe} from '@angular/common';
@Component({
selector: 'smart-network-detail',
templateUrl: './network-detail.component.html',
styles: []
styles: [
`
.chart-div{
border: 1px solid #dadada;
margin-top: 20px;
padding: 10px;
}
`
]
})
export class NetworkDetailComponent implements OnInit {
......@@ -16,8 +25,19 @@ export class NetworkDetailComponent implements OnInit {
nowStatus;
triggerList;
chart;
//图表
isSpinning = false;
chartSpeed;
chartTime;
timeType;
obj = {
startTime:'',
endTime:''
}
constructor(private overAllSer: OverAllService, private routerInfo: ActivatedRoute,
private message:NzMessageService) {
private message: NzMessageService, private datePipe: DatePipe) {
}
ngOnInit() {
......@@ -50,7 +70,7 @@ export class NetworkDetailComponent implements OnInit {
getNowStatus() {
this.overAllSer.findCurrentState(this.httptestid).subscribe(
(res) => {
if(res.errCode == 10000){
if (res.errCode == 10000) {
this.nowStatus = res.data;
}
}
......@@ -61,27 +81,166 @@ export class NetworkDetailComponent implements OnInit {
findTrigger() {
this.overAllSer.findTrigger(this.httptestid).subscribe(
(res) => {
if(res.errCode == 10000){
if (res.errCode == 10000) {
this.triggerList = res.data;
}else{
} else {
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() {
const data = {
startTime: '',
startTime: this.obj.startTime,
endTime: this.obj.endTime,
limit: '',
httptestid: this.httptestid
};
this.overAllSer.findChart(data).subscribe(
(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