vue 甘特图（附件）：甘特图附件
甘特图样式：
.gantt_container {
border-color: transparent !important;
.gantt_right {
top: 0% !important;
display: flex !important;
}
.gantt_side_content {
overflow: visible !important;
}
.weekend {
background: #ff9e2f;
color: #fff !important;
}
// .gantt_selected {
// background: #f4f5fe !important;
// }
.gantt_grid_data .gantt_row.gantt_selected {
background: #f4f5fe !important;
}
.gantt_task_row.gantt_selected {
background: #f4f5fe !important;
}
.gantt_grid_data .gantt_row.odd:hover,
.gantt_grid_data .gantt_row:hover {
background: #f4f5fe !important;
}
.gantt_task_line.gantt_selected {
box-shadow: 0 0 5px #f4f5fe;
}
.gantt_grid_scale .gantt_grid_head_cell {
font-size: 14px;
font-weight: 400;
color: rgba(28, 28, 28, 0.76);
}
.gantt_task .gantt_task_scale .gantt_scale_cell {
font-size: 12px;
font-weight: 400;
color: rgba(28, 28, 28, 0.76);
}
.gantt_side_content.gantt_right {
padding-left: 5px;
top: 20%;
}
.gantt_task_line.gantt_project {
background: #656bff;
border: none;
}
.gantt_task_line {
border-radius: 5px;
background: #b0bdff;
border: none;
}
.gantt_task_content {
color: #fff;
}
.gantt_task_progress {
display: none;
}
.gantt_selected .weekend {
background: #2f51ff;
}
.weekend-border-bottom {
border-bottom: 1px solid rgba(217, 217, 217, 1);
}
.gantt_grid_scale .gantt_grid_head_cell {
border-right: 1px solid #d9d9d9 !important;
&:nth-last-child(1) {
border-right: none !important;
}
}
.gantt_row,
.gantt_task_row {
border-bottom: none;
}
.gantt_task_cell {
border-right-color: rgba(28, 28, 28, 0.1);
}
.gantt_row_task {
border-bottom: 1px solid rgba(217, 217, 217, 1);
}
.gantt_row_project {
border-bottom: 1px solid rgba(217, 217, 217, 1) !important;
}
.gantt_cell {
border-right: 1px solid rgba(217, 217, 217, 1) !important;
}
.gantt_last_cell {
border-right: none !important;
}
// .day-item{
// width: 60px !important;
// }、
.gantt_marker {
z-index: 99;
background: #ff4141;
}
.gantt_tree_icon {
width: 21px;
height: 100%;
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
margin-right: 5px;
}
.gantt_folder_open {
background-image: url('./../img/gante/gantt_folder_open.png') !important;
margin-right: 4px;
}
.gantt_folder_closed {
background-image: url('./../img/gante/gantt_folder_closed.png') !important;
margin-right: 4px;
}
.gantt_file {
background-image: url('./../img/gante/gantt_file.png') !important;
margin-right: 4px;
}
.gantt_close {
width: 12px !important;
background-image: url('./../img/gante/gantt_close.png') !important;
margin-right: 6px;
}
.gantt_open {
width: 12px !important;
background-image: url('./../img/gante/gantt_close.png') !important;
transform: rotate(-90deg);
}
.dont-show {
display: none;
height: 0 !important;
}
.gantt_task_line{
min-width: 21px;
}
.gongxu{
background-image: url('./../img/gante/gongxu.png') !important;
}
}
.gantt-error {
display: none !important;
}
.shadow-right {
box-shadow: 1px 0px 4px 0px rgba(0, 0, 0, 0.15);
}
.lag-advane {
display: flex;
align-items: center;
position: absolute;
top: -50% !important;
z-index: 12;
// left: -100%;
.icon {
width: 20px;
height: 20px;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-right: 2px;
}
.lag {
background-image: url('./../../assets/img/manage/icon_lag.png');
}
.lag-value {
color: #ff4141;
}
.advane {
background-image: url('./../../assets/img/manage/icon_advance.png');
}
.advane-value {
color: #14cf20;
}
}
//员工任务详情
.myself-project-bar {
display: flex;
align-items: center;
.bar-right-item {
width: 90px;
height: 21px;
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
}
.myself-project-progress {
position: absolute;
left: 6px;
width: 40px;
text-align: center;
color: #fff;
}
.myself-project-overTime {
position: absolute;
left: 71px;
text-align: center;
color: #000000;
}
.task-lag {
background-image: url('./../img/gante/task_lag.png');
}
.task-finish {
background-image: url('./../img/gante/task_finish.png');
}
}
// 项目总视图
.tooltip-box {
.project-name {
font-size: 14px;
}
}
.bar-right-item {
display: flex;
align-items: center;
align-content: center;
}
// manage 页面 样式
.finish-state-icon {
width: 20px;
height: 20px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.finish-progress {
width: 54px;
height: 21px;
line-height: 24px;
background-size: 100% 100%;
background-repeat: no-repeat;
font-size: 12px;
font-weight: 600;
text-align: center;
color: #ffffff;
}
.finish-schedule {
display: flex;
align-items: center;
margin-left: 4px;
}
.finish-finish {
.finish-schedule {
display: none;
}
}
//任务超前右侧样式
.finish-advance {
.finish-state-icon {
background-image: url('./../../assets/img/manage/icon_finish.png');
}
.finish-progress {
background-image: url('./../../assets/img/manage/back_advance.png');
}
.finish-schedule {
color: #14cf20;
.finish-schedule-icon {
background-image: url('./../../assets/img/manage/icon_advance.png');
}
}
}
//滞后右侧样式
.finish-lag {
.finish-state-icon {
background-image: url('./../../assets/img/manage/icon_error.png');
}
.finish-progress {
background-image: url('./../../assets/img/manage/back_lag.png');
}
.finish-schedule {
color: #ff4141;
.finish-schedule-icon {
background-image: url('./../../assets/img/manage/icon_lag.png');
}
}
}
.finish-schedule-icon {
width: 20px;
height: 20px;
background-size: 100% 100%;
background-repeat: no-repeat;
margin-right: 2px;
}
.special-item {
background: rgba(203, 212, 255, 0.5);
border: 1px dashed #b0bdff;
border-radius: 4px;
padding: 0 4px;
color: rgba(51, 51, 51, 1);
}
.task-progress-line {
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
z-index: 999;
height: 6px;
background: #eeeeee;
.line-bar {
position: absolute;
left: 0;
height: 6px;
background: #2f51ff;
}
.value {
position: absolute;
right: 2px;
bottom: 7px;
font-size: 12px;
font-weight: 400;
color: #979797;
line-height: 1;
}
}
数据模板：
demoData: {
data: [
{
id: 520,
projectName: '项目1',
startTime: '2023-09-25',
endTime: '2023-10-31',
showEndTime: '2023-11-01',
projectStatus: '暂无任务',
projectProgress: 0,
projectRatio: '',
projectTotalTime: 0,
projectUsedTime: 0,
functionName: '',
xmdj: '2',
cityName: '成都',
name: '1',
projectMap: {},
parent: 0,
start_date: '2023-09-24 16:00:00.000',
end_date: '2023-10-31 16:00:00.000',
progress: 0.5,
duration: 37
},
{
id: 517,
projectName: '项目2',
startTime: '2023-09-18',
endTime: '2023-10-23',
showEndTime: '2023-10-24',
projectStatus: '暂无任务',
projectProgress: 0,
projectRatio: '',
projectTotalTime: 0,
projectUsedTime: 0,
functionName: '',
xmdj: '0',
cityName: '深圳',
name: '2',
projectMap: {},
parent: 0,
start_date: '2023-09-17 16:00:00.000',
end_date: '2023-10-23 16:00:00.000',
progress: 0.2
},
{
id: 505,
projectName: '项目3',
startTime: '2023-09-04',
endTime: '2023-09-30',
showEndTime: '2023-10-01',
projectStatus: '滞后',
projectProgress: 0.76,
projectRatio: 0.12,
projectTotalTime: 3267.6,
projectUsedTime: 2477.7,
functionName: '现状还原',
xmdj: '3',
cityName: '成都',
name: '3',
projectMap: {},
parent: 0,
start_date: '2023-09-03 16:00:00.000',
end_date: '2023-09-30 16:00:00.000',
progress: 0.1
},
{
id: 508,
projectName: '项目4',
startTime: '2023-09-04',
endTime: '2023-10-20',
showEndTime: '2023-10-21',
projectStatus: '滞后',
projectProgress: 0.57,
projectRatio: 0.04,
projectTotalTime: 3582.5,
projectUsedTime: 2033.2,
functionName: '测试功能',
xmdj: '1',
cityName: '成都',
name: '4',
projectMap: {},
parent: 0,
start_date: '2023-09-03 16:00:00.000',
end_date: '2023-10-20 16:00:00.000',
progress: 0.15
},
{
id: 511,
projectName: '项目5',
startTime: '2023-09-01',
endTime: '2023-10-31',
showEndTime: '2023-11-01',
projectStatus: '滞后',
projectProgress: 0.07,
projectRatio: 0.03,
projectTotalTime: 2150.5,
projectUsedTime: 140,
functionName: '悬浮球',
xmdj: '1',
cityName: '成都',
name: '5',
projectMap: {},
parent: 0,
start_date: '2023-07-31 16:00:00.000',
end_date: '2023-10-31 16:00:00.000',
progress: 0.28
},
{
id: 507,
projectName: '项目6',
startTime: '2023-08-28',
endTime: '2023-10-01',
showEndTime: '2023-10-02',
projectStatus: '滞后',
projectProgress: 0.48,
projectRatio: 0.21,
projectTotalTime: 4957,
projectUsedTime: 2367,
functionName: '产品原型图',
xmdj: '1',
cityName: '三亚',
name: '6',
projectMap: {
部门1: 1
},
parent: 0,
start_date: '2023-07-27 16:00:00.000',
end_date: '2023-10-01 16:00:00.000',
progress: 0.33
},
{
id: 1,
projectName: '项目7',
startTime: '2023-08-28',
endTime: '2023-10-25',
showEndTime: '2023-10-26',
projectStatus: '超前',
projectProgress: 0.27,
projectRatio: 0.15,
projectTotalTime: 2027.5,
projectUsedTime: 557,
functionName: '测量工具',
xmdj: '1',
cityName: '佛山',
name: '7',
projectMap: {},
parent: 0,
start_date: '2023-06-27 16:00:00.000',
end_date: '2023-10-25 16:00:00.000',
progress: 0.67
},
{
id: 2,
projectName: '项目7',
startTime: '2023-08-28',
endTime: '2023-10-25',
showEndTime: '2023-10-26',
projectStatus: '滞后',
projectProgress: 0.27,
projectRatio: 0.15,
projectTotalTime: 2027.5,
projectUsedTime: 557,
functionName: '测量工具',
xmdj: '1',
cityName: '佛山',
name: '7',
projectMap: {},
parent: 0,
start_date: '2023-06-27 16:00:00.000',
end_date: '2023-10-25 16:00:00.000',
progress: 0.67
},
{
id: 3,
projectName: '项目7',
startTime: '2023-08-28',
endTime: '2023-10-25',
showEndTime: '2023-10-26',
projectStatus: '滞后',
projectProgress: 0.27,
projectRatio: 0.15,
projectTotalTime: 2027.5,
projectUsedTime: 557,
functionName: '测量工具',
xmdj: '1',
cityName: '佛山',
name: '7',
projectMap: {},
parent: 0,
start_date: '2023-06-27 16:00:00.000',
end_date: '2023-10-25 16:00:00.000',
progress: 0.67
},
{
id: 4,
projectName: '项目7',
startTime: '2023-08-28',
endTime: '2023-10-25',
showEndTime: '2023-10-26',
projectStatus: '滞后',
projectProgress: 0.27,
projectRatio: 0.15,
projectTotalTime: 2027.5,
projectUsedTime: 557,
functionName: '测量工具',
xmdj: '1',
cityName: '佛山',
name: '7',
projectMap: {},
parent: 0,
start_date: '2023-06-27 16:00:00.000',
end_date: '2023-10-25 16:00:00.000',
progress: 0.67
},
{
id: 5,
projectName: '项目7',
startTime: '2023-08-28',
endTime: '2023-10-25',
showEndTime: '2023-10-26',
projectStatus: '滞后',
projectProgress: 0.27,
projectRatio: 0.15,
projectTotalTime: 2027.5,
projectUsedTime: 557,
functionName: '测量工具',
xmdj: '1',
cityName: '佛山',
name: '7',
projectMap: {},
parent: 0,
start_date: '2023-06-27 16:00:00.000',
end_date: '2023-10-25 16:00:00.000',
progress: 0.67
},
{
id: 6,
projectName: '项目7',
startTime: '2023-08-28',
endTime: '2023-10-25',
showEndTime: '2023-10-26',
projectStatus: '滞后',
projectProgress: 0.27,
projectRatio: 0.15,
projectTotalTime: 2027.5,
projectUsedTime: 557,
functionName: '测量工具',
xmdj: '1',
cityName: '佛山',
name: '7',
projectMap: {},
parent: 0,
start_date: '2023-06-27 16:00:00.000',
end_date: '2023-10-25 16:00:00.000',
progress: 0.67
},
{
id: 7,
projectName: '项目7',
startTime: '2023-08-28',
endTime: '2023-10-25',
showEndTime: '2023-10-26',
projectStatus: '滞后',
projectProgress: 0.27,
projectRatio: 0.15,
projectTotalTime: 2027.5,
projectUsedTime: 557,
functionName: '测量工具',
xmdj: '1',
cityName: '佛山',
name: '7',
projectMap: {},
parent: 0,
start_date: '2023-06-27 16:00:00.000',
end_date: '2023-10-25 16:00:00.000',
progress: 0.67
},
{
id: 8,
projectName: '项目7',
startTime: '2023-08-28',
endTime: '2023-10-25',
showEndTime: '2023-10-26',
projectStatus: '滞后',
projectProgress: 0.27,
projectRatio: 0.15,
projectTotalTime: 2027.5,
projectUsedTime: 557,
functionName: '测量工具',
xmdj: '1',
cityName: '佛山',
name: '7',
projectMap: {},
parent: 0,
start_date: '2023-06-27 16:00:00.000',
end_date: '2023-10-25 16:00:00.000',
progress: 0.67
},
{
id: 9,
projectName: '项目7',
startTime: '2023-08-28',
endTime: '2023-10-25',
showEndTime: '2023-10-26',
projectStatus: '滞后',
projectProgress: 0.27,
projectRatio: 0.15,
projectTotalTime: 2027.5,
projectUsedTime: 557,
functionName: '测量工具',
xmdj: '1',
cityName: '佛山',
name: '7',
projectMap: {},
parent: 0,
start_date: '2023-06-27 16:00:00.000',
end_date: '2023-10-25 16:00:00.000',
progress: 0.67
}
]
}
时间切换数据模板：
const zoomConfig = {
levels: [
{
name: 'day',
scale_height: 60,
scales: [{ unit: 'day', step: 1, format: '%d %M' }]
},
{
name: 'week',
scale_height: 60,
scales: [
{
unit: 'week',
step: 1,
format: function (date) {
let dateToStr = gantt.date.date_to_str('%m-%d')
let endDate = gantt.date.add(date, -6, 'day')
let weekNum = gantt.date.date_to_str('%W')(date) //第几周
return dateToStr(endDate) + ' 至 ' + dateToStr(date)
}
},
{
unit: 'day',
step: 1,
format: '%d', // + "周%D"
css: function (date) {
if (date.getDay() == 0 || date.getDay() == 6) {
return 'day-item weekend weekend-border-bottom'
} else {
return 'day-item'
}
}
}
]
},
{
name: 'month',
scale_height: 60,
min_column_width: 18,
scales: [
{ unit: 'month', format: '%Y-%m' },
{
unit: 'day',
step: 1,
format: '%d',
css: function (date) {
if (date.getDay() == 0 || date.getDay() == 6) {
return 'day-item weekend weekend-border-bottom'
} else {
return 'day-item'
}
}
}
]
},
{
name: 'quarter',
height: 60,
min_column_width: 110,
scales: [
{
unit: 'quarter',
step: 1,
format: function (date) {
let yearStr = new Date(date).getFullYear() + '年'
let dateToStr = gantt.date.date_to_str('%M')
let endDate = gantt.date.add(gantt.date.add(date, 3, 'month'), -1, 'day')
return yearStr + dateToStr(date) + ' - ' + dateToStr(endDate)
}
},
{
unit: 'week',
step: 1,
format: function (date) {
let dateToStr = gantt.date.date_to_str('%m-%d')
let endDate = gantt.date.add(date, 6, 'day')
let weekNum = gantt.date.date_to_str('%W')(date)
return dateToStr(date) + ' 至 ' + dateToStr(endDate)
}
}
]
},
{
name: 'year',
scale_height: 50,
min_column_width: 150,
scales: [
{ unit: 'year', step: 1, format: '%Y年' },
{ unit: 'month', format: '%Y-%m' }
]
}
]
}
vue 甘特图（附件）：甘特图附件的更多相关文章
- 甘特图和PERT图
gantt图又叫甘特图.进度是按时间顺序计划活动的一个列表,我们称之为Gantt图,它有以下几个关键的成分:1.横跨图顶部排列的是日历表.2.最左边的一列包含了每项任务的标识号(ID).3.左边第二列 ...
- Tableau绘制漏斗图、甘特图、瀑布图、镶边面积图、阴影坡度图
Tableau绘制漏斗图.甘特图.瀑布图.镶边面积图.阴影坡度图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. 漏斗图 数据源 1.1 分色直条漏斗图 (1) ...
- 在博客文章中使用mermaid 定义流程图，序列图，甘特图
概述 Mermaid(美人鱼)是一套markdown语法规范,用来在markdown文档中定义图形,包括流程图.序列图.甘特图等等. 它的官方网站是 https://mermaid-js.github ...
- HTML中使用Vue+Dhtmlxgantt制作任务进度图
HTML中使用Vue+Dhtmlxgantt制作任务进度图 Dhtmlxgantt官网: https://dhtmlx.com/docs/products/dhtmlxGantt/ 参考文章 甘特图配 ...
- vue 弹性布局 实现长图垂直居上，短图垂直居中
vue 弹性布局 实现长图垂直居上,短图垂直居中 大致效果如下图,只考虑垂直方向.长图可以通过滚动条看,短图居中效果,布局合理 html代码(vue作用域内): <div class=" ...
- vue下使用echarts折线图及其横坐标拖拽功能
vue页面中使用折线图,并且有时间段筛选.因此就需要用到横坐标的拖拽功能. 界面效果如下: 现在来看这个效果的实现代码: drawLine() { let that = this, lineDate ...
- 06. Matplotlib 2 |折线图| 柱状图| 堆叠图| 面积图| 填图| 饼图| 直方图| 散点图| 极坐标| 图箱型图
1.基本图表绘制 plt.plot() 图表类别:线形图.柱状图.密度图,以横纵坐标两个维度为主同时可延展出多种其他图表样式 plt.plot(kind='line', ax=None, figsiz ...
- Tableau绘制K线图、布林线、圆环图、雷达图
Tableau绘制K线图.布林线.圆环图.雷达图 本文首发于博客冰山一树Sankey,去博客浏览效果更好.直接右上角搜索该标题即可 一. K线图 1.1 导入数据源 1.2 拖拽字段 将[日期]托到列 ...
- 【开源】专业K线绘制[K线主副图、趋势图、成交量、滚动、放大缩小、MACD、KDJ等）
这是一个iOS项目雅黑深邃的K线的绘制. 实现功能包括K线主副图.趋势图.成交量.滚动.放大缩小.MACD.KDJ,长按显示辅助线等功能 预览图 最后的最后,这是项目的开源地址:https://git ...
- [UML]UML系列——时序图（顺序图）sequence diagram
系列文章 [UML]UML系列——用例图Use Case [UML]UML系列——用例图中的各种关系(include.extend) [UML]UML系列——类图Class [UML]UML系列——类 ...
随机推荐
- quarkus实战之六：配置
欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/blog_demos 本篇概览 本文是<quarkus实战>系列 ...
- Go语言中指针详解
指针在 Go 语言中是一个重要的特性,它允许你引用和操作变量的内存地址.下面是指针的主要作用和相关示例代码: 1. 引用传递 在 Go 中,所有的变量传递都是值传递,即复制变量的值.如果你想在一个函数 ...
- pandas 显示所有的行和列
import pandas as pd # 显示所有列,所有行 pd.set_option('display.max_columns', None) pd.set_option('display.ma ...
- 深入理解Java虚拟机（JVM）：原理、结构与性能优化
1. 介绍 Java虚拟机(JVM)是Java程序的核心执行引擎,负责将Java源代码编译成可执行的字节码,并在运行时负责解释执行字节码或将其编译成本地机器代码.本文将深入探讨JVM的原理.结构以及性 ...
- R2在全渠道业务线的落地
随着业务的增长,系统的高频率迭代,质量保障工作迫切需要引入更加科学高效的测试方法来助力业务高质量的交付.长城项目一期测试中,全渠道质量团队引入技术平台部R2技术,极大的提升了项目交付的质量.因此,本文 ...
- selenium报错：This version of ChromeDriver only supports Chrome version 109 Current browser version is 112.0.5615.49...解决办法
前言:跟GPT交互,让其写一段代码,执行失败.经过排查验证,GPT写的代码没有问题,是本地环境问题. 执行报错: selenium.common.exceptions.SessionNotCreate ...
- Python实现输入三个整数x，y，z，请把这三个数由小到大输出；
num1=input('请输入第一个数,x:') num2=input('请输入第二个数,y:') num3=input('请输入第三个数,z:') if num1>num2: # if 语句判 ...
- Python 基础面试第三弹
1. 获取当前目录下所有文件名 import os def get_all_files(directory): file_list = [] # os.walk返回一个生成器,每次迭代时返回当前目录路 ...
- [Maven] maven插件系列之maven-shade-plugin
[Maven] maven插件系列之maven-shade-plugin 1 插件简述/Plugin Overview 1.1 定义与目的/Definition & Goals Officia ...
- 在 Android Studio Java 项目里混合 Kotlin 编程
首先,先搞明白一个概念,这里的 Java 混合 Kotlin 是指文件层级的混合,即 Java 代码还是写在 .java 文件中,Kotlin 代码还是写在 .kt 文件中,只不过是可以在 Java ...