vue甘特圖

1.需要安裝的依賴

(1.1) day.js (用於簡單轉化時間戳,以及計算閏年平年)

(1.2)  gantt-elastic、gantt-elastic-header (甘特圖依賴)

 

 

 

2.實現步驟

(2.1)html標簽

<gantt-elastic
          :options="options"
          :tasks="tasks"
>
</gantt-elastic>

 

(2.2) 配置甘特圖屬性

<script>
import GanttElastic from "gantt-elastic";
import GanttHeader from "gantt-elastic-header";
import dayjs from "dayjs";

/**
 * 配置甘特圖
 * @type {{calendar: {hour: {display: boolean}}, maxRows: number, times: {timeZoom: number}, maxHeight: number, taskList: {columns: [{width: number, id: number, label: string, value: string}, {width: number, html: boolean, id: number, label: string, expander: boolean, value: string, events: {click({data: *, column: *}): void}}, {width: number, html: boolean, id: number, label: string, expander: boolean, value: string, events: {click({data: *, column: *}): void}}, {width: number, html: boolean, id: number, label: string, expander: boolean, value: string, events: {click({data: *, column: *}): void}}, {width: number, html: boolean, id: number, label: string, expander: boolean, value: string, events: {click({data: *, column: *}): void}}, null, null, null, null, null], expander: {straight: boolean}}, row: {height: number}, taskMapping: {progress: string}, title: {html: boolean, label: string}, locale: {months: string[], weekdays: string[], Now: string, name: string}, chart: {progress: {bar: boolean}, expander: {display: boolean}}}}
 */
let options = {
  taskMapping: {
    progress: "percent",
  },
  maxRows: 100,
  maxHeight: 500,
  title: {
    label: "Your project title as html (link or whatever...)",
    html: false,
  },
  row: {
    height: 15,
  },
  times: {
    //設置日期寬度
    timeZoom: 20
  },
  calendar: {
    //小時
    hour: {
      display: false,
    },
  },
  chart: {
    progress: {
      bar: false,
    },
    expander: {
      display: true,
    },
  },
  taskList: {
    expander: {
      straight: false,
    },
    columns: [
      {
        id: 1,
        label: "序號",
        value: "id",
        width: 60,
      },
      {
        id: 2,
        label: "任務名稱",
        value: "label",
        width: 130,
        expander: true,
        html: true,
        events: {
          click({data, column}) {
            alert("description clicked!\n" + data.label);
          },
        },
      },
      {
        id: 3,
        label: "前置任務",
        value: "frontTask",
        width: 100,
        expander: true,
        html: true,
        events: {
          click({data, column}) {
            alert("description clicked!\n" + data.label);
          },
        },
      },
      {
        id: 4,
        label: "進度",
        value: "plan",
        width: 80,
        expander: true,
        html: true,
        events: {
          click({data, column}) {
            alert("description clicked!\n" + data.label);
          },
        },
      },
      {
        id: 5,
        label: "工期",
        value: "project",
        width: 70,
        expander: true,
        html: true,
        events: {
          click({data, column}) {
            alert("description clicked!\n" + data.label);
          },
        },
      },
      {
        id: 6,
        label: "開始時間",
        value: (task) => dayjs(task.start).format("YYYY-MM-DD"),
        width: 78,
      },
      {
        id: 7,
        label: "完成日期",
        value: (task) => dayjs(task.end).format("YYYY-MM-DD"),
        width: 78,
      },
      {
        id: 8,
        label: "工時",
        value: "workingHours",
        width: 70,
        expander: true,
        html: true,
        events: {
          click({data, column}) {
            alert("description clicked!\n" + data.label);
          },
        }
      },
      {
        id: 9,
        label: "關聯表",
        value: "associativeTable",
        width: 80,
        expander: true,
        html: true,
        events: {
          click({data, column}) {
            alert("description clicked!\n" + data.label);
          },
        }
      },
      {
        id: 10,
        label: "負責人",
        value: "head",
        width: 80,
        expander: true,
        html: true,
        events: {
          click({data, column}) {
            alert("description clicked!\n" + data.label);
          },
        }
      }
    ],
  },
  locale: {
    name: "zh",
    Now: "Now",
    weekdays: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    months: [
      "一月",
      "二月",
      "三月",
      "四月",
      "五月",
      "六月",
      "七月",
      "八月",
      "九月",
      "十月",
      "十一月",
      "十二月",
    ],
  },
};


export default {
  name: "schedule",

  components: {
    GanttElastic,
    GanttHeader,
  },
  data() {
    return {
      /**
       * 甘特圖
       */
      tasks: [
        {
          id: 1, //序號
          label: "<新增任務>", //任務名稱
          frontTask: "<前置任務>", //前置任務
          plan: 0, //進度
          project: 0, //工期
          head: "張三", //負責人
          workingHours: 0, //工時
          associativeTable: "青山", //關聯表
          //便於計算日期之間剩余天數
          start: "2021-5-1",
          end: "2021-5-19",
          //取得剩余天數
          duration: this.getDatePop(this.id),
          percent: 85,  //百分比 可省去
          type: "project",//類型
          collapsed: true,
        }
      ],
      options
    }
  }, methods: {
    /**
     * 獲取 兩個日期之間有多少天
     * @returns {number}
     */
    getDatePop: function (index) {
       let oldPop = new Date(this.start);
       let newsPop = new Date(this.end);
       return (dayjs(newsPop).diff(dayjs(oldPop),"day")+1)*1000*60*60*24;
    }
  }
}
</script>