高效的订单处理和精准的运输计划直接影响着客户满意度和企业运营成本。甘特图作为一种经典的项目管理工具，能够直观地展现任务的时间安排和进度状态。在电商供应链系统中，通过可视化的甘特图来管理订单生产排程和运输计划，可以帮助管理者快速识别瓶颈、优化资源配置、提高履约效率。

本文将深入探讨如何构建一个功能强大且交互丰富的甘特图组件，为电商供应链系统的可视化管理提供有力支撑。

一、甘特图在电商供应链中的应用场景 

在电商供应链系统中，甘特图主要应用于以下几个核心场景：

对于电商供应链系统中的甘特图实现，我们选择以下技术栈：

import React, { useState, useEffect, useMemo } from 'react';
import './GanttChart.css';

const GanttChart = ({
  tasks,
  onViewChange,
  onTaskUpdate,
  onTaskSelect
}) => {
  const [viewMode, setViewMode] = useState('day'); // day, week, month
  const [selectedTask, setSelectedTask] = useState(null);
  const [draggingTask, setDraggingTask] = useState(null);

  // 计算时间轴刻度
  const timeScale = useMemo(() => {
    // 根据视图模式计算时间刻度
    return calculateTimeScale(tasks, viewMode);
  }, [tasks, viewMode]);

  // 渲染任务条
  const renderTaskBars = () => {
    return tasks.map(task => (
      <TaskBar
        key={task.id}
        task={task}
        timeScale={timeScale}
        onSelect={handleTaskSelect}
        onDragStart={handleDragStart}
        onDragEnd={handleDragEnd}
      />
    ));
  };

  return (
    <div className="gantt-chart">
      <Toolbar 
        viewMode={viewMode} 
        onViewChange={setViewMode} 
      />
      <div className="gantt-content">
        <TaskList tasks={tasks} />
        <Timeline 
          timeScale={timeScale} 
          viewMode={viewMode}
        />
        <TaskGrid 
          tasks={tasks} 
          timeScale={timeScale}
          onTaskUpdate={onTaskUpdate}
        >
          {renderTaskBars()}
        </TaskGrid>
      </div>
    </div>
  );
};

这段代码定义了甘特图组件的基本结构，包含了工具栏、任务列表、时间轴和任务网格等核心部分。通过组件化的设计，我们可以更好地管理复杂的功能模块。

时间轴是甘特图的核心组成部分，需要根据不同的视图模式（日、周、月）动态计算：

import { format, addDays, addWeeks, addMonths } from 'date-fns';

export const calculateTimeScale = (tasks, viewMode) => {
  // 获取任务时间范围
  const startDate = Math.min(...tasks.map(t => new Date(t.start).getTime()));
  const endDate = Math.max(...tasks.map(t => new Date(t.end).getTime()));
  
  // 根据视图模式生成时间刻度
  const scale = [];
  let currentDate = new Date(startDate);
  const end = new Date(endDate);
  
  switch(viewMode) {
    case 'day':
      while (currentDate <= end) {
        scale.push({
          date: new Date(currentDate),
          label: format(currentDate, 'MM/dd'),
          width: 100 // 像素宽度
        });
        currentDate = addDays(currentDate, 1);
      }
      break;
      
    case 'week':
      while (currentDate <= end) {
        scale.push({
          date: new Date(currentDate),
          label: `W${format(currentDate, 'ww')}`,
          width: 150
        });
        currentDate = addWeeks(currentDate, 1);
      }
      break;
      
    case 'month':
      while (currentDate <= end) {
        scale.push({
          date: new Date(currentDate),
          label: format(currentDate, 'MMM yyyy'),
          width: 200
        });
        currentDate = addMonths(currentDate, 1);
      }
      break;
  }
  
  return scale;
};

这个工具函数根据任务的时间范围和视图模式动态生成时间刻度，为甘特图的渲染提供基础数据。

任务条是甘特图中最核心的可视化元素，需要支持多种交互操作：

import React, { useState } from 'react';

const TaskBar = ({ 
  task, 
  timeScale, 
  onSelect, 
  onDragStart, 
  onDragEnd 
}) => {
  const [isResizing, setIsResizing] = useState(false);
  const [resizeDirection, setResizeDirection] = useState(null);

  // 计算任务条的位置和尺寸
  const { left, width } = calculateTaskPosition(task, timeScale);
  
  // 处理拖拽开始
  const handleDragStart = (e) => {
    e.preventDefault();
    onDragStart(task);
  };

  // 处理调整大小开始
  const handleResizeStart = (e, direction) => {
    e.stopPropagation();
    setIsResizing(true);
    setResizeDirection(direction);
  };

  // 处理点击选择
  const handleClick = () => {
    onSelect(task);
  };

  return (
    <div
      className={`task-bar ${task.status} ${selectedTask?.id === task.id ? 'selected' : ''}`}
      style={{
        left: `${left}px`,
        width: `${width}px`,
        backgroundColor: task.color || '#4CAF50'
      }}
      onClick={handleClick}
      onMouseDown={handleDragStart}
    >
      {/* 左侧调整手柄 */}
      <div 
        className="resize-handle left"
        onMouseDown={(e) => handleResizeStart(e, 'left')}
      />
      
      {/* 任务内容 */}
      <div className="task-content">
        <div className="task-title">{task.name}</div>
        <div className="task-time">
          {format(task.start, 'MM/dd')} - {format(task.end, 'MM/dd')}
        </div>
      </div>
      
      {/* 右侧调整手柄 */}
      <div 
        className="resize-handle right"
        onMouseDown={(e) => handleResizeStart(e, 'right')}
      />
    </div>
  );
};

