98 lines
3.7 KiB
JavaScript
98 lines
3.7 KiB
JavaScript
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;
|