多段区间的时间滑块slider实现方式

多段区间的时间滑块slider实现方式

写在前面：今天要实现一个尖峰平谷的数据配置，这可一下难倒我了，但是还好互联网上大神云集，感谢各位大神的倾情分享，现在就写下我的感悟，留给看到这篇文章的你

参考链接--写在前面，希望好帖子和文章能够被更好的被发现

1. 首先就是查看功能的大神贴，也是一切的基础

https://blog.csdn.net/qq_40950174/article/details/128829529

2. 基于这个功能去实现时间滑块的参考

https://juejin.cn/post/7028885491617366053

3. 组件参考：
   vue-range-multi

https://github.com/wiidede/vue-range-multi
这个组件简单易用而且超级方便

vue-slider-component --
vue2的版本，个人喜欢这份文档，但是我用的vue3所以没有使用
https://github.com/NightCatSama/vue-slider-component

vue3-slider-component
最终参考：
https://github.com/s-sasaki-0529/vue-slider-component

实现：

有了前面的参考利器，写起来就方便很多了
思路：添加一个按钮，每次点击添加时，向内部添加一个容量为2的数组，然后通过数组的长度进行进度条渲染，在最后点击提交时对数组进行合并处理
我用的是个笨办法，如果有更好的办法，欢迎底下留言。

首先就是组件部分

<el-button type="primary" @click="addPoint">添加时间段</el-button>
    <el-button type="danger" @click="delPoint">删除时间段</el-button>
    <el-button type="success" @click="submit">提交</el-button>
    <VueSlider
        v-model="pointArr"
        :data="dataInit"
        :process="getProcess"
        :lazy="true"
        :adsorb="true"
        :drag-on-click="true"
        tooltip="hover"
    />

然后就是js部分

const pointArr = ref([0, 1])
const dataInit = ref([
      {value: 0, label: '0:00'},
      {value: 1, label: '1:00'},
      {value: 2, label: '2:00'},
      {value: 3, label: '3:00'},
      {value: 4, label: '4:00'},
      {value: 5, label: '5:00'},
      {value: 6, label: '6:00'},
      {value: 7, label: '7:00'},
      {value: 8, label: '8:00'},
      {value: 9, label: '9:00'},
      {value: 10, label: '10:00'},
      {value: 11, label: '11:00'},
      {value: 12, label: '12:00'},
      {value: 13, label: '13:00'},
      {value: 14, label: '14:00'},
      {value: 15, label: '15:00'},
      {value: 16, label: '16:00'},
      {value: 17, label: '17:00'},
      {value: 18, label: '18:00'},
      {value: 19, label: '19:00'},
      {value: 20, label: '20:00'},
      {value: 21, label: '21:00'},
      {value: 22, label: '22:00'},
      {value: 23, label: '23:00'},
    ]
)
//控制进度条的颜色
const getProcess = (pointArr:any) => {
  const newArr = []
  for (let i = 0; i < pointArr.length-1; i+=2) {
    newArr.push(([pointArr[i], pointArr[i + 1], {backgroundColor: 'pink'}]))
  }
  return newArr
}

//添加点位区间
const addPoint = () => {
  const length = pointArr.value.length;
  if (length < 2) {
    return;
  }
  const newArr = [pointArr.value.length, pointArr.value.length + 1]
  pointArr.value.push(...newArr);
  const lastIndex = pointArr.value.length - 2;
  const secondLastIndex = pointArr.value.length - 1;
  const arrRule = [pointArr.value[lastIndex], pointArr.value[secondLastIndex], {backgroundColor: 'pink'}];
  getProcess(pointArr).push(arrRule)
}

//删除上一个区间
const delPoint = () => {
  const length = pointArr.value.length;
  if (length <= 2) {
    return;
  }
  pointArr.value.pop();
  pointArr.value.pop();
  getProcess(pointArr).pop()
}

//合并区间
const submit = () => {
  console.log(pointArr.value);
  const result = [];

  // 创建一个数组来存储处理后的区间
  const processedIntervals = [];

  for (let i = 0; i < pointArr.value.length; i += 2) {
    const start = pointArr.value[i];
    const end = pointArr.value[i + 1];

    // 初始化一个新的区间
    let newInterval = [start, end];

    // 检查是否有交叉的区间需要合并
    if (processedIntervals.length > 0) {
      let lastInterval = processedIntervals[processedIntervals.length - 1];
      if (lastInterval[1] >= start) {
        // 有交叉，合并区间
        lastInterval[1] = Math.max(lastInterval[1], end);
      } else {
        // 无交叉，添加新区间
        processedIntervals.push(newInterval);
      }
    } else {
      // 第一个区间，直接添加
      processedIntervals.push(newInterval);
    }
  }

  // 处理 processedIntervals，生成最终的结果
  for (const interval of processedIntervals) {
    if (interval[0] === interval[1]) {
      result.push([interval[0]]);
    } else {
      result.push([interval[0], interval[1]]);
    }
  }
  console.log(result);
  return result;
}

最终实现：

• 正常状态：
  
  点击提交后：
  

• 重合合并：
  
  点击提交后：