地图

src/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList.js

@@ -0,0 +1,236 @@
+import pointIco1 from "~/assets/images/map_bi/point/ico1.png";
+import pointIco2 from "~/assets/images/map_bi/point/ico2.png";
+import pointIco3 from "~/assets/images/map_bi/point/ico3.png";
+import pointIco4 from "~/assets/images/map_bi/point/ico4.png";
+import pointIco5 from "~/assets/images/map_bi/point/ico5.png";
+import pointIco6 from "~/assets/images/map_bi/point/ico6.png";
+import pointIco7 from "~/assets/images/map_bi/point/ico7.png";
+import pointIco8 from "~/assets/images/map_bi/point/ico8.png";
+import pointIco9 from "~/assets/images/map_bi/point/ico9.png";
+import pointIco10 from "~/assets/images/map_bi/point/ico10.png";
+import pointIco11 from "~/assets/images/map_bi/point/ico11.png";
+import pointIco12 from "~/assets/images/map_bi/point/ico12.png";
+import pointIco13 from "~/assets/images/map_bi/point/ico13.png";
+import pointIco14 from "~/assets/images/map_bi/point/ico14.png";
+import pointIco15 from "~/assets/images/map_bi/point/ico15.png";
+import pointIco16 from "~/assets/images/map_bi/point/ico16.png";
+import pointIco17 from "~/assets/images/map_bi/point/ico17.png";
+import pointIco19 from "~/assets/images/map_bi/point/ico19.png";
+import pointIco30 from "~/assets/images/map_bi/point/ico30.png";
+import pointIco31 from "~/assets/images/map_bi/point/ico31.png";
+import pointIco32 from "~/assets/images/map_bi/point/ico32.png";
+import pointIco33 from "~/assets/images/map_bi/point/ico33.png";
+
+export const branchOfficeUtilsList = [
+  {
+    label: "重点作业",
+    type: "danger",
+    list: [
+      {
+        label: "动火作业",
+        type: "hotWork",
+        check: false,
+        mapIcon: pointIco9,
+      },
+      {
+        label: "受限空间作业",
+        type: "confinedSpace",
+        check: false,
+        mapIcon: pointIco10,
+      },
+      {
+        label: "临时用电作业",
+        type: "electricity",
+        check: false,
+        mapIcon: pointIco11,
+      },
+      {
+        label: "高处作业",
+        type: "highWork",
+        check: false,
+        mapIcon: pointIco12,
+      },
+      {
+        label: "断路作业",
+        type: "cutRoad",
+        check: false,
+        mapIcon: pointIco13,
+      },
+      {
+        label: "动土作业",
+        type: "breakGround",
+        check: false,
+        mapIcon: pointIco14,
+      },
+      {
+        label: "吊装作业",
+        type: "hoisting",
+        check: false,
+        mapIcon: pointIco15,
+      },
+      {
+        label: "盲板抽堵作业",
+        type: "blindBoard",
+        check: false,
+        mapIcon: pointIco16,
+      },
+      {
+        label: "摄像头",
+        check: false,
+        type: "camera",
+        mapIcon: pointIco3,
+      },
+    ],
+  },
+  {
+    label: "口门门禁",
+    type: "door",
+    list: [
+      {
+        label: "口门",
+        check: false,
+        mapIcon: pointIco1,
+        type: "car",
+      },
+      {
+        label: "人员",
+        check: false,
+        mapIcon: pointIco33,
+        type: "person",
+      },
+      {
+        label: "车辆",
+        check: false,
+        mapIcon: pointIco2,
+        type: "car",
+      },
+      {
+        label: "人员闸机",
+        check: false,
+        type: "personMachine",
+      },
+      {
+        label: "车辆闸机",
+        check: false,
+        type: "carMachine",
+      },
+      {
+        label: "摄像头",
+        check: false,
+        type: "camera",
+        mapIcon: pointIco3,
+      },
+    ],
+  },
+  {
+    label: "消防安全",
+    type: "fire",
+    list: [
+      {
+        label: "消防救援队",
+        check: false,
+        mapIcon: pointIco4,
+        type: "xfjyd01",
+      },
+      {
+        label: "消防控制室",
+        check: false,
+        type: "xfkzs01",
+        mapIcon: pointIco5,
+      },
+      {
+        label: "消防泵房",
+        check: false,
+        type: "xfbf01",
+        mapIcon: pointIco6,
+      },
+      {
+        label: "消防水源",
+        check: false,
+        type: "xfsy01",
+        mapIcon: pointIco7,
+      },
+      {
+        label: "消防点位",
+        check: false,
+        type: "point",
+        mapIcon: pointIco8,
+      },
+      {
+        label: "报警设备",
+        check: false,
+        type: "alarm",
+        mapIcon: pointIco32,
+      },
+    ],
+  },
+  {
+    label: "人员定位",
+    type: "people",
+    list: [
+      {
+        label: "人员定位",
+        check: false,
+        type: "peoplePosition",
+      },
+      {
+        label: "人员轨迹",
+        check: false,
+        type: "peopleTrajectory",
+      },
+    ],
+  },
+  {
+    label: "气象监测",
+    type: "weather",
+    list: [
+      {
+        label: "气象站",
+        type: "293187ddfd984c9ab3fd716aef58da0e",
+        check: false,
+        mapIcon: pointIco17,
+      },
+      {
+        label: "风速站",
+        type: "2da29f00852a4653ba3e760b9de57412",
+        check: false,
+        mapIcon: pointIco19,
+      },
+    ],
+  },
+  {
+    label: "重点工程",
+    type: "project",
+    list: [
+      {
+        label: "重点工程定位",
+        check: false,
+        type: "project",
+        mapIcon: pointIco30,
+      },
+      {
+        label: "视频定位",
+        check: false,
+        type: "video",
+        mapIcon: pointIco31,
+      },
+    ],
+  },
+  {
+    label: "视频巡屏",
+    type: "camera",
+    list: [
+      {
+        label: "摄像头",
+        check: false,
+        type: "platCamera",
+        mapIcon: pointIco3,
+      },
+    ],
+  },
+  {
+    label: "封闭区域",
+    type: "closedArea",
+    list: [],
+  },
+];

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

