地图

2026-01-08 14:57:25 +08:00 · 2026-01-08 14:57:25 +08:00 · f66152bdff
parent 66d31d2a78
commit f66152bdff
12 changed files with 213 additions and 269 deletions
--- 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)}
            >
              <div className="label">{item.label}</div>
-              <CSSTransition
-                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
-              >
+              {(isCurrentActive && item.list?.length > 0) && (
                <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
-                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
-              >
+              {(isCurrentActive && item.list?.length > 0) && (
                <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>
-        <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>
+      {renderUtils()}
    </div>
  );
 }
--- 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 (
    <div className="map_content_center_options_container">
-      <CSSTransition
-        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
-      >
+      {(currentPort === "00003" && !currentBranchOffice && !pureMap) && (
        <div>
          <div className="center_options">
            <div
@ -96,7 +81,7 @@ function CenterUtils(props) {
            )}
          </div>
        </div>
-      </CSSTransition>
+      )}
    </div>
  );
 }
--- a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/echarts.js
+++ b/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/echarts.js
--- a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/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="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;
--- a/src/pages/Container/Map/components/Content/branchOffice/IndexLeft/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);

--- a/src/pages/Container/Map/components/Content/branchOffice/IndexRight/index.js
+++ 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;
--- 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>
  );
 }
--- 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;
+        }
      }
    }
  }
--- 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>
  );
 }
--- 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>
  );
 }
--- 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";
 // 将人员定位列表提供给人员轨迹选择窗口
--- 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);
  };

  // 标记点位点击