From 38b34ae82d7710294a3fa5a56ae46ffcca85acc0 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Wed, 14 Jan 2026 17:20:13 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Map/components/RightUtils/index.js | 14 ++- .../Map/components/RightUtils/utilsList.js | 90 +++++++++++++++++++ 2 files changed, 96 insertions(+), 8 deletions(-) create mode 100644 src/pages/Container/Map/components/RightUtils/utilsList.js diff --git a/src/pages/Container/Map/components/RightUtils/index.js b/src/pages/Container/Map/components/RightUtils/index.js index 26dbe94..b73fce4 100644 --- a/src/pages/Container/Map/components/RightUtils/index.js +++ b/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)} >
{item.label}
- + )) } @@ -155,7 +153,7 @@ function RightUtils(props) { onClick={() => clickRightTools(index, item.type)} >
{item.label}
- + )) } diff --git a/src/pages/Container/Map/components/RightUtils/utilsList.js b/src/pages/Container/Map/components/RightUtils/utilsList.js new file mode 100644 index 0000000..d1973f9 --- /dev/null +++ b/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", + }, +];