diff --git a/src/assets/images/map_bi/back.png b/src/assets/images/map_bi/back1.png
similarity index 100%
rename from src/assets/images/map_bi/back.png
rename to src/assets/images/map_bi/back1.png
diff --git a/src/assets/images/map_bi/back2.png b/src/assets/images/map_bi/back2.png
new file mode 100644
index 0000000..406138d
Binary files /dev/null and b/src/assets/images/map_bi/back2.png differ
diff --git a/src/assets/images/map_bi/content/collapse_menu.png b/src/assets/images/map_bi/content/collapse_menu1.png
similarity index 100%
rename from src/assets/images/map_bi/content/collapse_menu.png
rename to src/assets/images/map_bi/content/collapse_menu1.png
diff --git a/src/assets/images/map_bi/content/collapse_menu2.png b/src/assets/images/map_bi/content/collapse_menu2.png
new file mode 100644
index 0000000..0bfa686
Binary files /dev/null and b/src/assets/images/map_bi/content/collapse_menu2.png differ
diff --git a/src/assets/images/map_bi/content/collapse_menu_bg.png b/src/assets/images/map_bi/content/collapse_menu_bg1.png
similarity index 100%
rename from src/assets/images/map_bi/content/collapse_menu_bg.png
rename to src/assets/images/map_bi/content/collapse_menu_bg1.png
diff --git a/src/assets/images/map_bi/content/collapse_menu_bg2.png b/src/assets/images/map_bi/content/collapse_menu_bg2.png
new file mode 100644
index 0000000..48cedec
Binary files /dev/null and b/src/assets/images/map_bi/content/collapse_menu_bg2.png differ
diff --git a/src/assets/images/map_bi/top.png b/src/assets/images/map_bi/top1.png
similarity index 100%
rename from src/assets/images/map_bi/top.png
rename to src/assets/images/map_bi/top1.png
diff --git a/src/assets/images/map_bi/top2.png b/src/assets/images/map_bi/top2.png
new file mode 100644
index 0000000..1133341
Binary files /dev/null and b/src/assets/images/map_bi/top2.png differ
diff --git a/src/pages/Container/Map/components/CenterUtils/index.less b/src/pages/Container/Map/components/CenterUtils/index.less
index c7b6a0a..994dd2e 100644
--- a/src/pages/Container/Map/components/CenterUtils/index.less
+++ b/src/pages/Container/Map/components/CenterUtils/index.less
@@ -1,4 +1,4 @@
-.center_options_container{
+.center_options_container {
   .center_options {
     width: 408px;
     position: absolute;
@@ -45,7 +45,7 @@
     }
   }
 
-  .statistics{
+  .statistics {
     width: 408px;
     position: absolute;
     top: 205px;
@@ -54,20 +54,23 @@
     gap: 5px;
     color: #fff;
 
-    .statistic{
+    .statistic {
       border-radius: 2px;
 
-      .title{
+      .title {
         padding: 3px 0;
         text-align: center;
         border-radius: 2px;
       }
-      .info{
+
+      .info {
         padding: 7px 14px;
         border: 1px solid rgb(44, 105, 172);
         border-radius: 2px;
         background-color: rgba(0, 41, 82, 0.722);
-        .value{}
+
+        .value {
+        }
       }
     }
   }
diff --git a/src/pages/Container/Map/components/Content/port/IndexInfo/index.js b/src/pages/Container/Map/components/Content/IndexInfo/index.js
similarity index 100%
rename from src/pages/Container/Map/components/Content/port/IndexInfo/index.js
rename to src/pages/Container/Map/components/Content/IndexInfo/index.js
diff --git a/src/pages/Container/Map/components/Content/port/IndexInfo/index.less b/src/pages/Container/Map/components/Content/IndexInfo/index.less
similarity index 85%
rename from src/pages/Container/Map/components/Content/port/IndexInfo/index.less
rename to src/pages/Container/Map/components/Content/IndexInfo/index.less
index b311e84..cb6ab27 100644
--- a/src/pages/Container/Map/components/Content/port/IndexInfo/index.less
+++ b/src/pages/Container/Map/components/Content/IndexInfo/index.less
@@ -1,22 +1,17 @@
 .index_info_container {
   .block1 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .options {
       display: flex;
       justify-content: space-between;
       padding: 10px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
 
       .option {
@@ -61,22 +56,17 @@
   }
 
   .block2 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
     margin-top: 10px;
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       display: flex;
       flex-wrap: wrap;
diff --git a/src/pages/Container/Map/components/Content/branchOffice/Index/index.js b/src/pages/Container/Map/components/Content/branchOffice/Index/index.js
new file mode 100644
index 0000000..9899f30
--- /dev/null
+++ b/src/pages/Container/Map/components/Content/branchOffice/Index/index.js
@@ -0,0 +1,9 @@
+import "./index.less";
+
+function Index() {
+  return (
+    <div>111</div>
+  );
+}
+
+export default Index;
diff --git a/src/pages/Container/Map/components/Content/branchOffice/Index/index.less b/src/pages/Container/Map/components/Content/branchOffice/Index/index.less
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js
index b3486bb..c9807d0 100644
--- a/src/pages/Container/Map/components/Content/index.js
+++ b/src/pages/Container/Map/components/Content/index.js
@@ -1,12 +1,16 @@
 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 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 IndexInfo from "~/pages/Container/Map/components/Content/IndexInfo";
 import PortFengBi from "~/pages/Container/Map/components/Content/port/FengBi";
-import IndexInfo from "~/pages/Container/Map/components/Content/port/IndexInfo";
+import PortIndex from "~/pages/Container/Map/components/Content/port/Index";
 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";
@@ -42,25 +46,29 @@ function Content() {
   };
 
   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 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 renderBranchOfficeContent = () => {
+    const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? branchOfficeUtilsList[bottomUtilsCurrentIndex].type : "";
+    if (bottomUtilsCurrentType === "")
+      return <BranchOfficeIndex />;
   };
 
   const renderContent = () => {
@@ -70,7 +78,8 @@ function Content() {
     return (
       <div className="map_content_container__content">
         {!currentPort && <IndexInfo />}
-        {currentPort === "00003" && renderPortContent()}
+        {(currentPort === "00003" && !currentBranchOffice) && renderPortContent()}
+        {currentBranchOffice && renderBranchOfficeContent()}
       </div>
     );
   };
@@ -78,14 +87,25 @@ function Content() {
   const renderCollapseMenu = () => {
     if (pureMap)
       return null;
-    if (currentPort) {
+    if (currentPort === "00003" && !currentBranchOffice) {
       return (
         <div
-          className={`collapse_menu ${collapse ? "active" : ""}`}
-          style={{ backgroundImage: `url(${collapseMenuBg})` }}
+          className={`collapse_menu port ${collapse ? "active" : ""}`}
+          style={{ backgroundImage: `url(${collapseMenuBg1})` }}
           onClick={onChangeCollapse}
         >
-          <img src={collapseMenu} alt="" />
+          <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>
       );
     }
diff --git a/src/pages/Container/Map/components/Content/index.less b/src/pages/Container/Map/components/Content/index.less
index ea63bf8..4a30c15 100644
--- a/src/pages/Container/Map/components/Content/index.less
+++ b/src/pages/Container/Map/components/Content/index.less
@@ -1,4 +1,4 @@
-.map_content_container{
+.map_content_container {
   &__content {
     width: 410px;
     position: absolute;
@@ -15,6 +15,7 @@
           white-space: nowrap;
           text-overflow: ellipsis;
         }
+
         // 第2-5行：多行省略
         & when not (@i = 1) {
           display: -webkit-box !important;
@@ -34,8 +35,6 @@
   }
 
   .collapse_menu {
-    width: 30px;
-    height: 89px;
     position: absolute;
     left: 445px;
     top: calc(50vh - 44.5px);
@@ -52,12 +51,30 @@
     }
 
     img {
-      width: 10px;
-      height: 17px;
       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;
+      }
+    }
   }
 }
diff --git a/src/pages/Container/Map/components/Content/port/FengBi/index.js b/src/pages/Container/Map/components/Content/port/FengBi/index.js
index 098029b..bb618ef 100644
--- a/src/pages/Container/Map/components/Content/port/FengBi/index.js
+++ b/src/pages/Container/Map/components/Content/port/FengBi/index.js
@@ -13,6 +13,7 @@ import "./index.less";
 
 const block2OptionsNavList = ["人员", "车辆"];
 const block3OptionsNavList = ["人员", "车辆"];
+
 function FengBi() {
   const [block1List, setBlock1List] = useState([
     { img: icon29, title: "堆场区", count1: 0, count2: 0 },
@@ -70,7 +71,7 @@ function FengBi() {
                       </div>
                     </div>
                     <div>
-                      <div className="label">车辆数 </div>
+                      <div className="label">车辆数</div>
                       <div className="value">
                         <CountUp end={+item.count2}></CountUp>
                       </div>
diff --git a/src/pages/Container/Map/components/Content/port/PortIndex/index.js b/src/pages/Container/Map/components/Content/port/Index/index.js
similarity index 99%
rename from src/pages/Container/Map/components/Content/port/PortIndex/index.js
rename to src/pages/Container/Map/components/Content/port/Index/index.js
index a7c3313..6bd4311 100644
--- a/src/pages/Container/Map/components/Content/port/PortIndex/index.js
+++ b/src/pages/Container/Map/components/Content/port/Index/index.js
@@ -20,7 +20,7 @@ import "./index.less";
 
 const block3OptionsNavList = ["分公司统计", "相关方单位统计"];
 
-function PortIndex() {
+function Index() {
   const { currentPort, area, currentBranchOffice } = useContext(Context);
 
   const [block1OptionsList, setBlock1OptionsList] = useState([
@@ -125,4 +125,4 @@ function PortIndex() {
   );
 }
 
-export default PortIndex;
+export default Index;
diff --git a/src/pages/Container/Map/components/Content/port/PortIndex/index.less b/src/pages/Container/Map/components/Content/port/Index/index.less
similarity index 83%
rename from src/pages/Container/Map/components/Content/port/PortIndex/index.less
rename to src/pages/Container/Map/components/Content/port/Index/index.less
index 652d948..f25588e 100644
--- a/src/pages/Container/Map/components/Content/port/PortIndex/index.less
+++ b/src/pages/Container/Map/components/Content/port/Index/index.less
@@ -1,22 +1,17 @@
 .port_index {
   .block1 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .options {
       display: flex;
       justify-content: space-between;
       padding: 10px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
 
       .option {
@@ -66,22 +61,17 @@
 
   .block2 {
     margin-top: 10px;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .options {
       display: flex;
       flex-wrap: wrap;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       padding: 10px;
 
@@ -134,20 +124,15 @@
 
   .block3 {
     margin-top: 10px;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .content {
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       padding: 10px;
 
diff --git a/src/pages/Container/Map/components/Content/port/MenJin/index.less b/src/pages/Container/Map/components/Content/port/MenJin/index.less
index 2821a66..4638022 100644
--- a/src/pages/Container/Map/components/Content/port/MenJin/index.less
+++ b/src/pages/Container/Map/components/Content/port/MenJin/index.less
@@ -1,22 +1,17 @@
 .menjin {
   .block1 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .options {
       display: flex;
       justify-content: space-between;
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
 
       .option {
@@ -47,22 +42,17 @@
   }
 
   .block2 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
     margin-top: 10px;
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
 
       .main1_node {
@@ -74,20 +64,15 @@
 
   .block3 {
     margin-top: 10px;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .content {
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       padding: 10px;
 
diff --git a/src/pages/Container/Map/components/Content/port/QiXiang/index.less b/src/pages/Container/Map/components/Content/port/QiXiang/index.less
index 4fe5292..1a796af 100644
--- a/src/pages/Container/Map/components/Content/port/QiXiang/index.less
+++ b/src/pages/Container/Map/components/Content/port/QiXiang/index.less
@@ -1,21 +1,16 @@
 .qixiang {
   .block1 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
     margin-top: 20px;
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       display: flex;
       flex-wrap: wrap;
@@ -60,22 +55,17 @@
   }
 
   .block2 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
     margin-top: 10px;
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       display: flex;
       flex-wrap: wrap;
@@ -132,20 +122,15 @@
 
   .block3 {
     margin-top: 10px;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .content {
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       padding: 10px;
 
diff --git a/src/pages/Container/Map/components/Content/port/RenYuan/index.less b/src/pages/Container/Map/components/Content/port/RenYuan/index.less
index 9fd4f95..9789d10 100644
--- a/src/pages/Container/Map/components/Content/port/RenYuan/index.less
+++ b/src/pages/Container/Map/components/Content/port/RenYuan/index.less
@@ -1,20 +1,15 @@
 .renyuan {
   .block1 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       display: flex;
       flex-wrap: wrap;
@@ -73,20 +68,15 @@
 
   .block2 {
     margin-top: 10px;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .content {
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       padding: 10px;
 
diff --git a/src/pages/Container/Map/components/Content/port/WeiXian/index.less b/src/pages/Container/Map/components/Content/port/WeiXian/index.less
index 6f6151e..b8424a0 100644
--- a/src/pages/Container/Map/components/Content/port/WeiXian/index.less
+++ b/src/pages/Container/Map/components/Content/port/WeiXian/index.less
@@ -1,42 +1,40 @@
 .weixian {
   .block1 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .options {
       display: flex;
       justify-content: space-between;
       padding: 13px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
 
       .option {
         display: flex;
         flex-direction: column;
         align-items: center;
-        .circular{
+
+        .circular {
           background-size: 100% 100%;
           background-repeat: no-repeat;
           width: 70px;
           height: 70px;
           text-align: center;
           padding-top: 13px;
-          img{
+
+          img {
             width: 25px;
             height: 26px;
             animation: weixianSlideY 2s infinite;
           }
         }
-        .label{
+
+        .label {
           display: flex;
           justify-content: center;
           background-size: 100% 100%;
@@ -55,41 +53,31 @@
 
   .block2 {
     margin-top: 10px;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .content {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
     }
   }
 
   .block3 {
     margin-top: 10px;
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .content {
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       padding: 10px;
 
diff --git a/src/pages/Container/Map/components/Content/port/ZhongDian/index.less b/src/pages/Container/Map/components/Content/port/ZhongDian/index.less
index ea9ec36..c864bbd 100644
--- a/src/pages/Container/Map/components/Content/port/ZhongDian/index.less
+++ b/src/pages/Container/Map/components/Content/port/ZhongDian/index.less
@@ -1,22 +1,17 @@
 .zhongdian {
   .block1 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
 
     .options {
       display: flex;
       justify-content: space-between;
 
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
 
       .option {
@@ -53,22 +48,17 @@
   }
 
   .block2 {
-    background-image: linear-gradient(
-      to bottom,
-      rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
-    );
+    background-image: linear-gradient(to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8));
     margin-top: 10px;
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
-        to bottom,
-        rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
-      )
-      1;
+      border-image: linear-gradient(to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)) 1;
       border-top: none;
       display: flex;
       flex-wrap: wrap;
diff --git a/src/pages/Container/Map/components/Header/index.js b/src/pages/Container/Map/components/Header/index.js
index 2906087..58890e2 100644
--- a/src/pages/Container/Map/components/Header/index.js
+++ b/src/pages/Container/Map/components/Header/index.js
@@ -1,8 +1,10 @@
-import { useContext, useEffect, useState } from "react";
-import { CSSTransition } from "react-transition-group";
-import backImg from "~/assets/images/map_bi/back.png";
+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 topImg from "~/assets/images/map_bi/top.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 {
@@ -18,20 +20,15 @@ import {
 } from "~/pages/Container/Map/js/mittKey";
 import "./index.less";
 
-function Header() {
+function Header(props) {
   const { currentPort, currentBranchOffice, mapMethods, area } = useContext(Context);
 
-  const [animationKey, setAnimationKey] = useState(0);
-
-  useEffect(() => {
-    setAnimationKey(Math.random());
-  }, []);
-
   const onBack = () => {
+    sessionStorage.removeItem("mapCurrentBranchOfficeId");
     mitt.emit(deletePeoplePositionPointMittKey);
     if (currentPort !== "00003" && currentBranchOffice) {
-      mitt.emit(clickPortPointMittKey, { id: "" });
-      mitt.emit(clickBranchOfficePointMittKey, { id: "" });
+      mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" });
+      mitt.emit(clickBranchOfficePointMittKey, { id: "", corpName: "秦港股份" });
       mapMethods.current.removeWall();
       mapMethods.current.removeFourColorDiagram();
       mapMethods.current.removeBranchOfficePoint();
@@ -40,7 +37,7 @@ function Header() {
       mapMethods.current.addPortPoint();
     }
     else if (currentBranchOffice) {
-      mitt.emit(clickBranchOfficePointMittKey, { id: "" });
+      mitt.emit(clickBranchOfficePointMittKey, { id: "", corpName: "秦港股份" });
       mapMethods.current.removeBranchOfficePoint();
       mapMethods.current.removeMarkPoint();
       mapMethods.current.returnPreviousCenterPoint();
@@ -49,7 +46,7 @@ function Header() {
       }, 2000);
     }
     else if (currentPort) {
-      mitt.emit(clickPortPointMittKey, { id: "" });
+      mitt.emit(clickPortPointMittKey, { id: "", name: "秦港股份" });
       mapMethods.current.removeWall();
       mapMethods.current.removeFourColorDiagram();
       mapMethods.current.removeBranchOfficePoint();
@@ -67,39 +64,40 @@ function Header() {
 
   return (
     <div className="header_container">
-      <CSSTransition
-        in={animationKey !== 0}
-        timeout={1000}
-        classNames={{
-          enter: "animate__animated",
-          enterActive: "animate__animated animate__fadeInDown",
-          exit: "animate__animated",
-          exitActive: "animate__animated animate__fadeOutUp",
-        }}
-        unmountOnExit
-      >
-        <header style={{ backgroundImage: `url(${topImg})` }}>
-          <CSSTransition
-            in={!!(currentPort || currentBranchOffice)}
-            timeout={1000}
-            classNames={{
-              enter: "animate__animated",
-              enterActive: "animate__animated animate__fadeInDown",
-              exit: "animate__animated",
-              exitActive: "animate__animated animate__fadeOutUp",
-            }}
-            unmountOnExit
+      <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})` }}
           >
-            <div
-              style={{ backgroundImage: `url(${backImg})` }}
-              className="back"
-              onClick={onBack}
-            />
-          </CSSTransition>
-          <div className="title">秦港股份安全监管平台</div>
-          <div style={{ backgroundImage: `url(${guangImg})` }} className="guang" />
-        </header>
-      </CSSTransition>
+            {(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>
   );
 }
diff --git a/src/pages/Container/Map/components/Header/index.less b/src/pages/Container/Map/components/Header/index.less
index 674a0ea..4eb0018 100644
--- a/src/pages/Container/Map/components/Header/index.less
+++ b/src/pages/Container/Map/components/Header/index.less
@@ -1,58 +1,80 @@
 .header_container {
-    header {
-        width: 100%;
-        height: 70px;
+  header {
+    width: 100%;
+    height: 70px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    font-size: 40px;
+    color: #fff;
+    text-align: center;
+    font-weight: bold;
+    position: absolute;
+
+    &.port {
+      padding-top: 10px;
+
+      .back {
         background-size: 100% 100%;
         background-repeat: no-repeat;
-        font-size: 40px;
-        color: #fff;
-        text-align: center;
-        padding-top: 10px;
-        font-weight: bold;
+        width: 100px;
+        height: 30px;
         position: absolute;
-
-        .back {
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            width: 100px;
-            height: 30px;
-            position: absolute;
-            top: 0;
-            left: 0;
-            cursor: pointer;
-        }
-
-        .title {
-            background-image: linear-gradient(to bottom, #5bb4f7, #ffffff);
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-size: 34px;
-        }
-
-        .guang {
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            width: 707px;
-            height: 85px;
-            position: absolute;
-            top: 25px;
-            left: 50%;
-            animation: headerContainerScale 2s infinite;
-
-            @keyframes headerContainerScale {
-                0% {
-                    transform: translateX(-50%) scale(1);
-                }
-
-                50% {
-                    transform: translateX(-50%) scale(0.5);
-                }
-
-                100% {
-                    transform: translateX(-50%) scale(1);
-                }
-            }
-        }
+        top: 0;
+        left: 0;
+        cursor: pointer;
+      }
     }
+
+    &.branch_office {
+      .back {
+        position: absolute;
+        top: calc(50% - 15px);
+        left: 30px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        font-size: 14px;
+        font-weight: normal;
+
+        img {
+          width: 20px;
+          height: 20px;
+        }
+      }
+    }
+
+    .title {
+      background-image: linear-gradient(to bottom, #5bb4f7, #ffffff);
+      -webkit-background-clip: text;
+      background-clip: text;
+      -webkit-text-fill-color: transparent;
+      font-size: 34px;
+    }
+
+    .guang {
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      width: 707px;
+      height: 85px;
+      position: absolute;
+      top: 25px;
+      left: 50%;
+      animation: headerContainerScale 2s infinite;
+
+      @keyframes headerContainerScale {
+        0% {
+          transform: translateX(-50%) scale(1);
+        }
+
+        50% {
+          transform: translateX(-50%) scale(0.5);
+        }
+
+        100% {
+          transform: translateX(-50%) scale(1);
+        }
+      }
+    }
+  }
 }
diff --git a/src/pages/Container/Map/components/RightUtils/index.js b/src/pages/Container/Map/components/RightUtils/index.js
index 7eae40b..9a2ac1a 100644
--- a/src/pages/Container/Map/components/RightUtils/index.js
+++ b/src/pages/Container/Map/components/RightUtils/index.js
@@ -165,7 +165,10 @@ function RightUtils(props) {
             }
           </div>
         </CSSTransition>
-        <div className={`bg ${isShowChildLevel ? "active" : ""}`} onClick={() => setIsShowChildLevel(!isShowChildLevel)}>
+        <div
+          className={`bg ${isShowChildLevel ? "active" : ""}`}
+          onClick={() => setIsShowChildLevel(!isShowChildLevel)}
+        >
           <img src={buttonBg} alt="" />
         </div>
       </div>
diff --git a/src/pages/Container/Map/components/popup/js/Coord.js b/src/pages/Container/Map/components/popup/js/Coord.js
index e5d1e20..328e556 100644
--- a/src/pages/Container/Map/components/popup/js/Coord.js
+++ b/src/pages/Container/Map/components/popup/js/Coord.js
@@ -1,6 +1,8 @@
 const Cesium = window.Cesium;
+
 export class Coord {
   viewer;
+
   constructor(viewer) {
     this.viewer = viewer;
   }
diff --git a/src/pages/Container/Map/components/popup/js/Popup.js b/src/pages/Container/Map/components/popup/js/Popup.js
index e157ff1..f09a036 100644
--- a/src/pages/Container/Map/components/popup/js/Popup.js
+++ b/src/pages/Container/Map/components/popup/js/Popup.js
@@ -8,6 +8,7 @@ export class Popup {
   moving = false;
   postRender;
   coord;
+
   constructor(viewer, options) {
     this.viewer = viewer;
     this.coord = new Coord(viewer);
diff --git a/src/pages/Container/Map/components/popup/js/PopupInfo.js b/src/pages/Container/Map/components/popup/js/PopupInfo.js
index e502719..73e3caf 100644
--- a/src/pages/Container/Map/components/popup/js/PopupInfo.js
+++ b/src/pages/Container/Map/components/popup/js/PopupInfo.js
@@ -6,6 +6,7 @@ export default class PopupInfo {
   element;
   popup;
   reactRoot;
+
   constructor(viewer, options) {
     this.viewer = viewer;
     this.init(options);
diff --git a/src/pages/Container/Map/index.js b/src/pages/Container/Map/index.js
index b213f69..b3fb4dd 100644
--- a/src/pages/Container/Map/index.js
+++ b/src/pages/Container/Map/index.js
@@ -34,10 +34,13 @@ function Map() {
   const [area, setArea] = useState(""); // 当前选中的港口为秦皇岛港时的区域
   const [bottomUtilsCurrentIndex, setBottomUtilsCurrentIndex] = useState(""); // 当前选中的下方按钮的索引
   const [pureMap, setPureMap] = useState(false); // 是否选中了右侧的纯净地图
+  const [headerTitle, setHeaderTitle] = useState("秦港股份安全监管平台"); // 当前头部的标题
 
   useMount(() => {
     autoFit.init({ dw: 1920, dh: 1080, el: "#contentContainer", resize: true });
 
+    sessionStorage.removeItem("mapCurrentBranchOfficeId");
+
     const initMap = new InitMap();
     const { viewer: viewerInstance, mapMethods: mapMethodsInstance }
       = initMap.initMap();
@@ -54,11 +57,17 @@ function Map() {
 
     mitt.on(clickPortPointMittKey, (data) => {
       setCurrentPort(data.id);
-      if (data.id !== "00003")
+      if (data.id === "00003") {
+        setHeaderTitle("秦港股份安全监管平台");
+      }
+      else {
         setCurrentBranchOffice(data.corpinfoId);
+        setHeaderTitle(`${data.name}安全监管平台`);
+      }
     });
     mitt.on(clickBranchOfficePointMittKey, (data) => {
       setCurrentBranchOffice(data.id);
+      setHeaderTitle(`${data.corpName || data.name}安全监管平台`);
     });
     mitt.on(changeCoverMaskVisibleMittKey, (data) => {
       setCoverMaskVisible(data);
@@ -90,7 +99,7 @@ function Map() {
       <Context.Provider value={providerValues}>
         <div id="cesiumContainer" />
         <div id="contentContainer">
-          <Header />
+          <Header headerTitle={headerTitle} />
           <CenterUtils setArea={setArea} />
           <RightUtils isFullscreen={isFullscreen} toggleFullscreen={toggleFullscreen} setPureMap={setPureMap} />
           <BottomUtils setBottomUtilsCurrentIndex={setBottomUtilsCurrentIndex} />
diff --git a/src/pages/Container/Map/js/WallPolylineTrailLinkMaterialProperty.js b/src/pages/Container/Map/js/WallPolylineTrailLinkMaterialProperty.js
index b6a0fdd..2cc2440 100644
--- a/src/pages/Container/Map/js/WallPolylineTrailLinkMaterialProperty.js
+++ b/src/pages/Container/Map/js/WallPolylineTrailLinkMaterialProperty.js
@@ -17,6 +17,7 @@ function WallPolylineTrailLinkMaterialProperty(
   this.duration = options.duration;
   this._time = new Date().getTime();
 }
+
 Object.defineProperties(WallPolylineTrailLinkMaterialProperty.prototype, {
   isConstant: {
     get() {
diff --git a/src/pages/Container/Map/js/mapMethods.js b/src/pages/Container/Map/js/mapMethods.js
index 58d079c..7b1cdbd 100644
--- a/src/pages/Container/Map/js/mapMethods.js
+++ b/src/pages/Container/Map/js/mapMethods.js
@@ -342,6 +342,7 @@ export default class MapMethods {
         .toDataURL();
     }
     customStyle();
+
     function customStyle() {
       if (Cesium.defined(removeListener)) {
         removeListener();
diff --git a/src/pages/Container/Map/js/pointClickEvent.js b/src/pages/Container/Map/js/pointClickEvent.js
index 6141a60..3024d89 100644
--- a/src/pages/Container/Map/js/pointClickEvent.js
+++ b/src/pages/Container/Map/js/pointClickEvent.js
@@ -68,21 +68,25 @@ export default class PointClickEvent {
   #clickPortPointEnter = (data) => {
     this.closePopup();
     this.#mapMethods.removePortPoint();
-    this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 10000 });
     setTimeout(() => {
       if (data.id === "00003") {
+        this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 10000 });
         this.#mapMethods.addBranchOfficePoint();
+        mitt.emit(clickPortPointMittKey, data);
       }
       else {
+        this.#mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 2000 });
         this.#mapMethods.addBranchOfficePoint("", {
           corpName: data.name,
           corpinfoId: data.corpinfoId,
           longitude: data.position.x,
           latitude: data.position.y,
         });
+        mitt.emit(clickPortPointMittKey, data);
+        mitt.emit(clickBranchOfficePointMittKey, data);
+        sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId);
       }
     }, 2000);
-    mitt.emit(clickPortPointMittKey, data);
     mitt.emit(changeBottomUtilsAnimationMittKey);
     mitt.emit(resetBottomCurrentIndexMittKey);
     mitt.emit(resetAllBottomUtilsCheckMittKey);
@@ -91,6 +95,8 @@ export default class PointClickEvent {
 
   // 分公司点位点击
   #clickBranchOfficePoint = async (data) => {
+    if (data.id === sessionStorage.getItem("mapCurrentBranchOfficeId"))
+      return;
     // const { info } = await getCorpInfo({ id: data.id });
     const info = {};
     const position = getPosition(data.longitude, data.latitude);
@@ -113,13 +119,10 @@ export default class PointClickEvent {
     this.#mapMethods.removeBranchOfficePoint();
     this.#mapMethods.removeMarkPoint();
     this.#mapMethods.addBranchOfficePoint("", data);
-    this.#mapMethods.flyTo({
-      longitude: data.longitude,
-      latitude: data.latitude,
-      height: 2000,
-    });
+    this.#mapMethods.flyTo({ longitude: data.longitude, latitude: data.latitude, height: 2000 });
     mitt.emit(deletePeoplePositionPointMittKey);
     mitt.emit(clickBranchOfficePointMittKey, data);
+    sessionStorage.setItem("mapCurrentBranchOfficeId", data.corpinfoId);
     mitt.emit(changeBottomUtilsAnimationMittKey);
     mitt.emit(resetBottomCurrentIndexMittKey);
     mitt.emit(resetAllBottomUtilsCheckMittKey);