13、vue2使用甘特图插件dhtmlx-gantt

在项目中需要使用甘特图插件，在网上就找到了dhtmlx-gantt，下面是使用教程
下载插件：

npm install dhtmlx-gantt -save

<template>
    <div class="container">
        <div class="select-wrap">
            <el-select v-model="value" placeholder="请选择" @change="selectChange">
                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div ref="gantt" class="gantt-container"></div>
    </div>
</template>
<script>
    import {
        gantt
    } from 'dhtmlx-gantt';
    import "dhtmlx-gantt/codebase/dhtmlxgantt.css"

    export default {
        name: 'gantt',
        data() {
            return {
                tasks: {
                    data: []
                },
                options: [{
                    value: '1',
                    label: '全部'
                }, {
                    value: '2',
                    label: '完成'
                }, {
                    value: '3',
                    label: '正常'
                }, {
                    value: '4',
                    label: '异常'
                }, {
                    value: '5',
                    label: '未启动'
                }],
                value: '1'
            }
        },
        methods: {
            //开始时间-结束时间参数
            DateDifference: function(strDateStart, strDateEnd) {
                var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, '/'))) //begintime 为开始时间
                var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, '/'))) // endtime 为结束时间
                var date3 = endtime_ms - begintime_ms //时间差的毫秒数
                var days = Math.floor(date3 / (24 * 3600 * 1000))
                return days
            },
            initData: function() {
                this.tasks.data = [{
                        id: 1,
                        text: '概念设计',
                        start_date: '2020-04-08',
                        duration: 10,
                        open: true, //默认打开，
                        toolTipsTxt: 'xxx项目概念设计',
                        progress: 0.6,
                        status: "parent"
                    },
                    {
                        toolTipsTxt: 'xxx项目-项目启动会',
                        text: '项目启动会-外部', // 任务名
                        start_date: '2020-04-08', // 开始时间
                        id: 11, // 任务id
                        duration: 3, // 任务时长，从start_date开始计算
                        parent: 1, // 父任务ID
                        type: 1,
                        progress: 0.5,
                        status: "yellow"
                    },
                    {
                        toolTipsTxt: 'xxx项目-项目启动会议',
                        text: '项目启动会-内部',
                        start_date: '2020-04-11',
                        id: 12,
                        duration: 2,
                        parent: 1,
                        type: 2,
                        progress: 0.6,
                        status: "pink"
                    },
                    {
                        toolTipsTxt: 'xxx项目开工会',
                        text: '项目开工会',
                        start_date: '2020-04-13',
                        id: 13,
                        duration: 4,
                        parent: 1,
                        type: 3,
                        progress: 1,
                        status: "green"

                    }, {
                        toolTipsTxt: 'xxx项目-项目分析',
                        text: '项目分析',
                        start_date: '2020-04-13',
                        id: 14,
                        duration: 4,
                        parent: 1,
                        type: 4,
                        progress: 0.6,
                        status: "popular"
                    },

                    {
                        id: 2,
                        text: '方案设计',
                        start_date: '2020-04-08',
                        duration: 8,
                        open: true,
                        toolTipsTxt: 'xxx方案设计',
                        state: 'default',
                        // color:"#409EFF", //设置颜色
                        progress: 0.6,
                        status: "parent"
                    },
                    {
                        toolTipsTxt: 'xxx新项目原型图设计',
                        text: '原型图设计',
                        start_date: '2020-04-08',
                        id: 21,
                        duration: 2,
                        parent: 2,
                        type: 1,
                        progress: 0.6,
                        status: "yellow"
                    },
                    {
                        toolTipsTxt: 'xxx项目-项目设计图',
                        text: '设计图设计',
                        start_date: '2020-04-09',
                        id: 22,
                        duration: 2,
                        parent: 2,
                        type: 2,
                        progress: 0.6,
                        status: "pink"
                    },
                    {
                        toolTipsTxt: 'xxx项目-项目确认',
                        text: '项目确认',
                        start_date: '2020-04-11',
                        id: 23,
                        duration: 2,
                        parent: 2,
                        type: 3,
                        progress: 1,
                        status: "green"
                    }

                ].map(function(current, ind, arry) {
                    var newObj = {}
                    if (current.type) { //存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
                        if (current.type == 1) { //冒烟
                            newObj = Object.assign({}, current, {
                                'color': '#fcca02'
                            })
                        } else if (current.type == 2) { //单元
                            newObj = Object.assign({}, current, {
                                'color': '#fec0dc'
                            })
                        } else if (current.type == 3) { //回归
                            newObj = Object.assign({}, current, {
                                'color': '#62ddd4'
                            })
                        } else if (current.type == 4) {
                            newObj = Object.assign({}, current, {
                                'color': '#d1a6ff'
                            })
                        }
                    } else { //一级菜单是蓝色的
                        newObj = Object.assign({}, current, {
                            'color': '#5692f0'
                        })
                    }

                    return newObj
                })
            },
            selectChange(val){
                console.log(val)

                //测试用例
                var obj = {
                        toolTipsTxt: '新增任务',
                        text: '新增任务', // 任务名
                        start_date: '2020-04-15', // 开始时间
                        id: 24, // 任务id
                        duration: 2, // 任务时长，从start_date开始计算
                        parent: 2, // 父任务ID
                        type: 4,
                        progress:0,
                        status: "popular"
                }
                this.tasks.data.push(obj)

                // 数据解析
                gantt.parse(this.tasks)
                // 刷新数据
                gantt.refreshData();
            }
        },
        mounted() {
            this.initData()


            //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
            gantt.config.autosize = true
            //只读模式
            gantt.config.readonly = true
            //是否显示左侧树表格
            gantt.config.show_grid = true
            //表格列设置
            gantt.config.columns = [{
                    name: 'text',
                    label: '阶段名字',
                    tree: true,
                    width: '280',
                    onrender: function(task, node) {
                        node.setAttribute("class", "gantt_cell gantt_last_cell gantt_cell_tree " + task.status);
                    }
                },
                {
                    name: 'duration',
                    label: '时长',
                    align: 'center',
                    template: function(obj) {
                        return obj.duration + '天'
                    },
                    hide: true
                }
            ]



            var weekScaleTemplate = function(date) {
                var dateToStr = gantt.date.date_to_str("%m %d");
                var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
                var weekNum = gantt.date.date_to_str("第 %W 周");
                return weekNum(date)
            };
            var daysStyle = function(date) {
                var dateToStr = gantt.date.date_to_str("%D");
                if (dateToStr(date) == "六" || dateToStr(date) == "日") return "weekend";
                return "";
            };
            gantt.config.subscales = [{
                    unit: "week",
                    step: 1,
                    template: weekScaleTemplate
                },
                {
                    unit: "day",
                    step: 1,
                    format: "%d"
                }
            ];

            gantt.plugins({
                tooltip: true
            });
            gantt.attachEvent("onGanttReady", function() {
                var tooltips = gantt.ext.tooltips;
                gantt.templates.tooltip_text = function(start, end, task) {

                    return task.toolTipsTxt + "<br/>" +
                        "阶段：" + task.text + "<br/>" +
                        gantt.templates.tooltip_date_format(start)
                };


            });


            //设置任务条进度内容
            gantt.templates.progress_text = function(start, end, task) {
                return "<div style='text-align:left;color:#fff;padding-left:20px'>" + Math.round(task.progress * 100) +
                    "% </div>";
            };

            //任务条显示内容
            gantt.templates.task_text = function(start, end, task) {
                // return task.text + '(' + task.duration + '天)';
                return "<div style='text-align:center;color:#fff'>" + task.text + '(' + task.duration + '天)' +
                    "</div>";
            }


            // gantt.templates.scale_cell_class = function(date) {
            //     /*if(date.getDay()== 0 || date.getDay()== 6){
            //       return "weekend";
            //     }*/
            //     return 'weekend'
            // }


            //任务栏周末亮色
            /*gantt.templates.task_cell_class = function(item,date){
              if(date.getDay()== 0 || date.getDay()== 6){
                return "weekend";
              }
            };*/


            //任务条上的文字大小 以及取消border自带样式
            gantt.templates.task_class = function(start, end, item) {
                return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
            }

            gantt.config.layout = {
                css: "gantt_container",
                cols: [{
                        width: 280,
                        min_width: 280,
                        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.config.task_height = 28
            //时间轴图表中，甘特图的高度
            // gantt.config.row_height = 36
            //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
            gantt.config.show_task_cells = true
            //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
            gantt.config.fit_tasks = true
            gantt.config.min_column_width = 50;
            gantt.config.auto_types = true;
            gantt.config.xml_date = "%Y-%m-%d";
            gantt.config.scale_unit = "month";
            gantt.config.step = 1;
            gantt.config.date_scale = "%Y年%M";
            gantt.config.start_on_monday = true;
            gantt.config.scale_height = 90;
            gantt.config.autoscroll = true;
            gantt.config.calendar_property = "start_date";
            gantt.config.calendar_property = "end_date";
            gantt.config.readonly = true;
            gantt.i18n.setLocale('cn');

            // 初始化
            gantt.init(this.$refs.gantt)
            // 数据解析
            gantt.parse(this.tasks)
        }
    }
</script>
<style lang="scss">
    .firstLevelTask {
        border: none;

        .gantt_task_content {
            font-size: 13px;
        }
    }

    .secondLevelTask {
        border: none;
    }

    .thirdLevelTask {
        border: 2px solid #da645d;
        color: #da645d;
        background: #da645d;
    }

    .milestone-default {
        border: none;
        background: rgba(0, 0, 0, 0.45);
    }

    .milestone-unfinished {
        border: none;
        background: #5692f0;
    }

    .milestone-finished {
        border: none;
        background: #84bd54;
    }

    .milestone-canceled {
        border: none;
        background: #da645d;
    }

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

    .container {
        height: 100%;
        width: 100%;
        position: relative;
        .gantt_grid_head_cell {
            padding-left: 20px;
            text-align: left !important;
            font-size: 14px;
            color: #333;
        }

        .select-wrap {
            position: absolute;
            top: 25px;
            z-index: 99;
            width: 90px;
            left: 180px;

            .el-input__inner {
                border: none;
            }
        }

        .left-container {
            height: 100%;
        }

        .parent {
            .gantt_tree_icon {
                &.gantt_folder_open {
                    background-image: url(assets/gantt-icon.svg) !important;
                }
                &.gantt_folder_closed{
                    background-image: url(assets/gantt-icon-up.svg) !important;
                }
            }
        }

        .green,
        .yellow,
        .pink,
        .popular {
            .gantt_tree_icon.gantt_file {
                background: none;
                position: relative;

                &::before {
                    content: "";
                    width: 10px;
                    height: 10px;
                    border-radius: 50%;
                    position: absolute;
                    left: 50%;
                    top: 50%;
                    transform: translate(-50%, -50%);
                }
            }
        }

        .green {
            .gantt_tree_icon.gantt_file {
                &::before {
                    background: #84bd54;
                }
            }
        }

        .yellow {
            .gantt_tree_icon.gantt_file {
                &::before {
                    background: #fcca02;
                }
            }
        }

        .pink {
            .gantt_tree_icon.gantt_file {
                &::before {
                    background: #da645d;
                }
            }
        }

        .popular {
            .gantt_tree_icon.gantt_file {
                &::before {
                    background: #d1a6ff;
                }
            }
        }

    }

    .left-container {
        height: 100%;
    }

    .gantt_task_content {
        text-align: left;
        padding-left: 10px;
    }
</style>

效果如图：

image.png

获取任务节点

//获取任务节点
gantt.getTask(14) //index: 13 rendered_type: "task" rendered_parent: 1 所有属性
 
//返回下一个项目的ID（无论嵌套级别是什么：相同或不同）
gantt.getNext( taskId ); //没有就返回null
gantt.getNextSibling(taskId );//没有就返回null 
//返回上一个项目的ID: 
gantt.getPrev(tsakId) 
//返回上一个同级项目的ID: 
gantt.getPrevSibling(tsakId) 
//返回父任务的ID: 
gantt.getParent(tsakId)
 
//返回任务栏的HTML元素
gantt.getTaskNode('10');//-><div task_id="2" class="gantt_task_line" …>…</div> 
gantt.getTaskRowNode('10');//-><div class="gantt_row" task_id="2">…</div>
 
//根据指定条件查找任务 
var userTasks = gantt.getTaskBy("user_id", 5); 
var userTasks2 = gantt.getTaskBy(function(task){ 
    return task.user_id == 5 || !task.user_id; 
}); 
var userTasks = gantt.getTaskBy(task => task.user_id == 5);
 
//通过其全局任务索引返回任务
var globalTaskIndex = gantt.getGlobalTaskIndex(19); // -> 10 var task = gantt.getTaskByIndex(10);
 
//返回指定时间段内发生的任务的集合
var tasks = gantt.getTaskByTime(new Date(2013,3,10),new Date(2013,4,10)); 
for (var i=0; i<tasks.length; i++){ 
    alert(tasks[i].text); 
} 
var tasks = gantt.getTaskByTime();//returns all tasks
 
//返回指定父分支的第一级子任务
gantt.getChildren( taskId)
 
//返回指定任务的兄弟姐妹（包括自身）
gantt.getSiblings("t_1"); -> //["t_1", "t_2]
 
// 检查当前是否选择了指定的任务
gantt.isSelectedTask(task.id)
 
// 检查指定任务是否存在
gantt.isTaskExists(10); // ->true
 
// 检查指定任务是否当前在甘特图中呈现
gantt.isTaskVisible("t_1"); // ->true

// 返回配置
gantt.getScale() //返回事件的配置事件头单元格宽度70高度12，总的宽度5600。列数80，每格的做边距0，70，140……；单位day
 
// 获取甘特图中当前加载的任务数
gantt.getTaskCount（）;
 
// 获取分支中任务的索引
var taskIndex = gantt.getTaskIndex("t_1"); // -> 0 
var globalTaskIndex = gantt.getGlobalTaskIndex("t_1"); // -> 1
 
//返回任务的类型
var type = gantt.getTaskType(gantt.getTask(12));
 
//通过左边表格里列的名称返回列的索引
var index = gantt.getColumnIndex("start_date"); // => 1
 
//根据 taskId 返回所有相关任务以及相关的链接
gantt.getConnectedGroup(18);
 
//获取所有的ID
gantt.getDatastore("task").fullOrder
 
//获取所有节点
gantt.getDatastore("task").pull
 
//返回日期的列索引columnIndexByDate
gantt.columnIndexByDate(new Date(2017, 03, 11)); // ->10
 
//返回所选任务的ID：
gantt.getSelectedId（）
 
//返回当前选定任务的数组：
gantt.getSelectedTasks（）;//getLastSelectedTask； isSelectedTask
 
//检查指定项目是否具有子任务:
gantt.hasChild("p_1"); //-> true
 
// 获取屏幕上可见的任务数（未折叠的任务）:
gantt.getVisibleTaskCount();

位置相关可能用到API

//返回任务的可见高度 
var height = gantt.getTaskHeight(); // -> 30 
 
//任务的DOM元素在时间轴区域中的位置和大小 
var sizes = gantt.getTaskPosition(task, task.planned_start, task.planned_end); //=>left,top,height,width 
 
//获取任务的DOM元素在时间轴区域中的最高位置 
gantt.getTaskTop('10'); 
 
//获取指定日期在图表区域中的相对水平位置 gantt.posFromDate(new Date(2013,02,31)); // -> 0 
gantt.posFromDate(new Date(2013,03,1)); // -> 74 
gantt.posFromDate(new Date(2013,03,2)); // -> 148 
 
//滚动图表区域以使指定的日期可见 
gantt.showDate(new Date()); //shows the current date 
 
// 在甘特图中启用/禁用多任务选择： 
gantt.config.multiselect = false; 
 
// 指定在一个或任何级别内是否可以使用多任务选择： 
gantt.config.multiselect_one_level = true; 

//甘特图任务悬浮框位置
gantt.config.tooltip_offset_x = 10;
gantt.config.tooltip_offset_y = 30;

//激活列表展开（折叠）功能
gantt.config.open_split_tasks = true;

//甘特图图表宽度自适应
gantt.config.autofit = true;

//用户可以通过拖拽调整行高
gantt.config.resize_rows = true;

//界面初始化时展开图表树形结构
gantt.config.open_tree_initially = true;
//默认滚动到当前时间
gantt.showDate(new Date()); //shows the current date 
 
//使指定的任务在屏幕上可见 
gantt.showTask('10'); 

//设置甘特图表头高度
gantt.config.scale_height = 50;

//设置行高
gantt.config.row_height = 44;

//配置甘特图时间刻度高度
gantt.config.scale_height = 40;
 
//跳转定位 
let colIndex = simulationGantt.columnIndexByDate(new Date( task.start_date )); 
simulationGantt.scrollTo( (colIndex-5)*col_width, (task.$index-2)*34);
 
//滚动到位置 scrollTo 
//返回滚动位置
var sPos = gantt.getScrollState(); // {x:58,y:180} 
var posX = sPos.x; var posY = sPos.y; 
 
//当甘特图滚动到特定点时触发onGanttScroll（数左，数顶部）{...} gantt.attachEvent("onGanttScroll", function (left, top){ 
    // any custom logic here 
}) 
 
