refactor(gantt): 优化任务数据转换及甘特图日期范围计算
Some checks failed
Lint Code / Lint Code (push) Failing after 1m35s
Some checks failed
Lint Code / Lint Code (push) Failing after 1m35s
- 调整任务标签显示逻辑,左侧标签加入负责人括号显示 - 任务条标签独立显示任务名,保持界面简洁 - 计算甘特图日期范围时,优先使用任务实际日期动态计算 - 对日期范围添加了前后7天的边距,提高展示灵活性 - 兼容无项目结束日期情况,默认显示30天跨度 - 保持代码结构清晰,增强日期计算的鲁棒性
This commit is contained in:
@@ -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 };
|
||||
});
|
||||
|
||||
// 计算项目时间跨度(天数)
|
||||
|
||||
Reference in New Issue
Block a user