【Vue.JS】纯 Vue.js 制作甘特图

效果图

在线预览

GitHub链接(包含 knockoutJS 版本与 Vue 版本)

Vue.js 引入

<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>

CSS 代码

<style>table {border-collapse: collapse;border-width: 1;}p {width: 100px;}th,td {min-width: 20px;text-align: center;border-width: 1px;border-style: solid;border-color: #666;}th {background-color: #34B4A0;}span {border-radius: 50%;height: 10px;width: 10px;display: block;display: inline-block;}.yellow {background-color: #F9A100;border: #FCAA00 1px solid;}.green {background-color: #34B4A0;border: #46D8BC 1px solid;}.red {background-color: #FF0D0D;border: #FF2E2E 1px solid}.purple {background-color: #8B64FF;border: #8B64FF 1px solid;}.blue {background-color: #299CED;border: #299CED 1px solid;}
</style>

vue 页面

<div id="demo"><table><caption>Vue.JS 制作甘特图</caption><thead><tr><th rowspan="2" colspan="2">项目/时间</th><th :colspan="days(day)" v-for="(day, index) in AllMonths">{{day|longDateToMonth}}</th></tr><tr><th v-for="(day, index) in Dateinterval">{{day|longDateToDay}}</th></tr></thead><tbody><tr v-for="(item, index) in jsonData"><td :rowspan="colNum(item, index)" v-if="showFormType(item, index)"><p>{{item.formType}}</p></td><td><p>{{item.type}}</p></td><td v-for="day in Dateinterval"><span :class="spanShow(item.value, day).color" v-show="spanShow(item.value, day).show"></span></td></tr></tbody></table>
</div>

javascript 代码

<script>/*** 日期格式化。* 小于 10 的数字在前面 + 0。如 01、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]); //startvar uDe = new Date().setUTCFullYear(b[0], b[1] - 1, b[2]); //endfor (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]); //startvar 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;};
</script>
<script>/*** 创建 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: {/*** 甘特图显示状况* 传入参数：*      1、甘特图所需数据数组。即上述 JSON 对象的 value 数组*      2、当前日期，即此刻对应表头中的日期列。*  */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;}//指定月份等于开始时间段的月份时，返回本月剩余天数 = 本月最后一天 - 开始日期 + 1if ('' + 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);}}})
</script>

JSON 实例数据(为了方便，直接写在JS中)

<script>var sourceData = {'startDate': '2018-12-01','endDate': '2019-01-31','data': [{"formType": "DFM","type": "计划","value": [{"fromDate": "2018-12-01","toDate": "2018-12-06","spanClass": "green"}, {"fromDate": "2018-12-10","toDate": "2018-12-11","spanClass": "green"}, {"fromDate": "2018-12-15","toDate": "2018-12-16","spanClass": "green"}]},{"formType": "DFM","type": "实际","value": [{"fromDate": "2018-12-01","toDate": "2018-12-07","spanClass": "red"}, {"fromDate": "2018-12-10","toDate": "2018-12-11","spanClass": "blue"}, {"fromDate": "2018-12-15","toDate": "2018-12-16","spanClass": "blue"}]}, {"formType": "DFM","type": "客户回复","value": [{"fromDate": "2018-12-09","toDate": "2018-12-09","spanClass": "purple"}, {"fromDate": "2018-12-14","toDate": "2018-12-14","spanClass": "purple"}, {"fromDate": "2018-12-18","toDate": "2018-12-18","spanClass": "purple"}]},{"formType": "开模检讨","type": "实际","value": [{"fromDate": "2018-12-20","toDate": "2018-12-20","spanClass": "yellow"}]},{"formType": "模具开发","type": "计划","value": [{"fromDate": "2018-12-19","toDate": "2019-01-10","spanClass": "green"}]},{"formType": "模具开发","type": "实际","value": [{"fromDate": "2018-12-19","toDate": "2019-01-13","spanClass": "red"}]}, {"formType": "设计","type": "计划","value": [{"fromDate": "2018-12-19","toDate": "2018-12-21","spanClass": "green"}]}, {"formType": "设计","type": "实际","value": [{"fromDate": "2018-12-19","toDate": "2018-12-21","spanClass": "yellow"}]}, {"formType": "加工","type": "计划","value": [{"fromDate": "2018-12-22","toDate": "2019-01-06","spanClass": "green"}]},{"formType": "加工","type": "客户回复","value": [{"fromDate": "2018-12-22","toDate": "2019-01-08","spanClass": "purple"}]},{"formType": "加工","type": "实际","value": [{"fromDate": "2018-12-22","toDate": "2019-01-09","spanClass": "red"}]},],};
</script>

【Vue.JS】纯 Vue.js 制作甘特图相关推荐

Highcharts Gantt JS 现代 Web 开发的甘特图
Highcharts Gantt JS 现代 Web 开发的甘特图现代不要使用过时的专有桌面解决方案.Java Applet 或 Flash 来为您的项目带来甘特图功能.Highcharts Ga ...
Vue 中使用 Echarts 实现项目进度甘特图
Vue 中使用 Echarts 实现项目进度甘特图参考:echarts实现甘特图(项目进度/任务进度) 简易版 1. 项目中安装 echarts npm i echarts 2. 实现甘特图 < ...
甘特图制作_如何用Excel快速制作甘特图？（超详细！）
甘特图作为现代项目管理中一项重要的管理工具,它能够帮助你考虑资源.成本等项目中重要的元素,并且能够通过图形直观的观察到项目中所要完成的任务.开始与结束时间,每项任务所需时间,某项任务在某个时间段内完成 ...
甘特图制作_使用excel制作甘特图其实很简单，仅需4步搞定，项目进度一目了然...
Hello,今天跟大家分享下如何在excel中制作甘特图.甘特图能直观的表现出任务的进度,以及各个项目之间的关联性如果说你的项目众多,可以使用更专业的Project来制作甘特图,使用Project制 ...
项目管理excel_项目管理甘特图是什么？怎么做才能更高效？（EXCEL制作甘特图详细步骤）...
项目管理甘特图是什么?甘特图即Gantt chart,又被称之为横道图.条状图.其命名是由提出者亨利·L·甘特(Henrry L.Ganntt)先生的名字而来的.甘特图是以图示的方式,并通过活动列表和 ...
WPS如何用Excel制作甘特图
Excel可以帮助我们处理庞大的数据,而甘特图呢则是一个可以清楚反映出我们日常工作进度的一个工具,那么,如何用Excel制作一个简单的甘特图呢?这里呢,有一些小技巧可以和大家分享一下,一起来学学吧! ...
项目管理工具---用Excel制作甘特图
对于比较简单的项目管理,或绘制甘特图,选用电子表格工具--比如价格高也最强大的Excel.开源的OpenOffice.免费的WPS--可能比项目管理软件更方便. 1. XL-Easy Gantt 模板 ...
wps表格l制作甘特图_甘特图是什么？-如何用WPS表格做甘特图
甘特图是什么?-如何用WPS表格做甘特图甘特图(Gantt Chart)又称横道图,由亨利.甘特于1910年开发的,它通过图示形象地表示特定项目的活动顺序与持续时间.其中横轴表示时间,纵轴表示活动( ...
wps 甘特图_制作甘特图提升办公效率！亿图下的这款项目管理软件很不错
距离春节还有5天很多小伙伴为了提升办公效率可谓绞尽脑汁,但是却没有能够想出办法!其实提醒办公效率的方法有很多,今天小编就为大家分享一种.那就是通过制作甘特图来实现,快来试试看这款亿图旗下的项目管理软 ...

【Vue.JS】纯 Vue.js 制作甘特图

效果图

在线预览

GitHub链接(包含 knockoutJS 版本与 Vue 版本)

推荐组合效果

Vue.js 引入

CSS 代码

vue 页面

javascript 代码

JSON 实例数据(为了方便，直接写在JS中)

【Vue.JS】纯 Vue.js 制作甘特图相关推荐

最新文章

热门文章