地图

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)}
             >
               <div className="label">{item.label}</div>
-              <CSSTransition
+              {(isCurrentActive && item.list?.length > 0) && (
-                in={isCurrentActive && item.list?.length > 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
-              >
                 <div className="items">
                   {item.list?.map((item1, index1) => (
                     <div
@@ -123,7 +106,7 @@ function BottomUtils(props) {
                     </div>
                   ))}
                 </div>
-              </CSSTransition>
+              )}
             </div>
           );
         })}
@@ -150,17 +133,7 @@ function BottomUtils(props) {
               >
                 {item.label}
               </div>
-              <CSSTransition
+              {(isCurrentActive && item.list?.length > 0) && (
-                in={isCurrentActive && item.list?.length > 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
-              >
                 <div className="items">
                   {item.list?.map((item1, index1) => (
                     <div
@@ -176,7 +149,7 @@ function BottomUtils(props) {
                     </div>
                   ))}
                 </div>
-              </CSSTransition>
+              )}
             </div>
           );
         })}
@@ -193,21 +166,7 @@ function BottomUtils(props) {
 
   return (
     <div className="map_content_bottom_utils_container">
-      <SwitchTransition>
+      {renderUtils()}
-        <CSSTransition
-          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
-          key={currentBranchOffice || currentPort}
-        >
-          {renderUtils()}
-        </CSSTransition>
-      </SwitchTransition>
     </div>
   );
 }

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 (
     <div className="map_content_center_options_container">
-      <CSSTransition
+      {(currentPort === "00003" && !currentBranchOffice && !pureMap) && (
-        in={(currentPort === "00003" && !currentBranchOffice && !pureMap)}
-        timeout={1000}
-        classNames={{
-          enter: "animate__animated",
-          enterActive: "animate__animated animate__fadeInDown",
-          exit: "animate__animated",
-          exitActive: "animate__animated animate__fadeOutUp",
-        }}
-        unmountOnExit
-      >
         <div>
           <div className="center_options">
             <div
@@ -96,7 +81,7 @@ function CenterUtils(props) {
             )}
           </div>
         </div>
-      </CSSTransition>
+      )}
     </div>
   );
 }

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="branch_office_index">
+    <div className="branch_office_index_left">
       <div className="block1">
         <Title title="天气预防情况" />
         <div className="options">
@@ -275,4 +275,4 @@ function Index() {
   );
 }
 
-export default Index;
+export default IndexLeft;

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);
 

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;

src/pages/Container/Map/components/Content/index.js

@@ -1,12 +1,12 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useState } from "react";
-import { CSSTransition, SwitchTransition } from "react-transition-group";
 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 [collapseLeft, setCollapseLeft] = useState(false);
-  const [collapse, setCollapse] = useState(false);
+  const [collapseRight, setCollapseRight] = 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 = () => {
     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 === "")
