制作业务流程 timeline 结合AdminLTE

最新推荐文章于 2024-05-14 18:01:37 发布

飞奔的大土豆

最新推荐文章于 2024-05-14 18:01:37 发布

阅读量1k

点赞数

分类专栏：前端技术文章标签： html-timel

本文链接：https://blog.csdn.net/qq_32447321/article/details/78678121

版权

前端技术专栏收录该内容

27 篇文章 0 订阅

订阅专栏

1. html内容：

<body>
    <div class="row">
            <div class="col-md-12">
                <!-- The time line -->
                <ul class="timeline" id="timeLine">

                </ul>
            </div>
    </div>
</body>

2: js

//创建map存放key val
var contentMap = new EMap();//内容
var colorMap = new EMap();//颜色
var timeMap = new EMap();//时刻
jQuery(function($) {

    contentMap.put("EOas", "O");
    contentMap.put("Busi", "B");
    contentMap.put("NettyServer", "N");
    contentMap.put("ERt", "R");
    contentMap.put("E-handler", "H");
    contentMap.put("UNKOWN", "U");

    colorMap.put("EOas", "bg-yellow");
    colorMap.put("Busi", "bg-aqua");
    colorMap.put("NettyServer", "bg-blue");
    colorMap.put("ERt", "bg-green");
    colorMap.put("E-handler", "bg-purple");
    colorMap.put("UNKOWN", "bg-red");

    timeMap.put("NettyServer", "下发成功");
    timeMap.put("Busi", "设置成功");
    timeMap.put("ERt", "开始");

    let uuid = "382951770318143488";//请求标识
    //      let orderSeq = "E2017112100000065";
    let requestData = {
        "uuid": uuid
    };
    $.ajax({
        type: 'post',
        dataType: 'json',
         url: '/API/',
        contentType: 'application/json',
        data: JSON.stringify(requestData),
        timeout: 60000,
        success: function(result) {
            if (result == null)
                alert("没数据");
            else {
                /**
                 * 业务处理成功回调
                 */
//              var data = JSON.parse(JSON.parse(result).Data);
                callback(result);
            }
        },
        error: function(data) {
            alert("error");
        }
    });

});

callback = function(data) {
        /**
         * 2: 加载参数
         */
        for (let i = 0; i < data.length; i++) {
            let item = creatItem(data[i]);
            //console.log(item);
            if (i == 0) {

                $("#timeLine").append(addTimeSpan(data[i], "bg-green"));
            }
            if (null != item) {
                $("#timeLine").append(item);
            }
             if (i == data.length - 1) {

                $("#timeLine").append(addTimeSpan(data[i], "bg-red"));
                let html=' <li>       <i class="fa fa-clock-o bg-gray"></i>           </li>';
                $("#timeLine").append(html);
            }

        }

    }
    /**
     * 动态组建item :生成html
     * @param {Object} item
     */
