[JavaScript知识库]vue实现甘特图

1、引入依赖

npm install dhtmlx-gantt@6.3.7

2、组件代码

<template>
  <div class="app-container">
    <div ref="gantt" class="left-container" />
  </div>
</template>
<script>
  import gantt from 'dhtmlx-gantt' // 引入模块
  //import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
  import 'dhtmlx-gantt/codebase/skins/dhtmlxgantt_terrace.css' //皮肤
  import 'dhtmlx-gantt/codebase/locale/locale_cn' // 本地化
  import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js' //任务条悬浮提示

  export default {
    name: 'Gantt',
    data() {
      return {
        tasks: {
          data: [],
        },
      }
    },
    mounted() {
      this.initData()
      /*
       * 冒烟：fcca02    单元：fec0dc     回归：62ddd4   阶段：d1a6ff
       * */
      //设置图表区域的日期坐标最大值 var date = new Date(dateString.replace(/-/,"/"))
      //  gantt.config.start_date = new Date("2020-04-08".replace(/-/,"/")) ;
      //gantt.config.end_date = new Date("2020-04-18".replace(/-/,"/")) ; //结束时间需要+1天

      //自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
      gantt.config.autosize = true
      //只读模式
      gantt.config.readonly = true
      //是否显示左侧树表格
      gantt.config.show_grid = false
      //表格列设置
      gantt.config.columns = [
        { name: 'text', label: '阶段名字', tree: true, width: '120' },
        {
          name: 'duration',
          label: '时长',
          align: 'center',
          template: function(obj) {
            return obj.duration + '天'
          },
        },
        /*{name:"start_date", label:"开始时间", align: "center" },

        {name:"end_date",   label:"结束时间",   align: "center" },*/
      ]
      //时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
      gantt.config.show_task_cells = true

      //设置x轴日期
      gantt.config.scale_unit = 'day'
      gantt.config.step = 1
      gantt.config.date_scale = '星期' + '%D'

      //当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
      gantt.config.fit_tasks = true
      // 在时间线上增加一行显示星期
      gantt.config.subscales = [
        //{unit:"day",  step:1, date:"星期"+"%D" },
        { unit: 'day', step: 1, date: '%M' + '%d' + '日' },
      ]
      //时间轴图表中，任务条形图的高度
      gantt.config.task_height = 28
      //时间轴图表中，甘特图的高度
      gantt.config.row_height = 36
      //从后端过来的数据格式化
      gantt.config.xml_date = '%Y-%m-%d'
      //任务条显示内容
      gantt.templates.task_text = function(start, end, task) {
        return task.text + '(' + task.duration + '天)'
      }
      // gantt.templates.task_class = function(start, end, task){return "xx";};
      //悬浮
      gantt.templates.tooltip_text = function(start, end, task) {
        //return "<b>任务名称:</b> "+task.text+"<br/><b>时长:</b> " + task.duration+"<br/><b>说明:</b>" +task.toolTipsTxt;
        return "<span style='font-size: 14px'>" + task.toolTipsTxt + '</span>'
      }

      gantt.templates.scale_cell_class = function(date) {
        /*if(date.getDay()== 0 || date.getDay()== 6){
          return "weekend";
        }*/
        return 'weekend'
      }
      //任务栏周末亮色
      /*gantt.templates.task_cell_class = function(item,date){
        if(date.getDay()== 0 || date.getDay()== 6){
          return "weekend";
        }
      };*/
      //任务条上的文字大小 以及取消border自带样式
      gantt.templates.task_class = function(start, end, item) {
        return item.$level == 0 ? 'firstLevelTask' : 'secondLevelTask'
      }
      // 初始化
      gantt.init(this.$refs.gantt)
      // 数据解析
      gantt.parse(this.tasks)
    },
    methods: {
      //开始时间-结束时间参数
      DateDifference: function(strDateStart, strDateEnd) {
        var begintime_ms = Date.parse(new Date(strDateStart.replace(/-/g, '/'))) //begintime 为开始时间
        var endtime_ms = Date.parse(new Date(strDateEnd.replace(/-/g, '/'))) // endtime 为结束时间
        var date3 = endtime_ms - begintime_ms //时间差的毫秒数
        var days = Math.floor(date3 / (24 * 3600 * 1000))
        return days
      },
      initData: function() {
        this.tasks.data = [
          {
            id: 1,
            text: '计划时间',
            start_date: '2020-04-08',
            duration: 10,
            open: true, //默认打开，
            toolTipsTxt: 'xxxxxxxxxxxxxxxxx',
          },
          {
            toolTipsTxt: 'xxxxxxxxxxxxxxxxx父任务01-001',
            text: '冒烟阶段', // 任务名
            start_date: '2020-04-08', // 开始时间
            id: 11, // 任务id
            duration: 3, // 任务时长，从start_date开始计算
            parent: 1, // 父任务ID
            type: 1,
          },
          {
            toolTipsTxt: '',
            text: '单元测试', // 任务名
            start_date: '2020-04-11', // 开始时间
            id: 12, // 任务id
            duration: 2, // 任务时长，从start_date开始计算
            parent: 1, // 父任务ID
            type: 2,
          },
          {
            toolTipsTxt: '',
            text: '回归测试', // 任务名
            start_date: '2020-04-13', // 开始时间
            id: 13, // 任务id
            duration: 4, // 任务时长，从start_date开始计算
            parent: 1, // 父任务ID
            type: 3,
          },
          {
            toolTipsTxt: '',
            text: '阶段四', // 任务名
            start_date: '2020-04-13', // 开始时间
            id: 14, // 任务id
            duration: 4, // 任务时长，从start_date开始计算
            parent: 1, // 父任务ID
            type: 4,
          },
          //========================
          {
            id: 2,
            text: '实际时间',
            start_date: '2020-04-08',
            duration: 8,
            open: true, //默认打开，才可隐藏左侧表格
            toolTipsTxt: 'xxxxxxxxxxxxxxxxx',
            state: 'default',
            // color:"#409EFF",
            //progress: 0.6
          },
          {
            toolTipsTxt: 'xxxxxxxxxxxxxxxxx父任务01-001',
            text: '冒烟阶段', // 任务名
            start_date: '2020-04-08', // 开始时间
            id: 21, // 任务id
            duration: 2, // 任务时长，从start_date开始计算
            parent: 2, // 父任务ID
            type: 1,
          },
          {
            toolTipsTxt: '',
            text: '单元测试', // 任务名
            start_date: '2020-04-09', // 开始时间
            id: 22, // 任务id
            duration: 2, // 任务时长，从start_date开始计算
            parent: 2, // 父任务ID
            type: 2,
          },
          {
            toolTipsTxt: '',
            text: '回归测试', // 任务名
            start_date: '2020-04-11', // 开始时间
            id: 23, // 任务id
            duration: 2, // 任务时长，从start_date开始计算
            parent: 2, // 父任务ID
            type: 3,
          },
        ].map(function(current, ind, arry) {
          var newObj = {}
          if (current.type) {
            //存在type字段 说明非一级菜单，判断阶段的具体类型 设置不同颜色
            if (current.type == 1) {
              //冒烟
              newObj = Object.assign({}, current, { color: '#fcca02' })
            } else if (current.type == 2) {
              //单元
              newObj = Object.assign({}, current, { color: '#fec0dc' })
            } else if (current.type == 3) {
              //回归
              newObj = Object.assign({}, current, { color: '#62ddd4' })
            } else if (current.type == 4) {
              newObj = Object.assign({}, current, { color: '#d1a6ff' })
            }
          } else {
            //一级菜单是蓝色的
            newObj = Object.assign({}, current, { color: '#5692f0' })
          }

          return newObj
        })
      },
    },
  }
