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

import { useContext, useEffect, useRef, useState } from "react";
import { CSSTransition } from "react-transition-group";
import backImg1 from "~/assets/images/map_bi/back1.png";
import backImg2 from "~/assets/images/map_bi/back2.png";
import guangImg from "~/assets/images/map_bi/guang.png";
import topImg1 from "~/assets/images/map_bi/top1.png";
import topImg2 from "~/assets/images/map_bi/top2.png";
import { Context } from "~/pages/Container/Map/js/context";
import mitt from "~/pages/Container/Map/js/mitt";
import {
  changePeopleTrajectorySelectVisibleMittKey,
  clickBackMittKey,
  clickBranchOfficePointMittKey,
  clickPortPointMittKey,
  deletePeoplePositionPointMittKey,
  resetAllBottomUtilsCheckMittKey,
  resetBottomCurrentIndexMittKey,
} from "~/pages/Container/Map/js/mittKey";
import "./index.less";

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

  const [animationShow, setAnimationShow] = useState(false);
  const [displayTitle, setDisplayTitle] = useState(props.headerTitle);
  const timer = useRef(null);

  useEffect(() => {
    setAnimationShow(false);
    timer.current = setTimeout(() => {
      setDisplayTitle(props.headerTitle);
      setAnimationShow(true);
    }, animationTime);

    return () => {
      timer.current && clearTimeout(timer.current);
    };
  }, [props.headerTitle]);

  const onBack = () => {
    sessionStorage.removeItem("mapCurrentBranchOfficeId");
    mitt.emit(deletePeoplePositionPointMittKey);
    if (currentPort !== "00003" && currentBranchOffice) {
      mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" });
      mitt.emit(clickBranchOfficePointMittKey, { id: "", corpName: "秦港股份" });
      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: "", corpName: "秦港股份" });
      mapMethods.current.removeBranchOfficePoint();
      mapMethods.current.removeMarkPoint();
      mapMethods.current.returnPreviousCenterPoint();
      // setTimeout(() => {
      mapMethods.current.addBranchOfficePoint(area);
      // }, 2000);
    }
    else if (currentPort) {
      mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" });
      mapMethods.current.removeWall();
      mapMethods.current.removeFourColorDiagram();
      mapMethods.current.removeBranchOfficePoint();
      mapMethods.current.removeMarkPoint();
      mapMethods.current.flyTo();
      mapMethods.current.addPortPoint();
    }
    mitt.emit(resetBottomCurrentIndexMittKey);
    mitt.emit(resetAllBottomUtilsCheckMittKey);
    mitt.emit(clickBackMittKey);
    mitt.emit(changePeopleTrajectorySelectVisibleMittKey, false);
  };

  return (
    <div className="map_content_header_container">
      <CSSTransition
        timeout={animationTime}
        classNames={{
          enter: "animate__animated",
          enterActive: "animate__animated animate__fadeInDown",
          exit: "animate__animated",
          exitActive: "animate__animated animate__fadeOutUp",
        }}
        unmountOnExit
        in={animationShow}
      >
        <header
          className={`${displayTitle === "秦港股份安全监管平台" ? "port" : "branch_office"}`}
          style={{ backgroundImage: `url(${displayTitle === "秦港股份安全监管平台" ? topImg1 : topImg2})` }}
        >
          {(currentPort && displayTitle === "秦港股份安全监管平台") && (
            <div style={{ backgroundImage: `url(${backImg1})` }} className="back" onClick={onBack} />
          )}
          {displayTitle !== "秦港股份安全监管平台" && (
            <div className="back" onClick={onBack}>
              <img src={backImg2} alt="" />
              <div>返回</div>
            </div>
          )}
          <div className="title">{displayTitle}</div>
          <div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
        </header>
      </CSSTransition>
    </div>
  );
}

export default Header;