gantt/甘特图完整代码（带注释，可以复制）

zheshihuahua

已于 2022-11-18 16:08:32 修改

阅读量1.5k

点赞数 3

分类专栏： gantt 甘特图文章标签：甘特图 css html

于 2022-11-18 15:21:38 首次发布

本文链接：https://blog.csdn.net/zheshihuahua/article/details/127732418

版权

gantt 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

甘特图

3 篇文章 1 订阅

订阅专栏

官网地址：Gantt : Samples

效果图：

代码：

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="../../component/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../../component/style/admin.css" media="all">
    <link rel="stylesheet" href="../../component/dhtmlxgantt.css" type="text/css">
    <script src="../../component/dhtmlxgantt.js"></script>
    <!--[if lt IE 9]>
    <script src="../../component/html5.min.js"></script>
    <script src="../../component/respond.min.js"></script>
    <![endif]-->
    <style>
        html,
        body {
            height: 100%;
            padding: 0px;
            margin: 0px;
            overflow: hidden;
        }

        .weekend {
            background: #f4f7f4 !important;
        }

        .gantt_grid_head_cell {
            font-size: 14px;
            font-weight: 600;
            color: #000 !important;
        }

        .gantt_scale_cell {
            font-size: 14px;
            font-weight: 600;
            color: #000 !important;

        }
    </style>
</head>

