Skip to content

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

重构 jtopo

parent 636c4984
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 172 additions and 195 deletions
src/main/webapp/app/app.main.module.ts
View file @ 392f36a1
......@@ -96,7 +96,8 @@ import {ModifyPasswordComponent} from './modal/modify-password/modify-password.c
import {FullScreenComponent} from './modal/full-screen/full-screen.component';
import {LookRoleComponent} from './look-role/look-role.component';
import {ThresholdComponent} from './modal/threshold/threshold.component';
import {JtopoComponent} from './jtopo/jtopo.component';
import {LineComponent} from './netTopology/model/line/line.component';
import {NodeComponent} from './netTopology/model/node/node.component';
@NgModule({
imports: [
......@@ -195,7 +196,8 @@ import {JtopoComponent} from './jtopo/jtopo.component';
LookPlanComponent,
LookRoleComponent,
ThresholdComponent,
JtopoComponent,
LineComponent,
NodeComponent
],
providers:[
OverAllService,
......
src/main/webapp/app/jtopo/jtopo.component.html deleted 100644 → 0
View file @ 636c4984
<div class="layui-layout layui-layout-admin">
<div class="layui-header header-bar">
<span (click)="addDevice()">添加设备</span>
<span (click)="addCheck()">添加监测点</span>
<span (click)="showAddImg()">添加图片</span>
<span onClick="editor.utils.deleteSelectedNodes()">移除</span>
<!-- 顶部工具栏 -->
<div class="layui-nav layui-layout-right" style="color: #6097b7" >
<span aria-hidden="true" title="全屏查看"
onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')">全屏查看</span>
<span aria-hidden="true" title="居中显示" onClick="editor.utils.showInCenter()">居中显示</span>
<span aria-hidden="true" title="保存" (click)="update()">保存</span>
<span aria-hidden="true" title="清空" onClick="editor.utils.clearTopology()">清空</span>
<span aria-hidden="true" title="放大" onClick="editor.utils.scalingBig()">放大</span>
<span caria-hidden="true" title="缩小" onClick="editor.utils.scalingSmall()">缩小</span>
</div>
</div>
<div class="container">
<div class="layui-row">
<div class="layui-col-md12">
<div #topologyBody id="topology-body" class="topology-context">
<!-- 鼠标悬浮显示节点信息 -->
<div class="node-infobox" style="display: none;">
<span>节点名称：<label name="node_name"></label></span>
<span>当前时间：<label name="current_time"></label></span>
</div>
<canvas class="topology-context" id="topology-canvas" #topologyCanvas
style="height: 580px;">
您的浏览器不支持HTML5!
</canvas>
<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>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--添加图片-->
<nz-modal [(nzVisible)]="isDevice" nzTitle="添加图片" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择图片</nz-form-label>
<nz-form-control [nzSpan]="12">
<input nz-input type="text">
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<!--添加拓扑图-->
<smart-topology #smartTopology (done)="getList()"></smart-topology>
<!--添加监测点-->
<smart-check #smartCheck (done)="setCheckList($event)"></smart-check>
<!--选择资源-->
<smart-select-group #smartSelectGroup (done)="setImg($event)"></smart-select-group>
\ No newline at end of file
src/main/webapp/app/jtopo/jtopo.component.ts deleted 100644 → 0
View file @ 636c4984
This diff is collapsed.
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.html
View file @ 392f36a1
......@@ -34,4 +34,81 @@
</div>
<smart-jtopo></smart-jtopo>
\ No newline at end of file
<div class="layui-layout layui-layout-admin">
<div class="layui-header header-bar">
<span (click)="addDevice()">添加设备</span>
<span (click)="addCheck()">添加监测点</span>
<span (click)="showAddImg()">添加图片</span>
<span onClick="editor.utils.deleteSelectedNodes()">移除</span>
<!-- 顶部工具栏 -->
<div class="layui-nav layui-layout-right" style="color: #6097b7" >
<span aria-hidden="true" title="全屏查看"
onClick="editor.utils.showInFullScreen(editor.stage.canvas,'RequestFullScreen')">全屏查看</span>
<span aria-hidden="true" title="居中显示" onClick="editor.utils.showInCenter()">居中显示</span>
<span aria-hidden="true" title="保存" (click)="update()">保存</span>
<span aria-hidden="true" title="清空" onClick="editor.utils.clearTopology()">清空</span>
<span aria-hidden="true" title="放大" onClick="editor.utils.scalingBig()">放大</span>
<span caria-hidden="true" title="缩小" onClick="editor.utils.scalingSmall()">缩小</span>
</div>
</div>
<div class="container">
<div class="layui-row">
<div class="layui-col-md12">
<div #topologyBody id="topology-body" class="topology-context">
<!-- 鼠标悬浮显示节点信息 -->
<div class="node-infobox" style="display: none;">
<span>节点名称：<label name="node_name"></label></span>
<span>当前时间：<label name="current_time"></label></span>
</div>
<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>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!--添加图片-->
<nz-modal [(nzVisible)]="isDevice" nzTitle="添加图片" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
<form nz-form>
<nz-form-item>
<nz-form-label [nzSpan]="7" nzRequired nzFor="group">选择图片</nz-form-label>
<nz-form-control [nzSpan]="12">
<input nz-input type="text">
</nz-form-control>
</nz-form-item>
</form>
</nz-modal>
<!--流量配置-->
<smart-line #smartLine></smart-line>
<!--设备配置-->
<smart-node #smartNode></smart-node>
<!--添加拓扑图-->
<smart-topology #smartTopology (done)="getList()"></smart-topology>
<!--添加监测点-->
<smart-check #smartCheck (done)="setCheckList($event)"></smart-check>
<!--选择资源-->
<smart-select-group #smartSelectGroup (done)="setImg($event)"></smart-select-group>
\ No newline at end of file
src/main/webapp/app/netTopology/ne-topology/ne-topology.component.ts
View file @ 392f36a1
import {AfterViewChecked, AfterViewInit, Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {AfterViewChecked, AfterViewInit, Component, ElementRef, KeyValueDiffer, OnInit, ViewChild, KeyValueDiffers, DoCheck} from '@angular/core';
import {TopologyService} from '../topology.service';
import {NzMessageService, NzModalService, UploadFile} from 'ng-zorro-antd';
import {DomSanitizer} from '@angular/platform-browser';
import * as $ from 'jquery';
import {TopologyComponent} from '../model/topology/topology.component';
import {CheckComponent} from '../model/check/check.component';
import {DeviceComponent} from '../model/device/device.component';
import {SelectGroupComponent} from '../../modal/select-group/select-group.component';
import {LocalStorageService} from 'ngx-webstorage';
import {numberOfBytes} from 'ng-jhipster/src/directive/number-of-bytes';
import {LineComponent} from '../model/line/line.component';
import {NodeComponent} from '../model/node/node.component';
declare let editor: any;
declare var layui: any;
......@@ -50,6 +53,13 @@ declare var layui: any;
color: #666666;
font-size: 20px;
}
.lineList{
position: absolute;
top: 5px;
left: 20px;
color: #6097b7;
cursor: pointer;
}
.layui-form-label {
width: 110px;
......@@ -65,11 +75,13 @@ declare var layui: any;
`
]
})
export class NeTopologyComponent implements OnInit, AfterViewInit {
export class NeTopologyComponent implements OnInit, DoCheck, AfterViewInit {
@ViewChild('topologyCanvas') topologyCanvas: ElementRef;
@ViewChild('smartTopology') smartTopology: TopologyComponent;
@ViewChild('smartCheck') smartCheck: CheckComponent;
@ViewChild('smartSelectGroup') smartSelectGroup: SelectGroupComponent;
@ViewChild('smartLine') smartLine: LineComponent;
@ViewChild('smartNode') smartNode: NodeComponent;
dataSet;
isVisible = false;
......@@ -82,14 +94,37 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
checkJson = [];
fileList: UploadFile[] = [];
isDevice;
private customerDiffer: KeyValueDiffer<string, any>;
local = {
node:'',
link:''
};
constructor(private topologySer: TopologyService, private message: NzMessageService,
constructor(private topologySer: TopologyService, private message: NzMessageService, private localStorage:LocalStorageService,private differs: KeyValueDiffers,
private sanitizer: DomSanitizer, private modalSer: NzModalService) {
}
ngOnInit() {
this.getList();
this.getTypeList();
this.customerDiffer = this.differs.find(this.local).create();
}
ngAfterViewInit() {
this.loadCanvas();
}
ngDoCheck(){
this.local.node = localStorage.getItem("node");
this.local.link = localStorage.getItem("link");
if (this.local.node == 'true') {
this.smartNode.showModal();
}
if (this.local.link == 'true') {
this.smartLine.showModal(null);
}
}
//一级分类
......@@ -98,10 +133,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
(res)=>{
if(res.errCode == 10000){
this.options = res.data;
layui.use('form', function() {
let form = layui.form;
form.render("select");
});
}else{
this.message.error(res.errMSg);
}
......@@ -109,15 +140,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
)
}
ngAfterViewInit() {
layui.use('element', () => {
let element = layui.element;
element.init();
});
this.loadCanvas();
}
//新增拓扑图
addTopo() {
this.smartTopology.showAddMOodal();
......@@ -157,7 +179,7 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
}
this.topologySer.findByHostIdOrWeb(data).subscribe(
(res)=>{
editor.utils.addNode(res.data[0].url, '图片');
editor.utils.addNode(res.data[0].url, '图片',e[0]);
}
)
}
......@@ -200,6 +222,11 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
);
}
//load
loadCanvas() {
editor.loadTopology('','', 'img/backimg.png');
}
//查询单个
getDetail(id) {
this.topologySer.findItem(id).subscribe(
......@@ -209,6 +236,7 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
let json = JSON.parse(res.data.json);
if(json.topology){
editor.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png');
// this.smartJtopo.loadTopologyByJson(JSON.parse(json.topology), 'img/backimg.png');
this.checkJson = json.check;
}else{
editor.utils.clearTopology();
......@@ -221,9 +249,9 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
this.name = res.data.name;
this.refreshRete = res.data.refreshRete;
this.topoId = res.data.id;
editor.utils.editTopology();
this.findItemStatus();
}
editor.utils.editTopology();
}
);
}
......@@ -286,18 +314,6 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
this.checkJson.splice(index, 1);
}
//load
loadCanvas() {
// 节点树中每个节点的拖放动作定义给拓扑图编辑器
let nodes = $('[topo-div-type=\'topo-node\']');
let nodeLength = nodes.length;
for (let i = 0; i < nodeLength; i++) {
let text = $(nodes[i]).find('span').eq(0).text();
editor.drag(nodes[i], document.getElementById('topology-canvas'), text);
}
editor.loadTopology('', 'img/backimg.png');
}
//添加图片-----start
showAddImg() {
if (!this.topoId) {
......@@ -344,6 +360,4 @@ export class NeTopologyComponent implements OnInit, AfterViewInit {
);
}
// end
}
src/main/webapp/app/netTopology/topology.service.ts
View file @ 392f36a1
......@@ -98,4 +98,14 @@ export class TopologyService {
findElementStatus(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/sysmapJson/findElementStatus',data);
}
//查询进出口流量
findFlow(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/sysmapJson/flow',data);
}
//根据主机id查询网卡进出口监控项
findFlowItemByHost(data): Observable<any> {
return this.http.post(SERVER_API_URL + '/sysmapJson/findFlowItemByHost',data);
}
}
src/main/webapp/app/overAll/network-check/network-detail/network-detail.component.html
View file @ 392f36a1
......@@ -56,7 +56,7 @@
<td></td>
<td>总计</td>
<td></td>
<td>{{totalNum}}{{(nowStatus[0].response_units).toFixed(4)}}</td>
<td>{{totalNum.toFixed(4)}}s</td>
<td></td>
<td></td>
</tr>
......@@ -125,9 +125,9 @@
<div nz-col [nzSpan]="6" >
<div #chartSpeedLeft class="chart-left" *ngFor="let item of speed,let i = index;">
<p class="tag-form"> <nz-tag [nzColor]="colorArr[i]"></nz-tag> <span>{{item.name}}</span> </p>
<p>平均值 {{item.average}}</p>
<p>最大值 {{item.max}}</p>
<p>最小值 {{item.min}}</p>
<p>平均值 {{item.average.toFixed(4)}}</p>
<p>最大值 {{item.max.toFixed(4)}}</p>
<p>最小值 {{item.min.toFixed(4)}}</p>
</div>
</div>
<div nz-col [nzSpan]="18">
......@@ -138,7 +138,7 @@
<div nz-col [nzSpan]="6" >
<div #chartTimeLeft class="chart-left" *ngFor="let item of time,let i = index;">
<p class="tag-form"> <nz-tag [nzColor]="colorArr[i]"></nz-tag> <span>{{item.name}}</span> </p>
<p>平均值 {{(item.average.toFixed(4))}}</p>
<p>平均值 {{(item.average).toFixed(4)}}</p>
<p>最大值 {{(item.max).toFixed(4)}}</p>
<p>最小值 {{(item.min).toFixed(4)}}</p>
</div>
......
src/main/webapp/app/shared/common/common.service.ts
View file @ 392f36a1
......@@ -125,36 +125,4 @@ export class CommonService implements OnInit {
return usablePrefixMethod;
}
/**
* 计算程序执行时间
* @type {{startTime: {}, timeSpan: number, start: Timer.start, stop: Timer.stop, getTimeSpan: Timer.getTimeSpan}}
*/
Timer = {
startTime: {},
stoppedStatus: true,
start: ()=> {
if (this.stoppedStatus) {
this.startTime = new Date()
this.stoppedStatus = false
}
},
pause: ()=> {
var startTime = this.startTime
if (startTime) {
return new Date() - startTime
} else {
return -1
}
},
stop: function () {
var startTime = this.startTime
if (startTime) {
this.stoppedStatus = true
return new Date() - startTime
} else {
this.stoppedStatus = true
return -1
}
}
}
}
src/main/webapp/app/shared/shared.module.ts
View file @ 392f36a1
......@@ -18,6 +18,7 @@ import {
} from './';
import {ReactiveFormsModule} from '@angular/forms';
import {CommonService} from './common/common.service';
import {UtilService} from './common/util.service';
@NgModule({
imports: [
......@@ -42,6 +43,7 @@ import {CommonService} from './common/common.service';
EmitService,
NgbActiveModal,
CommonService,
UtilService,
],
entryComponents: [JhiLoginModalComponent],
exports: [
......
src/main/webapp/content/javascript/jtopo/js/jtopo-editor.js
View file @ 392f36a1
......@@ -3,7 +3,6 @@
* designed by xwenyuan
* github: https://github.com/xwenyuan/jtopo_topology.git
*/
/**
* 提供拓扑图面板相关操作的函数集，编辑器继承其全部功能
*/
......@@ -86,6 +85,8 @@ TopologyPanel.prototype.loadTopologyByJson = function (topologyJson, backImg) {
JTopo.replaceStageWithJson(topologyJson)
if (editor.stage && editor.scene && editor.scene.childs && editor.scene.childs.length > 0) {
editor.stage.centerAndZoom()
editor.utils.getAllNodes()[0].alarm = "告警";
console.log(editor.utils.getAllNodes()[0]);
}
} catch (e) {
console.error(e)
......@@ -161,7 +162,7 @@ function TopologyEditor() {
linkFontColor: 'red', // 连线文字颜色,如"255,255,0"
linkArrowsRadius: 0, // 线条箭头半径
linkDefaultWidth: 3, // 连线宽度
linkOffsetGap: 40, // 折线拐角处的长度
linkOffsetGap: 80, // 折线拐角处的长度
linkDirection: 'horizontal', // 折线的方向
// Container属性
containerAlpha: 1,
......@@ -172,8 +173,11 @@ function TopologyEditor() {
containerFont: '12px Consolas',
containerFontColor: 'black',
containerBorderColor: 'black',
containerBorderRadius: 30
}
containerBorderRadius: 30,
//主机属性
hostId:null,
};
// 布局参数
this.layout = {}
// 绘图区属性
......@@ -507,6 +511,7 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
// 模拟告警
if(editor.utils.getAllNodes().length > 0){
debugger
editor.utils.getAllNodes()[0].alarm = "告警";
}
......@@ -610,52 +615,13 @@ TopologyEditor.prototype.init = function (topologyGuid, backImg, topologyJson) {
// 只处理双击节点事件
if (event.target instanceof JTopo.Node && editor.stageMode === 'edit') {
// alert('双击了节点')
// 查询单个节点的信息, 回填数据
layer.open({
title: "编辑设备",
type: 1,
area: ['600px', '500px'],
content: $("#node-dialog"),
btn: ["应用", "删除", "取消"],
yes: function(index, layero){
var param = getParam("node-form");
self.currentNode.text = param.deviceName; //设置文字
$("#node-dialog").css("display","none");
layer.close(index);
},
btn2: function () {
editor.utils.deleteNode(self.currentNode);
},
cancel:function () {
$("#node-dialog").css("display","none")
}
});
console.log(event.target)
localStorage.setItem("node",'true');
} else if (event.target instanceof JTopo.Link && editor.stageMode === 'edit') {
layer.open({
title: "编辑线",
type: 1,
area: ['600px', '500px'],
content: $("#link-dialog"),
btn: ["应用", "删除", "取消"],
yes: function(index, layero){
var param = getParam("link-form");
console.log(param);
self.currentNode.text = param.lineName;
self.currentNode.fontColor = param.lineColor;
$('#link-dialog').css('display', 'none')
layer.close(index);
},
btn2: function () {
editor.utils.deleteNode(self.currentNode);
},
cancel:function () {
$('#link-dialog').css('display', 'none')
}
});
console.log(event.target);
localStorage.setItem("link",'true');
}
})
});
// 清除起始节点不完整的拖放线
this.scene.mousedown(function (e) {
......@@ -1056,8 +1022,7 @@ editor.utils = {
editor.utils.setNormalMode();
},
// 添加节点, 编辑模式下才能添加
addNode: function (img, text) {
console.log(editor.stageMode);
addNode: function (img, text, hostId) {
if (editor.stageMode === "normal") {
return;
}
......@@ -1071,15 +1036,17 @@ editor.utils = {
node.fontColor = editor.config.nodeFontColor
// 节点坐标
node.setBound(320, -200, 50, 50);
console.log(node);
// 默认节点图片
node.setImage(topoImgPath + img)
node.setImage(topoImgPath + img);
// 节点数据
node.nodeId = generateUUID()
node.text = text
node.nodeImage = img
node.nodeImage = img;
node.hostId = hostId;
editor.scene.add(node)
editor.currentNode = node
editor.currentNode = node;
console.log(node);
},
// 重新渲染节点
reloadNode: function (node) {
......@@ -1385,5 +1352,8 @@ editor.utils = {
}
})
})
},
update:function (config) {
editor.config = config;
}
}
tslint.json
View file @ 392f36a1
......@@ -27,7 +27,7 @@
"variables-before-functions"
],
"no-arg": true,
"no-bitwise": true,
"no-bitwise": false,
"no-console": [
true,
"debug",
......
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