|
...
|
...
|
@@ -48,131 +48,110 @@ |
|
|
|
$("#li_hostTopo").addClass("active");
|
|
|
|
</script>
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
|
|
// 第一步：获取数据
|
|
|
|
var data=${antvData};
|
|
|
|
// 第二步：注册图形
|
|
|
|
G6.registNode('rect', {
|
|
|
|
// 设置锚点
|
|
|
|
getAnchorPoints: function(){
|
|
|
|
return [
|
|
|
|
[1, 0.1], // 右边边的中点
|
|
|
|
[0.5, 0] // 左边边的中点
|
|
|
|
];
|
|
|
|
}
|
|
|
|
});
|
|
|
|
var nodes = data.nodes;
|
|
|
|
/*for(var i=0;i<nodes.length;i++){
|
|
|
|
nodes[i].size=[100,30];
|
|
|
|
}*/
|
|
|
|
var edges = data.edges;
|
|
|
|
|
|
|
|
// 第三步：进行布局
|
|
|
|
/* var Layout = G6.Layout;
|
|
|
|
var margin = 60;
|
|
|
|
var height = 800 - 2 * margin;
|
|
|
|
var width = 500 - 2 * margin;
|
|
|
|
|
|
|
|
var layout = new Layout.Flow({
|
|
|
|
nodes: nodes,
|
|
|
|
edges: edges
|
|
|
|
});
|
|
|
|
nodes = layout.getNodes();*/
|
|
|
|
|
|
|
|
/*nodes.map(function(node) {
|
|
|
|
var x = node.x * width + margin;
|
|
|
|
var y = node.y * height + margin;
|
|
|
|
node.x = x;
|
|
|
|
node.y = y;
|
|
|
|
/!* node.x = node.level* 10;
|
|
|
|
|
|
|
|
node.y = node.level*100 +gap;
|
|
|
|
gap = node.level*gap;*!/
|
|
|
|
|
|
|
|
|
|
|
|
console.log(node.x,node.y);
|
|
|
|
});
|
|
|
|
|
|
|
|
console.log(nodes);*/
|
|
|
|
// 第四步：初始化图
|
|
|
|
var net = new G6.Net({
|
|
|
|
fitView: 'autoZoom' ,// 自动缩放
|
|
|
|
height: ${antvHeight}, // 此处替换高度
|
|
|
|
behaviourFilter: ['wheelZoom', 'dragNode','dragBlank', 'dragCanvas'],
|
|
|
|
// width:1000,
|
|
|
|
id: "hostListTopoDiv" // 此处替换容器id
|
|
|
|
});
|
|
|
|
// 第五步：载入数据
|
|
|
|
net.source(nodes, edges);
|
|
|
|
// 第六步：数据映射
|
|
|
|
net.node()
|
|
|
|
.style(function(obj){
|
|
|
|
var keepRatio=0;
|
|
|
|
if(obj.level==0){
|
|
|
|
keepRatio = 1;
|
|
|
|
var data=[];
|
|
|
|
if(${antvData}){
|
|
|
|
data=${antvData};
|
|
|
|
|
|
|
|
console.log(data);
|
|
|
|
}
|
|
|
|
|
|
|
|
function createNet(data) {
|
|
|
|
var tree = new G6.Tree({
|
|
|
|
id: "hostListTopoDiv" , // 此处替换容器id
|
|
|
|
modes:{
|
|
|
|
default: [
|
|
|
|
'dragBlank', 'spreadout', 'buttonPointer'
|
|
|
|
]
|
|
|
|
},
|
|
|
|
fitView: 'autoSize', // 自动缩放 autoSize autoZoom
|
|
|
|
layoutCfg: {
|
|
|
|
// direction: 'LR', // 方向（LR/RL/H/TB/BT/V）
|
|
|
|
getHGap: function(/* d */) { // 横向间距
|
|
|
|
return 100;
|
|
|
|
},
|
|
|
|
getVGap: function(/* d */) { // 竖向间距
|
|
|
|
return 10;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var attrs = {};
|
|
|
|
attrs.fill = 'l (0) 0:#ccc ' + keepRatio + ':#ccc ' + keepRatio + ':#00A263';
|
|
|
|
//attrs.fill = '#00A263';// #':#E6504A';
|
|
|
|
attrs.fillOpacity = 0.4;
|
|
|
|
return attrs;
|
|
|
|
});
|
|
|
|
net.edge()
|
|
|
|
.shape('HV')
|
|
|
|
.style({
|
|
|
|
stroke: "#CCC",
|
|
|
|
strokeOpacity: 0.6,
|
|
|
|
//lineWidth:1,
|
|
|
|
// lineDash:[5,5],
|
|
|
|
arrow: true
|
|
|
|
tree.source(data);
|
|
|
|
tree.node()
|
|
|
|
.label(function (obj) {
|
|
|
|
return obj.name;
|
|
|
|
})
|
|
|
|
.style({
|
|
|
|
fillOpacity: 1
|
|
|
|
});
|
|
|
|
tree.edge().shape('smooth');
|
|
|
|
tree.render();
|
|
|
|
|
|
|
|
//dblclick or click
|
|
|
|
tree.on('click', function(ev){
|
|
|
|
if(ev.itemType !== 'node'){
|
|
|
|
console.log(ev.itemType);
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
var model=ev.item.getModel();
|
|
|
|
if(model.children.length>0){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
$.ajax({
|
|
|
|
url : contextPath +"/hostInfoList/querySubHostTopo",
|
|
|
|
type : 'post',
|
|
|
|
data : {
|
|
|
|
typeId : model.id
|
|
|
|
},
|
|
|
|
async : false,
|
|
|
|
dataType : "json",
|
|
|
|
success : function(resp) {
|
|
|
|
if(resp!=null&&resp.code==200){
|
|
|
|
model.children = resp.data;
|
|
|
|
|
|
|
|
if(resp.data.length>0){
|
|
|
|
var collapsedIds=[];//记录折叠的id
|
|
|
|
var treeData=tree.save();
|
|
|
|
var treeData_source=treeData.source;
|
|
|
|
/*treeRemoveCollapsed(treeData_source,collapsedIds);
|
|
|
|
|
|
|
|
console.log(collapsedIds);*/
|
|
|
|
|
|
|
|
//方式一
|
|
|
|
/*tree.destroy();
|
|
|
|
var new_tree= createNet(treeData_source);
|
|
|
|
if(collapsedIds.length>0){
|
|
|
|
|
|
|
|
}*/
|
|
|
|
|
|
|
|
//方式二
|
|
|
|
tree.changeData(treeData_source);
|
|
|
|
tree.autoSize();
|
|
|
|
tree.refresh();
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
});
|
|
|
|
// 第七步：添加图例
|
|
|
|
|
|
|
|
// 第八步：渲染关系图
|
|
|
|
net.render();
|
|
|
|
|
|
|
|
var mouseEnterNodeStyle = {
|
|
|
|
fill:"#FF0000",
|
|
|
|
lineWidth: 2
|
|
|
|
};
|
|
|
|
var nodeStyle = {
|
|
|
|
fill:"#00A263",
|
|
|
|
lineWidth: 1
|
|
|
|
};
|
|
|
|
|
|
|
|
net.on('itemmouseenter', function(ev){
|
|
|
|
if(ev.itemType !== 'node'){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if(ev.item.getModel().level==0){
|
|
|
|
return ;
|
|
|
|
}
|
|
|
|
var keyShape = ev.item.getKeyShape();
|
|
|
|
keyShape.attr(mouseEnterNodeStyle);
|
|
|
|
net.refresh();
|
|
|
|
});
|
|
|
|
net.on('itemmouseleave', function(ev){
|
|
|
|
if(ev.itemType !== 'node'){
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
if(ev.item.getModel().level==0){
|
|
|
|
return ;
|
|
|
|
}
|
|
|
|
var keyShape = ev.item.getKeyShape();
|
|
|
|
keyShape.attr(nodeStyle);
|
|
|
|
net.refresh();
|
|
|
|
});
|
|
|
|
|
|
|
|
//dblclick
|
|
|
|
net.on('click', function(ev){
|
|
|
|
if(ev.itemType !== 'node'){
|
|
|
|
return;
|
|
|
|
return tree;
|
|
|
|
}
|
|
|
|
|
|
|
|
function treeRemoveCollapsed(node,nodeIDArray) {
|
|
|
|
if(node.isCollapsed){
|
|
|
|
node.isCollapsed=false;
|
|
|
|
nodeIDArray.push(node.id) ;
|
|
|
|
}
|
|
|
|
var model=ev.item.getModel();
|
|
|
|
if(model.level==0){
|
|
|
|
return ;
|
|
|
|
var children = node.children;
|
|
|
|
if (children && children.length) {
|
|
|
|
for (var i = 0; i < children.length; i++) {
|
|
|
|
treeRemoveCollapsed(children[i],nodeIDArray);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
var uri=getUrlBasePath() + "/hostInfoList/toHostTopoSub?id="+model.id;
|
|
|
|
//window.location.href = uri ;
|
|
|
|
window.open(uri);
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
createNet(data);
|
|
|
|
|
|
|
|
</script> |
...
|
...
|
|
