ak-gantt-charts甘特任务负荷进度管理图
一款纯js开发的功能强大的项目管理工具，它能够帮助团队更好地管理和跟踪任务的进度，提高团队协作效率。该组件提供了一个直观的甘特图，展示任务的时间线和进度，并支持多人协作编辑，实时同步任务状态，可自动统计组内成员在一定周期范围内同时进行的事项数，并在日历中展示事项安排，帮助部门负责人统一查看对比成员的工作量和工作安排。通过直观展示成员工作饱和度，管理者能清晰认识到成员的工作负载与工作效率，及时进行调整与推进。
- 日期时间轴支持鼠标滚动进行缩放
- 展示区域可左右拖动选择日期范围，可无限延伸
- 支持拖动任务详情更新开始和结束时间
- 支持查看任务详情
- 未按时完成任务支持自动延伸
演示地址
https://337547038.github.io/ak-gantt-charts/#/
说明
1.展开收起详情，可查看当前需处理事项数及各任务详情
2.时间轴，可滚动鼠标左右滑动无限延伸日期
3.当前成员每天工作负荷，数字越大表示当天负荷越重
4.正常任务，可直接显示任务开始和结束时间。点击任务条可左右拖动改变时间
5.超时任务，表示结束时间已过去，但还没完成，侧自动延伸到当天
6.已完成的任务
7.所有成员的对应时间的任务负荷量
8.超时任务，自动延伸部分
安装使用
npm install ak-gantt-charts<script setup>
import akGanttCharts from 'ak-gantt-charts'
import 'ak-gantt-charts/style.css' // 引入组件样式
const data = [
{
name: '张三', //显示的会员名称
face: '/face.webp', // 会员头像
todo: 5, // 未规划的事项数
progress: {'2024-01-01': 5, '2024-01-02': 0, '2024-01-03': 12},// 当前时间范围里每天的工作负载
list: [//任务详情
{
startDate: '2024-01-01', //开始时间
endDate: '2024-01-05', //结束时间
title: '将生产环境和测试环境服务器迁移到腾讯云', //任务名称
progress: 30 // 当前进度
//....
},
]
}]
</script>
<template>
<ak-gantt-charts :data="data"/>
</template>props
| 参数 | 类型 | 说明 |
|---|---|---|
| data | Array | 展示所需数据 |
| width | number | 每个单元格的宽 |
| offsetUnit | number | 初始偏移多少个单位即多少天 |
事件
| 参数 | 说明 |
|---|---|
| getData | 根据开始和结束时间加载数据 |
| getTaskDetail | 展开时事件，可用于加载任务详情数据 |
| updateTaskDetail | 拖动任务详情时事件，用于更新保存拖动后的值 |
| otherEvent | 其他事件 |