条形时间段实现（视频漏录）

1. 需求截图：

截图说明：上半部分为antd的手风琴效果，内容为视频漏录的时间段；下半部分为条形时间段（css实现）

2. 下半部分视频漏录时间长条实现思路：

• 漏录条和底部时间分别为两个div
• 漏录条div
  ① div1： 宽度为100%，背景颜色：灰色
  ② div2： 漏录时间片段，背景颜色：红色
  ③ 漏录时间片段包含在div1中，display: "flex", 遍历显示

  // 布局代码（lostTimeInfo为漏录片段的数组）
            <div>
              <div>
                <Collapse
                  bordered={true}
                  defaultActiveKey={["1"]}
                  expandIcon={({ isActive }) => (
                    <CaretRightOutlined rotate={isActive ? 90 : 0} />
                  )}
                  className="site-collapse-custom-collapse"
                >
                  <Panel header="漏录时间段" key="1">
                    {currDot.losttime?.map(item => {
                      return <span>{item}&emsp;&emsp;</span>;
                    })}
                  </Panel>
                </Collapse>
              </div>
              <div
                style={{
                  width: "100%",
                  height: "35px",
                  backgroundColor: "rgba(0,0,0,.05)",
                  display: "flex"
                }}
              >
                {lostTimeInfo?.map(item => {
                  return (
                    <div
                      title={item.title}
                      style={{
                        position: "relative",
                        left: item.start,
                        height: "35px",
                        width: item.size,
                        backgroundColor: "red",
                        cursor: "pointer"
                      }}
                    ></div>
                  );
                })}
              </div>
            </div>

• 底部时间div
  ① display: "flex", justifyContent: "space-between", 遍历显示

  // 布局代码(times为00:00到22:00的数组)
              <div style={{ display: "flex", justifyContent: "space-between" }}>
                {times.map(item => {
                  return (
                    <div style={{ width: "12%" }}>
                      <div>{item}</div>
                    </div>
                  );
                })}
              </div>

数据处理关键代码

/**
漏录时间片段数据源格式
["01:22:39-02:00:01", "06:12:17-06:12:47", "20:04:18-20:04:23", "21:40:13-21:40:17", "21:50:19-21:50:23", "21:55:21-21:55:24", "22:00:25-22:00:28"]
*/

// 底部时间范围
const times = [
    "00:00",
    "02:00",
    "04:00",
    "06:00",
    "08:00",
    "10:00",
    "12:00",
    "14:00",
    "16:00",
    "18:00",
    "20:00",
    "22:00"
  ];

// lostTimeInfo数组数据格式
/**
// 将所有漏录片段存放到partList数组中，用于遍历
      [{
        start: startPoint + "%",  // 片段开始位置
        size: size * 100 < 0.01 ? "0.01%" : size * 100 + "%", // 片段长度
        title: item // 片段范围：01:22:39-02:00:01
      }];
*/


/**  数据处理代码  */
// 时间段漏录秒数
  const getSecondByDateSub = (begin, end) => {
    const begintime = dayjs().format("YYYY-MM-DD") + " " + begin;
    const endtime = dayjs().format("YYYY-MM-DD") + " " + end;
    var beginDate = new Date(begintime);
    var endDate = new Date(endtime);
    var diff = endDate.getTime() - beginDate.getTime();
    var sec = diff / 1000;
    return sec;
  };


  // 处理时间段数据
  const spliceTime = timeData => {
    console.log("losttime", timeData.losttotaltime);
    const partList = [];
    let prevEnd = 0; // 上一段漏录的结束位置
    let prevSize = 0; // 上一段漏录的长度
    timeData.losttime?.map((item, index) => {
      const start = item.split("-")[0]; // 漏录时间段-开始时间
      const end = item.split("-")[1]; // 漏录时间段-结束时间
      const size = getSecondByDateSub(start, end) / 86400; // 漏录时间段的长度百分比,86400:24小时的秒数
      const startTime = start.split(":"); // 漏录时间段的开始位置
      const endTime = start.split(":"); // 漏录时间段的结束位置
      // 开始位置
      const startPoint =
        (startTime[0] * 3600 + startTime[1] * 60 + Number（startTime[2])) / 86400 -
        prevEnd -
        prevSize;
      // 结束位置
      const endPosition =
        (endTime[0] * 3600 + endTime[1] * 60 + Number(endTime[2])) / 86400;
      // 将所有漏录片段存放到partList中，用于遍历
      partList.push({
        start: startPoint + "%",
        size: size * 100 < 0.01 ? "0.01%" : size * 100 + "%",
        title: item
      });
      prevEnd = endPosition; // 更新上一段的结束位置
      prevSize += size * 100 < 0.01 ? 0.01 : size * 100; // 累加前面所有漏录的长度
    });
    setLostTimeInfo(partList);
  };