...
|
...
|
@@ -74,19 +74,18 @@ |
|
|
|
|
|
<style>
|
|
|
.node-container{
|
|
|
position: relative;
|
|
|
//position: relative;
|
|
|
//position: absolute;
|
|
|
z-index: 9999;
|
|
|
width: 300px;
|
|
|
height: 100px;
|
|
|
height: 106px;
|
|
|
border: 1px solid #999;
|
|
|
border-radius: 3px;
|
|
|
overflow: hidden;
|
|
|
|
|
|
}
|
|
|
|
|
|
.node-container .node-container-title{
|
|
|
color: white;
|
|
|
// color: white;
|
|
|
font-size: 2em;
|
|
|
float:left;
|
|
|
height:40px;
|
...
|
...
|
@@ -95,7 +94,7 @@ |
|
|
.node-container .node-container-content{
|
|
|
margin-top:40px;
|
|
|
height: 100%;
|
|
|
background-color: white;
|
|
|
background-color: red;
|
|
|
}
|
|
|
|
|
|
.node-container .node-container-title-button-div{
|
...
|
...
|
@@ -180,6 +179,26 @@ |
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
function drawHtml2(cfg) {
|
|
|
var model = cfg.model;
|
|
|
var container = Util.createDOM('<div class="node-container"></div>');
|
|
|
var title = Util.createDOM('<div class="widget-title" style="height: 36px;"></div>');
|
|
|
|
|
|
if(!model.disabledFlag){
|
|
|
title.appendChild(Util.createDOM('<h5>'+model.label+'</h5>'));
|
|
|
var a = Util.createDOM('<a href="#" onclick="alert(1)" style="float:right;margin-right: 10px;"><H5 style="padding-right:0px;padding-left:0px;"><span class="glyphicon glyphicon-info-sign"></span></H5></a>');
|
|
|
title.appendChild(a);
|
|
|
}else{
|
|
|
title.appendChild(Util.createDOM('<h5>'+model.label+'<small style="margin-left:5px;font-size:8px;color:red;">down</small></h5>'));
|
|
|
}
|
|
|
|
|
|
var content = Util.createDOM('<div class="widget-content" style="height: 70px;">'+model.ip+'</div>');
|
|
|
container.appendChild(title);
|
|
|
container.appendChild(content);
|
|
|
return container;
|
|
|
}
|
|
|
|
|
|
function createTopo(data) {
|
|
|
|
|
|
// 第二步:注册节点
|
...
|
...
|
@@ -192,39 +211,15 @@ |
|
|
G6.registNode('customNode', {
|
|
|
cssSize: true, // 不使用内部 size 作为节点尺寸
|
|
|
getHtml: function(cfg){
|
|
|
var model = cfg.model;
|
|
|
var container = Util.createDOM('<div class="node-container"></div>');
|
|
|
var title = Util.createDOM('<div class="node-container-title">'+model.label+'</div>');
|
|
|
container.appendChild(title);
|
|
|
|
|
|
if(!model.disabledFlag){
|
|
|
var buttonDiv = Util.createDOM('<div class="node-container-title-button-div"></div>');
|
|
|
var btn = Util.createDOM('' +
|
|
|
' <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>' +
|
|
|
' ');
|
|
|
btn.addEventListener('click', function(){
|
|
|
alert(1111);
|
|
|
});
|
|
|
buttonDiv.appendChild(btn);
|
|
|
|
|
|
btn = Util.createDOM('' +
|
|
|
' <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>' +
|
|
|
'');
|
|
|
btn.addEventListener('click', function(){
|
|
|
alert(222);
|
|
|
});
|
|
|
buttonDiv.appendChild(btn);
|
|
|
container.appendChild(buttonDiv);
|
|
|
}
|
|
|
|
|
|
|
|
|
var content = Util.createDOM('<div class="node-container-content">'+model.ip+'</div>');
|
|
|
container.appendChild(content);
|
|
|
return container;
|
|
|
return drawHtml2(cfg);
|
|
|
}
|
|
|
}, 'html');
|
|
|
|
|
|
var nodes = data.nodes;
|
|
|
var edges = data.edges;
|
|
|
|
|
|
var tree = new G6.Net({
|
|
|
behaviourFilter: ['wheelZoom', 'dragNode','dragBlank', 'dragCanvas'],
|
|
|
id: "mhaTopoDiv" , // 此处替换容器id
|
|
|
fitView: 'autoSize' // 自动缩放 autoSize autoZoom
|
|
|
/* ,layoutCfg: {
|
...
|
...
|
@@ -237,27 +232,15 @@ |
|
|
}
|
|
|
}*/
|
|
|
});
|
|
|
tree.source(data.nodes, data.edges);
|
|
|
tree.source(nodes, edges);
|
|
|
tree.node().style({
|
|
|
stroke: null, // 去除默认边框
|
|
|
fillOpacity: 1
|
|
|
}).color( function(obj){
|
|
|
var rst;
|
|
|
})/*.color( function(obj){
|
|
|
if(obj.disabledFlag){
|
|
|
rst = '#aaa';
|
|
|
}else{
|
|
|
if(obj.noMaster==1){
|
|
|
//rst = '#F90426';
|
|
|
//rst = '#87CEEB';
|
|
|
rst = '#3B89CF';
|
|
|
}else{
|
|
|
rst = '#3B89CF';
|
|
|
return '#aaa';
|
|
|
}
|
|
|
|
|
|
|
|
|
}
|
|
|
return rst;
|
|
|
}).label('serverId').shape('customNode');
|
|
|
})*/.label('serverId').shape('customNode');
|
|
|
tree.edge().style({
|
|
|
//stroke: 'black',
|
|
|
lineWidth: 2,
|
...
|
...
|
@@ -291,6 +274,39 @@ |
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function drawHtml(cfg) {
|
|
|
var model = cfg.model;
|
|
|
var container = Util.createDOM('<div class="node-container"></div>');
|
|
|
var title = Util.createDOM('<div class="node-container-title">'+model.label+'</div>');
|
|
|
container.appendChild(title);
|
|
|
|
|
|
if(!model.disabledFlag){
|
|
|
var buttonDiv = Util.createDOM('<div class="node-container-title-button-div"></div>');
|
|
|
var btn = Util.createDOM('' +
|
|
|
' <span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>' +
|
|
|
' ');
|
|
|
btn.addEventListener('click', function(){
|
|
|
alert(1111);
|
|
|
});
|
|
|
buttonDiv.appendChild(btn);
|
|
|
|
|
|
btn = Util.createDOM('' +
|
|
|
' <span class="glyphicon glyphicon-minus" aria-hidden="true"></span>' +
|
|
|
'');
|
|
|
btn.addEventListener('click', function(){
|
|
|
alert(222);
|
|
|
});
|
|
|
buttonDiv.appendChild(btn);
|
|
|
container.appendChild(buttonDiv);
|
|
|
}
|
|
|
|
|
|
|
|
|
var content = Util.createDOM('<div class="node-container-content">'+model.ip+'</div>');
|
|
|
container.appendChild(content);
|
|
|
return container;
|
|
|
}
|
|
|
|
|
|
function drawCard(cfg, group){
|
|
|
var model = cfg.model;
|
|
|
var width = 300;
|
...
|
...
|
|