vue实现甘特图

已于 2022-03-16 14:45:12 修改
阅读量1.3w 收藏 47
点赞数 7
文章标签： vue.js 甘特图 javascript
于 2022-03-16 14:31:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41463944/article/details/123525778
版权

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>
程序员阿明
关注
  • 7
    点赞
  • 踩
  • 47
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
Vue-Gantt-chart:使用Vue做数据控制的Gantt图表
08-05
vue-gantt-chart 基于 Vue 实现的 gantt-like 图表 ,用于排班展示 Catalog template code script code data Slot block 容器块slot 有 两种 需要注意 :star: customGenerateBlocks 为 false（默认值） 的情况 :star: customGenerateBlocks 为 true 的情况 left 行名slot markline 时间标记线slot timeline 行名slot title 标题slot API Param Method Event Run Demo Caution Update License Feature 虚拟列表，快速渲染可视区域，支持大量数据渲染 可变时间轴，1 分钟，2 分钟，3 分钟，4 分钟~~~到一天 可变单元格 标记线 支持自定义描述和容器块 Screen
甘特图，可以拖拽甘特图模块。
02-23
甘特图可以拖拽，有一个demo。
前端vue实现甘特图
xiaofiy的博客
03-18 2592
前端实现甘特图
基于vue的甘特图，可上下拖拽
05-14
基于vue实现甘特图实现上下拖拽，达到排班的要求，之前困于没有好的方案，在我研究两周后最终实现甘特图的拖拽效果
Vue实现甘特图：技术关键词Vue+甘特图，用途项目计划管理 .pdf
04-06
vue甘特图 Vue实现甘特图是一个项目管理或者项目计划领域中非常有用的功能。它适用于需要对项目进度、任务安排、资源分配进行可视化展示的人群。使用场景及目标是帮助项目经理或团队成员清晰的了解项目进展，并能够对项目计划进行有效的调整。 该代码实现了一个甘特图组件的封装，使用Vue进行开发，支持甘特图数据的绑定，以及甘特图的展示。代码中还使用了相关的图形绘制和动画效果，使得甘特图的展示更加直观生动。 总的来说，该代码是一份非常实用的Vue实现甘特图的案例代码，能够帮助开发者快速实现甘特图的功能，提高项目管理的效率。
Vue 甘特图
热门推荐
ChickenBro_的博客
10-12 2万+
vue做甘特图，先大致介绍下核心功能： （1）横轴、纵轴拖拽； （2）自定义监听点击事件（双击、右键等）（3）任务之间显示父子层级关系；（4）左侧列表信息，右侧时间轴表示任务；（5）每个任务可以订制样式，并且可以动态修改样式；（6）自定义时间粒度显示（小时、天、星期、月、年）；（7）支持大批量数据渲染；（8）支持同行多节点渲染；（9）支持选中，以及批量选中；（9）优秀的扩展性，支持第三方插件。等等还有其他的一些功能。这里先看一下效果图： 　　接下来会介绍用什么实现的，...
vue2实现甘特图
油墨香^-^的博客
04-10 5165
(1)直接引入dhtmlx甘特实现的图表操作描述全是英文的，所以要对现有的属性数据显示要进行汉化文字代替。使用需要很多配置项，在原生版进行详情介绍，vue版只做基本使用。以上内容只是部分收费内容，并非全部收费内容。收费的甘特图功能一般在这放开。自定义修改gantt样式文件。弹窗表单----见汉化图例。local---本地汉化。gantt加载数据格式。gantt功能插件挂载。
vue渲染甘特图
zj850324的博客
08-16 4384
vue + gantt 渲染甘特图组件应用。数据载入基于数据库，分页查询、反向规划、表单校验等不赘述，可参考演示源码。修复gantt.isWorkTime()方法工作不正确的“周”时间单位，修复通过gantt.silent()方法添加任务和链接时无法渲染的问题，修复某些情况下数据加载后显示“Task not found”错误信息的问题，修复gantt.changeLightboxType()方法的错误工作，该方法将旧的灯箱元素留在 DOM 中，修复夏季/冬季时钟更改后任务重叠时任务结束日期的错误。
Vue整合甘特图（横道图、Gantt）实例
Hello World
07-19 8012
Vue整合甘特图（横道图、Gantt）实例 引入相应的模块： cnpm install gantt-elastic --save cnpm install gantt-elastic-header --save cnpm install dayjs --save Vue代码部分： 总结 每天一个提升小技巧！！！ 代码如下（示例）： data = pd.read_csv( 'https://labfile.oss.aliyuncs.com/courses/1283/adult.data.cs
基于dhtmlx-gantt和vue开发的甘特图
yke1213的博客
12-11 1698
我当时公司需求是要求在甘特图上能显示任务情况的，即显示开始和结束时间，和实际任务开始和结束时间，还有请假，出差，加班，节假日情况，在网上找了一圈发现dhtmlx-gantt，dhtmlx-gantt付费不能完全能满足需求，但是小人不敢提，结果摸索后发现这是使用html生成的图表，修改起来很方便，所以我来分享一下免费版的，又满足要求的甘特图。
vue制作甘特图项目源码
06-08
本项目主要面向需要使用vue来实现甘特图需求的开发者，项目实现了节点的拖拽，并用导航线连接各个节点，实现甘特图进度动态更改，导航线可以随着节点的拖拽动态变换位置，并可以新增、删除和修改任务 本项目只提供了...
vue2实现可拖拽甘特图（结合element-ui的gantt图）
11-07
接到公司需求，要做一个可拖拽的甘特图来实现排期需求，官方的插件要付费还没有中文的官方文档可以看，就去找了各种开源的demo来看，功能上都不是很齐全，于是总结了很多demo，合在一起组成了一版较为完整的满足需求...
甘特图实现 HTML+CSS
07-22
左侧为任务列表，右侧是甘特图，可以修改任务列表，左右同步 是打包后的，请自行搭建静态服务器查看
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 631
步骤很详细，直接上教程……
Vue项目中异步组件的引入使用
最新发布
Niucode的博客
04-26 262
Vue项目中异步组件的引入使用
vue echarts 柱状图 堆叠柱状图
Z18834071903的博客
04-26 285
vue echarts 柱状图 堆叠柱状图
vue3组件 描点定位以及监听滚动切换对应activeTab
weixin_41824429的博客
04-26 354
【代码】vue3组件 描点定位以及监听滚动切换对应activeTab。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 497
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
vue3实现甘特图拖拽
03-01
Vue 3 是一种流行的 JavaScript 框架，用于构建用户界面。要实现甘特图的拖拽功能，可以借助 Vue 3 的指令和事件处理机制。 首先，你可以使用 Vue 3 的指令来实现元素的拖拽功能。可以自定义一个指令，例如 "drag"，并在元素上应用该指令。在指令的定义中，可以使用 HTML5 的拖拽 API 来处理拖拽事件。具体步骤如下： 1. 在 Vue 组件中定义一个自定义指令 "drag"，可以使用 `v-directive` 指令来定义。 2. 在指令的 `bind` 钩子函数中，添加拖拽事件的监听器。可以使用 `el.addEventListener` 来监听元素的拖拽事件，例如 `dragstart`、`drag` 和 `dragend`。 3. 在 `dragstart` 事件中，可以设置拖拽数据，例如使用 `event.dataTransfer.setData` 方法设置数据类型和值。 4. 在 `drag` 事件中，可以获取鼠标位置，并根据需要更新元素的位置。 5. 在 `dragend` 事件中，可以进行一些清理操作，例如重置元素的位置。 除了指令，你还可以使用 Vue 3 的事件处理机制来处理拖拽事件。具体步骤如下： 1. 在 Vue 组件中定义一个方法，例如 `handleDragStart`，用于处理拖拽开始事件。 2. 在元素上绑定拖拽事件，例如 `@dragstart="handleDragStart"`。 3. 在方法中，可以使用 `event.dataTransfer.setData` 方法设置拖拽数据。 4. 可以使用 `@drag` 和 `@dragend` 绑定其他的拖拽事件，并在方法中处理相应的逻辑。 以上是实现甘特图拖拽功能的一种思路，具体实现方式可以根据你的需求和项目结构进行调整和优化。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

程序员阿明

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值