在线自定义编辑网络拓扑图

元旦在家没事搞了一个在线编辑网络拓扑图的功能，
主要功能有

在线管理，查看多个网络拓扑图
每个网络拓扑图的告警事件显示
每个网络拓扑节点的详细信息显示
在线编辑，并保存网络拓扑图

为了方便，该项目使用的是项目中的json数据，所以在编辑后需要将请求数据拷贝出来，覆盖到拓扑图节点json数据中。

先给大家看一下效果。
展示效果

编辑效果

有需要的可以私信我。

该项目接口使用标准的json格式。
以下是一个拓扑图节点的基本信息

{"id": 8685,"name": "Test","descr": "","type": 1,"timestamp": 201602021420036,"isInstance": true,"isCache": true,"isHidden": false,"style": "","config": "","options": "","parentViewId": -1,"orderCode": 0,"relSymbolId": -1}

以下是一个拓扑图节点的信息格式

{"8685": {"symbols": [{"id": 9087,"name": "DLQ8","x": 182,"y": 460,"type": 0,"timestamp": 201602021520023,"viewId": 8685,"parentId": -1,"objectId": 964448097,"objectClass": "3003","instanceId": null,"style": "icon:h3c/h3_router_general.svg;icon-width:47;icon-height:33;text-display:1;font-size:10;font-color:#cccccc;shadow:bottom;opacity:1;text-stroke-color:;text-border-color:;text-border-fill-color:;text-border-radius:0;","options": "custom-label:1;","url": null,"alarm": "render:animation;"}],"lines": [{"id": 8815,"name": "02OX->47AK","path": "M 448 458 L 656 407","type": 0,"srcSymbol": 8814,"dstSymbol": 8694,"timestamp": 201602021520023,"viewId": 8685,"parentId": -1,"objectId": 1977547298,"objectClass": "3006","instanceId": "-1","style": "dashed:;border:0;border-color:;shadow:;shadow-color:;","options": "custom-label:1;","url": null,"alarm": "tfr-to-line:8817;tfr-to-symbol:-1;render:animation;"}],"view": {"id": 8685,"name": "Test","descr": "","type": 1,"userId": 1,"timestamp": 201602021520023,"isInstance": true,"isCache": true,"isHidden": false,"style": "background-image:;width:1366;height:768;font-family:null;font-size:0;font-color:null;background-color:#ffffff;","config": "","options": "adapter:0;position:0;hidden-nav:0;node-hang-display:0;line-hang-display:0;hang-name-display:0;node-hang-adapter:0;node-hang-position:4;","parentViewId": -1,"orderCode": 2,"relSymbolId": -1}}
}

告警事件的格式

{"8685": {"lineEventStatus": {"8703": 5},"events": {"2475237837575691665165149831673125481": {"text": "IP 37.136.128.10的设备持续PING不通,超过115days 1hours..","transfer": "0","oname": "O2NJ","at": "1447204273000","as": "2","lt": "1433744705000","type": "NetPoller","au": "root","id": "2475237837575691665165149831673125481","title": "设备ping不通","level": "5","am": "","oid": "368053119","ft": "1433702948000","ds": "-1"}},"lineEventIds": {"8703": ["312867235211189717583878141112716192116"]},"symbolEventStatus": {"48": 5,"49": 5,"51": 5,"54": 5,"9091": 2},"symbolEventIds": {"48": ["2291387855262686111836189181531379516388"],"49": ["361167444231973356291452981742937228294"],"51": ["2475237837575691665165149831673125481"],"54": ["4184389757415947168811944124513157152444"],"9091": ["29674698919313348538571474991217275111"]}},"640": {},"654": {}
}

inject-func.js的内容

var __millisec = 1000 * 2 // 2秒function getEventData(id, cb) {$.ajax({url: "./data/eventData.json",data: { id: id },success: function (eventData) {testData.event = eventDatagetKPIData(id, cb)}});
}function getKPIData(id, cb) {$.ajax({url: "./data/kpiData.json",data: { id: id },success: function (kpiData) {testData.kpi = kpiDatacb && cb()}});
}function getNodeData(cb) {$.ajax({url: "./data/nodeData.json",success: function (nodeData) {testData.views = nodeData.viewstestData.view = nodeData.viewgetEventData(testData.views[0].id, cb)}});
}function saveEditData(data) {const sendData = transfromData(data)$.ajax({url: "http://1.2.3.4",type: 'POST',dataType: 'json',contentType: 'application/json; charset=utf-8',data: JSON.stringify(sendData),success: function (nodeData) {console.log(nodeData)},error: function (err) {console.log(err)}});
}// 数据转化
function transfromData(data) {let symbols = []let lines = []const view = data.viewlet syItem = {}let linItme = {}$.each([data.symbols], function (idx, coll) {for (var property in coll) {const { id, name, x, y, type,timestamp, viewId, parentId,objectId, objectClass, instanceId,style, options, url, alarm } = coll[property]syItem = {id,name,x,y,type: 0,timestamp,viewId,parentId,objectId,objectClass,instanceId,style: json2String(style),options: json2String(options),url,alarm: json2String(alarm),}symbols.push(syItem)}});$.each([data.lines], function (idx, coll) {if (idx === 0) {for (var property in coll) {const { id, name, path, type,srcSymbol, dstSymbol, timestamp,viewId, parentId, objectId, objectClass, instanceId,style, options, url, alarm } = coll[property]linItme = {id,name,path,type: 0,srcSymbol,dstSymbol,timestamp,viewId,parentId,objectId,objectClass,instanceId,style: json2String(style),options,url,alarm: json2String(alarm),}lines.push(linItme)}}});return { view, lines, symbols }
}// json数据转 字符串
function json2String(obj) {if (!obj) return ''let str = ''Object.keys(obj).forEach(o => {str = str + `${o}:${obj[o]};`})return str
}

