YPZZBWG/pc/src/pages/A0Map/index.tsx

import React, { useEffect, useMemo, useRef, useState } from "react";
import styles from "./index.module.scss";
import classNames from "classnames";
import { envUrl } from "@/utils/env";
import { maoData2, mapData1 } from "./data";
import iconImg1 from "@/assets/img/map/icon1.png";
import iconImg1Ac from "@/assets/img/map/icon1Ac.png";
import iconImg2 from "@/assets/img/map/icon2.png";
import iconImg2Ac from "@/assets/img/map/icon2Ac.png";

type Props = {
  type: number;
};

function A0Map({ type }: Props) {
  const [videoInd, setVidoeInd] = useState(true);

  const [moveInd, setMoveInd] = useState(0);

  // 30个动画帧div
  const moveDiv = useMemo(() => {
    const arr = [];

    for (let i = 0; i <= 30; i++) {
      arr.push(
        <div
          className={classNames("videoRow", moveInd === i ? "videoRowAc" : "")}
          key={i}
        >
          <img src={`${envUrl}/yunMove/yan_${i}.png`} alt="" />
        </div>
      );
    }
    return arr;
  }, [moveInd]);

  const moveTime = useRef(-1);

  useEffect(() => {
    if (videoInd) {
      clearInterval(moveTime.current);
      let num = 0;
      moveTime.current = window.setInterval(() => {
        setMoveInd(num);
        num++;
        if (num > 30) {
          clearInterval(moveTime.current);
          setVidoeInd(false);
        }
      }, 50);
    }

    return () => {
      clearInterval(moveTime.current);
    };
  }, [videoInd]);

  return (
    <div className={styles.A0Map}>
      {/* 开场动画帧 */}
      <div
        className={classNames("videoBoxMove", !videoInd ? "videoBoxHide" : "")}
      >
        {moveDiv}
      </div>

      {/* 一级地图 */}
      <div
        className={classNames(
          "mapMain",
          type === 2 ? "mapMain2" : type === 3 ? "mapMain3" : ""
        )}
      >
        {/* 定位大图标 */}
        {mapData1.map((v) => (
          <div
            key={v.id}
            className="A0iconBox"
            style={{ top: v.y, left: v.x, zIndex: v.ind }}
          >
            <div className="iconNum">{v.id}</div>

            <img className="iconImg1" src={iconImg1} alt="" />
            <img className="iconImg2" src={iconImg1Ac} alt="" />

            {/* 文字标题 */}
            <div className="txtBox">
              <div>{v.name}</div>
            </div>

            {/* 悬停出来的图片和名称 */}
            <div className="hoverShowBox">
              <div className="hoverShowBoxM">
                <div className="hoverShowBox1">{v.name}</div>
                <div className="hoverShowBox2">
                  <img src={`${envUrl}/map/icon/${v.id}.jpg`} alt="" />
                </div>
              </div>
            </div>
          </div>
        ))}

        {/* 定位小图标 */}
        {maoData2.map((v) => (
          <div
            key={v.id}
            className={classNames(
              "A0iconSmBox",
              v.type === "right" ? "A0iconSmBoxR" : ""
            )}
            style={{
              top: v.y,
              left: v.x,
              bottom: v.b,
              right: v.r,
              zIndex: v.ind,
            }}
          >
            <img className="ic2Img1" src={iconImg2} alt="" />
            <img className="ic2Img2" src={iconImg2Ac} alt="" />

            {/* 文字标题 */}
            <div className={classNames("ic2txtBox", `ic2txtBox${v.id}`)}>
              {v.name}
            </div>

            {/* 悬停出来的图片和名称 */}
            <div
              className={classNames(
                "ic2HoverBox",
                v.type === "right" ? "ic2HoverBox2" : ""
              )}
            >
              <div className="ic2HoverBoxll">{v.name}</div>
              <div className="ic2HoverBoxrr">
                <img src={`${envUrl}/map/icon/${v.id}.jpg`} alt="" />
              </div>
            </div>
          </div>
        ))}

        <div className="mapBac">
          <img src={`${envUrl}/map/1.jpg`} alt="" />
        </div>
      </div>
      <div className="yunBox">
        <div className="yunSon1"></div>
        <div className="yunSon2"></div>
      </div>
    </div>
  );
}

const MemoA0Map = React.memo(A0Map);

export default MemoA0Map;