1.递交

小小儁爺

2026-01-15 207babb2fe57b9a8d876fafb7e088c043aa6efc7

 src/views/gantt/index.vue

@@ -2,8 +2,8 @@
  <div style="padding: 0 10px">

    <div style="padding: 10px 0;display: flex;">
      <el-button type="primary" size="mini" @click="ganttUndo">回退拖动操作</el-button>
      <el-button type="primary" size="mini" @click="ganttRedo">前进拖动操作</el-button>
      <!--      <el-button type="primary" size="mini" @click="ganttUndo">回退拖动操作</el-button>-->
      <!--      <el-button type="primary" size="mini" @click="ganttRedo">前进拖动操作</el-button>-->
      <el-button type="primary" size="mini" @click="ganttZoomIn">放大</el-button>
      <el-button type="primary" size="mini" @click="ganttZoomOut">缩小</el-button>
      <el-date-picker
@@ -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' }
            ]
@@ -206,27 +219,27 @@

      // 是否是工作时间
      /* ↓↓↓ Working Time configuration ↓↓↓ */
      gantt.templates.scale_cell_class = function(date) {
        if (!gantt.isWorkTime(date)) {
          return 'weekend'
        }
      }
      // gantt.templates.scale_cell_class = function(date) {
      //   if (!gantt.isWorkTime(date)) {
      //     return 'weekend'
      //   }
      // }
      //
      // gantt.templates.timeline_cell_class = function(item, date) {
      //   if (!gantt.isWorkTime({ date: date, task: item })) {
      //     return 'weekend'
      //   }
      // }

      gantt.templates.timeline_cell_class = function(item, date) {
        if (!gantt.isWorkTime({ date: date, task: item })) {
          return 'weekend'
        }
      }
      // gantt.config.work_time = true

      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',
@@ -255,8 +268,17 @@
            return `<input type="checkbox" class="taskCheckBox" data-action="check-row" ${checked} />`
          }
        },
        { name: 'wbs', label: '节点', width: 80, template: gantt.getWBSCode },
        { name: 'text', tree: true, label: '任务名称', width: 200, resize: true, editor: textEditor },
        // { name: 'wbs', label: '节点', width: 80, template: gantt.getWBSCode },
        { name: 'text', tree: true, align: 'center', label: '任务名称', width: 240, resize: true, editor: textEditor },
        { name: 'saleOrder', align: 'center', label: '销售订单', width: 100, resize: true },
        { name: 'partName', align: 'center', label: '产品名称', width: 80, resize: true },
        { name: 'partCode', align: 'center', label: '产品编码', width: 80, resize: true },
        {
          name: 'progress', align: 'center', label: '进度', width: 120, resize: true, template: function(task) {
            return `<input type="range"  onmousedown="event.preventDefault()" onmouseup="event.preventDefault()" id="taskRange" value="${task.progress * 100}"/> ${task.progress * 100}%`
            // return `<el-progress :percentage='${task.progress * 100}'></el-progress> ${task.progress * 100}%`
          }
        },
        { name: 'start_date', align: 'center', label: '开始日期', width: 80, resize: true, editor: startDateEditor },
        {
          name: 'duration',
@@ -270,44 +292,19 @@
            // return (task.duration || 0) + 1 // 在当前duration的基础上加1
            return task.duration
          }
        },
        {
          name: 'owner', align: 'center', width: 75, label: '负责人', template: function(task) {
            // if (task.type == gantt.config.types.project) {
            //   return ''
            // }
            //
            // const store = gantt.getDatastore('resource')
            // const assignments = task[gantt.config.resource_property]
            //
            // if (!assignments || !assignments.length) {
            //   return 'Unassigned'
            // }
            //
            // if (assignments.length === 1) {
            //   return store.getItem(assignments[0].resource_id).text
            // }
            //
            // let result = ''
            // assignments.forEach(function(assignment) {
            //   const owner = store.getItem(assignment.resource_id)
            //   if (!owner) {
            //     return
            //   }
            //   result += '<div class=\'owner-label\' title=\'' + owner.text + '\'>' + owner.text.substr(0, 1) + '</div>'
            // })
            //
            // return result
            return '张三'
          },
          resize: true
        },
        {
          name: 'priority', width: 60, label: '优先级', align: 'center', resize: true, template: function(task) {
            return byId(gantt.serverList('task_priority'), task.priority)
          }
        },
        { name: 'add', width: 44 }
        }
        // {
        //   name: 'owner', align: 'center', width: 75, label: '负责人', template: function(task) {
        //     return '张三'
        //   },
        //   resize: true
        // },
        // {
        //   name: 'priority', width: 60, label: '优先级', align: 'center', resize: true, template: function(task) {
        //     return byId(gantt.serverList('task_priority'), task.priority)
        //   }
        // },
        // { name: 'add', width: 44 }
      ]
      /* ↑↑↑ Grid Columns configuration ↑↑↑ */