在该项目中学到的东西：

需要将改动的地方尽可能地放到统一个地方，比如新增一些方法，不要直接在源代码上改，新建一个文件，然后在源码里引入。

尽可能对源码改动最小

要找到合适的函数执行时机，一个函数在每一个地方执行都会产生不同的效果。要找到最合适的地方，去执行他。

打印出对象的原型，找到其中所有的属性。

我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=2cpdbrbq38pwo

在线自定义编辑网络拓扑图相关推荐

免费在线流程图、网络拓扑图等制图 --- Process On --- https://www.processon.com
https://www.processon.com/
网络拓扑图怎么画详细教程
大数据时代,如何更好地去运营.呈现数据,并从其中发掘出更多信息成为了人们探索的方向.网络拓扑图就是一种非常有用的信息化图表,这种网状关系呈现出来的利器可以使我们把想要传递的信息更加清晰.有逻辑的呈现在 ...
网络拓扑图画图工具_写了100多篇原创文章，我常用的在线工具网站推荐给大家！...
不知不觉写博客已经一年多了,累计写了100多篇原创文章,今天给大家分享下我经常使用的在线工具网站,希望对大家有所帮助! Markdown Nice 支持自定义样式的在线Markdown编辑器,编辑完成 ...
网络拓扑图画图工具_一款功能强大的免费在线作图工具
小金子读完需要 2分钟速读仅需 1 分钟大家好,我是你们的小金子. 今天推荐的工具是「ProcessOn」,一款强大的在线作图工具. 1.免费在线作图.实时协作 ProcessOn 支持: 思维 ...
流程图、思维导图、网络拓扑图、组织结构图——ProcessOn在线工具及增加文件数方法
可网页在线画流程图之类的,还有模版可以参考. ProcessOn 支持流程图.思维导图.原型图.UML.网络拓扑图.组织结构图等 ProcessOn在线工具: https://www.processo ...
visio网络拓扑图_人船模型怎么画？分享高颜值模型图软件
人船模型是指一个原本处于静态的系统,通过互相作用后,在一个方向上达到动量守恒. "人船模型"是由人和船两个物体构成的系统,一个人从船头走到船尾,船停在静止的水面上,设人的质量为m, ...
办公实用技巧：利用迅捷画图绘制网络拓扑图操作方法介绍
网络拓扑图,程序设计图,组织结构图等是几种比较常见的流程图主题,使用的人呢比较对并且绘制起来很方便很实用,所以很受大家青睐,所以今天爱跟风的小编就来和大家分享一下网络拓扑图的绘制方法. 绘制工具:迅捷 ...
利用迅捷画图绘制环型网络拓扑图操作方法介绍
网络拓扑图是是用传输媒体互联的物理布局,网络拓扑图有几种主要的结构星型结构,环型结构,总线结构,网状结构以及环型结构,今天要分享的是利用迅捷画图绘制网络拓扑图的操作方法介绍. 工具/原料: 浏览器,电 ...
EDraw 亿图图示设计软件一款好用的绘制网络拓扑图的软件
亿图网络图绘制作软件是由亿图软件公司推出的一款专门用来绘制电脑网络图的软件.软件功能强大,容易上手,几乎包含所有网络图的绘制,例如基本网络图,网络拓扑图,Cisco网络图,机架图,网络通信图,3D网络 ...
基于Web实现网络拓扑图
想想好像好久没用写博客了! 由于最近想跳槽了(ps:尽管公司挽留,提出一些异与往常的挽留"制度",But确实已经死心了) ,发现前一段时间一些做Hadoop,和Spark同事时常来 ...

在线自定义编辑网络拓扑图

在线自定义编辑网络拓扑图相关推荐

最新文章

热门文章