119 lines
4.1 KiB
JavaScript
119 lines
4.1 KiB
JavaScript
import { useContext, useEffect, useState } from "react";
|
|
import { CSSTransition, SwitchTransition } from "react-transition-group";
|
|
import collapseMenu from "~/assets/images/map_bi/content/collapse_menu.png";
|
|
import collapseMenuBg from "~/assets/images/map_bi/content/collapse_menu_bg.png";
|
|
import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/portUtilsList";
|
|
import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi";
|
|
import IndexInfo from "~/pages/Container/Map/components/Content/port/IndexInfo";
|
|
import PortMenJin from "~/pages/Container/Map/components/Content/port/MenJin";
|
|
import PortIndex from "~/pages/Container/Map/components/Content/port/PortIndex";
|
|
import PortQiXiang from "~/pages/Container/Map/components/Content/port/QiXiang";
|
|
import PortRenYuan from "~/pages/Container/Map/components/Content/port/RenYuan";
|
|
import PortWeiXian from "~/pages/Container/Map/components/Content/port/WeiXian";
|
|
import PortXiaoFang from "~/pages/Container/Map/components/Content/port/XiaoFang";
|
|
import PortZhongDian from "~/pages/Container/Map/components/Content/port/ZhongDian";
|
|
import { Context } from "~/pages/Container/Map/js/context";
|
|
import mitt from "~/pages/Container/Map/js/mitt";
|
|
import { changeContentAnimationKeyMittKey } from "~/pages/Container/Map/js/mittKey";
|
|
import "./index.less";
|
|
|
|
function Content() {
|
|
const { currentPort, currentBranchOffice, pureMap, bottomUtilsCurrentIndex } = useContext(Context);
|
|
|
|
const [animationKey, setAnimationKey] = useState(0);
|
|
const [collapse, setCollapse] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setAnimationKey(Math.random());
|
|
|
|
mitt.on(changeContentAnimationKeyMittKey, () => {
|
|
setAnimationKey(Math.random());
|
|
setCollapse(false);
|
|
});
|
|
|
|
return () => {
|
|
mitt.off(changeContentAnimationKeyMittKey);
|
|
};
|
|
}, []);
|
|
|
|
const onChangeCollapse = () => {
|
|
setAnimationKey(Math.random());
|
|
setCollapse(!collapse);
|
|
};
|
|
|
|
const renderPortContent = () => {
|
|
if (!currentBranchOffice) {
|
|
const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? portUtilsList[bottomUtilsCurrentIndex].type : "";
|
|
if (bottomUtilsCurrentType === "" || bottomUtilsCurrentType === "camera")
|
|
return <PortIndex />;
|
|
if (bottomUtilsCurrentType === "door")
|
|
return <PortMenJin />;
|
|
if (bottomUtilsCurrentType === "fire")
|
|
return <PortXiaoFang />;
|
|
if (bottomUtilsCurrentType === "danger")
|
|
return <PortWeiXian />;
|
|
if (bottomUtilsCurrentType === "weather")
|
|
return <PortQiXiang />;
|
|
if (bottomUtilsCurrentType === "people")
|
|
return <PortRenYuan />;
|
|
if (bottomUtilsCurrentType === "project")
|
|
return <PortZhongDian />;
|
|
if (bottomUtilsCurrentType === "closedArea")
|
|
return <PortFengBi />;
|
|
}
|
|
};
|
|
|
|
const renderContent = () => {
|
|
if (pureMap || collapse)
|
|
return null;
|
|
|
|
return (
|
|
<div className="map_content_container__content">
|
|
{!currentPort && <IndexInfo />}
|
|
{currentPort === "00003" && renderPortContent()}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const renderCollapseMenu = () => {
|
|
if (pureMap)
|
|
return null;
|
|
if (currentPort) {
|
|
return (
|
|
<div
|
|
className={`collapse_menu ${collapse ? "active" : ""}`}
|
|
style={{ backgroundImage: `url(${collapseMenuBg})` }}
|
|
onClick={onChangeCollapse}
|
|
>
|
|
<img src={collapseMenu} alt="" />
|
|
</div>
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="map_content_container">
|
|
<SwitchTransition>
|
|
<CSSTransition
|
|
timeout={500}
|
|
classNames={{
|
|
enter: "animate__animated animate__faster",
|
|
enterActive: "animate__animated animate__faster animate__fadeInLeft",
|
|
exit: "animate__animated animate__faster",
|
|
exitActive: "animate__animated animate__faster animate__fadeOutLeft",
|
|
}}
|
|
unmountOnExit
|
|
key={animationKey}
|
|
>
|
|
<div>
|
|
{renderContent()}
|
|
{renderCollapseMenu()}
|
|
</div>
|
|
</CSSTransition>
|
|
</SwitchTransition>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Content;
|