layui 样式 做拓扑关系展示(持续更新)第一期

分享 未结 精帖
18 3516
Hink745
Hink745 2018-6-4
悬赏:20飞吻



画个草稿。



把数据对接上,d3.js瞎画几个箭头。



动态计算坐标。



结构说明一下。红框使用了flex布局,jq动态绑定。蓝框是svg层。用是d3.v3.js动态绘制上去的。

以下是部分代码分享(仅供参考)

jq绑定

红框2的代码
commargs_cs_init = function(json){

var str = '';
if(json.client.tuple_L.length){
//作为client的进程
str += '<ul class="di-commargsc">'
+'<li><button class="layui-btn layui-btn-small layui-bg-black di-left3r">作为Client</button></li>'
+'<li>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">上一页</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">下一页</button>'
+'<input class="layui-input" placeholder="搜索..." style="width:140px;height:31px;margin:0px 10px 0px 2px;">'
+'</li>'

for (var i in json.client.commargs[0]) {
var commargsc = json.client.commargs[0][i];
commargsc = $.parseJSON(commargsc);
var psReadable = commargsc.psReadable!=''?commargsc.psReadable:'暂无';
str += '<li class="di-offset-commargs-c'+i+' di-relative"><div class="layui-btn layui-btn-small layui-btn-primary di-left3r di-commargsc-text layui-elip" style="width:255px;">'+psReadable+'</div></li>'
}
str += '</ul>';
}

if(json.service.tuple_L.length){
//作为server的进程
str += '<ul style="margin-top:15px;" class="di-commargss di-offset-commargsc">'
+'<li><button class="layui-btn layui-btn-small layui-bg-black di-left3r">作为Server</button></li>'
+'<li>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">上一页</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">下一页</button>'
+'<input class="layui-input" placeholder="搜索..." style="width:140px;height:31px;margin:0px 10px 0px 2px;">'
+'</li>';

for (var j in json.service.commargs[0]) {
var commargss = json.service.commargs[0][j];
commargss = commargss.split('-,-');
var port = commargss[0]
var psReadableAndPsId = $.parseJSON(commargss[1]);
var psReadable = psReadableAndPsId.psReadable!=''?psReadableAndPsId.psReadable:'暂无';

str +='<li class="di-item-center di-offset-commargs-s'+j+'">'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r di-commargsc-text layui-elip">'+psReadable+'</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left2">'+port+'</button>'
+'</li>';
}

str += '</ul>';
}

$('.di-commargs-box').append(str);

topo_init_by_tuple(json);

svgHeight = $('.di-commargs-box').height();
topo_set_arrow(svgHeight);

}
红框1和3的代码
topo_init_by_tuple = function(json){

var page = 5;
var cstr = '';
var sstr = '';

if(json.client.tuple_L.length){
for (var i in json.client.tuple_R[0]) {

if(i%2){

sstr += '<ul class="di-offset1" data-index="c_'+i+'">';
var tuplerc = json.client.tuple_R[0][i];

if(tuplerc.length>=page){
sstr +='<li>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">上一页</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">下一页</button>'
+'<input class="layui-input" placeholder="搜索..." style="width:140px;height:31px;margin:0px 10px 0px 2px;">'
+'</li>';
}

for (var j in tuplerc) {
var typestr = tuplerc[i]<2?'L':'S';
sstr +='<li>'
+'<div class="di-type-icon di-marginr">'+typestr+'</div>'
+'<button class="layui-btn layui-btn-small layui-bg-black">'+tuplerc[j].ip+'</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">'+tuplerc[j].host+'</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">-</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">'+tuplerc[j].status+'</button>'
+'</li>';
}
sstr +="</ul>";

}else{

cstr += '<ul class="di-offset1" data-index="c_'+i+'">'
var tuplerc = json.client.tuple_R[0][i];

if(tuplerc.length>=page){
cstr +='<li>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">上一页</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">下一页</button>'
+'<input class="layui-input" placeholder="搜索..." style="width:140px;height:31px;margin:0px 10px 0px 2px;">'
+'</li>';
}

for (var j in tuplerc) {
var typestr = tuplerc[i]<2?'L':'S';
cstr +='<li class="di-justify-right">'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">'+tuplerc[j].status+'</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">-</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">'+tuplerc[j].host+'</button>'
+'<button class="layui-btn layui-btn-small layui-bg-black di-left3r">'+tuplerc[j].ip+'</button>'
+'<div class="di-type-icon di-marginl">'+typestr+'</div>'
+'</li>';
}
cstr +="</ul>";

}
}
}

if(json.service.tuple_L.length){
for (var i in json.service.tuple_R[0]) {

if(i%2){

sstr += '<ul class="di-offset1" data-index="s_'+i+'">'

var tuplerc = json.service.tuple_R[0][i];
if(tuplerc.length>=page){
sstr +='<li>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">上一页</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">下一页</button>'
+'<input class="layui-input" placeholder="搜索..." style="width:140px;height:31px;margin:0px 10px 0px 2px;">'
+'</li>';
}

for (var j in tuplerc) {
var typestr = tuplerc[i]<2?'L':'S';
var commargs = $.parseJSON(tuplerc[j].commargs);
sstr +='<li>'
+'<div class="di-type-icon di-marginr">'+typestr+'</div>'
+'<button class="layui-btn layui-btn-small layui-bg-black">'+tuplerc[j].ip+'</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">'+tuplerc[j].host+'</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r di-commargs layui-elip">'+commargs.psReadable+'</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">'+tuplerc[j].status+'</button>'
+'</li>';
}
sstr +="</ul>";

}else{

cstr += '<ul class="di-offset1" data-index="s_'+i+'">'
var tuplerc = json.service.tuple_R[0][i];

if(tuplerc.length>=page){
cstr +='<li>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">上一页</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">下一页</button>'
+'<input class="layui-input" placeholder="搜索..." style="width:140px;height:31px;margin:0px 10px 0px 2px;">'
+'</li>';
}

for (var j in tuplerc) {
var typestr = tuplerc[i]<2?'L':'S';
var commargs = $.parseJSON(tuplerc[j].commargs);
cstr +='<li class="di-justify-right">'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">'+tuplerc[j].status+'</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r di-commargs layui-elip">'+commargs.psReadable+'</button>'
+'<button class="layui-btn layui-btn-small layui-btn-primary di-left3r">'+tuplerc[j].host+'</button>'
+'<button class="layui-btn layui-btn-small layui-bg-black di-left3r">'+tuplerc[j].ip+'</button>'
+'<div class="di-type-icon di-marginl">'+typestr+'</div>'
+'</li>';
}
cstr +="</ul>";

}

}
}


$('.di-box-left').append(cstr);
$('.di-box-right').append(sstr);

}
箭头坐标绘制和计算
  topo_set_arrow = function(height){
var width = 130;
var height = height;
var mOffset = $('.di-commargs-box').offset();

var svg = d3.select(".di-csv-right").append("svg").attr("width", width).attr("height", height);
var svgl = d3.select(".di-csv-left").append("svg").attr("width", width).attr("height", height);

var defs = svg.append("defs");
var defsl = svgl.append("defs");

var arrowMarker = defs.append("marker")
.attr("id","arrow")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","8")
.attr("markerHeight","12")
.attr("viewBox","0 0 12 12")
.attr("refX","6")
.attr("refY","6")
.attr("orient","auto");

var arrowMarkerl = defsl.append("marker")
.attr("id","arrow")
.attr("markerUnits","strokeWidth")
.attr("markerWidth","8")
.attr("markerHeight","12")
.attr("viewBox","0 0 12 12")
.attr("refX","6")
.attr("refY","6")
.attr("orient","auto");

var arrow_path = "M2,2,L10,6 L2,10 L6,6 L2,2";

arrowMarker.append("path").attr("d",arrow_path).attr("fill","#C9C9C9");
arrowMarkerl.append("path").attr("d",arrow_path).attr("fill","#C9C9C9");

$('.di-offset1').each(function(k,el){

var index = $(el).attr('data-index');
index = index.split('_');
topotype = index[0];
topoindex = index[1];
if(topoindex%2){

var offset = $(el).offset();
var elHeight = $(el).height();
var y2HeightDiff = offset.top-mOffset.top;
var y2Height = y2HeightDiff+(elHeight/2)+5;

if(topotype=='c'){
var commstr = '.di-offset-commargs-c'+topoindex;
var commHeight = $(commstr).height();
var commoffset = $(commstr).offset();
var y1HeightDiff = commoffset.top-mOffset.top;
var y1Height = y1HeightDiff+(commHeight/2)+5;
var line = svg.append("line")
.attr("x1",0)
.attr("y1",y1Height)
.attr("x2",80)
.attr("y2",y2Height)
.attr("stroke","#C9C9C9")
.attr("stroke-width",4)
.attr("marker-end","url(#arrow)");

}else{
var commstr = '.di-offset-commargs-s'+topoindex;
var commHeight = $(commstr).height();
var commoffset = $(commstr).offset();
var y1HeightDiff = commoffset.top-mOffset.top;
var y1Height = y1HeightDiff+(commHeight/2)-10;

var line = svg.append("line")
.attr("x1",90)
.attr("y1",y2Height)
.attr("x2",10)
.attr("y2",y1Height)
.attr("stroke","#C9C9C9")
.attr("stroke-width",4)
.attr("marker-end","url(#arrow)");
}

}else{

var offset = $(el).offset();
var elHeight = $(el).height();
var y2HeightDiff = offset.top-mOffset.top;
var y2Height = y2HeightDiff+(elHeight/2)+5;

if(topotype=='c'){
var commstr = '.di-offset-commargs-c'+topoindex;
var commHeight = $(commstr).height();
var commoffset = $(commstr).offset();
var y1HeightDiff = commoffset.top-mOffset.top;
var y1Height = y1HeightDiff+(commHeight/2)+5;
var line = svgl.append("line")
.attr("x1",110)
.attr("y1",y1Height)
.attr("x2",20)
.attr("y2",y2Height)
.attr("stroke","#C9C9C9")
.attr("stroke-width",4)
.attr("marker-end","url(#arrow)");

}else{
var commstr = '.di-offset-commargs-s'+topoindex;
var commHeight = $(commstr).height();
var commoffset = $(commstr).offset();
var y1HeightDiff = commoffset.top-mOffset.top;
var y1Height = y1HeightDiff+(commHeight/2)-5;

var line = svgl.append("line")
.attr("x1",10)
.attr("y1",y2Height)
.attr("x2",100)
.attr("y2",y1Height)
.attr("stroke","#C9C9C9")
.attr("stroke-width",4)
.attr("marker-end","url(#arrow)");
}

}

})

}
回帖