在线自定义编辑网络拓扑图
【摘要】
元旦在家没事搞了一个在线编辑网络拓扑图的功能， 主要功能有
在线管理，查看多个网络拓扑图每个网络拓扑图的告警事件显示每个网络拓扑 节点的详细信息显示在线编辑，并保存网络拓扑图
为了方便，该项目使用的是...
元旦在家没事搞了一个在线编辑网络拓扑图的功能，
主要功能有
- 在线管理，查看多个网络拓扑图
- 每个网络拓扑图的告警事件显示
- 每个网络拓扑 节点的详细信息显示
- 在线编辑，并保存网络拓扑图
为了方便，该项目使用的是项目中的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
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
以下是一个拓扑图节点的信息格式
{
"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
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
告警事件的格式
{
"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": {}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
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 = eventData
getKPIData(id, cb)
}
});
}
function getKPIData(id, cb) {
$.ajax({
url: "./data/kpiData.json",
data: { id: id },
success: function (kpiData) {
testData.kpi = kpiData
cb && cb()
}
});
}
function getNodeData(cb) {
$.ajax({
url: "./data/nodeData.json",
success: function (nodeData) {
testData.views = nodeData.views
testData.view = nodeData.view
getEventData(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.view
let 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
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 104
- 105
- 106
- 107
- 108
- 109
- 110
- 111
- 112
- 113
- 114
- 115
- 116
- 117
- 118
- 119
- 120
- 121
- 122
- 123
- 124
- 125
- 126
- 127
- 128
- 129
- 130
在该项目中学到的东西：
需要将改动的地方尽可能地放到统一个地方，比如新增一些方法，不要直接在源代码上改，新建一个文件，然后在源码里引入。
尽可能对源码改动最小
要找到合适的函数执行时机，一个函数在每一个地方执行都会产生不同的效果。要找到最合适的地方，去执行他。
打印出对象的原型，找到其中所有的属性。
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=2cpdbrbq38pwo
文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。
原文链接：fizzz.blog.csdn.net/article/details/122263715
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）