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

feat(map): 优化地图组件及接口请求性能 

- 新增获取码头人员车辆统计接口getScreenPortPersonVehicleStat
- 中心工具组件引入数据加载及界面loading状态展示
- 中心工具统计数据显示人数及车辆数动态渲染
- 所有分页请求pageSize由9999调整为99，减少数据加载压力
- useInitMap、useMapMethods及usePointClickEvent中getViewer调用优化，避免多次重复调用
- 统一使用viewer变量缓存getViewer返回值，代码结构更清晰易维护
master
LiuJiaNan 2026-08-03 10:07:50 +08:00
parent f2109d6e80
commit 37e94a178c
25 changed files with 108 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/api/biStatistics/index.js
View File

@ -208,3 +208,7 @@ export const getScreenRelatedCorpStatistics = declareRequest(
"getScreenRelatedCorpStatisticsLoading",
"Post > @/xgfManager/project/relatedCorpStatistics",
);
export const getScreenPortPersonVehicleStat = declareRequest(
"getScreenPortPersonVehicleStatLoading",
"Get > /personnelPosition/bi/personLocation/portPersonVehicleStat",
);

70
src/pages/Container/Map/components/CenterUtils/index.js
View File

@ -1,5 +1,7 @@
import { Connect } from "@cqsjjb/jjb-dva-runtime";
import { Spin } from "antd";
import { AnimatePresence, motion } from "motion/react";
import { useContext } from "react";
import { useContext, useEffect, useState } from "react";
import statisticsTitleImg from "~/assets/images/map_bi/center_utils/statistics_title.png";
import guangImg from "~/assets/images/map_bi/center_utils/tabguang.png";
import tabLeftImg from "~/assets/images/map_bi/center_utils/tableft.png";
@ -8,6 +10,7 @@ import tabMidImg from "~/assets/images/map_bi/center_utils/tabmid.png";
import tabMidOnImg from "~/assets/images/map_bi/center_utils/tabmid_on.png";
import tabRightImg from "~/assets/images/map_bi/center_utils/tabright.png";
import tabRightOnImg from "~/assets/images/map_bi/center_utils/tabright_on.png";
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
import { Context } from "~/pages/Container/Map/js/context";
import "./index.less";
@ -42,9 +45,11 @@ const statisticAnimation = {
},
};
function CenterUtils() {
function CenterUtils(props) {
const { currentPort, currentBranchOffice, pureMap, mapMethods, actions, portArea } = useContext(Context);
const [data, setData] = useState([]);
const list = [
{ label: "秦皇岛西", portArea: 3 },
{ label: "秦皇岛港区", portArea: "" },
@ -62,6 +67,16 @@ function CenterUtils() {
actions.resetBottomUtils();
};
useEffect(() => {
const loadData = async () => {
if (!isVisible)
return;
const { data } = await props.getScreenPortPersonVehicleStat();
setData(data || []);
};
loadData();
}, [isVisible]);
return (
<div className="map_content_center_options_container">
<AnimatePresence>
@ -87,34 +102,27 @@ function CenterUtils() {
</div>
))}
</div>
<div className="statistics">
<AnimatePresence>
{["", 3].includes(portArea) && (
<motion.div key="west" {...statisticAnimation}>
<div className="statistic">
<div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
<div className="info">
<div className="value">人数：33人</div>
<div className="value">车辆：33辆</div>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
<AnimatePresence>
{["", 2].includes(portArea) && (
<motion.div key="east" {...statisticAnimation}>
<div className="statistic">
<div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>
<div className="info">
<div className="value">人数：33人</div>
<div className="value">车辆：33辆</div>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
</div>
<Spin spinning={props.biStatistics.getScreenPortPersonVehicleStatLoading}>
<div className="statistics">
{
data.map((item, index) => (
<AnimatePresence key={index}>
{["", item.portArea].includes(portArea) && (
<motion.div key={item.portArea} {...statisticAnimation}>
<div className="statistic">
<div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>{item.portName}</div>
<div className="info">
<div className="value">{`人数：${item.onlinePersonCount}人`}</div>
<div className="value">{`车辆：${item.onlineVehicleCount}辆`}</div>
</div>
</div>
</motion.div>
)}
</AnimatePresence>
))
}
</div>
</Spin>
</motion.div>
)}
</AnimatePresence>
@ -122,4 +130,4 @@ function CenterUtils() {
);
}
export default CenterUtils;
export default Connect([NS_BI_STATISTICS], true)(CenterUtils);

2
src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/RectificationPanel/index.js
View File

@ -15,7 +15,7 @@ function RectificationPanel(props) {
const loadData = async () => {
const { data } = await props.getHiddenStatisticsByPortArea({
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
setData(data || []);
};

2
src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/WeatherPanel/index.js
View File

@ -26,7 +26,7 @@ function WeatherPanel(props) {
const { data } = await props.getEventReportListUnfinished({
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
setEmergencyList(data || []);
};

2
src/pages/Container/Map/components/Content/IndexInfo/RightPanel/AlarmPanel/index.js
View File

@ -15,7 +15,7 @@ function AlarmPanel(props) {
const loadData = async () => {
const { data } = await props.getAlarmRecordScreenIotDeviceAlarmPage({
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
setData(data || []);
};

2
src/pages/Container/Map/components/Content/IndexInfo/RightPanel/PartnerPanel/index.js
View File

@ -15,7 +15,7 @@ function PartnerPanel(props) {
const loadData = async () => {
const { data } = await props.getXgfStatisticsListCorpStatistics({
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
setData(data || []);
};

2
src/pages/Container/Map/components/Content/branchOffice/Camera/index.js
View File

@ -33,7 +33,7 @@ function Camera(props) {
portArea,
corpinfoId: currentBranchOffice,
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
}),
]);
setLevelList(dictionaryData);

2
src/pages/Container/Map/components/Content/branchOffice/IndexRight/AreaAlarmPanel/index.js
View File

@ -20,7 +20,7 @@ function AreaAlarmPanel(props) {
portArea,
corpinfoId: currentBranchOffice,
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
setData(data || []);
};

2
src/pages/Container/Map/components/Content/branchOffice/IndexRight/VideoPatrolPanel/index.js
View File

@ -36,7 +36,7 @@ function VideoPatrolPanel(props) {
portArea,
corpinfoId: currentBranchOffice,
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
const videos = formatVideoList(data || []);
setVideoList(videos);

2
src/pages/Container/Map/components/Content/branchOffice/MenJin/GateApplicationPanel/index.js
View File

@ -21,7 +21,7 @@ function GateApplicationPanel(props) {
setIsVisible(false);
const { data } = await props[activeIndex === 1 ? "getPrimeportClosedAreaCarApplyScreenList" : "getPrimeportClosedAreaPersonApplyScreenList"]({
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
portArea,
corpinfoId: currentBranchOffice,
});

2
src/pages/Container/Map/components/Content/branchOffice/RenYuan/AlarmHandlingPanel/index.js
View File

@ -17,7 +17,7 @@ function AlarmHandlingPanel(props) {
useEffect(() => {
const loadData = async () => {
const { data } = await props.getAlarmRecordList({ portArea, corpinfoId: currentBranchOffice });
const { data } = await props.getAlarmRecordList({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 99 });
setData(data || []);
};

2
src/pages/Container/Map/components/Content/branchOffice/RenYuan/PersonnelLocationPanel/index.js
View File

@ -15,7 +15,7 @@ function PersonnelLocationPanel(props) {
useEffect(() => {
const loadData = async () => {
const { data } = await props.getPersonLocationPositioning({ portArea, corpinfoId: currentBranchOffice });
const { data } = await props.getPersonLocationPositioning({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 99 });
setData(data || []);
};

2
src/pages/Container/Map/components/Content/branchOffice/WeiXian/DepartmentWorkPanel/index.js
View File

@ -14,7 +14,7 @@ function DepartmentWorkPanel(props) {
useEffect(() => {
const loadData = async () => {
const { data } = await props.getScreenWorkPage({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 9999 });
const { data } = await props.getScreenWorkPage({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 99 });
setData(data);
};
loadData();

2
src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireAlarmRecordPanel/index.js
View File

@ -20,7 +20,7 @@ function FireAlarmRecordPanel(props) {
portArea,
corpinfoId: currentBranchOffice,
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
setData(data || []);
};

2
src/pages/Container/Map/components/Content/branchOffice/XiaoFang/FireInspectionRecordPanel/index.js
View File

@ -16,7 +16,7 @@ function FireInspectionRecordPanel(props) {
useEffect(() => {
const loadData = async () => {
const { data } = await props.getScreenFireCheckList({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 9999 });
const { data } = await props.getScreenFireCheckList({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 99 });
setData(data);
};
loadData();

2
src/pages/Container/Map/components/Content/branchOffice/XiaoFang/VolunteerFireTeamPanel/index.js
View File

@ -18,7 +18,7 @@ function VolunteerFireTeamPanel(props) {
portArea,
corpinfoId: currentBranchOffice,
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
setData(data || []);
};

2
src/pages/Container/Map/components/Content/branchOffice/ZhongDian/ContractProjectPanel/index.js
View File

@ -163,7 +163,7 @@ function ContractProjectPanel(props) {
portArea,
corpinfoId: currentBranchOffice,
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
initEcharts(data || []);
};

2
src/pages/Container/Map/components/Content/branchOffice/ZhongDian/MobileMonitoringPanel/index.js
View File

@ -27,7 +27,7 @@ function MobileMonitoringPanel(props) {
portArea,
corpinfoId: currentBranchOffice,
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
if (data?.length) {
loadPlayUrl(data[Math.floor(randoms(0, data.length - 1))].cameraNumber);

2
src/pages/Container/Map/components/Content/port/Index/PersonnelStatsPanel/index.js
View File

@ -24,7 +24,7 @@ function PersonnelStatsPanel(props) {
portArea,
enterpriseType,
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
setData(data || []);
setIsVisible(true);

2
src/pages/Container/Map/components/Content/port/RenYuan/AlarmListPanel/index.js
View File

@ -15,7 +15,7 @@ function AlarmListPanel(props) {
useEffect(() => {
const loadData = async () => {
const { data } = await props.getAlarmRecordList({ portArea });
const { data } = await props.getAlarmRecordList({ portArea, pageIndex: 1, pageSize: 99 });
setData(data || []);
};

2
src/pages/Container/Map/components/Content/port/WeiXian/WorkRecordPanel/index.js
View File

@ -19,7 +19,7 @@ function WorkRecordPanel(props) {
const { data } = await props.getEightWorkInfoScreenWorkRecord({
portArea,
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
setData(data || []);
};

2
src/pages/Container/Map/components/Content/port/XiaoFang/FireDeviceListPanel/index.js
View File

@ -21,7 +21,7 @@ function FireDeviceListPanel(props) {
portArea,
...queryParams,
pageIndex: 1,
pageSize: 9999,
pageSize: 99,
});
setData(data || []);
setIsVisible(true);

18
src/pages/Container/Map/js/useInitMap.js
View File

@ -54,11 +54,12 @@ export default function useInitMap(options) {
// 注册点击事件
const registerClickEvent = () => {
getViewer().cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
getViewer().cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
const screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(getViewer().scene.canvas);
const viewer = getViewer();
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
const screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
screenSpaceEventHandler.setInputAction((movement) => {
const pick = getViewer().scene.pick(movement.position);
const pick = viewer.scene.pick(movement.position);
if (Cesium.defined(pick) && pick.id?.id) {
pointClickEventRef.current.pointClickEvent(pick.id);
}
@ -98,8 +99,9 @@ export default function useInitMap(options) {
show: true,
}),
});
const viewer = getViewer();
// 调整 Cesium 默认相机操作：左键旋转地图，右键调整俯仰角，实现从平面俯视到立体视角的切换。
const cameraController = getViewer().scene.screenSpaceCameraController;
const cameraController = viewer.scene.screenSpaceCameraController;
cameraController.rotateEventTypes = Cesium.CameraEventType.LEFT_DRAG;
cameraController.tiltEventTypes = [
Cesium.CameraEventType.RIGHT_DRAG,
@ -110,8 +112,8 @@ export default function useInitMap(options) {
Cesium.CameraEventType.WHEEL,
Cesium.CameraEventType.PINCH,
];
getViewer()._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium ion
getViewer().imageryLayers.addImageryProvider(
viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium ion
viewer.imageryLayers.addImageryProvider(
new Cesium.WebMapTileServiceImageryProvider({
// 影像注记
url:
@ -127,7 +129,7 @@ export default function useInitMap(options) {
);
initObliquePhotography();
registerClickEvent();
return { mapMethods: mapMethods.current, viewer: getViewer() };
return { mapMethods: mapMethods.current, viewer };
};
return {

47
src/pages/Container/Map/js/useMapMethods.js
View File

@ -99,27 +99,31 @@ export default function useMapMethods(viewerRef, request) {
// 设置中心点
const flyTo = ({ longitude, latitude, height } = defineCenterPoint) => {
getViewer().camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 });
const viewer = getViewer();
viewer.camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 });
previousCenterPointRef.current = { ...currentCenterPointRef.current };
currentCenterPointRef.current = { longitude, latitude, height };
};
// 返回当前中心点
const returnCurrentCenterPoint = () => {
const viewer = getViewer();
const { longitude, latitude, height } = currentCenterPointRef.current;
getViewer().camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 });
viewer.camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 });
};
// 返回上一次中心点
const returnPreviousCenterPoint = () => {
const viewer = getViewer();
const { longitude, latitude, height } = previousCenterPointRef.current;
getViewer().camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 });
viewer.camera.flyTo({ destination: getPosition(longitude, latitude, height), duration: 2 });
currentCenterPointRef.current = { longitude, latitude, height };
};
// 切换场景模式
const changeSceneMode = (type = "3d") => {
getViewer().scene.mode = { "2d": Cesium.SceneMode.COLUMBUS_VIEW, "3d": Cesium.SceneMode.SCENE3D }[type];
const viewer = getViewer();
viewer.scene.mode = { "2d": Cesium.SceneMode.COLUMBUS_VIEW, "3d": Cesium.SceneMode.SCENE3D }[type];
};
// 添加港口点
@ -143,7 +147,8 @@ export default function useMapMethods(viewerRef, request) {
// 移除港口点
const removePortPoint = () => {
removeEntityCollection(getViewer(), "portEntityCollectionMerged");
const viewer = getViewer();
removeEntityCollection(viewer, "portEntityCollectionMerged");
};
// 添加分公司点
@ -183,7 +188,8 @@ export default function useMapMethods(viewerRef, request) {
// 删除分公司点
const removeBranchOfficePoint = () => {
removeEntityCollection(getViewer(), "branchOfficeEntityCollectionMerged");
const viewer = getViewer();
removeEntityCollection(viewer, "branchOfficeEntityCollectionMerged");
};
// 添加四色图
@ -197,10 +203,11 @@ export default function useMapMethods(viewerRef, request) {
if (!edgeMap[id])
return;
const viewer = getViewer();
mitt.emit(changeCoverMaskVisibleMittKey, true);
const currentEdge = edgeMap[id]();
const entityCollection = createEntityCollection("fourColorDiagramEntityCollection");
getViewer().dataSources.add(entityCollection);
viewer.dataSources.add(entityCollection);
// 先收集需要渲染的数据
const itemsToRender = [];
@ -244,7 +251,8 @@ export default function useMapMethods(viewerRef, request) {
// 删除四色图
const removeFourColorDiagram = () => {
removeEntityCollection(getViewer(), "fourColorDiagramEntityCollection");
const viewer = getViewer();
removeEntityCollection(viewer, "fourColorDiagramEntityCollection");
};
// 添加墙
@ -294,7 +302,8 @@ export default function useMapMethods(viewerRef, request) {
// 删除墙
const removeWall = () => {
removeEntityCollection(getViewer(), "wallEntityCollection");
const viewer = getViewer();
removeEntityCollection(viewer, "wallEntityCollection");
};
// 点位聚合
@ -406,12 +415,14 @@ export default function useMapMethods(viewerRef, request) {
// 删除点位
const removeMarkPoint = (markType) => {
removeEntityCollection(getViewer(), `markEntityCollectionMerged${markType ? `_${markType}` : ""}`);
const viewer = getViewer();
removeEntityCollection(viewer, `markEntityCollectionMerged${markType ? `_${markType}` : ""}`);
};
// 查询新轨迹前先移除旧轨迹，确保地图上始终只展示当前筛选结果。
const removePeopleTrajectory = () => {
getViewer().entities.removeById("peopleTrajectoryEntity");
const viewer = getViewer();
viewer.entities.removeById("peopleTrajectoryEntity");
};
// 将接口返回的经纬高点位绘制为动态轨迹线，少于两个点时不创建无意义的线段。
@ -420,13 +431,14 @@ export default function useMapMethods(viewerRef, request) {
if (points.length < 2)
return;
const viewer = getViewer();
const coordinates = points.flatMap(point => [point.lon, point.lat, point.alt || 0]);
getViewer().entities.add({
viewer.entities.add({
id: "peopleTrajectoryEntity",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArrayHeights(coordinates),
width: 5,
material: new Cesium.TrajectoryPolylineTrailLinkMaterialProperty(getViewer()),
material: new Cesium.TrajectoryPolylineTrailLinkMaterialProperty(viewer),
clampToGround: true,
},
});
@ -451,6 +463,7 @@ export default function useMapMethods(viewerRef, request) {
return;
if (!options.markType)
throw new Error("请传入markType（扎点类型）");
const viewer = getViewer();
const clonePoint = { ...point };
point.property = new Cesium.SampledPositionProperty();
// 下一条实时定位到达前保持最后有效位置，避免全局时钟前进后点位短暂消失。
@ -463,7 +476,7 @@ export default function useMapMethods(viewerRef, request) {
point.lastTime = start;
point.lastIconType = point.icon_type;
peopleId.current.push(point.id);
getViewer().entities.add({
viewer.entities.add({
id: point.id,
name: point.name,
position: point.property,
@ -507,14 +520,16 @@ export default function useMapMethods(viewerRef, request) {
// 删除人员定位点
const removePeoplePoint = (id) => {
getViewer().entities.removeById(id);
const viewer = getViewer();
viewer.entities.removeById(id);
peopleId.current = peopleId.current.filter(item => item !== id);
};
// 删除所有人员定位点
const removePeoplePointAll = () => {
const viewer = getViewer();
peopleId.current.forEach((id) => {
getViewer().entities.removeById(id);
viewer.entities.removeById(id);
});
peopleId.current = [];
peoplePositionStartTime.current = null;

6
src/pages/Container/Map/js/usePointClickEvent.js
View File

@ -55,8 +55,9 @@ export default function usePointClickEvent(viewerRef, mapMethods) {
// 港口点位点击
const clickPortPoint = (data) => {
const viewer = getViewer();
const position = getPosition(data.position.x, data.position.y);
popupRef.current = new PopupInfo(getViewer(), {
popupRef.current = new PopupInfo(viewer, {
component: Port,
position,
props: {
@ -88,8 +89,9 @@ export default function usePointClickEvent(viewerRef, mapMethods) {
if (data.id === sessionStorage.getItem("mapCurrentBranchOfficeId"))
return;
const viewer = getViewer();
const position = getPosition(data.longitude, data.latitude);
popupRef.current = new PopupInfo(getViewer(), {
popupRef.current = new PopupInfo(viewer, {
component: BranchOffice,
position,
props: {