//获取图表区域中指定水平位置的日期//参数相当于列的index 
gantt.dateFromPos(0);//返回第0列的日期

消息弹框API

//消息框 
gantt.message({
  type:"confirm-warning", 
  text:"Are you sure you want to do it?", 
  expire: 1000,//过期时间 
}); 
 
//模态框 
gantt.modalbox({ 
  title: "Close", 
  type: "alert-warning" 
}); 
 
//屏幕右上角的红色弹出窗口显示(第一个参数必为false) 
gantt.assert( false, task.text); 
//调用确认消息框 
gantt.confirm({ 
  text: "Continue?", 
  ok:"Yes", cancel:"No", 
  callback: function(result){ 
    if(result){  
      gantt.message("Yes!"); 
    }else{ 
      gantt.message("No..."); 
    } 
  } 
}); 
//警报框的配置 
gantt.alert({ //confirm，message，modalbox 
  title:"Alert", 
  type:"alert-error", 
  text:"You can't do this" 
}); 
gantt.assert( false, task.text);

标记标签

//在灯箱区域添加标记 
gantt.plugins({ marker: true }); 
gantt.config.task_date = "%Y-%m-%d"; 
var dateToStr = gantt.date.date_to_str(gantt.config.task_date); 
var todayMarker = null; 
var startTime = new Date("2020-12-13"); 
todayMarker = gantt.addMarker({ 
  start_date: startTime, 
  end_date: simulationGantt.calculateEndDate(new Date("2020-12-13"), task.duration), 
  css: "gantt-start-line", 
  text: "开始时间", 
}); 
 
