在APS系统中，算法决定了“排得对不对”，而甘特图决定了“看得懂不懂”。对于工厂计划员来说，一行行JSON数据远不如一条条横向色块直观。更重要的是，

：紧急插单、设备故障、物料延迟，都会要求计划员快速调整生产计划。如果每次调整都要改代码或跑脚本，APS就失去了实用价值。

拖拽、缩放、联动校验、冲突提示

的甘特图组件，是连接“排程算法”与“业务操作”的关键桥梁。

本文将从环境搭建、数据映射、事件处理到约束联动，完整实现一个可用于工业级生产排产的甘特图组件，并配套Mermaid架构图与流程图，帮助你构建真正“能打”的前端排程界面。

在React生态中，甘特图方案并不少，但在

在生产场景中，我们经常需要处理：

这些能力，dhtmlxGantt都已内置，我们只需要在其基础上做

我们的甘特图组件不是孤立存在的，而是APS前端的中枢视图。

npm install dhtmlx-gantt
npm install react-dhtmlx-gantt

 是对原生库的React封装，虽然不完全官方，但能大幅减少DOM操作代码。

import React, { useEffect, useRef } from 'react';
import { Gantt } from 'react-dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';

/**
 * 基础甘特图组件
 * @param {Object} props
 * @param {Array} props.tasks - 工单任务数据
 * @param {Array} props.links - 工序依赖关系
 */
export default function GanttChart({ tasks, links }) {
  const ganttRef = useRef(null);

  useEffect(() => {
    if (!ganttRef.current) return;

    // 初始化时间刻度
    window.gantt.config.scale_unit = 'day';
    window.gantt.config.date_scale = '%Y-%m-%d';
    window.gantt.config.subscale = [
      { unit: 'hour', step: 4, date: '%H:%i' },
    ];

    // 启用拖拽
    window.gantt.config.drag_move = true;
    window.gantt.config.drag_resize = true;
    window.gantt.config.drag_progress = false; // 生产排产一般不手动改进度

    // 渲染甘特图
    window.gantt.init(ganttRef.current);
    window.gantt.parse({
      data: tasks,
      links: links,
    });
  }, [tasks, links]);

  return (
    <div
      ref={ganttRef}
      style={{ width: '100%', height: '600px' }}
    />
  );
}

四、数据结构映射：APS业务模型 → 甘特图模型 

甘特图有自己的数据格式，我们需要把APS的业务对象映射过去。

/**
 * 将APS工单转换为dhtmlxGantt任务对象
 * @param {Object} workOrder APS工单
 * @returns {Object} Gantt任务
 */
export function mapWorkOrderToTask(workOrder) {
  return {
    id: workOrder.woId,                 // 唯一标识
    text: `${workOrder.productCode}`,    // 显示文本
    start_date: workOrder.planStartDate, // 开始时间
    duration: calculateDuration(          // 持续天数
      workOrder.planStartDate,
      workOrder.planEndDate
    ),
    progress: calcProgress(workOrder),    // 完成进度
    deviceId: workOrder.deviceId,         // 自定义字段：设备
    priority: workOrder.priority,         // 自定义字段：优先级
    color: getColorByPriority(workOrder.priority),
  };
}

function calculateDuration(start, end) {
  const diff = new Date(end) - new Date(start);
  return Math.ceil(diff / (1000 * 60 * 60 * 24));
}

function calcProgress(wo) {
  if (!wo.actualQty) return 0;
  return Math.min(wo.actualQty / wo.plannedQty, 1);
}

function getColorByPriority(priority) {
  const map = {
    URGENT: '#e74c3c',
    NORMAL: '#3498db',
    LOW: '#95a5a6',
  };
  return map[priority] || '#3498db';
}

/**
 * 将工序依赖转换为Gantt连接线
 * @param {Object} dependency 工序依赖
 */
export function mapDependencyToLink(dependency) {
  return {
    id: dependency.id,
    source: dependency.prevOpId, // 前置工序ID
    target: dependency.nextOpId, // 后置工序ID
    type: '0',                   // 完成-开始关系
  };
}

五、拖拽事件处理：从交互到业务校验 

。我们必须对每一次拖拽进行业务校验。

