ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit e1f31f484a9173b2255092b4757b3c6895265fc0 1 parent 98a691c2

主机管理

Inline Side-by-side
Showing 4 changed files with 305 additions and 124 deletions
... ... @@ -29,7 +29,8 @@ public class HttpUriContants {
public static String TYPE_QUERY_JAVAAPI = "/type/queryJavaApi";
public static String TYPE_GET_ZKTREE = "/type/queryZk";
public static String TYPE_GET_ZK_LEAF = "/type/queryZkLeaf";
public static String TYPE_GET_HOST_TOPO = "/type/queryHostTopo";
public static String TYPE_GET_HOST_SUB_TOPO = "/type/querySubHostTopo";
/***
* 主机信息
****/
... ...
... ... @@ -53,13 +53,36 @@ public class HostInfoCtrl {
ModelAndView mv = new ModelAndView();
mv.setViewName("host/hostTopoList");
//初始化数据,先加载两层
BaseResponse response = httpRestClient.defaultGet(HttpUriContants.TYPE_GET_HOST_TOPO, BaseResponse.class);
if(response!=null&&response.getCode()==200){
Gson gson = new Gson();
String jsonString=gson.toJson( response.getData());
mv.addObject("antvData",jsonString);
}
return mv;
}
@RequestMapping("/querySubHostTopo")
@ResponseBody
public BaseResponse querySubHostTopo(int typeId) {
Map<String,Integer> map = new HashMap();
map.put("typeId",typeId);
return httpRestClient.defaultGet(HttpUriContants.TYPE_GET_HOST_SUB_TOPO, BaseResponse.class,map);
}
/*public ModelAndView toHostTopoList() {
ModelAndView mv = new ModelAndView();
mv.setViewName("host/hostTopoList");
//初始化数据
Map<String,List<HostGroup>> initDataMap = tmpConstructData();
getJsonAntvData(initDataMap,6, mv);
return mv;
}
}*/
//numInRow 第二层的节点一排放几个
private void getJsonAntvData(Map<String,List<HostGroup>> initDataMap,int cols,ModelAndView mv){
... ... @@ -191,7 +214,7 @@ public class HostInfoCtrl {
HostGroup group12=new HostGroup();
group12.setId(1001012);
group12.setGroupName("risk");
group12.setGroupName("risk22");
ls.add(group12);
HostGroup group11=new HostGroup();
... ...
... ... @@ -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>
... ...
<%@page language="java" contentType="text/html;charset=utf-8" %>
<%@ page import="com.ui.contants.ProjectConstant"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="/jsp/common/include.jsp" flush="true"/>
<script src="https://gw.alipayobjects.com/as/g/datavis/g6/1.1.6/index.js"></script>
<script>
var contextPath = '<%=basePath %>';
</script>
<title>YOHO!运维</title>
</head>
<body>
<!-- 头部 -->
<div id="head">
</div>
<!-- 右侧具体内容 -->
<div id="content">
<div id="breadcrumb">
<a href="#" title="Go to Home" class="tip-bottom"><i
class="icon-home"></i> Home</a> <a href="#" class="current">主机拓扑图</a>
</div>
<div class="container-fluid">
<div class="widget-box">
<div class="widget-title">
<h5>主机管理-主机拓扑图</h5>
</div>
<div class="widget-content nopadding">
<div class="panel-body" id="hostListTopoDiv">
</div>
</div>
</div>
</div>
</div>
</body>
<script src="<%=basePath %>script/common/genarate_left_panel.js?v=<%=ProjectConstant.MENU_VERSION %>"></script>
<script>
$("#li_host").addClass("active open");
$("#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 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
});
// 第七步：添加图例
// 第八步：渲染关系图
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;
}
var model=ev.item.getModel();
if(model.level==0){
return ;
}
var uri=getUrlBasePath() + "/hostInfoList/toHostTopoSub?id="+model.id;
//window.location.href = uri ;
window.open(uri);
});
</script>
... ...