93 lines
3.5 KiB
JavaScript
93 lines
3.5 KiB
JavaScript
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 "./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() {
|
|
const { currentPort, currentBranchOffice, mapMethods, area, headerTitle, actions } = useContext(Context);
|
|
|
|
const isPortTitle = headerTitle === "秦港股份安全监管平台";
|
|
|
|
const onBack = () => {
|
|
sessionStorage.removeItem("mapCurrentBranchOfficeId");
|
|
if (!currentPort) {
|
|
window.close();
|
|
setTimeout(() => {
|
|
if (!window.closed && !window.opener) {
|
|
window.location.href = "https://gbs-gateway.qhdsafety.com/";
|
|
}
|
|
}, 500);
|
|
}
|
|
else if (currentPort !== "00003" && currentBranchOffice) {
|
|
actions.selectPort({ id: "", name: "秦港股份" });
|
|
actions.selectBranchOffice({ id: "", corpName: "秦港股份" });
|
|
mapMethods.current.removeWall();
|
|
mapMethods.current.removeFourColorDiagram();
|
|
mapMethods.current.removeBranchOfficePoint();
|
|
mapMethods.current.removeMarkPoint();
|
|
mapMethods.current.flyTo();
|
|
mapMethods.current.addPortPoint();
|
|
}
|
|
else if (currentBranchOffice) {
|
|
actions.selectBranchOffice({ 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) {
|
|
actions.selectPort({ id: "", name: "秦港股份" });
|
|
mapMethods.current.removeWall();
|
|
mapMethods.current.removeFourColorDiagram();
|
|
mapMethods.current.removeBranchOfficePoint();
|
|
mapMethods.current.removeMarkPoint();
|
|
mapMethods.current.flyTo();
|
|
mapMethods.current.addPortPoint();
|
|
}
|
|
actions.resetBottomUtils();
|
|
actions.resetRightUtils();
|
|
};
|
|
|
|
return (
|
|
<div className="map_content_header_container">
|
|
<AnimatePresence mode="wait">
|
|
<motion.header
|
|
key={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">{headerTitle}</div>
|
|
<div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
|
|
</motion.header>
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Header;
|