自定义时间区间拖拽组件

自定义时间区间拖拽组件

核心功能与交互设计

1.可视化时间区间管理

组件通过横向滑块的形式展示时间区间，每个区间使用彩色块表示，支持以下核心操作：

• 创建区间：点击空白区域添加新的时间块
• 调整区间：拖拽区间两端的控制点修改起止时间
• 删除区间：双击区间块移除时间区间
• 合并区间：自动识别并合并重叠的时间区间

2.智能班次计算

getShift方法实现了基于时间区间的智能班次判断逻辑：

// 班次判断规则示例
if (hasMorning && hasAfternoon && hasEvening) {
   
   
  item.work_types = '早中晚班';
} else if (hasMorning && hasAfternoon) {
   
   
  item.work_types = '早中班';
} else if (hasMorning && hasEvening) {
   
   
  item.work_types = '早晚班';
} // ...其他组合判断

系统会根据时间区间自动匹配早班(0-8)、中班(9-17)、晚班(17-23)等班次类型，支持多区间合并判断（如早午班、中晚班等组合）。

3.技术实现亮点

3.1拖拽交互系统

组件实现了一套完整的拖拽机制，通过startDrag、onDrag和endDrag三个核心方法完成拖拽生命周期管理：

• 使用document全局事件监听确保拖拽流畅性
• 实现像素与时间值的精确转换
• 添加边界检查防止区间溢出
• 支持半小时间隔的精细调整
  

3.2区间算法处理

mergeIntervals方法实现了高效的区间合并算法：

// 区间排序与合并核心逻辑
sorted = [...row.datetime_range].sort((a, b) => a[0] - b[0]);
for (const interval of sorted) {
   
   
  if (!merged.length) {
   
   
    merged.push(interval);
  } else {
   
   
    const last = merged[merged.length - 1];
    if (interval[0] <= last[1]) {
   
   
      // 重叠区间合并
      merged[merged.length - 1] = [last[0], Math.max(last[1], interval[1])];
    } else {
   
   
      merged.push(interval);
    }
  }
}

3.3响应式视觉设计

组件通过动态计算实现了响应式布局：

.slider-box {
   
   
  position: absolute;
  top: 5px;
  height: 12px;
  background-color: #ed7b2f;
  border-radius: 12px;
  /* 动态宽度和位置通过内联样式计算 */
}

滑块位置和宽度通过JavaScript动态计算，确保在不同容器尺寸下都能正确显示时间比例。

4.数据流转与使用

输入输出

1. Props输入：
   • row: 包含datetime_range数组的行数据对象
   • times: 时间刻度数组
     事件输出：
     updateSchedule: 区间变化时触发，传递更新后的行数据

5.典型数据结构

// row.datetime_range示例
[ [2, 6], [8, 14], [16, 22] ]
// 表示三个时间区间：2-6点、8-14点、16-22点

6.应用场景

该组件特别适合以下业务场景：

1. 员工排班系统中的班次时间配置
2. 设备维护时间段规划
3. 会议室/资源预约时间选择
4. 生产计划排程管理

7.完整组件代码

1. script部分

export default {
   
   
  props: {
   
   
    row: {
   
    type: Object, default: () => {
   
   } },
    times: {
   
    type: Array, default: () => [] }
  },
  data() {
   
   
    return {
   
   
      // 鼠标选择相关状态
      currentRow: null, // 添加当前行引用