在xpyjs/gantt项目中实现当前时间指示线的技术方案-优快云博客

在xpyjs/gantt项目中实现当前时间指示线的技术方案

gantt An easy-to-use Gantt component. 持续更新，中文文档项目地址: https://gitcode.com/gh_mirrors/gantt/gantt

背景介绍

在甘特图(Gantt)应用中，显示当前时间指示线是一个常见的需求，它可以帮助用户快速定位当前时间在时间轴上的位置。xpyjs/gantt作为一款开源的甘特图组件，虽然当前版本尚未原生支持此功能，但开发者可以通过CSS技巧实现这一效果。

实现原理

核心思路是利用CSS的线性渐变(linear-gradient)特性，在甘特图的时间轴上绘制一条垂直线来表示当前时间。具体实现分为以下几个步骤：

计算当前时间位置：首先需要计算当前时间在24小时时间轴上所占的比例，然后映射到甘特图的实际宽度上。
创建渐变背景：使用CSS的linear-gradient函数，在计算出的位置绘制一条窄线，其余部分保持透明。
应用样式：将计算好的渐变样式应用到甘特图的日期线上。

具体实现代码

以下是基于Vue 3的组合式API实现方案：

// 计算当前时间在时间轴上的偏移量
const getCurrentTimeOffset = (widthPx = 85) => {
    const now = new Date()
    const totalMinutes = 24 * 60
    const currentMinutes = now.getHours() * 60 + now.getMinutes()
    return (currentMinutes / totalMinutes) * widthPx
}

// 计算当前时间线的CSS渐变值
const currentBackgroundLine = computed(() => {
    const offset = getCurrentTimeOffset(85)
    const lineWidth = 2  // 线宽2像素
    const start = offset.toFixed(2)
    const end = (offset + lineWidth).toFixed(2)

    return `linear-gradient(to right,
        transparent ${start}px,
        var(--secondary) ${start}px,
        var(--secondary) ${end}px,
        transparent ${end}px
      )`
})

对应的样式定义：

:deep(.xg-gantt-body-date-line) {
    &.weekend {
        background-color: var(--white) !important;
        background-image: repeating-linear-gradient(
                45deg,
                var(--color-border-secondary) 14px,
                var(--color-border-secondary) 16px,
                transparent 12px,
                transparent 20px
        );
    }

    &.today {
        background-color: transparent !important;
        background-image: v-bind(currentBackgroundLine);
        z-index: 999;  // 确保时间线在最上层显示
    }
}