基于JQuery实现业务流图

最近接手了一个需求，需要将一个业务流中各个系统间交互信息用时间轴方式（设计原型我觉得是基于时间轴）展现出来，正常交互的接口圆点为绿色，未交互的接口圆点为灰色，交互异常的接口圆点为红色，且圆点不仅要展示接口名称，还要请求和响应时间，并且时间后面要跟着可点击链接，在业务流图右边展示交互报文内容。看到这种需求就惊了，这是一个缺少前端经验的我能干出来的。

首先整理数据表存储数据，然后游览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+
                        '&nbsp&nbsp<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+
                        '&nbsp&nbsp<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);
    });
}

css部分我是参考JQuery中发布的模板修改的

点击查看代码

.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;*/
}

完成本次需求，确实学到了不少，也非常有成就感，实践是最好的老师