mirror of
https://github.com/lbl8603/vnts.git
synced 2025-12-24 12:47:51 +08:00
组织节点
This commit is contained in:
lubeilin
0
static/css/index.css
Normal file
0
static/css/index.css
Normal file
192
static/css/select.css
Normal file
192
static/css/select.css
Normal file
@@ -0,0 +1,192 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
background-color: #f2f2f2;
|
||||
}
|
||||
|
||||
.bigbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 40px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .1);
|
||||
}
|
||||
|
||||
.bigbox > input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.bigbox > label {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 240px;
|
||||
font-size: 20px;
|
||||
color: #666;
|
||||
padding-left: 20px;
|
||||
/* 光标样式
|
||||
1）、div{ cursor:default }默认正常鼠标指针
|
||||
2）、div{ cursor:hand }和div{ cursor:text } 文本选择效果
|
||||
3）、div{ cursor:move } 移动选择效果
|
||||
4）、div{ cursor:pointer } 手指形状 链接选择效果
|
||||
5）、div{ cursor:url(url图片地址) }设置对象为图片 */
|
||||
cursor: pointer;
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.bigbox ul {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 240px;
|
||||
height: 100vh;
|
||||
background-color: #2b3044;
|
||||
transition: all .5s;
|
||||
|
||||
}
|
||||
|
||||
.bigbox ul li {
|
||||
width: 100%;
|
||||
height: 70px;
|
||||
margin-bottom: 10px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.bigbox ul li:first-child {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 40px;
|
||||
|
||||
}
|
||||
|
||||
.bigbox ul li:first-child img {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
border-radius: 50%;
|
||||
margin: 0 25px;
|
||||
}
|
||||
|
||||
.bigbox ul li:first-child span {
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.bigbox ul li a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
color: #d2d2d2;
|
||||
|
||||
text-decoration: none;
|
||||
transition: all .5s;
|
||||
}
|
||||
|
||||
.bigbox ul li a img {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 0 25px;
|
||||
}
|
||||
|
||||
.bigbox ul li a span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.bigbox ul li a:hover {
|
||||
color: #fff;
|
||||
background-color: rgb(47, 183, 204);
|
||||
}
|
||||
|
||||
.bigbox input:checked + label {
|
||||
left: 0;
|
||||
}
|
||||
|
||||
/* 图片旋转 */
|
||||
/* .bigbox input:checked + label img {
|
||||
transform: rotateX(180deg);
|
||||
} */
|
||||
|
||||
.bigbox input:checked ~ ul {
|
||||
left: -240px;
|
||||
}
|
||||
|
||||
|
||||
/*下拉*/
|
||||
.topBox {
|
||||
position: relative;
|
||||
height: 98px;
|
||||
padding-top: 20px;
|
||||
margin-left: 300px;
|
||||
}
|
||||
|
||||
/* 下拉菜单按钮 */
|
||||
|
||||
|
||||
.select-content {
|
||||
position: relative;
|
||||
margin-left: 65px;
|
||||
}
|
||||
|
||||
.select-content .select-input {
|
||||
background-image: url('../svg/搜索.svg');
|
||||
background-position: 14px 12px;
|
||||
background-repeat: no-repeat;
|
||||
font-size: 16px;
|
||||
padding: 14px 20px 12px 45px;
|
||||
border: none;
|
||||
border-bottom: 1px solid #ddd;
|
||||
width: 300px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.select-content .dot-bottom {
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border-width: 5px;
|
||||
border-color: #6a6a6a;
|
||||
border-bottom-width: 0;
|
||||
border-style: dashed;
|
||||
border-top-style: solid;
|
||||
border-left-color: transparent;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.select-content .search-select {
|
||||
display: none;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 52px;
|
||||
z-index: 999;
|
||||
min-width: 300px;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
border: 1px solid #799bd2;
|
||||
background-color: #f0f0f0;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.select-content .search-select .select-ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.select-content .search-select .select-ul .li-select {
|
||||
color: #555;
|
||||
padding: 2px 10px;
|
||||
cursor: pointer;
|
||||
line-height: 40px;
|
||||
|
||||
}
|
||||
|
||||
.select-content .search-select .select-ul .li-hover {
|
||||
color: #fff;
|
||||
background-color: #1e90ff;
|
||||
}
|
||||
|
||||
|
||||
11
static/html/node.html
Normal file
11
static/html/node.html
Normal file
@@ -0,0 +1,11 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>vnts-web</title>
|
||||
<script src="./js/g6.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -2,9 +2,250 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="./js/jquery-3.7.1.min.js"></script>
|
||||
<script src="./js/g6.min.js"></script>
|
||||
<link rel="stylesheet" href="./css/select.css">
|
||||
<title>vnts-web</title>
|
||||
<style>
|
||||
|
||||
.select-content:before {
|
||||
content: "组网标识";
|
||||
position: absolute;
|
||||
left: -76px;
|
||||
line-height: 48px;
|
||||
}
|
||||
|
||||
#container_content {
|
||||
position: relative;
|
||||
margin-left: 240px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
#container {
|
||||
height: calc(100vh - 260px);
|
||||
}
|
||||
|
||||
#group_info {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.network_info > div {
|
||||
height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="bigbox">
|
||||
<!-- 点击效果 -->
|
||||
<!-- <input type="checkbox" id="checkbox"/>
|
||||
<label for="checkbox">
|
||||
<img src="./svg/组网交换机.sxvg" alt="功能按钮">
|
||||
<img src="./svg/组网交换机.sxvg" alt="功能按钮">
|
||||
<img src="./svg/组网交换机.sxvg" alt="功能按钮">
|
||||
</label>-->
|
||||
<ul>
|
||||
<li>
|
||||
<img src="./svg/组网交换机.svg" alt="VNT"/>
|
||||
<span>VNT</span>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="svg/组网管理.svg" alt="1">
|
||||
<span>组网管理</span>
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">
|
||||
<img src="./svg/控制面板.svg" alt="3">
|
||||
<span>控制面板</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
</div>
|
||||
<div class="topBox">
|
||||
<div class="select-content">
|
||||
<!-- <label>组网标识：</label>-->
|
||||
<input type="hidden" name="newMachineId">
|
||||
<input type="text" name="select_input" id="select_input" class="select-input" value="" autocomplete="off"
|
||||
placeholder="Search..."/>
|
||||
<div id="search_select" class="search-select">
|
||||
<ul id="select_ul" class="select-ul">
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="container_content">
|
||||
<div id="group_info">
|
||||
<div class="network_info">
|
||||
<div class="gateway_ip"></div>
|
||||
<div class="mask_ip"></div>
|
||||
<div class="network_ip"></div>
|
||||
</div>
|
||||
<div id="container">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
function getRootPath() {
|
||||
return window.location.protocol + '//' + window.location.host + '/'
|
||||
}
|
||||
|
||||
function getUrl(url) {
|
||||
return getRootPath() + url
|
||||
}
|
||||
</script>
|
||||
<script>
|
||||
/* 点击按钮设置下拉菜单的显示与隐藏 */
|
||||
|
||||
function newOptions(tempArr) {
|
||||
var listArr = [];
|
||||
for (var i = 0; i < tempArr.length; i++) {
|
||||
if (tempArr[i].indexOf($('#select_input').val()) > -1) {
|
||||
listArr.push(tempArr[i]);
|
||||
}
|
||||
}
|
||||
var options = '';
|
||||
for (var i = 0; i < listArr.length; i++) {
|
||||
opt = '<li class="li-select" data-newMachineId="' + listArr[i] + '">' + listArr[i] + '</li>';
|
||||
options += opt;
|
||||
}
|
||||
if (options == '') {
|
||||
$('#search_select').hide();
|
||||
} else {
|
||||
$('#search_select').show();
|
||||
$('#select_ul').html('').append(options);
|
||||
}
|
||||
}
|
||||
|
||||
function searchInput(tempArr) {
|
||||
$('#select_input').on('keyup', function () {
|
||||
newOptions(tempArr);
|
||||
});
|
||||
$('#select_input').on('focus', function () {
|
||||
$('#search_select').show();
|
||||
newOptions(tempArr);
|
||||
});
|
||||
$('#select_ul .li-disabled').on('click', function () {
|
||||
$('#search_select').show();
|
||||
});
|
||||
$('#search_select').on('mouseover', function () {
|
||||
$(this).addClass('ul-hover');
|
||||
});
|
||||
$('#search_select').on('mouseout', function () {
|
||||
$(this).removeClass('ul-hover');
|
||||
});
|
||||
$('#select_input').on('blur', function () {
|
||||
if ($('#search_select').hasClass('ul-hover')) {
|
||||
$('#search_select').show();
|
||||
} else {
|
||||
$('#search_select').hide();
|
||||
}
|
||||
});
|
||||
$('#select_ul').delegate('.li-select', 'click', function () {
|
||||
$('#select_ul .li-select').removeClass('li-hover');
|
||||
var selectText = $(this).html();
|
||||
var newMachineIdVal = $($(this)[0]).attr("data-newMachineId");
|
||||
$('#select_input').val(selectText);
|
||||
$('#search_select').hide();
|
||||
$("input[name='newMachineId']").val(newMachineIdVal);
|
||||
console.log(newMachineIdVal);
|
||||
getGroupInfoFunc(newMachineIdVal)
|
||||
|
||||
});
|
||||
$('#select_ul').delegate('.li-select', 'mouseover', function () {
|
||||
$('#select_ul .li-select').removeClass('li-hover');
|
||||
$(this).addClass('li-hover');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
<script src="./js/group_node.js"></script>
|
||||
<script>
|
||||
let nodeInitFunc = function (gateway_ip, clients) {
|
||||
let nodes = [{
|
||||
id: gateway_ip,
|
||||
label: gateway_ip,
|
||||
x: 0,
|
||||
y: 0,
|
||||
type: 'ellipse',
|
||||
size: [80, 60],
|
||||
icon: {
|
||||
show: true,
|
||||
img: './svg/路由器.svg',
|
||||
width: 40,
|
||||
height: 40,
|
||||
},
|
||||
labelCfg: {
|
||||
style: {
|
||||
fill: '#1890ff',
|
||||
fontSize: 14,
|
||||
background: {
|
||||
fill: '#ffffff',
|
||||
stroke: '#9EC9FF',
|
||||
padding: [2, 2, 2, 2],
|
||||
radius: 2,
|
||||
},
|
||||
},
|
||||
position: 'bottom',
|
||||
}
|
||||
}];
|
||||
let edges = [];
|
||||
let n = 1;
|
||||
for (let index in clients) {
|
||||
n++;
|
||||
let client = clients[index];
|
||||
let node = {
|
||||
id: client.virtual_ip,
|
||||
name: '',
|
||||
ip: client.virtual_ip,
|
||||
nodeError: !client.online,
|
||||
dataType: client.name,
|
||||
keyInfo: client.address,
|
||||
x: (n % 4) * 260,
|
||||
y: (n / 4) * 200
|
||||
};
|
||||
nodes.push(node);
|
||||
if (client.online) {
|
||||
edges.push({
|
||||
source: gateway_ip,
|
||||
target: client.virtual_ip,
|
||||
})
|
||||
}
|
||||
}
|
||||
const data = {
|
||||
nodes: nodes,
|
||||
edges: edges,
|
||||
};
|
||||
|
||||
graph.data(data);
|
||||
graph.render();
|
||||
}
|
||||
let getGroupInfoFunc = function (group) {
|
||||
$.ajax({
|
||||
url: getUrl("group_info?group=") + encodeURIComponent(group), success: function (result) {
|
||||
console.log(result);
|
||||
let data = result.data;
|
||||
$('.gateway_ip').html(data.gateway_ip);
|
||||
$('.mask_ip').html(data.mask_ip);
|
||||
$('.network_ip').html(data.network_ip);
|
||||
|
||||
nodeInitFunc(data.gateway_ip, data.clients);
|
||||
$('#group_info').css("visibility", "visible")
|
||||
}
|
||||
});
|
||||
}
|
||||
$.ajax({
|
||||
url: getUrl("group_list"), success: function (result) {
|
||||
let group_list = result.data.group_list;
|
||||
console.log(group_list);
|
||||
searchInput(group_list);
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
</html>
|
||||
31
static/js/g6.min.js
vendored
Normal file
31
static/js/g6.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
447
static/js/group_node.js
Normal file
447
static/js/group_node.js
Normal file
@@ -0,0 +1,447 @@
|
||||
let graph;
|
||||
const ERROR_COLOR = '#F5222D';
|
||||
const getNodeConfig = (node) => {
|
||||
if (node.nodeError) {
|
||||
return {
|
||||
basicColor: ERROR_COLOR,
|
||||
fontColor: '#FFF',
|
||||
borderColor: ERROR_COLOR,
|
||||
bgColor: '#E66A6C',
|
||||
};
|
||||
}
|
||||
let config = {
|
||||
basicColor: '#5B8FF9',
|
||||
fontColor: '#5B8FF9',
|
||||
borderColor: '#5B8FF9',
|
||||
bgColor: '#C6E5FF',
|
||||
};
|
||||
switch (node.type) {
|
||||
case 'root': {
|
||||
config = {
|
||||
basicColor: '#E3E6E8',
|
||||
fontColor: 'rgba(0,0,0,0.85)',
|
||||
borderColor: '#E3E6E8',
|
||||
bgColor: '#5b8ff9',
|
||||
};
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
return config;
|
||||
};
|
||||
|
||||
const COLLAPSE_ICON = function COLLAPSE_ICON(x, y, r) {
|
||||
return [
|
||||
['M', x - r, y],
|
||||
['a', r, r, 0, 1, 0, r * 2, 0],
|
||||
['a', r, r, 0, 1, 0, -r * 2, 0],
|
||||
['M', x - r + 4, y],
|
||||
['L', x - r + 2 * r - 4, y],
|
||||
];
|
||||
};
|
||||
const EXPAND_ICON = function EXPAND_ICON(x, y, r) {
|
||||
return [
|
||||
['M', x - r, y],
|
||||
['a', r, r, 0, 1, 0, r * 2, 0],
|
||||
['a', r, r, 0, 1, 0, -r * 2, 0],
|
||||
['M', x - r + 4, y],
|
||||
['L', x - r + 2 * r - 4, y],
|
||||
['M', x - r + r, y - r + 4],
|
||||
['L', x, y + r - 4],
|
||||
];
|
||||
};
|
||||
const nodeBasicMethod = {
|
||||
createNodeBox: (group, config, w, h, isRoot) => {
|
||||
/* 最外面的大矩形 */
|
||||
const container = group.addShape('rect', {
|
||||
attrs: {
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: w,
|
||||
height: h,
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'big-rect-shape',
|
||||
});
|
||||
if (!isRoot) {
|
||||
/* 左边的小圆点 */
|
||||
group.addShape('circle', {
|
||||
attrs: {
|
||||
x: 3,
|
||||
y: h / 2,
|
||||
r: 6,
|
||||
fill: config.basicColor,
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'left-dot-shape',
|
||||
});
|
||||
}
|
||||
/* 矩形 */
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: 3,
|
||||
y: 0,
|
||||
width: w - 19,
|
||||
height: h,
|
||||
fill: config.bgColor,
|
||||
stroke: config.borderColor,
|
||||
radius: 2,
|
||||
cursor: 'move',
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'rect-shape',
|
||||
draggable: true,
|
||||
});
|
||||
|
||||
/* 左边的粗线 */
|
||||
group.addShape('rect', {
|
||||
attrs: {
|
||||
x: 3,
|
||||
y: 0,
|
||||
width: 3,
|
||||
height: h,
|
||||
fill: config.basicColor,
|
||||
radius: 1.5,
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'left-border-shape',
|
||||
});
|
||||
return container;
|
||||
},
|
||||
/* 生成树上的 marker */
|
||||
createNodeMarker: (group, collapsed, x, y) => {
|
||||
group.addShape('circle', {
|
||||
attrs: {
|
||||
x,
|
||||
y,
|
||||
r: 13,
|
||||
fill: 'rgba(47, 84, 235, 0.05)',
|
||||
opacity: 0,
|
||||
zIndex: -2,
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'collapse-icon-bg',
|
||||
});
|
||||
group.addShape('marker', {
|
||||
attrs: {
|
||||
x,
|
||||
y,
|
||||
r: 7,
|
||||
symbol: collapsed ? EXPAND_ICON : COLLAPSE_ICON,
|
||||
stroke: 'rgba(0,0,0,0.25)',
|
||||
fill: 'rgba(0,0,0,0)',
|
||||
lineWidth: 1,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'collapse-icon',
|
||||
});
|
||||
},
|
||||
afterDraw: (cfg, group) => {
|
||||
/* 操作 marker 的背景色显示隐藏 */
|
||||
const icon = group.find((element) => element.get('name') === 'collapse-icon');
|
||||
if (icon) {
|
||||
const bg = group.find((element) => element.get('name') === 'collapse-icon-bg');
|
||||
icon.on('mouseenter', () => {
|
||||
bg.attr('opacity', 1);
|
||||
graph.get('canvas').draw();
|
||||
});
|
||||
icon.on('mouseleave', () => {
|
||||
bg.attr('opacity', 0);
|
||||
graph.get('canvas').draw();
|
||||
});
|
||||
}
|
||||
/* ip 显示 */
|
||||
const ipBox = group.find((element) => element.get('name') === 'ip-box');
|
||||
if (ipBox) {
|
||||
/* ip 复制的几个元素 */
|
||||
const ipLine = group.find((element) => element.get('name') === 'ip-cp-line');
|
||||
const ipBG = group.find((element) => element.get('name') === 'ip-cp-bg');
|
||||
const ipIcon = group.find((element) => element.get('name') === 'ip-cp-icon');
|
||||
const ipCPBox = group.find((element) => element.get('name') === 'ip-cp-box');
|
||||
|
||||
const onMouseEnter = () => {
|
||||
ipLine.attr('opacity', 1);
|
||||
ipBG.attr('opacity', 1);
|
||||
ipIcon.attr('opacity', 1);
|
||||
graph.get('canvas').draw();
|
||||
};
|
||||
const onMouseLeave = () => {
|
||||
ipLine.attr('opacity', 0);
|
||||
ipBG.attr('opacity', 0);
|
||||
ipIcon.attr('opacity', 0);
|
||||
graph.get('canvas').draw();
|
||||
};
|
||||
ipBox.on('mouseenter', () => {
|
||||
onMouseEnter();
|
||||
});
|
||||
ipBox.on('mouseleave', () => {
|
||||
onMouseLeave();
|
||||
});
|
||||
ipCPBox.on('mouseenter', () => {
|
||||
onMouseEnter();
|
||||
});
|
||||
ipCPBox.on('mouseleave', () => {
|
||||
onMouseLeave();
|
||||
});
|
||||
ipCPBox.on('click', () => {
|
||||
});
|
||||
}
|
||||
},
|
||||
setState: (name, value, item) => {
|
||||
const hasOpacityClass = [
|
||||
'ip-cp-line',
|
||||
'ip-cp-bg',
|
||||
'ip-cp-icon',
|
||||
'ip-cp-box',
|
||||
'ip-box',
|
||||
'collapse-icon-bg',
|
||||
];
|
||||
const group = item.getContainer();
|
||||
const childrens = group.get('children');
|
||||
graph.setAutoPaint(false);
|
||||
if (name === 'emptiness') {
|
||||
if (value) {
|
||||
childrens.forEach((shape) => {
|
||||
if (hasOpacityClass.indexOf(shape.get('name')) > -1) {
|
||||
return;
|
||||
}
|
||||
shape.attr('opacity', 0.4);
|
||||
});
|
||||
} else {
|
||||
childrens.forEach((shape) => {
|
||||
if (hasOpacityClass.indexOf(shape.get('name')) > -1) {
|
||||
return;
|
||||
}
|
||||
shape.attr('opacity', 1);
|
||||
});
|
||||
}
|
||||
}
|
||||
graph.setAutoPaint(true);
|
||||
},
|
||||
};
|
||||
|
||||
G6.registerNode('card-node', {
|
||||
draw: (cfg, group) => {
|
||||
const config = getNodeConfig(cfg);
|
||||
const isRoot = cfg.dataType === 'root';
|
||||
const nodeError = cfg.nodeError;
|
||||
/* the biggest rect */
|
||||
const container = nodeBasicMethod.createNodeBox(group, config, 243, 64, isRoot);
|
||||
|
||||
// if (cfg.dataType !== 'root') {
|
||||
/* the type text */
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
text: cfg.dataType,
|
||||
x: 3,
|
||||
y: -10,
|
||||
fontSize: 12,
|
||||
textAlign: 'left',
|
||||
textBaseline: 'middle',
|
||||
fill: 'rgba(0,0,0,0.65)',
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'type-text-shape',
|
||||
});
|
||||
// }
|
||||
|
||||
if (cfg.ip) {
|
||||
/* ip start */
|
||||
/* ipBox */
|
||||
const ipRect = group.addShape('rect', {
|
||||
attrs: {
|
||||
fill: nodeError ? null : '#FFF',
|
||||
stroke: nodeError ? 'rgba(255,255,255,0.65)' : null,
|
||||
radius: 2,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'ip-container-shape',
|
||||
});
|
||||
|
||||
/* ip */
|
||||
const ipText = group.addShape('text', {
|
||||
attrs: {
|
||||
text: cfg.ip,
|
||||
x: 0,
|
||||
y: 19,
|
||||
fontSize: 12,
|
||||
textAlign: 'left',
|
||||
textBaseline: 'middle',
|
||||
fill: nodeError ? 'rgba(255,255,255,0.85)' : 'rgba(0,0,0,0.65)',
|
||||
cursor: 'pointer',
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'ip-text-shape',
|
||||
});
|
||||
|
||||
const ipBBox = ipText.getBBox();
|
||||
/* the distance from the IP to the right is 12px */
|
||||
ipText.attr({
|
||||
x: 224 - 12 - ipBBox.width,
|
||||
});
|
||||
/* ipBox */
|
||||
ipRect.attr({
|
||||
x: 224 - 12 - ipBBox.width - 4,
|
||||
y: ipBBox.minY - 5,
|
||||
width: ipBBox.width + 8,
|
||||
height: ipBBox.height + 10,
|
||||
});
|
||||
|
||||
// /* a transparent shape on the IP for click listener */
|
||||
// group.addShape('rect', {
|
||||
// attrs: {
|
||||
// stroke: '',
|
||||
// cursor: 'pointer',
|
||||
// x: 224 - 12 - ipBBox.width - 4,
|
||||
// y: ipBBox.minY - 5,
|
||||
// width: ipBBox.width + 8,
|
||||
// height: ipBBox.height + 10,
|
||||
// fill: '#fff',
|
||||
// opacity: 0,
|
||||
// },
|
||||
// // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
// name: 'ip-box',
|
||||
// });
|
||||
//
|
||||
// /* copyIpLine */
|
||||
// group.addShape('rect', {
|
||||
// attrs: {
|
||||
// x: 194,
|
||||
// y: 7,
|
||||
// width: 1,
|
||||
// height: 24,
|
||||
// fill: '#E3E6E8',
|
||||
// opacity: 0,
|
||||
// },
|
||||
// // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
// name: 'ip-cp-line',
|
||||
// });
|
||||
// /* copyIpBG */
|
||||
// group.addShape('rect', {
|
||||
// attrs: {
|
||||
// x: 195,
|
||||
// y: 8,
|
||||
// width: 22,
|
||||
// height: 22,
|
||||
// fill: '#FFF',
|
||||
// cursor: 'pointer',
|
||||
// opacity: 0,
|
||||
// },
|
||||
// // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
// name: 'ip-cp-bg',
|
||||
// });
|
||||
// /* copyIpIcon */
|
||||
// group.addShape('image', {
|
||||
// attrs: {
|
||||
// x: 200,
|
||||
// y: 13,
|
||||
// height: 12,
|
||||
// width: 10,
|
||||
// img: 'https://os.alipayobjects.com/rmsportal/DFhnQEhHyPjSGYW.png',
|
||||
// cursor: 'pointer',
|
||||
// opacity: 0,
|
||||
// },
|
||||
// // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
// name: 'ip-cp-icon',
|
||||
// });
|
||||
// /* a transparent rect on the icon area for click listener */
|
||||
// group.addShape('rect', {
|
||||
// attrs: {
|
||||
// x: 195,
|
||||
// y: 8,
|
||||
// width: 22,
|
||||
// height: 22,
|
||||
// fill: '#FFF',
|
||||
// cursor: 'pointer',
|
||||
// opacity: 0,
|
||||
// },
|
||||
// // must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
// name: 'ip-cp-box',
|
||||
// tooltip: 'Copy the IP',
|
||||
// });
|
||||
|
||||
/* ip end */
|
||||
}
|
||||
|
||||
/* name */
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
text: cfg.name,
|
||||
x: 19,
|
||||
y: 19,
|
||||
fontSize: 14,
|
||||
fontWeight: 700,
|
||||
textAlign: 'left',
|
||||
textBaseline: 'middle',
|
||||
fill: config.fontColor,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'name-text-shape',
|
||||
});
|
||||
|
||||
/* the description text */
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
text: cfg.keyInfo,
|
||||
x: 19,
|
||||
y: 45,
|
||||
fontSize: 14,
|
||||
textAlign: 'left',
|
||||
textBaseline: 'middle',
|
||||
fill: config.fontColor,
|
||||
cursor: 'pointer',
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'bottom-text-shape',
|
||||
});
|
||||
|
||||
if (nodeError) {
|
||||
group.addShape('text', {
|
||||
attrs: {
|
||||
x: 191,
|
||||
y: 62,
|
||||
text: '⚠️',
|
||||
fill: '#000',
|
||||
fontSize: 18,
|
||||
},
|
||||
// must be assigned in G6 3.3 and later versions. it can be any string you want, but should be unique in a custom item type
|
||||
name: 'error-text-shape',
|
||||
});
|
||||
}
|
||||
|
||||
const hasChildren = cfg.children && cfg.children.length > 0;
|
||||
if (hasChildren) {
|
||||
nodeBasicMethod.createNodeMarker(group, cfg.collapsed, 236, 32);
|
||||
}
|
||||
return container;
|
||||
},
|
||||
afterDraw: nodeBasicMethod.afterDraw,
|
||||
setState: nodeBasicMethod.setState,
|
||||
});
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const width = container.scrollWidth;
|
||||
const height = container.scrollHeight || 600;
|
||||
graph = new G6.Graph({
|
||||
container: 'container',
|
||||
width,
|
||||
height,
|
||||
// translate the graph to align the canvas's center, support by v3.5.1
|
||||
fitCenter: true,
|
||||
modes: {
|
||||
default: ['drag-node'],
|
||||
},
|
||||
defaultNode: {
|
||||
type: 'card-node',
|
||||
},
|
||||
defaultEdge: {
|
||||
type: 'extra-shape-edge',
|
||||
style: {
|
||||
stroke: '#F6BD16',
|
||||
},
|
||||
},
|
||||
});
|
||||
2
static/js/jquery-3.7.1.min.js
vendored
Normal file
2
static/js/jquery-3.7.1.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
static/svg/控制面板.svg
Normal file
1
static/svg/控制面板.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710855086662" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6655" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M102.4 0h257.6384a102.4 102.4 0 0 1 102.4 102.4v389.7856a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4z m561.5616 429.4144H921.6a102.4 102.4 0 0 1 102.4 102.4V921.6a102.4 102.4 0 0 1-102.4 102.4h-257.6384a102.4 102.4 0 0 1-102.4-102.4v-389.7856a102.4 102.4 0 0 1 102.4-102.4z m0-429.4144H921.6a102.4 102.4 0 0 1 102.4 102.4v191.5904a102.4 102.4 0 0 1-102.4 102.4h-257.6384a102.4 102.4 0 0 1-102.4-102.4V102.4a102.4 102.4 0 0 1 102.4-102.4zM102.4 627.6096h257.6384a102.4 102.4 0 0 1 102.4 102.4V921.6a102.4 102.4 0 0 1-102.4 102.4H102.4a102.4 102.4 0 0 1-102.4-102.4v-191.5904a102.4 102.4 0 0 1 102.4-102.4z" fill="#4DA1FF" p-id="6656"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
1
static/svg/搜索.svg
Normal file
1
static/svg/搜索.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710856240218" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8767" width="16" height="16" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M812.137931 406.068966C812.137931 181.803269 630.334658 0 406.068966 0 181.803273 0 0 181.803269 0 406.068966 0 630.334662 181.803273 812.137931 406.068966 812.137931 630.334658 812.137931 812.137931 630.334662 812.137931 406.068966ZM70.62069 406.068966C70.62069 220.805999 220.806003 70.62069 406.068966 70.62069 591.331928 70.62069 741.517241 220.805999 741.517241 406.068966 741.517241 591.331932 591.331928 741.517241 406.068966 741.517241 220.806003 741.517241 70.62069 591.331932 70.62069 406.068966ZM963.201748 1013.13812C976.991303 1026.927667 999.348577 1026.927667 1013.138114 1013.13812 1026.927669 999.348572 1026.927669 976.991299 1013.138114 963.201751L713.519916 663.583539C699.730361 649.793993 677.373087 649.793993 663.583532 663.583539 649.793995 677.373087 649.793995 699.730361 663.583532 713.519909L963.201748 1013.13812Z" fill="#389BFF" p-id="8768"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
1
static/svg/组网交换机.svg
Normal file
1
static/svg/组网交换机.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 8.3 KiB |
1
static/svg/组网管理.svg
Normal file
1
static/svg/组网管理.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 5.3 KiB |
1
static/svg/路由器.svg
Normal file
1
static/svg/路由器.svg
Normal file
@@ -0,0 +1 @@
|
||||
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1710950953045" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4544" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><path d="M891.4 872.2H134.6c-33.2 0-60.2-27-60.2-60.2V611.2c0-33.2 27-60.2 60.2-60.2h756.8c33.2 0 60.2 27 60.2 60.2V812c-0.1 33.3-27 60.2-60.2 60.2z" fill="#CBE4FE" p-id="4545"></path><path d="M247.6 586.7h-3.1c-14 0-25.3-11.3-25.3-25.3V162.1c0-14 11.3-25.3 25.3-25.3h3.1c14 0 25.3 11.3 25.3 25.3v399.3c0 14-11.3 25.3-25.3 25.3z" fill="#CBE4FE" p-id="4546"></path><path d="M247.6 601.6h-3.1c-22.2 0-40.3-18-40.3-40.3V162.1c0-22.2 18-40.3 40.3-40.3h3.1c22.2 0 40.3 18 40.3 40.3v399.3c-0.1 22.2-18.1 40.2-40.3 40.2z m-3.1-449.8c-5.7 0-10.4 4.6-10.4 10.4v399.3c0 5.7 4.6 10.4 10.4 10.4h3.1c5.7 0 10.4-4.6 10.4-10.4V162.1c0-5.7-4.6-10.4-10.4-10.4h-3.1v0.1z" fill="#1B81FC" p-id="4547"></path><path d="M783.4 586.7h-3.1c-14 0-25.3-11.3-25.3-25.3V162.1c0-14 11.3-25.3 25.3-25.3h3.1c14 0 25.3 11.3 25.3 25.3v399.3c-0.1 14-11.4 25.3-25.3 25.3z" fill="#CBE4FE" p-id="4548"></path><path d="M783.4 601.6h-3.1c-22.2 0-40.3-18-40.3-40.3V162.1c0-22.2 18-40.3 40.3-40.3h3.1c22.2 0 40.3 18 40.3 40.3v399.3c-0.2 22.2-18.2 40.2-40.3 40.2z m-3.2-449.8c-5.7 0-10.4 4.6-10.4 10.4v399.3c0 5.7 4.6 10.4 10.4 10.4h3.1c5.7 0 10.4-4.6 10.4-10.4V162.1c0-5.7-4.6-10.4-10.4-10.4h-3.1v0.1z" fill="#1B81FC" p-id="4549"></path><path d="M878.9 831.1H149c-33.2 0-60.2-27-60.2-60.2v-191c0-33.2 27-60.2 60.2-60.2h729.8c33.2 0 60.2 27 60.2 60.2V771c-0.1 33.3-27 60.1-60.1 60.1z" fill="#FFFFFF" p-id="4550"></path><path d="M878.9 846H149c-41.4 0-75.1-33.7-75.1-75.1v-191c0-41.4 33.7-75.1 75.1-75.1h729.8c41.4 0 75.1 33.7 75.1 75.1V771c0 41.3-33.7 75-75 75zM149 534.5c-24.9 0-45.3 20.3-45.3 45.3V771c0 24.9 20.3 45.3 45.3 45.3h729.8c24.9 0 45.3-20.3 45.3-45.3V579.9c0-24.9-20.3-45.3-45.3-45.3l-729.8-0.1z" fill="#1B81FC" p-id="4551"></path><path d="M708.6 739H340c-47 0-85 38-85 85v5.4h538.5V824c0.1-47-37.9-85-84.9-85z" fill="#CBE4FE" p-id="4552"></path><path d="M808.5 844.2H240.1v-20.3c0-55 44.9-99.9 99.9-99.9h368.6c55 0 99.9 44.9 99.9 99.9v20.3z m-537.9-29.8h507.5c-4.6-34.1-34-60.5-69.5-60.5H340c-35.3 0-64.7 26.4-69.4 60.5z" fill="#1B81FC" p-id="4553"></path><path d="M460.8 658.4c-8.2 0-14.9-6.7-14.9-14.9 0-16.7-13.6-30.1-30.1-30.1s-30.1 13.6-30.1 30.1c0 8.2-6.7 14.9-14.9 14.9s-14.9-6.7-14.9-14.9c0-33.1 26.8-59.9 59.9-59.9s59.9 26.8 59.9 59.9c0 8.2-6.6 14.9-14.9 14.9z" fill="#1B81FC" p-id="4554"></path><path d="M656.3 658.4c-8.2 0-14.9-6.7-14.9-14.9 0-16.7-13.6-30.1-30.1-30.1-16.7 0-30.1 13.6-30.1 30.1 0 8.2-6.7 14.9-14.9 14.9s-14.9-6.7-14.9-14.9c0-33.1 26.8-59.9 59.9-59.9s59.9 26.8 59.9 59.9c0 8.2-6.7 14.9-14.9 14.9z" fill="#1B81FC" p-id="4555"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.8 KiB |
Reference in New Issue
Block a user