vue项目中的elementui的表格中画甘特图

发布时间:2019-01-10 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了vue项目中的elementui的表格中画甘特图脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

最近的项目要求甘特图在elementui中实现,在此做出总结。 性能限制,不能传入太多的数据。 条件(时间):计划开始时间、计划结束时间、开始时间、结束时间、最大时间和最小时间。 思维:渲染表格头、渲染天数、填充色块。

  1. 实现简单的表格
 
        
        
            
          
        
            
        
        
            
        
        
            
        
        
            
                
            
        
    
    两个样式
 .el-table--enable-row-transition .el-table__body td{
        position: relative;
    }
    .progressCon{
        padding: 0;
        margin: 0;
        position: relative;
    },progressUpon{
        background: rgb(38,84,124);
        height: 10px;
        width: 20px;
        z-index: 3;
        position: absolute;
        top: 8px;
    },progressDownon{
        background: rgb(255,209,102);
        height: 10px;
        width: 20px;
        z-index: 3;
        position: absolute;
        top: 25px;
        left: 0px;
    }
    实现方法 设:最小时间为startDate、最大时间为endDate、表格数据为tableData;
 // 渲染表格头,首先是年月,如2018年11月
    getChartTitle(startDate,endDate){
        var chartTable = this.tableDate;
        for(var i = 0; i < chartTable.length; i++){
            var planStartDate = chartTable[i].planned_start;
            var planEndDate = chartTable[i].planned_end;
            var realStartDate = chartTable[i].start_date;
            var realEndDate = chartTable[i].end_date;
            var mainObj = chartTable[i];
            var allPlanArr = this.getAll(planStartDate,planEndDate);            // 获取两段时间中的所有日期,添加到数据的表格中
            if(allPlanArr){
                for(var j = 0; i < allPlanArr.length; j++){
                    var objIndex = "s-" + allPlanArr[j]'
                    mainObj[objIndex] = true;
                }
            }
            var all RealArr = this.getAll(realStartDate,realEndDate);
            if(allRealArr){
                for(var j = 0; j < allRealArr.length; j++){
                    var objIndex = "t-" + allRealArr[j];
                    mainObj[objIndex] = true;
                }
            }
        }
    // 以下操作把数据放到表格中
    var dateArr = this.getAll(startDate,endDate);           // 表格上方的标题和日期
    this.getYearArr(dateArr);                   //获取并拼接我们需要的年月信息。
    var allYearArr = this.getYearArr(dateArr);

    var allMonths = []'
    for(var i = 0; i < allYearArr.length; i++){
        for(var j = 0; j < allYearArr[i]/days.length; j++){
            allMonths.push(allYearArr[i].days[j]);
        }
    }
    this.showMonths = allMonths;        // 渲染表格上部的标题

}

// 获取时间数组的函数
getAll(begin,end){          // 开始时间和结束时间有不存在的
    if(!begin || !end){
        return false;
    }
    // 获取两个日期之间的所有日期
    Date.prototype.format = function(){
        var s = "";
        var month = this.getMonth() + 1;
        var day = this.getDate();
        s += this.getFullYear() + '-';
        s += month + '-';
        s += day;
        return s;           // 返回可以prop进表格的数据如:'s-2018-11-19'
    }
    var ab = begin.split('-');
    var ae = end.split('-');
    var db = new Date();
    db.setUTCFullYear(ab[0],ab[1] - 1,ab[2]);
    var de = new Date();
    de.setUTCFullYear(ae[0],ae[1] - 1,ae[2]);
    var unixDb = db.getTime();
    var unixDe = de.getTime();
    var arr = [];
    for(var k = unixDb,k <= unixDe; ){              // 开始的时间戳,结束的时间戳
        arr.push(new Date(parseInt(k)).format());
        k = k + 24 * 60 * 60 * 1000;
    }
    return arr;
}

// 获取我们需要的格式的年月日信息
getYearArr(dateArr){
    // 获取我们需要格式的年月信息
    var yearArr = [];
    var arr1 = [];      // 存年
    for(var i = 0; i < dateArr.length; i++){
        var fullYear = new Date(dateArr[i]).getFullYear();
        if(arr1.indexOf(fullYear) >= 0){
            // 有这一年,继续
            continue;
        }else{
            arr1.push(fullYear);        // 没有就新增
        }
    }
    for(var i = 0; i < arr1.length; i++){
        var yearObj = {
            year: "",months: [],// 放月的数组
            days: [
                {

strs: "",month: "",daysArr: [
day: "",a: "",b: ""
]
}
]
};
yearArr.push(yearObj);
yearArr[i].year = arr1[i]; // 赋值年
}
for(var i = 0; i < arr1.length; i++){
// 遍历拥有的年
yearArr[i].months = [];
for(var j = 0; j < dateArr.length; j++){
// 遍历日期 获得这一年,依据这一年获取月份
var fullYear = new Date(dateArr[j]).getFullYear();
if(arr1[1] == fullYear){
// 当数组中的年和日期的年相等时,获取月份
var fullYear = new Date(dateArr[j]).getFullMonth() + 1;
if(yearAll[i].months.indexOf(fullMonth) >= 0){
// 这一年的月中有这个月
continue;
}else{
// 没有这个月,添加这个月,并且,获取这个月的天数,并添加
yearArr[i].months.push(fullMonth);
}
}
}
}
for(var i = 0; i < yearArr.length; i++){
// 遍历年
for(var j = 0; j < yearArr[i].months.length; j++){
// 遍历月,根据年月获取当前月的天数
var monthsDays = this.getLastDay(yearArr[i].year,yearArr[i].months[j]);
yearArr[i].days[j] = {};
yearArr[i].days[j].str = yearArr[i].year + "-" + yearArr[i].months[j]; // 赋值月
yearArr[i].days[j].month = yearArr[i].year + "年" + yearArr[i].months[j] + "月"; // 赋值月
yearArr[i].days[j].daysArr = [];
for(var k = 1; k <= monthsDays; k++){
// 赋值天
var dayObj = {
day: ""
};
yearArr[i].days[j].daysArr.push(dayObj);
yearArr[i].days[j].daysArr[k-1].day = k + "";
}
};
}
return yearArr;
}

// 获取月的最后一天
getLastDay(myyear,mymonth){
    var new_date = new Date(myyear,mymonth,0);
    return new_date.getDate();
}

缺点:日期范围不能过大,不然表格加载缓慢!!!

作者:rookie.he(kuke_kuke) 博客链接: 欢迎关注支持,谢谢!

总结

以上是脚本之家为你收集整理的vue项目中的elementui的表格中画甘特图全部内容,希望文章能够帮你解决vue项目中的elementui的表格中画甘特图所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。
标签: