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>