甘特图 Dhtmlx Gantt
介绍
在一些任务计划、日程进度等场景中我们会使用到甘特图,Dhtmlx Gantt 对于甘特图的实现支持很友好,文档API介绍全面,虽然增强版的收费,但免费版的足以够用。
官网:https://docs.dhtmlx.com/gantt/
安装dhtml gannt插件
npm install dhtmlx-gantt
引入插件
//页面引入,如果多个页面使用可以全局引入
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
页面代码
<template><div class="gantt-box" ref="ganttRef"></div>
</template><script setup>
import { gantt } from 'dhtmlx-gantt';
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css';
import { onMounted, ref } from 'vue';
const ganttRef = ref(null);
const data = {data: [{id: 1,text: 'projectName',start_date: '01-04-2023',end_date: '05-12-2023',duration: 248,progress: 0.3,open: true,color: '#b38989'},{id: 2,text: '任务1',start_date: '02-04-2023',end_date: '11-07-2023',duration: 100,progress: 0.6,parent: 1},{id: 3,text: '任务2',start_date: '12-07-2023',end_date: '09-09-2023',duration: 59,progress: 0,parent: 1}],links: [{ id: 1, source: 1, target: 2, type: '1' },{ id: 2, source: 2, target: 3, type: '0' }]
};
const columns = [{ name: 'text', label: '项目名称', tree: true, min_width: 140 },{ name: 'start_date', label: '开始时间', min_width: 100 },{ name: 'end_date', label: '结束时间', min_width: 100 },{ name: 'duration', label: '计划工期' },{ name: 'add', label: '' }
];
const initGantt = () => {// 清空之前的配置gantt.clearAll();gantt.i18n.setLocale('cn'); // 设置中文gantt.config.readonly = true; // 设置为只读gantt.plugins({tooltip: true,quick_info: true // 快速信息框// multiselect: true,// 激活多任务选择});gantt.config.show_quick_info = true;gantt.config.tooltip_offset_x = 10;gantt.config.tooltip_offset_y = 30;// gantt.config.open_split_tasks = false;gantt.config.details_on_create = true; // 创建新事件通过点击“+”按钮打开灯箱gantt.config.autofit = true; // 甘特图图表宽度自适应// gantt.config.resize_rows = true; // 用户可以通过拖拽调整行高// 图表项目栏可以任意拖拽(任意节点下)gantt.config.order_branch = false;gantt.config.order_branch_free = false;gantt.config.placeholder_task = false; // 新增空白列后新增项目gantt.config.scale_height = 50;gantt.config.show_links = true; //是否显示依赖连线gantt.config.sort = false; // 点击表头可排序gantt.config.row_height = 40; //设置行高gantt.config.drag_project = true;gantt.config.scales = [// 设置时间刻度相关属性// 显示月日用这个// { unit: 'month', step: 1, format: '%Y-%m' },// { unit: 'day', step: 1, format: '%Y-%m-%d' }// 显示年月用这个{ unit: 'year', step: 1, format: '%Y' },{ unit: 'month', step: 1, format: '%M' }];// gantt.config.start_date = new Date(// `${new Date().getFullYear() - 1},${new Date().getMonth()},${new Date().getDay()}`// );// gantt.config.end_date = new Date(`${new Date().getFullYear() + 1},${new Date().getMonth()},${new Date().getDay()}`);// gantt.config.show_tasks_outside_timescale = true;gantt.config.auto_scheduling = true;// 配置Gantt内置弹出框内容gantt.templates.lightbox_header = function (start_date, end_date, task) {return `<b>${task.text}</b>`;};gantt.config.lightbox.sections = [{name: 'description',height: 36,map_to: 'text',type: 'textarea',focus: true},{ name: 'time', type: 'duration', map_to: 'auto' },{name: 'Participants',height: 36,map_to: 'Participants',type: 'ParticipantsPlan',focus: true},{name: 'BgColor',height: 36,map_to: 'color',type: 'ParticipantsPlanColor',focus: true}];gantt.templates.tooltip_text = function (start, end, task) {return (task.text +'<br/><span>开始:</span> ' +gantt.templates.tooltip_date_format(start) +'<br/><span>结束:</span> ' +gantt.templates.tooltip_date_format(end) +'<br/><span>进度:</span> ' +Math.round(task.progress * 100) +'%');};gantt.config.bar_height = 30;// 自定义信息弹窗classgantt.templates.quick_info_class = function () {return 'default-quick-info';};// 自定义信息弹窗头部classgantt.templates.grid_header_class = function () {return 'progress-header';};gantt.templates.quick_info_content = function (start, end, task) {return `<div>${task.text}<br/>计划开始 : ${gantt.templates.tooltip_date_format(start)}<br/>计划结束:${gantt.templates.tooltip_date_format(end)}<br/>进度 : ${Math.round(task.progress * 100) + '%'}<br/>状态 :</div>`;};// 设置树形列的父项图标gantt.templates.grid_folder = function () {return '';};// 设置树形列的子项图标gantt.templates.grid_file = function () {return '';};// 自定义进度条上的文本gantt.templates.task_text = function (start, end, task) {return `<span style="margin-left:10px;color:white;">${task.progress * 100}%</span>`;};// 自定义progress_text内容gantt.templates.progress_text = function () {// return "<span style='text-align:left;'>" + Math.round(task.progress * 100) + '% </span>';return '';};gantt.config.columns = columns;// 初始化甘特图gantt.init(ganttRef.value);// 渲染数据gantt.parse(data);
};onMounted(() => {initGantt();
});
</script><style lang="less" scoped>
.gantt-box {width: 1000px;height: 400px;
}
// /deep/.default-quick-info {
// background-color: aqua;
// }
</style>
效果

