vue 实现项目进度甘特图

2024-04-27 06:36
文章标签 javascript 实现 项目 vue frontend 进度 甘特图

本文主要是介绍vue 实现项目进度甘特图，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 项目需求：

实现以1天、7天、30天为周期（周期根据筛选条件选择），展示每个项目不同里程碑任务进度。

项目在Vue-Gantt-chart: 使用Vue做数据控制的Gantt图表基础上进行了改造。

有需要的小伙伴也可以直接引入插件，自己修改。

 我是直接把甘特图封装成了组件，结构如下图：

 

 首先，安装插件

npm install v-gantt-chart

引入插件（我是全局引入的）

import vGanttChart from 'v-gantt-chart';Vue.use(vGanttChart);

 代码如下：

index.js

<template><div class="container"><v-gantt-chart:startTime="times[0]":endTime="times[1]":cellWidth="cellWidth":cellHeight="cellHeight":timeLines="timeLines":titleHeight="titleHeight":scale="Number(1440 * scale)":titleWidth="titleWidth"showCurrentTime:hideHeader="hideHeader":dataKey="dataKey":arrayKeys="arrayKeys":scrollToTime="scrollToTime":scrollToPostion="positionA"@scrollLeft="scrollLeftA"customGenerateBlocks:datas="ganttData"><templatev-slot:block="{data,getPositonOffset,getWidthAbout2Times,isInRenderingTimeRange,startTimeOfRenderArea,endTimeOfRenderArea,isAcrossRenderingTimeRange}"><divclass="gantt-block-item"v-for="(item, index) in data.gtArray"v-if="isInRenderingTimeRange(item.start) ||isInRenderingTimeRange(item.end) ||isAcrossRenderingTimeRange(item.start, item.end)":key="item.id":style="{left: getPositonOffset(item.start) + 'px',width: getWidthAbout2Times(item.start, item.end) + 'px',height: judgeTime(data.gtArray) ? '50%' : '100%',top: !judgeTime(data.gtArray)? '': index % 2 !== 1? '0px': '22px'}"><Test:data="data":updateTimeLines="updateTimeLines":cellHeight="cellHeight":currentTime="currentTime":item="item"@nodeEvent="nodeEvent"></Test></div></template><template v-slot:left="{ data }"><TestLeft :data="data" @panelDb="panelDb"></TestLeft></template><!-- <template v-slot:timeline="{ day , getTimeScales }"><TestTimeline :day="day" :getTimeScales="getTimeScales"></TestTimeline></template> --><template v-slot:title><div class="title">名称</div></template></v-gantt-chart></div>
</template><script>
import moment from 'moment';
import Test from './components/test.vue';
import TestLeft from './components/test-left.vue';
import TestTimeline from './components/test-timeline.vue';
import TestMarkline from './components/test-markline.vue';import dayjs from 'dayjs';export default {name: '',components: { Test, TestLeft, TestTimeline, TestMarkline },props: {ganttData: {type: Array,default: () => []},scaleData: {type: Number,default: 10080},scrollToTime: {type: String,default: moment().subtract(4, 'days').format('YYYY-MM-DD')}},data() {return {timeLines: [],currentTime: dayjs(),cellWidth: 100,cellHeight: 50,titleHeight: 50,titleWidth: 250,// scale: 1440 * 30,startDate: moment().startOf('year'),endDate: moment().endOf('year'),times: [moment().subtract(1, 'year').format('YYYY-MM-DD hh:mm:ss'),moment().add(6, 'months').format('YYYY-MM-DD hh:mm:ss')],rowNum: 100,colNum: 10,datasB: [],dataKey: 'projectId',// scrollToTime: moment().subtract(14, 'days').format('YYYY-MM-DD'),// scrollToTime: moment().subtract(4, 'days').format('YYYY-MM-DD'),scrollToPostion: { x: 10000, y: 10000 },hideHeader: false,hideSecondGantt: false,arrayKeys: ['gtArray'],scrollToY: 0,positionB: {},positionA: {}};},watch: {scrollToY(val) {this.positionA = { x: val };},ganttData(newVal, oldVal) {console.log('newVal===', newVal);console.log('oldVal===', oldVal);}},computed: {scale() {console.log(this.scaleData);return this.scaleData / 1440;}},methods: {judgeTime(arr) {let startTimeArr = [];let endTimeArr = [];arr.map(function (item) {startTimeArr.push(item.startDate ? new Date(item.startDate).getTime() : '');endTimeArr.push(item.delayDate? new Date(item.delayDate).getTime(): item.endDate? new Date(item.endDate).getTime(): '');});let allStartTime = startTimeArr.sort(); // 排序let allEndTime = endTimeArr.sort();let result = 0; // 判断时间是否有重复区间for (let k = 0; k < allStartTime.length; k++) {if (k > 0) {if (allStartTime[k] <= allEndTime[k - 1]) {result += 1;}}}return result > 0;},nodeEvent(item) {this.$emit('nodeEventClick', item);},panelDb(item) {this.$emit('panelDbClick', item);},updateTimeLines(timeA, timeB) {this.timeLines = [{time: timeA,text: '自定义'},{time: timeB,text: '测试',color: '#747e80'}];},scrollLeftA(val) {this.positionB = { x: val };}}
};
</script><style lang="scss" scoped>
.container {height: 82vh;background-color: #f5faff;
}
.title {width: 100%;height: 100%;color: #96aaca;background: #f5faff;
}
:deep(.gantt-leftbar-wrapper) {border-right: 1px solid #c6d8ee !important;
}
</style>

test-left.vue

<template><div class="name"><div class="carId" @dblclick="onDblclick" >{{ data.projectName }}</div></div>
</template><script>
export default {name: "TestLeft",props: {data: Object,},methods: {onDblclick() {// this.updateTimeLines(this.item.start, this.item.end);this.$emit('panelDb', this.data);}}
};
</script><style scoped>
.name {color: #000000;display: flex;box-sizing: border-box;overflow: hidden;height: 100%;width: 100%;padding: 10px 0;align-items: center;text-align: center;background: #f5faff;box-shadow: 2px 0px 4px 0px rgba(0, 0, 0, 0.1);
}.carId {flex: 1;
}.type {padding: 0 5px 0 0;font-size: 1.2rem;
}
</style>

test-markline.vue

<template><divclass="markline":style="{  left: getPosition() + 'px' }"><div class="markline-label">{{timeConfig.text}}{{ dayjs(timeConfig.time).format("HH:mm:ss") }}</div></div>
</template><script>
import dayjs from "dayjs"
export default {name: "TestMarkLine",props:['getPosition','timeConfig'],data(){return {dayjs}}
}
</script><style lang="scss" scoped>.markline {position: absolute;z-index: 100;width: 2px;height: 100vh;background: #747e80;&-label {padding: 3px;width: 6rem;margin-left: -3rem;margin-top: 5rem;color: #fff;background: #747e80;text-align: center;border-radius: 5px;font-size: 0.7rem;}
}
</style>

test-timeline.vue

<template><div class="test"><span v-for="i in getTimeScales(day)"> {{i.format('HH:mm')}}</span></div> 
</template><script>
export default {name: "TestLeft",props: {day: Object,getTimeScales:Function,}
};
</script><style lang="scss" scoped>
.test{display: flex;span{flex:1}
}
</style>

test.vue

<template><el-popover placement="bottom" trigger="hover"><divslot="reference"class="plan":style="{'background-color': statusColor,'margin-top': 0.1 * cellHeight + 'px'}"@click="onClick"><div class="middle">{{ item.summary }}</div></div><div class="detail">{{ item.summary }}</div></el-popover>
</template><script>
import dayjs from 'dayjs';
export default {name: 'Test',props: {data: Object,item: Object,currentTime: dayjs,updateTimeLines: Function,cellHeight: Number,startTimeOfRenderArea: Number},data() {return {dayjs: dayjs,stateObj: {DelayStart: '#F56C6C',Normal: '#C2F1E2',NoStart: '#D9E3ED',Delay: '#F56C6C',Stop: '#D9E3ED',DelayRisk: '#FFD4C7',NoControl: '#F56C6C',Close: '#D9E3ED'}};},computed: {statusColor() {console.log('data=======', this.data);let { item } = this;return this.stateObj[item.state] || '#D9E3ED';},startToString() {return dayjs(this.item.start).format('HH:mm');},endToString() {return dayjs(this.item.end).format('HH:mm');}},methods: {onClick() {// this.updateTimeLines(this.item.start, this.item.end);this.$emit('nodeEvent', this.item);}}
};
</script><style lang="scss" scoped>
.middle {flex: 1;text-align: center;padding-left: 5px;text-overflow: ellipsis;  /* ellipsis:显示省略符号来代表被修剪的文本  string:使用给定的字符串来代表被修剪的文本*/ white-space: nowrap;   /* nowrap:规定段落中的文本不进行换行   */ overflow: hidden; /*超出部分隐藏*/
}
.runTime {display: flex;flex-direction: column;
}
.plan {display: flex;align-items: center;box-sizing: border-box;height: 80%;border: 1px solid #f0f0f0;border-radius: 5px;color: #333333;padding-left: 5px;font-size: 0.8rem;// opacity: 0.8;
}.detail {.header {text-align: center;font-size: 1rem;}
}.detail ul {list-style: none;padding: 0px;li {span {display: inline-block;width: 80px;color: #777;font-size: 0.8rem;}span:first-child {text-align: right;}span:last-child {}}
}
</style>

页面中使用

<div><ganttChart:ganttData="ganttArr":scaleData="scaleData":scrollToTime="scrollToTime"@nodeEventClick="nodeEventClick"@panelDbClick="panelDbClick"></ganttChart>
</div>
import moment from 'moment';
import ganttChart from './components/ganttChart/index.vue';export default {components: { ganttChart },data(){return{ganttArr: [],scaleData: 10080,scrollToTime: moment().subtract(4, 'days').format('YYYY-MM-DD'),}},methods: {// 点击甘特图node节点nodeEventClick(item) {// 执行自己的逻辑},// 双击甘特图左侧标题panelDbClick(item) {//执行自己的逻辑}}}

以上就是实现甘特图的全部过程，欢迎大佬们指教。

这篇关于vue 实现项目进度甘特图的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/939759。

相关文章

Vue3 的 shallowRef 和 shallowReactive：优化性能

Vue3 的 shallowRef 和 shallowReactive：优化性能

大家对 Vue3 的 ref 和 reactive 都很熟悉，那么对 shallowRef 和 shallowReactive 是否了解呢？ 在编程和数据结构中，“shallow”（浅层）通常指对数据结构的最外层进行操作，而不递归地处理其内部或嵌套的数据。这种处理方式关注的是数据结构的第一层属性或元素，而忽略更深层次的嵌套内容。 1. 浅层与深层的对比 1.1 浅层（Shallow） 定义
阅读更多...
这15个Vue指令，让你的项目开发爽到爆

这15个Vue指令，让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件，按住 Control 和回车键再显示它吗？小菜一碟： <template
阅读更多...
【 html+css 绚丽Loading 】000046 三才归元阵

【 html+css 绚丽Loading 】000046 三才归元阵

前言：哈喽，大家好，今天给大家分享html+css 绚丽Loading！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到大家或者给大家一些灵感和启发，欢迎收藏+关注哦 💕 目录 📚一、效果📚二、信息💡1.简介：💡2.外观描述：💡3.使用方式：💡4.战斗方式：💡5.提升：💡6.传说： 📚三、源代码，上代码，可以直接复制使用🎥效果🗂️目录✍️
阅读更多...
【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画（下）

【课程链接】 AntV G6：深入图形与图形分组、自定义节点、节点动画（下）_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中，应该怎样去计算和绘制图形，如何给一个图形制作不间断的动画，以及在鼠标事件之后产生动画。（有点难，需要好好理解） <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06
阅读更多...
如何用Docker运行Django项目

如何用Docker运行Django项目

本章教程，介绍如何用Docker创建一个Django，并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口，映射到宿主机的80端口上。 docker run -itd --name python311 -p
阅读更多...
hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

hdu1043（八数码问题，广搜 + hash（实现状态压缩） ）

利用康拓展开将一个排列映射成一个自然数，然后就变成了普通的广搜题。 #include<iostream>#include<algorithm>#include<string>#include<stack>#include<queue>#include<map>#include<stdio.h>#include<stdlib.h>#include<ctype.h>#inclu
阅读更多...
【C++】_list常用方法解析及模拟实现

【C++】_list常用方法解析及模拟实现

相信自己的力量，只要对自己始终保持信心，尽自己最大努力去完成任何事，就算事情最终结果是失败了，努力了也不留遗憾。💓💓💓 目录   ✨说在前面 🍋知识点一：什么是list？ •🌰1.list的定义 •🌰2.list的基本特性 •🌰3.常用接口介绍 🍋知识点二：list常用接口 •🌰1.默认成员函数 🔥构造函数（⭐） 🔥析构函数 •🌰2.list对象
阅读更多...
【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

【Prometheus】PromQL向量匹配实现不同标签的向量数据进行运算

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯，先赞后看哦~🎈🎈 🏆 作者简介：景天科技苑 🏆《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。 🏆《博客》：Python全栈，前后端开发，小程序开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

Android实现任意版本设置默认的锁屏壁纸和桌面壁纸（两张壁纸可不一致）

客户有些需求需要设置默认壁纸和锁屏壁纸  在默认情况下 这两个壁纸是相同的  如果需要默认的锁屏壁纸和桌面壁纸不一样 需要额外修改 Android13实现 替换默认桌面壁纸： 将图片文件替换frameworks/base/core/res/res/drawable-nodpi/default_wallpaper.*  （注意不能是bmp格式） 替换默认锁屏壁纸： 将图片资源放入vendo
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2