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>

posted @   小万子呀  阅读(450)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体
点击右上角即可分享
微信分享提示