vue2手写实现甘特图

实现甘特图需要以下步骤：

1. 定义数据结构，包括任务名称、开始时间、结束时间等信息。
2. 根据数据结构，计算每个任务在甘特图中的位置和长度。
3. 使用 Vue 组件渲染甘特图，包括任务条、时间轴等。
4. 实现交互功能，如拖拽任务条、缩放时间轴等。

以下是一个简单的 Vue 甘特图组件实现示例：

<template>
  <div class="gantt-chart">
    <div class="gantt-timeline">
      <div v-for="date in dates" :key="date" class="gantt-date">{{ date }}</div>
    </div>
    <div v-for="(task, index) in tasks" :key="index" class="gantt-task" :style="taskStyle(task)">
      {{ task.name }}
    </div>
  </div>
</template>

<script>
export default {
  props: {
    tasks: {
      type: Array,
      required: true,
    },
    startDate: {
      type: Date,
      required: true,
    },
    endDate: {
      type: Date,
      required: true,
    },
    width: {
      type: Number,
      default: 800,
    },
    height: {
      type: Number,
      default: 400,
    },
  },
  computed: {
    dates() {
      const dates = [];
      let currentDate = new Date(this.startDate);
      while (currentDate <= this.endDate) {
        dates.push(currentDate.toLocaleDateString());
        currentDate.setDate(currentDate.getDate() + 1);
      }
      return dates;
    },
  },
  methods: {
    taskStyle(task) {
      const start = new Date(task.start);
      const end = new Date(task.end);
      const totalDays = (this.endDate - this.startDate) / (24 * 60 * 60 * 1000);
      const left = ((start - this.startDate) / (24 * 60 * 60 * 1000)) / totalDays * this.width;
      const width = ((end - start) / (24 * 60 * 60 * 1000)) / totalDays * this.width;
      return {
        left: `${left}px`,
        width: `${width}px`,
        height: '30px',
        backgroundColor: '#007bff',
        color: '#fff',
        borderRadius: '4px',
        padding: '4px',
        position: 'absolute',
      };
    },
  },
};
</script>
<style>
.gantt-chart {
  position: relative;
  width: 100%;
  height: 100%;
}

.gantt-timeline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 30px;
  border-bottom: 1px solid #ccc;
}

.gantt-date {
  position: absolute;
  top: 0;
  bottom: 0;
  transform: translateX(-50%);
}

.gantt-task {
  cursor: move;
}
</style>