js html css甘特图,【Vue.JS】纯 Vue.js 制做甘特图

/**

* 日期格式化。

* 小于 10 的数字在前面 + 0。如 0一、06

* */

var fDate = function (value) {

return value < 10 ? '0' + value : value;

}

/**

* 日期格式化：yyyy-mm-dd

* */

Date.prototype.format = function () {

return this.getFullYear() + '-' + fDate(this.getMonth() + 1) + '-' + fDate(this.getDate());

};

/**

* 获取指定时间段内全部天。

* 输入起止日期。格式：yyyy-mm-dd。

* 返回格式：yyyy-mm-dd

* */

var getAllDay = function (startDate, endDate) {

var allDays = [];

var a = startDate.split('-');

var b = endDate.split('-');

var uDb = new Date().setUTCFullYear(a[0], a[1] - 1, a[2]); //start

var uDe = new Date().setUTCFullYear(b[0], b[1] - 1, b[2]); //end

for (var i = uDb; i <= uDe; i = i + 24 * 60 * 60 * 1000) {

allDays.push(new Date(parseInt(i)).format());

}

return allDays;

};

/**

* 获取指定时间段内全部月。

* 输入起止日期。格式：yyyy-mm-dd。

* 返回格式：yyyy-mm

* */

var getAllMonth = function (startDate, endDate) {

var allMonth = [];

var a = startDate.split('-');

var b = endDate.split('-');

var uDb = new Date().setUTCFullYear(a[0], a[1] - 1, a[2]); //start

var uDe = new Date().setUTCFullYear(b[0], b[1] - 1, new Date(b[0], b[1], 0).getDate()); //结束月份设置为指定月最后一天

while (uDb <= uDe) { // 等于号防止 31 号计算遗漏

allMonth.push(new Date(uDb).getFullYear() + '-' + fDate(new Date(uDb).getMonth() + 1));

uDb = new Date(uDb).setMonth(new Date(uDb).getMonth() + 1);

}

return allMonth;

};

/**

* 建立 Vue 实例

* */

var demo = new Vue({

el: '#demo',

data: {

/**

* 数据源 JSON 对象数组

* 格式：

* {

* startDate:'', //开始日期(表头所用)

* endDate:'' //结束日期(表头所用)

* data:[{

* formType:'', //数据类型1。可自动进行行合并

* type:'', //数据类型2。如需行合并需参照类型1自行优化

* value:[{ //甘特图所需数据

* fromDate:'', //开始时间

* toDate:'', //截止时间

* spanClass:'' //该段时间内的样式

* },{

* //容许有多组时间段。

* }]

* }]

* }

*

* */

jsonData: sourceData.data,

startDate: sourceData.startDate,

endDate: sourceData.endDate,

/*获取指定时间段内全部月，用做表头一*/

AllMonths: getAllMonth(sourceData.startDate, sourceData.endDate),

/*获取指定时间段内全部天，用做表头二*/

Dateinterval: getAllDay(sourceData.startDate, sourceData.endDate),

},

methods: {

/**

* 甘特图显示情况

* 传入参数：

* 一、甘特图所需数据数组。即上述 JSON 对象的 value 数组

* 二、当前日期，即此刻对应表头中的日期列。

* */

spanShow: function (valArray, currentDate) {

/*默认不显示*/

var show = false;

/*默认样式颜色为空*/

var color = "";

/*调用 Vue 过滤器*/

var filter = this.$options.filters['strDateToTimeStamp'];

/*循环 value 数据。判断当前对应日期是否位于该组 value 数据的 fromdate 与 todate 之间。*/

for (var i = 0; i < valArray.length; i++) {

var inInterval = false;

inInterval = filter(valArray[i].fromDate) <= filter(currentDate) && filter(

currentDate) <= filter(valArray[i].toDate)

if (inInterval) {

color = valArray[i].spanClass;

}

show = show || inInterval;

}

/*返回判断结果与当前日期在该组数据下对应的样式颜色*/

return {

show: show,

color: color

};

},

/**

* 计算指定时间段内指定月份的总天数。

* 这里须要根据指定月的总天数肯定合并表头一时跨列的数量

* 传入参数：指定月份。格式 yyyy-mm

* */

days: function (strDate) {

debugger;

var sArr = this.startDate.split('-');

var eArr = this.endDate.split('-');

var arr = strDate.split('-');

//指定月份不在指定时间段内

if ('' + arr[0] + arr[1] < '' + sArr[0] + sArr[1] || '' + arr[0] + arr[1] > '' + eArr[0] +

eArr[1]) {

return 0;

}

//指定月份等于开始时间段的月份时，返回本月剩余天数 = 本月最后一天 - 开始日期 + 1

if ('' + arr[0] + arr[1] === '' + sArr[0] + sArr[1]) {

return new Date(arr[0], arr[1], 0).getDate() - new Date(sArr[0] + '-' + sArr[1] + '-' +

sArr[2])

.getDate() + 1;

}

//指定月份等于结束时间段的月份时，返回时间段内本月有效天数 = 结束日期

if ('' + arr[0] + arr[1] === '' + eArr[0] + eArr[1]) {

return new Date(eArr[0] + '-' + eArr[1] + '-' + eArr[2]).getDate()

}

return new Date(arr[0], arr[1], 0).getDate(); //取当前月的最后一天，即本月天数

},

/**

* 表单类型显示状态。

* 即第一列。

* */

showFormType: function (item, index) {

/*与下一组数据的类型相同时，不显示*/

var show = true;

if (index > 0 && item.formType == this.jsonData[index - 1]

.formType) {

show = false;

}

return show;

},

/**

* 表单类型须要跨行的数量。

* 用于自动合并第一列的类型

* */

colNum: function (item, index) {

var iCount = 0;

if (!(index > 0 && item.formType == this.jsonData[index - 1]

.formType)) {

this.jsonData.forEach(ele => {

if (item.formType == ele.formType) {

iCount++;

}

});

}

return iCount;

}

},

/*Vue 过滤器用于格式化日期*/

filters: {

/*字符串格式的日期转为时间戳*/

strDateToTimeStamp: function (strDate) {

return Date.parse(strDate);

},

/*字符串格式的日期转为天。yyyy-mm-dd --> dd*/

longDateToDay: function (longDate) {

return fDate(new Date(Date.parse(longDate)).getDate());

},

/*字符串格式的日期转为月。yyyy-mm-dd --> mm*/

longDateToMonth: function (longDate) {

return fDate(new Date(Date.parse(longDate)).getMonth() + 1);

}

}

})