<body>
    <div class="layui-fluid">
        <div class="layui-card">
            <div class="layui-form layui-card-header layuiadmin-card-header-auto">
                <div class="layui-row">
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">订单名称</label>
                            <div class="layui-input-block">
                                <select id="orderId" name="orderId" autocomplete="off" lay-search>
                                    <option value="">请选择订单</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <label class="layui-form-label">设备编码</label>
                            <div class="layui-input-block">
                                <input id="deviceCode" type="text" name="deviceCode" placeholder="请选择设备编码"
                                    autocomplete="off" class="layui-input start">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md3">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <button style="margin-left: 50px;"
                                    class="layui-btn layui-btn-vat layuiadmin-btn-useradmin layui-bg-blue" lay-submit
                                    lay-filter="spmrp-search">
                                    <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                                    查询
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-card-body">
                <div class="layui-btn-container">
                    <button type="button" id="reset" class="layui-btn layui-btn-danger">重排
                    </button>
                </div>
                <div id="device_load" style='width:100%;'></div>
            </div>
        </div>
    </div>
    <script src="../../component/layui/layui.js"></script>
    <script>
        layui.config({
            base: '../../component/'
        }).extend({
            index: 'lib/index'
        }).use(['index', 'view', 'form', 'laydate'], function () {
            var $ = layui.$,
                form = layui.form,
                view = layui.view,
                layer = layui.layer,
                laydate = layui.laydate;

            view.req({
                method: 'POST',
                data: JSON.stringify({ orderComplete: 0, page: 1, limit: 99999 }),
                url: layui.setter.api + 'biz/order/produce/page',
                success: function (res) {
                    data = res["data"]["list"] || [];
                    if (data.length > 0) {
                        var element = document.getElementById("orderId");
                        for (var i = 0; i < data.length; i++) {
                            var option = document.createElement("option");
                            option.setAttribute("value", data[i]["ordNo"]);
                            option.innerText = data[i]["project"];
                            element.appendChild(option);
                        }
                        form.render("select");
                    }
                }
            });

            //  颜色
            function randomColor1() {
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                if (r < 16) {
                    r = "0" + r.toString(16);
                } else {
                    r = r.toString(16);
                }
                if (g < 16) {
                    g = "0" + g.toString(16);
                } else {
                    g = g.toString(16);
                }
                if (b < 16) {
                    b = "0" + b.toString(16);
                } else {
                    b = b.toString(16);
                }
                return "#" + r + g + b;
            }

            function renderPanel() {
                document.getElementById('device_load').style.cssText = 'height:' + ($(window).height() - 140) + 'px';
            }

            $(window).resize(function () {
                renderPanel();
            });
            renderPanel();

            // gantt.templates.tooltip_text = function (start, end, task) {
            //     var div = '<table class="layui-table"><thead><tr><th>订单</th><th>产品</th><th>数量</th><th>占用产能</th></tr></thead><tbody>';
            //     for (var i = 0; i < task.orders.length; i++) {
            //         div += '<tr>';
            //         div += '<td>' + task.orders[i].order + '</td>' +
            //             '<td>' + task.orders[i].product + '</td>' +
            //             '<td>' + task.orders[i].qty + '</td>' +
            //             '<td>' + percenToString(task.orders[i].progress) + '</td>';
            //         div += '</tr>';
            //     }
            //     div += '</tbody></table>';
            //     return div;
            // };
            // 尺寸比例
            function percenToString(num) {
                return Math.floor(num * 100) + '%';
            }

            function renderLabel(progress, type, sum) {
                var relWidth = progress * 100;

                switch (type) {
                    case 1:
                        return "<div class='custom_progress idle' style='width:" + relWidth + "%'>" +
                            percenToString(progress) + "</div>";
                        break;
                    case 2:
                        return "<div class='custom_progress in_progress' style='width:" + relWidth + "%'>" + percenToString(progress) + "</div>";
                        break;
                    case 3:
                        return "<div class='custom_progress ' style='width:" + relWidth + "%;background-color:" + randomColor1() + "'>" + percenToString(progress) + "</div>";
                        break;
                    default:
                        return "<div class='custom_progress ' style='width:" + relWidth + "%;background-color:" + randomColor1() + "''>" + percenToString(progress) + "</div>";
                        break;

                }
            }

            // gantt.templates.task_text = function (start, end, task) {
            //     var div = '';
            //     var relWidth=0;
            //
            //     for (var i = 0; i < task.orders.length; i++) {
            //         div += renderLabel(task.orders[i].progress, 1 + i, task.storage);
            //         relWidth+=task.orders[i].progress  * 100;
            //
            //     }
            //
            //     //剩余宽度--------------------------------------------
            //     var RWidth=100-relWidth;
            //     if(RWidth>0)
            //     {
            //         div+= "<div class='custom_progress nearly_done' style='width:" +RWidth + "%'></div>";
            //     }
            //
            //     //--------------------------------------------
            //     return div;
            // };
            // 时间格式
            gantt.config.date_format = "%Y-%m-%d";
            gantt.config.scales = [
                { unit: "year", step: 1, format: "%Y" },
                { unit: "day", step: 1, date: "%m-%d" },
                { unit: "hour", step: 1, format: "%H:%i" }
            ];


            gantt.config.reorder_grid_columns = true;
            gantt.config.columns = [{
                name: "text",
                label: "任务名",
                width: 200,
                align: "center",
                tree: true,
                resize: true
            }, {
                name: "start_date",
                label: "开始日期",
                width: 100,
                align: "center",
                resize: true
            }, {
                name: "duration",
                label: "持续时间",
                width: 100,
                align: "center",
                resize: true

            }];


            gantt.config.row_height = 40;
            gantt.config.scale_height = 50;
            gantt.config.drag_move = false;
            gantt.config.drag_resize = false;
            gantt.config.sort = true;
            gantt.config.show_quick_info = false;
            //  关闭点击事件
            gantt.attachEvent("onTaskDblClick", function (id, e) {
                return false;
            });

            gantt.config.show_tasks_outside_timescale = true;
            gantt.plugins({
                auto_scheduling: true,  //自动排程
                tooltip: true     //提示信息
            });

            gantt.config.start_date = new Date("2022-11-03 00:00:00");
            gantt.config.end_date = new Date("2022-11-03 23:59:59");
            // 样式
            gantt.config.layout = {
                css: "gantt_container",
                cols: [{
                    width: 400,
                    min_width: 300,
                    rows: [
                        {
                            view: "grid",
                            scrollX: "gridScroll",
                            scrollable: true,
                            scrollY: "scrollVer"
                        },
                        { view: "scrollbar", id: "gridScroll", group: "horizontal" }
                    ]
                },
                { resizer: true, width: 1 },
                {
                    rows: [
                        {
                            view: "timeline",
                            scrollX: "scrollHor",
                            scrollY: "scrollVer"
                        },
                        {
                            view: "scrollbar",
                            id: "scrollHor",
                            group: "horizontal"
                        }
                    ]
                },
                { view: "scrollbar", id: "scrollVer" }]
            };

            gantt.init("device_load");

            gantt.i18n.setLocale("cn");  //使用中文
            function render() {
                var index = layer.load();  //后面会使用这赋值来关闭这个页面
                view.req({
                    method: 'POST',
                    data: JSON.stringify({
                        orderId: $('#orderId').val(),
                        deviceCode: $('#deviceCode').val()
                    }),
                    url: layui.setter.api + "biz/plan/device/load",
                    success: function (res) {

                        gantt.clearAll();  //清空缓存
                        console.info("gantt", gantt.config.end_date);
                        var data = [
                            { id: "10cz1t", text: "P220901-044", type: "project", progress: 0.88, open: true, parent: 0 },
                            { id: "11cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },


                            { id: "12cz1t", text: "备膜", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },

                            { id: "121cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 05:00", parent: "12cz1t", progress: 0, open: true },

                            { id: "13cz1t", text: "挤压加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
                            { id: "131cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 02:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "132cz1t", text: "Stage #2", start_date: "2022-11-03 04:00", end_date: "2022-11-03 05:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "133cz1t", text: "Stage #3", start_date: "2022-11-03 07:00", end_date: "2022-11-03 08:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "134cz1t", text: "Stage #4", start_date: "2022-11-03 10:00", end_date: "2022-11-03 11:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "135cz1t", text: "Stage #5", start_date: "2022-11-03 13:00", end_date: "2022-11-03 14:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "136cz1t", text: "Stage #6", start_date: "2022-11-03 16:00", end_date: "2022-11-03 17:00", parent: "13cz1t", progress: 0, open: true },
                            { id: "137cz1t", text: "Stage #7", start_date: "2022-11-03 19:00", end_date: "2022-11-03 20:00", parent: "13cz1t", progress: 0, open: true },

                            { id: "24cz1t", text: "时效加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
                            { id: "241cz1t", text: "Stage #1", start_date: "2022-11-03 05:00", end_date: "2022-11-03 06:00", parent: "24cz1t", progress: 0, open: true },
                            { id: "242cz1t", text: "Stage #2", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "24cz1t", progress: 0, open: true },
                            { id: "243cz1t", text: "Stage #3", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "24cz1t", progress: 0, open: true },
                            { id: "244cz1t", text: "Stage #4", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "24cz1t", progress: 0, open: true },


                            { id: "25cz1t", text: "氧化包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
                            { id: "251cz1t", text: "Stage #1", start_date: "2022-11-03 06:00", end_date: "2022-11-03 07:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "252cz1t", text: "Stage #2", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "253cz1t", text: "Stage #3", start_date: "2022-11-03 12:00", end_date: "2022-11-03 13:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "254cz1t", text: "Stage #4", start_date: "2022-11-03 14:00", end_date: "2022-11-03 15:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "255cz1t", text: "Stage #5", start_date: "2022-11-03 18:00", end_date: "2022-11-03 19:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "256cz1t", text: "Stage #6", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "25cz1t", progress: 0, open: true },
                            { id: "257cz1t", text: "Stage #7", start_date: "2022-11-03 22:00", end_date: "2022-11-03 23:30", parent: "25cz1t", progress: 0, open: true },


                            { id: "29cz1t", text: "测试包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
                            { id: "291cz1t", text: "Stage #5", start_date: "2022-11-03 15:00", end_date: "2022-11-03 16:00", parent: "29cz1t", progress: 0, open: true },
                            { id: "292cz1t", text: "Stage #6", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "29cz1t", progress: 0, open: true },


                            { id: "28cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },
                            // ,start_date: "2022-11-03 01:00",end_date: "2022-11-03 03:00"
                            { id: "281cz1t", text: "备膜", start_date: "2022-11-03 01:00", end_date: "2022-11-03 03:00", parent: "28cz1t", progress: 0, open: true },
                            { id: "281cz1t1", text: "备膜1", start_date: "2022-11-03 02:30", end_date: "2022-11-03 05:30", parent: "28cz1t", progress: 0, open: true },
                            { id: "281cz1t2", text: "备膜2", start_date: "2022-11-03 06:50", end_date: "2022-11-03 07:50", parent: "28cz1t", progress: 0, open: true },

                            { id: "282cz1t", text: "挤压加工", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "28cz1t", progress: 0.5, open: true },
                            { id: "283cz1t", text: "时效加工", start_date: "2022-11-03 010:00", end_date: "2022-11-03 11:00", parent: "28cz1t", progress: 0, open: true },
                            { id: "284cz1t", text: "氧化包装", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "28cz1t", progress: 0, open: true },


                        ];
                        var datalist = new Array();
                        $.each(data, function (i, item) {

                            var model = new Object();
                            model.id = item.id;
                            model.text = item.text;
                            if (item.type != null) {
                                model.type = item.type;
                            }

                            model.progress = item.progress;
                            model.open = item.open;
                            model.start_date = new Date(item.start_date);
                            model.end_date = new Date(item.end_date);
                            model.parent = item.parent;
                            if (item.render != null) {
                                model.render = item.render;
                            }

                            datalist.push(model);
                         
                        });

                        // 数据之间的关系
                        var links = [
                            //  {id: "1", source: "10", target: "11", type: "1"},
                            //  {id: "2", source: "11", target: "12", type: "1"},
                            //  {id: "3", source: "10", target: "28", type: "1"},
                            //
                            // {id: "4", source: "12", target: "131", type: "1"},
                            // source:连接谁 ; target:和谁连 ; (里面写data里面的id)

                            { id: "5c", source: "131cz1t", target: "241cz1t", type: "0" },
                            { id: "6c", source: "132cz1t", target: "241cz1t", type: "0" },


                            { id: "7c", source: "133cz1t", target: "242cz1t", type: "0" },
                            { id: "8c", source: "134cz1t", target: "242cz1t", type: "0" },


                            { id: "9c", source: "135cz1t", target: "243cz1t", type: "0" },
                            { id: "10c", source: "136cz1t", target: "243cz1t", type: "0" },
                            { id: "11c", source: "137cz1t", target: "244cz1t", type: "0" },



                            { id: "14c", source: "241cz1t", target: "253cz1t", type: "0", color: "green" },
                            { id: "13c", source: "241cz1t", target: "252cz1t", type: "0", color: "green" },
                            { id: "12c", source: "241cz1t", target: "251cz1t", type: "0", color: "green" },

                            { id: "16c", source: "242cz1t", target: "254cz1t", type: "0", color: "green" },
                            { id: "15c", source: "242cz1t", target: "253cz1t", type: "0", color: "green" },


                            { id: "19c", source: "243cz1t", target: "257cz1t", type: "0", color: "green" },
                            { id: "18c", source: "243cz1t", target: "256cz1t", type: "0", color: "green" },
                            { id: "17c", source: "243cz1t", target: "255cz1t", type: "0", color: "green" },


                            { id: "21c", source: "254cz1t", target: "292cz1t", type: "0", color: "blue" },
                            { id: "20c", source: "254cz1t", target: "291cz1t", type: "0", color: "blue" },

                                
                            { id: "22c", source: "28cz1t", target: "281cz1t", type: "0", color: "red" },
                            { id: "23c", source: "281cz1t", target: "281cz1t1", type: "0", color: "red" },
                            { id: "24c", source: "281cz1t", target: "281cz1t2", type: "0", color: "red" },
                         

                            { id: "25c", source: "281cz1t", target: "282cz1t", type: "0", color: "hotpink" },
                            { id: "26c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },
                            { id: "27c", source: "281cz1t", target: "283cz1t", type: "0", color: "hotpink" },
                            { id: "28c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },

                        


                        ]
                            //解析  
                        gantt.parse({
                            data: datalist,
                            links: links
                        });
                        console.info("gantt", gantt);

                        layer.close(index);    //关闭页面
                    }
                });
            }

            render();
            $('#reset').click(function () {
                view.req({
                    method: 'get',
                    url: layui.setter.api + "biz/plan/device/init",
                    success: function (res) {
                        render();
                    }
                });
            });
            form.on('submit(spmrp-search)', function (data) {
                render();
            });

          
          
            
        });
    </script>
</body>

</html>

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<title></title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" href="../../component/layui/css/layui.css" media="all">
<link rel="stylesheet" href="../../component/style/admin.css" media="all">
<link rel="stylesheet" href="../../component/dhtmlxgantt.css" type="text/css">
<script src="../../component/dhtmlxgantt.js"></script>

<style>
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}

.weekend {
background: #f4f7f4 !important;
}

.gantt_grid_head_cell {
font-size: 14px;
font-weight: 600;
color: #000 !important;
}

.gantt_scale_cell {
font-size: 14px;
font-weight: 600;
color: #000 !important;

}
</style>
</head>

<body>
<div class="layui-fluid">
<div class="layui-card">
<div class="layui-form layui-card-header layuiadmin-card-header-auto">
<div class="layui-row">
<div class="layui-col-md3">
<div class="layui-form-item">
<label class="layui-form-label">订单名称</label>
<div class="layui-input-block">
<select id="orderId" name="orderId" autocomplete="off" lay-search>
<option value="">请选择订单</option>
</select>
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-form-item">
<label class="layui-form-label">设备编码</label>
<div class="layui-input-block">
<input id="deviceCode" type="text" name="deviceCode" placeholder="请选择设备编码"
autocomplete="off" class="layui-input start">
</div>
</div>
</div>
<div class="layui-col-md3">
<div class="layui-form-item">
<div class="layui-inline">
<button style="margin-left: 50px;"
class="layui-btn layui-btn-vat layuiadmin-btn-useradmin layui-bg-blue" lay-submit
lay-filter="spmrp-search">
<i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
查询
</button>
</div>
</div>
</div>
</div>
</div>
<div class="layui-card-body">
<div class="layui-btn-container">
<button type="button" id="reset" class="layui-btn layui-btn-danger">重排
</button>
</div>
<div id="device_load" style='width:100%;'></div>
</div>
</div>
</div>
<script src="../../component/layui/layui.js"></script>
<script>
layui.config({
base: '../../component/'
}).extend({
index: 'lib/index'
}).use(['index', 'view', 'form', 'laydate'], function () {
var $ = layui.$,
form = layui.form,
view = layui.view,
layer = layui.layer,
laydate = layui.laydate;

view.req({
method: 'POST',
data: JSON.stringify({ orderComplete: 0, page: 1, limit: 99999 }),
url: layui.setter.api + 'biz/order/produce/page',
success: function (res) {
data = res["data"]["list"] || [];
if (data.length > 0) {
var element = document.getElementById("orderId");
for (var i = 0; i < data.length; i++) {
var option = document.createElement("option");
option.setAttribute("value", data[i]["ordNo"]);
option.innerText = data[i]["project"];
element.appendChild(option);
}
form.render("select");
}
}
});

// 颜色
function randomColor1() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
if (r < 16) {
r = "0" + r.toString(16);
} else {
r = r.toString(16);
}
if (g < 16) {
g = "0" + g.toString(16);
} else {
g = g.toString(16);
}
if (b < 16) {
b = "0" + b.toString(16);
} else {
b = b.toString(16);
}
return "#" + r + g + b;
}

function renderPanel() {
document.getElementById('device_load').style.cssText = 'height:' + ($(window).height() - 140) + 'px';
}

$(window).resize(function () {
renderPanel();
});
renderPanel();

// gantt.templates.tooltip_text = function (start, end, task) {
// var div = '<table class="layui-table"><thead><tr><th>订单</th><th>产品</th><th>数量</th><th>占用产能</th></tr></thead><tbody>';
// for (var i = 0; i < task.orders.length; i++) {
// div += '<tr>';
// div += '<td>' + task.orders[i].order + '</td>' +
// '<td>' + task.orders[i].product + '</td>' +
// '<td>' + task.orders[i].qty + '</td>' +
// '<td>' + percenToString(task.orders[i].progress) + '</td>';
// div += '</tr>';
// }
// div += '</tbody></table>';
// return div;
// };
// 尺寸比例
function percenToString(num) {
return Math.floor(num * 100) + '%';
}

function renderLabel(progress, type, sum) {
var relWidth = progress * 100;

switch (type) {
case 1:
return "<div class='custom_progress idle' style='width:" + relWidth + "%'>" +
percenToString(progress) + "</div>";
break;
case 2:
return "<div class='custom_progress in_progress' style='width:" + relWidth + "%'>" + percenToString(progress) + "</div>";
break;
case 3:
return "<div class='custom_progress ' style='width:" + relWidth + "%;background-color:" + randomColor1() + "'>" + percenToString(progress) + "</div>";
break;
default:
return "<div class='custom_progress ' style='width:" + relWidth + "%;background-color:" + randomColor1() + "''>" + percenToString(progress) + "</div>";
break;

}
}

// gantt.templates.task_text = function (start, end, task) {
// var div = '';
// var relWidth=0;
//
// for (var i = 0; i < task.orders.length; i++) {
// div += renderLabel(task.orders[i].progress, 1 + i, task.storage);
// relWidth+=task.orders[i].progress * 100;
//
// }
//
// //剩余宽度--------------------------------------------
// var RWidth=100-relWidth;
// if(RWidth>0)
// {
// div+= "<div class='custom_progress nearly_done' style='width:" +RWidth + "%'></div>";
// }
//
// //--------------------------------------------
// return div;
// };
// 时间格式
gantt.config.date_format = "%Y-%m-%d";
gantt.config.scales = [
{ unit: "year", step: 1, format: "%Y" },
{ unit: "day", step: 1, date: "%m-%d" },
{ unit: "hour", step: 1, format: "%H:%i" }
];

gantt.config.reorder_grid_columns = true;
gantt.config.columns = [{
name: "text",
label: "任务名",
width: 200,
align: "center",
tree: true,
resize: true
}, {
name: "start_date",
label: "开始日期",
width: 100,
align: "center",
resize: true
}, {
name: "duration",
label: "持续时间",
width: 100,
align: "center",
resize: true

}];

gantt.config.row_height = 40;
gantt.config.scale_height = 50;
gantt.config.drag_move = false;
gantt.config.drag_resize = false;
gantt.config.sort = true;
gantt.config.show_quick_info = false;
// 关闭点击事件
gantt.attachEvent("onTaskDblClick", function (id, e) {
return false;
});

gantt.config.show_tasks_outside_timescale = true;
gantt.plugins({
auto_scheduling: true, //自动排程
tooltip: true //提示信息
});

gantt.config.start_date = new Date("2022-11-03 00:00:00");
gantt.config.end_date = new Date("2022-11-03 23:59:59");
// 样式
gantt.config.layout = {
css: "gantt_container",
cols: [{
width: 400,
min_width: 300,
rows: [
{
view: "grid",
scrollX: "gridScroll",
scrollable: true,
scrollY: "scrollVer"
},
{ view: "scrollbar", id: "gridScroll", group: "horizontal" }
]
},
{ resizer: true, width: 1 },
{
rows: [
{
view: "timeline",
scrollX: "scrollHor",
scrollY: "scrollVer"
},
{
view: "scrollbar",
id: "scrollHor",
group: "horizontal"
}
]
},
{ view: "scrollbar", id: "scrollVer" }]
};

gantt.init("device_load");

gantt.i18n.setLocale("cn"); //使用中文
function render() {
var index = layer.load(); //后面会使用这赋值来关闭这个页面
view.req({
method: 'POST',
data: JSON.stringify({
orderId: $('#orderId').val(),
deviceCode: $('#deviceCode').val()
}),
url: layui.setter.api + "biz/plan/device/load",
success: function (res) {

gantt.clearAll(); //清空缓存
console.info("gantt", gantt.config.end_date);
var data = [
{ id: "10cz1t", text: "P220901-044", type: "project", progress: 0.88, open: true, parent: 0 },
{ id: "11cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },

{ id: "12cz1t", text: "备膜", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },

{ id: "121cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 05:00", parent: "12cz1t", progress: 0, open: true },

{ id: "13cz1t", text: "挤压加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
{ id: "131cz1t", text: "Stage #1", start_date: "2022-11-03 01:00", end_date: "2022-11-03 02:00", parent: "13cz1t", progress: 0, open: true },
{ id: "132cz1t", text: "Stage #2", start_date: "2022-11-03 04:00", end_date: "2022-11-03 05:00", parent: "13cz1t", progress: 0, open: true },
{ id: "133cz1t", text: "Stage #3", start_date: "2022-11-03 07:00", end_date: "2022-11-03 08:00", parent: "13cz1t", progress: 0, open: true },
{ id: "134cz1t", text: "Stage #4", start_date: "2022-11-03 10:00", end_date: "2022-11-03 11:00", parent: "13cz1t", progress: 0, open: true },
{ id: "135cz1t", text: "Stage #5", start_date: "2022-11-03 13:00", end_date: "2022-11-03 14:00", parent: "13cz1t", progress: 0, open: true },
{ id: "136cz1t", text: "Stage #6", start_date: "2022-11-03 16:00", end_date: "2022-11-03 17:00", parent: "13cz1t", progress: 0, open: true },
{ id: "137cz1t", text: "Stage #7", start_date: "2022-11-03 19:00", end_date: "2022-11-03 20:00", parent: "13cz1t", progress: 0, open: true },

{ id: "24cz1t", text: "时效加工", type: "project", render: "split", parent: "11cz1t", progress: 0.5, open: false },
{ id: "241cz1t", text: "Stage #1", start_date: "2022-11-03 05:00", end_date: "2022-11-03 06:00", parent: "24cz1t", progress: 0, open: true },
{ id: "242cz1t", text: "Stage #2", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "24cz1t", progress: 0, open: true },
{ id: "243cz1t", text: "Stage #3", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "24cz1t", progress: 0, open: true },
{ id: "244cz1t", text: "Stage #4", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "24cz1t", progress: 0, open: true },

{ id: "25cz1t", text: "氧化包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
{ id: "251cz1t", text: "Stage #1", start_date: "2022-11-03 06:00", end_date: "2022-11-03 07:00", parent: "25cz1t", progress: 0, open: true },
{ id: "252cz1t", text: "Stage #2", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "25cz1t", progress: 0, open: true },
{ id: "253cz1t", text: "Stage #3", start_date: "2022-11-03 12:00", end_date: "2022-11-03 13:00", parent: "25cz1t", progress: 0, open: true },
{ id: "254cz1t", text: "Stage #4", start_date: "2022-11-03 14:00", end_date: "2022-11-03 15:00", parent: "25cz1t", progress: 0, open: true },
{ id: "255cz1t", text: "Stage #5", start_date: "2022-11-03 18:00", end_date: "2022-11-03 19:00", parent: "25cz1t", progress: 0, open: true },
{ id: "256cz1t", text: "Stage #6", start_date: "2022-11-03 20:00", end_date: "2022-11-03 21:00", parent: "25cz1t", progress: 0, open: true },
{ id: "257cz1t", text: "Stage #7", start_date: "2022-11-03 22:00", end_date: "2022-11-03 23:30", parent: "25cz1t", progress: 0, open: true },

{ id: "29cz1t", text: "测试包装", type: "project", render: "split", parent: "11cz1t", progress: 0, open: true },
{ id: "291cz1t", text: "Stage #5", start_date: "2022-11-03 15:00", end_date: "2022-11-03 16:00", parent: "29cz1t", progress: 0, open: true },
{ id: "292cz1t", text: "Stage #6", start_date: "2022-11-03 17:00", end_date: "2022-11-03 18:00", parent: "29cz1t", progress: 0, open: true },

{ id: "28cz1t", text: "L3660", type: "project", progress: 0, open: true, parent: "10cz1t" },
// ,start_date: "2022-11-03 01:00",end_date: "2022-11-03 03:00"
{ id: "281cz1t", text: "备膜", start_date: "2022-11-03 01:00", end_date: "2022-11-03 03:00", parent: "28cz1t", progress: 0, open: true },
{ id: "281cz1t1", text: "备膜1", start_date: "2022-11-03 02:30", end_date: "2022-11-03 05:30", parent: "28cz1t", progress: 0, open: true },
{ id: "281cz1t2", text: "备膜2", start_date: "2022-11-03 06:50", end_date: "2022-11-03 07:50", parent: "28cz1t", progress: 0, open: true },

{ id: "282cz1t", text: "挤压加工", start_date: "2022-11-03 08:00", end_date: "2022-11-03 09:00", parent: "28cz1t", progress: 0.5, open: true },
{ id: "283cz1t", text: "时效加工", start_date: "2022-11-03 010:00", end_date: "2022-11-03 11:00", parent: "28cz1t", progress: 0, open: true },
{ id: "284cz1t", text: "氧化包装", start_date: "2022-11-03 11:00", end_date: "2022-11-03 12:00", parent: "28cz1t", progress: 0, open: true },

];
var datalist = new Array();
$.each(data, function (i, item) {

var model = new Object();
model.id = item.id;
model.text = item.text;
if (item.type != null) {
model.type = item.type;
}

model.progress = item.progress;
model.open = item.open;
model.start_date = new Date(item.start_date);
model.end_date = new Date(item.end_date);
model.parent = item.parent;
if (item.render != null) {
model.render = item.render;
}

datalist.push(model);

});

// 数据之间的关系
var links = [
// {id: "1", source: "10", target: "11", type: "1"},
// {id: "2", source: "11", target: "12", type: "1"},
// {id: "3", source: "10", target: "28", type: "1"},
//
// {id: "4", source: "12", target: "131", type: "1"},
// source:连接谁 ; target:和谁连 ; (里面写data里面的id)

{ id: "5c", source: "131cz1t", target: "241cz1t", type: "0" },
{ id: "6c", source: "132cz1t", target: "241cz1t", type: "0" },

{ id: "7c", source: "133cz1t", target: "242cz1t", type: "0" },
{ id: "8c", source: "134cz1t", target: "242cz1t", type: "0" },

{ id: "9c", source: "135cz1t", target: "243cz1t", type: "0" },
{ id: "10c", source: "136cz1t", target: "243cz1t", type: "0" },
{ id: "11c", source: "137cz1t", target: "244cz1t", type: "0" },

{ id: "14c", source: "241cz1t", target: "253cz1t", type: "0", color: "green" },
{ id: "13c", source: "241cz1t", target: "252cz1t", type: "0", color: "green" },
{ id: "12c", source: "241cz1t", target: "251cz1t", type: "0", color: "green" },

{ id: "16c", source: "242cz1t", target: "254cz1t", type: "0", color: "green" },
{ id: "15c", source: "242cz1t", target: "253cz1t", type: "0", color: "green" },

{ id: "19c", source: "243cz1t", target: "257cz1t", type: "0", color: "green" },
{ id: "18c", source: "243cz1t", target: "256cz1t", type: "0", color: "green" },
{ id: "17c", source: "243cz1t", target: "255cz1t", type: "0", color: "green" },

{ id: "21c", source: "254cz1t", target: "292cz1t", type: "0", color: "blue" },
{ id: "20c", source: "254cz1t", target: "291cz1t", type: "0", color: "blue" },

{ id: "22c", source: "28cz1t", target: "281cz1t", type: "0", color: "red" },
{ id: "23c", source: "281cz1t", target: "281cz1t1", type: "0", color: "red" },
{ id: "24c", source: "281cz1t", target: "281cz1t2", type: "0", color: "red" },

{ id: "25c", source: "281cz1t", target: "282cz1t", type: "0", color: "hotpink" },
{ id: "26c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },
{ id: "27c", source: "281cz1t", target: "283cz1t", type: "0", color: "hotpink" },
{ id: "28c", source: "281cz1t", target: "284cz1t", type: "0", color: "hotpink" },

]
//解析
gantt.parse({
data: datalist,
links: links
});
console.info("gantt", gantt);

layer.close(index); //关闭页面
}
});
}

render();
$('#reset').click(function () {
view.req({
method: 'get',
url: layui.setter.api + "biz/plan/device/init",
success: function (res) {
render();
}
});
});
form.on('submit(spmrp-search)', function (data) {
render();
});

});
</script>
</body>

</html>

觉得香点个赞，让更多的小伙伴一起快乐！