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

import { 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 { useHeaderAnimation } from "./useHeaderAnimation";
import "./index.less";

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

  const { controls, displayedTitle } = useHeaderAnimation(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">
      <motion.header
        animate={controls}
        className={`${displayedTitle === "秦港股份安全监管平台" ? "port" : "branch_office"}`}
        style={{ backgroundImage: `url(${displayedTitle === "秦港股份安全监管平台" ? topImg1 : topImg2})` }}
      >
        {(displayedTitle === "秦港股份安全监管平台") && (
          <div style={{ backgroundImage: `url(${backImg1})` }} className="back" onClick={onBack} />
        )}
        {displayedTitle !== "秦港股份安全监管平台" && (
          <div className="back" onClick={onBack}>
            <img src={backImg2} alt="" />
            <div>返回</div>
          </div>
        )}
        <div className="title">{displayedTitle}</div>
        <div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
      </motion.header>
    </div>
  );
}

export default Header;