需求:公司要实现一个像钉钉日程一样的功能,然后需要查看不同人员的日程闲忙情况,因此前端需要将时间冲突的数据进行分组进行展示
// 日期转时间戳
const handleDateToTimestamp = (date: string) => {
return new Date(date).getTime();
};
数据类型没有做严格的限制,可自行根据业务场景进行优化,另外ios的设备执行new Date()的时候接受的时间格式需要以 "/" 分割,如果以"-"分割,会出现bug。
const handleData = (data: any) => {
const result = []; // 存储最终返回值,格式为二维数组
const IndexList: number[] = []; // 记录已经处理过的数据下标,下次循环直接跳过
for (let index = 0; index < data.length; index++) {
if (IndexList.includes(index)) continue;
let startTime = handleDateToTimestamp(data[index].startTime);
let endTime = handleDateToTimestamp(data[index].endTime);
IndexList.push(index);
const tempArray = [data[index]];
for (let n = 1; n < data.length; n++) {
if (IndexList.includes(n)) continue;
// 将日期转时间戳进行对比,如果n的开始时间大于等于index的开始时间
// 且小于等于index的结束时间,则说明时间有交叉,结束时间同理
if (
(handleDateToTimestamp(data[n].startTime) >= startTime &&
handleDateToTimestamp(data[n].startTime) <= endTime) ||
(handleDateToTimestamp(data[n].endTime) >= startTime &&
handleDateToTimestamp(data[n].endTime) <= endTime)
) {
// 取两个结束时间中的最大值作为下一次循环对比的结束时间
endTime = Math.max(handleDateToTimestamp(data[n].endTime), endTime);
startTime = Math.min(handleDateToTimestamp(data[n].startTime), startTime)
tempArray.push(data[n]);
IndexList.push(n);
}
}
result.push(tempArray);
};
return result;
}