甘特图组件,有点改炸了
This commit is contained in:
57
components/Gantt/core/Layout.js
Normal file
57
components/Gantt/core/Layout.js
Normal file
@@ -0,0 +1,57 @@
|
||||
// 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';
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user