Vue 甘特图 gantt 安装使用

2024-01-31 17:36
文章标签 javascript 安装 使用 vue frontend 甘特图 gantt

本文主要是介绍Vue 甘特图 gantt 安装使用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

Vue 甘特图 gantt 安装使用

(gantt-elastic)参考文章@shenjuncaci

(dhtmlx)参考文章@秃头的铲屎官

dhtmlx@官方文档

安装

npm i dhtmlx-gantt

使用

创建一个容器

  <div ref="gantt" class="gantt-container"></div>

引入依赖

import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";

初始化及数据解析

        //  初始化gantt.init(this.$refs.gantt)//  数据解析gantt.parse(this.tasks)

其他配置可根据自己需求参考官网添加。

dhtmlx 实操案例 (简易 demo)

<template><div class="container"><div class="select-wrap"><el-select v-model="value" placeholder="请选择" @change="selectChange"><el-optionv-for="item in options":key="item.value":label="item.label":value="item.value"></el-option></el-select></div><div ref="gantt" class="gantt-container"></div></div>
</template>
<script>import { gantt } from "dhtmlx-gantt";import "dhtmlx-gantt/codebase/dhtmlxgantt.css";export default {name: "gantt",data() {return {tasks: {data: [],},options: [{value: "1",label: "全部",},{value: "2",label: "完成",},{value: "3",label: "正常",},{value: "4",label: "异常",},{value: "5",label: "未启动",},],value: "1",};},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: "xxx项目概念设计",progress: 0.6,status: "parent",},{toolTipsTxt: "xxx项目-项目启动会",text: "项目启动会-外部", // 任务名start_date: "2020-04-08", // 开始时间id: 11, // 任务idduration: 3, // 任务时长，从start_date开始计算parent: 1, // 父任务IDtype: 1,progress: 0.5,status: "yellow",},{toolTipsTxt: "xxx项目-项目启动会议",text: "项目启动会-内部",start_date: "2020-04-11",id: 12,duration: 2,parent: 1,type: 2,progress: 0.6,status: "pink",},{toolTipsTxt: "xxx项目开工会",text: "项目开工会",start_date: "2020-04-13",id: 13,duration: 4,parent: 1,type: 3,progress: 1,status: "green",},{toolTipsTxt: "xxx项目-项目分析",text: "项目分析",start_date: "2020-04-13",id: 14,duration: 4,parent: 1,type: 4,progress: 0.6,status: "popular",},{id: 2,text: "方案设计",start_date: "2020-04-08",duration: 8,open: true,toolTipsTxt: "xxx方案设计",state: "default",// color:"#409EFF", //设置颜色progress: 0.6,status: "parent",},{toolTipsTxt: "xxx新项目原型图设计",text: "原型图设计",start_date: "2020-04-08",id: 21,duration: 2,parent: 2,type: 1,progress: 0.6,status: "yellow",},{toolTipsTxt: "xxx项目-项目设计图",text: "设计图设计",start_date: "2020-04-09",id: 22,duration: 2,parent: 2,type: 2,progress: 0.6,status: "pink",},{toolTipsTxt: "xxx项目-项目确认",text: "项目确认",start_date: "2020-04-11",id: 23,duration: 2,parent: 2,type: 3,progress: 1,status: "green",},].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;});},selectChange(val) {console.log(val);//测试用例var obj = {toolTipsTxt: "新增任务",text: "新增任务", // 任务名start_date: "2020-04-15", // 开始时间id: 24, // 任务idduration: 2, // 任务时长，从start_date开始计算parent: 2, // 父任务IDtype: 4,progress: 0,status: "popular",};this.tasks.data.push(obj);// 数据解析gantt.parse(this.tasks);// 刷新数据gantt.refreshData();},},mounted() {this.initData();//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务gantt.config.autosize = true;//只读模式gantt.config.readonly = true;//是否显示左侧树表格gantt.config.show_grid = true;//表格列设置gantt.config.columns = [{name: "text",label: "阶段名字",tree: true,width: "280",onrender: function (task, node) {node.setAttribute("class","gantt_cell gantt_last_cell gantt_cell_tree " + task.status);},},{name: "duration",label: "时长",align: "center",template: function (obj) {return obj.duration + "天";},hide: true,},];var weekScaleTemplate = function (date) {var dateToStr = gantt.date.date_to_str("%m %d");var endDate = gantt.date.add(gantt.date.add(date, 1, "week"),-1,"day");var weekNum = gantt.date.date_to_str("第 %W 周");return weekNum(date);};var daysStyle = function (date) {var dateToStr = gantt.date.date_to_str("%D");if (dateToStr(date) == "六" || dateToStr(date) == "日")return "weekend";return "";};gantt.config.subscales = [{unit: "week",step: 1,template: weekScaleTemplate,},{unit: "day",step: 1,format: "%d",},];gantt.plugins({tooltip: true,});gantt.attachEvent("onGanttReady", function () {var tooltips = gantt.ext.tooltips;gantt.templates.tooltip_text = function (start, end, task) {return (task.toolTipsTxt +"<br/>" +"阶段：" +task.text +"<br/>" +gantt.templates.tooltip_date_format(start));};});//设置任务条进度内容gantt.templates.progress_text = function (start, end, task) {return ("<div style='text-align:left;color:#fff;padding-left:20px'>" +Math.round(task.progress * 100) +"% </div>");};//任务条显示内容gantt.templates.task_text = function (start, end, task) {// return task.text + '(' + task.duration + '天)';return ("<div style='text-align:center;color:#fff'>" +task.text +"(" +task.duration +"天)" +"</div>");};// 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.config.layout = {css: "gantt_container",cols: [{width: 280,min_width: 280,rows: [{view: "grid",scrollX: "gridScroll",scrollable: true,scrollY: "scrollVer",},{view: "scrollbar",id: "gridScroll",group: "horizontal",},],},{resizer: true,width: 1,},{rows: [{view: "timeline",scrollX: "scrollHor",scrollY: "scrollVer",},{view: "scrollbar",id: "scrollHor",group: "horizontal",},],},{view: "scrollbar",id: "scrollVer",},],};//时间轴图表中，任务条形图的高度// gantt.config.task_height = 28//时间轴图表中，甘特图的高度// gantt.config.row_height = 36//时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。gantt.config.show_task_cells = true;//当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度gantt.config.fit_tasks = true;gantt.config.min_column_width = 50;gantt.config.auto_types = true;gantt.config.xml_date = "%Y-%m-%d";gantt.config.scale_unit = "month";gantt.config.step = 1;gantt.config.date_scale = "%Y年%M";gantt.config.start_on_monday = true;gantt.config.scale_height = 90;gantt.config.autoscroll = true;gantt.config.calendar_property = "start_date";gantt.config.calendar_property = "end_date";gantt.config.readonly = true;gantt.i18n.setLocale("cn");// 初始化gantt.init(this.$refs.gantt);// 数据解析gantt.parse(this.tasks);},};
</script>
<style lang="scss">.firstLevelTask {border: none;.gantt_task_content {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: 100%;width: 100%;position: relative;.gantt_grid_head_cell {padding-left: 20px;text-align: left !important;font-size: 14px;color: #333;}.select-wrap {position: absolute;top: 25px;z-index: 99;width: 90px;left: 180px;.el-input__inner {border: none;}}.left-container {height: 100%;}//   .parent {//     .gantt_tree_icon {//       &.gantt_folder_open {//         background-image: url(assets/gantt-icon.svg) !important;//       }//       &.gantt_folder_closed {//         background-image: url(assets/gantt-icon-up.svg) !important;//       }//     }//   }.green,.yellow,.pink,.popular {.gantt_tree_icon.gantt_file {background: none;position: relative;&::before {content: "";width: 10px;height: 10px;border-radius: 50%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);}}}.green {.gantt_tree_icon.gantt_file {&::before {background: #84bd54;}}}.yellow {.gantt_tree_icon.gantt_file {&::before {background: #fcca02;}}}.pink {.gantt_tree_icon.gantt_file {&::before {background: #da645d;}}}.popular {.gantt_tree_icon.gantt_file {&::before {background: #d1a6ff;}}}}.left-container {height: 100%;}.gantt_task_content {text-align: left;padding-left: 10px;}
</style>

踩坑记录

样式不生效问题

再给 style 标签添加了 scoped 属性后 可能会出现样式不生效的问题

解决办法

  • scss 环境使用 ::v-deep进行样式穿透
  • less 环境使用 /deep/ 进行样式穿透
  • 删掉 scoped 属性。

甘特图数据未渲染

再调用接口的数据赋值后，甘特图的数据为渲染。

可能原因：

gant 在实例的时候 还没有获取到 data 数据

解决办法：

  • 使用 async await 在获取的数据之后，再让 gant 进行实例
  • 使用 this.$nextTick(()=>{}) 再拿到最新的数据后 进行更新。
//  数据初始化处理的方法initData: function () {this.tasks.data = this.jsondata.map((item) => {return {id: item.id,text: item.workItem,start_date: transitionYmdTime(item.planStartDate),end_date: transitionYmdTime(item.planCompletedDate),open: true, // 默认打开，toolTipsTxt: item.workItem}})},
//  甘特图数据接口gantDataSearch() {let bodyData = { apqpKey: this.apqpKey }API.apqpPowerMeeting(bodyData).then((res) => {this.jsondata = res.workItemsthis.$nextTick(() => {// 获取到数据后 进行数据处理this.initData()// 使用gantt实例 进行 初始化gantt.init(this.$refs.gantt)// 使用gantt实例  数据解析gantt.parse(this.tasks)})console.log('gant数据', res)})}

这篇关于Vue 甘特图 gantt 安装使用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/664542。

相关文章

Git可视化管理工具(SourceTree)使用操作大全经典

Git可视化管理工具(SourceTree)使用操作大全经典

《Git可视化管理工具(SourceTree)使用操作大全经典》本文详细介绍了SourceTree作为Git可视化管理工具的常用操作,包括连接远程仓库、添加SSH密钥、克隆仓库、设置默认项目目录、代码... 目录前言：连接Gitee or github，获取代码:在SourceTree中添加SSH密钥：Cl
阅读更多...
Python中模块graphviz使用入门

Python中模块graphviz使用入门

《Python中模块graphviz使用入门》graphviz是一个用于创建和操作图形的Python库,本文主要介绍了Python中模块graphviz使用入门,具有一定的参考价值,感兴趣的可以了解一... 目录1.安装2. 基本用法2.1 输出图像格式2.2 图像style设置2.3 属性2.4 子图和聚
阅读更多...
windows和Linux使用命令行计算文件的MD5值

windows和Linux使用命令行计算文件的MD5值

《windows和Linux使用命令行计算文件的MD5值》在Windows和Linux系统中,您可以使用命令行（终端或命令提示符）来计算文件的MD5值,文章介绍了在Windows和Linux/macO... 目录在Windows上：在linux或MACOS上：总结在Windows上：可以使用certuti
阅读更多...
CentOS和Ubuntu系统使用shell脚本创建用户和设置密码

CentOS和Ubuntu系统使用shell脚本创建用户和设置密码

《CentOS和Ubuntu系统使用shell脚本创建用户和设置密码》在Linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设置密码,本文写了一个shell... 在linux系统中,你可以使用useradd命令来创建新用户,使用echo和chpasswd命令来设
阅读更多...
Python使用Matplotlib绘制3D曲面图详解

Python使用Matplotlib绘制3D曲面图详解

《Python使用Matplotlib绘制3D曲面图详解》：本文主要介绍Python使用Matplotlib绘制3D曲面图,在Python中,使用Matplotlib库绘制3D曲面图可以通过mpl... 目录准备工作绘制简单的 3D 曲面图绘制 3D 曲面图添加线框和透明度控制图形视角Matplotlib
阅读更多...
Pandas中统计汇总可视化函数plot()的使用

Pandas中统计汇总可视化函数plot()的使用

《Pandas中统计汇总可视化函数plot()的使用》Pandas提供了许多强大的数据处理和分析功能,其中plot()函数就是其可视化功能的一个重要组成部分,本文主要介绍了Pandas中统计汇总可视化... 目录一、plot()函数简介二、plot()函数的基本用法三、plot()函数的参数详解四、使用pl
阅读更多...
使用Python实现IP地址和端口状态检测与监控

使用Python实现IP地址和端口状态检测与监控

《使用Python实现IP地址和端口状态检测与监控》在网络运维和服务器管理中,IP地址和端口的可用性监控是保障业务连续性的基础需求,本文将带你用Python从零打造一个高可用IP监控系统,感兴趣的小伙... 目录概述：为什么需要IP监控系统使用步骤说明1. 环境准备2. 系统部署3. 核心功能配置系统效果展
阅读更多...
使用Java将各种数据写入Excel表格的操作示例

使用Java将各种数据写入Excel表格的操作示例

《使用Java将各种数据写入Excel表格的操作示例》在数据处理与管理领域,Excel凭借其强大的功能和广泛的应用,成为了数据存储与展示的重要工具,在Java开发过程中,常常需要将不同类型的数据,本文... 目录前言安装免费Java库1. 写入文本、或数值到 Excel单元格2. 写入数组到 Excel表格
阅读更多...
redis中使用lua脚本的原理与基本使用详解

redis中使用lua脚本的原理与基本使用详解

《redis中使用lua脚本的原理与基本使用详解》在Redis中使用Lua脚本可以实现原子性操作、减少网络开销以及提高执行效率,下面小编就来和大家详细介绍一下在redis中使用lua脚本的原理... 目录Redis 执行 Lua 脚本的原理基本使用方法使用EVAL命令执行 Lua 脚本使用EVALSHA命令
阅读更多...
Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

Java 中的 @SneakyThrows 注解使用方法(简化异常处理的利与弊)

《Java中的@SneakyThrows注解使用方法(简化异常处理的利与弊)》为了简化异常处理,Lombok提供了一个强大的注解@SneakyThrows,本文将详细介绍@SneakyThro... 目录1. @SneakyThrows 简介 1.1 什么是 Lombok？2. @SneakyThrows
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2