制作业务流程 timeline 结合AdminLTE

来源：互联网发布：古诗文阅读优化卷答案编辑：程序博客网时间：2024/05/21 12:49

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 valvar 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;}//时间框htmladdTimeSpan = 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.jsfunction 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