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>