zcloud-gbs-bi-react/src/pages/Container/Map/components/RightUtils/index.js

import { useMount } from "ahooks";
import { message } from "antd";
import { useContext, useEffect, useRef, useState } from "react";
import { CSSTransition } from "react-transition-group";
import tooltipImg from "~/assets/images/map_bi/right_utils/tooltip.png";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import {
  changeBottomUtilsAnimationMittKey,
  changeContentAnimationKeyMittKey,
  changePeopleTrajectorySelectVisibleMittKey,
  clickBackMittKey,
  clickBranchOfficePointMittKey,
  clickMarkPointMittKey,
  deletePeoplePositionPointMittKey,
  resetAllBottomUtilsCheckMittKey,
} from "~/pages/Container/Map/js/mittKey";
import { utilsList } from "./utilsList";
import "./index.less";

function RightUtils(props) {
  const { currentPort, mapMethods, pureMap } = useContext(Context);

  const [list, setList] = useState(utilsList);
  const [animationKey, setAnimationKey] = useState(0);

  const corpinfoId = useRef("");

  useMount(() => {
    setAnimationKey(Math.random());

    mitt.on(clickBackMittKey, () => {
      setList(list.map((item, index) => index === 7 || index === 8 ? { ...item, check: false } : item));
    });

    mitt.on(clickBranchOfficePointMittKey, (data) => {
      mapMethods.current.removeFourColorDiagram();
      mapMethods.current.removeWall();

      setList(list.map((item, index) => index === 7 || index === 8 ? { ...item, check: false } : item));

      corpinfoId.current = data.corpinfoId ?? "";
    });

    return () => {
      mitt.off(clickBackMittKey);
      mitt.off(clickBranchOfficePointMittKey);
    };
  });

  useEffect(() => {
    setList(list.map((item, index) => index === 1 ? { ...item, check: props.isFullscreen } : item));
  }, [props.isFullscreen]);

  const clickRightTools = (index, type) => {
    let check;
    if (list[index].check !== undefined && list[index].checkImg) {
      check = !list[index].check;
      setList(list.map((item, i) => index === i ? { ...item, check: !item.check } : item));
    }

    switch (type) {
      case "back":
        // router.push("/");
        break;
      case "full":
        props.toggleFullscreen();
        break;
      case "return":
        mapMethods.current.returnCurrentCenterPoint();
        break;
      case "scene":
        mapMethods.current.changeSceneMode(check ? "2d" : "3d");
        break;
      case "del":
        mapMethods.current.removeMarkPoint();
        mitt.emit(resetAllBottomUtilsCheckMittKey);
        mitt.emit(deletePeoplePositionPointMittKey);
        mitt.emit(changePeopleTrajectorySelectVisibleMittKey, false);
        break;
      case "pureMap":
        props.setPureMap(!pureMap);
        mitt.emit(changeBottomUtilsAnimationMittKey);
        mitt.emit(changeContentAnimationKeyMittKey);
        break;
      case "weather":
        mitt.emit(clickMarkPointMittKey, {
          mapType: "_右侧_METEOROLOGICAL",
        });
        break;
      case "fourColor":
        if (!currentPort) {
          message.warning("请选择要查看的港口");
          setList(list.map((item, i) => index === i ? { ...item, check: false } : item));
          return;
        }
        if (check) {
          mapMethods.current.addFourColorDiagram(
            currentPort,
            corpinfoId.current,
          );
        }
        else {
          mapMethods.current.removeFourColorDiagram();
        }
        break;
      case "wall":
        if (!currentPort) {
          message.warning("请选择要查看的港口");
          setList(list.map((item, i) => index === i ? { ...item, check: false } : item));
          return;
        }
        if (check)
          mapMethods.current.addWall(currentPort, corpinfoId.current);
        else mapMethods.current.removeWall();
        break;
    }
  };

  return (
    <div className="right_utils_container">
      <CSSTransition
        in={animationKey !== 0}
        timeout={1000}
        classNames={{
          enter: "animate__animated",
          enterActive: "animate__animated animate__fadeInRight",
          exit: "animate__animated",
          exitActive: "animate__animated animate__fadeOutRight",
        }}
        unmountOnExit
      >
        <div className="right_utils">
          {
            list.map((item, index) => (
              <div
                key={index}
                className="option"
                onClick={() => clickRightTools(index, item.type)}
              >
                <div style={{ backgroundImage: `url(${tooltipImg})` }} className="tooltip">{item.label}</div>
                <img src={item.check ? item.checkImg : item.img} alt="" />
              </div>
            ))
          }
        </div>
      </CSSTransition>
    </div>
  );
}

export default RightUtils;