1.甘特图递交

小小儁爺

2026-01-15 dc7ec3f6693f39779ef748c1f832860010fe73e5

1.甘特图递交

 src/utils/global.js

@@ -41,14 +41,21 @@
  return data.getFullYear() + '-' + month + '-' + date
}

// 时间处理函数  年月日   往前推一天
// 时间处理函数  年月日  时分秒  往前推一天
export function handleDateReduceOneDay(value) {
  const newDate = new Date(value)
  newDate.setDate(newDate.getDate() - 1)
  const data = new Date(newDate)
  const month = data.getMonth() < 9 ? '0' + (data.getMonth() + 1) : data.getMonth() + 1
  const date = data.getDate() <= 9 ? '0' + data.getDate() : data.getDate()
  return data.getFullYear() + '-' + month + '-' + date
  const dt = new Date(newDate)
  const wk = dt.getDay()
  const y = dt.getFullYear()
  const m = (dt.getMonth() + 1 + '').padStart(2, '0')
  const d = (dt.getDate() + '').padStart(2, '0')

  const hh = (dt.getHours() + '').padStart(2, '0')
  const mm = (dt.getMinutes() + '').padStart(2, '0')
  const ss = (dt.getSeconds() + '').padStart(2, '0')

  return `${y}-${m}-${d}  ${hh}:${mm}:${ss}`
}

// 事件处理函数  时分秒

 src/views/gantt/index.vue

@@ -46,7 +46,7 @@
<script>
import { gantt } from '@/components/dhtmlxGantt'
import '@/components/dhtmlxGantt/codebase/dhtmlxgantt.css'
import { handleDateReduceOneDay, handleDatetime } from '@/utils/global'
import { handleDateReduceOneDay, handleDatetime, handleDatetime2 } from '@/utils/global'

