<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
#mynetwork {
100%;
height: 100vh;
border: 1px solid lightgray;
background-color: black;
}
</style>
</head>
<body>
<div id="mynetwork"></div>
</body>
<script src="./js/vis-network.min.js"></script>
<script>
const data = {
"mac": "28:D1:27:72:D2:CA",
"agents": [{
"mac": "8C:DE:F9:92:80:E0",
"agents": [{
"mac": "A4:39:B6:09:1E:00",
"agents": {},
"bridgeif": {
"1": "WLAN2G",
"0": "WLAN2G",
"3": "WLAN5G",
"2": "WLAN2G",
"5": "ETHER",
"4": "WLAN5G",
"6": "ETHER"
},
"medium": "WLAN2G",
"stas": {
"A0:D3:C1:25:45:F71": {
"medium": "ETHER"
},
},
"ip": "192.168.199.218"
}],
"bridgeif": {
"1": "WLAN5G",
"0": "WLAN5G",
"3": "WLAN2G",
"2": "WLAN2G",
"5": "ETHER",
"4": "ETHER",
"7": "ETHER",
"6": "ETHER"
},
"medium": "ETHER",
"stas": {},
"ip": "192.168.199.236"
}],
"bridgeif": {
"eth2": "ETHER",
"eth4": "ETHER",
"ath0": "WLAN5G",
"ath1": "WLAN2G",
"ath18": "WLAN2G",
"ath08": "WLAN5G"
},
"ip": "192.168.199.1",
"stas": {
"A0:D3:C1:25:45:F7": {
"medium": "ETHER"
}
},
"agentr": {}
}
var id = 0;
var echarts_nodes = [{
id: id += 1,
label: `主路由\nAL_MAC：${data.mac}\n`,
mac: data.mac,
color: {
border: "#70C0C9",
background: '#33424a',
highlight: {
border: '#70C0C9',
background: '#33424a'
},
hover: {
border: '#70C0C9',
background: '#33424a'
}
},
font: { color: '#70C0C9' },
}]
var echarts_edges = [{ from: 1, color: { color: "#8bf7ff" } },]
function Recursion(data, parent_id) {
// 路由器
if (data.agents && JSON.stringify(data.agents) !== "{}") {
data.agents.map((item, index) => {
echarts_nodes.push({
id: id += 1,
label: `从路由器\nAL_MAC：${item.mac}\n接入方式：${item.medium}\n`,
mac: item.mac,
color: { border: "#5CB682", background: '#2b343a', },
font: { color: '#5CB682' },
})
echarts_edges.push({ from: id, to: parent_id, color: { color: "#5CB682" } })
if (item.agents) {
Recursion(item, id)
}
})
}
// 手机
if (data.stas && JSON.stringify(data.stas) !== "{}") {
for (const key in data.stas) {
if (Object.hasOwnProperty.call(data.stas, key)) {
echarts_nodes.push({
id: id += 1,
label: `客户端\nMAC：${key}\n接入方式：${data.stas[key].medium}\n`,
mac: key,
color: { border: "#FFFFFF", background: '#3c3e47', },
font: { color: '#FFFFFF' },
})
echarts_edges.push({ from: id, to: parent_id })
}
}
}
}
Recursion(data, id)
// create a network
var container = document.getElementById("mynetwork");
var data1 = {
nodes: new vis.DataSet(echarts_nodes),
edges: new vis.DataSet(echarts_edges),
};
var options = {
height: '100%',
'100%',
layout: {
hierarchical: {
direction: "DU",
sortMethod: "directed",
levelSeparation: 150
},
},
edges: {
// dashes: true,
arrows: "to",
chosen: false
},
nodes: {
margin: 10,
shape: "box",
font: { align: "left" },
chosen: false
},
physics: {
hierarchicalRepulsion: {
avoidOverlap: 1,
}
},
};
var network = new vis.Network(container, data1, options);
</script>
</html>
https://ame.cool/core/frontend-tools/
https://visjs.github.io/vis-network/examples/