地图

src/pages/Container/Map/components/CenterUtils/index.less

@@ -62,12 +62,15 @@
         text-align: center;
         border-radius: 2px;
       }
+
       .info {
         padding: 7px 14px;
         border: 1px solid rgb(44, 105, 172);
         border-radius: 2px;
         background-color: rgba(0, 41, 82, 0.722);
-        .value{}
+
+        .value {
+        }
       }
     }
   }

src/pages/Container/Map/components/Content/IndexInfo/index.less

@@ -1,22 +1,17 @@
 .index_info_container {
   .block1 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .options {
       display: flex;
       justify-content: space-between;
       padding: 10px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
 
       .option {
@@ -61,22 +56,17 @@
   }
 
   .block2 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
     margin-top: 10px;
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       display: flex;
       flex-wrap: wrap;

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;

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 collapseMenuImg1 from "~/assets/images/map_bi/content/collapse_menu1.png";
-import collapseMenuBg from "~/assets/images/map_bi/content/collapse_menu_bg.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,7 +46,6 @@ function Content() {
   };
 
   const renderPortContent = () => {
-    if (!currentBranchOffice) {
     const bottomUtilsCurrentType = bottomUtilsCurrentIndex !== -1 ? portUtilsList[bottomUtilsCurrentIndex].type : "";
     if (bottomUtilsCurrentType === "" || bottomUtilsCurrentType === "camera")
       return <PortIndex />;
@@ -60,7 +63,12 @@ function Content() {
       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" : ""}`}
+          className={`collapse_menu port ${collapse ? "active" : ""}`}
-          style={{ backgroundImage: `url(${collapseMenuBg})` }}
+          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>
       );
     }

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

@@ -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;
+      }
+    }
   }
 }

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 },

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;

src/pages/Container/Map/components/Content/port/Index/index.less

