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组件文件：

<template>
  <div ref="gantt"></div>
</template>

<script>
import "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/locale/locale_cn.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker.js";
import "dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js";

export default {
  name: "gantt",
  props: {
    tasks: {
      type: Object,
      default() {
        return { data: [], links: [] };
      }
    }
  },

  mounted: function() {
    gantt.config.date_format = "%Y-%m-%d %H:%i:%s"; //  设置日期格式
    gantt.config.readonly = true;
    gantt.config.duration_unit = "day"; // minute, day, month

    // 日期列显示
    // gantt.config.min_column_width = 60;
    gantt.config.scale_height = 30 * 2;
    gantt.config.scales = [
      { unit: "year", step: 1, format: "%Y" },
      { unit: "month", step: 1, format: "%M" },
    ];

    // 表头配置显示列   //name:绑定数据的名称  align：对其方式  label显示在表头的名称
    gantt.config.columns = [
      {
        name: "text",
        tree: true,
        width: "*",
        align: "left",
        label: "产品/能力名称",
        resize: true
      },
      { name: "start_date", align: "center", width: 80, resize: true },
      {
        name: "cap_plan_end",
        align: "center",
        label: "结束时间",
        width: 80,
        resize: true,
        template:function(task){return task.cap_plan_end?task.cap_plan_end.substring(0,10):'';}
      }
    ];

    // task 文本
    gantt.templates.task_text = function(start, end, task) {
      if (task.cap_actl_start != undefined)
        return ("<b>能力:</b> " + task.text + " (" + task.progress * 100 + "%)");
      else
        return ("<b>" + task.text + "</b> ");
    };
    // gantt.templates.leftside_text = function(start, end, task) {
    //   return "<b>Priority: </b>" + task.priority;
    // };
    // gantt.templates.rightside_text = function(start, end, task) {
    //   return "<b>Holders: </b>" + task.users;
    // };

    // task tooltips
    gantt.templates.tooltip_text = function(start, end, task) {
      if (task.cap_actl_start != undefined){
        return (
          "<b>能力名称:</b> " + task.text + 
          "<br/><b>实际开始时间:</b> " + (task.cap_actl_start.substring(0,10)=="0000-00-00"?" - ":task.cap_actl_start.substring(0,10)) + 
          "<br/><b>实际结束时间:</b> " + (task.cap_actl_end.substring(0,10)=="0000-00-00"?" - ":task.cap_actl_end.substring(0,10)) + 
          "<br/><b>进度:</b> " + task.progress * 100 + "%"
        );
      }
      else {
        return (
          "<b>产品名称:</b> " + task.text
        );
      }
    };

    // task 选择事件
    // gantt.attachEvent("onTaskSelected", id => {
    //   let task = gantt.getTask(id);
    //   this.$emit("task-selected", task);
    // });

    // // 加载之前设置时间范围
    // gantt.attachEvent("onBeforeGanttRender", function(){
    //   var range = gantt.getSubtaskDates();
    //   console.log(range);
    //   var scaleUnit = gantt.getState().scale_unit;
    //   if(range.start_date && range.end_date){
    //     gantt.config.start_date = gantt.calculateEndDate(range.start_date, -4, scaleUnit);
    //     gantt.config.end_date = gantt.calculateEndDate(range.end_date, 5, scaleUnit);
    //   }
    // });

    this.addTodayLine();
    gantt.config.fit_tasks = true; 
    gantt.config.tooltip_hide_timeout = 2000;
    gantt.init(this.$refs.gantt);
    gantt.parse(this.$props.tasks);
  },
  methods: {
    reload() {
      gantt.clearAll();
      this.addTodayLine();
      gantt.parse(this.$props.tasks);
      gantt.render();
    },
    addTodayLine() {
      // 时间线
      var date_to_str = gantt.date.date_to_str(gantt.config.task_date);
      var today = new Date();
      gantt.addMarker({
        start_date: today,
        css: "today",
        text: "今天",
        title: "今天: " + date_to_str(today)
      });
    }
  }
};
</script>

<style>
@import "~dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

 

0x02 页面使用

// 模板

      <gantt
        ref="ganttchart"
        class="left-container"
        :tasks="dataSource"
        style="height:720px;"
      ></gantt>


// 导入上面的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