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

- 新增获取码头人员车辆统计接口getScreenPortPersonVehicleStat
- 中心工具组件引入数据加载及界面loading状态展示
- 中心工具统计数据显示人数及车辆数动态渲染
- 所有分页请求pageSize由9999调整为99，减少数据加载压力
- useInitMap、useMapMethods及usePointClickEvent中getViewer调用优化，避免多次重复调用
- 统一使用viewer变量缓存getViewer返回值，代码结构更清晰易维护

src/api/biStatistics/index.js

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

src/pages/Container/Map/components/CenterUtils/index.js

@@ -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>
+            <Spin spinning={props.biStatistics.getScreenPortPersonVehicleStatLoading}>
               <div className="statistics">
-              <AnimatePresence>
+                {
-                {["", 3].includes(portArea) && (
+                  data.map((item, index) => (
-                  <motion.div key="west" {...statisticAnimation}>
+                    <AnimatePresence key={index}>
+                      {["", item.portArea].includes(portArea) && (
+                        <motion.div key={item.portArea} {...statisticAnimation}>
                           <div className="statistic">
-                      <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
+                            <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>{item.portName}</div>
                             <div className="info">
-                        <div className="value">人数：33人</div>
+                              <div className="value">{`人数：${item.onlinePersonCount}人`}</div>
-                        <div className="value">车辆：33辆</div>
+                              <div className="value">{`车辆：${item.onlineVehicleCount}辆`}</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>
           </motion.div>
         )}
       </AnimatePresence>
@@ -122,4 +130,4 @@ function CenterUtils() {
   );
 }
 
-export default CenterUtils;
+export default Connect([NS_BI_STATISTICS], true)(CenterUtils);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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 || []);
     };
 

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

@@ -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 || []);
     };
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -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 || []);
     };
 

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

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

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

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

src/pages/Container/Map/js/useInitMap.js

@@ -54,11 +54,12 @@ export default function useInitMap(options) {
 
   // 注册点击事件
   const registerClickEvent = () => {
-    getViewer().cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+    const viewer = getViewer();
-    getViewer().cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
-    const screenSpaceEventHandler = new Cesium.ScreenSpaceEventHandler(getViewer().scene.canvas);
+    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
+    viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏cesium ion
-    getViewer().imageryLayers.addImageryProvider(
+    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 {

src/pages/Container/Map/js/useMapMethods.js

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

src/pages/Container/Map/js/usePointClickEvent.js

@@ -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: {