vue插件之甘特图

vue插件之甘特图

1. 下载包

npm install dhtmlx-gantt --save

2. 创建Gantt.vue文件

<template>
  <div ref="gantt"></div>
</template>

<script>
import 'dhtmlx-gantt'
export default {
  name: 'gantt',
  props: {
    tasks: {
      type: Object,
      default () {
        return {data: [], links: []}
      }
    }
  },

  mounted: function () {
    gantt.init(this.$refs.gantt)
    gantt.parse(this.$props.tasks)
  }
}
</script>

<style>
    @import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
</style>

在需要的甘特图vue文件中写入以下代码

<template>
  <div class="container">
    <gantt class="left-container" :tasks="tasks"></gantt>
  </div>
</template>

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

export default {
  name: 'app',
  components: {Gantt},
  data () {
    return {
      tasks: {
        data: [
        {
			text: 'Test001-001',//任务名
			start_date: '19-04-2017',//开始时间
			id: 1,//任务id
			duration: 13,//任务时长，从start_date开始计算
			progress: 0.6,//任务完成情况，进度
			parent: 2,//父任务ID
			user: "李四",//成员
			planned_end:'19-04-2017', //计划开始时间
			planned_start:'10-04-2017',//计划结束时间
			show:false,
			open: true,//默认是否打开
			type: 'project'// gantt.config.types.milestone为里程碑类型
			        // project为项目任务类型，也就是摘要任务，
			        // task为普通任务类型
			},
          {id: 2, text: 'Task #1', start_date: '15-04-2017', duration: 3, progress: 0.6},
          {id: 3, text: 'Task #2', start_date: '18-04-2017', duration: 3, progress: 0.4}
        ],
        links: [// links为任务之间连接的线
          {id: 1, source: 1, target: 2, type: '0'}//source根源 target目标 也就是从id为1的指向id为2的
        //type:'0'是从1任务完成到2任务开始，type:'1'是1任务开始到2任务开始，
        //type:'2'是从1任务完成到2任务完成，type:'3'是从1任务开始到2任务完成
        ]
      },
    }
  }
}
</script>

当然，每一个项目对应的甘特图都有自己的样式，希望自己慢慢修改。