@@ -1,8 +1,10 @@
-import { useMount } from "ahooks";
-import { useContext, useState } from "react";
-import { CSSTransition } from "react-transition-group";
+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";
 import titleOnImg from "~/assets/images/map_bi/bottom_utils/title_on.png";
+import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList";
 import { Context } from "~/pages/Container/Map/js/context";
 import mitt from "~/pages/Container/Map/js/mitt";
 import {
@@ -20,10 +22,9 @@ function BottomUtils(props) {
   const { currentPort, pureMap, currentBranchOffice, bottomUtilsCurrentIndex } = useContext(Context);
 
   const [list, setList] = useState([]);
-  const [animationKey, setAnimationKey] = useState(0);
 
   const initList = () => {
-    setList(portUtilsList);
+    setList(!currentBranchOffice ? portUtilsList : branchOfficeUtilsList);
   };
 
   const resetAllCheck = () => {
@@ -35,11 +36,18 @@ function BottomUtils(props) {
     });
   };
 
-  useMount(() => {
-    setAnimationKey(Math.random());
+  useEffect(() => {
+    mitt.on(initBottomUtilsMittKey, () => {
+      initList();
+    });
 
+    return () => {
+      mitt.off(initBottomUtilsMittKey);
+    };
+  }, [currentBranchOffice]);
+
+  useEffect(() => {
     mitt.on(changeBottomUtilsAnimationMittKey, () => {
-      setAnimationKey(Math.random());
     });
     mitt.on(resetBottomCurrentIndexMittKey, () => {
       props.setBottomUtilsCurrentIndex(-1);
@@ -48,16 +56,18 @@ function BottomUtils(props) {
       resetAllCheck();
     });
     mitt.on(deletePeoplePositionPointMittKey, () => {
-      // closePeoplePosition();
     });
-    mitt.on(initBottomUtilsMittKey, () => {
-      initList();
-    });
-  });
+
+    return () => {
+      mitt.off(changeBottomUtilsAnimationMittKey);
+      mitt.off(resetBottomCurrentIndexMittKey);
+      mitt.off(resetAllBottomUtilsCheckMittKey);
+      mitt.off(deletePeoplePositionPointMittKey);
+    };
+  }, []);
 
   const optionsClick = (index) => {
     props.setBottomUtilsCurrentIndex(bottomUtilsCurrentIndex === index ? -1 : index);
-    setAnimationKey(Math.random());
     mitt.emit(changeContentAnimationKeyMittKey);
   };
 
@@ -70,83 +80,134 @@ function BottomUtils(props) {
     });
   };
 
