我当时公司需求是要求在甘特图上能显示任务情况的，即显示开始和结束时间，和实际任务开始和结束时间，还有请假，出差，加班，节假日情况，在网上找了一圈发现dhtmlx-gantt，dhtmlx-gantt付费不能完全能满足需求，但是小人不敢提，结果摸索后发现这是使用html生成的图表，修改起来很方便，所以我来分享一下免费版的，又满足要求的甘特图
一.文档地址
二.安装
npm i dhtmlx-gantt三.分析部分
任务情况无非有就几种：（蓝色是实际时间，红色是计划时间）
1. 实际开始时间早于计划开始时间，实际结束时间也早于计划开始时间(l21)
2. 实际开始时间早于计划开始时间，实际结束时间在计划时间之内 (j21)
3. 实际开始时间早于计划开始时间，实际结束时间也晚于计划结束时间 (b21)
4. 实际开始和结束时间都在计划时间之内(b12)
5. 实际开始时间在计划时间之内，实际结束时间也晚于计划结束时间 (j12)
6. 实际开始和结束时间都晚于计划结束时间(l12)
四.效果图
先上效果图
五.代码部分
dhtmlx-gantt参数方法什么的就自己看官网了哈，这里就不多做解释了，直接上代码
index.vue 部分
头部样式和定义甘特图容器
<template>
<div class="about">
<div id="dhtmlgantt">
<div class="gantt">
<div class="legend">
<div class="legendBox">
<div class="legendSml legendColor1"></div>
<div class="text">计划时间</div>
</div>
<!-- <div class="legendBox">
<div class="legendSml legendColor2"></div>
<div class="text">相交时间</div>
</div> -->
<div class="legendBox">
<div class="legendSml legendColor3"></div>
<div class="text">实际时间</div>
</div>
</div>
<div class="gantt_render" v-if="!tasks.data.length == 0 && loading == false">
<!-- <a-button @click="getLongStyle()">变化</a-button> -->
<!-- 甘特图 -->
<div id="custom" ref="dxgantt" class="left-container" />
</div>
<div class="simpleImage" v-if="tasks.data.length == 0 && loading == false">
<a-empty description="暂无数据" :image="simpleImage"></a-empty>
</div>
<div v-else-if="loading == true" class="spin">
<a-spin class="a-spin" tip="Loading..."></a-spin>
</div>
</div>
</div>
</div>
</template>引入
import moment from 'moment';
// import { Empty } from 'ant-design-vue';
import gantt from "dhtmlx-gantt"; // 引入模块
import "dhtmlx-gantt/codebase/dhtmlxgantt.css"; //皮肤
import {data} from './data.js'处理甘特图右侧进度条类型样式方法和判断
// 设置每一部分的颜色
renderLabel(progress, type, state,val,num,objText,status) {
// progress, type, state,val实际还是计划,num,objText完成度,status状态
// const self =this
let hour = moment().format("k");
var relWidth = progress * 100;
var n=num*100
var cssClass = "custom_progress ";
let otherLength = '0px' // 额外长度
// let doingLenght = 34
// 实际
if(val==='progress3'){
if(status === 'doing'){
if(objText==='100%'){
cssClass += "nearly_done1";
otherLength = '34px'
}else{
cssClass += "near_done1"
if(Number(hour)<8){
otherLength = '0px'
}else if(Number(hour)>=8 && Number(hour)<18){
let num=34*(Number(hour) -8)/8
otherLength = num+'px'
}else{
otherLength = '34px'
}
}
}else{
if (type === 1) {
cssClass += "nearly_done1";
} else if (type === 2) {
if (state) {
cssClass += "in_progress1";
} else {
cssClass += "in_progress_w1";
}
} else {
cssClass += "idle1";
}
}
}else{
if (type === 1) {
cssClass += "nearly_done";
} else if (type === 2) {
if (state) {
cssClass += "in_progress";
} else {
cssClass += "in_progress_w";
}
} else {
cssClass += "idle";
}
}
if(val==='progress3'){
let widthLenght
if(status === 'doing'){
widthLenght = `calc(${relWidth+'%'} + ${otherLength} - 34px)`
}else{
widthLenght = `calc(${relWidth+'%'} + ${otherLength})`
}
return (
"<div class='" +
cssClass +
"' style='width:" +widthLenght +";margin-left:"+n+"%'>" +
"</div>"
);
}else{
return (
`<div class='${cssClass}' style='width:${relWidth}%;margin-left:${n}%'>${objText!=undefined?objText:''}</div>`
);
}
} // 根据定义类型判断颜色顺序
gantt.templates.task_text = (start, end, task)=> {
let colorType = task.colorType
if (colorType === 'j12' || colorType === 'one') {
return (
this.renderLabel(task.progress1, 1, task.state,'progress1',0,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 3, task.state,'progress3',task.pro.cprogress1,task.ratio,task.taskStatus) // 实际
);
} else if (colorType === 'j21') {
return (
this.renderLabel(task.progress1, 1, task.state,'progress1',task.pro.cprogress1,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 1, task.state,'progress3',0,task.ratio,task.taskStatus)
);
} else if (colorType === 'b12') {
return (
this.renderLabel(task.progress1, 1, task.state,'progress1',0,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 1, task.state,'progress3',task.pro.cprogress1,task.ratio,task.taskStatus)
);
} else if (colorType === 'b21') {
return (
this.renderLabel(task.progress1, 2, task.state,'progress1',task.pro.cprogress1,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 2, task.state,'progress3',0,task.ratio,task.taskStatus)
);
} else if (colorType === 'l12') {
return (
this.renderLabel(task.progress1, 1, task.state,'progress1',0,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 3, task.state,'progress3',task.pro.cprogress1+task.pro.cprogress2,task.ratio,task.taskStatus)
);
} else if (colorType === 'l21') {
return (
this.renderLabel(task.progress1, 3, task.state,'progress1',task.pro.cprogress2+task.pro.cprogress1,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 1, task.state,'progress3',0,task.ratio,task.taskStatus)
);
} else {
return (
this.renderLabel(task.progress1, 3, task.state,'progress1',task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 3, task.state,'progress3',task.ratio,task.taskStatus)
);
}
};请假样式方法
// 请假放假情况
getLeave(){
// let year = this.year
gantt.templates.timeline_cell_class = function(task,date){
if(date.getDay()==0||date.getDay()==6){
return "weekend" ;
}
}
// axios.get(`请假url`).then(res=>{
// if(res.code===0){
let leaveList = [
{
realname:'王A',
'2022-01-20':2,
'2022-01-21':3,
'2022-01-24':4,
'2022-01-25':5,
}
]
// 请假设置
gantt.templates.timeline_cell_class = function(task,date){
if(date.getDay()==0||date.getDay()==6){
return "weekend" ;
}
// // if(self.date11){
for(let i=0;i<=leaveList.length-1;i++){
if(leaveList[i].realname === task.principal){
for(let key in leaveList[i]){
if(key!=='realname' && leaveList[i][key]!=0 && leaveList[i][key]!=1){
if(moment(date).format('YYYY-MM-DD')===key){
if(leaveList[i][key]===2){
return "weekend1" ;
}
if(leaveList[i][key]===3){
return "weekend3" ;
}
if(leaveList[i][key]===4){
return "weekend4" ;
}
if(leaveList[i][key]===5){
return "weekend5" ;
}
}
}
}
}
// // for(let j=0;j<=self.date11[i].supy.length-1;j++){
// // if(task.id===self.date11[i].id && moment(date).format('YYYY-MM-DD')===self.date11[i].supy[j]){
// // return "weekend1" ;
// // }
// // }
}
// }
};
// }else{
// // this.$message.error(res.msg)
// }
// })
}方法，数据部分
export default {
name: 'Home',
components: {
// HelloWorld
},
data(){
return{
phaseTime:'2022-02',
tasks:{
data:[]
},
date11:[],
simpleImage: '',
loading: true,
year:'2022-02',
searchMessage:{
principal:'',
projectName:'',
targetName:''
},
sortType:'', // 排序方式
showType:'projectName' //默认projectName 甘特图展现形式 负责人 principal 项目 projectName
}
},
methods:{
// 请假放假情况
getLeave(){
// let year = this.year
gantt.templates.timeline_cell_class = function(task,date){
if(date.getDay()==0||date.getDay()==6){
return "weekend" ;
}
}
// axios.get(`请假url`).then(res=>{
// if(res.code===0){
let leaveList = [
{
realname:'王A',
'2022-01-20':2,
'2022-01-21':3,
'2022-01-24':4,
'2022-01-25':5,
}
]
// 请假设置
gantt.templates.timeline_cell_class = function(task,date){
if(date.getDay()==0||date.getDay()==6){
return "weekend" ;
}
// // if(self.date11){
for(let i=0;i<=leaveList.length-1;i++){
if(leaveList[i].realname === task.principal){
for(let key in leaveList[i]){
if(key!=='realname' && leaveList[i][key]!=0 && leaveList[i][key]!=1){
if(moment(date).format('YYYY-MM-DD')===key){
if(leaveList[i][key]===2){
return "weekend1" ;
}
if(leaveList[i][key]===3){
return "weekend3" ;
}
if(leaveList[i][key]===4){
return "weekend4" ;
}
if(leaveList[i][key]===5){
return "weekend5" ;
}
}
}
}
}
// // for(let j=0;j<=self.date11[i].supy.length-1;j++){
// // if(task.id===self.date11[i].id && moment(date).format('YYYY-MM-DD')===self.date11[i].supy[j]){
// // return "weekend1" ;
// // }
// // }
}
// }
};
// }else{
// // this.$message.error(res.msg)
// }
// })
},
// 查询数据
initData() {
const self = this
// let year = self.year
// 处理数据
self.date11 =[{
id:'1',
supy:['2022-06-01','2022-06-02']
},{
id:'2',
supy:['2022-06-02','2022-06-03']
},]
this.tasks.data = []
this.loading = true
// 是按人搜索还是项目搜索
if(this.searchMessage.principal==''|| this.searchMessage.principal==null ){
this.showType = 'projectName'
}else{
this.showType = 'principal'
}
// http://10.20.11.218:5566
// axios.get(`/target/month/ganttChart?month=${year}&&principal=${self.searchMessage.principal}&&projectName=${self.searchMessage.projectName}&&targetName=${self.searchMessage.targetName}`).then(res=>{
this.loading = false
console.log(data, '000')
if(data){
let arr = data
// 假期设置
gantt.templates.scale_cell_class = function(date){
if(date.getDay()==0||date.getDay()==6){
return "weekend";
}
};
// 请假
this.getLeave()
// 处理数据
let newArr = []
// 处理数据
// 若含用户 searchMessage.principal 是用户搜索 如无 是 项目默认状态
if(this.searchMessage.principal==''|| this.searchMessage.principal==null ){
for(let i=0;i<arr.length;i++){
let obj1= this.getDate(arr[i].startDate,arr[i].endDate,null,null,1)
// 获取当月天数
let minMouth = this.year+'-01'
let StartminTime
if(moment(minMouth).format("YYYY-MM-DD")>moment(arr[i].startDate).format("YYYY-MM-DD")){
StartminTime = moment(minMouth).format("MM-DD-YYYY,00:00:00")
}else{
StartminTime = moment(arr[i].startDate).format("MM-DD-YYYY,00:00:00")
}
newArr.push({
calendar_id:"custom",
id:arr[i].id,
start_date: new Date(StartminTime),
duration:obj1.duration,
projectName:arr[i].projectName,
progress1: Math.abs(obj1.progress1),
text:arr[i].name,
planStart: arr[i].startDate,
planEnd: arr[i].endDate,
open:true
})
for(let j=0; j<arr[i].monthTargetGanttChartDOList.length;j++){
let monthList = arr[i].monthTargetGanttChartDOList[j]
// 参数 计划开始 计划结束 实际开始 实际结束 是否是父级(父级判断开始结束是否在当前月内) 状态
let obj = this.getDate(monthList.estStarted, monthList.estEndTed, monthList.realStarted, monthList.realEndTed,0,monthList.taskStatus)
gantt.addCalendar({
id:"custom", // optional
worktime: {
hours: ["8:00-17:00"],
days: [ 1, 1, 1, 1, 1, 1 ,1]
}
});
const calendar = gantt.getCalendar("custom");
calendar.setWorkTime({
date:new Date(2021,9,1),
hours:false
});
newArr.push({
id: i+1+'-'+j+1,
text: monthList.targetName,
targetName:monthList.targetName,
calendar_id:"custom",
start_date: new Date(moment(obj.minTime).format("YYYY-MM-DD,00:00:00")),
progress1: Math.abs(obj.progress1),
progress2: monthList.targetName,
progress3: Math.abs(obj.progress3),
duration: obj.duration,
projectName:monthList.projectName,
principal:monthList.principal,
taskName:monthList.taskName,
taskStatusName:monthList.taskStatusName,
taskStatus: monthList.taskStatus,
status: `<span class='${monthList.taskStatusName==='已延期'?'over':monthList.taskStatus}'>${monthList.taskStatusName}</span>`,
planStart: monthList.estStarted,
planEnd: `<span class='${monthList.taskStatusName==='已延期'?'overing':''}'>${monthList.estEndTed}</span>`,
actualStart: monthList.realStarted,
actualEnd: monthList.realEndTed,
ratio: monthList.ratio,
state: obj.state,
parent:monthList.targetId,
colorType: obj.colorType,
pro:obj.progress,
open:true
})
}
}
}else{
// 根据用户进行搜索
let userList =[]
let newBrr =[]
for(let i=0;i<arr.length;i++){
for(let j=0; j<arr[i].monthTargetGanttChartDOList.length;j++){
let monthList = arr[i].monthTargetGanttChartDOList[j]
// 统计人名
// userList.push(monthList.principal)
// newBrr 数组 estStarted
newBrr.push(monthList)
}
}
// 排序
for(var i=0;i<newBrr.length-1;i++){//确定轮数
for(var j=0;j<newBrr.length-i-1;j++){//确定每次比较的次数
if(!(moment(newBrr[j].estStarted).isBefore(newBrr[j+1].estStarted))){
let tem = JSON.parse(JSON.stringify(newBrr[j]));
newBrr[j] = JSON.parse(JSON.stringify(newBrr[j+1]));
newBrr[j+1] = JSON.parse(JSON.stringify(tem));
}
}
}
newBrr.forEach((item,index)=>{
let monthList = item
// let monthList = arr[i].monthTargetGanttChartDOList[j]
// 统计人名
userList.push(monthList.principal)
// 参数 计划开始 计划结束 实际开始 实际结束 是否是父级(父级判断开始结束是否在当前月内) 状态
let obj = this.getDate(monthList.estStarted, monthList.estEndTed, monthList.realStarted, monthList.realEndTed,0,monthList.taskStatus)
gantt.addCalendar({
id:"custom", // optional
worktime: {
hours: ["8:00-17:00"],
days: [ 1, 1, 1, 1, 1, 1 ,1]
}
});
const calendar = gantt.getCalendar("custom");
calendar.setWorkTime({
date:new Date(2021,9,1),
hours:false
});
newArr.push({
// id: i+1+'-'+j+1,
id: index+1,
text: monthList.targetName,
targetName:monthList.targetName,
calendar_id:"custom",
start_date: new Date(moment(obj.minTime).format("YYYY-MM-DD,00:00:00")), //YYYY-MM-DD,h:mm:ss
progress1: Math.abs(obj.progress1),
progress2: monthList.targetName,
progress3: Math.abs(obj.progress3),
duration: obj.duration,
projectName:monthList.projectName,
principal:monthList.principal,
taskName:monthList.taskName,
taskStatusName:monthList.taskStatusName,
taskStatus: monthList.taskStatus,
status: `<span class='${monthList.taskStatusName==='已延期'?'over':monthList.taskStatus}'>${monthList.taskStatusName}</span>`,
planStart: monthList.estStarted,
planEnd: `<span class='${monthList.taskStatusName==='已延期'?'overing':''}'>${monthList.estEndTed}</span>`,
actualStart: monthList.realStarted,
actualEnd: monthList.realEndTed,
ratio: monthList.ratio,
state: obj.state,
parent:monthList.principal,
colorType: obj.colorType,
pro:obj.progress,
open:true
})
let newUserList = new Set(userList)
newUserList.forEach(value=>{
// 添加父级
newArr.push({
calendar_id:"custom",
id:value,
principal:value,
open:true
})
})
})
}
this.tasks.data = newArr
if(this.tasks.data.length>0){
this.getGantt()
}
}else{
// this.$message.error(res.msg)
// this.loading = true
}
// })
},
// 处理百分比
percenToString(num) {
return Math.floor(num * 100) + "%";
},
// 设置每一部分的颜色
renderLabel(progress, type, state,val,num,objText,status) {
// progress, type, state,val实际还是计划,num,objText完成度,status状态
// const self =this
let hour = moment().format("k");
var relWidth = progress * 100;
var n=num*100
var cssClass = "custom_progress ";
let otherLength = '0px' // 额外长度
// let doingLenght = 34
// 实际
if(val==='progress3'){
if(status === 'doing'){
if(objText==='100%'){
cssClass += "nearly_done1";
otherLength = '34px'
}else{
cssClass += "near_done1"
if(Number(hour)<8){
otherLength = '0px'
}else if(Number(hour)>=8 && Number(hour)<18){
let num=34*(Number(hour) -8)/8
otherLength = num+'px'
}else{
otherLength = '34px'
}
}
}else{
if (type === 1) {
cssClass += "nearly_done1";
} else if (type === 2) {
if (state) {
cssClass += "in_progress1";
} else {
cssClass += "in_progress_w1";
}
} else {
cssClass += "idle1";
}
}
}else{
if (type === 1) {
cssClass += "nearly_done";
} else if (type === 2) {
if (state) {
cssClass += "in_progress";
} else {
cssClass += "in_progress_w";
}
} else {
cssClass += "idle";
}
}
if(val==='progress3'){
let widthLenght
if(status === 'doing'){
widthLenght = `calc(${relWidth+'%'} + ${otherLength} - 34px)`
}else{
widthLenght = `calc(${relWidth+'%'} + ${otherLength})`
}
return (
"<div class='" +
cssClass +
"' style='width:" +widthLenght +";margin-left:"+n+"%'>" +
"</div>"
);
}else{
return (
`<div class='${cssClass}' style='width:${relWidth}%;margin-left:${n}%'>${objText!=undefined?objText:''}</div>`
);
}
},
// gantt配置
getGantt(){
const self = this
gantt.clearAll();
gantt.config.show_progress = true;
gantt.config.initial_scroll = false;
// 根据定义类型判断颜色顺序
gantt.templates.task_text = (start, end, task)=> {
let colorType = task.colorType
if (colorType === 'j12' || colorType === 'one') {
return (
this.renderLabel(task.progress1, 1, task.state,'progress1',0,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 3, task.state,'progress3',task.pro.cprogress1,task.ratio,task.taskStatus) // 实际
);
} else if (colorType === 'j21') {
return (
this.renderLabel(task.progress1, 1, task.state,'progress1',task.pro.cprogress1,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 1, task.state,'progress3',0,task.ratio,task.taskStatus)
);
} else if (colorType === 'b12') {
return (
this.renderLabel(task.progress1, 1, task.state,'progress1',0,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 1, task.state,'progress3',task.pro.cprogress1,task.ratio,task.taskStatus)
);
} else if (colorType === 'b21') {
return (
this.renderLabel(task.progress1, 2, task.state,'progress1',task.pro.cprogress1,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 2, task.state,'progress3',0,task.ratio,task.taskStatus)
);
} else if (colorType === 'l12') {
return (
this.renderLabel(task.progress1, 1, task.state,'progress1',0,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 3, task.state,'progress3',task.pro.cprogress1+task.pro.cprogress2,task.ratio,task.taskStatus)
);
} else if (colorType === 'l21') {
return (
this.renderLabel(task.progress1, 3, task.state,'progress1',task.pro.cprogress2+task.pro.cprogress1,task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 1, task.state,'progress3',0,task.ratio,task.taskStatus)
);
} else {
return (
this.renderLabel(task.progress1, 3, task.state,'progress1',task.ratio) +
// renderLabel(task.progress2, 2, task.state) +
this.renderLabel(task.progress3, 3, task.state,'progress3',task.ratio,task.taskStatus)
);
}
};
gantt.plugins({ marker: true, tooltip: true }); // 开启marker插件
var dateToStr = gantt.date.date_to_str(gantt.config.task_date);
var today = new Date(moment(new Date()).format('YYYY-MM-DD 12:00:00'));
// 添加固定时间线
gantt.addMarker({
start_date: today,
css: 'today',
text: '今日:' + moment(new Date()).format('YYYY-MM-DD'),
title: 'Today: ' + dateToStr(today)
});
// 提示框内容
gantt.templates.tooltip_text = function(start, end, task){
return (task.principal?`<b>责任人:${task.principal}</b><br/>`:'')+
(task.text?`<b>阶段目标:${task.text}</b>`:'')+
(task.projectName?`<br/><b>所属项目:${task.projectName}</b>`:'')+
(task.taskName?`<br/><b>任务内容:${task.taskName}</b>`:'')+
(task.planStart?`<br/><b>计划开始:</b>${task.planStart}`:'') +
(task.planEnd?`<b style="margin-left:16px;margin-right:12px;">计划结束:</b>${task.planEnd}`:'') +
(task.actualStart?`<br/><b>实际开始:</b>${task.actualStart}`:'') +
(task.actualEnd?`<b style="margin-left:16px;margin-right:12px;">实际结束:</b>${task.actualEnd}`:'')
};
// 渲染甘特图后触发
gantt.attachEvent("onGanttRender", function(){
gantt.showDate(new Date());
// 绑定计划目标
// document.getElementById('text-title').addEventListener("click",()=>{
// // alert("Gantt chart is completely rendered on the page...")
// })
// self.outOrNo()
});
// 工期计算基本单位
gantt.config.duration_unit = "day"
// 设置x轴日期
gantt.config.scale_unit = "day";
gantt.config.step = 1;
gantt.config.date_scale = "%d";
gantt.config.min_column_width = 34
// 当右侧不止显示年份时，可以添加展示月日，添加一个就加一行
gantt.config.subscales = [
{ unit: "month", step: 1, date: "%m" },
];
//甘特图右侧表头的高度
gantt.config.scale_height = 60;
//使用中文
gantt.i18n.setLocale("cn");
//自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
gantt.config.autosize = false;
//只读模式
gantt.config.readonly = true;
// 调节网格宽度
// gantt.config.grid_width = 400;
// gantt.config.resize_rows = true;
// gantt.config.grid_resize =true
// 显示网格
gantt.config.show_grid = true;
// gantt.config.grid_resize = true;
// 点击表格可排序
// gantt.config.sort = true
//表格列设置
if(self.showType==='projectName' ){
gantt.config.columns = [
{ name: "text",tree:true, resize:true, label: "<span id='text-title'>目标</span>", width: 210, align: "left" },
{ name: "projectName", resize:true, label: "<span id='projectName-title'>项目</span>", width: 190, align: "left" },
{ name: "principal", resize:true, label: "<span id='principal-title'>负责人</span>", width: 70, align: "center" },
{ name: "taskName", resize:true, label: "任务", width: 100, align: "center" },
{ name: "planStart", resize:true, label: "计划开始", width: 80, align: "center" },
{ name: "planEnd", resize:true, label: "计划结束", width: 80, align: "center" },
// { name: "actualStart", resize:true, label: "实际开始", width: 80, align: "center" },
// { name: "actualEnd", resize:true, label: "实际结束", width: 80, align: "center" },
{ name: "status", resize:true, label: "状态", width: 60, align: "center" },
{ name: "ratio", resize:true, label: "完成度", width: 50, align: "center" },
];
}else{
gantt.config.columns = [
{ name: "principal",tree:true, resize:true, label: "<span id='principal-title'>负责人</span>", width: 120, align: "center" },
{ name: "text", resize:true, label: "<span id='text-title'>目标</span>", width: 180, align: "left" },
{ name: "projectName", resize:true, label: "<span id='projectName-title'>项目</span>", width: 160, align: "left" },
{ name: "taskName", resize:true, label: "任务", width: 100, align: "center" },
{ name: "planStart", resize:true, label: "计划开始", width: 80, align: "center" },
{ name: "planEnd", resize:true, label: "计划结束", width: 80, align: "center" },
// { name: "actualStart", resize:true, label: "实际开始", width: 80, align: "center" },
// { name: "actualEnd", resize:true, label: "实际结束", width: 80, align: "center" },
{ name: "status", resize:true, label: "状态", width: 60, align: "center" },
{ name: "ratio", resize:true, label: "完成度", width: 60, align: "center" },
];
}
gantt.templates.grid_folder = function(item) {
return "<div class='gantt_tree_icon gantt_folder_" +
(item.$open ? "open" : "closed") + "'></div>";
};
gantt.config.work_time = true;
//任务条上的文字大小 以及取消border自带样式
gantt.templates.task_class = function() {
return "firstLevelTask"
};
// 初始化
this.$nextTick(()=>{
gantt.init(self.$refs.dxgantt);
})
// gantt.init(self.$refs.dxgantt);
// 数据解析
gantt.parse(this.tasks);
gantt.render()
// if(document.querySelectorAll('.weekend1').length>0){
// document.querySelectorAll('.weekend1')[0].innerHTML = '请假'
// }
},
//
// 时间计算 ,status
getDate(Atime, Btime, Ctime, Dtime,n) {
let obj = {};
let minTime
let maxTime
let duration
let progress1 = 0;
let progress3 = 0;
let cprogress1 = 0;
let cprogress2 = 0;
let cprogress3 = 0;
let state = true;
let colorType = true;
// 获取当月天数
let maxMouth = this.year+'-'+moment(this.year, "YYYY-MM").daysInMonth()
let minMouth = this.year+'-01'
if(Ctime===null && Dtime===null){
// 未开始 或者 项目分类
if(n===1){
if(moment(maxMouth).format("YYYY-MM-DD")<moment(Btime).format("YYYY-MM-DD")){
maxTime = moment(maxMouth).add(1,'days').format("YYYY-MM-DD,00:00:00")
}else{
maxTime = moment(Btime).add(1,'days').format("YYYY-MM-DD,00:00:00")
}
if(moment(minMouth).format("YYYY-MM-DD")>moment(Atime).format("YYYY-MM-DD")){
minTime = moment(minMouth).format("YYYY-MM-DD,00:00:00")
}else{
minTime = moment(Atime).format("YYYY-MM-DD,00:00:00")
}
}else{
// 未开始
maxTime = moment(Btime).add(1,'days').format("YYYY-MM-DD,00:00:00")
minTime = moment(Atime).format("YYYY-MM-DD,00:00:00")
}
duration = this.difference(minTime, maxTime);
progress1 = 1
progress3 = 0
cprogress1 = 1
cprogress2 = 0
cprogress3 = 0
colorType = 'j12'
}else{
// 已结束 或 正在进行中
let cAtime = moment(Atime).format("YYYY-MM-DD,00:00:00")
let cBtime = moment(Btime).add(1,'days').format("YYYY-MM-DD,00:00:00")
let cCtime = moment(Ctime).format("YYYY-MM-DD,00:00:00")
let cDtime
if(Dtime==null){
// 正在进行中 .add(1,'days')
cDtime = moment(new Date()).add(1,'days').format("YYYY-MM-DD,00:00:00")
}else{
// 已结束 或 已完成
cDtime = moment(Dtime).add(1,'days').format("YYYY-MM-DD,00:00:00")
}
let arr = [cAtime, cBtime, cCtime, cDtime];
let timeArr = [];
arr.forEach((item) => {
timeArr.push(new Date(item));
});
minTime = moment(Math.min(...timeArr)).format("MM-DD-YYYY");
maxTime = moment(Math.max(...timeArr)).format("YYYY-MM-DD");
duration = this.difference(minTime, maxTime);
progress1 = (this.difference(cAtime, cBtime) / duration)
progress3 = (this.difference(cCtime, cDtime) / duration)
if (cAtime < cCtime && cCtime < cBtime && cBtime < cDtime) {
// console.log('12相交')
colorType = 'j12'
cprogress2 = (this.difference(cCtime, cBtime) / duration)
cprogress1 = (this.difference(cAtime, cCtime) / duration)
cprogress3 = (this.difference(cBtime, cDtime) / duration)
} else if (cBtime > cCtime && cBtime >= cDtime && cCtime >= cAtime && cDtime > cAtime) {
// console.log('1包含2')
colorType = 'b12'
state = true
cprogress2 = (this.difference(cCtime, cDtime) / duration)
cprogress1 = (this.difference(cAtime, cCtime) / duration)
cprogress3 = (this.difference(cDtime, cBtime) / duration)
} else if (cDtime >= cBtime && cDtime > cAtime && cAtime >= cCtime && cBtime > cCtime) {
// console.log('2包含1')
colorType = 'b21'
state = true
cprogress2 = (this.difference(cAtime, cBtime) / duration)
cprogress1 = (this.difference(cCtime, cAtime) / duration)
cprogress3 = (this.difference(cBtime, cDtime) / duration)
} else if (cBtime > cDtime && cDtime > cAtime && cAtime > cCtime) {
// console.log('21相交')
colorType = 'j21'
state = true
cprogress2 = (this.difference(cAtime, cDtime) / duration)
cprogress1 = (this.difference(cCtime, cAtime) / duration)
cprogress3 = (this.difference(cDtime, cBtime) / duration)
} else if (cBtime <= cCtime) {
// console.log('12相离')
colorType = 'l12'
state = false
cprogress2 = (this.difference(cBtime, cCtime) / duration)
cprogress1 = (this.difference(cAtime, cBtime) / duration)
cprogress3 = (this.difference(cCtime, cDtime) / duration)
} else if (cDtime <= cAtime) {
// console.log('21相离')
colorType = 'l21'
state = false
cprogress2 = (this.difference(cDtime, cAtime) / duration)
cprogress3 = (this.difference(cAtime, cBtime) / duration)
cprogress1 = (this.difference(cCtime, cDtime) / duration)
} else {
colorType = 'one'
console.log('状态错误')
}
}
obj = {
state: state,
minTime: minTime,
// maxTime: maxTime
duration: duration * 1,
progress1: progress1 * 1,
// progress2: progress2 * 1,
progress: {
cprogress1:cprogress1 * 1,
cprogress2:cprogress2 * 1,
cprogress3:cprogress3 * 1,
},
progress3: progress3 * 1,
colorType: colorType,
};
return obj;
},
// 计算时间差
difference(beginTime, endTime) {
var dateBegin = new Date(beginTime);
var dateEnd = new Date(endTime);
var dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)); //计算出相差天数
return dayDiff;
},
// 搜索
onSearch(msg){
if(msg){
this.searchMessage = JSON.parse(JSON.stringify(msg))
}
this.initData()
},
// 重置
onResert(){
this.searchMessage ={
principal:'',
projectName:'',
targetName:''
}
this.showType = 'projectName'
this.initData()
}
},
activated(){
this.initData()
},
mounted () {
this.initData()
}
}最后是样式部分
<style lang="less">
.about{
height: 500px;
width: 100%;
background: #00000038;
}
.spin{
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.type-check{
position: absolute;
top: 10px;
right: 63px;
display: flex;
align-items: center;
flex-direction: row;
span{
font-size: 14px;
font-weight: bold;
line-height: 25px;
margin-right: 8px;
}
}
#dhtmlgantt {
width: 100%;
height: 100%;
padding: 0px 1% 20px 1%;
background: #efefef;
.gantt{
width: 100%;
min-height: 103%;
height: auto;
background: #fff;
/*margin-top: 20px;*/
border-radius: 2px;
// display: flex;
// justify-content: center;
// align-items: center;
// padding-top: 12px;
.gantt_title{
font-size: 14px;
font-weight: bold;
color: #3c4353;
margin-left: 20px;
}
.gantt_render{
position: relative;
width: 97%;
height: 90%;
/*margin-top: 12px;*/
margin-left: 20px;
}
.simpleImage{
margin-top: 140px;
}
.a-spin{
margin-top: 240px;
}
}
}
.legend {
padding: 5px 16px 10px 22px;
display: flex;
.legendBox {
display: flex;
align-items: center;
margin-right: 20px;
.legendSml {
width: 30px;
height: 16px;
border-radius: 5px;
margin-right: 4px;
}
.legendColor1 {
border-radius: 16px;
border: 1px dashed #035faf;
background-color: #0086fb36 !important;
}
.legendColor2 {
background: #01bd1a;
}
.legendColor3 {
border-radius: 16px;
background-color: #80c0f7 !important;
}
}
}
.gantt_task_content {
display: flex;
align-items: center;
}
.gantt_task_line {
background: #fff;
}
.custom_progress {
display: inline-block;
vertical-align: top;
text-align: center;
height: 100%;
}
.nearly_done1 {
height: 80%;
border-radius: 16px;
background-color: #80c0f7 !important;
}
// 正在进行时
.near_done1{
height: 80%;
// border-radius: 16px;
border-bottom-left-radius: 16px;
border-top-left-radius: 16px;
background-color: #80c0f7 !important;
}
.nearly_done{
height: 80%;
position: absolute;
border-radius: 16px;
border: 1px dashed #035faf;
background-color: #0086fb36 !important;
}
.in_progress1 {
height: 80%;
border-radius: 16px;
// border-bottom-left-radius: 16px;
// border-top-left-radius: 16px;
background-color: #80c0f7 !important;
}
.in_progress {
height: 80%;
position: absolute;
border-radius: 16px;
border: 1px dashed #035faf;
background-color: #0086fb36 !important;
}
.in_progress_w1 {
height: 80%;
border-radius: 16px;
background-color: #80c0f7 !important;
}
.in_progress_w {
height: 80%;
position: absolute;
border-radius: 16px;
border: 1px dashed #035faf;
background-color: #0086fb36 !important;
}
.idle1 {
height: 80%;
border-radius: 16px;
background-color: #80c0f7 !important;
}
.idle {
height: 80%;
position: absolute;
border-radius: 16px;
border: 1px dashed #035faf;
background-color: #0086fb36 !important;
}
.firstLevelTask {
border: none;
}
.secondLevelTask {
border: none;
}
// 修改
.left-container {
height: 656px;
}
.weekend{ background: #c9c9c9bf !important;}
.weekend1{
z-index: 999;
background: #ffa01165 !important;
// border-radius: 30px;
}
.weekend3{
z-index: 999;
background: #68ff1149 !important;
// border-radius: 30px;
}
.weekend4{
z-index: 999;
background: #20d2ff52 !important;
// border-radius: 30px;
}
.weekend5{
z-index: 999;
background: #b411ff56 !important;
// border-radius: 30px;
}
.weekend1::before{
content: ' ';
display: inline-block;
height: 22px;
width: 22px;
background: url(./img/leave2.png) no-repeat;
background-size: 22px;
vertical-align: top;
padding-right: 10px;
}
.weekend3::before{
content: ' ';
display: inline-block;
height: 22px;
width: 22px;
background: url(./img/leave3.png) no-repeat;
background-size: 22px;
vertical-align: top;
padding-right: 10px;
}
.weekend4::before{
content: ' ';
display: inline-block;
height: 22px;
width: 22px;
background: url(./img/leave4.png) no-repeat;
background-size: 22px;
vertical-align: top;
padding-right: 10px;
}
.weekend5::before{
content: ' ';
display: inline-block;
height: 22px;
width: 22px;
background: url(./img/leave5.png) no-repeat;
background-size: 22px;
vertical-align: top;
padding-right: 10px;
}
.waring{
display: flex;
align-items: center;
font-size: 14px;
.waring-text{
display: flex;
align-items: center;
margin-left: 12px;
}
}
.waring1{
display: flex;
align-items: center;
}
.gantt_grid_scale .gantt_grid_head_cell {
color: #a6a6a6;
// border-top: 1px solid #cecece !important;
// border-right: 1px solid #cecece!important;
border: 1px solid #cecece!important;
}
.gantt_tree_content {
overflow: hidden;
height: 100%;
white-space: nowrap;
text-overflow: ellipsis;
min-width: 0;
}
// 进行中 doing 已完成 done 已暂停 pause 未开始 wait 已关闭 closed
.doing{
padding: 4px 4px;
color: #0086fba8;
background: #bbefff9c;
border:1px solid #93d2fa;
border-radius: 4px;
font-size: 12px;
}
.done{
padding: 4px 4px;
color: #52c41a;
background: #f6ffed;
border:1px solid #b7eb8f;
border-radius: 4px;
font-size: 12px;
}
.pause{
padding: 4px 4px;
color: #fa8c16;
background: #fff7e6;
border:1px solid #ffd591;
border-radius: 4px;
font-size: 12px;
}
.wait{
padding: 4px 4px;
color: #0a07b3;
background: #c5c4ff;
border:1px solid #8a88ff;
border-radius: 4px;
font-size: 12px;
}
.closed{
padding: 4px 4px;
color: rgb(107, 105, 105);
background: #fafafa;
border:1px solid #d9d9d9;
border-radius: 4px;
font-size: 12px;
}
.over{
padding: 4px 4px;
color: #f5222d;
background: #fff1f0;
border:1px solid #ffa39e;
border-radius: 4px;
font-size: 12px;
}
.overing{
color: #f5222d;
}
.gantt_file{
display: none !important;
}
</style>最后我在贴上自己使用的数据部分data.js
const data=[
{
"id": "id1234w",
"name": "任务1",
"projectName": "项目1",
"startDate": "2022-01-01",
"endDate": "2022-06-30",
"monthTargetGanttChartDOList": [
{
"targetId": "id1234w",
"targetName": "任务1",
"projectName": "项目1",
"principal": "王A",
"taskName": "任务12",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-06",
"realStarted": "2022-01-10",
"estEndTed": "2022-01-14",
"realEndTed": "2022-01-11",
"taskStatusName": "已关闭",
"lastEditedDate": "2022-01-20",
"ratio": "100%",
"taskStatus": "closed"
},
{
"targetId": "id1234w",
"targetName": "任务1",
"projectName": "项目1",
"principal": "王A",
"taskName": "任务123",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-12",
"realStarted": "2022-01-13",
"estEndTed": "2022-01-14",
"realEndTed": "2022-01-13",
"taskStatusName": "已关闭",
"lastEditedDate": "2022-01-20",
"ratio": "100%",
"taskStatus": "closed"
},
{
"targetId": "id1234w",
"targetName": "任务1",
"projectName": "项目1",
"principal": "王A",
"taskName": "任务124",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-12",
"realStarted": "2022-01-12",
"estEndTed": "2022-01-14",
"realEndTed": "2022-01-14",
"taskStatusName": "已关闭",
"lastEditedDate": "2022-01-20",
"ratio": "100%",
"taskStatus": "closed"
}
]
},
{
"id": "id1234w3",
"name": "任務1",
"projectName": "項目2",
"startDate": "2022-01-01",
"endDate": "2022-12-31",
"monthTargetGanttChartDOList": [
{
"targetId": "id1234w3",
"targetName": "任務1",
"projectName": "項目2",
"principal": "王A",
"taskName": "任务22",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-04",
"realStarted": "2022-01-11",
"estEndTed": "2022-01-14",
"realEndTed": "2022-01-14",
"taskStatusName": "已完成",
"lastEditedDate": "2022-01-21",
"ratio": "100%",
"taskStatus": "done"
},
{
"targetId": "id1234w3",
"targetName": "任務1",
"projectName": "項目2",
"principal": "王A",
"taskName": "任务223",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-04",
"realStarted": "2022-01-04",
"estEndTed": "2022-01-07",
"realEndTed": "2022-01-14",
"taskStatusName": "已完成",
"lastEditedDate": "2022-01-21",
"ratio": "100%",
"taskStatus": "done"
},
{
"targetId": "id1234w3",
"targetName": "任務1",
"projectName": "項目2",
"principal": "王A",
"taskName": "任务224",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-04",
"realStarted": "2022-01-03",
"estEndTed": "2022-01-06",
"realEndTed": "2022-01-17",
"taskStatusName": "已完成",
"lastEditedDate": "2022-01-21",
"ratio": "100%",
"taskStatus": "done"
}
]
},
{
"id": "id1234w34",
"name": "任務3",
"projectName": "项目3",
"startDate": "2022-01-03",
"endDate": "2022-01-28",
"monthTargetGanttChartDOList": [
{
"targetId": "id1234w34",
"targetName": "任務3",
"projectName": "项目3",
"principal": "王A",
"taskName": "任务31",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-03",
"realStarted": "2022-01-03",
"estEndTed": "2022-01-11",
"realEndTed": "2022-03-24",
"taskStatusName": "已关闭",
"lastEditedDate": "2022-03-24",
"ratio": "100%",
"taskStatus": "closed"
}
]
},
{
"id": "id1234w35",
"name": "任务4",
"projectName": "项目4",
"startDate": "2022-01-04",
"endDate": "2022-01-31",
"monthTargetGanttChartDOList": [
{
"targetId": "id1234w35",
"targetName": "任务4",
"projectName": "项目4",
"principal": "王A",
"taskName": "任务32",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-04",
"realStarted": "2022-01-06",
"estEndTed": "2022-01-05",
"realEndTed": "2022-01-06",
"taskStatusName": "已关闭",
"lastEditedDate": "2022-01-20",
"ratio": "100%",
"taskStatus": "closed"
},
{
"targetId": "id1234w35",
"targetName": "任务4",
"projectName": "项目4",
"principal": "王A",
"taskName": "任务33",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-10",
"realStarted": "2022-01-12",
"estEndTed": "2022-01-14",
"realEndTed": "2022-01-18",
"taskStatusName": "已完成",
"lastEditedDate": "2022-01-20",
"ratio": "100%",
"taskStatus": "done"
},
{
"targetId": "id1234w35",
"targetName": "任务4",
"projectName": "项目4",
"principal": "王A",
"taskName": "任务34",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-11",
"realStarted": "2022-01-11",
"estEndTed": "2022-01-12",
"realEndTed": "2022-01-14",
"taskStatusName": "已关闭",
"lastEditedDate": "2022-01-20",
"ratio": "100%",
"taskStatus": "closed"
},
{
"targetId": "id1234w35",
"targetName": "任务4",
"projectName": "项目4",
"principal": "王A",
"taskName": "任务35",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-11",
"realStarted": "2022-01-12",
"estEndTed": "2022-01-18",
"realEndTed": "2022-01-20",
"taskStatusName": "已完成",
"lastEditedDate": "2022-01-20",
"ratio": "100%",
"taskStatus": "done"
},
{
"targetId": "id1234w35",
"targetName": "任务4",
"projectName": "项目4",
"principal": "王A",
"taskName": "任务36",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-17",
"realStarted": "2022-01-18",
"estEndTed": "2022-01-18",
"realEndTed": "2022-01-18",
"taskStatusName": "已完成",
"lastEditedDate": "2022-01-20",
"ratio": "100%",
"taskStatus": "done"
},
{
"targetId": "id1234w35",
"targetName": "任务4",
"projectName": "项目4",
"principal": "王A",
"taskName": "任务37",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-17",
"realStarted": "2022-01-19",
"estEndTed": "2022-01-20",
"realEndTed": "2022-01-20",
"taskStatusName": "已完成",
"lastEditedDate": "2022-01-20",
"ratio": "100%",
"taskStatus": "done"
},
{
"targetId": "id1234w35",
"targetName": "任务4",
"projectName": "项目4",
"principal": "王A",
"taskName": "任务38",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-19",
"realStarted": "2022-01-19",
"estEndTed": "2022-01-21",
"realEndTed": "2022-01-21",
"taskStatusName": "已完成",
"lastEditedDate": "2022-01-25",
"ratio": "100%",
"taskStatus": "done"
},
{
"targetId": "id1234w35",
"targetName": "任务4",
"projectName": "项目4",
"principal": "王A",
"taskName": "任务39",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-25",
"realStarted": "2022-01-27",
"estEndTed": "2022-01-27",
"realEndTed": "2022-01-27",
"taskStatusName": "已完成",
"lastEditedDate": "2022-01-27",
"ratio": "100%",
"taskStatus": "done"
},
{
"targetId": "id1234w35",
"targetName": "任务4",
"projectName": "项目4",
"principal": "王A",
"taskName": "任务40",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-25",
"realStarted": "2022-01-22",
"estEndTed": "2022-01-27",
"realEndTed": "2022-01-22",
"taskStatusName": "已完成",
"lastEditedDate": "2022-01-22",
"ratio": "100%",
"taskStatus": "done"
},
{
"targetId": "id1234w35",
"targetName": "任务4",
"projectName": "项目4",
"principal": "王A",
"taskName": "任务51",
"freeTime": "",
"anomalyMarker": "",
"estWork": "",
"realWork": "",
"estStarted": "2022-01-25",
"realStarted": "2022-01-22",
"estEndTed": "2022-01-27",
// "realEndTed": "",
"taskStatusName": "已暂停",
"lastEditedDate": "2022-01-22",
"ratio": "100%",
"taskStatus": "pause"
}
]
}
]
export { data }一个甘特图就完成啦