@@ -1,22 +1,17 @@
 .port_index {
   .block1 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .options {
       display: flex;
       justify-content: space-between;
       padding: 10px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
 
       .option {
@@ -66,22 +61,17 @@
 
   .block2 {
     margin-top: 10px;
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .options {
       display: flex;
       flex-wrap: wrap;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       padding: 10px;
 
@@ -134,20 +124,15 @@
 
   .block3 {
     margin-top: 10px;
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .content {
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       padding: 10px;
 

src/pages/Container/Map/components/Content/port/MenJin/index.less

@@ -1,22 +1,17 @@
 .menjin {
   .block1 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .options {
       display: flex;
       justify-content: space-between;
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
 
       .option {
@@ -47,22 +42,17 @@
   }
 
   .block2 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
     margin-top: 10px;
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
 
       .main1_node {
@@ -74,20 +64,15 @@
 
   .block3 {
     margin-top: 10px;
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .content {
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       padding: 10px;
 

src/pages/Container/Map/components/Content/port/QiXiang/index.less

@@ -1,21 +1,16 @@
 .qixiang {
   .block1 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
     margin-top: 20px;
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       display: flex;
       flex-wrap: wrap;
@@ -60,22 +55,17 @@
   }
 
   .block2 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
     margin-top: 10px;
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       display: flex;
       flex-wrap: wrap;
@@ -132,20 +122,15 @@
 
   .block3 {
     margin-top: 10px;
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .content {
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       padding: 10px;
 

src/pages/Container/Map/components/Content/port/RenYuan/index.less

@@ -1,20 +1,15 @@
 .renyuan {
   .block1 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       display: flex;
       flex-wrap: wrap;
@@ -73,20 +68,15 @@
 
   .block2 {
     margin-top: 10px;
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .content {
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       padding: 10px;
 

src/pages/Container/Map/components/Content/port/WeiXian/index.less

@@ -1,28 +1,24 @@
 .weixian {
   .block1 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .options {
       display: flex;
       justify-content: space-between;
       padding: 13px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
 
       .option {
         display: flex;
         flex-direction: column;
         align-items: center;
+
         .circular {
           background-size: 100% 100%;
           background-repeat: no-repeat;
@@ -30,12 +26,14 @@
           height: 70px;
           text-align: center;
           padding-top: 13px;
+
           img {
             width: 25px;
             height: 26px;
             animation: weixianSlideY 2s infinite;
           }
         }
+
         .label {
           display: flex;
           justify-content: center;
@@ -55,41 +53,31 @@
 
   .block2 {
     margin-top: 10px;
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .content {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
     }
   }
 
   .block3 {
     margin-top: 10px;
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .content {
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       padding: 10px;
 

src/pages/Container/Map/components/Content/port/ZhongDian/index.less

@@ -1,22 +1,17 @@
 .zhongdian {
   .block1 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
 
     .options {
       display: flex;
       justify-content: space-between;
 
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
 
       .option {
@@ -53,22 +48,17 @@
   }
 
   .block2 {
-    background-image: linear-gradient(
+    background-image: linear-gradient(to bottom,
-      to bottom,
     rgba(0, 0, 0, 0),
-      rgba(0, 0, 0, 0.8)
+    rgba(0, 0, 0, 0.8));
-    );
     margin-top: 10px;
 
     .options {
       padding: 10px 15px;
       border: 1px solid;
-      border-image: linear-gradient(
+      border-image: linear-gradient(to bottom,
-        to bottom,
       rgba(58, 122, 149, 0),
-        rgba(58, 122, 149, 1)
+      rgba(58, 122, 149, 1)) 1;
-      )
-      1;
       border-top: none;
       display: flex;
       flex-wrap: wrap;

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

@@ -1,8 +1,10 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext } from "react";
-import { CSSTransition } from "react-transition-group";
+import { CSSTransition, SwitchTransition } from "react-transition-group";
-import backImg from "~/assets/images/map_bi/back.png";
+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(clickPortPointMittKey, { id: "", name: "秦港股份" });
-      mitt.emit(clickBranchOfficePointMittKey, { id: "" });
+      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,8 +64,8 @@ function Header() {
 
   return (
     <div className="header_container">
+      <SwitchTransition>
         <CSSTransition
-        in={animationKey !== 0}
           timeout={1000}
           classNames={{
             enter: "animate__animated",
@@ -77,29 +74,30 @@ function Header() {
             exitActive: "animate__animated animate__fadeOutUp",
           }}
           unmountOnExit
+          key={currentBranchOffice || 1}
         >
-        <header style={{ backgroundImage: `url(${topImg})` }}>
+          <header
-          <CSSTransition
+            className={`${props.headerTitle === "秦港股份安全监管平台" ? "port" : "branch_office"}`}
-            in={!!(currentPort || currentBranchOffice)}
+            style={{ backgroundImage: `url(${props.headerTitle === "秦港股份安全监管平台" ? topImg1 : topImg2})` }}
-            timeout={1000}
-            classNames={{
-              enter: "animate__animated",
-              enterActive: "animate__animated animate__fadeInDown",
-              exit: "animate__animated",
-              exitActive: "animate__animated animate__fadeOutUp",
-            }}
-            unmountOnExit
           >
+            {(currentPort && props.headerTitle === "秦港股份安全监管平台") && (
               <div
-              style={{ backgroundImage: `url(${backImg})` }}
+                style={{ backgroundImage: `url(${backImg1})` }}
                 className="back"
                 onClick={onBack}
               />
-          </CSSTransition>
+            )}
-          <div className="title">秦港股份安全监管平台</div>
+            {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/Header/index.less

@@ -7,10 +7,12 @@
     font-size: 40px;
     color: #fff;
     text-align: center;
-        padding-top: 10px;
     font-weight: bold;
     position: absolute;
 
+    &.port {
+      padding-top: 10px;
+
       .back {
         background-size: 100% 100%;
         background-repeat: no-repeat;
@@ -21,6 +23,26 @@
         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);

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>

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

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

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

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} />

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() {

src/pages/Container/Map/js/mapMethods.js

@@ -342,6 +342,7 @@ export default class MapMethods {
         .toDataURL();
     }
     customStyle();
+
     function customStyle() {
       if (Cesium.defined(removeListener)) {
         removeListener();

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({
+    this.#mapMethods.flyTo({ longitude: data.longitude, latitude: data.latitude, height: 2000 });
-      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);