Vue3甘特图 - dhtmlx-gantt
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 = true
gantt.ext.zoom.setLevel('day') //切换到指定的缩放级别x
gantt.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" "*" 为auto
resize: 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 = true
gantt.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>
本文来自博客园,作者:小万子呀,转载请注明原文链接:https://www.cnblogs.com/newBugs/p/18637513
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体