export default {
  data() {
@@ -76,7 +76,7 @@

    initGantt() {
      gantt.plugins({
        auto_scheduling: true,

        critical_path: true,
        drag_timeline: true,
        grouping: true,
@@ -89,8 +89,20 @@
      gantt.i18n.setLocale('cn')
      gantt.config.multiselect = true // 开启多任务选择
      gantt.config.show_links = false // 不显示连接线
      /* ↓↓↓ Auto-scheduling configuration ↓↓↓ */
      gantt.config.auto_scheduling = true

      // 不再对齐时间轴刻度（比如天格子），而是按“小时”对齐
      gantt.config.round_dnd_dates = false
      // 最小步长还是 1 小时，但你已经从“天格子”变成“小时格子”了
      gantt.config.time_step = 60 // 60 分钟 = 1 小时

      gantt.config.row_height = 32 // 行高
      gantt.config.bar_height = 20 // bar高

      gantt.config.xml_date = '%Y-%m-%d %H:%i' // gantt的日期格式

      gantt.config.drag_progress = false // 禁止通过拖动进度条改变任务进度

      // gantt.config.readonly = true  //只读模式

      /* ↓↓↓ Group configuration ↓↓↓ */
      gantt.serverList('task_priority', [
@@ -155,6 +167,7 @@
              // %M
              { unit: 'week', format: '%Y年第%W周' },
              { unit: 'day', step: 1, format: '%M%d号' }
              // { unit: 'minute', step: 60, format: '%H:%i' }
              // { unit: 'day', step: 1, format: '%j %D' }
              // { unit: 'day', step: 1, format: '星期%D' }
            ]
@@ -220,13 +233,13 @@

      gantt.config.work_time = true

      gantt.addCalendar({
        id: 'custom1',
        worktime: {
          hours: ['8:00-12:30', '13:00-17:30'], // global work hours for weekdays
          days: [0, 1, 1, 1, 1, 1, 1]
        }
      })
      // gantt.addCalendar({
      //   id: 'custom1',
      //   worktime: {
      //     hours: ['8:00-12:30', '13:00-17:30'], // global work hours for weekdays
      //     days: [0, 1, 1, 1, 1, 1, 1]
      //   }
      // })

      // gantt.addCalendar({
      //   id: 'custom2',
@@ -434,7 +447,9 @@

      // 自定义浮动框的显示内容   tooltip浮动框显示的End Date被追加1的问题修复（应该显示数据库的原始值）
      gantt.templates.tooltip_text = function(start, end, task) {
        return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + `${gantt.date.date_to_str('%Y-%m-%d')(start)}` + '<br/><b>结束时间:</b> ' + handleDateReduceOneDay(end)
        // console.log(JSON.parse(JSON.stringify(task)))
        // return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + `${gantt.date.date_to_str('%Y-%m-%d')(start)}` + '<br/><b>结束时间:</b> ' + handleDateReduceOneDay(end)
        return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + handleDatetime2(start) + '<br/><b>结束时间:</b> ' + handleDateReduceOneDay(end) + '<br/><b>进度:</b> ' + task.progress * 100 + '%'
      }

      gantt.init('gantt_here')
@@ -479,19 +494,19 @@
          'text': '项目1',
          'type': 'project',
          'start_date': '2025-04-02 00:00',
          'end_date': '2025-04-07 00:00',
          'duration': 5,
          // 'duration': 5,
          'progress': 0.4,
          'owner': [{ 'resource_id': '5', 'value': 3 }],
          'parent': 0,
          'checked': false
          'checked': false,
          render: 'split'
        },
        {
          'id': 2,
          'text': '项目2',
          'type': 'project',
          'start_date': '02-04-2025 00:00',
          'duration': 8,
          'text': '任务2',
          'type': 'task',
          'start_date': '2025-04-02 00:00',
          'duration': 2,
          'progress': 0.6,
          'owner': [{ 'resource_id': '5', 'value': 4 }],
          'parent': '1',
@@ -499,268 +514,27 @@
        },
        {
          'id': 3,
          'text': '项目3',
          'type': 'project',
          'start_date': '11-04-2025 00:00',
          'duration': 8,
          'text': '任务3',
          'type': 'task',
          'start_date': '2025-04-07 00:00',
          'parent': '1',
          'duration': 3,
          'progress': 0.6,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        },
        {
          'id': 4,
          'text': '项目4',
          'type': 'project',
          'start_date': '13-04-2025 00:00',
          'duration': 5,
          'text': '任务4',
          'type': 'task',
          'start_date': '2025-04-15 00:00',
          'parent': '1',
          'progress': 0.5,
          'owner': [{ 'resource_id': '5', 'value': 4 }],
          'priority': 3,
          checked: true
        },
        {
          'id': 5,
          'text': '任务5',
          'calendar_id': 'custom1',
          'type': 'task',
          'start_date': '03-04-2025 00:00',
          'duration': 7,
          'parent': '2',
          'progress': 0.6,
          'owner': [{ 'resource_id': '6', 'value': 5 }],
          'priority': 1,
          checked: true
        },
        {
          'id': 6,
          'text': '任务6',
          'type': 'task',
          'calendar_id': 'custom1',
          'start_date': '03-04-2025 12:00',
          'duration': 7,
          'parent': '2',
          'progress': 0.6,
          'owner': [{ 'resource_id': '7', 'value': 1 }],
          'priority': 2,
          checked: false
        },
        {
          'id': 7,
          'text': '任务7',
          'calendar_id': 'custom1',
          'type': 'task',
          'start_date': '12-04-2025 00:00',
          'duration': 8,
          'parent': '3',
          'progress': 0.6,
          'owner': [{ 'resource_id': '10', 'value': 2 }],
          checked: false
        },
        {
          'id': 8,
          'text': '任务8',
          'calendar_id': 'custom1',
          'type': 'task',
          'start_date': '14-04-2025 00:00',
          'duration': 5,
          'parent': '4',
          'progress': 0.5,
          'owner': [{ 'resource_id': '10', 'value': 4 }, { 'resource_id': '9', 'value': 5 }],
          'priority': 1,
          checked: false
        },
        {
          'id': 9,
          'text': '任务9',
          'type': 'task',
          'start_date': '21-04-2025 00:00',
          'duration': 4,
          'parent': '4',
          'progress': 0.5,
          'owner': [{ 'resource_id': '7', 'value': 3 }],
          checked: false
        },
        {
          'id': 10,
          'text': '任务10',
          'type': 'task',
          'start_date': '27-04-2025 00:00',
          'duration': 3,
          'parent': '4',
          'progress': 0.5,
          'owner': [{ 'resource_id': '8', 'value': 5 }],
          'priority': 2,
          checked: false
        },
        {
          'id': 11,
          'text': '项目11',
          'type': 'project',
          'progress': 0.6,
          'start_date': '02-04-2025 00:00',
          'duration': 13,
          'owner': [{ 'resource_id': '5', 'value': 4 }],
          'parent': 0,
          checked: false
        },
        {
          'id': 12,
          'text': '任务12',
          'calendar_id': 'custom2',
          'type': 'task',
          'start_date': '03-04-2025 00:00',
          'duration': 5,
          'parent': '11',
          'progress': 1,
          'owner': [{ 'resource_id': '7', 'value': 6 }],
          checked: false
        },
        {
          'id': 13,
          'text': '项目13',
          'type': 'project',
          'start_date': '03-04-2025 00:00',
          'duration': 11,
          'parent': '11',
          'progress': 0.5,
          'progress': 0.2,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        },
        {
          'id': 14,
          'text': '任务14',
          'calendar_id': 'custom2',
          'type': 'task',
          'start_date': '03-04-2025 00:00',
          'duration': 6,
          'parent': '11',
          'owner': [],
          'progress': 0.8,
          checked: false
        },
        {
          'id': 15,
          'text': '项目15',
          'type': 'project',
          'start_date': '03-04-2025 00:00',
          'duration': 5,
          'parent': '11',
          'progress': 0.2,
          'owner': [{ 'resource_id': '5', 'value': 5 }],
          checked: false
        },
        {
          'id': 16,
          'text': '任务16',
          'calendar_id': 'custom2',
          'type': 'task',
          'start_date': '03-04-2025 00:00',
          'duration': 7,
          'parent': '11',
          'progress': 0,
          'owner': [{ 'resource_id': '7', 'value': 2 }],
          'priority': 1,
          checked: false
        },
        {
          'id': 17,
          'text': '任务17',
          'type': 'task',
          'start_date': '03-04-2025 00:00',
          'duration': 2,
          'parent': '13',
          'progress': 1,
          'owner': [{ 'resource_id': '8', 'value': 1 }],
          'priority': 2,
          checked: false
        },

        {
          'id': 18,
          'text': '任务19',
          'type': 'task',
          'start_date': '10-04-2025 00:00',
          'duration': 2,
          'parent': '13',
          'progress': 0.8,
          'owner': [{ 'resource_id': '6', 'value': 2 }],
          'priority': 3,
          checked: false
        },
        {
          'id': 19,
          'text': '任务20',
          'calendar_id': 'custom1',
          'type': 'task',
          'start_date': '13-04-2025 00:00',
          'duration': 4,
          'parent': '13',
          'progress': 0.2,
          'owner': [{ 'resource_id': '6', 'value': 3 }],
          checked: false
        },
        {
          'id': 20,
          'text': '任务21',
          'type': 'task',
          'start_date': '13-04-2025 00:00',
          'duration': 4,
          'parent': '13',
          'progress': 0,
          'owner': [{ 'resource_id': '8', 'value': 4 }],
          'priority': 1,
          checked: false
        },
        {
          'id': 21,
          'text': '任务22',
          'type': 'project',
          'start_date': '03-04-2025 00:00',
          'duration': 4,
          'parent': '0',
          'progress': 0.5,
          'owner': [{ 'resource_id': '6', 'value': 5 }],
          checked: false
        },
        {
          'id': 22,
          'text': '任务23',
          'calendar_id': 'custom1',
          'type': 'task',
          'start_date': '03-04-2025 00:00',
          'duration': 4,
          'parent': '21',
          'progress': 0.1,
          'owner': [{ 'resource_id': '8', 'value': 3 }],
          'priority': 1,
          checked: false
        },
        {
          'id': 23,
          'text': '任务24',
          'type': 'task',
          'start_date': '03-04-2025 00:00',
          'duration': 5,
          'parent': '21',
          'progress': 0,
          'owner': [{ 'resource_id': '8', 'value': 5 }],
          'priority': 1,
          checked: false
        },
        {
          'id': 24,
          'text': '任务25',
          // 'type': 'milestone',
          'type': 'task',
          'start_date': '20-04-2025 00:00',
          'parent': '21',
          'progress': 0,
          'owner': [{ 'resource_id': '5', 'value': 3 }],
          'duration': 2,
          checked: false
        }

      ]

      // 添加更多示例数据，使分页效果更明显
@@ -779,7 +553,6 @@
      //     'checked': false
      //   })
      // }
      console.log(JSON.parse(JSON.stringify(this.allTasks)))
      this.totalTasks = this.allTasks.length
      this.updatePaginatedTasks()
      this.renderGanttChart()
@@ -905,6 +678,28 @@
  margin: unset;
}

.gantt_task_cell {
  background: rgba(5, 185, 100, .1);
}

/*非工作日*/
.weekend {
  background: rgba(255, 255, 255, 0.5);
}

/* 为任务条内部的进度条添加圆角，保持视觉统一 */
.gantt_task_progress {
  border-radius: 10px !important; /* 建议与任务条半径一致 */
}

.gantt_bar_task {
  border-radius: 10px !important;
}

.gantt_bar_project {
  border-radius: 10px !important;
}

.taskCheckBox {
  cursor: pointer;
}