4 分钟以前 5960d731989c58e887b6cca103edfe23dec5e06b
src/views/mes/pro/task/components/gantt-chart.vue
@@ -1,7 +1,7 @@
<script lang="ts" setup>
<script lang="ts" setup>
import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
import { BarcodeBizTypeEnum } from '..\..\..\..\..\packages\constants\src';
import { BarcodeBizTypeEnum } from '@vben/constants';
import { gantt } from 'dhtmlx-gantt';
@@ -10,10 +10,10 @@
/**
 * 甘特图组件(基于 dhtmlx-gantt)
 *
 * 1. 按工单分组展示生产任务,工单为 project 行,任务为子行
 * 1. 按订单分组展示生产任务,订单为 project 行,任务为子行
 * 2. 支持只读预览和拖拽编辑两种模式
 * 3. 拖拽后触发 taskUpdate 事件,通知父组件批量保存
 * 4. 时间刻度:周 → 日 → 8 小时(1 工作日 = 8 小时)
 * 4. 时间刻度:周 → 日 → 小时
 */
defineOptions({ name: 'GanttChart', inheritAttrs: false });
@@ -47,8 +47,8 @@
  gantt.config.readonly = props.readonly;
  gantt.config.date_format = '%Y-%m-%d %H:%i:%s';
  gantt.config.duration_unit = 'hour'; // 持续时间单位为小时,配合 duration_step 实现工作日单位
  gantt.config.duration_step = 8; // 1 工作日 = 8 小时
  gantt.config.duration_unit = 'hour'; // 持续时间单位为小时
  gantt.config.duration_step = 1; // duration 字段即为实际小时数
  gantt.config.row_height = 36;
  gantt.config.bar_height = 24;
  gantt.config.fit_tasks = true;
@@ -70,7 +70,7 @@
  gantt.config.buttons_left = ['gantt_save_btn'];
  gantt.config.buttons_right = ['gantt_cancel_btn'];
  // 时间刻度:周 > 日 > 8 小时
  // 时间刻度:周 > 日 > 小时
  const weekScaleTemplate = (date: Date) => {
    const dateToStr = gantt.date.date_to_str('%M %d');
    const endDate = gantt.date.add(gantt.date.add(date, 1, 'week'), -1, 'day');
@@ -82,7 +82,7 @@
  gantt.config.scales = [
    { unit: 'week', step: 1, format: weekScaleTemplate },
    { unit: 'day', step: 1, format: dayTemplate, css: daysStyle },
    { unit: 'hour', step: 8, format: '%H:%i' },
    { unit: 'hour', step: 1, format: '%H:%i' },
  ];
  gantt.config.scale_height = 50;
  gantt.config.show_task_cells = true;
@@ -113,7 +113,7 @@
  gantt.templates.task_text = (_start: any, _end: any, task: any) => {
    const percent = Math.round((task.progress || 0) * 100);
    if (task.type === 'project') {
      return `<b>生产工单:</b> ${task.text} <span>完成比例:${percent}%</span>`;
      return `<b>生产订单:</b> ${task.text} <span>完成比例:${percent}%</span>`;
    }
    return `<b>生产任务:</b> ${task.process || ''} ${task.text} <span>完成比例:${percent}%</span>`;
  };
@@ -121,7 +121,7 @@
  gantt.templates.tooltip_text = (_start: any, _end: any, task: any) => {
    const percent = Math.round((task.progress || 0) * 100);
    if (task.type === 'project') {
      return `<b>生产工单:</b> ${task.text} <span>完成比例:${percent}%</span>`;
      return `<b>生产订单:</b> ${task.text} <span>完成比例:${percent}%</span>`;
    }
    return `<b>生产任务:</b> ${task.process || ''} ${task.text} <span>完成比例:${percent}%</span>`;
  };
@@ -135,7 +135,7 @@
  if (!props.readonly) {
    gantt.attachEvent('onAfterTaskUpdate', (id: number | string) => {
      const task = gantt.getTask(id);
      // 只回写 task 节点,避免把工单(project)节点当成任务保存
      // 只回写 task 节点,避免把订单(project)节点当成任务保存
      if (task.type !== gantt.config.types.task || !task.originalId) {
        return;
      }
@@ -227,7 +227,7 @@
  color: #f44;
}
/* 工单(project)行样式 */
/* 订单(project)行样式 */
.gantt-project-bar .gantt_task_progress {
  background: #7b68ee;
}