Skip to content

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

update

parent acceae52
Hide whitespace changes
Inline Side-by-side
Showing with 274 additions and 147 deletions
src/main/webapp/app/modal/alarm-modal/alarm-modal.component.ts
View file @ aa2dc27f
...@@ -10,9 +10,10 @@ import {OverAllService} from '../../overAll/overAll.service'; ...@@ -10,9 +10,10 @@ import {OverAllService} from '../../overAll/overAll.service';
styles: [ styles: [
` `
.tree-div { .tree-div {
border: 1px solid #999; border: 1px solid #dadada;
max-height: 200px; height: 200px;
overflow: auto overflow: auto;
margin-top: 10px;
} }
` `
] ]
......
src/main/webapp/app/netTopology/flow-trend/flow-trend.component.html
View file @ aa2dc27f
<div nz-row class="breadcrumbs">
<div id="mynetwork" style="width:600px;height: 200px;" #siteConfigNetwork></div> <div nz-col nzSpan="16">
<nz-breadcrumb class="padding-8-0">
<nz-breadcrumb-item>
首页
</nz-breadcrumb-item>
<nz-breadcrumb-item>
<a>网络拓扑</a>
</nz-breadcrumb-item>
<nz-breadcrumb-item>
流量趋势
</nz-breadcrumb-item>
</nz-breadcrumb>
</div>
<div nz-col nzSpan="8" class="text-right">
<button nz-button nzType="primary"><i class="anticon anticon-search"></i></button>
<button nz-button nzType="primary"><i class="anticon anticon-sync"></i></button>
<button nz-button nzType="primary"><i class="anticon anticon-arrows-alt"></i></button>
</div>
</div>
<div nz-row [nzGutter]="4" class="search-form">
<div nz-col nzSpan="3">
<nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择分组" [(ngModel)]="obj.groupid" (ngModelChange)="getList($event)">
<ng-container *ngFor="let item of groupList">
<nz-option nzLabel="{{item.name}}" nzValue="{{item.groupid}}"></nz-option>
</ng-container>
</nz-select>
</div>
<div nz-col nzSpan="3">
<nz-select style="width: 100%;" nzShowSearch nzAllowClear nzPlaceHolder="选择告资源" [(ngModel)]="obj.hostid" (ngModelChange)="getListIO($event)">
<ng-container *ngFor="let item of hostList;">
<nz-option nzLabel="{{item.name}}" nzValue="{{item.hostid}}"></nz-option>
</ng-container>
</nz-select>
</div>
<!--<div nz-col nzSpan="7">-->
<!--<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>-->
<!--<label nz-radio-button nzValue="4">一周</label>-->
<!--<label nz-radio-button nzValue="5">自定义</label>-->
<!--</nz-radio-group>-->
<!--</div>-->
<!--<div nz-col nzSpan="8" *ngIf="timeType == '5'">-->
<!--<nz-date-picker-->
<!--nzShowTime-->
<!--[(ngModel)]="obj.time_from"-->
<!--nzPlaceHolder="开始时间"-->
<!--&gt;</nz-date-picker>-->
<!--<nz-date-picker-->
<!--nzShowTime-->
<!--nzFormat="yyyy-MM-dd HH:mm:ss"-->
<!--[(ngModel)]="obj.time_till"-->
<!--nzPlaceHolder="结束时间"-->
<!--&gt;</nz-date-picker>-->
<!--</div>-->
</div>
<nz-tabset [nzTabPosition]="'top'" [nzType]="'card'">
<nz-tab nzTitle="接收流量排行">
<nz-table #nzTable [nzData]="inList" [nzFrontPagination]="false" [nzTotal]="inTotalNum" [nzPageIndex]="inPageNum" [nzPageSize]="inPageCount" (nzPageIndexChange)="getInList()">
<thead>
<tr>
<th nzWidth="20%">监测点名称</th>
<th>最大值(kb/s)</th>
<th>最小值(kb/s)</th>
<th>平均值(kb/s)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of inList">
<td>{{data.itemName}}</td>
<td>{{data.max}}</td>
<td>{{data.min}}</td>
<td>{{data.avg}}</td>
</tr>
</tbody>
</nz-table>
</nz-tab>
<nz-tab nzTitle="发送流量排行">
<nz-table #nzTable [nzData]="outList" [nzFrontPagination]="false" [nzTotal]="outTotalNum" [nzPageIndex]="outPageNum" [nzPageSize]="outPageCount" (nzPageIndexChange)="getOutList()">
<thead>
<tr>
<th nzWidth="20%">监测点名称</th>
<th>最大值(kb/s)</th>
<th>最小值(kb/s)</th>
<th>平均值(kb/s)</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let data of outList">
<td>{{data.itemName}}</td>
<td>{{data.max}}</td>
<td>{{data.min}}</td>
<td>{{data.avg}}</td>
</tr>
</tbody>
</nz-table>
</nz-tab>
</nz-tabset>
src/main/webapp/app/netTopology/flow-trend/flow-trend.component.ts
View file @ aa2dc27f
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
declare var vis:any; import {TopologyService} from '../topology.service';
import {OverAllService} from '../../overAll/overAll.service';
import {NzMessageService} from 'ng-zorro-antd';
import {pageSize} from '../../app.constants';
import {DatePipe} from '@angular/common';
declare var vis: any;
@Component({ @Component({
selector: 'smart-flow-trend', selector: 'smart-flow-trend',
templateUrl: './flow-trend.component.html', templateUrl: './flow-trend.component.html',
styles: [] styles: []
}) })
export class FlowTrendComponent implements OnInit { export class FlowTrendComponent implements OnInit {
@ViewChild('siteConfigNetwork') networkContainer:ElementRef; groupList;
@ViewChild("pop") popOver: any; hostList;
public network: any; obj = {
groupid:null,
hostid: null,
startTime: '',
endTime: ''
};
//in
inList = [];
inPageNum = 1;
inPageCount = pageSize;
inTotalNum;
//out
outList = [];
outPageNum = 1;
outPageCount = pageSize;
outTotalNum;
constructor(private topologySer: TopologyService, private overAllSer: OverAllService,
private message: NzMessageService,private dataPipe:DatePipe) {
}
ngOnInit() {
this.getGroup();
const today = new Date().getTime();
this.obj.startTime = this.dataPipe.transform(today,"yyyy-MM-dd") + " 00:00:00";
this.obj.endTime = this.dataPipe.transform(today,"yyyy-MM-dd") + " 23:59:59";
}
//获取分组
getGroup() {
this.overAllSer.getgroups({}).subscribe(
(res) => {
if (res.errCode == 10000) {
this.groupList = res.data;
}
}
);
}
constructor() { } //查询主机
onchange(e) {
const data = {
'groupids': [e],
'hostExtend': {
'superiorHostid': null
}
};
this.overAllSer.findDetail(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.hostList = res.data;
}
}
);
}
ngOnInit() { getEcharts() {
const data = {
itemid: '',
endTime: this.obj.endTime,
startTime: this.obj.startTime
};
this.topologySer.findTrendData(data).subscribe(
(res) => {
const treeData = this.getTreeData(); }
this.loadVisTree(treeData); );
} }
loadVisTree(treedata) { //获取流量
getList(e) {
this.onchange(e);
this.getInList();
this.getOutList();
}
getListIO(){
this.getInList();
this.getOutList();
} }
getTreeData(){ //进口流量
const nodes =[ getInList() {
{id: 1, label: 'Node 1', title: 'I am node 1!'}, const data = {
{id: 2, label: 'Node 2', title: 'I am node 2!'}, type: 'in',
{id: 3, label: 'Node 3'}, pageNum: '1',
{id: 4, label: 'Node 4'}, pageCount: '10',
{id: 5, label: 'Node 5'} hostid: this.obj.hostid,
]; startTime: this.obj.startTime,
endTime: this.obj.endTime,
groupid:this.obj.groupid
};
this.topologySer.findTrend(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.inList = res.data;
} else {
this.message.warning(res.errMsg);
}
}
);
}
const edges = [ //出口流量
{from: 1, to: 3}, getOutList() {
{from: 1, to: 2}, const data = {
{from: 2, to: 4}, type: 'out',
{from: 2, to: 5} pageNum: '1',
]; pageCount: '10',
const treeData = { hostid: this.obj.hostid,
nodes: nodes, startTime: this.obj.startTime,
edges: edges endTime: this.obj.endTime,
groupid:this.obj.groupid
}; };
return treeData; this.topologySer.findTrend(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.outList = res.data;
} else {
this.message.warning(res.errMsg);
}
}
);
} }
} }
src/main/webapp/app/netTopology/model/device/device.component.ts
View file @ aa2dc27f
...@@ -77,7 +77,6 @@ export class DeviceComponent implements OnInit { ...@@ -77,7 +77,6 @@ export class DeviceComponent implements OnInit {
//获取下级 //获取下级
mouseAction(name: string, event: NzFormatEmitEvent) { mouseAction(name: string, event: NzFormatEmitEvent) {
console.log(event);
let type; let type;
if(event.node.level == 0){ if(event.node.level == 0){
type = "host"; //主机 type = "host"; //主机
...@@ -93,7 +92,6 @@ export class DeviceComponent implements OnInit { ...@@ -93,7 +92,6 @@ export class DeviceComponent implements OnInit {
this.topologySer.findTree(data).subscribe( this.topologySer.findTree(data).subscribe(
(res) => { (res) => {
if (res.data) { if (res.data) {
console.log(res.data);
const dataSet = res.data; const dataSet = res.data;
dataSet.forEach(res => { dataSet.forEach(res => {
res.title = res.name; res.title = res.name;
...@@ -115,7 +113,6 @@ export class DeviceComponent implements OnInit { ...@@ -115,7 +113,6 @@ export class DeviceComponent implements OnInit {
//选择树节点 //选择树节点
selectCheckTree(event: NzFormatEmitEvent) { selectCheckTree(event: NzFormatEmitEvent) {
console.log(event);
if (event.node.isChecked) { if (event.node.isChecked) {
if(event.node.level == 1){ if(event.node.level == 1){
this.selectTreeList.hostIds.push(event.node.origin.id); //主机 this.selectTreeList.hostIds.push(event.node.origin.id); //主机
......
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.html
View file @ aa2dc27f
...@@ -26,7 +26,7 @@ ...@@ -26,7 +26,7 @@
<nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option> <nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
</ng-container> </ng-container>
</nz-select> </nz-select>
<span (click)="edit()">编辑</span> <!--<span (click)="edit()">编辑</span>-->
</div> </div>
<div nz-col nzSpan="12" class="text-right"> <div nz-col nzSpan="12" class="text-right">
<button nz-button (click)="addTopo()" nzType="default"><i class="anticon anticon-plus"></i>添加</button> <button nz-button (click)="addTopo()" nzType="default"><i class="anticon anticon-plus"></i>添加</button>
...@@ -51,7 +51,7 @@ ...@@ -51,7 +51,7 @@
onClick="editor.utils.showInCenter()">居中显示</span> onClick="editor.utils.showInCenter()">居中显示</span>
<span aria-hidden="true" title="预览" <span aria-hidden="true" title="预览"
onClick="editor.utils.showPic()">预览</span> onClick="editor.utils.showPic()">预览</span>
<span aria-hidden="true" title="保存" (click)="save()">保存</span> <span aria-hidden="true" title="保存" (click)="update()">保存</span>
<span aria-hidden="true" title="清空" <span aria-hidden="true" title="清空"
onClick="editor.utils.clearTopology()">清空</span> onClick="editor.utils.clearTopology()">清空</span>
<span aria-hidden="true" title="放大" <span aria-hidden="true" title="放大"
...@@ -298,7 +298,6 @@ ...@@ -298,7 +298,6 @@
style="height: 580px;"> style="height: 580px;">
您的浏览器不支持HTML5! 您的浏览器不支持HTML5!
</canvas> </canvas>
<span class="tips">{{topoType}}</span>
<div class="checkList"> <div class="checkList">
<p *ngFor="let item of checkJson"> <p *ngFor="let item of checkJson">
<span [style.fontSize]="item.fontSize +'px'">{{item.name}}</span> <span [style.fontSize]="item.fontSize +'px'">{{item.name}}</span>
......
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.ts
View file @ aa2dc27f
...@@ -55,7 +55,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit { ...@@ -55,7 +55,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
image; image;
topoId; topoId;
name; name;
topoType = '只读模式';
checkJson = []; checkJson = [];
fileList: UploadFile[] = []; fileList: UploadFile[] = [];
...@@ -81,16 +80,10 @@ export class NeTopologyComponent implements OnInit, AfterViewInit { ...@@ -81,16 +80,10 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
this.smartTopology.showAddMOodal(); this.smartTopology.showAddMOodal();
} }
edit(){
this.topoType = '编辑模式';
this.message.info('编辑模式');
editor.utils.editTopology();
}
//编辑拓扑图 //编辑拓扑图
editTopo() { editTopo() {
if(!this.topoId){ if(!this.topoId){
this.message.info("请选择需要编辑的拓扑图"); this.message.warning("请选择需要编辑的拓扑图");
return false; return false;
} }
this.smartTopology.showEditModal(this.topoId); this.smartTopology.showEditModal(this.topoId);
...@@ -98,18 +91,26 @@ export class NeTopologyComponent implements OnInit, AfterViewInit { ...@@ -98,18 +91,26 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
//添加监测点 //添加监测点
addCheck(){ addCheck(){
if(!this.topoId){
this.message.warning("请选择需要编辑的拓扑图");
return false;
}
this.smartCheck.showAddModal(); this.smartCheck.showAddModal();
} }
//添加设备 //添加设备
addDevice(){ addDevice(){
if(!this.topoId){
this.message.warning("请选择需要编辑的拓扑图");
return false;
}
this.smartDevice.showAddModal(); this.smartDevice.showAddModal();
} }
//获取设备图片 //获取设备图片
setImg(e){ setImg(e){
console.log(e); console.log(e);
editor.utils.addNode(e[0].icon,'text'); editor.utils.addNode(e[0].icon,'图片');
} }
//获取列表 //获取列表
...@@ -125,58 +126,24 @@ export class NeTopologyComponent implements OnInit, AfterViewInit { ...@@ -125,58 +126,24 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
); );
} }
//保存
save() {
if (this.topoType == '添加模式') {
this.create();
} else {
this.update();
}
}
//创建
create() {
if (!this.name) {
this.message.info('请输入拓扑图名称');
return false;
}
let data = {
name: this.name,
json: editor.saveTopology()
};
this.topologySer.create(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.create('success','创建成功');
editor.utils.normalTopology();
this.getList();
} else {
this.message.info(res.errMsg);
}
}
);
}
//编辑 //编辑
update() { update() {
const json = { const json = {
topology:editor.saveTopology(), topology:editor.saveTopology(),
check:this.checkJson check:this.checkJson
} };
let data = { let data = {
id: this.topoId, id: this.topoId,
name: this.name,
json: JSON.stringify(json), json: JSON.stringify(json),
}; };
this.topologySer.update(data).subscribe( this.topologySer.update(data).subscribe(
(res) => { (res) => {
if (res.errCode == 10000) { if (res.errCode == 10000) {
this.message.info('编辑成功'); this.message.success('编辑成功');
editor.utils.normalTopology(); editor.utils.editTopology();
this.getList(); this.getList();
} else { } else {
this.message.info(res.errMsg); this.message.error(res.errMsg);
} }
} }
); );
...@@ -189,14 +156,12 @@ export class NeTopologyComponent implements OnInit, AfterViewInit { ...@@ -189,14 +156,12 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
if (res.errCode == 10000) { if (res.errCode == 10000) {
if(res.data.json.length > 0){ if(res.data.json.length > 0){
let json = JSON.parse(res.data.json); let json = JSON.parse(res.data.json);
console.log(json);
editor.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png'); editor.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png');
this.checkJson = json.check; this.checkJson = json.check;
} }
this.name = res.data.name; this.name = res.data.name;
this.topoId = res.data.id; this.topoId = res.data.id;
editor.utils.normalTopology(); editor.utils.editTopology();
this.topoType = '只读模式';
} }
} }
); );
...@@ -218,10 +183,10 @@ export class NeTopologyComponent implements OnInit, AfterViewInit { ...@@ -218,10 +183,10 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
(res) => { (res) => {
if (res.errCode == 10000) { if (res.errCode == 10000) {
this.topoId = null; this.topoId = null;
this.message.info('删除成功'); this.message.success('删除成功');
this.getList(); this.getList();
} else { } else {
this.message.info(res.errMsg); this.message.error(res.errMsg);
} }
} }
); );
...@@ -240,55 +205,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit { ...@@ -240,55 +205,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
//load //load
loadCanvas() { loadCanvas() {
// 选择连线方式后的css样式
$('#link-line').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-foldline-h').css('background-color', 'white');
$('#link-foldline-v').css('background-color', 'white');
$('#link-flexline-h').css('background-color', 'white');
$('#link-flexline-v').css('background-color', 'white');
$('#link-curveline').css('background-color', 'white');
});
$('#link-foldline-h').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-line').css('background-color', 'white');
$('#link-foldline-v').css('background-color', 'white');
$('#link-flexline-h').css('background-color', 'white');
$('#link-flexline-v').css('background-color', 'white');
$('#link-curveline').css('background-color', 'white');
});
$('#link-foldline-v').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-line').css('background-color', 'white');
$('#link-foldline-h').css('background-color', 'white');
$('#link-flexline-h').css('background-color', 'white');
$('#link-flexline-v').css('background-color', 'white');
$('#link-curveline').css('background-color', 'white');
});
$('#link-flexline-h').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-line').css('background-color', 'white');
$('#link-foldline-h').css('background-color', 'white');
$('#link-foldline-v').css('background-color', 'white');
$('#link-flexline-v').css('background-color', 'white');
$('#link-curveline').css('background-color', 'white');
});
$('#link-flexline-v').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-line').css('background-color', 'white');
$('#link-foldline-h').css('background-color', 'white');
$('#link-foldline-v').css('background-color', 'white');
$('#link-flexline-h').css('background-color', 'white');
$('#link-curveline').css('background-color', 'white');
});
$('#link-curveline').click(() => {
$(this).css('background-color', 'darkgray');
$('#link-line').css('background-color', 'white');
$('#link-foldline-h').css('background-color', 'white');
$('#link-foldline-v').css('background-color', 'white');
$('#link-flexline-h').css('background-color', 'white');
$('#link-flexline-v').css('background-color', 'white');
});
// 节点树中每个节点的拖放动作定义给拓扑图编辑器 // 节点树中每个节点的拖放动作定义给拓扑图编辑器
let nodes = $('[topo-div-type=\'topo-node\']'); let nodes = $('[topo-div-type=\'topo-node\']');
...@@ -302,6 +218,10 @@ export class NeTopologyComponent implements OnInit, AfterViewInit { ...@@ -302,6 +218,10 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
//添加图片-----start //添加图片-----start
showAddImg(){ showAddImg(){
if(!this.topoId){
this.message.warning("请选择需要编辑的拓扑图");
return false;
}
this.isVisible = true; this.isVisible = true;
} }
...@@ -317,11 +237,12 @@ export class NeTopologyComponent implements OnInit, AfterViewInit { ...@@ -317,11 +237,12 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
handleCancel(){ handleCancel(){
this.isVisible = false; this.isVisible = false;
this.fileList = [];
} }
handleOk(){ handleOk(){
if(this.fileList.length == 0){ if(this.fileList.length == 0){
this.message.error("请选择图片"); this.message.warning("请选择图片");
return false; return false;
} }
const formData = new FormData(); const formData = new FormData();
...@@ -333,6 +254,7 @@ export class NeTopologyComponent implements OnInit, AfterViewInit { ...@@ -333,6 +254,7 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
if(res.errCode == 10000){ if(res.errCode == 10000){
this.isVisible = false; this.isVisible = false;
editor.utils.addNode(res.data,'text'); editor.utils.addNode(res.data,'text');
this.fileList = [];
}else{ }else{
this.message.error("添加失败") this.message.error("添加失败")
} }
......
src/main/webapp/app/netTopology/topology.service.ts
View file @ aa2dc27f
...@@ -73,4 +73,14 @@ export class TopologyService { ...@@ -73,4 +73,14 @@ export class TopologyService {
addPic(data): Observable<any> { addPic(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/sysmapJson/addPic',data); return this.http.post(SERVER_API_URL + '/sysmapJson/addPic',data);
} }
//流量统计图接口
findTrendData(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/trend/findTrendData',data);
}
// 接受/发送流量列表
findTrend(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/trend/findTrend',data);
}
} }
src/main/webapp/content/css/global.css
View file @ aa2dc27f
...@@ -303,7 +303,8 @@ ui bootstrap tweaks ...@@ -303,7 +303,8 @@ ui bootstrap tweaks
} }
.tree-div { .tree-div {
border: 1px solid #999; border: 1px solid #dadada;
max-height: 200px; height: 200px;
overflow: auto overflow: auto;
margin-top: 10px;
} }
src/main/webapp/content/javascript/jtopo/js/jtopo-editor.js
View file @ aa2dc27f
...@@ -1059,6 +1059,7 @@ editor.utils = { ...@@ -1059,6 +1059,7 @@ editor.utils = {
}, },
// 添加节点, 编辑模式下才能添加 // 添加节点, 编辑模式下才能添加
addNode: function (img, text) { addNode: function (img, text) {
console.log(editor.stageMode);
if (editor.stageMode === "normal") { if (editor.stageMode === "normal") {
return; return;
} }
......
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