为了让甘特图具备真正的交互能力，我们需要实现任务条的拖拽移动和时间范围调整功能：

import { useState, useCallback } from 'react';

export const useGanttInteractions = (tasks, onUpdate) => {
  const [dragState, setDragState] = useState({
    isDragging: false,
    taskId: null,
    startX: 0,
    startLeft: 0
  });

  // 开始拖拽
  const startDrag = useCallback((task, event) => {
    const rect = event.currentTarget.getBoundingClientRect();
    setDragState({
      isDragging: true,
      taskId: task.id,
      startX: event.clientX,
      startLeft: rect.left
    });
  }, []);

  // 拖拽过程中
  const onDrag = useCallback((event) => {
    if (!dragState.isDragging) return;
    
    const deltaX = event.clientX - dragState.startX;
    const newLeft = dragState.startLeft + deltaX;
    
    // 更新任务位置（这里简化处理，实际需要计算对应的时间）
    const updatedTasks = tasks.map(task => 
      task.id === dragState.taskId 
        ? { ...task, left: newLeft } 
        : task
    );
    
    onUpdate(updatedTasks);
  }, [dragState, tasks, onUpdate]);

  // 结束拖拽
  const endDrag = useCallback(() => {
    setDragState({
      isDragging: false,
      taskId: null,
      startX: 0,
      startLeft: 0
    });
  }, []);

  return {
    dragState,
    startDrag,
    onDrag,
    endDrag
  };
};

在电商供应链系统中，任务数据需要包含丰富的业务信息：

export class Task {
  constructor(data) {
    this.id = data.id;
    this.name = data.name;                // 任务名称
    this.type = data.type;                // 任务类型（生产、运输等）
    this.start = new Date(data.start);    // 开始时间
    this.end = new Date(data.end);        // 结束时间
    this.duration = data.duration;        // 持续时间
    this.progress = data.progress || 0;   // 完成进度
    this.status = data.status || 'pending'; // 状态
    this.assignee = data.assignee;        // 负责人
    this.priority = data.priority;        // 优先级
    this.dependencies = data.dependencies || []; // 依赖任务
    this.resources = data.resources || []; // 所需资源
    this.cost = data.cost || 0;           // 成本
    this.notes = data.notes || '';        // 备注
    this.orderId = data.orderId;          // 关联订单ID
    this.warehouse = data.warehouse;      // 仓库信息
  }

  // 计算任务是否延期
  isOverdue() {
    return this.status !== 'completed' && this.end < new Date();
  }

  // 计算剩余天数
  getRemainingDays() {
    const today = new Date();
    return Math.ceil((this.end - today) / (1000 * 60 * 60 * 24));
  }
}

为了管理复杂的甘特图状态，我们可以使用 React Context 或者简单的状态提升：

import React, { createContext, useContext, useReducer } from 'react';

const GanttContext = createContext();

const ganttReducer = (state, action) => {
  switch (action.type) {
    case 'SET_TASKS':
      return { ...state, tasks: action.payload };
    case 'UPDATE_TASK':
      return {
        ...state,
        tasks: state.tasks.map(task =>
          task.id === action.payload.id ? action.payload : task
        )
      };
    case 'SET_VIEW_MODE':
      return { ...state, viewMode: action.payload };
    case 'SET_SELECTED_TASK':
      return { ...state, selectedTask: action.payload };
    default:
      return state;
  }
};

export const GanttProvider = ({ children, initialTasks }) => {
  const [state, dispatch] = useReducer(ganttReducer, {
    tasks: initialTasks || [],
    viewMode: 'day',
    selectedTask: null
  });

  const value = {
    ...state,
    setTasks: (tasks) => dispatch({ type: 'SET_TASKS', payload: tasks }),
    updateTask: (task) => dispatch({ type: 'UPDATE_TASK', payload: task }),
    setViewMode: (mode) => dispatch({ type: 'SET_VIEW_MODE', payload: mode }),
    setSelectedTask: (task) => dispatch({ type: 'SET_SELECTED_TASK', payload: task })
  };

  return (
    <GanttContext.Provider value={value}>
      {children}
    </GanttContext.Provider>
  );
};