</script>
<style lang="scss">
  .firstLevelTask {
    border: none;
    .gantt_task_content {
      // font-weight: bold;
      font-size: 13px;
    }
  }

  .secondLevelTask {
    border: none;
  }

  .thirdLevelTask {
    border: 2px solid #da645d;
    color: #da645d;
    background: #da645d;
  }

  .milestone-default {
    border: none;
    background: rgba(0, 0, 0, 0.45);
  }

  .milestone-unfinished {
    border: none;
    background: #5692f0;
  }

  .milestone-finished {
    border: none;
    background: #84bd54;
  }

  .milestone-canceled {
    border: none;
    background: #da645d;
  }

  html,
  body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    overflow: hidden;
  }

  .container {
    height: 900px;
    .left-container {
      height: 100%;
    }
  }

  .left-container {
    height: 600px;
  }

  .gantt_scale_line {
    border-top: 0;
  }

  .weekend {
    //background:#f4f7f4!important;
    color: #000000 !important;
  }

  .gantt_selected .weekend {
    background: #f7eb91 !important;
  }

  .gantt_task_content {
    text-align: left;
    padding-left: 10px;
  }

  //上面任务条样式
  .gantt_task_scale {
    height: 45px !important;
  }

  .gantt_task .gantt_task_scale .gantt_scale_cell {
    line-height: 30px !important;
    height: 28px !important;
  }
</style>

3、组件代码2

<!--
 * @Author: your name
 * @Date: 2021-07-22 11:01:08
 * @LastEditTime: 2022-03-16 14:42:54
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \internetPlatform\src\views\iot\systemManage\test2.vue
-->
<template>
  <div>
    <div ref="gantt" style="height:80vh" />
  </div>
</template>

