VUE - Gantt dhtmlx-gantt 使用

VUE - Gantt dhtmlx-gantt 使用

Max.Bai

2020-04

记录VUE中使用dhtmlx-gantt组件

dhtmlx-gantt组件免费，高级功能收费

官方文档  https://docs.dhtmlx.com/gantt/api__refs__gantt.html
 

效果：

0x00 安装

npm install dhtmlx-gantt

 

0x01 记录使用过程中基本配置

gantt组件文件：

 

0x02 页面使用

// 模板

      


// 导入上面的gantt组件
import gantt from "./components/Gantt";


// 数据结构
dataSource: {
        data: []
      },



// 请求接口获取数据
const { data, total } = await fetchProductCapabilityBuild({
        ...this.params,
        ...this.pageParams
      });
this.dataSource.data = data;
this.$refs.ganttchart.reload(); // 重新刷新gantt图


// 我的接口接口返回数据结构，只需要把data赋值给 dataSource.data
单层结构不需要父级识别字段
字段对应的设置都在组件设置里面，下面的是我的数据机构
duration是必须要的字段，值要和设置里面的单位一致，不然图的数据就会错乱
{
    "code":0,
    "data":[
        {
            "id":914027,    // 父节点id
            "open":true,    // 是否展开
            "text":"父节点"    // 父节点名字
        },
        {
            "cap_actl_end":"2020-04-21 00:00:00",
            "cap_actl_start":"2020-04-01 00:00:00",
            "cap_id":1075,
            "cap_plan_end":"2020-04-21 23:59:59",
            "cap_plan_start":"2020-04-01 00:00:00",
            "cap_status":"完成",
            "duration":21,            // 必须要字段，标识task时长
            "issue_product_id":14027,
            "parent":914027,            // 父节点识别字段
            "product_name":"AMS",
            "progress":1,                // task进度
            "start_date":"2020-04-01 00:00:00",        //必须要字段 task 开始时间
            "text":"广告数据报告"        //必须要字段 task名字
        }
    ],
    "message":"查询成功!",
    "total":14
}

数据格式查看官网：https://docs.dhtmlx.com/gantt/desktop__loading.html