From 589aa293763bc6b657629413745a915b54ba432a Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Mon, 2 Mar 2026 16:35:37 +0800 Subject: [PATCH] =?UTF-8?q?=E5=A4=8D=E6=9D=82set=E4=BF=AE=E6=94=B9?= =?UTF-8?q?=E4=BD=BF=E7=94=A8immer=E7=AE=80=E5=8C=96=20=E4=BF=AE=E5=A4=8D?= =?UTF-8?q?=E5=BA=95=E9=83=A8=E5=B7=A5=E5=85=B7=E7=82=B9=E5=87=BB=E5=8C=BA?= =?UTF-8?q?=E5=9F=9F=E9=81=AE=E6=8C=A1=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + .../Map/components/BottomUtils/index.js | 23 ++++++++-------- .../Map/components/BottomUtils/index.less | 4 +-- .../Map/components/RightUtils/index.js | 27 +++++++++++++++---- 4 files changed, 37 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 8808f34..db8ac0f 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ "autofit.js": "^3.2.8", "dayjs": "^1.11.7", "echarts": "^6.0.0", + "immer": "^11.1.4", "lodash-es": "^4.17.21", "mitt": "^3.0.1", "motion": "^12.23.26", diff --git a/src/pages/Container/Map/components/BottomUtils/index.js b/src/pages/Container/Map/components/BottomUtils/index.js index b647c49..4e035d0 100644 --- a/src/pages/Container/Map/components/BottomUtils/index.js +++ b/src/pages/Container/Map/components/BottomUtils/index.js @@ -1,3 +1,4 @@ +import { produce } from "immer"; import { AnimatePresence, motion } from "motion/react"; import { useContext, useEffect, useState } from "react"; import bg7 from "~/assets/images/map_bi/bottom_utils/bg7.png"; @@ -52,12 +53,13 @@ function BottomUtils(props) { ); const resetAllCheck = () => { - setList((prevList) => { - return prevList.map(item => ({ - ...item, - list: item.list.map(item1 => ({ ...item1, check: false })), - })); - }); + setList(produce((draft) => { + draft.forEach((item) => { + item.list.forEach((item1) => { + item1.check = false; + }); + }); + })); }; useEffect(() => { @@ -95,11 +97,9 @@ function BottomUtils(props) { const optionsItemsClick = (index, index1, item, item1) => { // 子选项点击处理 - setList((prevList) => { - const updatedList = [...prevList]; - updatedList[index].list[index1].check = !updatedList[index].list[index1].check; - return updatedList; - }); + setList(produce((draft) => { + draft[index].list[index1].check = !draft[index].list[index1].check; + })); }; const renderPortUtils = () => { @@ -118,6 +118,7 @@ function BottomUtils(props) { onClick={() => !portUtilsIsAnimating && !isAllowClick && optionsClick(index)} style={{ cursor: isAllowClick ? "default" : "pointer", + zIndex: isAllowClick ? -1 : 0, }} > diff --git a/src/pages/Container/Map/components/BottomUtils/index.less b/src/pages/Container/Map/components/BottomUtils/index.less index a1dc8d9..f42fa3e 100644 --- a/src/pages/Container/Map/components/BottomUtils/index.less +++ b/src/pages/Container/Map/components/BottomUtils/index.less @@ -55,11 +55,11 @@ .child_item { padding: 0 20px; text-align: center; + cursor: pointer; .child_img { width: 60px; height: 60px; - cursor: pointer; &:hover { animation: bottomUtilsContainerSlideY 0.5s; @@ -67,7 +67,7 @@ } .child_label { - margin-top: -10px; + margin-top: -5px; font-size: 12px; width: 80px; color: rgba(255, 255, 255, 0.8); diff --git a/src/pages/Container/Map/components/RightUtils/index.js b/src/pages/Container/Map/components/RightUtils/index.js index 3ab084c..84abee1 100644 --- a/src/pages/Container/Map/components/RightUtils/index.js +++ b/src/pages/Container/Map/components/RightUtils/index.js @@ -1,4 +1,5 @@ import { message } from "antd"; +import { produce } from "immer"; import { motion } from "motion/react"; import { useContext, useEffect, useState } from "react"; import tooltipImg2 from "~/assets/images/map_bi/right_utils/branch_office/bg11.png"; @@ -44,7 +45,12 @@ function RightUtils(props) { useEffect(() => { mitt.on(clickBackMittKey, () => { - setList(prev => prev.map(item => item.type === "fourColor" || item.type === "wall" ? { ...item, check: false } : item)); + setList(produce((draft) => { + draft.forEach((item) => { + if (item.type === "fourColor" || item.type === "wall") + item.check = false; + }); + })); }); return () => { @@ -53,14 +59,21 @@ function RightUtils(props) { }, []); useEffect(() => { - setList(list.map(item => item.type === "full" ? { ...item, check: props.isFullscreen } : item)); + setList(produce((draft) => { + draft.forEach((item) => { + if (item.type === "full") + item.check = props.isFullscreen; + }); + })); }, [props.isFullscreen]); const clickRightTools = (index, type) => { let check; if (list[index].check !== undefined) { check = !list[index].check; - setList(list.map((item, i) => index === i ? { ...item, check: !item.check } : item)); + setList(produce((draft) => { + draft[index].check = !draft[index].check; + })); } switch (type) { @@ -98,7 +111,9 @@ function RightUtils(props) { case "fourColor": if (!currentPort) { message.warning("请选择要查看的港口"); - setList(list.map((item, i) => index === i ? { ...item, check: false } : item)); + setList(produce((draft) => { + draft[index].check = false; + })); return; } if (check) { @@ -114,7 +129,9 @@ function RightUtils(props) { case "wall": if (!currentPort) { message.warning("请选择要查看的港口"); - setList(list.map((item, i) => index === i ? { ...item, check: false } : item)); + setList(produce((draft) => { + draft[index].check = false; + })); return; } if (check)