WebFolow

最新推荐文章于 2024-09-14 19:44:09 发布

lijun_xiao2009

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量479

点赞数

分类专栏： html javascript 文章标签： javascript

本文链接：https://blog.csdn.net/lijun_xiao2009/article/details/46628439

版权

javascript 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

html

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>流程图</title>
<script type="text/javascript">
    var rectW = 160; //矩形宽度
    var rectH = 60; //矩形高度
    var rectWs = 50; //横向间距
    var rectHs = 50; //纵向间距
    //参数标识_名称_父标识_状态
    //状态 0   1 进行中 2 超时 3 完成
    var folowS = "1a_爷爷_0_2|2_叔叔_1a_0|3_小叔叔_1a_1|4_小红_2_0|5_小红2_2_2|6_小红_3_0|7_小红2_4_3|8_小红22_3_0|9_小红42_6_0";
    var hRC = 1;      //纵向个数
    //var folowS = "1_爷爷_0|2_叔叔_1";
    var folowArray = folowS.split('|');
    function GetInfo(_id,w,_h){
        var w1 = w + rectW + rectWs;
        for (var i = 0; i < folowArray.length; i++) {
            var id = folowArray[i].split('_')[0]; //当前节点编号
            var name = folowArray[i].split('_')[1];//当前节点名称
            var pid = folowArray[i].split('_')[2]; //父节点编号
            var state = folowArray[i].split('_')[3]; //状态
            var color = getColor(state); //设置背景颜色
            if (pid == _id) {
                var h = (rectH + rectHs) * hRC;
                //绘制连线
                if (_id != 0) {
                    drawLine(w,_h,w1,h);
                }
                document.write('<div style="position:absolute; top:' + (h - rectH / 2) + 'px; left:' + (w - rectW / 2) + 'px; border:1px #000 solid;background-color:' + color + ';width:' + rectW + 'px;height:' + rectH + 'px;text-align:center;line-height:25px;">' + name + '</div>');
                hRC++;
                GetInfo(id, w1, h);
            }
        }
    }

    //画线
    function drawLine(w, h, w1, h1) {
        //竖线
        document.write('<div style="position:absolute; top:' + (h + rectH / 2) + 'px; left:' + (w - rectW - rectWs) + 'px; border-left:1px #000 solid;background-color:#cccccc;width:0px;height:' + (h1 - h - rectH / 2) + 'px;overflow:hidden"></div>');
        //横线
        document.write('<div style="position:absolute; top:' + (h1) + 'px; left:' + (w - rectW - rectWs) + 'px; border-top:1px #000 solid;background-color:#cccccc;width:' + (w1 - w - rectW / 2) + 'px;height:0px;overflow:hidden"></div>');
        //箭头
        document.write('<div style="position:absolute; top:' + (h1 - 10) + 'px; left:' + (w - rectW/2 -20) + 'px;width:20px;height:20px;font-size:20px;line-height:20px;overflow:hidden">→</div>');
    }
    //获取颜色
    function getColor(state) {
        var color = '#cccccc';
        switch (parseInt(state)) {
            case 1:
                color = '#1AA655';
                break;
            case 2:
                color = '#E97467';
                break;
            case 3:
                color = '#7B8DD5';
                break;
        }
        return color;
    }