Skip to content

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

update

parent acceae52
Show whitespace changes
Inline Side-by-side
Showing with 269 additions and 142 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';
styles: [
`
.tree-div {
border: 1px solid #999;
max-height: 200px;
overflow: auto
border: 1px solid #dadada;
height: 200px;
overflow: auto;
margin-top: 10px;
}
`
]
......
src/main/webapp/app/netTopology/flow-trend/flow-trend.component.html
View file @ aa2dc27f
<div id="mynetwork" style="width:600px;height: 200px;" #siteConfigNetwork></div>
<div nz-row class="breadcrumbs">
<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';
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({
selector: 'smart-flow-trend',
......@@ -7,42 +13,133 @@ declare var vis:any;
styles: []
})
export class FlowTrendComponent implements OnInit {
@ViewChild('siteConfigNetwork') networkContainer:ElementRef;
@ViewChild("pop") popOver: any;
public network: any;
groupList;
hostList;
obj = {
groupid:null,
hostid: null,
startTime: '',
endTime: ''
};
constructor() { }
//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;
}
}
);
}
//查询主机
onchange(e) {
const data = {
'groupids': [e],
'hostExtend': {
'superiorHostid': null
}
};
this.overAllSer.findDetail(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.hostList = res.data;
}
}
);
}
const treeData = this.getTreeData();
this.loadVisTree(treeData);
getEcharts() {
const data = {
itemid: '',
endTime: this.obj.endTime,
startTime: this.obj.startTime
};
this.topologySer.findTrendData(data).subscribe(
(res) => {
}
);
}
loadVisTree(treedata) {
//获取流量
getList(e) {
this.onchange(e);
this.getInList();
this.getOutList();
}
getListIO(){
this.getInList();
this.getOutList();
}
getTreeData(){
const nodes =[
{id: 1, label: 'Node 1', title: 'I am node 1!'},
{id: 2, label: 'Node 2', title: 'I am node 2!'},
{id: 3, label: 'Node 3'},
{id: 4, label: 'Node 4'},
{id: 5, label: 'Node 5'}
];
//进口流量
getInList() {
const data = {
type: 'in',
pageNum: '1',
pageCount: '10',
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},
{from: 1, to: 2},
{from: 2, to: 4},
{from: 2, to: 5}
];
const treeData = {
nodes: nodes,
edges: edges
//出口流量
getOutList() {
const data = {
type: 'out',
pageNum: '1',
pageCount: '10',
hostid: this.obj.hostid,
startTime: this.obj.startTime,
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 {
//获取下级
mouseAction(name: string, event: NzFormatEmitEvent) {
console.log(event);
let type;
if(event.node.level == 0){
type = "host"; //主机
......@@ -93,7 +92,6 @@ export class DeviceComponent implements OnInit {
this.topologySer.findTree(data).subscribe(
(res) => {
if (res.data) {
console.log(res.data);
const dataSet = res.data;
dataSet.forEach(res => {
res.title = res.name;
......@@ -115,7 +113,6 @@ export class DeviceComponent implements OnInit {
//选择树节点
selectCheckTree(event: NzFormatEmitEvent) {
console.log(event);
if (event.node.isChecked) {
if(event.node.level == 1){
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 @@
<nz-option [nzLabel]="item.name" [nzValue]="item.id"></nz-option>
</ng-container>
</nz-select>
<span (click)="edit()">编辑</span>
<!--<span (click)="edit()">编辑</span>-->
</div>
<div nz-col nzSpan="12" class="text-right">
<button nz-button (click)="addTopo()" nzType="default"><i class="anticon anticon-plus"></i>添加</button>
......@@ -51,7 +51,7 @@
onClick="editor.utils.showInCenter()">居中显示</span>
<span aria-hidden="true" title="预览"
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="清空"
onClick="editor.utils.clearTopology()">清空</span>
<span aria-hidden="true" title="放大"
......@@ -298,7 +298,6 @@
style="height: 580px;">
您的浏览器不支持HTML5!
</canvas>
<span class="tips">{{topoType}}</span>
<div class="checkList">
<p *ngFor="let item of checkJson">
<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 {
image;
topoId;
name;
topoType = '只读模式';
checkJson = [];
fileList: UploadFile[] = [];
......@@ -81,16 +80,10 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
this.smartTopology.showAddMOodal();
}
edit(){
this.topoType = '编辑模式';
this.message.info('编辑模式');
editor.utils.editTopology();
}
//编辑拓扑图
editTopo() {
if(!this.topoId){
this.message.info("请选择需要编辑的拓扑图");
this.message.warning("请选择需要编辑的拓扑图");
return false;
}
this.smartTopology.showEditModal(this.topoId);
......@@ -98,18 +91,26 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
//添加监测点
addCheck(){
if(!this.topoId){
this.message.warning("请选择需要编辑的拓扑图");
return false;
}
this.smartCheck.showAddModal();
}
//添加设备
addDevice(){
if(!this.topoId){
this.message.warning("请选择需要编辑的拓扑图");
return false;
}
this.smartDevice.showAddModal();
}
//获取设备图片
setImg(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 {
);
}
//保存
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() {
const json = {
topology:editor.saveTopology(),
check:this.checkJson
}
};
let data = {
id: this.topoId,
name: this.name,
json: JSON.stringify(json),
};
this.topologySer.update(data).subscribe(
(res) => {
if (res.errCode == 10000) {
this.message.info('编辑成功');
editor.utils.normalTopology();
this.message.success('编辑成功');
editor.utils.editTopology();
this.getList();
} else {
this.message.info(res.errMsg);
this.message.error(res.errMsg);
}
}
);
......@@ -189,14 +156,12 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
if (res.errCode == 10000) {
if(res.data.json.length > 0){
let json = JSON.parse(res.data.json);
console.log(json);
editor.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png');
this.checkJson = json.check;
}
this.name = res.data.name;
this.topoId = res.data.id;
editor.utils.normalTopology();
this.topoType = '只读模式';
editor.utils.editTopology();
}
}
);
......@@ -218,10 +183,10 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
(res) => {
if (res.errCode == 10000) {
this.topoId = null;
this.message.info('删除成功');
this.message.success('删除成功');
this.getList();
} else {
this.message.info(res.errMsg);
this.message.error(res.errMsg);
}
}
);
......@@ -240,55 +205,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
//load
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\']');
......@@ -302,6 +218,10 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
//添加图片-----start
showAddImg(){
if(!this.topoId){
this.message.warning("请选择需要编辑的拓扑图");
return false;
}
this.isVisible = true;
}
......@@ -317,11 +237,12 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
handleCancel(){
this.isVisible = false;
this.fileList = [];
}
handleOk(){
if(this.fileList.length == 0){
this.message.error("请选择图片");
this.message.warning("请选择图片");
return false;
}
const formData = new FormData();
......@@ -333,6 +254,7 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
if(res.errCode == 10000){
this.isVisible = false;
editor.utils.addNode(res.data,'text');
this.fileList = [];
}else{
this.message.error("添加失败")
}
......
src/main/webapp/app/netTopology/topology.service.ts
View file @ aa2dc27f
......@@ -73,4 +73,14 @@ export class TopologyService {
addPic(data): Observable<any> {
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
}
.tree-div {
border: 1px solid #999;
max-height: 200px;
overflow: auto
border: 1px solid #dadada;
height: 200px;
overflow: auto;
margin-top: 10px;
}
src/main/webapp/content/javascript/jtopo/js/jtopo-editor.js
View file @ aa2dc27f
......@@ -1059,6 +1059,7 @@ editor.utils = {
},
// 添加节点, 编辑模式下才能添加
addNode: function (img, text) {
console.log(editor.stageMode);
if (editor.stageMode === "normal") {
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