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

import { useContext, useEffect, useState } from "react";
import { CSSTransition } from "react-transition-group";
import backImg from "~/assets/images/map_bi/back.png";
import guangImg from "~/assets/images/map_bi/guang.png";
import topImg from "~/assets/images/map_bi/top.png";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import {
  changeBottomUtilsAnimationMittKey,
  changeContentAnimationKeyMittKey,
  changePeopleTrajectorySelectVisibleMittKey,
  clickBackMittKey,
  clickBranchOfficePointMittKey,
  clickPortPointMittKey,
  deletePeoplePositionPointMittKey,
  resetAllBottomUtilsCheckMittKey,
  resetBottomCurrentIndexMittKey,
} from "~/pages/Container/Map/js/mittKey";
import "./index.less";

function Header() {
  const { currentPort, currentBranchOffice, mapMethods, area } = useContext(Context);

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

  useEffect(() => {
    setAnimationKey(Math.random());
  }, []);

  const onBack = () => {
    mitt.emit(deletePeoplePositionPointMittKey);
    if (currentPort !== "00003" && currentBranchOffice) {
      mitt.emit(clickPortPointMittKey, { id: "" });
      mitt.emit(clickBranchOfficePointMittKey, { id: "" });
      mapMethods.current.removeWall();
      mapMethods.current.removeFourColorDiagram();
      mapMethods.current.removeBranchOfficePoint();
      mapMethods.current.removeMarkPoint();
      mapMethods.current.flyTo();
      mapMethods.current.addPortPoint();
    }
    else if (currentBranchOffice) {
      mitt.emit(clickBranchOfficePointMittKey, { id: "" });
      mapMethods.current.removeBranchOfficePoint();
      mapMethods.current.removeMarkPoint();
      mapMethods.current.returnPreviousCenterPoint();
      setTimeout(() => {
        mapMethods.current.addBranchOfficePoint(area);
      }, 2000);
    }
    else if (currentPort) {
      mitt.emit(clickPortPointMittKey, { id: "" });
      mapMethods.current.removeWall();
      mapMethods.current.removeFourColorDiagram();
      mapMethods.current.removeBranchOfficePoint();
      mapMethods.current.removeMarkPoint();
      mapMethods.current.flyTo();
      mapMethods.current.addPortPoint();
    }
    mitt.emit(changeBottomUtilsAnimationMittKey);
    mitt.emit(resetBottomCurrentIndexMittKey);
    mitt.emit(resetAllBottomUtilsCheckMittKey);
    mitt.emit(clickBackMittKey);
    mitt.emit(changeContentAnimationKeyMittKey);
    mitt.emit(changePeopleTrajectorySelectVisibleMittKey, false);
  };

  return (
    <div className="header_container">
      <CSSTransition
        in={animationKey !== 0}
        timeout={1000}
        classNames={{
          enter: "animate__animated",
          enterActive: "animate__animated animate__fadeInDown",
          exit: "animate__animated",
          exitActive: "animate__animated animate__fadeOutUp",
        }}
        unmountOnExit
      >
        <header style={{ backgroundImage: `url(${topImg})` }}>
          <CSSTransition
            in={!!(currentPort || currentBranchOffice)}
            timeout={1000}
            classNames={{
              enter: "animate__animated",
              enterActive: "animate__animated animate__fadeInDown",
              exit: "animate__animated",
              exitActive: "animate__animated animate__fadeOutUp",
            }}
            unmountOnExit
          >
            <div
              style={{ backgroundImage: `url(${backImg})` }}
              className="back"
              onClick={onBack}
            />
          </CSSTransition>
          <div className="title">秦港股份安全监管平台</div>
          <div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
        </header>
      </CSSTransition>
    </div>
  );
}

export default Header;