//删除灯箱区域添加标记 
gantt.deleteMarker(todayMarker); 
 
<style> 
.gantt-end-line{ background-color: #ffeb3b; color: #fff; } 
.gantt-start-line { background-color: #0ca30a; color: #fff; } 
</style>

事件

// 选择指定的任务、从所选任务中删除选择
gantt.selectTask("t_1"); gantt.unselectTask();
 
// 在网格中排序任务：
gantt.sort("text",true);//排序的列的名称/true-降序排序，false-升序排序。默认情况下为false
 
// 将任务移到新位置
gantt.moveTask("t_1", 1);
 
// 打开具有指定ID的分支
gantt.open("p_1");
 
// 激活指定的插件
gantt.plugins({
   quick_info: true,
   keyboard_navigation: true,
   // multiselect: true,// 激活多任务选择 
});
 
// 更新指定的任务
var taskId = gantt.addTask({ 
  id:10, 
  text:"Task #10", 
  start_date:"02-04-2013", 
  duration:8, 
}); 
gantt.getTask(taskId).text = "Task #13"; //changes task's 
data gantt.updateTask(taskId); //renders the updated task
 
//初始化promise的回调
gantt.Promise(function(resolve, reject) { 
  setTimeout(function(){ resolve(); }, 5000);
 }).then(function(){ alert("Resolved") });
 
//添加链接
var linkId = gantt.addLink({ id:1, source:1, target:2, type:gantt.config.links.finish_to_start });
 
//绑定事件【attachEvent（GanttEventName名称，函数处理程序，对象设置）；对象设置可以没有】
var myEvent = gantt.attachEvent("onTaskClick", function(id, e) { 
  alert("You've just clicked an item with id="+id); 
}, {id: "my-click", once: true }); //可以指定id，是否只执行一次 
//取消绑定的事件 
gantt.detachEvent("my-click"); 
gantt.detachEvent(myEvent); 
 
// 是指定任务不触发内部事件或服务器端调用：silent
//双击任务触发（每一行）
gantt.attachEvent("onTaskDblClick", function (id, e) {return true})
//将任务添加到Gantt之前触发
gantt.attachEvent("onAfterTaskAdd",function(id,item){return true})
//用户选择任务时触发
gantt.attachEvent("onTaskSelected",function(id){return true})
//用户悬停Gantt时触发
gantt.attachEvent("onMouseMove",function(id,e){})
//用户拖拽任务后释放鼠标之后，应用更改之前触发
gantt.attachEvent("onAfterTaskDrag",function(id,mode,e){return true})
//点击“+”进行添加任务操作触发
gantt.attachEvent("onTaskCreated",function(task){return true})
//用户打开Gantt内置弹出框之前触发
gantt.attachEvent("onBeforeLightbox",function(id){return true})
 
//自动排程：需要插件auto_scheduling插件。
gantt.autoSchedule();
//要从特定任务开始重新计算计划，请将任务的id作为参数传递给autoSchedule（）方法 
gantt.autoSchedule(taskId);
 
//全屏
gantt.expand();//全屏 
gantt.collapse();//退出全屏
 
//计算完成任务的日期
gantt.calculateEndDate({start_date: new Date(2013,02,15), duration: 48}); 
gantt.calculateEndDate(new Date(2013,02,15), 48);
 
//判断是否存在参数，则返回false；否则返回true
if(gantt.defined(task.custom_property)){ 
  // .. 
}
 
//销毁甘特图实
var myGantt = Gantt.getGanttInstance(); myGantt.destructor();
 
//隐藏灯箱模式叠加层，以阻止与其余屏幕的交互
gantt.hideCover(gantt.getLightbox());
 
//如果灯箱当前处于活动状态，则将其关闭
gantt.showLightbox(1); gantt.hideLightbox()

遍历节点

//遍历甘特图中指定任务的所有父任务 
gantt.eachParent(function(task){ 
  alert(task.text); 
}, taskId); 
//遍历甘特图中的所有选定任务 eachSelectedTask 
//遍历特定任务或整个甘特图的所有子任务 eachTask 
//遍历被选中的节点 eachSelectedTask
 

导入导出

exportToExcel、exportToMSProject、exportToICal、exportToPDF、exportToPNG、exportToJSON
importFromMSProject

参考链接

插件文档地址：https://docs.dhtmlx.com/gantt/api__refs__gantt.html
https://blog.csdn.net/qq_24641385/article/details/112464817
https://www.cnblogs.com/zyfenblog/p/15608310.html