+  const renderBranchOfficeUtils = () => {
+    return (
+      <div className="bottom_utils branch_office">
+        {list.map((item, index) => {
+          const isCurrentActive = bottomUtilsCurrentIndex === index;
+          // const hasActiveChildren = bottomUtilsCurrentIndex !== -1;
+          // if (hasActiveChildren && !isCurrentActive) {
+          //   return null;
+          // }
+
+          return (
+            <div
+              key={index}
+              className="option"
+              style={{ backgroundImage: `url(${isCurrentActive ? bg7 : bg8})` }}
+              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
+              >
+                <div className="items">
+                  {item.list?.map((item1, index1) => (
+                    <div
+                      key={index1}
+                      className={`item ${item1.check ? "active" : ""}`}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        optionsItemsClick(index, index1, item, item1);
+                      }}
+                    >
+                      <div className="child_label">{item1.label}</div>
+                    </div>
+                  ))}
+                </div>
+              </CSSTransition>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderPortUtils = () => {
+    return (
+      <div className="bottom_utils port">
+        {list.map((item, index) => {
+          const isCurrentActive = bottomUtilsCurrentIndex === index;
+          const hasActiveChildren = bottomUtilsCurrentIndex !== -1;
+          if (hasActiveChildren && !isCurrentActive) {
+            return null;
+          }
+
+          return (
+            <div key={index} className="option" onClick={() => optionsClick(index)}>
+              <img src={isCurrentActive ? item.checkImg : item.img} alt="" className="img" />
+              <div
+                className="label"
+                style={{ backgroundImage: `url(${isCurrentActive ? titleOnImg : titleImg})` }}
+              >
+                {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
+              >
+                <div className="items">
+                  {item.list?.map((item1, index1) => (
+                    <div
+                      key={index1}
+                      className="item"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        optionsItemsClick(index, index1, item, item1);
+                      }}
+                    >
+                      <img src={item1.check ? item1.checkImg : item1.img} alt="" className="child_img" />
+                      <div className="child_label">{item1.label}</div>
+                    </div>
+                  ))}
+                </div>
+              </CSSTransition>
+            </div>
+          );
+        })}
+      </div>
+    );
+  };
+
+  const renderUtils = () => {
+    if (pureMap || !currentPort)
+      return (<div></div>);
+
+    return (!currentBranchOffice ? renderPortUtils() : renderBranchOfficeUtils());
+  };
+
   return (
     <div className="bottom_utils_container">
-      <CSSTransition
-        in={currentPort && !pureMap}
-        timeout={1000}
-        classNames={{
-          enter: "animate__animated",
-          enterActive: "animate__animated animate__fadeInUp",
-          exit: "animate__animated",
-          exitActive: "animate__animated animate__fadeOutDown",
-        }}
-        unmountOnExit
-      >
-        <div className="bottom_utils">
-          {list.map((item, index) => {
-            const isCurrentActive = bottomUtilsCurrentIndex === index;
-            const hasActiveChildren = bottomUtilsCurrentIndex !== -1;
-            if (hasActiveChildren && !isCurrentActive) {
-              return null;
-            }
-
-            return (
-              <div
-                key={index}
-                className={`option ${isCurrentActive ? "active" : ""}`}
-                onClick={() => optionsClick(index)}
-              >
-                <img
-                  src={isCurrentActive ? item.checkImg : item.img}
-                  alt=""
-                  className="img"
-                />
-                <div
-                  className="label"
-                  style={{ backgroundImage: `url(${isCurrentActive ? titleOnImg : titleImg})` }}
-                >
-                  {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
-                >
-                  <div className="item">
-                    {item.list?.map((item1, index1) => (
-                      <div
-                        key={index1}
-                        className="items"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          optionsItemsClick(index, index1, item, item1);
-                        }}
-                      >
-                        <img
-                          src={item1.check ? item1.checkImg : item1.img}
-                          alt=""
-                          className="suspension_img"
-                        />
-                        <div className="suspension_label">
-                          {item1.label}
-                        </div>
-                      </div>
-                    ))}
-                  </div>
-                </CSSTransition>
-              </div>
-            );
-          })}
-        </div>
-      </CSSTransition>
+      <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>
     </div>
   );
 }

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

@@ -1,94 +1,140 @@
-.bottom_utils_container{
+.bottom_utils_container {
   .bottom_utils {
     width: 1000px;
-    height: 168px;
+    //height: 168px;
     position: absolute;
     bottom: 30px;
     left: calc(50% - 500px);
     display: flex;
     justify-content: space-between;
 
-    .option {
-      position: relative;
-      cursor: pointer;
+    &.port {
+      .option {
+        position: relative;
+        cursor: pointer;
 
-      .img {
-        width: 100px;
-        height: 100px;
+        .img {
+          width: 100px;
+          height: 100px;
 
-        &:hover {
-          animation: bottomUtilsContainerSlideY 0.5s;
+          &:hover {
+            animation: bottomUtilsContainerSlideY 0.5s;
+          }
+        }
+
+        .label {
+          background-size: 100% 100%;
+          background-repeat: no-repeat;
+          width: 100px;
+          height: 30px;
+          text-align: center;
+          line-height: 30px;
+          color: #fff;
+          font-size: 14px;
+        }
+
+        .items {
+          transform-origin: left;
+          display: flex;
+          position: absolute;
+          top: 8px;
+          left: 40px;
+          background-image: linear-gradient(to right,
+          rgba(31, 62, 129, 0) 0%,
+          rgba(31, 62, 129, 0.4) 50%,
+          rgba(31, 62, 129, 0) 100%);
+          border: 1px solid;
+          border-image: linear-gradient(to right,
+          rgba(255, 255, 255, 0) 0%,
+          rgba(255, 255, 255, 0.4) 50%,
+          rgba(255, 255, 255, 0) 100%) 1;
+          border-left: none;
+          border-right: none;
+          padding: 6px 50px;
+
+          .item {
+            padding: 0 20px;
+            text-align: center;
+
+            .child_img {
+              width: 60px;
+              height: 60px;
+              cursor: pointer;
+
+              &:hover {
+                animation: bottomUtilsContainerSlideY 0.5s;
+              }
+            }
+
+            .child_label {
+              margin-top: -10px;
+              font-size: 12px;
+              width: 80px;
+              color: rgba(255, 255, 255, 0.8);
+            }
+          }
         }
       }
 
-      .label {
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        width: 100px;
-        height: 30px;
-        text-align: center;
-        line-height: 30px;
-        color: #fff;
-        font-size: 14px;
-      }
-
-      .item {
-        transform-origin: left;
-        display: flex;
-        position: absolute;
-        top: 8px;
-        left: 40px;
-        background-image: linear-gradient(
-          to right,
-          rgba(31, 62, 129, 0) 0%,
-          rgba(31, 62, 129, 0.4) 50%,
-          rgba(31, 62, 129, 0) 100%
-        );
-        border: 1px solid;
-        border-image: linear-gradient(
-          to right,
-          rgba(255, 255, 255, 0) 0%,
-          rgba(255, 255, 255, 0.4) 50%,
-          rgba(255, 255, 255, 0) 100%
-        )
-        1;
-        border-left: none;
-        border-right: none;
-        padding: 6px 50px;
-
-        .items {
-          padding: 0 20px;
-          text-align: center;
-
-          .suspension_img {
-            width: 60px;
-            height: 60px;
-            cursor: pointer;
-
-            &:hover {
-              animation: bottomUtilsContainerSlideY 0.5s;
-            }
-          }
-
-          .suspension_label {
-            margin-top: -10px;
-            font-size: 12px;
-            width: 80px;
-            color: rgba(255, 255, 255, 0.8);
-          }
+      @keyframes bottomUtilsContainerSlideY {
+        0% {
+          transform: translateY(0);
+        }
+        50% {
+          transform: translateY(-5px);
+        }
+        100% {
+          transform: translateY(0);
         }
       }
     }
 
-    @keyframes bottomUtilsContainerSlideY {
-      0% {
-        transform: translateY(0);
-      }
-      50% {
-        transform: translateY(-5px);
-      }
-      100% {
-        transform: translateY(0);
+    &.branch_office {
+      .option {
+        position: relative;
+        cursor: pointer;
+        width: 124px;
+        height: 43px;
+        background-size: 100% 100%;
+        background-repeat: no-repeat;
+        text-align: center;
+        line-height: 43px;
+
+        .label {
+          font-size: 16px;
+          font-weight: bold;
+          color: #fff;
+        }
+
+        .items {
+          background-image: linear-gradient(to bottom, rgba(0, 9, 100, 0.5), rgba(1, 35, 145, 0.5));
+          border: 1px solid #167ce4;
+          border-radius: 2px;
+          position: absolute;
+          bottom: 50px;
+          left: 0;
+          right: 0;
+          margin: 0 auto;
+          width: max-content;
+          padding: 0 9px;
+
+          .item {
+            padding: 10px 20px;
+            border: 1px solid transparent;
+            margin-top: 5px;
+
+            &.active {
+              background-image: linear-gradient(to bottom, rgb(19, 44, 140), rgba(22, 124, 228, 0));
+              border: 1px solid rgba(22, 124, 228, 0.5);
+            }
+
+            .child_label {
+              color: #fff;
+              font-size: 14px;
+              line-height: normal;
+            }
+          }
+        }
       }
     }
   }

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

@@ -1,5 +1,4 @@
-import { useMount } from "ahooks";
-import { useContext, useState } from "react";
+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";
@@ -24,14 +23,18 @@ function Content() {
   const [animationKey, setAnimationKey] = useState(0);
   const [collapse, setCollapse] = useState(false);
 
-  useMount(() => {
+  useEffect(() => {
     setAnimationKey(Math.random());
 
     mitt.on(changeContentAnimationKeyMittKey, () => {
       setAnimationKey(Math.random());
       setCollapse(false);
     });
-  });
+
+    return () => {
+      mitt.off(changeContentAnimationKeyMittKey);
+    };
+  }, []);
 
   const onChangeCollapse = () => {
     setAnimationKey(Math.random());
@@ -62,7 +65,7 @@ function Content() {
 
   const renderContent = () => {
     if (pureMap || collapse)
-      return <div></div>;
+      return null;
 
     return (
       <div className="map_content_container__content">
@@ -72,6 +75,22 @@ function Content() {
     );
   };
 
+  const renderCollapseMenu = () => {
+    if (pureMap)
+      return null;
+    if (currentPort) {
+      return (
+        <div
+          className={`collapse_menu ${collapse ? "active" : ""}`}
+          style={{ backgroundImage: `url(${collapseMenuBg})` }}
+          onClick={onChangeCollapse}
+        >
+          <img src={collapseMenu} alt="" />
+        </div>
+      );
+    }
+  };
+
   return (
     <div className="map_content_container">
       <SwitchTransition>
@@ -88,15 +107,7 @@ function Content() {
         >
           <div>
             {renderContent()}
-            {(!pureMap && currentPort) && (
-              <div
-                className={`collapse_menu ${collapse ? "active" : ""}`}
-                style={{ backgroundImage: `url(${collapseMenuBg})` }}
-                onClick={onChangeCollapse}
-              >
-                <img src={collapseMenu} alt="" />
-              </div>
-            )}
+            {renderCollapseMenu()}
           </div>
         </CSSTransition>
       </SwitchTransition>

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

@@ -38,15 +38,13 @@
     height: 89px;
     position: absolute;
     left: 445px;
-    top: 50%;
-    transform: translateY(-50%);
+    top: calc(50vh - 44.5px);
     background-repeat: no-repeat;
     background-size: 100% 100%;
     cursor: pointer;
 
     &.active {
       left: 0;
-      top: 50vh;
 
       img {
         transform: translate(-50%, -50%) rotate(180deg);

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

@@ -1,5 +1,4 @@
-import { useMount } from "ahooks";
-import { useContext, useState } from "react";
+import { useContext, useEffect, useState } from "react";
 import { CSSTransition } from "react-transition-group";
 import backImg from "~/assets/images/map_bi/back.png";
 import guangImg from "~/assets/images/map_bi/guang.png";
@@ -14,7 +13,6 @@ import {
   clickBranchOfficePointMittKey,
   clickPortPointMittKey,
   deletePeoplePositionPointMittKey,
-  initBottomUtilsMittKey,
   resetAllBottomUtilsCheckMittKey,
   resetBottomCurrentIndexMittKey,
 } from "~/pages/Container/Map/js/mittKey";
@@ -25,9 +23,9 @@ function Header() {
 
   const [animationKey, setAnimationKey] = useState(0);
 
-  useMount(() => {
+  useEffect(() => {
     setAnimationKey(Math.random());
-  });
+  }, []);
 
   const onBack = () => {
     mitt.emit(deletePeoplePositionPointMittKey);
@@ -60,7 +58,6 @@ function Header() {
       mapMethods.current.addPortPoint();
     }
     mitt.emit(changeBottomUtilsAnimationMittKey);
-    mitt.emit(initBottomUtilsMittKey);
     mitt.emit(resetBottomCurrentIndexMittKey);
     mitt.emit(resetAllBottomUtilsCheckMittKey);
     mitt.emit(clickBackMittKey);

src/pages/Container/Map/components/RightUtils/branchOfficeUtilsList.js

@@ -0,0 +1,62 @@
+import backImg from "~/assets/images/map_bi/right_utils/branch_office/ico1.png";
+import fullImg from "~/assets/images/map_bi/right_utils/branch_office/ico2.png";
+import img2Img from "~/assets/images/map_bi/right_utils/branch_office/ico3.png";
+import img4Img from "~/assets/images/map_bi/right_utils/branch_office/ico4.png";
+import delImg from "~/assets/images/map_bi/right_utils/branch_office/ico5.png";
+import mapImg from "~/assets/images/map_bi/right_utils/branch_office/ico6.png";
+import qixiangImg from "~/assets/images/map_bi/right_utils/branch_office/ico7.png";
+import sisetuImg from "~/assets/images/map_bi/right_utils/branch_office/ico8.png";
+import bianjieImg from "~/assets/images/map_bi/right_utils/branch_office/ico9.png";
+
+export const branchOfficeUtilsList = [
+  {
+    img: backImg,
+    label: "返回主系统",
+    type: "back",
+  },
+  {
+    img: fullImg,
+    check: false,
+    label: "全屏",
+    type: "full",
+  },
+  {
+    img: img2Img,
+    label: "返回中心点",
+    type: "return",
+  },
+  {
+    img: img4Img,
+    check: false,
+    label: "切换视角",
+    type: "scene",
+  },
+  {
+    img: delImg,
+    label: "删除标记点",
+    type: "del",
+  },
+  {
+    img: mapImg,
+    check: false,
+    label: "纯净地图",
+    type: "pureMap",
+  },
+  {
+    img: qixiangImg,
+    label: "气象监测",
+    type: "weather",
+  },
+  {
+    img: sisetuImg,
+    check: false,
+    label: "四色图",
+    type: "fourColor",
+  },
+  {
+    img: bianjieImg,
+    check: false,
+    label: "边界",
+    type: "wall",
+  },
+];

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

@@ -1,8 +1,9 @@
-import { useMount } from "ahooks";
 import { message } from "antd";
-import { useContext, useEffect, useRef, useState } from "react";
-import { CSSTransition } from "react-transition-group";
-import tooltipImg from "~/assets/images/map_bi/right_utils/tooltip.png";
+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 {
@@ -10,43 +11,42 @@ import {
   changeContentAnimationKeyMittKey,
   changePeopleTrajectorySelectVisibleMittKey,
   clickBackMittKey,
-  clickBranchOfficePointMittKey,
   clickMarkPointMittKey,
   deletePeoplePositionPointMittKey,
+  initRightUtilsMittKey,
   resetAllBottomUtilsCheckMittKey,
 } from "~/pages/Container/Map/js/mittKey";
-import { utilsList } from "./utilsList";
+import { branchOfficeUtilsList } from "./branchOfficeUtilsList";
+import { portUtilsList } from "./portUtilsList";
 import "./index.less";
 
 function RightUtils(props) {
-  const { currentPort, mapMethods, pureMap } = useContext(Context);
+  const { currentPort, mapMethods, pureMap, currentBranchOffice } = useContext(Context);
 
-  const [list, setList] = useState(utilsList);
-  const [animationKey, setAnimationKey] = useState(0);
+  const [list, setList] = useState(portUtilsList);
+  const [isShowChildLevel, setIsShowChildLevel] = useState(true);
 
-  const corpinfoId = useRef("");
+  useEffect(() => {
+    mitt.on(initRightUtilsMittKey, () => {
+      mapMethods.current?.removeFourColorDiagram();
+      mapMethods.current?.removeWall();
+      setList(!currentBranchOffice ? portUtilsList : branchOfficeUtilsList);
+    });
 
-  useMount(() => {
-    setAnimationKey(Math.random());
+    return () => {
+      mitt.off(initRightUtilsMittKey);
+    };
+  }, [currentBranchOffice]);
 
+  useEffect(() => {
     mitt.on(clickBackMittKey, () => {
       setList(list.map((item, index) => index === 7 || index === 8 ? { ...item, check: false } : item));
     });
 
-    mitt.on(clickBranchOfficePointMittKey, (data) => {
-      mapMethods.current.removeFourColorDiagram();
-      mapMethods.current.removeWall();
-
-      setList(list.map((item, index) => index === 7 || index === 8 ? { ...item, check: false } : item));
-
-      corpinfoId.current = data.corpinfoId ?? "";
-    });
-
     return () => {
       mitt.off(clickBackMittKey);
-      mitt.off(clickBranchOfficePointMittKey);
     };
-  });
+  }, []);
 
   useEffect(() => {
     setList(list.map((item, index) => index === 1 ? { ...item, check: props.isFullscreen } : item));
@@ -54,7 +54,7 @@ function RightUtils(props) {
 
   const clickRightTools = (index, type) => {
     let check;
-    if (list[index].check !== undefined && list[index].checkImg) {
+    if (list[index].check !== undefined) {
       check = !list[index].check;
       setList(list.map((item, i) => index === i ? { ...item, check: !item.check } : item));
     }
@@ -97,7 +97,7 @@ function RightUtils(props) {
         if (check) {
           mapMethods.current.addFourColorDiagram(
             currentPort,
-            corpinfoId.current,
+            currentBranchOffice,
           );
         }
         else {
@@ -111,40 +111,84 @@ function RightUtils(props) {
           return;
         }
         if (check)
-          mapMethods.current.addWall(currentPort, corpinfoId.current);
+          mapMethods.current.addWall(currentPort, currentBranchOffice);
         else mapMethods.current.removeWall();
         break;
     }
   };
 
+  const renderPortUtils = () => {
+    return (
+      <div className="right_utils port">
+        {
+          list.map((item, index) => (
+            <div
+              key={index}
+              className="option"
+              onClick={() => clickRightTools(index, item.type)}
+            >
+              <div style={{ backgroundImage: `url(${tooltipImg1})` }} className="tooltip">{item.label}</div>
+              <img src={item.check ? item.checkImg : item.img} alt="" />
+            </div>
+          ))
+        }
+      </div>
+    );
+  };
+
+  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
+        >
+          <div className="options">
+            {
+              list.map((item, index) => (
+                <div
+                  key={index}
+                  className={`option ${item.check ? "active" : ""}`}
+                  onClick={() => clickRightTools(index, item.type)}
+                >
+                  <div style={{ backgroundImage: `url(${tooltipImg2})` }} className="tooltip">{item.label}</div>
+                  <img src={item.img} alt="" />
+                </div>
+              ))
+            }
+          </div>
+        </CSSTransition>
+        <div className={`bg ${isShowChildLevel ? "active" : ""}`} onClick={() => setIsShowChildLevel(!isShowChildLevel)}>
+          <img src={buttonBg} alt="" />
+        </div>
+      </div>
+    );
+  };
+
   return (
     <div className="right_utils_container">
-      <CSSTransition
-        in={animationKey !== 0}
-        timeout={1000}
-        classNames={{
-          enter: "animate__animated",
-          enterActive: "animate__animated animate__fadeInRight",
-          exit: "animate__animated",
-          exitActive: "animate__animated animate__fadeOutRight",
-        }}
-        unmountOnExit
-      >
-        <div className="right_utils">
-          {
-            list.map((item, index) => (
-              <div
-                key={index}
-                className="option"
-                onClick={() => clickRightTools(index, item.type)}
-              >
-                <div style={{ backgroundImage: `url(${tooltipImg})` }} className="tooltip">{item.label}</div>
-                <img src={item.check ? item.checkImg : item.img} alt="" />
-              </div>
-            ))
-          }
-        </div>
-      </CSSTransition>
+      <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>
     </div>
   );
 }

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

@@ -1,5 +1,22 @@
 .right_utils_container {
-  .right_utils {
+
+  .tooltip() {
+    transition: 0.5s;
+    opacity: 0;
+    width: 100px;
+    height: 40px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    color: #fff;
+    font-size: 12px;
+    text-align: center;
+    line-height: 36px;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+  }
+
+  .right_utils.port {
     width: 80px;
     position: absolute;
     top: 170px;
@@ -22,19 +39,7 @@
       }
 
       .tooltip {
-        transition: 0.5s;
-        opacity: 0;
-        width: 100px;
-        height: 40px;
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        color: #fff;
-        font-size: 12px;
-        text-align: center;
-        line-height: 36px;
-        position: absolute;
-        right: 20px;
-        top: 20px;
+        .tooltip();
       }
 
       img {
@@ -43,4 +48,67 @@
       }
     }
   }
+
+  .right_utils.branch_office {
+    width: 103px;
+    position: absolute;
+    bottom: 29px;
+    right: 36px;
+
+    .bg {
+      cursor: pointer;
+      transition: all 0.5s;
+      transform: rotate(180deg);
+
+      &.active {
+        transform: rotate(0deg);
+      }
+
+      img {
+        width: 101px;
+        height: 100px;
+      }
+    }
+
+    .options {
+      width: 68px;
+      background-color: rgba(24, 44, 91, 0.74);
+      margin: 0 auto 10px;
+      text-align: center;
+      border: 1px solid rgba(0, 126, 255, 0.58);
+      border-radius: 50px 50px 0 0;
+
+      .option {
+        padding: 15px 0;
+        cursor: pointer;
+        border: 1px solid transparent;
+        position: relative;
+
+        &:first-child {
+          border-radius: 50px 50px 0 0;
+        }
+
+        &.active {
+          border: 1px solid rgb(46, 79, 130);
+          background-color: rgba(40, 84, 155, 0.459);
+        }
+
+        &:hover {
+          .tooltip {
+            opacity: 1;
+            right: 80px;
+          }
+        }
+
+        img {
+          width: 35px;
+          height: 35px;
+        }
+
+        .tooltip {
+          .tooltip();
+        }
+      }
+    }
+  }
 }

src/pages/Container/Map/components/RightUtils/portUtilsList.js

@@ -0,0 +1,72 @@
+import backImg from "~/assets/images/map_bi/right_utils/port/back.png";
+import bianjieImg from "~/assets/images/map_bi/right_utils/port/bianjie.png";
+import bianjieOnImg from "~/assets/images/map_bi/right_utils/port/bianjie_on.png";
+import delImg from "~/assets/images/map_bi/right_utils/port/del.png";
+import fullImg from "~/assets/images/map_bi/right_utils/port/full.png";
+import fullOnImg from "~/assets/images/map_bi/right_utils/port/full_on.png";
+import img2Img from "~/assets/images/map_bi/right_utils/port/img2.png";
+import img4Img from "~/assets/images/map_bi/right_utils/port/img4.png";
+import img4OnImg from "~/assets/images/map_bi/right_utils/port/img4_on.png";
+import mapImg from "~/assets/images/map_bi/right_utils/port/map.png";
+import mapOnImg from "~/assets/images/map_bi/right_utils/port/map_on.png";
+import qixiangImg from "~/assets/images/map_bi/right_utils/port/qixiang.png";
+import sisetuImg from "~/assets/images/map_bi/right_utils/port/sisetu.png";
+import sisetuOnImg from "~/assets/images/map_bi/right_utils/port/sisetu_on.png";
+
+export const portUtilsList = [
+  {
+    img: backImg,
+    label: "返回主系统",
+    type: "back",
+  },
+  {
+    img: fullImg,
+    checkImg: fullOnImg,
+    check: false,
+    label: "全屏",
+    type: "full",
+  },
+  {
+    img: img2Img,
+    label: "返回中心点",
+    type: "return",
+  },
+  {
+    img: img4Img,
+    checkImg: img4OnImg,
+    check: false,
+    label: "切换视角",
+    type: "scene",
+  },
+  {
+    img: delImg,
+    label: "删除标记点",
+    type: "del",
+  },
+  {
+    img: mapImg,
+    checkImg: mapOnImg,
+    check: false,
+    label: "纯净地图",
+    type: "pureMap",
+  },
+  {
+    img: qixiangImg,
+    label: "气象监测",
+    type: "weather",
+  },
+  {
+    img: sisetuImg,
+    checkImg: sisetuOnImg,
+    check: false,
+    label: "四色图",
+    type: "fourColor",
+  },
+  {
+    img: bianjieImg,
+    checkImg: bianjieOnImg,
+    check: false,
+    label: "边界",
+    type: "wall",
+  },
+];

src/pages/Container/Map/components/RightUtils/utilsList.js

@@ -1,72 +0,0 @@
-import backImg from "~/assets/images/map_bi/right_utils/back.png";
-import bianjieImg from "~/assets/images/map_bi/right_utils/bianjie.png";
-import bianjieOnImg from "~/assets/images/map_bi/right_utils/bianjie_on.png";
-import delImg from "~/assets/images/map_bi/right_utils/del.png";
-import fullImg from "~/assets/images/map_bi/right_utils/full.png";
-import fullOnImg from "~/assets/images/map_bi/right_utils/full_on.png";
-import img2Img from "~/assets/images/map_bi/right_utils/img2.png";
-import img4Img from "~/assets/images/map_bi/right_utils/img4.png";
-import img4OnImg from "~/assets/images/map_bi/right_utils/img4_on.png";
-import mapImg from "~/assets/images/map_bi/right_utils/map.png";
-import mapOnImg from "~/assets/images/map_bi/right_utils/map_on.png";
-import qixiangImg from "~/assets/images/map_bi/right_utils/qixiang.png";
-import sisetuImg from "~/assets/images/map_bi/right_utils/sisetu.png";
-import sisetuOnImg from "~/assets/images/map_bi/right_utils/sisetu_on.png";
-
-export const utilsList = [
-  {
-    img: backImg,
-    label: "返回主系统",
-    type: "back",
-  },
-  {
-    img: fullImg,
-    checkImg: fullOnImg,
-    check: false,
-    label: "全屏",
-    type: "full",
-  },
-  {
-    img: img2Img,
-    label: "返回中心点",
-    type: "return",
-  },
-  {
-    img: img4Img,
-    checkImg: img4OnImg,
-    check: false,
-    label: "切换视角",
-    type: "scene",
-  },
-  {
-    img: delImg,
-    label: "删除标记点",
-    type: "del",
-  },
-  {
-    img: mapImg,
-    checkImg: mapOnImg,
-    check: false,
-    label: "纯净地图",
-    type: "pureMap",
-  },
-  {
-    img: qixiangImg,
-    label: "气象监测",
-    type: "weather",
-  },
-  {
-    img: sisetuImg,
-    checkImg: sisetuOnImg,
-    check: false,
-    label: "四色图",
-    type: "fourColor",
-  },
-  {
-    img: bianjieImg,
-    checkImg: bianjieOnImg,
-    check: false,
-    label: "边界",
-    type: "wall",
-  },
-];

src/pages/Container/Map/index.js

@@ -1,7 +1,7 @@
 import { useFullscreen, useMount } from "ahooks";
 import { message } from "antd";
 import autoFit from "autofit.js";
-import { useMemo, useRef, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import useGetUrlQuery from "zy-react-library/hooks/useGetUrlQuery";
 import BottomUtils from "./components/BottomUtils";
 import CenterUtils from "./components/CenterUtils";
@@ -11,7 +11,13 @@ import RightUtils from "./components/RightUtils";
 import { Context } from "./js/context";
 import InitMap from "./js/initMap";
 import mitt from "./js/mitt";
-import { changeCoverMaskVisibleMittKey, clickBranchOfficePointMittKey, clickPortPointMittKey } from "./js/mittKey";
+import {
+  changeCoverMaskVisibleMittKey,
+  clickBranchOfficePointMittKey,
+  clickPortPointMittKey,
+  initBottomUtilsMittKey,
+  initRightUtilsMittKey,
+} from "./js/mittKey";
 import "./index.less";
 
 function Map() {
@@ -57,7 +63,7 @@ function Map() {
     mitt.on(changeCoverMaskVisibleMittKey, (data) => {
       setCoverMaskVisible(data);
       if (!data) {
-        message.success("点位标注完成");
+        message.success("地图绘制完成");
       }
     });
 
@@ -69,6 +75,11 @@ function Map() {
     };
   });
 
+  useEffect(() => {
+    mitt.emit(initBottomUtilsMittKey);
+    mitt.emit(initRightUtilsMittKey);
+  }, [currentBranchOffice]);
+
   const providerValues = useMemo(
     () => ({ viewer, mapMethods, currentPort, currentBranchOffice, area, bottomUtilsCurrentIndex, pureMap }),
     [viewer, mapMethods, currentPort, currentBranchOffice, area, bottomUtilsCurrentIndex, pureMap],
@@ -89,7 +100,7 @@ function Map() {
       <div
         style={{ display: coverMaskVisible ? "block" : "none" }}
         className="coverMaskContainer"
-        onClick={() => message.warning("正在标注点位，请等待标注完成在进行操作")}
+        onClick={() => message.warning("正在绘制地图，请等待绘制完成在进行操作")}
       />
     </div>
   );

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

@@ -171,7 +171,7 @@ export default class MapMethods {
 
     if (!edgeMap[id])
       return;
-
+    mitt.emit(changeCoverMaskVisibleMittKey, true);
     const currentEdge = edgeMap[id]();
     const entityCollection = createEntityCollection(
       "fourColorDiagramEntityCollection",
@@ -215,6 +215,7 @@ export default class MapMethods {
     });
 
     this.#viewer.dataSources.add(entityCollection);
+    mitt.emit(changeCoverMaskVisibleMittKey, false);
   };
 
   // 删除四色图
@@ -232,6 +233,7 @@ export default class MapMethods {
     };
     if (!edgeMap[id])
       return;
+    mitt.emit(changeCoverMaskVisibleMittKey, true);
     const currentEdge = edgeMap[id]();
     const entityCollection = createEntityCollection("wallEntityCollection");
     const wallList = currentEdge.wallList;
@@ -262,6 +264,7 @@ export default class MapMethods {
     });
 
     this.#viewer.dataSources.add(entityCollection);
+    mitt.emit(changeCoverMaskVisibleMittKey, false);
   };
 
   // 删除墙

src/pages/Container/Map/js/mittKey.js

@@ -1,40 +1,28 @@
 // 点击港口点位
-export const clickPortPointMittKey = Symbol("clickPortPoint");
+export const clickPortPointMittKey = "clickPortPoint";
 // 点击分公司点位
-export const clickBranchOfficePointMittKey = Symbol("clickBranchOfficePoint");
+export const clickBranchOfficePointMittKey = "clickBranchOfficePoint";
 // 点击标记点位
-export const clickMarkPointMittKey = Symbol("clickMarkPoint");
+export const clickMarkPointMittKey = "clickMarkPoint";
 // 点击左上角返回
-export const clickBackMittKey = Symbol("clickBack");
+export const clickBackMittKey = "clickBack";
 // 重新执行底部工具栏动画
-export const changeBottomUtilsAnimationMittKey = Symbol(
-  "changeBottomUtilsAnimation",
-);
+export const changeBottomUtilsAnimationMittKey = "changeBottomUtilsAnimation";
 // 重置底部工具栏当前索引
-export const resetBottomCurrentIndexMittKey = Symbol(
-  "resetBottomCurrentIndex",
-);
+export const resetBottomCurrentIndexMittKey = "resetBottomCurrentIndex";
 // 重置所有底部工具栏选中状态
-export const resetAllBottomUtilsCheckMittKey = Symbol(
-  "resetAllBottomUtilsCheck",
-);
+export const resetAllBottomUtilsCheckMittKey = "resetAllBottomUtilsCheck";
 // 初始化底部工具栏
-export const initBottomUtilsMittKey = Symbol("initBottomUtilsMittKey");
+export const initBottomUtilsMittKey = "initBottomUtils";
 // 改变覆盖蒙版显隐
-export const changeCoverMaskVisibleMittKey = Symbol("changeCoverMaskVisible");
+export const changeCoverMaskVisibleMittKey = "changeCoverMaskVisible";
 // 改变内容动画显隐
-export const changeContentAnimationKeyMittKey = Symbol(
-  "changeContentAnimationKey",
-);
+export const changeContentAnimationKeyMittKey = "changeContentAnimationKey";
 // 改变人员轨迹选择窗口显隐
-export const changePeopleTrajectorySelectVisibleMittKey = Symbol(
-  "changePeopleTrajectorySelectVisible",
-);
+export const changePeopleTrajectorySelectVisibleMittKey = "changePeopleTrajectorySelectVisible";
 // 将人员定位列表提供给人员轨迹选择窗口
-export const providePeoplePositionListMittKey = Symbol(
-  "providePeoplePositionList",
-);
+export const providePeoplePositionListMittKey = "providePeoplePositionList";
 // 删除人员轨迹点位
-export const deletePeoplePositionPointMittKey = Symbol(
-  "deletePeoplePositionPoint",
-);
+export const deletePeoplePositionPointMittKey = "deletePeoplePositionPoint";
+// 初始化右侧工具栏
+export const initRightUtilsMittKey = "initRightUtils";

src/pages/Container/Map/js/pointClickEvent.js

@@ -10,7 +10,6 @@ import {
   clickMarkPointMittKey,
   clickPortPointMittKey,
   deletePeoplePositionPointMittKey,
-  initBottomUtilsMittKey,
   resetAllBottomUtilsCheckMittKey,
   resetBottomCurrentIndexMittKey,
 } from "./mittKey";
@@ -85,7 +84,6 @@ export default class PointClickEvent {
     }, 2000);
     mitt.emit(clickPortPointMittKey, data);
     mitt.emit(changeBottomUtilsAnimationMittKey);
-    mitt.emit(initBottomUtilsMittKey);
     mitt.emit(resetBottomCurrentIndexMittKey);
     mitt.emit(resetAllBottomUtilsCheckMittKey);
     mitt.emit(changeContentAnimationKeyMittKey);
@@ -123,7 +121,6 @@ export default class PointClickEvent {
     mitt.emit(deletePeoplePositionPointMittKey);
     mitt.emit(clickBranchOfficePointMittKey, data);
     mitt.emit(changeBottomUtilsAnimationMittKey);
-    mitt.emit(initBottomUtilsMittKey);
     mitt.emit(resetBottomCurrentIndexMittKey);
     mitt.emit(resetAllBottomUtilsCheckMittKey);
     mitt.emit(changeContentAnimationKeyMittKey);