排程一行多任务图表

1、下载图表插件dhtmlx-gantt

npm install dhtmlx-gantt --save 

2、html代码

<template>   <div id="gantt" ref="gantt"></div> </template>

3、js代码

<script>
import { gantt } from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'

export default {
  name: 'SpeadDomeGantt',

  data() {
    return {
    }
  },

  mounted() {
    this.init()
  },

  methods: {
    // 初始化甘特图
    init() {
      //模拟数据
      let datalist = [
        //第一组 //整条数据需要带上render属性  里面多段的数据parent执行整条的id
        {
          id: 1,
          name: '小花',
          age: 18,
          render: 'split',
          text: '',
        },
        {
          id: 100,
          parent: 1,
          start_date: '2024-05-19 07:00:00',
          end_date: '2024-05-21 20:00:00',
          taskID: '111111111',
          text: '玩游戏',
          color: '#F56C6C',
        },
        {
          id: 101,
          parent: 1,
          start_date: '2024-05-19 07:00:00',
          end_date: '2024-05-21 20:00:00',
          taskID: '11111122',
          text: '事情一',
          color: '#67C23A',
        },
        {
          id: 102,
          parent: 1,
          start_date: '2024-05-22 07:20:00',
          end_date: '2024-05-22 20:00:00',
          text: '事情二',
          color: '#E6A23C',
        },
        {
          id: 103,
          parent: 1,
          start_date: '2024-05-23 07:20:00',
          end_date: '2024-05-24 20:00:00',
          text: '事情三',
          color: '#909399',
        },

        //第二组
        {
          id: 2,
          name: '小草',
          age: 16,
          render: 'split',
          text: '',
        },
        {
          id: 104,
          parent: 2,
          start_date: '2024-05-19 02:20:00',
          end_date: '2024-05-20 18:00:00',
          text: '玩游戏',
          color: '#E6A23C',
        },
        {
          id: 105,
          parent: 2,
          start_date: '2024-05-20 22:10:00',
          end_date: '2024-05-21 10:00:00',
          text: '事情四',
          color: '#909399',
        },
        {
          id: 106,
          parent: 2,
          start_date: '2024-05-21 17:20:00',
          end_date: '2024-05-22 20:00:00',
          text: '事情五',
          color: '#67C23A',
        },
        {
          id: 107,
          parent: 2,
          start_date: '2024-05-23 00:20:00',
          end_date: '2024-05-23 20:00:00',
          text: '事情六',
          color: '#F56C6C',
        },
      ]

      // 初始化甘特图并启用拖拽功能
      gantt.config.drag_move = true // 启用任务拖动
      gantt.config.drag_resize = true // 启用任务调整大小
      gantt.config.drag_progress = false // 禁用进度条拖动
      //gantt.config.readonly = true //甘蔗图只读属性
      gantt.config.links = { type: '0' } // 禁用连接线
      gantt.config.xml_date = '%Y-%m-%d %H:%i'
      gantt.config.scale_height = 100 //设置甘特图的表头高度
      //鼠标移入展示信息
      gantt.plugins({
        tooltip: true,
      })
      // 自定义展示信息
      gantt.templates.tooltip_text = function (start, end, task) {
        return `<b>任务名称:</b> ${task.text}<br/>
                <b>开始时间:</b> ${gantt.templates.tooltip_date_format(start)}<br/>
                <b>结束时间:</b> ${gantt.templates.tooltip_date_format(end)}<br/>
                <b>任务ID:</b> ${task.taskID}<br/>`
      }

      gantt.config.scale_unit = 'day' // 主单位是天
      gantt.config.date_scale = '%d %l' // 日期格式
      // 自定义子单位
      gantt.config.subscales = [
        { unit: 'month', step: 1, date: '%F %Y' }, // 显示月份和年份
        { unit: 'hour', step: 4, date: '%H' }, // 每4小时显示一次
      ]
      // 确保时间刻度从00开始
      gantt.config.min_column_width = 20 // 可根据需要调整宽度
      // 自定义第三行的时间刻度
      // 自定义日期格式以确保每一天的时间从00开始
      gantt.templates.scale_cell_class = function (date) {
        if (date.getHours() % 4 === 0) {
          return 'highlight'
        }
        return ''
      }
      // 保证时间刻度是从00开始
      // 找到最早的开始时间和最晚的结束时间
      let childTasks = datalist.filter((task) => task.start_date && task.end_date)
      let minStartDate = new Date(Math.min(...childTasks.map((task) => new Date(task.start_date))))
      let maxEndDate = new Date(Math.max(...childTasks.map((task) => new Date(task.end_date))))
      // 设置起始时间为最早开始时间的00:00
      minStartDate.setHours(0, 0, 0, 0)
      // 设置结束时间为最晚结束时间的后5日00:00
      maxEndDate.setDate(maxEndDate.getDate() + 5)
      maxEndDate.setHours(0, 0, 0, 0)

      gantt.config.start_date = minStartDate // 设置起始日期
      gantt.config.end_date = maxEndDate // 设置结束日期

      // 初始化甘特图
      gantt.init(this.$refs.gantt)

      //时间展示 2021-10-11 07:22
      gantt.templates.tooltip_date_format = gantt.date.date_to_str('%Y-%m-%d %H:%i')
      //鼠标移入展示信息
      gantt.config.round_dnd_dates = false //将任务开始时间和结束时间自动“四舍五入'
      gantt.config.root_id = 'root'
      //添加taba栏
      gantt.config.columns = [
        { name: 'name', label: '名称', align: 'center', width: 120 },
        { name: 'age', label: '年龄', align: 'center', width: 120 },
      ]
      //禁用拖拽项 拖拽类型
      gantt.attachEvent('onBeforeTaskDrag', function (id, mode, e) {
        var modes = gantt.config.drag_mode
        switch (mode) {
          case modes.move:
            break
          case modes.resize:
            break
          case modes.progress:
            break
        }
      })
      gantt.init(this.$refs.gantt)
      gantt.parse({ data: datalist })
      // 将进度条划到当前日期
      gantt.showDate(new Date())

      // 拖拽事件，可以向后台发请求
      gantt.attachEvent('onAfterTaskUpdate', function (id, item) {
        console.log(id, item)
      })
    },
  },
}
</script>

3、css代码

<style scoped>
#gantt {
  width: 100%;
  height: 400px;
}
</style>