最近接手了一个需求，需要将一个业务流中各个系统间交互信息用时间轴方式（设计原型我觉得是基于时间轴）展现出来，正常交互的接口圆点为绿色，未交互的接口圆点为灰色，交互异常的接口圆点为红色，且圆点不仅要展示接口名称，还要请求和响应时间，并且时间后面要跟着可点击链接，在业务流图右边展示交互报文内容。看到这种需求就惊了，这是一个缺少前端经验的我能干出来的。
首先整理数据表存储数据，然后游览JQuery插件库 https://www.jq22.com/ 查看各种流图实现，以下是实现代码，可供参考
jsp页面仅说明流图与文本框部分，样式是easyUI框架中的，我就不展示了
点击查看代码
<div id="step1"></div>
<textarea id="TransDetailXMlvalues" cols="100" rows="15" readonly="readonly" style="text-align: left;"></textarea>
js部分
点击查看代码
(function($) {
$.fn.extend({
loadStep: function(stepArr) {
var $this = $(this);
var step = '<ul class="timeLine"></ul>';
var $step = $(step);
$.each(stepArr,function(index,item){
var stepstart = '<li><div>'+item.port+'<br/>';
var stepreq ='';
var stepres ='';
if(item.req !== null && item.req !=='' && item.req !== undefined){
stepreq = '<span>请求:'+item.req+
'  <a href="#" class="easyui-linkbutton e-cis_button" iconCls="icon-search" onclick="searchTransDetailXMl(\''+item.addressreq+'\')">查看报文</a></span><br/>';
}else{
//没有请求报文，节点没有交互，则将圆点置为灰色
if(index<stepArr.length-1){
stepstart = '<li class="skip"><div>'+item.port+'<br/>';
}
}
if(item.res !== null && item.res !=='' && item.res !==undefined){
stepres = '<span>响应：'+item.res+
'  <a href="#" class="easyui-linkbutton e-cis_button" iconCls="icon-search" onclick="searchTransDetailXMl(\''+item.addressres+'\')">查看报文</a></span>';
}else{
//不为首节点 且有请求没有收到返回，则将圆点置为红色
if(index>0){
if(item.req !== null && item.req !=='' && item.req !== undefined) {
stepstart = '<li class="on"><div>' + item.port + '<br/>';
}
}
}
$step.append(stepstart +stepreq+ stepres+'</div></li>');
});
$this.append($step);
}
})
})(jQuery)
$(function() {
$.ajax({
async : false,
cache : false,
type : "POST",
data:{"code" :$("#code").val()},
dataType : "json",
url : "url",
error : function() {
alert("节点信息查询失败");
},
success : function(data) {
if(data===1){
alert("当前业务的节点信息流图待新增");
}
$('#step1').loadStep(data);
}
});
}
function searchTransDetailXMl(address){
$.post("url", {
'address':address
}, function(data) {
$('#TransDetailXMlvalues').text(data);
});
}
点击查看代码
.timeLine {
margin: 20px auto 0;
overflow: hidden;
position: relative
}
.timeLine li {
background: linear-gradient(to left, var(--default, #66D533), var(--default, #66D533)) 7.5px top no-repeat;
background-size: 1px 100%;
padding-bottom: 30px;
position: relative;
display: flex;
padding-left: 30px;
}
.timeLine li::after {
content: "";
width: 15px;
height: 15px;
border-radius: 50%;
border: 1px solid var(--default, #66D533);
background: radial-gradient(var(--default, #66D533) 25%, transparent 30%) 50% 50% no-repeat,
linear-gradient(to left, #fff, #fff) left top no-repeat;
background-size: 100% 100%, 100% 100%;
position: absolute;
top: 0;
left: 0;
}
.timeLine li.on {
background: linear-gradient(to left, var(--checked, #FF0000), var(--checked, #FF0000)) 7.5px top no-repeat;
background-size: 1px 100%;
position: relative;
}
.timeLine li.skip {
background: linear-gradient(to left, var(--checked, #CCD5CC), var(--checked, #CCD5CC)) 7.5px top no-repeat;
background-size: 1px 100%;
position: relative;
}
.timeLine li.on::after {
content: "";
border: 1px solid var(--checked, #FF0000);
background: radial-gradient(var(--checked, #FF0000) 25%, transparent 30%) 50% 50% no-repeat,
linear-gradient(to left, #fff, #fff) left top no-repeat;
background-size: 100% 100%, 100% 100%;
}
.timeLine li.skip::after {
content: "";
border: 1px solid var(--checked, #CCD5CC);
background: radial-gradient(var(--checked, #CCD5CC) 25%, transparent 30%) 50% 50% no-repeat,
linear-gradient(to left, #fff, #fff) left top no-repeat;
background-size: 100% 100%, 100% 100%;
}
timeLine li:last-child {
background: linear-gradient(to left, var(--default, #66D533), var(--default, #66D533)) 7.5px top no-repeat;
background-size: 1px 100%;
padding-bottom: 30px;
position: relative;
display: flex;
padding-left: 30px;
/*background: none !important;*/
}
完成本次需求，确实学到了不少，也非常有成就感，实践是最好的老师
标签：JQuery,基于,--,100%,item,background,var,left,流图 From： https://www.cnblogs.com/merycrismers/p/17352230.html