地图

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

@@ -14,21 +14,19 @@ import {
   initRightUtilsMittKey,
   resetAllBottomUtilsCheckMittKey,
 } from "~/pages/Container/Map/js/mittKey";
-import { branchOfficeUtilsList } from "./branchOfficeUtilsList";
-import { portUtilsList } from "./portUtilsList";
+import { utilsList } from "./utilsList";
 import "./index.less";
 
 function RightUtils(props) {
   const { currentPort, mapMethods, pureMap, currentBranchOffice, bottomUtilsCurrentIndex } = useContext(Context);
 
-  const [list, setList] = useState(portUtilsList);
+  const [list, setList] = useState(utilsList);
   const [isShowChildLevel, setIsShowChildLevel] = useState(false);
 
   useEffect(() => {
     mitt.on(initRightUtilsMittKey, () => {
       mapMethods.current?.removeFourColorDiagram();
       mapMethods.current?.removeWall();
-      setList(!currentBranchOffice ? portUtilsList : branchOfficeUtilsList);
     });
 
     return () => {
@@ -38,7 +36,7 @@ function RightUtils(props) {
 
   useEffect(() => {
     mitt.on(clickBackMittKey, () => {
-      setList(list.map((item, index) => index === 7 || index === 8 ? { ...item, check: false } : item));
+      setList(prev => prev.map(item => item.type === "fourColor" || item.type === "wall" ? { ...item, check: false } : item));
     });
 
     return () => {
@@ -47,7 +45,7 @@ function RightUtils(props) {
   }, []);
 
   useEffect(() => {
-    setList(list.map((item, index) => index === 1 ? { ...item, check: props.isFullscreen } : item));
+    setList(list.map(item => item.type === "full" ? { ...item, check: props.isFullscreen } : item));
   }, [props.isFullscreen]);
 
   const clickRightTools = (index, type) => {
@@ -124,7 +122,7 @@ function RightUtils(props) {
               onClick={() => clickRightTools(index, item.type)}
             >
               <div style={{ backgroundImage: `url(${tooltipImg1})` }} className="tooltip">{item.label}</div>
-              <img src={item.check ? item.checkImg : item.img} alt="" />
+              <img src={item.check ? item.checkImgPort : item.imgPort} alt="" />
             </div>
           ))
         }
@@ -155,7 +153,7 @@ function RightUtils(props) {
                   onClick={() => clickRightTools(index, item.type)}
                 >
                   <div style={{ backgroundImage: `url(${tooltipImg2})` }} className="tooltip">{item.label}</div>
-                  <img src={item.img} alt="" />
+                  <img src={item.imgBranchOffice} alt="" />
                 </div>
               ))
             }

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

@@ -0,0 +1,90 @@
+import backImgBranchOffice from "~/assets/images/map_bi/right_utils/branch_office/ico1.png";
+import fullImgBranchOffice from "~/assets/images/map_bi/right_utils/branch_office/ico2.png";
+import img2ImgBranchOffice from "~/assets/images/map_bi/right_utils/branch_office/ico3.png";
+import img4ImgBranchOffice from "~/assets/images/map_bi/right_utils/branch_office/ico4.png";
+import delImgBranchOffice from "~/assets/images/map_bi/right_utils/branch_office/ico5.png";
+import mapImgBranchOffice from "~/assets/images/map_bi/right_utils/branch_office/ico6.png";
+import qixiangImgBranchOffice from "~/assets/images/map_bi/right_utils/branch_office/ico7.png";
+import sisetuImgBranchOffice from "~/assets/images/map_bi/right_utils/branch_office/ico8.png";
+import bianjieImgBranchOffice from "~/assets/images/map_bi/right_utils/branch_office/ico9.png";
+import backImgPort from "~/assets/images/map_bi/right_utils/port/back.png";
+import bianjieImgPort from "~/assets/images/map_bi/right_utils/port/bianjie.png";
+import bianjieOnImgPort from "~/assets/images/map_bi/right_utils/port/bianjie_on.png";
+import delImgPort from "~/assets/images/map_bi/right_utils/port/del.png";
+import fullImgPort from "~/assets/images/map_bi/right_utils/port/full.png";
+import fullOnImgPort from "~/assets/images/map_bi/right_utils/port/full_on.png";
+import img2ImgPort from "~/assets/images/map_bi/right_utils/port/img2.png";
+import img4ImgPort from "~/assets/images/map_bi/right_utils/port/img4.png";
+import img4OnImgPort from "~/assets/images/map_bi/right_utils/port/img4_on.png";
+import mapImgPort from "~/assets/images/map_bi/right_utils/port/map.png";
+import mapOnImgPort from "~/assets/images/map_bi/right_utils/port/map_on.png";
+import qixiangImgPort from "~/assets/images/map_bi/right_utils/port/qixiang.png";
+import sisetuImgPort from "~/assets/images/map_bi/right_utils/port/sisetu.png";
+import sisetuOnImgPort from "~/assets/images/map_bi/right_utils/port/sisetu_on.png";
+
+export const utilsList = [
+  {
+    imgPort: backImgPort,
+    imgBranchOffice: backImgBranchOffice,
+    label: "返回主系统",
+    type: "back",
+  },
+  {
+    imgPort: fullImgPort,
+    imgBranchOffice: fullImgBranchOffice,
+    checkImgPort: fullOnImgPort,
+    check: false,
+    label: "全屏",
+    type: "full",
+  },
+  {
+    imgPort: img2ImgPort,
+    imgBranchOffice: img2ImgBranchOffice,
+    label: "返回中心点",
+    type: "return",
+  },
+  {
+    imgPort: img4ImgPort,
+    imgBranchOffice: img4ImgBranchOffice,
+    checkImgPort: img4OnImgPort,
+    check: false,
+    label: "切换视角",
+    type: "scene",
+  },
+  {
+    imgPort: delImgPort,
+    imgBranchOffice: delImgBranchOffice,
+    label: "删除标记点",
+    type: "del",
+  },
+  {
+    imgPort: mapImgPort,
+    imgBranchOffice: mapImgBranchOffice,
+    checkImgPort: mapOnImgPort,
+    check: false,
+    label: "纯净地图",
+    type: "pureMap",
+  },
+  {
+    imgPort: qixiangImgPort,
+    imgBranchOffice: qixiangImgBranchOffice,
+    label: "气象监测",
+    type: "weather",
+  },
+  {
+    imgPort: sisetuImgPort,
+    imgBranchOffice: sisetuImgBranchOffice,
+    checkImgPort: sisetuOnImgPort,
+    check: false,
+    label: "四色图",
+    type: "fourColor",
+  },
+  {
+    imgPort: bianjieImgPort,
+    imgBranchOffice: bianjieImgBranchOffice,
+    checkImgPort: bianjieOnImgPort,
+    check: false,
+    label: "边界",
+    type: "wall",
+  },
+];