@@ -434,7 +431,17 @@

      // 自定义浮动框的显示内容   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 + '%'
        return '<b>任务:</b> ' + task.text + '<br/><b>开始时间:</b> ' + handleDatetime2(start) + '<br/><b>结束时间:</b> ' + handleDatetime2(end) + '<br/><b>进度:</b> ' + task.progress * 100 + '%'
      }

      gantt.templates.task_text = function(start, end, task) {
        // return '<span style="color: white; font-weight: bold; text-shadow: 1px 1px 1px #000;">' +
        //   task.description + ' - ' +
        //   '</span>'
        return task.description
      }

      gantt.init('gantt_here')
@@ -476,291 +483,141 @@
      this.allTasks = [
        {
          'id': 1,
          'text': '项目1',
          'text': '工单:MO-2025-05-001',
          saleOrder: 'SO-2025-05001',
          partName: '跑步机',
          partCode: 'Run01',
          description: '排产数量:500 报工数量:100 进度:20%',
          'type': 'project',
          'start_date': '2025-04-02 00:00',
          'end_date': '2025-04-07 00:00',
          'duration': 5,
          'progress': 0.4,
          // 'duration': 5,
          'progress': 0.2,
          'owner': [{ 'resource_id': '5', 'value': 3 }],
          'parent': 0,
          'checked': false
          // render: 'split'
        },
        {
          'id': 2,
          'text': '项目2',
          'text': '工序:切割',
          saleOrder: 'SO-2025-05001',
          partName: '跑步机',
          partCode: 'Run01',
          description: '排产数量:500 报工数量:100 进度:20%',
          'type': 'project',
          'start_date': '02-04-2025 00:00',
          'duration': 8,
          'progress': 0.6,
          'start_date': '2025-04-02 00:00',
          'duration': 2,
          'progress': 0.2,
          'owner': [{ 'resource_id': '5', 'value': 4 }],
          'parent': '1',
          checked: false
        },
        {
          'id': 3,
          'text': '项目3',
          'type': 'project',
          'start_date': '11-04-2025 00:00',
          'duration': 8,
          'parent': '1',
          'progress': 0.6,
          'text': '设备:金工车间1号设备',
          saleOrder: 'SO-2025-05001',
          partName: '跑步机',
          partCode: 'Run01',
          description: '排产数量:500 报工数量:100 进度:20%',
          'type': 'task',
          'start_date': '2025-04-07 00:00',
          'parent': '2',
          'duration': 4,
          'progress': 0.2,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        },
        {
          'id': 4,
          'text': '项目4',
          'type': 'project',
          'start_date': '13-04-2025 00:00',
          'duration': 5,
          'parent': '1',
          'progress': 0.5,
          'owner': [{ 'resource_id': '5', 'value': 4 }],
          'priority': 3,
          checked: true
        },
        {
          'id': 5,
          'text': '任务5',
          'calendar_id': 'custom1',
          'text': '设备:金工车间2号设备',
          saleOrder: 'SO-2025-05001',
          partName: '跑步机',
          partCode: 'Run01',
          description: '排产数量:500 报工数量:100 进度:20%',
          'type': 'task',
          'start_date': '03-04-2025 00:00',
          'duration': 7,
          'start_date': '2025-04-15 00:00',
          'parent': '2',
          'progress': 0.6,
          'owner': [{ 'resource_id': '6', 'value': 5 }],
          'priority': 1,
          checked: true
          'duration': 3,
          'progress': 0.2,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        }, {
          'id': 5,
          'text': '工单:MO-2025-05-002',
          saleOrder: 'SO-2025-05002',
          partName: '走步机',
          partCode: 'W01',
          description: '排产数量:1000 报工数量:500 进度:50%',
          'type': 'project',
          'start_date': '2025-04-02 00:00',
          // 'duration': 5,
          'progress': 0.5,
          'owner': [{ 'resource_id': '5', 'value': 3 }],
          'parent': 0,
          'checked': false
          // render: 'split'
        },
        {
          '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,
          'text': '工序:切割',
          saleOrder: 'SO-2025-05002',
          partName: '走步机',
          partCode: 'W01',
          description: '排产数量:1000 报工数量:500 进度:50%',
          'type': 'project',
          'start_date': '2025-04-02 00:00',
          'duration': 5,
          'progress': 0.5,
          'owner': [{ 'resource_id': '5', 'value': 4 }],
          'parent': '5',
          checked: false
        },
        {
          'id': 7,
          'text': '任务7',
          'calendar_id': 'custom1',
          'text': '设备:金工车间3号设备',
          saleOrder: 'SO-2025-05002',
          partName: '走步机',
          partCode: 'W01',
          description: '排产数量:1000 报工数量:500 进度:50%',
          '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',
          'start_date': '2025-04-07 00:00',
          'parent': '6',
          '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,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        },
        {
          'id': 14,
          'text': '任务14',
          'calendar_id': 'custom2',
          'id': 8,
          'text': '设备:金工车间4号设备',
          saleOrder: 'SO-2025-05002',
          partName: '走步机',
          partCode: 'W01',
          description: '排产数量:1000 报工数量:600 进度:60%',
          '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',
          'start_date': '2025-04-12 00:00',
          'parent': '6',
          'duration': 4,
          'parent': '13',
          'progress': 0.2,
          'owner': [{ 'resource_id': '6', 'value': 3 }],
          'progress': 0.6,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        },
        {
          'id': 20,
          'text': '任务21',
          'id': 9,
          'text': '设备:金工车间5号设备',
          saleOrder: 'SO-2025-05002',
          partName: '走步机',
          partCode: 'W01',
          description: '排产数量:1000 报工数量:400 进度:40%',
          '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,
          'start_date': '2025-04-10 00:00',
          'parent': '6',
          'duration': 3,
          'progress': 0.4,
          'owner': [{ 'resource_id': '5', 'value': 2 }],
          checked: false
        }

      ]

      // 添加更多示例数据，使分页效果更明显
@@ -779,7 +636,6 @@
      //     'checked': false
      //   })
      // }
      console.log(JSON.parse(JSON.stringify(this.allTasks)))
      this.totalTasks = this.allTasks.length
      this.updatePaginatedTasks()
      this.renderGanttChart()
@@ -905,6 +761,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;
}
@@ -918,4 +796,32 @@
  background-color: #fff;
  border-top: 1px solid #ebeef5;
}

#taskRange {
  width: 80px;
  height: 6px;
  border-radius: 2px;

}

/* 隐藏滑块 */
#taskRange::-webkit-slider-thumb {
  opacity: 0;
   -webkit-appearance: none !important;
  width: 1px!important;
  height: 1px!important;
}

#taskRange::-moz-range-thumb {
  opacity: 0;
  width:  1px!important;
  height:  1px!important;
}

#taskRange::-ms-thumb {
  opacity: 0;
  width: 1px!important;
  height: 1px!important;
}

</style>