<script>
  import gantt from 'dhtmlx-gantt'
  import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'
  export default {
    data() {
      return {
        // 甘特图配置
        tasks: {
          data: [
            {
              id: 11,
              text: 'Project #1',
              type: gantt.config.types.project,
              progress: 0.6,
              open: true,
            },

            {
              id: 12,
              text: 'Task #1',
              start_date: '03-04-2022',
              duration: '5',
              parent: '11',
              progress: 1,
              open: true,
            },
            {
              id: 13,
              text: 'Task #2',
              start_date: '03-04-2022',
              type: gantt.config.types.project,
              parent: '11',
              progress: 0.5,
              open: true,
            },
            {
              id: 14,
              text: 'Task #3',
              start_date: '02-04-2022',
              duration: '6',
              parent: '11',
              progress: 0.8,
              open: true,
            },
            {
              id: 15,
              text: 'Task #4',
              type: gantt.config.types.project,
              parent: '11',
              progress: 0.2,
              open: true,
            },
            {
              id: 16,
              text: 'Final milestone',
              start_date: '15-04-2022',
              type: gantt.config.types.milestone,
              parent: '11',
              progress: 0,
              open: true,
            },

            {
              id: 17,
              text: 'Task #2.1',
              start_date: '03-04-2022',
              duration: '2',
              parent: '13',
              progress: 1,
              open: true,
            },
            {
              id: 18,
              text: 'Task #2.2',
              start_date: '06-04-2022',
              duration: '3',
              parent: '13',
              progress: 0.8,
              open: true,
            },
            {
              id: 19,
              text: 'Task #2.3',
              start_date: '10-04-2022',
              duration: '4',
              parent: '13',
              progress: 0.2,
              open: true,
            },
            {
              id: 20,
              text: 'Task #2.4',
              start_date: '10-04-2022',
              duration: '4',
              parent: '13',
              progress: 0,
              open: true,
            },
            {
              id: 21,
              text: 'Task #4.1',
              start_date: '03-04-2022',
              duration: '4',
              parent: '15',
              progress: 0.5,
              open: true,
            },
            {
              id: 22,
              text: 'Task #4.2',
              start_date: '03-04-2022',
              duration: '4',
              parent: '15',
              progress: 0.1,
              open: true,
            },
            {
              id: 23,
              text: 'Mediate milestone',
              start_date: '14-04-2022',
              type: gantt.config.types.milestone,
              parent: '15',
              progress: 0,
              open: true,
            },
          ],
          links: [
            { id: '10', source: '11', target: '12', type: '1' },
            { id: '11', source: '11', target: '13', type: '1' },
            { id: '12', source: '11', target: '14', type: '1' },
            { id: '13', source: '11', target: '15', type: '1' },
            { id: '14', source: '23', target: '16', type: '0' },
            { id: '15', source: '13', target: '17', type: '1' },
            { id: '16', source: '17', target: '18', type: '0' },
            { id: '17', source: '18', target: '19', type: '0' },
            { id: '18', source: '19', target: '20', type: '0' },
            { id: '19', source: '15', target: '21', type: '2' },
            { id: '20', source: '15', target: '22', type: '2' },
            { id: '21', source: '15', target: '23', type: '0' },
          ],
        },
      }
    },

    mounted() {
      this.init()
    },
    methods: {
      // 初始化
      init() {
        // 自动延长时间刻度
        gantt.config.fit_tasks = true
        // 允许拖放
        gantt.config.drag_project = true
        // 定义时间格式
        gantt.config.scales = [
          { unit: 'month', step: 1, date: '%F, %Y' },
          { unit: 'day', step: 1, date: '%j, %D' },
        ]
        // 添加弹窗属性
        gantt.config.lightbox.sections = [
          {
            name: 'description',
            height: 70,
            map_to: 'text',
            type: 'textarea',
            focus: true,
          },
          { name: 'type', type: 'typeselect', map_to: 'type' },
          { name: 'time', type: 'duration', map_to: 'auto' },
        ]
        // 初始化
        gantt.init(this.$refs.gantt)
        // 数据解析
        gantt.parse(this.tasks)
      },
    },
  }
</script>

<style lang="scss" scoped>
  .firstLevelTask {
    border: none;
    .gantt_task_content {
      // font-weight: bold;
      font-size: 13px;
    }
  }

  .secondLevelTask {
    border: none;
  }

  .thirdLevelTask {
    border: 2px solid #da645d;
    color: #da645d;
    background: #da645d;
  }

  .milestone-default {
    border: none;
    background: rgba(0, 0, 0, 0.45);
  }

  .milestone-unfinished {
    border: none;
    background: #5692f0;
  }

  .milestone-finished {
    border: none;
    background: #84bd54;
  }

  .milestone-canceled {
    border: none;
    background: #da645d;
  }

  html,
  body {
    margin: 0px;
    padding: 0px;
    height: 100%;
    overflow: hidden;
  }

  .container {
    height: 900px;
    .left-container {
      height: 100%;
    }
  }

  .left-container {
    height: 600px;
  }

  .gantt_scale_line {
    border-top: 0;
  }

  .weekend {
    //background:#f4f7f4!important;
    color: #000000 !important;
  }

  .gantt_selected .weekend {
    background: #f7eb91 !important;
  }

  .gantt_task_content {
    text-align: left;
    padding-left: 10px;
  }

  //上面任务条样式
  .gantt_task_scale {
    height: 45px !important;
  }

  .gantt_task .gantt_task_scale .gantt_scale_cell {
    line-height: 30px !important;
    height: 28px !important;
  }
</style>