Skip to content

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

2019.1.12

parent 5cca4a59
Hide whitespace changes
Inline Side-by-side
Showing with 208 additions and 67 deletions
src/main/webapp/app/netTopology/flow-trend/flow-trend.component.html
View file @ 4a988a1f
......@@ -13,6 +13,8 @@
</nz-breadcrumb>
</div>
<div nz-col nzSpan="8" class="text-right">
<button *ngIf="echartType == 'history'" (click)="changeEchartType('now')" nz-button nzType="default">实时数据</button>
<button *ngIf="echartType == 'now'" (click)="changeEchartType('history')" nz-button nzType="default">趋势数据</button>
<button (click)="ngOnInit()" nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
<smart-full-screen></smart-full-screen>
</div>
......@@ -62,7 +64,12 @@
</div>
</div>
<nz-spin [nzSpinning]="isLoading">
<div echarts [options]="chartOption" (chartInit)="onEchartInit($event)" style="height: 400px;width: 100%"></div>
<ng-container *ngIf="echartType == 'now'">
<div echarts [options]="nowChartOption" (chartInit)="onEchartInit($event)" style="height: 400px;width: 100%"></div>
</ng-container>
<ng-container *ngIf="echartType == 'history'">
<div echarts [options]="chartOption"style="height: 400px;width: 100%"></div>
</ng-container>
</nz-spin>
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
<nz-tab nzTitle="接收流量排行">
......
src/main/webapp/app/netTopology/flow-trend/flow-trend.component.ts
View file @ 4a988a1f
......@@ -22,7 +22,8 @@ export class FlowTrendComponent implements OnInit, OnDestroy {
startTime: '',
endTime: ''
};
echartObj;
echartType = 'history';
echartObj; //echart对象
//in
inList = [];
......@@ -42,11 +43,16 @@ export class FlowTrendComponent implements OnInit, OnDestroy {
timeBegin;
timeEnd;
//图表
//历史图表
chartOption;
inEchartData;
outEchartData;
//实时图表
nowChartOption;
inNowEchartData = [];
outNowEchartData = [];
time_;
constructor(private topologySer: TopologyService, private overAllSer: OverAllService,
......@@ -77,6 +83,11 @@ export class FlowTrendComponent implements OnInit, OnDestroy {
);
}
//切换图表类型
changeEchartType(type){
this.echartType = type;
}
//查询主机
onchange() {
const data = {
......@@ -92,10 +103,10 @@ export class FlowTrendComponent implements OnInit, OnDestroy {
if (this.hostList) {
this.obj.hostid = this.hostList[0].hostid + '';
this.getEcharts(null);
// this.time_ = thisset
this.setNowEchart();
this.time_ = setInterval(() => {
this.findByTime();
}, 1000);
}, 6000);
} else {
this.message.warning('当前资源组无资源');
}
......@@ -104,28 +115,114 @@ export class FlowTrendComponent implements OnInit, OnDestroy {
);
}
setNowEchart(){
let itemStyle = {
normal: {},
emphasis: {
barBorderWidth: 1,
shadowBlur: 10,
shadowOffsetX: 0,
shadowOffsetY: 0,
shadowColor: 'rgba(0,0,0,0.5)'
}
};
this.nowChartOption = {
title: {
text: '进出口流量实时趋势图',
left: 'center',
},
backgroundColor: '#eee',
tooltip: {
// trigger: 'axis',
formatter: (params) => {
if(params.data){
let res = params.seriesName;
res += '<br/>时间：' + params.name;
let Mbps = 1000 * 1000;
let kbps = 1000;
let size = Math.abs(params.data);
if (size / Mbps > 1) {
res += '<br/>流量：' + (size / Mbps).toFixed(2) + 'Mbps';
} else if (size / kbps > 1) {
res += '<br/>流量：' + (size / kbps).toFixed(2) + 'kbps';
} else {
res += '<br/>流量：' + (size) + 'bbps';
}
return res;
}
}
},
xAxis: {
data: this.inNowEchartData.map(e => {
let date = this.datePipe.transform(e.clock, 'yyyy-MM-dd HH:mm');
return date;
}),
name: '时间',
},
dataZoom: [{
startValue: this.obj.startTime
}, {
type: 'inside'
}],
yAxis: {
inverse: true,
splitArea: {show: false},
type: 'value',
axisLabel: { //Y轴数据
formatter: function(value) {
return Math.abs(value) / 10000 + ' kbps'; //负数取绝对值变正数
},
textStyle: {
color: '#666'
}
},
},
grid: {
left: 100
},
series: [
{
name: '进口流量',
type: 'line',
stack: 'one',
itemStyle: itemStyle,
data: this.inNowEchartData.map(e => {
return e.avg;
})
},
{
name: '出口流量',
type: 'line',
stack: 'one',
itemStyle: itemStyle,
data: this.outNowEchartData.map(e => {
return -e.avg;
})
}
]
};
}
//实时流量数据
findByTime() {
this.topologySer.findByTime(this.obj.hostid).subscribe(
(res) => {
if (res.errCode == 10000) {
console.log('有值');
let nowTime = new Date().getTime() + 500;
const inData = {
clock:this.datePipe.transform(nowTime,"yyyy-MM-dd HH:mm"),
avg:res.data.in
avg:(res.data.in)
};
this.inEchartData.push(inData);
this.inNowEchartData.push(inData);
const outData = {
clock:this.datePipe.transform(nowTime,"yyyy-MM-dd HH:mm"),
avg:res.data.out
avg:(res.data.out)
};
this.outEchartData.push(outData);
this.outNowEchartData.push(outData);
this.flashEcharts();
} else {
this.message.warning(res.errMsg);
clearInterval(this.time_);
console.log('停止');
}
}
);
......@@ -143,34 +240,35 @@ export class FlowTrendComponent implements OnInit, OnDestroy {
shadowColor: 'rgba(0,0,0,0.5)'
}
};
this.echartObj.setOption({
this.nowChartOption = {
title: {
text: '进出口流量峰值趋势图',
text: '进出口流量实时趋势图',
left: 'center',
},
backgroundColor: '#eee',
tooltip: {
// trigger: 'axis',
formatter: (params) => {
let res = params.seriesName;
res += '<br/>时间：' + params.name;
let Mbps = 1000 * 1000;
let kbps = 1000;
let size = Math.abs(params.data);
if (size / Mbps > 1) {
res += '<br/>流量：' + (size / Mbps).toFixed(2) + 'Mbps';
} else if (size / kbps > 1) {
res += '<br/>流量：' + (size / kbps).toFixed(2) + 'kbps';
} else {
res += '<br/>流量：' + (size) + 'bbps';
if(params.data){
let res = params.seriesName;
res += '<br/>时间：' + params.name;
let Mbps = 1000 * 1000;
let kbps = 1000;
let size = Math.abs(params.data);
if (size / Mbps > 1) {
res += '<br/>流量：' + (size / Mbps).toFixed(2) + 'Mbps';
} else if (size / kbps > 1) {
res += '<br/>流量：' + (size / kbps).toFixed(2) + 'kbps';
} else {
res += '<br/>流量：' + (size) + 'bbps';
}
return res;
}
return res;
}
},
xAxis: {
data: this.inEchartData.map(e => {
data: this.inNowEchartData.map(e => {
let date = this.datePipe.transform(e.clock, 'yyyy-MM-dd HH:mm');
return date;
}),
......@@ -197,33 +295,32 @@ export class FlowTrendComponent implements OnInit, OnDestroy {
grid: {
left: 100
},
series: [
{
name: '进口流量',
type: 'line',
stack: 'one',
itemStyle: itemStyle,
data: this.inEchartData.map(e => {
return e.avg;
})
},
{
// name: '出口流量',
type: 'line',
stack: 'one',
itemStyle: itemStyle,
data: this.outEchartData.map(e => {
return -e.avg;
})
}
]
})
series: [
{
name: '进口流量',
type: 'line',
stack: 'one',
itemStyle: itemStyle,
data: this.inNowEchartData.map(e => {
return e.avg;
})
},
{
name: '出口流量',
type: 'line',
stack: 'one',
itemStyle: itemStyle,
data: this.outNowEchartData.map(e => {
return -e.avg;
})
}
]
};
}
//页面离开
ngOnDestroy() {
//销毁定时任务
console.log('销毁定时任务');
clearInterval(this.time_);
}
......@@ -243,7 +340,13 @@ export class FlowTrendComponent implements OnInit, OnDestroy {
(res) => {
if (res.errCode == 10000) {
if (res.data.length > 0) {
this.inEchartData = res.data;
this.inEchartData = res.data.map(e=>{
const a = {
clock:this.datePipe.transform( e.clock,"yyyy-MM-dd HH:mm" ),
avg:e.avg
}
return a;
});
} else {
this.message.warning('图表暂无数据');
this.isLoading = false;
......@@ -252,7 +355,13 @@ export class FlowTrendComponent implements OnInit, OnDestroy {
this.topologySer.findTrendData(data).subscribe(
(res) => {
if (res.data.length > 0) {
this.outEchartData = res.data;
this.outEchartData = res.data.map(e=>{
const d = {
clock:this.datePipe.transform( e.clock,"yyyy-MM-dd HH:mm" ),
avg:e.avg
}
return d;
});
this.setEacharts();
} else {
this.message.warning('图表暂无数据');
......
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.html
View file @ 4a988a1f
......@@ -39,6 +39,13 @@
<span (click)="addCheck()">添加监测点</span>
<span (click)="showAddImg()">添加图片</span>
<span onClick="editor.utils.deleteSelectedNodes()">移除</span>
<nz-select style="width: 200px;" nzPlaceHolder="选择线条" [(ngModel)]="lineType" (ngModelChange)="changeLine($event)">
<nz-option nzLabel="直线" nzValue="1"></nz-option>
<nz-option nzLabel="折线(横向)" nzValue="2"></nz-option>
<nz-option nzLabel="折线(纵向)" nzValue="3"></nz-option>
<nz-option nzLabel="二次折线(横向)" nzValue="4"></nz-option>
<nz-option nzLabel="二次折线(纵向)" nzValue="5"></nz-option>
</nz-select>
<!-- 顶部工具栏 -->
<div class="layui-nav layui-layout-right" style="color: #6097b7" >
......@@ -65,13 +72,6 @@
<canvas class="topology-context" id="topology-canvas" #topologyCanvas style="height: 580px;">
您的浏览器不支持HTML5!
</canvas>
<div class="lineList">
<p onclick="editor.lineType='line'">连线</p>
<p onclick="editor.lineType='foldLine';editor.config.linkDirection='horizontal';">折线(横向)</p>
<p onclick="editor.lineType='foldLine';editor.config.linkDirection='Vertical';">折线(纵向)</p>
<p onclick="editor.lineType='flexLine';editor.config.linkDirection='horizontal';">二次折线(横向)</p>
<p onclick="editor.lineType='flexLine';editor.config.linkDirection='Vertical';">二次折线(纵向)</p>
</div>
<div class="checkList">
<p *ngFor="let item of checkJson;let i = index;">
<span [style.fontSize]="item.fontSize +'px'">{{item.name}}</span><i (click)="deleteCheck(i)" class="minus anticon anticon-minus-circle-o"></i>
......
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.ts
View file @ 4a988a1f
......@@ -91,6 +91,7 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
name;
refreshRete;
options;
lineType; //线条类型
checkJson = [];
fileList: UploadFile[] = [];
......@@ -143,6 +144,36 @@ export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit, OnDe
localStorage.setItem("node",'false');
}
//选择线条类型
changeLine(e){
switch (e) {
case"1":{
editor.lineType='line';
break;
}
case"2":{
editor.lineType='foldLine';
editor.config.linkDirection='horizontal';
break;
}
case"3":{
editor.lineType='foldLine';
editor.config.linkDirection='Vertical';
break;
}
case"4":{
editor.lineType='flexLine';
editor.config.linkDirection='horizontal';
break;
}
case"5":{
editor.lineType='flexLine';
editor.config.linkDirection='Vertical';
break;
}
}
}
//一级分类
getTypeList(){
this.topologySer.findTreeWithWeb().subscribe(
......
src/main/webapp/app/overAll/basic/basic.component.html
View file @ 4a988a1f
......@@ -120,10 +120,6 @@
<td class="cursor">
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<!--<td class="round-tag tag-form" >-->
<!--<nz-tag *ngIf="item.status == 0" [nzColor]="color.green"></nz-tag>-->
<!--<nz-tag *ngIf="item.status == 1" [nzColor]="color.gray"></nz-tag>-->
<!--</td>-->
<td class="default">
<ng-container *ngIf="item.level">
<ng-container *ngIf="item.available == 0">
......@@ -210,7 +206,7 @@
<ng-container *ngIf="item.level">
<td nzShowCheckbox [nzIndeterminate]="indeterminate"
(nzCheckedChange)="selectChecked($event,item)" [(nzChecked)]="item.checked"></td>
<td class="cursor" [nzIndentSize]="item.level*20">
<td class="cursor main-color" [nzIndentSize]="item.level*20">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
</ng-container>
......@@ -230,8 +226,6 @@
<td class="cursor">
<span (click)="goTOInventory(item?.inventory?.id)">{{item?.inventory?.name}}</span>
</td>
<!--<nz-tag *ngIf="item.status == 0" [nzColor]="color.green"></nz-tag>-->
<!--<nz-tag *ngIf="item.status == 1" [nzColor]="color.gray"></nz-tag>-->
<td class="default">
<ng-container *ngIf="item.level">
<ng-container *ngIf="item.available == 0">
......@@ -311,7 +305,7 @@
<tr>
<td nzShowCheckbox [nzIndeterminate]="indeterminate" (nzCheckedChange)="selectChecked($event,item)"
[(nzChecked)]="item.checked"></td>
<td class="cursor">
<td class="cursor main-color">
<span (click)="goDetail(item)">{{item.name}}</span>
</td>
<td class="round-tag tag-form default">
......
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