相关文章:
甘特图 Dhtmlx Gantt
介绍 在一些任务计划、日程进度等场景中我们会使用到甘特图,Dhtmlx Gantt 对于甘特图的实现支持很友好,文档API介绍全面,虽然增强版的收费,但免费版的足以够用。 官网:https://docs.dhtmlx.com/gantt/ 安装dhtml gannt…...
iOS 应用上架流程详解
iOS 应用上架流程详解 欢迎来到我的博客,今天我将为大家分享 iOS 应用上架的详细流程。在这个数字化时代,移动应用已经成为了人们生活中不可或缺的一部分,而 iOS 平台的 App Store 则是开发者们发布应用的主要渠道之一。因此,了解…...
Python入门【LEGB规则、面向对象简介、面向过程和面向对象思想、面向对象是什么? 对象的进化 、类的定义、对象完整内存结构 】(十三)
👏作者简介:大家好,我是爱敲代码的小王,CSDN博客博主,Python小白 📕系列专栏:python入门到实战、Python爬虫开发、Python办公自动化、Python数据分析、Python前后端开发 📧如果文章知识点有错误…...
【消息中间件】原生PHP对接Uni H5、APP、微信小程序实时通讯消息服务
文章目录 视频演示效果前言一、分析二、全局注入MQTT连接1.引入库2.写入全局连接代码 二、PHP环境建立总结 视频演示效果 【uniapp】实现买定离手小游戏 前言 Mqtt不同环境问题太多,新手可以看下 《【MQTT】Esp32数据上传采集:最新mqtt插件(支…...
【C语言初阶】指针篇—上
目录 1. 指针是什么?2. 指针和指针类型2.1 指针-整数2.2 指针的解引用 3. 野指针3.1 野指针成因1. 指针未初始化2. 指针越界访问3. 指针指向的空间释放 3.2 如何规避野指针 1. 指针是什么? 指针是什么? 指针理解的2个要点: > 1…...
基于FasterRCNN深度学习网络的车辆检测算法matlab仿真
目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心程序 ....................................................................... % 训练Faster R-…...
机器学习深度学习——多层感知机
👨🎓作者简介:一位即将上大四,正专攻机器学习的保研er 🌌上期文章:机器学习&&深度学习——感知机 📚订阅专栏:机器学习&&深度学习 希望文章对你们有所帮助 上一节…...
Django模型将模型注释同步到数据库
1、安装django-comment-migrate库 pip install django-comment-migrate 2、将库注册到settings.py文件中 INSTALLED_APPS [...django_comment_migrate, # 表注释... ] 3、加注释 3.1、给模型(表)加注释 在模型的class Meta中编辑 verbose_name&…...
STM32 Flash学习(二)
STM32F1的官方固件库操作FLASH的几个常用函数。这些函数和定义分布在源文件stm32f1xx_hal_flash.c/stm32f1xx_hal_flash_ex.c以及头文件stm32f1xx_hal_flash.h/stm32f1xx_hal_flash_ex.h中。 锁定解函数 对FLASH进行写操作前必须先解锁,解锁操作:在FLA…...
kotlin获取泛型集合的类型信息
通过 reified 关键字和内联函数来实现 inline fun <reified T> getClassFromList(list: List<T>): Class<T> {return T::class.java }fun main() {val list listOf("Hello", "World")val clazz getClassFromList(list)println(clazz)…...
AQS源码解析
关于 AQS,网上已经有无数的文章阐述 AQS 的使用及其源码,所以多这么一篇文章也没啥所谓,还能总结一下研究过的源码。源码解析和某某的使用,大概是互联网上 Java 文章中写得最多的主题了。 AQS AQS 是 AbstractQueuedSynchronize…...
关于在VS2017中编译Qt项目遇到的问题
关于在VS2017中编译Qt项目遇到的问题 【QT】VS打开QT项目运行不成功 error MSB6006 “cmd.exe”已退出,代码为 2。如何在VS2017里部署的Qt Designer上编辑槽函数 【QT】VS打开QT项目运行不成功 error MSB6006 “cmd.exe”已退出,代码为 2。 链接 如何在VS2017里部署的Qt Design…...
Python web实战 | 使用 Flask 实现 Web Socket 聊天室
概要 今天我们学习如何使用 Python 实现 Web Socket,并实现一个实时聊天室的功能。本文的技术栈包括 Python、Flask、Socket.IO 和 HTML/CSS/JavaScript。 什么是 Web Socket? Web Socket 是一种在单个 TCP 连接上进行全双工通信的协议。它是 HTML5 中的…...
Android10 Recovery系列(一)隐藏recovery菜单项
一 、背景 起因是遇到了一个隐藏删除recovery菜单项的需求。在寻找解决问题的时候,我经历了找到源码位置,调试修改,生效,思考是否可拓展,优化修改,符合要求的整个过程,下面简单分享一下。如果不想立即实现效果或者只想看解决方案,可以直接看总结那一个部分 二 、准备…...
选好NAS网络储存解决方案,是安全储存的关键
随着网络信息的发展,NAS也越来越受到企业的关注,NAS网络存储除了提供简单的存储服务外,还可以提供更好的数据安全性、更方便的文件共享方式。但市面上的产品种类繁多,我们该如何选择合适的产品,通过企业云盘࿰…...
AnimateDiff论文解读-基于Stable Diffusion文生图模型生成动画
文章目录 1. 摘要2. 引言3. 算法3.1 Preliminaries3.2. Personalized Animation3.3 Motion Modeling Module 4. 实验5.限制6. 结论 论文: 《AnimateDiff: Animate Your Personalized Text-to-Image Diffusion Models without Specific Tuning》 github: https://g…...
centos7安装tomcat
安装tomcat 必须依赖 JDK 环境,一定要提前装好JDK保证可以使用 一、下载安装包 到官网下载 上传到linux 服务器 二、安装tomcat 创建tomcat 文件夹 mkdir -p /usr/local/tomcat设置文件夹权限 chmod 757 tomcat将安装包上传至 新建文件夹 解压安装包 tar zx…...
【C#教程】零基础从入门到精通
今天给大家分享一套零基础从入门到精通:.NetCore/C#视频教程;这是2022年最新整理的、590G的开发教程资料。课程涵盖了.Net各方面的知识,跟着这个教程学习,就足够了。 课程分类 1、C#从基础到精通教程; 2、Winform从…...
opencv rtsp 硬件解码
讨论使用opencv的reader 硬件解码的方案有太多种,如果使用ffmpeg硬件解码是最方便的,不方便的是把解码过后的GPU 拉到 CPU 上,再使用opencv的Mat 从cpu 上上载到gpu上,是不是多了两个过程,应该是直接从GPU mat 直接去…...
机器学习-Gradient Descent
机器学习(Gradient Descent) videopptblog 梯度下降(Gradient Descent) optimization problem: 损失函数最小化 假设本模型有两个参数𝜃1和𝜃2,随机取得初始值 求解偏微分,梯度下降对参数进行更新 Visualize: 确定梯度方向&…...
【网络】每天掌握一个Linux命令 - iftop
在Linux系统中,iftop是网络管理的得力助手,能实时监控网络流量、连接情况等,帮助排查网络异常。接下来从多方面详细介绍它。 目录 【网络】每天掌握一个Linux命令 - iftop工具概述安装方式核心功能基础用法进阶操作实战案例面试题场景生产场景…...
linux之kylin系统nginx的安装
一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源(HTML/CSS/图片等),响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址,提高安全性 3.负载均衡服务器 支持多种策略分发流量…...
突破不可导策略的训练难题:零阶优化与强化学习的深度嵌合
强化学习(Reinforcement Learning, RL)是工业领域智能控制的重要方法。它的基本原理是将最优控制问题建模为马尔可夫决策过程,然后使用强化学习的Actor-Critic机制(中文译作“知行互动”机制),逐步迭代求解…...
测试markdown--肇兴
day1: 1、去程:7:04 --11:32高铁 高铁右转上售票大厅2楼,穿过候车厅下一楼,上大巴车 ¥10/人 **2、到达:**12点多到达寨子,买门票,美团/抖音:¥78人 3、中饭&a…...
Angular微前端架构:Module Federation + ngx-build-plus (Webpack)
以下是一个完整的 Angular 微前端示例,其中使用的是 Module Federation 和 npx-build-plus 实现了主应用(Shell)与子应用(Remote)的集成。 🛠️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...
JAVA后端开发——多租户
数据隔离是多租户系统中的核心概念,确保一个租户(在这个系统中可能是一个公司或一个独立的客户)的数据对其他租户是不可见的。在 RuoYi 框架(您当前项目所使用的基础框架)中,这通常是通过在数据表中增加一个…...
mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
Chromium 136 编译指南 Windows篇:depot_tools 配置与源码获取(二)
引言 工欲善其事,必先利其器。在完成了 Visual Studio 2022 和 Windows SDK 的安装后,我们即将接触到 Chromium 开发生态中最核心的工具——depot_tools。这个由 Google 精心打造的工具集,就像是连接开发者与 Chromium 庞大代码库的智能桥梁…...
macOS 终端智能代理检测
🧠 终端智能代理检测:自动判断是否需要设置代理访问 GitHub 在开发中,使用 GitHub 是非常常见的需求。但有时候我们会发现某些命令失败、插件无法更新,例如: fatal: unable to access https://github.com/ohmyzsh/oh…...
Matlab实现任意伪彩色图像可视化显示
Matlab实现任意伪彩色图像可视化显示 1、灰度原始图像2、RGB彩色原始图像 在科研研究中,如何展示好看的实验结果图像非常重要!!! 1、灰度原始图像 灰度图像每个像素点只有一个数值,代表该点的亮度(或…...
