最近的项目要求甘特图在elementui中实现,在此做出总结。
性能限制,不能传入太多的数据。
条件(时间):计划开始时间、计划结束时间、开始时间、结束时间、最大时间和最小时间。
思维:渲染表格头、渲染天数、填充色块。
- 实现简单的表格
<el-table
:data = "tableData"
border
>
<el-table-column
label="序号"
type="index"
align="center"
width="40"
></el-table-column>
<el-table-column
label="计划开始时间"
prop="planned_start"
align="center"
width="110"
>
<template slot-scope="scope">
<span>{{ scope.row.planned_start }}</span>
</template>
</el-table-column>
<el-table-column
label="计划结束之间"
prop="planned_end"
align="center"
width="100"
>
<template slot-scope="scope">
<span>{{ scope.row.planned_end }}</span>
</template>
</el-table-column>
<el-table-column
label="实际开始时间"
prop="start_date"
align="center"
width="110"
>
<template slot-scope="scope">
<span>{{ scope.row.start_datet }}</span>
</template>
</el-table-column>
<el-table-column
label="实际结束时间"
prop="end_date"
align="center"
width="110"
>
<template slot-scope="scope">
<span>{{ scope.row.end_date }}</span>
</template>
</el-table-column>
<el-table-column
v-for="(item, index) in showMonths"
:label="item.month" // 渲染月份
prop="showMonths"
align="center"
:key="index"
>
<el-table-column
v-for="(it, index1) in item.daysArr"
:label="it.day"
width="20"
style="padding: 0; margin: 0;"
align="center"
:key="index1"
>
<template slot-scope="scope1" class="progressCon">
<div :class="scope1.row['s-' + item.str + '-' + it.day] ? 'progressUpon' : '' "></div>
<div :class="scope1.row['t-' + item.str + '-' + it.day] ? 'progressDownon' : '' "></div>
</template>
</el-table-column>
</el-table-column>
</el-table>
- 两个样式
.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)
博客链接:http://blog.csdn.net/qq_33599109
欢迎关注支持,谢谢!