Vue3甘特图
<template><div style="height:100%; background-color: white"><div id="gantt_here" style="width:100%; height:100%;"></div></div>
</template><script setup>
import { onMounted } from 'vue'
import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
import { formatDate } from '@/utils/index.js'
const zoomConfig = {levels: [{name: 'day',scale_height: 60,min_column_width: 18,scales: [{ unit: 'month', format: '%Y-%m' },{unit: 'day',step: 1,format: '%d',css: function (date) {if (date.getDay() == 0 || date.getDay() == 6) {return 'day-item weekend weekend-border-bottom'} else {return 'day-item'}}}]},{name: 'week',height: 60,min_column_width: 110,scales: [{unit: 'quarter',step: 1,format: function (date) {let yearStr = new Date(date).getFullYear() + '年'let dateToStr = gantt.date.date_to_str('%M')let endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')return yearStr + dateToStr(date) + ' - ' + dateToStr(endDate)}},{unit: 'week',step: 1,format: function (date) {let dateToStr = gantt.date.date_to_str('%m-%d')let endDate = gantt.date.add(date, 6, 'day')let weekNum = gantt.date.date_to_str('%W')(date)return dateToStr(date) + ' 至 ' + dateToStr(endDate)}}]},{name: 'month',scale_height: 50,min_column_width: 150,scales: [{ unit: 'year', step: 1, format: '%Y年' },{ unit: 'month', format: '%Y-%m' }]}]
}
onMounted(() => {gantt.plugins({quick_info: true,marker: true,tooltip: true,quick_info: true,})gantt.config.readonly = false //是否只读gantt.config.lightbox.sections = [] // 清空弹窗内容gantt.config.drag_move = true //允许拖动任务时移动任务gantt.config.auto_types = true //将包含子任务的任务转换为项目，将没有子任务的项目转换回任务gantt.config.open_split_tasks = true//激活列表展开、折叠功能gantt.config.xml_date = '%Y.%m.%d' //甘特图时间数据格式gantt.config.show_errors = false //不显示错误信息gantt.ext.zoom.init(zoomConfig) //配置初始化扩展gantt.i18n.setLocale("cn")gantt.config.work_time = truegantt.ext.zoom.setLevel('day') //切换到指定的缩放级别xgantt.config.add_column = false //添加符号gantt.config.show_progress = false //显示进度条gantt.config.drag_resize = true //允许拖动任务时调整任务大小gantt.config.drag_links = false //允许拖动任务时调整任务链接gantt.config.order_branch = true //允许拖动任务时保持任务顺序gantt.config.drag_progress = true //允许拖动任务时调整任务进度// 设置表头gantt.config.columns = [{name: "text", //tasks参数名tree: true, //是否开始tree联级width: '170', //宽度 值为string 例如 width:"75" "*" 为autoresize: true, //可重置大小label: '订单', //标签名template: function (obj) { return obj.text }, //返回值align: "left" //对齐方式},]gantt.config.columns.push({name: "start_date",label: "开始时间",width: '110',align: "left"}, {name: "end_date",label: "结束时间",width: '100',align: "left"}, {name: "number",label: "订单数量",width: '100',align: "left",template: function (obj) { return `${obj.number}个` }, //返回值})gantt.templates.grid_folder = (item) => {return ""}//更改子项图标gantt.templates.grid_file = (item) => {return ""}// 设置当天标记const dateToStr = gantt.date.date_to_str(gantt.config.task_date)const today = new Date(new Date().setHours(0, 0, 0, 0)) // 获取当天零点的时间gantt.addMarker({start_date: today,css: "today",text: "今日",title: `Today: ${dateToStr(today)}`,})// 设置颜色gantt.templates.task_class = function (start, end, task) {if (task.estimate) {return 'gray_color'} else {return 'red_color'}}gantt.config.work_time = truegantt.templates.timeline_cell_class = function (task, date) {if (date.getDay() === 0 || date.getDay() === 6) { // 检查是否为周末return "weekend-border-bottom " // 返回红色样式} else {return "" // 其他日期使用默认样式}// const targetDate = new Date(2024, 11, 17) // 2024-12-17// if (date.getTime() === targetDate.getTime()) {// return "red_color" // 返回红色样式// }// return "" // 其他日期使用默认样式}gantt.attachEvent("onTaskDblClick", function (id, e) { })gantt.config.fit_tasks = true //自动适配任务大小gantt.templates.quick_info_content = function (start, end, task) {console.log(task, 'task')return `<div><h2>${task.text}</h2><br/>计划开始 : ${formatDate(task.start_date)}<br/>计划结束 : ${formatDate(task.end_date)}<br/>计划数量 : ${task.number}<br/></div>`}gantt.templates.tooltip_text = function (start, end, task) {return (task.text +'<br/><span>开始:</span> ' +gantt.templates.tooltip_date_format(start) +'<br/><span>结束:</span> ' +gantt.templates.tooltip_date_format(end))}gantt.init("gantt_here")gantt.parse({tasks: [{ id: 11, text: "2024-12订单", type: "project", number: 15000, open: true },{ id: 12, text: "成品钢板订单", start_date: "2024-12-03", duration: 30, parent: 11, estimate: true, number: 10000 },{ id: 13, text: "成品铅笔订单", start_date: "2024-12-20", duration: 30, parent: 11, estimate: false, number: 5000 },],links: []})
})
</script><style>
.red_color {background: red;
}.weekend-border-bottom {background: #bdbbbb;color: rgb(255, 255, 255) !important;
}.blue_color {background: blue;
}.gray_color {background: gray;
}.gantt_cal_qi_controls {display: none;
}.gantt_cal_qi_title {display: none;
}
</style>
