当前位置：首页 > VUE

vue实现车间甘特图

2026-03-10 09:53:37VUE

使用Vue实现车间甘特图

安装依赖

需要安装vue-ganttastic或其他甘特图库，例如：

npm install vue-ganttastic

基础甘特图实现

在Vue组件中引入并配置甘特图：

<template>
  <gantt-chart
    :tasks="tasks"
    :options="options"
  />
</template>

<script>
import { GanttChart } from 'vue-ganttastic';

export default {
  components: { GanttChart },
  data() {
    return {
      tasks: [
        { id: 1, name: '任务A', start: '2023-01-01', end: '2023-01-05' },
        { id: 2, name: '任务B', start: '2023-01-06', end: '2023-01-10' }
      ],
      options: {
        viewMode: 'day',
        style: { height: '500px' }
      }
    };
  }
};
</script>

动态数据绑定

通过API获取车间任务数据并更新甘特图：

async fetchTasks() {
  const response = await axios.get('/api/workshop-tasks');
  this.tasks = response.data.map(task => ({
    id: task.id,
    name: task.name,
    start: task.start_date,
    end: task.end_date,
    progress: task.progress
  }));
}

自定义样式与交互

覆盖默认样式并添加事件处理：

<gantt-chart
  @task-clicked="handleTaskClick"
  :style="{ '--bar-color': '#4CAF50' }"
/>

时间轴配置

调整时间轴显示粒度：

options: {
  viewMode: 'hour', // 支持day/week/month/hour
  timeFormat: 'YYYY-MM-DD HH:mm',
  columnWidth: 30
}

高级功能实现

添加拖拽调整和依赖关系：

options: {
  draggable: true,
  dependencies: {
    enabled: true,
    data: [
      { from: 1, to: 2, type: 'FS' } // FS表示Finish-to-Start依赖
    ]
  }
}

响应式设计

通过计算属性动态调整配置：

computed: {
  chartOptions() {
    return {
      ...this.options,
      style: {
        height: this.isMobile ? '300px' : '600px'
      }
    };
  }
}

替代方案

若需要更复杂的车间调度功能，可考虑：

使用dhtmlxGantt商业库
基于Echarts自定义实现
集成FullCalendar的甘特图插件

性能优化

对于大规模数据：

options: {
  virtualScroll: true,
  rowHeight: 40,
  visibleRows: 20
}

典型车间功能扩展

添加机器负载视图：

vue实现车间甘特图

tasks: [
  {
    id: 1,
    name: 'CNC-01',
    tasks: [
      { id: 11, name: '工件A', start: '2023-01-01 08:00', end: '2023-01-01 12:00' }
    ]
  }
]