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

消防管控地图标点

master
LiuJiaNan 2026-07-21 11:49:03 +08:00
parent 3176ef7b44
commit 0b690d010c
8 changed files with 92 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/api/biMark/index.js
View File

@ -4,3 +4,27 @@ export const getCorpInfoListAll = declareRequest(
"biFullLoading",
"Post > @/basicInfo/corpInfo/corpListAll",
);
export const getFirePointDeviceList = declareRequest(
"biFullLoading",
"Post > @/fireCheck/firePoint/deviceList",
);
export const getSensorDeviceScreenList = declareRequest(
"biFullLoading",
"Post > @/iotalarm/sensorDevice/screenList",
);
export const getControlRoomScreenList = declareRequest(
"biFullLoading",
"Post > @/fireResource/controlRoom/screenList",
);
export const getRescueTeamScreenList = declareRequest(
"biFullLoading",
"Post > @/fireResource/rescueTeam/screenList",
);
export const getWaterSourceScreenList = declareRequest(
"biFullLoading",
"Post > @/fireResource/waterSource/screenList",
);
export const getPumpRoomScreenList = declareRequest(
"biFullLoading",
"Post > @/fireResource/pumpRoom/screenList",
);

12
src/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList.js
View File

@ -131,36 +131,48 @@ export const branchOfficeUtilsList = [
check: false,
markIcon: pointIco4,
type: "xfjyd01",
request: "getRescueTeamScreenList",
titleKey: "teamName",
},
{
label: "消防控制室",
check: false,
type: "xfkzs01",
markIcon: pointIco5,
request: "getControlRoomScreenList",
titleKey: "roomName",
},
{
label: "消防泵房",
check: false,
type: "xfbf01",
markIcon: pointIco6,
request: "getPumpRoomScreenList",
titleKey: "pumpRoomName",
},
{
label: "消防水源",
check: false,
type: "xfsy01",
markIcon: pointIco7,
request: "getWaterSourceScreenList",
titleKey: "waterSourceName",
},
{
label: "消防点位",
check: false,
type: "point",
markIcon: pointIco8,
request: "getFirePointDeviceList",
titleKey: "firePointName",
},
{
label: "报警设备",
check: false,
type: "alarm",
markIcon: pointIco32,
request: "getSensorDeviceScreenList",
titleKey: "sensorName",
},
],
},

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

