refactor(gantt): 优化任务数据转换及甘特图日期范围计算
Some checks failed
Lint Code / Lint Code (push) Failing after 1m35s

- 调整任务标签显示逻辑,左侧标签加入负责人括号显示
- 任务条标签独立显示任务名,保持界面简洁
- 计算甘特图日期范围时,优先使用任务实际日期动态计算
- 对日期范围添加了前后7天的边距,提高展示灵活性
- 兼容无项目结束日期情况,默认显示30天跨度
- 保持代码结构清晰,增强日期计算的鲁棒性
This commit is contained in:
2026-03-31 17:14:15 +08:00
parent e10aa07367
commit 9c777ee429

View File

@@ -301,24 +301,29 @@ function getMaterialStatusType(
// 将任务数据转换为 vue-ganttastic 格式
const ganttTasks = computed(() => {
return taskList.value.map(task => ({
id: task.id,
label: task.taskName,
startDate: task.planStartDate || "",
endDate: task.planEndDate || "",
progress: task.progress || 0,
assignee: task.assigneeName || "未分配",
status: task.status || "pending",
ganttBarConfig: {
return taskList.value.map(task => {
const assigneeText = task.assigneeName ? `${task.assigneeName}` : "";
return {
id: task.id,
label: `${task.taskName} ${task.assigneeName ? "负责人:" + task.assigneeName : ""}`,
hasHandles: false,
style: {
backgroundColor: getTaskColor(task.status, task.progress),
color: "#fff"
// 左侧标签显示:任务名 + 负责人
label: `${task.taskName} ${assigneeText}`,
startDate: task.planStartDate || "",
endDate: task.planEndDate || "",
progress: task.progress || 0,
assignee: task.assigneeName || "未分配",
status: task.status || "pending",
ganttBarConfig: {
id: task.id,
// 任务条上显示任务名
label: task.taskName,
hasHandles: false,
style: {
backgroundColor: getTaskColor(task.status, task.progress),
color: "#fff"
}
}
}
}));
};
});
});
// 获取任务颜色
@@ -422,15 +427,47 @@ const sortedMilestones = computed(() => {
});
});
// 计算甘特图日期范围
// 计算甘特图日期范围(根据任务实际日期动态计算)
const ganttDateRange = computed(() => {
const start = projectInfo.value.startDate || dayjs().format("YYYY-MM-DD");
const end =
projectInfo.value.endDate || dayjs().add(6, "month").format("YYYY-MM-DD");
return {
start: dayjs(start).format("YYYY-MM-DD"),
end: dayjs(end).format("YYYY-MM-DD")
};
// 1. 优先从任务列表获取日期范围
if (taskList.value.length > 0) {
const taskDates = taskList.value
.filter(t => t.planStartDate || t.planEndDate)
.flatMap(t => [t.planStartDate, t.planEndDate].filter(d => d));
if (taskDates.length > 0) {
const validDates = taskDates.filter(d => d);
const minDate = validDates.reduce(
(min, d) => (d < min ? d : min),
validDates[0]
);
const maxDate = validDates.reduce(
(max, d) => (d > max ? d : max),
validDates[0]
);
// 添加前后边距各7天
const start = dayjs(minDate).subtract(7, "day").format("YYYY-MM-DD");
const end = dayjs(maxDate).add(7, "day").format("YYYY-MM-DD");
return { start, end };
}
}
// 2. 使用项目日期(添加前后边距)
const projectStart =
projectInfo.value.startDate || dayjs().format("YYYY-MM-DD");
const projectEnd = projectInfo.value.endDate;
if (projectEnd) {
const start = dayjs(projectStart).subtract(7, "day").format("YYYY-MM-DD");
const end = dayjs(projectEnd).add(7, "day").format("YYYY-MM-DD");
return { start, end };
}
// 3. 无结束日期时默认显示30天
const start = dayjs(projectStart).subtract(7, "day").format("YYYY-MM-DD");
const end = dayjs(projectStart).add(23, "day").format("YYYY-MM-DD");
return { start, end };
});
// 计算项目时间跨度(天数)