export const useGantt = () => {
  const context = useContext(GanttContext);
  if (!context) {
    throw new Error('useGantt must be used within a GanttProvider');
  }
  return context;
};

当任务数量庞大时，需要实现虚拟滚动来提升渲染性能：

import React, { useMemo, useRef, useEffect } from 'react';

const VirtualizedTaskList = ({ tasks, itemHeight, visibleCount }) => {
  const containerRef = useRef();
  const [scrollTop, setScrollTop] = useState(0);

  // 计算可见的任务范围
  const visibleRange = useMemo(() => {
    const startIndex = Math.floor(scrollTop / itemHeight);
    const endIndex = Math.min(startIndex + visibleCount, tasks.length);
    return { startIndex, endIndex };
  }, [scrollTop, itemHeight, tasks.length, visibleCount]);

  // 渲染可见的任务
  const renderVisibleTasks = () => {
    const { startIndex, endIndex } = visibleRange;
    const visibleTasks = tasks.slice(startIndex, endIndex);
    
    return visibleTasks.map((task, index) => (
      <TaskItem
        key={task.id}
        task={task}
        style={{ top: (startIndex + index) * itemHeight }}
      />
    ));
  };

  return (
    <div 
      ref={containerRef}
      className="virtualized-list"
      onScroll={(e) => setScrollTop(e.target.scrollTop)}
    >
      <div 
        className="list-content"
        style={{ height: tasks.length * itemHeight }}
      >
        {renderVisibleTasks()}
      </div>
    </div>
  );
};

对于长时间跨度的数据，需要优化时间轴的渲染：

import React, { useMemo } from 'react';

const OptimizedTimeline = ({ timeScale, containerWidth }) => {
  // 只渲染可见的时间刻度
  const visibleScales = useMemo(() => {
    const scaleWidth = timeScale[0]?.width || 100;
    const visibleCount = Math.ceil(containerWidth / scaleWidth);
    return timeScale.slice(0, visibleCount);
  }, [timeScale, containerWidth]);

  return (
    <div className="timeline">
      {visibleScales.map((scale, index) => (
        <div 
          key={index}
          className="time-scale"
          style={{ width: `${scale.width}px` }}
        >
          {scale.label}
        </div>
      ))}
    </div>
  );
};

为了适配不同屏幕尺寸，需要实现响应式设计：

.gantt-chart {
  display: flex;
  flex-direction: column;
  height: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.gantt-content {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.task-list {
  width: 250px;
  border-right: 1px solid #e0e0e0;
  overflow-y: auto;
}

.timeline {
  height: 50px;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  background-color: #f5f5f5;
}

.task-grid {
  flex: 1;
  position: relative;
  overflow: auto;
}

/* 媒体查询适配 */
@media (max-width: 768px) {
  .task-list {
    width: 150px;
  }
  
  .task-content {
    font-size: 12px;
  }
}

@media (min-width: 1200px) {
  .gantt-chart {
    font-size: 16px;
  }
  
  .task-bar {
    height: 36px;
    line-height: 36px;
  }
}

针对指挥中心大屏的展示需求，需要特别优化视觉效果：

在电商订单处理流程中，甘特图可以清晰展示从接单到发货的各个环节：

在物流运输管理中，甘特图可以展示不同运输路线和车辆的调度安排：

通过本文的详细讲解，我们深入了解了如何基于 React 技术栈构建一个功能完善的交互式甘特图组件，专门服务于供应链系统中的订单生产排程与运输计划管理。我们从基础的组件设计开始，逐步实现了任务条的拖拽调整、复杂的状态管理、性能优化策略以及响应式设计等多个核心功能。

在实际应用中，这样的甘特图组件能够帮助供应链管理者：

通过合理的架构设计和技术选型，我们构建的甘特图不仅具备强大的功能，还具有良好的扩展性和维护性，能够适应电商供应链系统不断变化的需求。希望本文的内容能为从事供应链系统开发的前端工程师提供有价值的参考和指导。

洞见供应链 | 打造交互式订单生产排程与运输计划甘特图

前端开发

编程语言

本文详细解析基于React构建交互式甘特图组件的技术实现，涵盖电商供应链订单排程、运输计划管理等核心场景。从组件架构设计、时间轴计算到拖拽交互功能，提供完整的技术方案与性能优化策略，助力提升供应链管理效率。

数据可视化

响应式设计

数据结构

腾讯云BI新客户首次购买9.9元起！


2026采购季 | AI焕新·智启新局

tapd

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

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

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

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

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

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

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

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

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

洞见供应链 | 打造交互式订单生产排程与运输计划甘特图

洞见供应链 | 打造交互式订单生产排程与运输计划甘特图

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