From f66152bdffec372db85ea99b03c6e6e4f83ccf16 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Thu, 8 Jan 2026 14:57:25 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Map/components/BottomUtils/index.js | 51 +----- .../Map/components/CenterUtils/index.js | 19 +-- .../{Index => IndexLeft}/echarts.js | 0 .../{Index => IndexLeft}/index.js | 6 +- .../{Index => IndexLeft}/index.less | 2 +- .../Content/branchOffice/IndexRight/index.js | 7 + .../Container/Map/components/Content/index.js | 128 ++++++++------- .../Map/components/Content/index.less | 149 +++++++++++------- .../Container/Map/components/Header/index.js | 59 +++---- .../Map/components/RightUtils/index.js | 51 ++---- src/pages/Container/Map/js/mittKey.js | 4 - src/pages/Container/Map/js/pointClickEvent.js | 6 - 12 files changed, 213 insertions(+), 269 deletions(-) rename src/pages/Container/Map/components/Content/branchOffice/{Index => IndexLeft}/echarts.js (100%) rename src/pages/Container/Map/components/Content/branchOffice/{Index => IndexLeft}/index.js (99%) rename src/pages/Container/Map/components/Content/branchOffice/{Index => IndexLeft}/index.less (99%) create mode 100644 src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js diff --git a/src/pages/Container/Map/components/BottomUtils/index.js b/src/pages/Container/Map/components/BottomUtils/index.js index 64e4147..889a4d2 100644 --- a/src/pages/Container/Map/components/BottomUtils/index.js +++ b/src/pages/Container/Map/components/BottomUtils/index.js @@ -1,5 +1,4 @@ import { useContext, useEffect, useState } from "react"; -import { CSSTransition, SwitchTransition } from "react-transition-group"; import bg7 from "~/assets/images/map_bi/bottom_utils/bg7.png"; import bg8 from "~/assets/images/map_bi/bottom_utils/bg8.png"; import titleImg from "~/assets/images/map_bi/bottom_utils/title.png"; @@ -8,8 +7,6 @@ import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUt import { Context } from "~/pages/Container/Map/js/context"; import mitt from "~/pages/Container/Map/js/mitt"; import { - changeBottomUtilsAnimationMittKey, - changeContentAnimationKeyMittKey, deletePeoplePositionPointMittKey, initBottomUtilsMittKey, resetAllBottomUtilsCheckMittKey, @@ -47,8 +44,6 @@ function BottomUtils(props) { }, [currentBranchOffice]); useEffect(() => { - mitt.on(changeBottomUtilsAnimationMittKey, () => { - }); mitt.on(resetBottomCurrentIndexMittKey, () => { props.setBottomUtilsCurrentIndex(-1); }); @@ -59,7 +54,6 @@ function BottomUtils(props) { }); return () => { - mitt.off(changeBottomUtilsAnimationMittKey); mitt.off(resetBottomCurrentIndexMittKey); mitt.off(resetAllBottomUtilsCheckMittKey); mitt.off(deletePeoplePositionPointMittKey); @@ -68,7 +62,6 @@ function BottomUtils(props) { const optionsClick = (index) => { props.setBottomUtilsCurrentIndex(bottomUtilsCurrentIndex === index ? -1 : index); - mitt.emit(changeContentAnimationKeyMittKey); }; const optionsItemsClick = (index, index1, item, item1) => { @@ -98,17 +91,7 @@ function BottomUtils(props) { onClick={() => optionsClick(index)} >
{item.label}
- 0} - timeout={500} - classNames={{ - enter: "animate__animated animate__faster", - enterActive: "animate__animated animate__faster animate__fadeInUp", - exit: "animate__animated animate__faster", - exitActive: "animate__animated animate__faster animate__fadeOutDown", - }} - unmountOnExit - > + {(isCurrentActive && item.list?.length > 0) && (
{item.list?.map((item1, index1) => (
))}
- + )}
); })} @@ -150,17 +133,7 @@ function BottomUtils(props) { > {item.label} - 0} - 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 - > + {(isCurrentActive && item.list?.length > 0) && (
{item.list?.map((item1, index1) => (
))}
- + )}
); })} @@ -193,21 +166,7 @@ function BottomUtils(props) { return (
- - - {renderUtils()} - - + {renderUtils()}
); } diff --git a/src/pages/Container/Map/components/CenterUtils/index.js b/src/pages/Container/Map/components/CenterUtils/index.js index b626ad5..3f54f60 100644 --- a/src/pages/Container/Map/components/CenterUtils/index.js +++ b/src/pages/Container/Map/components/CenterUtils/index.js @@ -1,5 +1,4 @@ import { useContext, useState } from "react"; -import { CSSTransition } from "react-transition-group"; import statisticsTitleImg from "~/assets/images/map_bi/center_utils/statistics_title.png"; import guangImg from "~/assets/images/map_bi/center_utils/tabguang.png"; import tabLeftImg from "~/assets/images/map_bi/center_utils/tableft.png"; @@ -11,8 +10,6 @@ import tabRightOnImg from "~/assets/images/map_bi/center_utils/tabright_on.png"; import { Context } from "~/pages/Container/Map/js/context"; import mitt from "~/pages/Container/Map/js/mitt"; import { - changeBottomUtilsAnimationMittKey, - changeContentAnimationKeyMittKey, deletePeoplePositionPointMittKey, resetAllBottomUtilsCheckMittKey, resetBottomCurrentIndexMittKey, @@ -34,26 +31,14 @@ function CenterUtils(props) { props.setArea(list[index].area); mapMethods.current.removeBranchOfficePoint(); mapMethods.current.addBranchOfficePoint(list[index].area); - mitt.emit(changeBottomUtilsAnimationMittKey); mitt.emit(resetBottomCurrentIndexMittKey); mitt.emit(resetAllBottomUtilsCheckMittKey); mitt.emit(deletePeoplePositionPointMittKey); - mitt.emit(changeContentAnimationKeyMittKey); }; return (
- + {(currentPort === "00003" && !currentBranchOffice && !pureMap) && (
- + )}
); } diff --git a/src/pages/Container/Map/components/Content/branchOffice/Index/echarts.js b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/echarts.js similarity index 100% rename from src/pages/Container/Map/components/Content/branchOffice/Index/echarts.js rename to src/pages/Container/Map/components/Content/branchOffice/IndexLeft/echarts.js diff --git a/src/pages/Container/Map/components/Content/branchOffice/Index/index.js b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js similarity index 99% rename from src/pages/Container/Map/components/Content/branchOffice/Index/index.js rename to src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js index 91fcb7e..fdec04c 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/Index/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.js @@ -44,7 +44,7 @@ const weatherIconMap = { 默认: SunIcon, }; -function Index() { +function IndexLeft() { const [weatherData, setWeatherData] = useState({ text: "晴天", temp: "36.5", @@ -142,7 +142,7 @@ function Index() { }, []); return ( -
+
<div className="options"> @@ -275,4 +275,4 @@ function Index() { ); } -export default Index; +export default IndexLeft; diff --git a/src/pages/Container/Map/components/Content/branchOffice/Index/index.less b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.less similarity index 99% rename from src/pages/Container/Map/components/Content/branchOffice/Index/index.less rename to src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.less index ca64d2f..9bea5cc 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/Index/index.less +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/index.less @@ -1,4 +1,4 @@ -.branch_office_index { +.branch_office_index_left { .block1 { background-color: rgba(12, 28, 88, 0.4); diff --git a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js new file mode 100644 index 0000000..2d80263 --- /dev/null +++ b/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js @@ -0,0 +1,7 @@ +function IndexRight() { + return ( + <div className="branch_office_index_right"></div> + ); +} + +export default IndexRight; diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js index 4ad80d7..21a543a 100644 --- a/src/pages/Container/Map/components/Content/index.js +++ b/src/pages/Container/Map/components/Content/index.js @@ -1,12 +1,12 @@ -import { useContext, useEffect, useState } from "react"; -import { CSSTransition, SwitchTransition } from "react-transition-group"; +import { useContext, useState } from "react"; import collapseMenuImg1 from "~/assets/images/map_bi/content/collapse_menu1.png"; import collapseMenuImg2 from "~/assets/images/map_bi/content/collapse_menu2.png"; import collapseMenuBg1 from "~/assets/images/map_bi/content/collapse_menu_bg1.png"; import collapseMenuBg2 from "~/assets/images/map_bi/content/collapse_menu_bg2.png"; import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList"; import { portUtilsList } from "~/pages/Container/Map/components/BottomUtils/portUtilsList"; -import BranchOfficeIndex from "~/pages/Container/Map/components/Content/branchOffice/Index"; +import BranchOfficeIndexLeft from "~/pages/Container/Map/components/Content/branchOffice/IndexLeft"; +import BranchOfficeIndexRight from "~/pages/Container/Map/components/Content/branchOffice/IndexRight"; import IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo"; import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi"; import PortIndex from "~/pages/Container/Map/components/Content/port/Index"; @@ -17,33 +17,13 @@ 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 [collapseLeft, setCollapseLeft] = useState(false); + const [collapseRight, setCollapseRight] = useState(false); const renderPortContent = () => { const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? portUtilsList[bottomUtilsCurrentIndex].type : ""; @@ -65,72 +45,98 @@ function Content() { return <PortFengBi />; }; - const renderBranchOfficeContent = () => { + const renderBranchOfficeContentLeft = () => { const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? branchOfficeUtilsList[bottomUtilsCurrentIndex].type : ""; - if (bottomUtilsCurrentType === "") - return <BranchOfficeIndex />; + if (bottomUtilsCurrentType === "") { + return <BranchOfficeIndexLeft />; + } + }; + + const renderBranchOfficeContentRight = () => { + const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? branchOfficeUtilsList[bottomUtilsCurrentIndex].type : ""; + if (bottomUtilsCurrentType === "") { + return <BranchOfficeIndexRight />; + } }; const renderContent = () => { - if (pureMap || collapse) + if (pureMap) return null; return ( - <div className={`map_content_container__content ${currentPort === "00003" && !currentBranchOffice ? "port" : "branch_office"}`}> - {!currentPort && <IndexInfo />} - {(currentPort === "00003" && !currentBranchOffice) && renderPortContent()} - {currentBranchOffice && renderBranchOfficeContent()} - </div> + <> + {!collapseLeft && ( + <div + className={`map_content_container__content ${(!currentPort || (currentPort === "00003" && !currentBranchOffice)) ? "port" : "branch_office"}`} + style={{ left: 35 }} + > + {!currentPort && <IndexInfo />} + {(currentPort === "00003" && !currentBranchOffice) && renderPortContent()} + {currentBranchOffice && renderBranchOfficeContentLeft()} + </div> + )} + {!collapseRight && ( + <div + className={`map_content_container__content ${(!currentPort || (currentPort === "00003" && !currentBranchOffice)) ? "port" : "branch_office"}`} + style={{ right: 35 }} + > + {currentBranchOffice && renderBranchOfficeContentRight()} + </div> + )} + </> ); }; const renderCollapseMenu = () => { if (pureMap) return null; + if (currentPort === "00003" && !currentBranchOffice) { return ( <div - className={`collapse_menu port ${collapse ? "active" : ""}`} + className={`collapse_menu port left ${collapseLeft ? "active" : ""}`} style={{ backgroundImage: `url(${collapseMenuBg1})` }} - onClick={onChangeCollapse} + onClick={() => { + setCollapseLeft(!collapseLeft); + }} > <img src={collapseMenuImg1} alt="" /> </div> ); } + if (currentBranchOffice) { return ( - <div - className={`collapse_menu branch_office ${collapse ? "active" : ""}`} - style={{ backgroundImage: `url(${collapseMenuBg2})` }} - onClick={onChangeCollapse} - > - <img src={collapseMenuImg2} alt="" /> - </div> + <> + <div + className={`collapse_menu branch_office left ${collapseLeft ? "active" : ""}`} + style={{ backgroundImage: `url(${collapseMenuBg2})` }} + onClick={() => { + setCollapseLeft(!collapseLeft); + }} + > + <img src={collapseMenuImg2} alt="" /> + </div> + {bottomUtilsCurrentIndex === -1 && ( + <div + className={`collapse_menu branch_office right ${collapseRight ? "active" : ""}`} + style={{ backgroundImage: `url(${collapseMenuBg2})` }} + onClick={() => { + setCollapseRight(!collapseRight); + }} + > + <img src={collapseMenuImg2} 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> + {renderContent()} + {renderCollapseMenu()} </div> ); } diff --git a/src/pages/Container/Map/components/Content/index.less b/src/pages/Container/Map/components/Content/index.less index 20559df..a2c7199 100644 --- a/src/pages/Container/Map/components/Content/index.less +++ b/src/pages/Container/Map/components/Content/index.less @@ -1,87 +1,130 @@ .map_content_container { + // 定义循环混合宏 + .loop (@i: 1) when (@i <= 5) { + .line-@{i} { + // 第1行：单行省略 + & when (@i = 1) { + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + // 第2-5行：多行省略 + & when not (@i = 1) { + display: -webkit-box !important; + overflow: hidden; + text-overflow: ellipsis; + word-break: break-all; + -webkit-line-clamp: @i; + -webkit-box-orient: vertical !important; + } + } + // 递归调用 + .loop(@i + 1); + } + + // 执行循环 + .loop(); + &__content { width: 430px; position: absolute; - left: 35px; - &.port{ + &.port { top: 75px; max-height: calc(100vh - 75px); } - &.branch_office{ + &.branch_office { top: 70px; max-height: calc(100vh - 70px); } - - // 定义循环混合宏 - .loop (@i: 1) when (@i <= 5) { - .line-@{i} { - // 第1行：单行省略 - & when (@i = 1) { - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - } - - // 第2-5行：多行省略 - & when not (@i = 1) { - display: -webkit-box !important; - overflow: hidden; - text-overflow: ellipsis; - word-break: break-all; - -webkit-line-clamp: @i; - -webkit-box-orient: vertical !important; - } - } - // 递归调用 - .loop(@i + 1); - } - - // 执行循环 - .loop(); } .collapse_menu { position: absolute; - left: 465px; top: calc(50vh - 44.5px); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; - &.active { - left: 0; + &.left { + left: 465px; + + &.active { + left: 0; + + img { + transform: translate(-50%, -50%) rotate(180deg); + } + } img { - transform: translate(-50%, -50%) rotate(180deg); + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) rotate(0); + } + + &.port { + width: 30px; + height: 89px; + + img { + width: 10px; + height: 17px; + } + } + + &.branch_office { + width: 33px; + height: 116px; + + img { + width: 13px; + height: 34px; + } } } - img { - position: absolute; - left: 50%; - top: 50%; - transform: translate(-50%, -50%) rotate(0); - } + &.right { + right: 465px; - &.port { - width: 30px; - height: 89px; + &.active { + right: 0; - .img { - width: 10px; - height: 17px; + img { + transform: translate(-50%, -50%) rotate(180deg); + } } - } - &.branch_office { - width: 33px; - height: 116px; + img { + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%) rotate(0); + } - .img { - width: 13px; - height: 34px; + &.port { + width: 30px; + height: 89px; + transform: rotate(180deg); + + img { + width: 10px; + height: 17px; + } + } + + &.branch_office { + width: 33px; + height: 116px; + transform: rotate(180deg); + + img { + width: 13px; + height: 34px; + } } } } diff --git a/src/pages/Container/Map/components/Header/index.js b/src/pages/Container/Map/components/Header/index.js index 5ec7179..351ae0a 100644 --- a/src/pages/Container/Map/components/Header/index.js +++ b/src/pages/Container/Map/components/Header/index.js @@ -1,5 +1,4 @@ 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"; @@ -8,8 +7,6 @@ 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, @@ -54,50 +51,34 @@ function Header(props) { 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> + <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> </div> ); } diff --git a/src/pages/Container/Map/components/RightUtils/index.js b/src/pages/Container/Map/components/RightUtils/index.js index 31f3a34..4e58703 100644 --- a/src/pages/Container/Map/components/RightUtils/index.js +++ b/src/pages/Container/Map/components/RightUtils/index.js @@ -1,14 +1,11 @@ import { message } from "antd"; import { useContext, useEffect, useState } from "react"; -import { CSSTransition, SwitchTransition } from "react-transition-group"; import tooltipImg2 from "~/assets/images/map_bi/right_utils/branch_office/bg11.png"; import buttonBg from "~/assets/images/map_bi/right_utils/branch_office/button.png"; import tooltipImg1 from "~/assets/images/map_bi/right_utils/port/tooltip.png"; import { Context } from "~/pages/Container/Map/js/context"; import mitt from "~/pages/Container/Map/js/mitt"; import { - changeBottomUtilsAnimationMittKey, - changeContentAnimationKeyMittKey, changePeopleTrajectorySelectVisibleMittKey, clickBackMittKey, clickMarkPointMittKey, @@ -21,7 +18,7 @@ import { portUtilsList } from "./portUtilsList"; import "./index.less"; function RightUtils(props) { - const { currentPort, mapMethods, pureMap, currentBranchOffice } = useContext(Context); + const { currentPort, mapMethods, pureMap, currentBranchOffice, bottomUtilsCurrentIndex } = useContext(Context); const [list, setList] = useState(portUtilsList); const [isShowChildLevel, setIsShowChildLevel] = useState(true); @@ -80,8 +77,6 @@ function RightUtils(props) { break; case "pureMap": props.setPureMap(!pureMap); - mitt.emit(changeBottomUtilsAnimationMittKey); - mitt.emit(changeContentAnimationKeyMittKey); break; case "weather": mitt.emit(clickMarkPointMittKey, { @@ -139,17 +134,7 @@ function RightUtils(props) { const renderBranchOfficeUtils = () => { return ( <div className="right_utils branch_office"> - <CSSTransition - in={isShowChildLevel} - timeout={500} - classNames={{ - enter: "animate__animated", - enterActive: "animate__animated animate__fadeInUp", - exit: "animate__animated", - exitActive: "animate__animated animate__fadeOutDown", - }} - unmountOnExit - > + {(isShowChildLevel && bottomUtilsCurrentIndex !== -1) && ( <div className="options"> { list.map((item, index) => ( @@ -164,34 +149,22 @@ function RightUtils(props) { )) } </div> - </CSSTransition> - <div - className={`bg ${isShowChildLevel ? "active" : ""}`} - onClick={() => setIsShowChildLevel(!isShowChildLevel)} - > - <img src={buttonBg} alt="" /> - </div> + )} + {bottomUtilsCurrentIndex !== -1 && ( + <div + className={`bg ${isShowChildLevel ? "active" : ""}`} + onClick={() => setIsShowChildLevel(!isShowChildLevel)} + > + <img src={buttonBg} alt="" /> + </div> + )} </div> ); }; return ( <div className="map_content_right_utils_container"> - <SwitchTransition> - <CSSTransition - timeout={1000} - classNames={{ - enter: "animate__animated", - enterActive: `animate__animated ${!currentBranchOffice ? "animate__fadeInRight" : "animate__fadeInUp"}`, - exit: "animate__animated", - exitActive: `animate__animated ${!currentBranchOffice ? "animate__fadeOutRight" : "animate__fadeOutDown"}`, - }} - unmountOnExit - key={currentBranchOffice || 1} - > - {!currentBranchOffice ? renderPortUtils() : renderBranchOfficeUtils()} - </CSSTransition> - </SwitchTransition> + {!currentBranchOffice ? renderPortUtils() : renderBranchOfficeUtils()} </div> ); } diff --git a/src/pages/Container/Map/js/mittKey.js b/src/pages/Container/Map/js/mittKey.js index 1c7c5a5..bcb85d7 100644 --- a/src/pages/Container/Map/js/mittKey.js +++ b/src/pages/Container/Map/js/mittKey.js @@ -6,8 +6,6 @@ export const clickBranchOfficePointMittKey = "clickBranchOfficePoint"; export const clickMarkPointMittKey = "clickMarkPoint"; // 点击左上角返回 export const clickBackMittKey = "clickBack"; -// 重新执行底部工具栏动画 -export const changeBottomUtilsAnimationMittKey = "changeBottomUtilsAnimation"; // 重置底部工具栏当前索引 export const resetBottomCurrentIndexMittKey = "resetBottomCurrentIndex"; // 重置所有底部工具栏选中状态 @@ -16,8 +14,6 @@ export const resetAllBottomUtilsCheckMittKey = "resetAllBottomUtilsCheck"; export const initBottomUtilsMittKey = "initBottomUtils"; // 改变覆盖蒙版显隐 export const changeCoverMaskVisibleMittKey = "changeCoverMaskVisible"; -// 改变内容动画显隐 -export const changeContentAnimationKeyMittKey = "changeContentAnimationKey"; // 改变人员轨迹选择窗口显隐 export const changePeopleTrajectorySelectVisibleMittKey = "changePeopleTrajectorySelectVisible"; // 将人员定位列表提供给人员轨迹选择窗口 diff --git a/src/pages/Container/Map/js/pointClickEvent.js b/src/pages/Container/Map/js/pointClickEvent.js index 3024d89..cb8c5c8 100644 --- a/src/pages/Container/Map/js/pointClickEvent.js +++ b/src/pages/Container/Map/js/pointClickEvent.js @@ -4,8 +4,6 @@ import PopupInfo from "../components/popup/js/PopupInfo"; import { getPosition } from "./mapUtils"; import mitt from "./mitt"; import { - changeBottomUtilsAnimationMittKey, - changeContentAnimationKeyMittKey, clickBranchOfficePointMittKey, clickMarkPointMittKey, clickPortPointMittKey, @@ -87,10 +85,8 @@ export default class PointClickEvent { sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId); } }, 2000); - mitt.emit(changeBottomUtilsAnimationMittKey); mitt.emit(resetBottomCurrentIndexMittKey); mitt.emit(resetAllBottomUtilsCheckMittKey); - mitt.emit(changeContentAnimationKeyMittKey); }; // 分公司点位点击 @@ -123,10 +119,8 @@ export default class PointClickEvent { mitt.emit(deletePeoplePositionPointMittKey); mitt.emit(clickBranchOfficePointMittKey, data); sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId); - mitt.emit(changeBottomUtilsAnimationMittKey); mitt.emit(resetBottomCurrentIndexMittKey); mitt.emit(resetAllBottomUtilsCheckMittKey); - mitt.emit(changeContentAnimationKeyMittKey); }; // 标记点位点击