+    if (bottomUtilsCurrentType === "") {
-      return <BranchOfficeIndex />;
+      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 />}
+        {!collapseLeft && (
-        {(currentPort === "00003" && !currentBranchOffice) && renderPortContent()}
+          <div
-        {currentBranchOffice && renderBranchOfficeContent()}
+            className={`map_content_container__content ${(!currentPort || (currentPort === "00003" && !currentBranchOffice)) ? "port" : "branch_office"}`}
-      </div>
+            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" : ""}`}
+          <div
-          style={{ backgroundImage: `url(${collapseMenuBg2})` }}
+            className={`collapse_menu branch_office left ${collapseLeft ? "active" : ""}`}
-          onClick={onChangeCollapse}
+            style={{ backgroundImage: `url(${collapseMenuBg2})` }}
-        >
+            onClick={() => {
-          <img src={collapseMenuImg2} alt="" />
+              setCollapseLeft(!collapseLeft);
-        </div>
+            }}
+          >
+            <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>
+      {renderContent()}
-        <CSSTransition
+      {renderCollapseMenu()}
-          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>
   );
 }

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 {
-      left: 0;
+      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 {
+    &.right {
-      position: absolute;
+      right: 465px;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%) rotate(0);
-    }
 
-    &.port {
+      &.active {
-      width: 30px;
+        right: 0;
-      height: 89px;
 
-      .img {
+        img {
-        width: 10px;
+          transform: translate(-50%, -50%) rotate(180deg);
-        height: 17px;
+        }
       }
-    }
 
-    &.branch_office {
+      img {
-      width: 33px;
+        position: absolute;
-      height: 116px;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%) rotate(0);
+      }
 
-      .img {
+      &.port {
-        width: 13px;
+        width: 30px;
-        height: 34px;
+        height: 89px;
+        transform: rotate(180deg);
+
+        img {
+          width: 10px;
+          height: 17px;
+        }
+      }
+
+      &.branch_office {
+        width: 33px;
+        height: 116px;
+        transform: rotate(180deg);
+
+        img {
+          width: 13px;
+          height: 34px;
+        }
       }
     }
   }

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>
+      <header
-        <CSSTransition
+        className={`${props.headerTitle === "秦港股份安全监管平台" ? "port" : "branch_office"}`}
-          timeout={1000}
+        style={{ backgroundImage: `url(${props.headerTitle === "秦港股份安全监管平台" ? topImg1 : topImg2})` }}
-          classNames={{
+      >
-            enter: "animate__animated",
+        {(currentPort && props.headerTitle === "秦港股份安全监管平台") && (
-            enterActive: "animate__animated animate__fadeInDown",
+          <div
-            exit: "animate__animated",
+            style={{ backgroundImage: `url(${backImg1})` }}
-            exitActive: "animate__animated animate__fadeOutUp",
+            className="back"
-          }}
+            onClick={onBack}
-          unmountOnExit
+          />
-          key={currentBranchOffice || 1}
+        )}
-        >
+        {props.headerTitle !== "秦港股份安全监管平台" && (
-          <header
+          <div className="back" onClick={onBack}>
-            className={`${props.headerTitle === "秦港股份安全监管平台" ? "port" : "branch_office"}`}
+            <img src={backImg2} alt="" />
-            style={{ backgroundImage: `url(${props.headerTitle === "秦港股份安全监管平台" ? topImg1 : topImg2})` }}
+            <div>返回</div>
-          >
+          </div>
-            {(currentPort && props.headerTitle === "秦港股份安全监管平台") && (
+        )}
-              <div
+        <div className="title">{props.headerTitle}</div>
-                style={{ backgroundImage: `url(${backImg1})` }}
+        <div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
-                className="back"
+      </header>
-                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>
   );
 }

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
+        {(isShowChildLevel && bottomUtilsCurrentIndex !== -1) && (
-          in={isShowChildLevel}
-          timeout={500}
-          classNames={{
-            enter: "animate__animated",
-            enterActive: "animate__animated animate__fadeInUp",
-            exit: "animate__animated",
-            exitActive: "animate__animated animate__fadeOutDown",
-          }}
-          unmountOnExit
-        >
           <div className="options">
             {
               list.map((item, index) => (
@@ -164,34 +149,22 @@ function RightUtils(props) {
               ))
             }
           </div>
-        </CSSTransition>
+        )}
-        <div
+        {bottomUtilsCurrentIndex !== -1 && (
-          className={`bg ${isShowChildLevel ? "active" : ""}`}
+          <div
-          onClick={() => setIsShowChildLevel(!isShowChildLevel)}
+            className={`bg ${isShowChildLevel ? "active" : ""}`}
-        >
+            onClick={() => setIsShowChildLevel(!isShowChildLevel)}
-          <img src={buttonBg} alt="" />
+          >
-        </div>
+            <img src={buttonBg} alt="" />
+          </div>
+        )}
       </div>
     );
   };
 
   return (
     <div className="map_content_right_utils_container">
-      <SwitchTransition>
+      {!currentBranchOffice ? renderPortUtils() : renderBranchOfficeUtils()}
-        <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>
     </div>
   );
 }

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";
 // 将人员定位列表提供给人员轨迹选择窗口

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);
   };
 
   // 标记点位点击