Vue自定义时间轴，点击两个点获取时间区间

Vue 自定义时间轴，动态生成纵轴时间轴的时间点，点击时间轴获取时间区间

data：定义使用变量

	  fullDate: null, //最初时间（最开始有数据的时候）
      binlogDate: null, //binlog 结束时间
      selTime: null, //选中时间

      start_date: null, //开始时间戳
      end_date: null, //结束时间戳
      timeline: null, //选中时间戳
      incre_dates: [], //备份点数组
      increNum: 0, // 选中备份点
      allIncre: [], //备份点和binlog
      showLine: false, //是否显示时间轴
      dateTips: [], //0点，提示时间点数组
      onmouseup: false, // 时间轴上拖拽鼠标是否释放
      timeLine: "", // 时间轴当前值
      isClickTimeLine: true, // 是否可点击时间轴

      timeLineStart: "", // 时间轴筛选开始
      timeLineEnd: "", // 时间轴筛选结束
      timeLineAnalysisList: {
   } // 筛选过后的数据

js：获取到时间区间中的时间轴点，并且渲染，点击第一次是开始时间，第二次是结束时间，再次点击就是第二次为开始时间，以此类推

// 时间轴筛选时间段
    timeLineFilter() {
   
      let timeLineStart = "";
      let timeLineEnd = "";
      let timeLineStart0 = "";
      let timeLineEnd0 = "";
      // console.log(
      //   1432,
      //   this.timeLineStart,
      //   this.timeLineEnd,
      //   new Date(this.timeLineStart).getTime(),
      //   new Date(this.timeLineEnd).getTime()
      // );
      // console.log(1438, this.AnalysisList0);
      if (
        new Date(this.timeLineStart).getTime() <
        new Date(this.timeLineEnd).getTime()
      ) {
   
        timeLineStart = new Date(this.timeLineStart).getTime();
        timeLineEnd = new Date(this.timeLineEnd).getTime();
        timeLineStart0 = this.timeLineStart;
        timeLineEnd0 = this.timeLineEnd;
      } else {
   
        timeLineStart = new Date(this.timeLineEnd).getTime();
        timeLineEnd = new Date(this.timeLineStart).getTime();
        timeLineStart0 = this.timeLineEnd;
        timeLineEnd0 = this.timeLineStart;
      }
      let timeLineStartA = new Date(timeLineStart0.split(" ")[0]).getTime();
      let timeLineEndA = new Date(timeLineEnd0.split(" ")[0]).getTime();
      let boolA = false;

      // 重新赋值原数据
      this.timeLineAnalysisList = JSON.parse(
        JSON.stringify(this.AnalysisList0)
      );
      let timeLineAnalysisList = JSON.parse(JSON.stringify(this.AnalysisList0));

      if (this.isScreenMethod == 0) {
   
        // 按日期
        this.timeLineAnalysisList.beginTime = timeLineStart0.split(" ")[0];
        this.timeLineAnalysisList.endTime = timeLineEnd0.split(" ")[0];
        if (
          timeLineEnd - timeLineStart > 1 * 24 * 60 * 60 * 1000 ||
          timeLineEndA !== timeLineStartA
        ) {
   
          let arr = [];
          arr = timeLineAnalysisList.statsDateList.filter(i => {
   
            let clickDate = new Date(i.date).getTime();
            if (clickDate >= timeLineStartA && clickDate <= timeLineEndA) {
   
              return i;
            }
          });
          this.timeLineAnalysisList.statsDateList = arr;
          boolA = false;
          // console.log(1479, arr);
        } else {
   
          let arr = [];
          let arrTimes = [];
          arr = timeLineAnalysisList.statsDateList.filter(i => {
   
            let clickDate = new Date(i.date).getTime();
            if (clickDate >= timeLineStartA && clickDate <= timeLineEndA) {
   
              i.statsTimeList.forEach(item => {
   
                const times = new Date(item.time).getTime();
                if (times >= timeLineStart && times <= timeLineEnd) {
   
                  arrTimes.push(item);
                }
              });
              i.statsTimeList = arrTimes;
              return i;
            }
          });
          this.timeLineAnalysisList.statsDateList = arr;
          boolA = true;
          // console.log(1498, arr);
        }
      } else {
   
        // 按课节
        this.timeLineAnalysisList.beginTime = timeLineStart0;
        this.timeLineAnalysisList.endTime = timeLineEnd0;
        // this.AnalysisList.beginTime = this.startDate + " " + this.timeLineStart;
        // this.AnalysisList.endTime = this.startDate + " " + this.timeLineEnd;
        let arr = [];
        let arrTimes = [];
        // console.log(1508, this.AnalysisList0);
        arr = timeLineAnalysisList.statsDateList.filter(i => {
   
          let clickDate = new Date(i.date).getTime();
          if (clickDate >= timeLineStartA && clickDate <= timeLineEndA) {
   
            i.statsTimeList.forEach(item => {
   
              const times = new Date(item.time).getTime();
              if (times >= timeLineStart && times <= timeLineEnd) {
   
                arrTimes.push(item);
              }
            });
            i.statsTimeList = arrTimes;
            return i;
          }
        });
        this.timeLineAnalysisList.statsDateList = arr;
        // console.log(1521, arr);
      }
      this.AnalysisList = this.timeLineAnalysisList;
      // 处理图表数据
      // this.updatedData(this.AnalysisList, boolA);
    },
//时间显示格式
    formatter(value, day, hours) {