creatItem = function(item) {
    let content = "";
    let color = "";
    let time = item.logTime;
    let body = item.body;
    let result = item.result;

    let html = "";
    if (contentMap.get(item.serviceName) != null) {
        content = contentMap.get(item.serviceName);
        color = colorMap.get(item.serviceName);
    } else {
        content = contentMap.get("UNKOWN");
        color = colorMap.get("UNKOWN");
    }
    if (result != null && result == timeMap.get(item.serviceName)) {

        html += addTimeSpan(item, color);
    }

    html += '<li style=" min-height: 40px;">';
    html += '<i class="fa {0}">{1}</i>';
    html = html.format(color, content)
    let random = Math.round(Math.random() * 9 + 1);
    if (null != body && null == result) {
        //有body 没有result width 50-80
        let width = 50 + 20 * random / 10;

        body = formatBody(body);
        result = item.serviceName;
        html += '<div class="timeline-item" style="width: {0}%;">';
        html += '<span class="time" ><i class="fa fa-clock-o"></i>{1}</span>';
        html += '<h3 class="timeline-header no-border"><a href="#" >{2}</a> </h3>';
        html += '<div class="timeline-body">{3} </div>';
        html += '</div>';
        html = html.format(width, time, result, body);
    } else if (null == body && null != result) {
        //没有body 有result width 20-50

        let width = 25 + 25 * random / 10;
        html += '<div class="timeline-item" style="width: {0}%;">';
        html += '<span class="time" ><i class="fa fa-clock-o"></i>{1}</span>';
        html += '<h3 class="timeline-header no-border"><a href="#" >{2}</a> {3}</h3>';
        html += '</div>';
        html = html.format(width, time, item.serviceName, result);
    } else if (null != body && null != result) {
        //有body 有result width 50-80
        let width = 50 + 20 * random / 10;
        body = formatBody(body);
        html += '<div class="timeline-item" style="width: {0}%;">';
        html += '<span class="time" ><i class="fa fa-clock-o"></i>{1}</span>';
        html += '<h3 class="timeline-header no-border"><a href="#" >{2}</a> {3}</h3>';
        html += '<div class="timeline-body" >{4} </div>';
        html += '</div>';
        html = html.format(width, time, item.serviceName, result, body);
    }

    html += "</li>";
    return html;

}
//时间框html
addTimeSpan = function(item, color) {
    console.log(item);
    let html = '<li class="time-label"> <span class="{0}" style="margin-left:-0.5%" >{1}</span></li>';
        return html.format(color, item.logHour);
//  return html.format(color, item.dataTime);
}

formatBody = function(body) {
    let html = "";
    try {
        let jsonObj = JSON.parse(body.replace(";", ""));
        if (null != jsonObj.code) {
            html += "二维码:" + jsonObj.code + "<br />";
        }
        if (null != jsonObj.vehNo) {
            html += "车牌号:" + jsonObj.vehNo + "<br />";
        }
        if (null != jsonObj.orderSeq) {
            html += "订单编号:" + jsonObj.orderSeq + "<br />";
        }
        if (null != jsonObj.realstarttime) {
            html += "放电时间:" + jsonObj.realstarttime + "<br />";
        }

        return html;
    } catch (e) {
        return html;
    }
}

ps: js util工具方法：

1:
> format method:

String.prototype.format = function(args) {
    var result = this;
    if (arguments.length > 0) {
        if (arguments.length == 1 && typeof(args) == "object") {
            for (var key in args) {
                if (args[key] != undefined) {
                    var reg = new RegExp("({" + key + "})", "g");
                    result = result.replace(reg, args[key]);
                }
            }
        } else {
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] != undefined) {　　　　　　　　　　　　
                    var reg = new RegExp("({)" + i + "(})", "g");
                    result = result.replace(reg, arguments[i]);
                }
            }
        }
    }
    return result;
}
2: 用到的map类  封装一个EMap.js
function EMap() {
    this.container = new Object();
}

EMap.prototype.put = function(key, value) {
    this.container[key] = value;
}

EMap.prototype.get = function(key) {
    return this.container[key];
}

EMap.prototype.keySet = function() {
    var keyset = new Array();
    var count = 0;
    for ( var key in this.container) {
        // 跳过object的extend函数
        if (key == 'extend') {
            continue;
        }
        keyset[count] = key;
        count++;
    }
    return keyset;
}

EMap.prototype.size = function() {
    var count = 0;
    for ( var key in this.container) {
        // 跳过object的extend函数
        if (key == 'extend') {
            continue;
        }
        count++;
    }
    return count;
}

EMap.prototype.remove = function(key) {
    delete this.container[key];
}

EMap.prototype.toString = function() {
    var str = "";
    for (var i = 0, keys = this.keySet(), len = keys.length; i < len; i++) {
        str = str + keys[i] + "=" + this.container[keys[i]] + ";\n";
    }
    return str;
}

展示样图
这里写图片描述

飞奔的大土豆

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
制作业务流程 timeline 结合AdminLTE

1. html内容：<body> <div class="row"> <div class="col-md-12">  <ul class="timeline" id="timeLine"> </ul> </
复制链接

扫一扫

专栏目录