在线自定义编辑网络拓扑图
元旦在家没事搞了一个在线编辑网络拓扑图的功能， 主要功能有
- 在线管理，查看多个网络拓扑图
- 每个网络拓扑图的告警事件显示
- 每个网络拓扑 节点的详细信息显示
- 在线编辑，并保存网络拓扑图
为了方便，该项目使用的是项目中的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 = 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
}在该项目中学到的东西：
需要将改动的地方尽可能地放到统一个地方，比如新增一些方法，不要直接在源代码上改，新建一个文件，然后在源码里引入。
尽可能对源码改动最小
要找到合适的函数执行时机，一个函数在每一个地方执行都会产生不同的效果。要找到最合适的地方，去执行他。
打印出对象的原型，找到其中所有的属性。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读