react 时间轴组件

js

import React, { useState, useEffect } from 'react';
import styles from './index.less';
import { Slider } from 'antd';
import { PlusOutlined, MinusOutlined } from '@ant-design/icons';

function index() {
  const marks = {
    0: {
      style: {
        color: TextGraying(0),
        cursor: ProhibitClick(0),
      },
      label: '00:00',
    },
    // 60: '01:00',
    120: {
      style: {
        color: TextGraying(120),
        cursor: ProhibitClick(120),
      },
      label: '02:00',
    },
    // 180: '03:00',
    240: {
      style: {
        color: TextGraying(240),
        cursor: ProhibitClick(240),
      },
      label: '04:00',
    },
    // 300: '05:00',
    360: {
      style: {
        color: TextGraying(360),
        cursor: ProhibitClick(360),
      },
      label: '06:00',
    },
    // 420: '07:00',
    480: {
      style: {
        color: TextGraying(480),
        cursor: ProhibitClick(480),
      },
      label: '08:00',
    },
    // 540: '09:00',
    600: {
      style: {
        color: TextGraying(600),
        cursor: ProhibitClick(600),
      },
      label: '10:00',
    },
    // 660: '11:00',
    720: {
      style: {
        color: TextGraying(720),
        cursor: ProhibitClick(720),
      },
      label: '12:00',
    },
    // 780: '13:00',
    840: {
      style: {
        color: TextGraying(840),
        cursor: ProhibitClick(840),
      },
      label: '14:00',
    },
    // 900: '15:00',
    960: {
      style: {
        color: TextGraying(960),
        cursor: ProhibitClick(960),
      },
      label: '16:00',
    },
    // 1020: '17:00',
    1080: {
      style: {
        color: TextGraying(1080),
        cursor: ProhibitClick(1080),
      },
      label: '18:00',
    },
    // 1140: '19:00',
    1200: {
      style: {
        color: TextGraying(1200),
        cursor: ProhibitClick(1200),
      },
      label: '20:00',
    },
    // 1260: '21:00',
    1320: {
      style: {
        color: TextGraying(1320),
        cursor: ProhibitClick(1320),
      },
      label: '22:00',
    },
    // 1380: '23:00',
    1440: {
      style: {
        color: TextGraying(1440),
        cursor: ProhibitClick(1440),
      },
      label: '24:00',
    },
  };
  const [InitialTime, setInitialTime] = useState('12:00');

  useEffect(() => {
    setInitialTime(ThisTime()); // 传入当前时间
    let perSecond = setInterval(() => {
      // console.log(321);
    }, 1000);
    return () => {
      clearInterval(perSecond);
    };
  }, []);
  function ThisTime() {
    return new Date().getHours() + ':00'; // 获取当前小时
  }
  function TextGraying(data) {
    return parseFloat(tipFormatter(data)) <=
      parseFloat(tipFormatter(ThisTime()))
      ? '#fff'
      : 'pink';
  }
  function ProhibitClick(data) {
    return parseFloat(tipFormatter(data)) <=
      parseFloat(tipFormatter(ThisTime()))
      ? ''
      : 'not-allowed';
  }
  // 时间转换为数值
  function LineConversionTime(currentTimeStr) {
    // console.log(currentTimeStr);
    let currentTime = currentTimeStr.split(':');
    if (currentTime.length === 2) {
      return Number(currentTime[0]) * 60 + Number(currentTime[1]);
    } else {
      return 0;
    }
  }
  // 数值转换为时间
  function tipFormatter(NumberOfSteps) {
    if (isNaN(NumberOfSteps)) {
      return NumberOfSteps;
    } else {
      if (
        NumberOfSteps !== '0' &&
        NumberOfSteps !== '' &&
        NumberOfSteps !== null
      ) {
        return (
          (Math.floor(NumberOfSteps / 60).toString().length < 2
            ? '0' + Math.floor(NumberOfSteps / 60).toString()
            : Math.floor(NumberOfSteps / 60).toString()) +
          ':' +
          ((NumberOfSteps % 60).toString().length < 2
            ? '0' + (NumberOfSteps % 60).toString()
            : (NumberOfSteps % 60).toString())
        );
      } else {
        return '';
      }
    }
  }
  // 数值转换为时间
  function onChange(NumericalValue) {
    if (parseFloat(tipFormatter(NumericalValue)) <= parseFloat(ThisTime())) {
      // 字符串转换为数字类型 14:00 => 14
      let CurrentTime = tipFormatter(NumericalValue);
      setInitialTime(CurrentTime);
    } else {
      return null;
    }
  }
  // 时间减1
  function reduceClick() {
    let CurrentStep = LineConversionTime(InitialTime);
    if (CurrentStep <= LineConversionTime(ThisTime()) && CurrentStep > 0) {
      setInitialTime(tipFormatter((CurrentStep -= 60)));
    } else {
      setInitialTime('00:00');
    }
  }
  // 时间加1
  function subjoinClick() {
    let CurrentStep = LineConversionTime(InitialTime);
    if (CurrentStep >= 0 && CurrentStep < LineConversionTime(ThisTime())) {
      setInitialTime(tipFormatter(Number((CurrentStep += 60))));
    } else {
      // 如果当前时间 大于等于时间轴 则显示这个时间
      setInitialTime(ThisTime());
    }
  }
  return (
    <div className={styles.container}>
      <div className={styles.reduce} onClick={reduceClick}>
        <MinusOutlined width={100} />
      </div>
      <Slider
        className={styles.Slider}
        marks={marks}
        min={0}
        max={1440}
        step={60}
        value={LineConversionTime(InitialTime)}
        tipFormatter={(value) => tipFormatter(value)}
        onChange={(value) => onChange(value)}
        disabled={false}
        defaultValue={60}
      />
      <div className={styles.subjoin} onClick={subjoinClick}>
        <PlusOutlined className={styles.subjoin} />
      </div>
    </div>
  );
}

export default index;

CSS

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

  .Slider {
    flex: 1;
    background: #262626;
    margin: 0px 5px 0px 5px;
    height: 40px;
    width: 80%;
  }

  .reduce,
  .subjoin {
    width: 40px;
    height: 40px;
    line-height: 40px;
    background: #262626;
    text-align: center;
    cursor: pointer;
    border-radius: 8px 8px 8px 8px;
  }

  // antd 样式
  :global {
    .ant-slider-rail {
      height: 1px !important;
      background: #fff !important;
      top: 7px !important;
    }

    // 显示的距离
    .ant-slider-track {
      height: 1px !important;
      background: transparent !important;
    }

    // 字体颜色
    // .ant-slider-mark-text {
    //   color: #fff !important;
    // }


    .ant-slider-handle:focus {
      outline: none !important;
      box-shadow: none !important;
    }

    .ant-slider:hover .ant-slider-handle:not(.ant-tooltip-open) {
      border: none;
    }

    .ant-slider-dot {
      width: 1px !important;
      height: 8px !important;
      border: 0px solid rgb(85, 62, 62) !important;
      margin-left: 0px !important;
    }

    // .ant-slider-handle {
    //   width: 1px !important;
    //   height: 30px !important;
    //   border: none;
    //   background: rgb(202, 12, 25);
    //   margin-top: -10px !important;
    //   transform: none !important;
    // }

    // .ant-slider-mark {
    //   top: 20px !important;
    // }
    // .ant-slider-mark {
    //   position: absolute;
    //   top: 14px;
    //   left: 0;
    //   width: 100%;
    //   font-size: 28px;
    // }
  }
}