官网地址：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-submitlay-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>
    <!--[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>

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

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

  1. matlab画二位温度场图（代码带注释）

    matlab画二位温度场图(代码带注释) 实验设备 二维温度图情况 实验设备 设备各个采集温度坐标点如下所示a %给定一个矩形区域76x125 %%这个区域20个离散点就是第一个时间段的温度,采样的2 ...

  2. 基于Python实现的网络爬虫项目——多线程下载小说并保存为txt文件（包含完整代码及注释）

    基于Python实现的网络爬虫项目--多线程下载小说并保存为txt文件(包含完整代码及注释) 一.确立预期目标 二.完成项目所需工具 三.项目需要解决的问题 问题一 问题二 问题三 问题四 问题五 问 ...

  3. Silverlight Gantt甘特图项目管理解决方案

    2019独角兽企业重金招聘Python工程师标准>>> Silverlight Gantt甘特图是一款非常丰富,可定制,轻量级和高性能的控件. 项目甘特图: 可视化层次的任务列表. ...

  4. 动态修改 DHTML Gantt甘特图皮肤样式

    初始化一个DHTML Gantt甘特图的皮肤默认为Teracce Skin 现在项目有一个需求通过按钮动态修改甘特图主题(皮肤),在官网提供的API不难发现修改样式办法.说到底,只是改变CSS样式文件 ...

  5. Gantt(甘特图)与PERT(项目计划评审技术)图各自的缺陷

    文章目录 1 Gantt(甘特图) 2 PERT(项目计划评审技术)图 3 考题 1 Gantt(甘特图) 甘特图,也称为条状图(Bar chart).是在1917年由亨利·甘特开发的,其内在思想简单 ...

  6. highcharts中gantt甘特图的使用

    示例图: 官方文档参考:highcharts gantt 甘特图示例 使用示例: <template><div id="container"></di ...

  7. python外星人入侵代码提示has no attri_Python外星人入侵完整代码和注释(四)

    四.重构:模块game_function,创建game_function.py 文件名 1.创建game_function.py(用来存储项目的大部分函数) 2.函数check_events() :响 ...

  8. HTML轮播图完整代码 (原生Javascript）

    HTML轮播图完整代码 (原生Javascript) <!DOCTYPE html> <html><head><meta charset="utf- ...

  9. OpenGL植物建模（附完整代码、注释清晰、分步讲解）

    目录 1.成果 2.myInit初始化函数 3.加载纹理数据 4.打开光照和材质 5.显示列表封装绘制函数 5.1显示列表封装绘制函数:绘制树干 5.2显示列表封装绘制函数:绘制花朵 5.3显示列表封 ...

最新文章

  1. 学计算机必懂的53个单词缩写
  2. 乐变黄杲：当前如何选择App热更新服务
  3. CentOs7中resourcemanager启动不了
  4. 给PS4装上Linux，然后用Xbox手柄打任天堂游戏？网友：这场面我没见过
  5. 【转】以操作系统的角度述说线程与进程
  6. IPv6套接字编程介绍
  7. 滴滴快车奖励政策，高峰奖励，翻倍奖励，按成交率，指派单数分级（11月9日~11月13日)...
  8. mac os域名解析处理 清缓存 映射
  9. python-函数定义
  10. php input 只接收文件内容,一文搞懂$_POST和file_get_contents(“php://input”)的区别
  11. 苹果要弃用LCD屏，便宜的iPhone XR面临绝版
  12. 平板电脑黑苹果EFI_保姆级别教你安装黑苹果，提供大量EFI与工具驱动！
  13. tkinter教程_Tkinter教程–第2部分
  14. -XX:NewRatio 命令
  15. shell 脚本程序中空格 $符号的使用
  16. HTTP笔记1：网络模型与TCP协议
  17. C-Free 5 加 TDM-GCC编辑器搭建C/C++开发环境
  18. 太阳能基站光照跟随逐日PLC控制实训设备QY-PV26
  19. 搜狗皮肤 php,搜狗皮肤PHP怎样运用 搜狗输入法皮肤PHP运用办法
  20. 中文字体压缩器——字蛛

热门文章

  1. 94、图解：网络硬件的发展史
  2. MobaXterm - 远程连接工具
  3. ue4白天夜晚切换_白天/夜晚编码的美好时光...多年来最佳
  4. 各种Mapping的区别
  5. 【自动驾驶传感器融合系列】02自动驾驶中的多传感器同步理论
  6. 无线网络CSMA/CA原理分析以及相关技术的介绍和分析
  7. 微信小程序+.NET(十一) 小程序之小说阅读器实现
  8. [附源码]JAVA毕业设计景区门票系统（系统+LW）
  9. JavaScript——ES8新特性
  10. 即试即买丨帕克西首推假发自动售卖机，3D发型试戴变革假发购物体验！