0.0.1 • Published 10 months ago
@pangsui/vue3-resource-gantt v0.0.1
@pangsui/vue3-resource-gantt
快速上手
npm install @pangsui/vue3-resource-gantt全局使用
main.js中引入并注册，由于组件也用到了vuex，所以在注册时也要将vuex传给组件，没有vuex的记得安装一下vuex
import store from './store/index'
import Gantt from '@pangsui/vue3-resource-gantt'
const app = createApp(App)
app.use(Gantt, { store })文档
属性参数
| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 1 | days | 要渲染的天数 | Number | 30 | |
| 2 | oDayBoxHeight | 表格高度 | Number | 40 | |
| 3 | oDayBoxWidth | 表格宽度 | Number | 60 | |
| 4 | startTime | 渲染时间列表的开始时间 | String | 2024-01-01 | |
| 5 | statusDictionary | 状态字典，详细配置见下面字典配置参数 | Object | {} | |
| 6 | tasks | 任务列表 | Array | [] | |
| 7 | rows | 左侧行数据 | Array | [] | |
| 8 | titleGroups | 左侧分组数据,详细配置见下面分组配置参数｜Array | [] |
字典配置参数
| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 1 | name | 名称 | String | ||
| 2 | theme | 主题 | String | 'default','deepgreen','green','lightgreen','lightpurple','purple','mediumpurple','red','pink','lightpink','blue','skyblue','cyan','yellow','lightyellow','greenyellow','orange','lightgray','gray' | 'default' |
tasks任务、rows左侧行数据配置参数
| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 1 | task_id | 任务id | Number | ||
| 2 | text | 任务名称 | String | ||
| 3 | row_index | 行下标，不重复且从1开始累加 | Number | ||
| 4 | start_date | 开始时间 yyyy-MM-dd hh:mm:ss | String | ||
| 5 | end_date | 结束时间 yyyy-MM-dd hh:mm:ss | String | ||
| 6 | duration | 持续时间，单位天 | String | ||
| 7 | progress | 进度 | String | 1-100 | |
| 8 | status | 状态 | String | ||
| 9 | is_lock | 是否锁定 | Boolean | true或false | |
| 10 | is_collapse | 是否折叠 | Boolean | true或false | |
| 11 | is_parent | 是否父节点 | Boolean | true或false | |
| 12 | status | 状态 | String |
titleGroups数据配置参数
| 序号 | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|---|
| 1 | title | 标题 | String | ||
| 2 | length | 长度（分组标题占的数量总和） | Number |
计算两个时间相差的天数
// 计算两个时间相差的天数
/**
* @param {Date} date1 开始时间
* @param {Date} date2 结束时间
*/
export function calculateDuration(date1, date2) {
const oneDay = 24 * 60 * 60 * 1000 // 每天的毫秒数
const diffDays = Math.round(Math.abs((date2 - date1) / oneDay))
return diffDays
}使用案例
界面中引入
<Gantt
ref="gantt"
:days="60"
:o-day-box-width="30"
:start-time="'2023-11-10'"
:status-dictionary="statusDictionary"
:tasks="tasks"
:rows="rows"
:title-groups="titleGroups"
/>in-tasks="originTasks"
/><script>
import { onMounted, reactive, toRefs, ref } from 'vue'
export default {
setup() {
const vueConfig = reactive({
rows: [
{
id: 1,
name: 'A1'
},
{
id: 2,
name: 'A2'
},
{
id: 3,
name: 'A3'
},
{
id: 4,
name: 'A4'
},
{
id: 5,
name: 'A5'
},
{
id: 6,
name: 'A6'
},
{
id: 7,
name: 'A7'
},
{
id: 8,
name: 'A8'
},
{
id: 9,
name: 'A9'
},
{
id: 10,
name: 'A10'
},
{
id: 11,
name: 'A11'
},
{
id: 12,
name: 'A12'
},
{
id: 13,
name: 'A13'
},
{
id: 14,
name: 'A14'
},
{
id: 15,
name: 'A15'
},
{
id: 16,
name: 'A16'
},
{
id: 17,
name: 'A17'
},
{
id: 18,
name: 'A18'
},
{
id: 19,
name: 'A19'
},
{
id: 20,
name: 'A20'
},
{
id: 21,
name: 'A21'
}
],
titleGroups: [
{
title: '南车间',
length: 5
},
{
title: '北车间',
length: 4
},
{
title: '二车间',
length: 6
},
{
title: '三车间',
length: 6
}
],
tasks:
[
{
task_id: 1,
text: '测试项目',
row_index: 0,
start_date: '2023-12-11 12:00:00',
duration: 10,
theme: 'lightpurple',
is_lock: false,
progress: 100, // 进度
},
{
task_id: 2,
text: '测试项目1',
row_index: 3,
start_date: '2023-12-09 12:06:00',
duration: 12,
theme: 'purple',
progress: 70, // 进度
is_lock: true,
},
{
task_id: 3,
text: '测试项目2',
row_index: 4,
end_date: '2023-12-01 21:01:25',
start_date: '2023-12-11 22:00:00',
duration: 10,
theme: 'mediumpurple',
progress: 86, // 进度
is_lock: false,
},
{
task_id: 13,
text: '测试项目3',
row_index: 4,
start_date: '2023-12-08 21:01:25',
duration: 5,
theme: 'pink',
progress: 0, // 进度
is_lock: false,
},
{
task_id: 4,
text: '测试项目4',
row_index: 9,
start_date: '2023-12-12 12:00:00',
duration: 4.8,
progress: 40, // 进度
theme: 'cyan',
is_lock: false,
},
{
task_id: 5,
text: '测试项目5',
row_index: 1,
start_date: '2023-11-10 10:46:00',
duration: 5.9,
progress: 90, // 进度
theme: 'red',
is_lock: true,
},
{
task_id: 6,
text: '测试项目6',
row_index: 9,
start_date: '2023-11-10 12:00:00',
duration: 10,
theme: 'skyblue',
progress: 100, // 进度
is_lock: false
},
{
task_id: 7,
text: '测试项目7',
row_index: 8,
start_date: '2023-11-15 12:00:00',
duration: 22,
progress: 100, // 进度
theme: 'orange',
is_lock: false
},
{
task_id: 8,
text: '测试项目8',
row_index: 10,
start_date: '2023-11-15 16:00:00',
duration: 30,
progress: 95, // 进度
theme: 'blue',
is_lock: false,
},
{
task_id: 9,
text: '测试项目9',
row_index: 5,
start_date: '2023-12-09 12:00:00',
duration: 11,
progress: 0, // 进度
theme: 'lightpink',
is_lock: false,
},
{
task_id: 10,
text: '测试项目10',
row_index: 11,
start_date: '2023-11-18 03:00:00',
duration: 8,
progress: 100, // 进度
theme: 'yellow',
},
{
task_id: 11,
text: '测试项目11',
row_index: 3,
start_date: '2023-11-16 00:00:00',
duration: 40,
progress: 50, // 进度
theme: 'gray',
is_lock: true,
}
],
statusDictionary: {
'draft': { name: '草稿', theme: 'gray' },
'unfold': { name: '展开', theme: 'cyan' },
'progress': { name: '进行中', theme: 'blue' },
'confirm': { name: '已确认', theme: 'lightpurple' },
'suspend': { name: '暂停', theme: 'yellow' },
'finish': { name: '已完成', theme: 'lightgreen' },
'cancel': { name: '已取消', theme: 'red' }
}
}
})
return {
...toRefs(vueConfig)
}
}#####示例图片
0.0.1
10 months ago