@ -1,3 +1,4 @@
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { produce } from "immer";
import { AnimatePresence, motion } from "motion/react";
import { useContext, useEffect, useState } from "react";
@ -5,6 +6,7 @@ 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 { NS_BI_MARK } from "~/enumerate/namespace";
import { branchOfficeUtilsList } from "~/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList";
import { Context } from "~/pages/Container/Map/js/context";
import { portUtilsList } from "./portUtilsList";
@ -17,7 +19,7 @@ const bottomUtilsAnimation = {
exit: { y: 100, opacity: 0, transition: { duration: 0.3, ease: "easeIn" } },
};
// 分公司子项按顺序进入、反向退出，保留原来的波浪式效果。
// 分公司子项按顺序进入、反向退出，波浪式效果。
const branchOfficeContainerAnimation = {
hidden: {
y: 200,
@ -36,14 +38,16 @@ const branchOfficeItemAnimation = {
visible: { y: 0, opacity: 1, transition: { duration: 0.3, ease: "easeOut" } },
};
function BottomUtils() {
function BottomUtils(props) {
const {
mapMethods,
currentPort,
pureMap,
currentBranchOffice,
bottomUtilsCurrentIndex,
bottomUtilsResetVersion,
actions,
portArea,
} = useContext(Context);
const bottomUtilsMode = !pureMap && currentPort && !currentBranchOffice
@ -91,7 +95,6 @@ function BottomUtils() {
setListMode(bottomUtilsMode);
}, [bottomUtilsMode]);
// reducer 递增版本号时重置本组件维护的子项勾选状态，不再依赖全局事件订阅。
useEffect(() => {
resetAllCheck();
}, [bottomUtilsResetVersion]);
@ -100,10 +103,24 @@ function BottomUtils() {
actions.setBottomUtilsIndex(bottomUtilsCurrentIndex === index ? -1 : index);
};
const optionsItemsClick = (index, index1, item, item1) => {
// 子选项点击处理
const optionsItemsClick = async (index, index1, item, item1) => {
const check = !list[index].list[index1].check;
if (check) {
if (item1.request) {
const { data } = await props[item1.request]({ portArea, corpinfoId: currentBranchOffice });
mapMethods.current.addMarkPoint(data, {
markType: item1.type,
markIcon: item1.markIcon,
subLabel: item1.label,
titleKey: item1.titleKey,
});
}
}
else {
mapMethods.current.removeMarkPoint(item1.type);
}
setList(produce((draft) => {
draft[index].list[index1].check = !draft[index].list[index1].check;
draft[index].list[index1].check = check;
}));
};
@ -177,7 +194,13 @@ function BottomUtils() {
<div className="label">{item.label}</div>
<AnimatePresence>
{(isCurrentActive && item.list?.length > 0) && (
<motion.div className="items" initial="hidden" animate="visible" exit="hidden" variants={branchOfficeContainerAnimation}>
<motion.div
className="items"
initial="hidden"
animate="visible"
exit="hidden"
variants={branchOfficeContainerAnimation}
>
{item.list?.map((item1, index1) => {
return (
<motion.div
@ -221,4 +244,4 @@ function BottomUtils() {
);
}
export default BottomUtils;
export default Connect([NS_BI_MARK], true)(BottomUtils);

12
src/pages/Container/Map/components/BottomUtils/portUtilsList.js
View File

@ -153,6 +153,8 @@ export const portUtilsList = [
checkImg: ico4On,
markIcon: pointIco4,
type: "xfjyd01",
request: "getRescueTeamScreenList",
titleKey: "teamName",
},
{
label: "消防控制室",
@ -161,6 +163,8 @@ export const portUtilsList = [
img: ico5,
checkImg: ico5On,
markIcon: pointIco5,
request: "getControlRoomScreenList",
titleKey: "roomName",
},
{
label: "消防泵房",
@ -169,6 +173,8 @@ export const portUtilsList = [
img: ico6,
checkImg: ico6On,
markIcon: pointIco6,
request: "getPumpRoomScreenList",
titleKey: "pumpRoomName",
},
{
label: "消防水源",
@ -177,6 +183,8 @@ export const portUtilsList = [
img: ico7,
checkImg: ico7On,
markIcon: pointIco7,
request: "getWaterSourceScreenList",
titleKey: "waterSourceName",
},
{
label: "消防点位",
@ -185,6 +193,8 @@ export const portUtilsList = [
img: ico8,
checkImg: ico8On,
markIcon: pointIco8,
request: "getFirePointDeviceList",
titleKey: "firePointName",
},
{
label: "报警设备",
@ -193,6 +203,8 @@ export const portUtilsList = [
img: ico28,
checkImg: ico28On,
markIcon: pointIco32,
request: "getSensorDeviceScreenList",
titleKey: "sensorName",
},
],
},

2
src/pages/Container/Map/components/Header/index.js
View File

@ -8,7 +8,7 @@ import topImg2 from "~/assets/images/map_bi/top2.png";
import { Context } from "~/pages/Container/Map/js/context";
import "./index.less";
// 标题切换时先让旧标题离开，再让新标题进入，保留原来的上下滑动和淡入淡出效果。
// 标题切换时先让旧标题离开，再让新标题进入，上下滑动和淡入淡出效果。
const headerAnimation = {
initial: { y: -100, opacity: 0 },
animate: { y: 0, opacity: 1, transition: { duration: 0.5, ease: "easeOut" } },

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

@ -77,7 +77,7 @@ function RightUtils(props) {
if (list[index].check !== undefined) {
check = !list[index].check;
setList(produce((draft) => {
draft[index].check = !draft[index].check;
draft[index].check = check;
}));
}

15
src/pages/Container/Map/js/mapMethods.js
View File

@ -143,12 +143,12 @@ export default function useMapMethods(viewerRef, request) {
const entityCollection = createEntityCollection("branchOfficeEntityCollection");
entityCollection.entities.add(
new Cesium.Entity({
id: item.corpinfoId,
id: item.id,
name: item.corpName,
position: getPosition(item.longitude, item.latitude),
billboard: await getBillboard({ image: branchOfficeEntityBillboardImage, name: item.corpName }),
monitorItems: {
data: { ...item, id: item.corpinfoId, markType: "分公司" },
data: { ...item, id: item.id, markType: "分公司" },
},
}),
);
@ -343,27 +343,30 @@ export default function useMapMethods(viewerRef, request) {
/**
* desc: 添加点位
* @param {Array} pointList
* @param options {Object: {markIcon, type, subLabel}} 配置项
* @param options {Object: {markIcon, type, subLabel, titleKey}} 配置项
* @param options.markIcon {String} 扎点图标
* @param options.markType {String} 扎点类型
* @param options.subLabel {String} 二级标题（用于弹窗标题）
* @param options.titleKey {String} 标题键（用于从item中获取标题）
*/
const addMarkPoint = async (pointList, options) => {
if (!options.markType)
throw new Error("请传入markType（扎点类型）");
if (!options.markIcon)
throw new Error("请传入markIcon（扎点图标）");
if (!options.titleKey)
throw new Error("请传入titleKey（标题键）");
mitt.emit(changeCoverMaskVisibleMittKey, true);
await chunkedLoad(pointList, 10, async (item) => {
await chunkedLoad(filterNull(pointList), 10, async (item) => {
const entityCollection = createEntityCollection(
`markEntityCollection_${options.markType}`,
);
const name = item.MAP_POINT_NAME || item.AREA_NAME || "";
const name = item[options.titleKey] || "";
entityCollection.entities.add(
new Cesium.Entity({
id: createId(),
name,
position: getPosition(item.LONGITUDE, item.LATITUDE),
position: getPosition(item.longitude, item.latitude),
billboard: await getBillboard({ image: options.markIcon, name }),
monitorItems: {
data: { ...item, markType: `标记点_${options.markType}`, title: options.subLabel },

4
src/pages/Container/Map/js/pointClickEvent.js
View File

@ -39,7 +39,7 @@ export default function usePointClickEvent(viewerRef, mapMethods) {
mapMethods.removeFourColorDiagram();
mapMethods.removeWall();
mapMethods.flyTo({ longitude: data.position.x, latitude: data.position.y, height: 2000 });
mapMethods.addBranchOfficePoint("", {
mapMethods.addBranchOfficePoint(undefined, {
corpName: data.name,
corpinfoId: data.corpinfoId,
longitude: data.position.x,
@ -74,7 +74,7 @@ export default function usePointClickEvent(viewerRef, mapMethods) {
closePopup();
mapMethods.removeBranchOfficePoint();
mapMethods.removeMarkPoint();
mapMethods.addBranchOfficePoint("", data);
mapMethods.addBranchOfficePoint(undefined, data);
mapMethods.removeFourColorDiagram();
mapMethods.removeWall();
mapMethods.flyTo({ longitude: data.longitude, latitude: data.latitude, height: 2000 });