功能介绍:
1. 基础时间轴显示
- 显示开始时间和结束时间(格式:YYYY-MM-DD HH:MM)
- 可视化的进度条展示当前时间在整个时间范围内的位置
- 支持自定义背景颜色、文字颜色和进度条颜色
2. 播放控制功能
- 播放/暂停按钮:点击切换播放状态,使用图标显示(播放/暂停图片)
- 自动播放:按照设定的播放速度自动推进时间
- 可配置播放速度:通过 playbackSpeed 属性控制播放倍速(默认1000毫秒/秒)
- 播放状态事件:向父组件发送播放状态变更事件
3. 进度条交互
- 点击跳转:点击进度条任意位置快速跳转到对应时间点
- 拖拽控制:拖拽进度条手柄精确调整当前时间
- 智能播放恢复:拖拽时自动暂停,拖拽结束后恢复之前的播放状态
- 实时响应:拖拽过程中实时更新时间显示
4. 时间标记系统
- 整点标记:自动在进度条上标记每个整点时间(如:08、09、10等)
- 标记线:垂直线条标识整点位置
- 整点报时:播放过程中到达整点时触发事件并打印日志
- 智能标记计算:根据开始和结束时间自动计算需要显示的整点标记
5. 当前时间指示器
- 浮动时间显示:在进度条上方显示当前精确时间(HH:MM:SS格式)
- 跟随进度:指示器位置随进度条位置实时移动
- 高精度显示:显示到秒级别的时间精度
6. 时间格式化
- 双重格式化:
- formatDateTime():显示到分钟级别(YYYY-MM-DD HH:MM)
- formatDateTimeWithSeconds():显示到秒级别(HH:MM:SS)
- 自动补零:确保时间格式的一致性
7. 事件系统
- 时间更新事件:
time-update
- 时间变化时通知父组件 - 播放状态事件:
playback-state-changed
- 播放/暂停状态变化 - 播放结束事件:
playback-ended
- 播放到结束时间时触发 - 整点事件:
hour-mark
- 到达整点时触发
8. 高级特性
- 边界检查:自动处理时间超出范围的情况
- 性能优化:使用60fps的更新频率确保流畅播放
- 内存管理:组件销毁时自动清理定时器和事件监听
- 状态同步:内部时间状态与外部传入时间的智能同步
9. 用户体验优化
- 视觉反馈:播放按钮状态切换、进度条拖拽手柄
- 响应式设计:适应不同宽度的容器
- 防抖处理:避免拖拽时的意外触发
- 平滑动画:进度条和按钮的过渡效果
10. 可配置属性
startTime
:开始时间戳(必需) endTime
:结束时间戳(必需) currentTime
:当前时间戳(可选) backgroundColor
:背景颜色 textColor
:文字颜色 progressColor
:进度条颜色 - playbackSpeed:播放速度倍数
组件代码如下:
<template><div class="timeline-container" :style="containerStyle"><div class="timeline-bar"><!-- 播放/暂停按钮 --><div class="timeline-play-button" @click="togglePlay"><i class="play-icon" :class="{ 'pause': isPlaying }">
<!-- {{ isPlaying ? '❚❚' : '▶' }}--><img class="img1" v-if="isPlaying" src="../views/assets/zt.png" alt=""><img class="img2" v-else src="../views/assets/bf.png" alt=""></i></div><!-- 开始时间 - 点击时重置到开始位置 @click="resetToStart --><div class="timeline-time start-time">{{ formatDateTime(startTime) }}</div><!-- 进度条 --><divclass="timeline-progress-container"ref="progressContainer"@click="seekToPosition($event)"><div class="timeline-progress-bg"></div><divclass="timeline-progress-bar":style="{ width: `${progressPercentage}%` }"></div><divclass="timeline-progress-handle":style="{ left: `${progressPercentage}%` }"@mousedown="startDragging"></div><!-- 当前时间指示 - 显示到秒级别 --><div class="current-time-indicator" :style="{ left: `${progressPercentage}%` }">{{ formatDateTimeWithSeconds(internalCurrentTime || startTime) }}</div>&l