57 lines
2.0 KiB
JavaScript
57 lines
2.0 KiB
JavaScript
// Layout：布局计算器，负责任务条和依赖线的布局
|
||
export default class Layout {
|
||
constructor(tasks, config) {
|
||
this.tasks = tasks;
|
||
this.config = config;
|
||
}
|
||
// 计算任务条布局
|
||
computeTaskLayout() {
|
||
// 简单实现：每个任务一行，计算左侧（start）、宽度（end-start）
|
||
const layout = [];
|
||
this.tasks.forEach((task, idx) => {
|
||
const startPixel = this.dateToPixel(task.start);
|
||
const endPixel = this.dateToPixel(task.end);
|
||
layout.push({
|
||
id: task.id,
|
||
top: idx * 32,
|
||
left: startPixel,
|
||
width: endPixel - startPixel,
|
||
height: 28,
|
||
color: this.getTaskColor(task)
|
||
});
|
||
});
|
||
return layout;
|
||
}
|
||
// 计算依赖线布局（可扩展）
|
||
computeDependencyLines() {
|
||
// 返回依赖线的起止坐标
|
||
return [];
|
||
}
|
||
// 工具：日期转像素
|
||
dateToPixel(date) {
|
||
const start = new Date(this.config.startDate);
|
||
const d = new Date(date);
|
||
const scaleMap = { day: 40, week: 80, month: 200, quarter: 600 };
|
||
const scale = scaleMap[this.config.timeScale] || 80;
|
||
let diff = 0;
|
||
if (this.config.timeScale === 'day') {
|
||
diff = (d - start) / (1000 * 3600 * 24);
|
||
} else if (this.config.timeScale === 'week') {
|
||
diff = (d - start) / (1000 * 3600 * 24 * 7);
|
||
} else if (this.config.timeScale === 'month') {
|
||
diff = (d.getFullYear() - start.getFullYear()) * 12 + (d.getMonth() - start.getMonth());
|
||
} else if (this.config.timeScale === 'quarter') {
|
||
diff = ((d.getFullYear() - start.getFullYear()) * 12 + (d.getMonth() - start.getMonth())) / 3;
|
||
}
|
||
return diff * scale;
|
||
}
|
||
// 工具：获取任务颜色
|
||
getTaskColor(task) {
|
||
const group = this.config.groupBy;
|
||
if (group && task.dimensions && task.dimensions[group]) {
|
||
const id = task.dimensions[group].id;
|
||
return this.config.colors && this.config.colors[group] && this.config.colors[group][id] ? this.config.colors[group][id] : '#409EFF';
|
||
}
|
||
return '#409EFF';
|
||
}
|
||
}
|