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

import React, { useCallback, useEffect, useRef, useState } from "react";
import styles from "./index.module.scss";
import classNames from "classnames";
import { envUrl } from "@/utils/env";
import { imgLodingFu, 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";
import MapSon from "./MapSon";
import { useSelector } from "react-redux";
import { RootState } from "@/store";
import { domShowFu } from "@/utils/domShow";

type Props = {
  type: number;
  sonChaneType: (val: number) => void;
};

function A0Map({ type, sonChaneType }: Props) {
  // 进页面显示加载中
  useEffect(() => {
    domShowFu("#AsyncSpinLoding", true);
  }, []);

  // 一级地图 图片的加载
  const imgLodingArr = useSelector(
    (state: RootState) => state.A0layout.imgLodingArr
  );

  // 控制二级地图的显示
  const [mapSon, setMapSon] = useState(0);

  // 大图片是否已经加载完
  const isImgLodingFu = useCallback(() => {
    let flag = false;

    if (imgLodingArr.includes(mapSon)) {
      domShowFu("#AsyncSpinLoding", false);
      flag = true;
    }

    return flag;
  }, [imgLodingArr, mapSon]);

  // 开场动画帧的变化
  const [moveInd, setMoveInd] = useState(0);
  const moveTime = useRef(-1);
  const moveYun = useCallback(() => {
    if (!isImgLodingFu()) {
      clearInterval(moveTime.current);
      let num = 0;
      moveTime.current = window.setInterval(() => {
        setMoveInd(num);
        num++;
        if (num > 30 || isImgLodingFu()) {
          clearInterval(moveTime.current);
        }
      }, 50);
    }
  }, [isImgLodingFu]);

  useEffect(() => {
    moveYun();

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

  // 鼠标hover
  const [isHover, setIsHover] = useState(0);

  return (
    <div className={styles.A0Map}>
      {/* 开场动画帧 */}
      <div
        className={classNames(
          "videoBoxMove",
          isImgLodingFu() ? "videoBoxHide" : ""
        )}
      >
        <img src={`${envUrl}/yunMove/yan_${moveInd}.png`} alt="" />
      </div>

      {/* 一级地图 */}
      <div
        className={classNames(
          "mapMain",
          type === 2 ? "mapMain2" : type === 3 ? "mapMain3" : ""
        )}
      >
        {/* 定位大图标 */}
        {mapData1.map((v) => (
          <div
            onMouseEnter={() => setIsHover(v.id)}
            onMouseLeave={() => setIsHover(0)}
            onClick={() => {
              setMapSon(v.id);
              sonChaneType(2);
            }}
            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"
              hidden={
                (isHover === 2 && v.id === 1) || (isHover === 1 && v.id === 2)
              }
            >
              <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
            onClick={() => {
              window.open(v.link);
              // setMapSon(v.id);
              sonChaneType(3);
            }}
            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
            onLoad={() => imgLodingFu(0)}
            src={`${envUrl}/map/0.jpg`}
            alt=""
          />
        </div>
      </div>

      {/* 二级地图 */}
      {mapSon ? <MapSon sId={mapSon} /> : null}

      {/* <div className="yunBox">
        <div className="yunSon1"></div>
        <div className="yunSon2"></div>
        <div className="yunSon3"></div>
      </div> */}

      {/* 左下角的返回 */}
      {mapSon ? (
        <div className="sonToBack" onClick={() => setMapSon(0)}>
          <img src={`${envUrl}/map/map${mapSon}.png`} alt="" />
        </div>
      ) : null}
    </div>
  );
}

const MemoA0Map = React.memo(A0Map);

export default MemoA0Map;