zcloud_gbs
/
zcloud-gbs-bi-react
15
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

复杂set修改使用immer简化 

修复底部工具点击区域遮挡问题
master
LiuJiaNan 2026-03-02 16:35:37 +08:00
parent d1de5b0d43
commit 589aa29376
4 changed files with 37 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -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",

23
src/pages/Container/Map/components/BottomUtils/index.js
View File

@ -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,
}}
>
<img src={isCurrentActive ? item.checkImg : item.img} alt="" className="img" />

4
src/pages/Container/Map/components/BottomUtils/index.less
View File

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

27
src/pages/Container/Map/components/RightUtils/index.js
View File

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