106 lines
4.1 KiB
JavaScript
106 lines
4.1 KiB
JavaScript
import { useContext } from "react";
|
|
import { CSSTransition, SwitchTransition } 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 {
|
|
changeBottomUtilsAnimationMittKey,
|
|
changeContentAnimationKeyMittKey,
|
|
changePeopleTrajectorySelectVisibleMittKey,
|
|
clickBackMittKey,
|
|
clickBranchOfficePointMittKey,
|
|
clickPortPointMittKey,
|
|
deletePeoplePositionPointMittKey,
|
|
resetAllBottomUtilsCheckMittKey,
|
|
resetBottomCurrentIndexMittKey,
|
|
} from "~/pages/Container/Map/js/mittKey";
|
|
import "./index.less";
|
|
|
|
function Header(props) {
|
|
const { currentPort, currentBranchOffice, mapMethods, area } = useContext(Context);
|
|
|
|
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(changeBottomUtilsAnimationMittKey);
|
|
mitt.emit(resetBottomCurrentIndexMittKey);
|
|
mitt.emit(resetAllBottomUtilsCheckMittKey);
|
|
mitt.emit(clickBackMittKey);
|
|
mitt.emit(changeContentAnimationKeyMittKey);
|
|
mitt.emit(changePeopleTrajectorySelectVisibleMittKey, false);
|
|
};
|
|
|
|
return (
|
|
<div className="map_content_header_container">
|
|
<SwitchTransition>
|
|
<CSSTransition
|
|
timeout={1000}
|
|
classNames={{
|
|
enter: "animate__animated",
|
|
enterActive: "animate__animated animate__fadeInDown",
|
|
exit: "animate__animated",
|
|
exitActive: "animate__animated animate__fadeOutUp",
|
|
}}
|
|
unmountOnExit
|
|
key={currentBranchOffice || 1}
|
|
>
|
|
<header
|
|
className={`${props.headerTitle === "秦港股份安全监管平台" ? "port" : "branch_office"}`}
|
|
style={{ backgroundImage: `url(${props.headerTitle === "秦港股份安全监管平台" ? topImg1 : topImg2})` }}
|
|
>
|
|
{(currentPort && props.headerTitle === "秦港股份安全监管平台") && (
|
|
<div
|
|
style={{ backgroundImage: `url(${backImg1})` }}
|
|
className="back"
|
|
onClick={onBack}
|
|
/>
|
|
)}
|
|
{props.headerTitle !== "秦港股份安全监管平台" && (
|
|
<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" />
|
|
</header>
|
|
</CSSTransition>
|
|
</SwitchTransition>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Header;
|