使用 HTML 标签编写低仿甘特图

2023-09-14 16:34:30

前言

甘特图是一种常见的项目管理工具，可以直观地展示项目的进度和任务之间的关系。甘特图通常使用条形图来表示任务，条形图的长度表示任务的持续时间，条形图的位置表示任务的开始和结束时间。

在日常的工作中，我们可能并不经常使用甘特图。但是，一个简易版的甘特图更能贴近实际的工作场景。本文将使用 Vue.js 技术栈，结合 HTML 标签，来实现一个超简易版本的甘特图。

步骤

创建项目

首先，我们需要创建一个新的 Vue.js 项目。可以使用 Vue CLI 工具来创建一个新的项目。

vue create gantt-chart

安装依赖

接下来，我们需要安装必要的依赖。

npm install vue-draggable

创建组件

接下来，我们需要创建一个名为 GanttChart 的 Vue 组件。

// src/components/GanttChart.vue
<template>
  <div>
    <div class="gantt-chart">
      <div class="gantt-chart__header">
        <div class="gantt-chart__header__item">Task</div>
        <div class="gantt-chart__header__item">Start Date</div>
        <div class="gantt-chart__header__item">End Date</div>
      </div>
      <div class="gantt-chart__body">
        <div v-for="task in tasks" class="gantt-chart__body__item">
          <div class="gantt-chart__body__item__name">{{ task.name }}</div>
          <div class="gantt-chart__body__item__start-date">{{ task.startDate }}</div>
          <div class="gantt-chart__body__item__end-date">{{ task.endDate }}</div>
          <div class="gantt-chart__body__item__progress-bar">
            <div class="gantt-chart__body__item__progress-bar__fill" style="width: {{ task.progress }}%"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref } from 'vue'
import VueDraggable from 'vue-draggable'

export default {
  components: {
    VueDraggable
  },
  setup() {
    const tasks = ref([
      {
        name: 'Task 1',
        startDate: '2023-01-01',
        endDate: '2023-01-10',
        progress: 50
      },
      {
        name: 'Task 2',
        startDate: '2023-01-11',
        endDate: '2023-01-20',
        progress: 25
      },
      {
        name: 'Task 3',
        startDate: '2023-01-21',
        endDate: '2023-01-31',
        progress: 0
      }
    ])

    return {
      tasks
    }
  }
}
</script>

<style>
.gantt-chart {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.gantt-chart__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f5f5f5;
  padding: 10px;
}

.gantt-chart__header__item {
  flex: 1;
}

.gantt-chart__body {
  padding: 10px;
}

.gantt-chart__body__item {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding: 10px;
}

.gantt-chart__body__item__name {
  flex: 1;
}

.gantt-chart__body__item__start-date,
.gantt-chart__body__item__end-date {
  width: 100px;
}

.gantt-chart__body__item__progress-bar {
  flex: 1;
  height: 10px;
  background-color: #ccc;
  border-radius: 5px;
}

.gantt-chart__body__item__progress-bar__fill {
  height: 10px;
  background-color: #007bff;
  border-radius: 5px;
}
</style>

注册组件

接下来，我们需要在 main.js 文件中注册 GanttChart 组件。

// src/main.js
import { createApp } from 'vue'
import GanttChart from './components/GanttChart.vue'

createApp({
  components: {
    GanttChart
  }
}).mount('#app')