ops / monitor-ui · Commits

Go to a project

Authored by qinchao
Commit 5e74ad8fa9d54d6938deae35d1265a218ecf6197 1 parent fcde6bf9

主机拓扑

Inline Side-by-side
Showing 3 changed files with 189 additions and 146 deletions
... ... @@ -56,6 +56,12 @@ public class HostInfoCtrl {
//初始化数据
Map<String,List<HostGroup>> initDataMap = tmpConstructData();
getJsonAntvData(initDataMap,true, mv);
return mv;
}
private void getJsonAntvData(Map<String,List<HostGroup>> initDataMap,boolean setXyFlag,ModelAndView mv){
int beginx=60;
int beginy=60;
int gap_h=100;
... ... @@ -73,8 +79,11 @@ public class HostInfoCtrl {
node.setId(topNode);
node.setLabel(topNode);
node.setShape("rect");
node.setX(beginx+(count*gap_x));
node.setY(beginy);
if(setXyFlag){
node.setX(beginx+(count*gap_x));
node.setY(beginy);
}
nodes.add(node);
int secondCount=1;
List<HostGroup> ls=entry.getValue();
... ... @@ -88,8 +97,11 @@ public class HostInfoCtrl {
nodeSnd.setId(sndNodeID);
nodeSnd.setLabel(secondeNode.getGroupName());
nodeSnd.setShape("rect");
nodeSnd.setX(beginx+(count*gap_x)+intval);
nodeSnd.setY(beginy+secondCount*gap_h);
if(setXyFlag){
nodeSnd.setX(beginx+(count*gap_x)+intval);
nodeSnd.setY(beginy+secondCount*gap_h);
}
nodes.add(nodeSnd);
secondCount++;
... ... @@ -108,11 +120,116 @@ public class HostInfoCtrl {
data.setEdges(edges);
Gson gson = new Gson();
String jsonString=gson.toJson( data,AntvData.class);
mv.addObject("antvData",jsonString);
mv.addObject("antvHeight",100*(maxSize+1));
}
@RequestMapping("/toHostTopoSub")
public ModelAndView toHostTopoSub(String id) {
ModelAndView mv = new ModelAndView();
mv.setViewName("host/hostTopo");
//获取子节点（有可能不存在），比如前台-gateway ，有可能存在,前台-service
String parentLabel="前台";
int number=(int)(Math.random()*10);//[0,10]
boolean subNodeFlag=false;
String currentLabel="gateway";
number=2;
if(number%2==0){
subNodeFlag=true;
currentLabel="service";
}
Map<String,List<HostGroup>> initDataMap =new LinkedHashMap<>();
initDataMap.put(currentLabel,tmpDetailData(subNodeFlag));
getJsonAntvData(initDataMap,false, mv);
mv.addObject("parentLabel",parentLabel);
return mv;
}
private List<HostGroup> tmpDetailData(boolean subFlag){
List<HostGroup> ls=new ArrayList<>();
if(subFlag){
HostGroup group14=new HostGroup();
group14.setId(1001014);
group14.setGroupName("erp-gateway");
ls.add(group14);
HostGroup group13=new HostGroup();
group13.setId(1001013);
group13.setGroupName("wechat");
ls.add(group13);
HostGroup group12=new HostGroup();
group12.setId(1001012);
group12.setGroupName("risk");
ls.add(group12);
HostGroup group11=new HostGroup();
group11.setId(1001011);
group11.setGroupName("risk");
ls.add(group11);
HostGroup group10=new HostGroup();
group10.setId(1001010);
group10.setGroupName("bigdata");
ls.add(group10);
HostGroup group9=new HostGroup();
group9.setId(1001009);
group9.setGroupName("brower");
ls.add(group9);
HostGroup group8=new HostGroup();
group8.setId(1001008);
group8.setGroupName("uic");
ls.add(group8);
HostGroup group7=new HostGroup();
group7.setId(1001007);
group7.setGroupName("sns");
ls.add(group7);
HostGroup group6=new HostGroup();
group6.setId(1001006);
group6.setGroupName("message");
ls.add(group6);
HostGroup group5=new HostGroup();
group5.setId(1001005);
group5.setGroupName("product");
ls.add(group5);
HostGroup group4=new HostGroup();
group4.setId(1001004);
group4.setGroupName("promotion");
ls.add(group4);
HostGroup group3=new HostGroup();
group3.setId(1001003);
group3.setGroupName("order");
ls.add(group3);
HostGroup group2=new HostGroup();
group2.setId(1001002);
group2.setGroupName("resources");
ls.add(group2);
HostGroup group1=new HostGroup();
group1.setId(1001001);
group1.setGroupName("user");
ls.add(group1);
}
Collections.reverse(ls);
return ls;
}
private Map<String,List<HostGroup>> tmpConstructData(){
Map<String,List<HostGroup>> initDataMap=new LinkedHashMap<>();
... ... @@ -276,57 +393,8 @@ public class HostInfoCtrl {
return initDataMap;
}
@RequestMapping("/toHostTopoSub")
public ModelAndView toHostTopoSub(String id) {
ModelAndView mv = new ModelAndView();
mv.setViewName("host/hostTopo");
int divMarginTop=100;
int divPadding=60;
int divLevel=0;
int divMiddle=200;
int countInRow=6;
List<Map<String,Object>> echartDataList=new ArrayList<>();
Map<String,Object> pTmp=null;
//lb
/*Map<String,Object> pTmp=new HashMap<>();
pTmp.put("name","lb");
pTmp.put("x",divMiddle);
pTmp.put("y",divMarginTop+divPadding*(divLevel++));
pTmp.put("fixed",true);
pTmp.put("symbolSize",new Integer[]{120,50});
pTmp.put("itemStyle",JSON.parseObject("{normal:{color:'#169fe6'}}"));
echartDataList.add(pTmp);*/
//nginx
pTmp=new HashMap<>();
pTmp.put("name","nginx");
pTmp.put("x",divMiddle);
pTmp.put("y",divMarginTop+divPadding*(divLevel++));
pTmp.put("fixed",true);
pTmp.put("symbolSize",new Integer[]{120,50});
pTmp.put("itemStyle",JSON.parseObject("{normal:{color:'#169fe6'}}"));
echartDataList.add(pTmp);
//yoho-gateway
pTmp=new HashMap<>();
pTmp.put("name","gateway");
pTmp.put("x",divMiddle);
pTmp.put("y",divMarginTop+divPadding*(divLevel++));
pTmp.put("fixed",true);
pTmp.put("symbolSize",new Integer[]{120,50});
pTmp.put("itemStyle",JSON.parseObject("{normal:{color:'#169fe6'}}"));
echartDataList.add(pTmp);
Gson gson = new Gson();
String jsonString=gson.toJson( echartDataList,ArrayList.class);
mv.addObject("echartDataList",jsonString);
return mv;
}
/**
* 根据标签类别，查询该类别下的属于tag
* @param type
... ...
... ... @@ -12,6 +12,7 @@
<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>
... ... @@ -26,18 +27,16 @@
<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>
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>
<h5>主机管理-主机拓扑图:${parentLabel}</h5>
</div>
<div class="widget-content nopadding">
<div id="hostTopoDiv" class="input-group"
style="height: 600px;width: 1000px;margin-left: 50px">
<div class="panel-body" id="hostListTopoDiv">
</div>
</div>
</div>
</div>
... ... @@ -48,93 +47,76 @@
$("#li_host").addClass("active open");
$("#li_hostTopo").addClass("active");
</script>
<script>
var theme = {
// 默认色板
color: [
'#68a54a',
'#408829',
'#a9cba2',
'#86b379',
'#397b29',
'#8abb6f',
'#759c6a',
'#bfd3b7'
]};
<script type="text/javascript">
// 第一步：获取数据
var data=${antvData};
console.log(data);
// 第二步：注册图形
G6.registNode('rect', {
// 设置锚点
getAnchorPoints: function(){
return [
[0.5, 1], // 右边边的中点
[0, 0.5] // 左边边的中点
];
}
});
var nodes = data.nodes;
var edges = data.edges;
var dataOptionList=${echartDataList};
// 第三步：进行布局
var Layout = G6.Layout;
var margin = 60;
var height = 800 - 2 * margin;
var width = 500 - 2 * margin;
var option = {
title: {
text: '主机topo-'+"前台"
},
var layout = new Layout.Flow({
nodes: nodes,
edges: edges
});
nodes = layout.getNodes();
tooltip: {
show:false,
//trigger:'item',
//enterable:true,
formatter:function(){
return "b<br/>a : c分<input type='checkbox'/>";
}
},
animationDurationUpdate: 1500,
animationEasingUpdate: 'quinticInOut',
series : [
{
silent:false,//图形是否不响应和触发鼠标事件
legendHoverLink:false,
hoverAnimation:false,
focusNodeAdjacency:false,
//left:0,
top:50,
type: 'graph',
layout: 'none',
symbolSize:50,
label: {
normal: {
show: true
}
},
nodes.map(function(node) {
var x = node.x * width + margin;
var y = node.y * height + margin;
node.x = y;
node.y = x;
});
symbol:'roundRect',
edgeSymbol: ['roundRect', 'arrow'],
edgeSymbolSize: [4, 10],
edgeLabel: {
normal: {
textStyle: {
fontSize: 20
}
}
},
//data:d1,
data:dataOptionList,
links: [],
lineStyle: {
normal: {
opacity: 0.9,
width: 2
}
}
console.log(nodes);
// 第四步：初始化图
var net = new G6.Net({
fitView: 'autoZoom' ,// 自动缩放
behaviourFilter: ['wheelZoom', 'dragNode','dragBlank', 'dragCanvas'],
//height: ${antvHeight}, // 此处替换高度
// width:1000,
id: "hostListTopoDiv" // 此处替换容器id
});
// 第五步：载入数据
net.source(nodes, edges);
// 第六步：数据映射
net.node()
.style(function(obj){
var keepRatio=0;
if(obj.level==0){
keepRatio = 1;
}
]
};
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById('hostTopoDiv'),theme);
// var myChart = echarts.init(document.getElementById('hostTopoDiv'));
$(function () {
//更新曲线图
myChart.setOption(option);
myChart.on("click", function (param){
alert(param.dataIndex+':'+option.series[0].data[param.dataIndex].name+":"+option.series[0].data[param.dataIndex].itemStyle.normal.color);
option.series[0].data[param.dataIndex].itemStyle.normal['color']="#ff5e52";
myChart.setOption(option,true);//重绘
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('smooth')
.style({
stroke: "#00A263",
strokeOpacity: 0.6,
arrow: true
});
// 第七步：添加图例
// 第八步：渲染关系图
net.render();
</script>
... ...
... ... @@ -36,13 +36,6 @@
</div>
<div class="widget-content nopadding">
<div class="panel-body" id="hostListTopoDiv">
<%--<button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('qiantai')">
前台:218
</button>
<button class="btn btn-large btn-primary" style="background-color: green;margin-left:50px;" onclick="hostTopo('线下店')">
线下店:5
</button>--%>
</div>
</div>
</div>
... ...