vue3实现 甘特图 任务

要实现一个基本的甘特图，你需要掌握 Vue3 的基本语法和一些组件库，例如 Ant Design Vue。以下是一个简单的实现方法：

1.创建一个任务组件

在这个任务组件中，你需要定义一些属性来描述任务的时间和名称，同时你还需要在组件中写一个模板来展示这些任务的信息。你可以使用 Ant Design Vue 的 Timeline 组件来实现这一点。

2.创建一个甘特图组件

在这个甘特图组件中，你需要定义一些属性来描述任务的开始和结束时间，以及任务的名称。同时，你还需要在组件中写一个模板来展示这些任务的信息。你可以使用 Ant Design Vue 的 Timeline 组件来实现这一点。

3.将任务组件添加到甘特图组件中

你可以使用 v-for 指令来遍历任务数组，并将任务组件添加到甘特图组件中。

下面是一个简单的示例代码：

<template>
  <div class="gantt-chart">
    <a-timeline :mode="'left'" :reverse="true">
      <a-timeline-item v-for="task in tasks" :key="task.id" :color="task.color">
        <div class="task">
          <p>{{ task.name }}</p>
          <p>{{ task.start }} - {{ task.end }}</p>
        </div>
      </a-timeline-item>
    </a-timeline>
  </div>
</template>

<script>
import { ATimeline, ATimelineItem } from "ant-design-vue";

export default {
  name: "GanttChart",
  components: {
    ATimeline,
    ATimelineItem,
  },
  props: {
    tasks: Array,
  },
};
</script>

<style scoped>
.task {
  margin: 0;
}
</style>

在这个示例代码中，我们创建了一个名为 GanttChart 的组件，并使用了 Ant Design Vue 的 Timeline 组件来实现甘特图。我们还定义了一个属性 tasks，它是一个任务数组，用于描述甘特图中的任务信息。最后，我们将任务组件添加到 Timeline 组件中，并使用 v-for 指令来遍历任务数组。

当你在父组件中使用这个 GanttChart 组件时，你只需要将任务数组传递给它即可。例如：

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

<script>
import GanttChart from "./GanttChart";

export default {
  name: "App",
  components: {
    GanttChart,
  },
  data() {
    return {
      tasks: [
        {
          id: 1,
          name: "Task 1",
          start: "2021-10-01",
          end: "2021-10-05",
          color: "blue",
        },
        {
          id: 2,
          name: "Task 2",
          start: "2021-10-06",
          end: "2021-10-10",
          color: "green",
        },
        {
          id: 3,
          name: "Task 3",
          start: "2021-10-11",
          end: "2021-10-15",
          color: "red",
        },
      ],
    };
  },
};
</script>

在这个示例代码中，我们创建了一个名为 App 的父组件，并将 GanttChart 组件添加到其中。我们还定义了一个名为 tasks 的数据属性，它是一个任务数组，用于描述甘特图中的任务信息。最后，我们将 tasks 数组传递给 GanttChart 组件的 tasks 属性。