前端vue实现甘特图

在现代前端开发中，甘特图（Gantt Chart）是一种非常有效的工具，用于展示项目的时间安排和进度。它帮助项目经理和团队成员可视化任务的起始和结束时间，以及它们之间的关系。本文将以Vue.js为基础，介绍如何实现一个简单的甘特图。

一、项目准备

首先，我们需要创建一个新的Vue项目。可以使用Vue CLI工具通过以下命令快速生成一个项目：

vue create gantt-chart-demo

进入项目目录：

cd gantt-chart-demo

安装必要的依赖包，可以考虑使用html2canvas和jspdf库来导出甘特图：

npm install html2canvas jspdf

二、构建甘特图组件

在src/components目录下创建一个名为GanttChart.vue的文件，用于实现我们的甘特图。以下是一个简单的甘特图组件示例：

<template>
  <div class="gantt-chart">
    <h1>甘特图</h1>
    <div class="chart-container" ref="chartContainer">
      <div class="header">
        <div v-for="(date, index) in dates" :key="index" class="date-column">{{ date }}</div>
      </div>
      <div class="tasks">
        <div
          v-for="(task, index) in tasks"
          :key="task.id"
          class="task-row"
        >
          <div class="task-name">{{ task.name }}</div>
          <div
            v-for="(date, dateIndex) in dates"
            :key="dateIndex"
            class="task-bar"
            :style="getTaskStyle(task, dateIndex)"
          ></div>
        </div>
      </div>
    </div>
    <button @click="download">下载甘特图</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, name: '任务1', start: 2, end: 5 },
        { id: 2, name: '任务2', start: 3, end: 8 },
        { id: 3, name: '任务3', start: 6, end: 9 },
      ],
      dates: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], // 这里可以根据需要生成日期
    };
  },
  methods: {
    getTaskStyle(task, index) {
      const start = task.start;
      const end = task.end;
      const width =
        (end - start + 1) * (100 / this.dates.length) + '%';
      const left = (start - 1) * (100 / this.dates.length) + '%';
      return {
        width: width,
        left: left,
        backgroundColor: 'lightblue',
      };
    },
    download() {
      // 使用html2canvas生成图像
      html2canvas(this.$refs.chartContainer).then(canvas => {
        const pdf = new jsPDF('l', 'pt', 'a4');
        const imgData = canvas.toDataURL('image/png');
        const imgWidth = 190; // pdf宽度
        const pageHeight = pdf.internal.pageSize.height;
        const imgHeight = (canvas.height * imgWidth) / canvas.width;
        let heightLeft = imgHeight;

        let position = 0;

        pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
        heightLeft -= pageHeight;

        while (heightLeft >= 0) {
          position = heightLeft - imgHeight;
          pdf.addPage();
          pdf.addImage(imgData, 'PNG', 10, position, imgWidth, imgHeight);
          heightLeft -= pageHeight;
        }
        pdf.save('gantt-chart.pdf');
      });
    },
  },
};
</script>

<style scoped>
.gantt-chart {
  margin: 20px;
}
.chart-container {
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
}
.date-column {
  flex: 1;
  text-align: center;
  font-weight: bold;
}
.tasks {
  display: flex;
  flex-direction: column;
}
.task-row {
  display: flex;
}
.task-name {
  width: 100px;
  padding: 10px;
}
.task-bar {
  flex: 1;
  height: 30px;
}
</style>

三、组件使用

接下来，我们需要在App.vue中使用这个组件。只需简单地引入并注册该组件：

<template>
  <div id="app">
    <GanttChart />
  </div>
</template>

<script>
import GanttChart from './components/GanttChart.vue';

export default {
  name: 'App',
  components: {
    GanttChart,
  },
};
</script>

四、总结

通过上面的步骤，我们创建了一个简单的甘特图组件，并实现了任务的展示以及下载功能。虽然这个实现是一个基础示例，但可以根据实际需求进一步扩展，例如添加任务的编辑、删除，以及更复杂的时间安排逻辑。

使用Vue.js的一个核心优势是，组件化的设计让我们可以重用和维护代码。接下来，你可以根据自己的项目需求，继续完善和优化这个甘特图的功能。这种可视化方式不仅能帮助团队成员更好地了解项目进度，也能提高工作效率。希望这篇文章能对你有所帮助。