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
}