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

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

实现简单的表格

两个样式

 .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;
    }

实现方法

 // 渲染表格头，首先是年月，如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);           // 表格上方的<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>和日期
    this.getYe<a href="/tag/ara/" target="_blank" class="keywords">ara</a>rr(dateArr);                   //<a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>并拼接我们需要的年月信息。
    var allYe<a href="/tag/ara/" target="_blank" class="keywords">ara</a>rr = this.getYe<a href="/tag/ara/" target="_blank" class="keywords">ara</a>rr(dateArr);

    var allMonths = []'
    for(var i = 0; i < allYe<a href="/tag/ara/" target="_blank" class="keywords">ara</a>rr.length; i++){
        for(var j = 0; j < allYe<a href="/tag/ara/" target="_blank" class="keywords">ara</a>rr[i]/days.length; j++){
            allMonths.push(allYe<a href="/tag/ara/" target="_blank" class="keywords">ara</a>rr[i].days[j]);
        }
    }
    this.showMonths = allMonths;        // 渲染表格上部的<a href="/tag/biaoti/" target="_blank" class="keywords">标题</a>

}

// <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>时间数组的<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
getAll(begin,end){          // 开始时间和结束时间有不存在的
    if(!begin || !end){
        return false;
    }
    // <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>两个日期之<a href="/tag/jiande/" target="_blank" class="keywords">间的</a>所有日期
    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;
}

// <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>我们需要的格式的年月日信息
getYe<a href="/tag/ara/" target="_blank" class="keywords">ara</a>rr(dateArr){
    // <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>我们需要格式的年月信息
    var ye<a href="/tag/ara/" target="_blank" class="keywords">ara</a>rr = [];
    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;

}
// <a href="/tag/huoqu/" target="_blank" class="keywords">获取</a>月的最后一天
getLastDay(myyear,mymonth){
    var new_date = new Date(myyear,mymonth,0);
    return new_date.getDate();
}

缺点：日期范围不能过大，不然表格加载缓慢！！！

作者：rookie.he（kuke_kuke）博客链接：nofollow">http://blog.csdn.net/qq_33599109 欢迎关注支持，谢谢！

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

相关推荐