最近的项目要求甘特图在elementui中实现,在此做出总结。 性能限制,不能传入太多的数据。 条件(时间):计划开始时间、计划结束时间、开始时间、结束时间、最大时间和最小时间。 思维:渲染表格头、渲染天数、填充色块。
- 实现简单的表格
{{ scope.row.planned_start }}
{{ scope.row.planned_end }}
{{ scope.row.start_datet }}
{{ scope.row.end_date }}
两个样式
.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)
博客链接:
欢迎关注支持,谢谢!
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。