vue实现车间甘特图

Vue 实现车间甘特图的方法

使用第三方库（如 dhtmlx-gantt）

dhtmlx-gantt 是一个功能强大的甘特图库，支持 Vue 集成。安装后可直接在组件中使用，提供任务管理、时间轴调整和依赖关系等功能。

安装依赖：

npm install dhtmlx-gantt

示例代码：

<template>
  <div ref="ganttContainer" style="width: 100%; height: 600px;"></div>
</template>

<script>
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

export default {
  mounted() {
    gantt.init(this.$refs.ganttContainer);
    gantt.parse({
      data: [
        { id: 1, text: "Task 1", start_date: "2023-10-01", duration: 5 },
        { id: 2, text: "Task 2", start_date: "2023-10-06", duration: 3 },
      ],
    });
  },
};
</script>

自定义实现甘特图

若需高度定制化，可通过 Vue 结合 SVG 或 Canvas 手动绘制甘特图。定义任务数据模型，计算时间轴和任务条的位置，动态渲染。

示例数据结构：

tasks: [
  { id: 1, name: "生产任务A", start: "2023-10-01", end: "2023-10-05", progress: 80 },
  { id: 2, name: "生产任务B", start: "2023-10-06", end: "2023-10-10", progress: 50 },
]

核心渲染逻辑：

<template>
  <div class="gantt-container">
    <div v-for="task in tasks" :key="task.id" class="gantt-bar" :style="getTaskStyle(task)">
      {{ task.name }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [...], // 任务数据
    };
  },
  methods: {
    getTaskStyle(task) {
      const startPos = this.calculateDatePosition(task.start);
      const width = this.calculateDuration(task.start, task.end);
      return {
        left: `${startPos}px`,
        width: `${width}px`,
        backgroundColor: `hsl(${task.progress * 1.2}, 100%, 50%)`,
      };
    },
  },
};
</script>

集成时间轴和交互功能

添加时间轴刻度，支持拖拽调整任务时间。使用 Vue 的响应式特性更新任务数据，结合事件监听实现交互。

时间轴示例：

<div class="timeline">
  <div v-for="day in timelineDays" :key="day" class="timeline-day">
    {{ day }}
  </div>
</div>

拖拽事件处理：

methods: {
  handleDragStart(task, e) {
    e.dataTransfer.setData("taskId", task.id);
  },
  handleDrop(newDate, e) {
    const taskId = e.dataTransfer.getData("taskId");
    this.updateTaskDate(taskId, newDate);
  },
}

响应式设计与适配

通过 CSS Grid 或 Flexbox 布局确保甘特图适应不同屏幕尺寸。结合 Vue 的 computed 属性动态计算任务条位置和宽度。

响应式样式：

.gantt-container {
  display: grid;
  grid-template-columns: 100px repeat(auto-fill, minmax(50px, 1fr));
  overflow-x: auto;
}

动态计算：

computed: {
  timelineDays() {
    // 根据时间范围生成刻度
  },
  visibleTasks() {
    // 根据视图范围筛选任务
  },
}

数据持久化与后端集成

通过 API 与后端交互，保存任务状态。使用 Axios 或 Fetch 发送更新后的任务数据。

API 调用示例：

methods: {
  async saveTasks() {
    await axios.post("/api/tasks/update", { tasks: this.tasks });
  },
},

通过以上方法，可实现一个功能完整的车间甘特图，支持任务管理、时间调整和数据持久化。根据需求选择第三方库或自定义方案，平衡开发效率与定制化程度。