制作业务流程 timeline 结合AdminLTE

缺乏、安全感 2022-06-04 01:24 176阅读 0赞

### 1. html内容： ###

### 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;
    }

展示样图  
![这里写图片描述][SouthEast]

[SouthEast]: /images/20220604/a27d7835962048f7ad5113b4565de2a6.png