useEffect(() => {
  const gantt = window.gantt;

  // 拖拽前校验
  gantt.attachEvent('onBeforeTaskDrag', function (id, mode, e) {
    const task = gantt.getTask(id);

    // 示例：禁止拖动已完工任务
    if (task.progress >= 1) {
      gantt.message({
        type: 'error',
        text: '已完工工单不可调整',
      });
      return false;
    }

    // 记录原始位置，用于回滚
    window._dragBackup = { ...task };
    return true;
  });

  // 拖拽结束后处理
  gantt.attachEvent('onAfterTaskDrag', async function (id, mode, e) {
    const task = gantt.getTask(id);
    const backup = window._dragBackup;

    try {
      // 构造校验请求
      const response = await fetch('/api/schedule/validate', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          woId: task.id,
          newStart: task.start_date,
          newEnd: task.end_date,
          deviceId: task.deviceId,
        }),
      });

      const result = await response.json();

      if (!result.valid) {
        // 校验失败，回滚
        gantt.getTask(id).start_date = backup.start_date;
        gantt.getTask(id).end_date = backup.end_date;
        gantt.updateTask(id);
        gantt.message({
          type: 'warning',
          text: result.reason || '排程冲突',
        });
      } else {
        // 校验成功，刷新全局状态
        onScheduleChange(result.newSchedule);
      }
    } catch (err) {
      console.error(err);
    }
  });

  return () => {
    gantt.detachAllEvents();
  };
}, [onScheduleChange]);

六、冲突可视化：让问题一目了然 

当拖拽导致冲突时，仅靠弹窗提示是不够的，我们需要在甘特图上

// 自定义任务样式
gantt.templates.task_class = function (start, end, task) {
  if (task.$conflict) {
    return 'conflict-task';
  }
  if (task.priority === 'URGENT') {
    return 'urgent-task';
  }
  return '';
};

// CSS
/*
.conflict-task {
  background-color: #e74c3c !important;
  border-color: #c0392b !important;
}
.urgent-task {
  background-color: #f39c12 !important;
}
*/

// 设备筛选器
const devices = ['ALL', 'SMT-01', 'ASM-03'];
devices.forEach(d => {
  gantt.getFilterInputs().push({
    key: 'deviceId',
    label: d,
    value: d === 'ALL' ? '' : d,
  });
});

dhtmlxGantt内部使用分钟级时间戳，但APS常以小时或天为单位。解决方式：

gantt.config.duration_unit = 'hour'; // 或 'day'
gantt.config.duration_step = 1;

task.start_date = gantt.date.str_to_date('%Y-%m-%d %H:%i')(str);

gantt.config.layout = {
  css: 'gantt_container',
  rows: [
    { view: 'grid' },
    { view: 'timeline' },
    { view: 'scrollbar' },
  ],
};

本文系统性地讲解了如何使用React + dhtmlxGantt构建一个

的生产排程甘特图组件。我们从架构定位出发，详细拆解了数据映射、拖拽事件处理、冲突可视化、性能优化等关键环节，并通过Mermaid图表清晰呈现了交互流程与系统关系。

这个甘特图组件将成为你APS系统的“操作台”：计划员在这里看到全局，也在这里做出决策。

在APS系统中，算法决定了“排得对不对”，而甘特图决定了“看得懂不懂”。对于工厂计划员来说，一行行JSON数据远不如一条条横向色块直观。更重要的是，排程从来不是一次性的：紧急插单、设备故障、物料延迟，都会要求计划员快速调整生产计划。如果每次调整都要改代码或跑脚本，APS就失去了实用价值。

生产计划与排程（APS）系统 | 甘特图组件开发：实现可拖拽生产计划排程

前端开发

前端

开发工具

客户端

本文详细讲解如何用React+dhtmlxGantt构建工业级生产排程甘特图组件，涵盖数据映射、拖拽校验、冲突可视化等核心功能。重点解决APS系统中甘特图与排程引擎的闭环联动问题，提供可直接复用的代码方案，帮助实现高效直观的生产计划调整界面。

数据结构

大数据

容器

ReAct 

JSON

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

生产计划与排程（APS）系统 | 甘特图组件开发：实现可拖拽生产计划排程

生产计划与排程（APS）系统 | 甘特图组件开发：实现可拖拽生产计划排程

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