1.甘特图代码优化

小小儁爺

2026-01-15 c2cc4580269de69325dc1a7ea65d411228701852

 src/views/gantt/index.vue

@@ -63,45 +63,11 @@
        tooltip: true,
        undo: true
      })
      gantt.i18n.setLocale('cn')
      gantt.config.multiselect = true // 开启多任务选择
      gantt.config.show_links = false // 不显示连接线
      /* ↓↓↓ Auto-scheduling configuration ↓↓↓ */
      gantt.config.auto_scheduling = true

      function renderDiv(task, date, className) {
        const el = document.createElement('div')
        el.className = className
        const sizes = gantt.getTaskPosition(task, date)
        el.style.left = sizes.left + 'px'
        el.style.top = sizes.top + 'px'
        return el
      }

      gantt.attachEvent('onGanttReady', function() {
        // gantt.addTaskLayer(function draw_deadline(task) {
        //   const constraintType = gantt.getConstraintType(task);
        //   const types = gantt.config.constraint_types;
        //   if (constraintType != types.ASAP && constraintType != types.ALAP && task.constraint_date) {
        //     const dates = gantt.getConstraintLimitations(task);
        //
        //     const els = document.createElement("div");
        //
        //     if (dates.earliestStart) {
        //       els.appendChild(renderDiv(task, dates.earliestStart, 'constraint-marker earliest-start'));
        //     }
        //
        //     if (dates.latestEnd) {
        //       els.appendChild(renderDiv(task, dates.latestEnd, 'constraint-marker latest-end'));
        //     }
        //
        //     els.title = gantt.locale.labels[constraintType] + " " + gantt.templates.task_date(task.constraint_date);
        //
        //     if (els.children.length)
        //       return els;
        //   }
        //   return false;
        // });
      })
      /* ↑↑↑ Auto-scheduling configuration ↑↑↑ */

      /* ↓↓↓ Group configuration ↓↓↓ */
      gantt.serverList('task_priority', [
@@ -117,8 +83,6 @@
        { key: 4, label: 'Complete' }
      ])

      gantt.i18n.setLocale('cn')

      function byId(list, id) {
        for (let i = 0; i < list.length; i++) {
          if (list[i].key == id) {
@@ -130,6 +94,7 @@

      /* ↑↑↑ Group configuration ↑↑↑ */

      // 放大缩小属性
      /* ↓↓↓ Zoom configuration ↓↓↓ */
      const zoomConfig = {
        levels: [
@@ -212,7 +177,6 @@
          return gantt.$root.querySelector('.gantt_task')
        }
      }

      gantt.ext.zoom.init(zoomConfig)
      gantt.ext.zoom.setLevel('week')
      /* ↑↑↑ Zoom configuration ↑↑↑ */
@@ -248,15 +212,12 @@
      // })
      /* ↑↑↑ Working Time configuration ↑↑↑ */

      // 甘特图列参数设置
      /* ↓↓↓ Grid Columns configuration ↓↓↓ */

      gantt.config.reorder_grid_columns = true

      const textEditor = { type: 'text', map_to: 'text' }
      const startDateEditor = { type: 'date', map_to: 'start_date' }
      const durationEditor = { type: 'number', map_to: 'duration', min: 0, max: 100 }

      // 甘特图列名称
      const durationEditor = { type: 'number', map_to: 'duration', min: 1, max: 100 }
      gantt.config.columns = [
        {
          name: 'checked',
@@ -324,57 +285,7 @@
        },
        { name: 'add', width: 44 }
      ]

      /* ↑↑↑ Grid Columns configuration ↑↑↑ */

      /* ↓↓↓ Resource configuration ↓↓↓ */
      function getResourceAssignments(resourceId) {
        let assignments
        const store = gantt.getDatastore(gantt.config.resource_store)
        const resource = store.getItem(resourceId)

        if (resource.$level === 0) {
          assignments = []
          store.getChildren(resourceId).forEach(function(childId) {
            assignments = assignments.concat(gantt.getResourceAssignments(childId))
          })
        } else if (resource.$level === 1) {
          assignments = gantt.getResourceAssignments(resourceId)
        } else {
          assignments = gantt.getResourceAssignments(resource.$resource_id, resource.$task_id)
        }
        return assignments
      }

      gantt.templates.resource_cell_class = function(start_date, end_date, resource, tasks) {
        const css = []
        css.push('resource_marker')
        if (tasks.length <= 1) {
          css.push('workday_ok')
        } else {
          css.push('workday_over')
        }
        return css.join(' ')
      }

      gantt.templates.resource_cell_value = function(start_date, end_date, resource, tasks) {
        let result = 0
        tasks.forEach(function(item) {
          const assignments = gantt.getResourceAssignments(resource.id, item.id)
          assignments.forEach(function(assignment) {
            const task = gantt.getTask(assignment.task_id)
            result += assignment.value * 1
          })
        })

        if (result % 1) {
          result = Math.round(result * 10) / 10
        }
        return '<div>' + result + '</div>'
      }

      gantt.locale.labels.section_resources = 'Owners'
      gantt.locale.labels.section_calendar = 'Calendar'

      // 汉化窗口
      gantt.locale.labels = {
@@ -495,12 +406,7 @@
      ])
      /* ↑↑↑ Resource configuration ↑↑↑ */

      /* ↓↓↓ Layout configuration ↓↓↓ */
      gantt.config.grid_elastic_columns = true

      // let currentLayout = 'default'

      /* ↑↑↑ Layout configuration ↑↑↑ */

      // 自定义浮动框的显示内容   tooltip浮动框显示的End Date被追加1的问题修复（应该显示数据库的原始值）
      gantt.templates.tooltip_text = function(start, end, task) {
@@ -633,7 +539,7 @@
          },
          {
            'id': 11,
            'text': '任务11',
            'text': '项目11',
            'type': 'project',
            'progress': 0.6,
            'start_date': '02-04-2025 00:00',