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

import { AnimatePresence, motion } from "motion/react";
import { useContext } from "react";
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 headerAnimation = {
  initial: { y: -100, opacity: 0 },
  animate: { y: 0, opacity: 1, transition: { duration: 0.5, ease: "easeOut" } },
  exit: { y: -100, opacity: 0, transition: { duration: 0.3, ease: "easeIn" } },
};

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

  const isPortTitle = props.headerTitle === "秦港股份安全监管平台";

  const onBack = () => {
    sessionStorage.removeItem("mapCurrentBranchOfficeId");
    mitt.emit(deletePeoplePositionPointMittKey);
    if (!currentPort) {
      window.close();
      setTimeout(() => {
        if (!window.closed && !window.opener) {
          window.location.href = "https://gbs-gateway.qhdsafety.com/";
        }
      }, 500);
    }
    else 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();
      mapMethods.current.removeFourColorDiagram();
      mapMethods.current.removeWall();
      // 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">
      <AnimatePresence mode="wait">
        <motion.header
          key={props.headerTitle}
          {...headerAnimation}
          className={isPortTitle ? "port" : "branch_office"}
          style={{ backgroundImage: `url(${isPortTitle ? topImg1 : topImg2})` }}
        >
          {isPortTitle
            ? <div style={{ backgroundImage: `url(${backImg1})` }} className="back" onClick={onBack} />
            : (
                <div className="back" onClick={onBack}>
                  <img src={backImg2} alt="" />
                  <div>返回</div>
                </div>
              )}
          <div className="title">{props.headerTitle}</div>
          <div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
        </motion.header>
      </AnimatePresence>
    </div>
  );
}

export default Header;