style(map): port MenJin 对接统计接口、点位接口、点位详情弹窗

src/api/biMark/index.js

@@ -40,3 +40,15 @@ export const getFixedCameraVideoList = declareRequest(
   "biFullLoading",
   "Post > @/videopatrol/fixedCamera/getVideoInfoPage",
 );
+export const getPrimeportMkmjScreenList = declareRequest(
+  "biFullLoading",
+  "Post > @/primeport/mkmj/screenList",
+);
+export const getPrimeportMkmjGateScreenList = declareRequest(
+  "biFullLoading",
+  "Post > @/primeport/mkmjGate/screenList",
+);
+export const getPrimeportVideoScreenList = declareRequest(
+  "biFullLoading",
+  "Post > @/primeport/video/screenList",
+);

src/api/biMarkInfo/index.js

@@ -44,3 +44,15 @@ export const getFixedCameraPlayUrl = declareRequest(
   "biFullLoading",
   "Get > /videopatrol/fixedCamera/getPlayUrl",
 );
+export const firstLevelDoorInfoInfo = declareRequest(
+  "firstLevelDoorInfoLoading",
+  `Get > /primeport/mkmj/{id}`,
+);
+export const firstLevelDoorInfoFareGateInfo = declareRequest(
+  "firstLevelDoorInfoFareGateLoading",
+  `Get > /primeport/mkmjGate/{id}`,
+);
+export const firstLevelDoorInfoCameraInfo = declareRequest(
+  "firstLevelDoorInfoCameraLoading",
+  `Get > /primeport/video/{id}`,
+);

src/api/biStatistics/index.js

@@ -116,3 +116,7 @@ export const getFireBrigadeMemberScreenList = declareRequest(
   "getFireBrigadeMemberScreenListLoading",
   "Post > @/fireAlarm/fireBrigade/member/screen/list",
 );
+export const getPrimeportMkmjStatistics = declareRequest(
+  "getPrimeportMkmjStatisticsLoading",
+  "Get > /primeport/mkmj/statistics",
+);

src/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList.js

@@ -19,7 +19,9 @@ import pointIco19 from "~/assets/images/map_bi/point/ico19.png";
 import pointIco30 from "~/assets/images/map_bi/point/ico30.png";
 import pointIco31 from "~/assets/images/map_bi/point/ico31.png";
 import pointIco32 from "~/assets/images/map_bi/point/ico32.png";
-import pointIco33 from "~/assets/images/map_bi/point/ico33.png";
+import pointIco34 from "~/assets/images/map_bi/point/ico34.png";
+import pointIco35 from "~/assets/images/map_bi/point/ico35.png";
+import pointIco36 from "~/assets/images/map_bi/point/ico36.png";
 
 export const branchOfficeUtilsList = [
   {
@@ -93,7 +95,7 @@ export const branchOfficeUtilsList = [
       {
         label: "摄像头",
         check: false,
-        type: "camera",
+        type: "dangerCamera",
         markIcon: pointIco3,
       },
     ],
@@ -106,35 +108,45 @@ export const branchOfficeUtilsList = [
         label: "口门",
         check: false,
         markIcon: pointIco1,
-        type: "car",
+        type: "doorway",
+        request: "getPrimeportMkmjScreenList",
+        titleKey: "mkmjName",
       },
       {
         label: "人员",
         check: false,
-        markIcon: pointIco33,
+        markIcon: pointIco36,
         type: "person",
       },
       {
         label: "车辆",
         check: false,
-        markIcon: pointIco2,
+        markIcon: pointIco34,
         type: "car",
       },
       {
         label: "人员闸机",
         check: false,
-        type: "personMachine",
+        markIcon: pointIco35,
+        type: "HGKM_MKMJ_GATE_TYPE_PERSON",
+        request: "getPrimeportMkmjGateScreenList",
+        titleKey: "gateName",
       },
       {
         label: "车辆闸机",
         check: false,
-        type: "carMachine",
+        markIcon: pointIco2,
+        type: "HGKM_MKMJ_GATE_TYPE_CAR",
+        request: "getPrimeportMkmjGateScreenList",
+        titleKey: "gateName",
       },
       {
         label: "摄像头",
         check: false,
-        type: "camera",
+        type: "doorCamera",
         markIcon: pointIco3,
+        request: "getPrimeportVideoScreenList",
+        titleKey: "videoResourceName",
       },
     ],
   },

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

@@ -23,6 +23,10 @@ const dangerWorkTypes = [
   "hoisting_work",
   "blindboard_work",
 ];
+const gateTypes = [
+  "HGKM_MKMJ_GATE_TYPE_PERSON",
+  "HGKM_MKMJ_GATE_TYPE_CAR",
+];
 
 const bottomUtilsAnimation = {
   initial: { y: 100, opacity: 0 },
@@ -123,6 +127,9 @@ function BottomUtils(props) {
         if (dangerWorkTypes.includes(item1.type)) {
           requestParams.workType = item1.type;
         }
+        if (gateTypes.includes(item1.type)) {
+          requestParams.gateType = item1.type;
+        }
         const { data = [] } = await props[item1.request](requestParams);
         pointData = [...data];
         if (dangerWorkTypes.includes(item1.type)) {

src/pages/Container/Map/components/BottomUtils/portUtilsList.js

@@ -61,6 +61,12 @@ import ico28 from "~/assets/images/map_bi/bottom_utils/second/ico28.png";
 import ico28On from "~/assets/images/map_bi/bottom_utils/second/ico28_on.png";
 import ico29 from "~/assets/images/map_bi/bottom_utils/second/ico29.png";
 import ico29On from "~/assets/images/map_bi/bottom_utils/second/ico29_on.png";
+import ico30 from "~/assets/images/map_bi/bottom_utils/second/ico30.png";
+import ico30On from "~/assets/images/map_bi/bottom_utils/second/ico30_on.png";
+import ico31 from "~/assets/images/map_bi/bottom_utils/second/ico31.png";
+import ico31On from "~/assets/images/map_bi/bottom_utils/second/ico31_on.png";
+import ico32 from "~/assets/images/map_bi/bottom_utils/second/ico32.png";
+import ico32On from "~/assets/images/map_bi/bottom_utils/second/ico32_on.png";
 // 地图点位图片资源
 import pointIco1 from "~/assets/images/map_bi/point/ico1.png";
 import pointIco2 from "~/assets/images/map_bi/point/ico2.png";
@@ -83,7 +89,9 @@ import pointIco19 from "~/assets/images/map_bi/point/ico19.png";
 import pointIco30 from "~/assets/images/map_bi/point/ico30.png";
 import pointIco31 from "~/assets/images/map_bi/point/ico31.png";
 import pointIco32 from "~/assets/images/map_bi/point/ico32.png";
-import pointIco33 from "~/assets/images/map_bi/point/ico33.png";
+import pointIco34 from "~/assets/images/map_bi/point/ico34.png";
+import pointIco35 from "~/assets/images/map_bi/point/ico35.png";
+import pointIco36 from "~/assets/images/map_bi/point/ico36.png";
 
 export const portUtilsList = [
   {
@@ -98,45 +106,55 @@ export const portUtilsList = [
         img: ico1,
         checkImg: ico1On,
         markIcon: pointIco1,
-        type: "car",
+        type: "doorway",
+        request: "getPrimeportMkmjScreenList",
+        titleKey: "mkmjName",
       },
       {
         label: "人员",
         check: false,
-        img: ico2,
-        checkImg: ico2On,
-        markIcon: pointIco33,
+        img: ico30,
+        checkImg: ico30On,
+        markIcon: pointIco36,
         type: "person",
       },
       {
         label: "车辆",
         check: false,
-        img: ico2,
-        checkImg: ico2On,
-        markIcon: pointIco2,
+        img: ico31,
+        checkImg: ico31On,
+        markIcon: pointIco34,
         type: "car",
       },
       {
         label: "人员闸机",
         check: false,
-        img: ico1,
-        checkImg: ico1On,
-        type: "personMachine",
+        img: ico32,
+        checkImg: ico32On,
+        markIcon: pointIco35,
+        type: "HGKM_MKMJ_GATE_TYPE_PERSON",
+        request: "getPrimeportMkmjGateScreenList",
+        titleKey: "gateName",
       },
       {
         label: "车辆闸机",
         check: false,
         img: ico2,
         checkImg: ico2On,
-        type: "carMachine",
+        markIcon: pointIco2,
+        type: "HGKM_MKMJ_GATE_TYPE_CAR",
+        request: "getPrimeportMkmjGateScreenList",
+        titleKey: "gateName",
       },
       {
         label: "摄像头",
         check: false,
-        type: "camera",
+        type: "doorCamera",
         img: ico3,
         checkImg: ico3On,
         markIcon: pointIco3,
+        request: "getPrimeportVideoScreenList",
+        titleKey: "videoResourceName",
       },
     ],
   },
@@ -297,7 +315,7 @@ export const portUtilsList = [
       {
         label: "摄像头",
         check: false,
-        type: "camera",
+        type: "dangerCamera",
         img: ico3,
         checkImg: ico3On,
         markIcon: pointIco3,

src/pages/Container/Map/components/Content/modal/DoorCamera/index.js

@@ -0,0 +1,30 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Descriptions } from "antd";
+import { useEffect, useState } from "react";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+
+const DoorCamera = (props) => {
+  const [info, setInfo] = useState({});
+
+  const getData = async () => {
+    const { data } = await props.firstLevelDoorInfoCameraInfo({ id: props.id });
+    setInfo(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <Descriptions
+      column={1}
+      bordered
+      items={[
+        { label: "视频名称", children: info.videoResourceName },
+        { label: "摄像头编号", children: info.videoResourceCode },
+      ]}
+    />
+  );
+};
+
+export default Connect([NS_BI_MARK_INFO], true)(DoorCamera);

src/pages/Container/Map/components/Content/modal/Doorway/index.js

@@ -0,0 +1,48 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Descriptions } from "antd";
+import { useEffect, useState } from "react";
+import { getLabelName } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+
+const AREA_STATUS_ENUM = [
+  { name: "正常", bianma: "2" },
+  { name: "停用", bianma: "1" },
+];
+const Doorway = (props) => {
+  const [info, setInfo] = useState({});
+
+  const getData = async () => {
+    const { data } = await props.firstLevelDoorInfoInfo({ id: props.id });
+    setInfo(data);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <Descriptions
+      column={1}
+      bordered
+      items={[
+        { label: "所属区域", children: info.hgAuthAreaName },
+        { label: "口门名称", children: info.mkmjName },
+        { label: "口门类型", children: info.mkmjTypeName },
+        { label: "口门位置", children: info.remarks },
+        { label: "口门状态", children: getLabelName({ list: AREA_STATUS_ENUM, status: info.mkmjStatus }) },
+        {
+          label: "位置",
+          children: (
+            <>
+              <span>{info.longitude}</span>
+              <span>--</span>
+              <span>{info.latitude}</span>
+            </>
+          ),
+        },
+      ]}
+    />
+  );
+};
+
+export default Connect([NS_BI_MARK_INFO], true)(Doorway);

src/pages/Container/Map/components/Content/modal/Gate/index.js

@@ -0,0 +1,48 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Descriptions } from "antd";
+import { useEffect, useState } from "react";
+import { getLabelName } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+
+const FARE_GATE_STATUS_ENUM = [
+  { name: "正常", bianma: "2" },
+  { name: "停用", bianma: "1" },
+];
+const Gate = (props) => {
+  const [info, setInfo] = useState({});
+
+  const getData = async () => {
+    const { data } = await props.firstLevelDoorInfoFareGateInfo({ id: props.id });
+    setInfo(data);
+  };
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <Descriptions
+      column={1}
+      bordered
+      items={[
+        { label: "闸机类型", children: info.gateTypeName },
+        { label: "闸机名称", children: info.gateName },
+        { label: "闸机类别", children: info.gateCategoryName },
+        { label: "闸机型号", children: info.gateModel },
+        { label: "闸机位置", children: info.gatePosition },
+        {
+          label: "地理位置",
+          children: (
+            <>
+              <span>{info.longitude}</span>
+              <span>--</span>
+              <span>{info.latitude}</span>
+            </>
+          ),
+        },
+        { label: "闸机状态", children: getLabelName({ list: FARE_GATE_STATUS_ENUM, status: info.gateStatus }) },
+      ]}
+    />
+  );
+};
+
+export default Connect([NS_BI_MARK_INFO], true)(Gate);

src/pages/Container/Map/components/Content/modal/index.js

@@ -6,12 +6,15 @@ import BlindBoardWork from "./BlindBoardWork";
 import BreakGroundWork from "./BreakgroundWork";
 import ConfinedSpaceWork from "./ConfinedSpaceWork";
 import CutRoadWork from "./CutRoadWork";
+import DoorCamera from "./DoorCamera";
+import Doorway from "./Doorway";
 import ElectricityWork from "./ElectricityWork";
 import FireControlRoom from "./FireControlRoom";
 import FirePointLocation from "./FirePointLocation";
 import FirePumpRoom from "./FirePumpRoom";
 import FireRescueTeam from "./FireRescueTeam";
 import FireWaterSource from "./FireWaterSource";
+import Gate from "./Gate";
 import HighWork from "./HighWork";
 import HoistingWork from "./HoistingWork";
 import HotWork from "./HotWork";
@@ -26,12 +29,12 @@ const CustomModal = () => {
     const markType = modalData.markType?.replace("标记点_", "");
     return {
       meteorologicalMonitoring: <MeteorologicalMonitoring />, // 气象监测
-      fireRescueTeam: <FireRescueTeam id={modalData.id} />, // 消防救援队
-      fireControlRoom: <FireControlRoom id={modalData.id} />, // 消防控制室
-      firePumpRoom: <FirePumpRoom id={modalData.id} />, // 消防泵房
-      fireWaterSource: <FireWaterSource id={modalData.id} />, // 消防水源
-      firePointLocation: <FirePointLocation id={modalData.id} />, // 消防点位
-      alarmEquipment: <AlarmEquipment id={modalData.id} />, // 报警设备
+      fireRescueTeam: <FireRescueTeam id={modalData.id} />, // 消防管控-消防救援队
+      fireControlRoom: <FireControlRoom id={modalData.id} />, // 消防管控-消防控制室
+      firePumpRoom: <FirePumpRoom id={modalData.id} />, // 消防管控-消防泵房
+      fireWaterSource: <FireWaterSource id={modalData.id} />, // 消防管控-消防水源
+      firePointLocation: <FirePointLocation id={modalData.id} />, // 消防管控-消防点位
+      alarmEquipment: <AlarmEquipment id={modalData.id} />, // 消防管控-报警设备
       hot_work: <HotWork id={modalData.id} workId={modalData.workId} />, // 动火作业
       confinedspace_work: <ConfinedSpaceWork id={modalData.id} workId={modalData.workId} />, // 受限空间作业
       electricity_work: <ElectricityWork id={modalData.id} workId={modalData.workId} />, // 临时用电作业
@@ -40,9 +43,13 @@ const CustomModal = () => {
       breakground_work: <BreakGroundWork id={modalData.id} workId={modalData.workId} />, // 动土作业
       hoisting_work: <HoistingWork id={modalData.id} workId={modalData.workId} />, // 吊装作业
       blindboard_work: <BlindBoardWork id={modalData.id} workId={modalData.workId} />, // 盲板抽堵作业
-      keyProject: <KeyProject id={modalData.id} />, // 重点工程定位
+      keyProject: <KeyProject id={modalData.id} />, // 重点工程-重点工程定位
       video: <VideoPlay cameraNumber={modalData.cameraNumber} />, // 重点工程-视频定位
       platCamera: <VideoPlay cameraNumber={modalData.cameraNumber} />, // 视频巡屏-摄像头
+      doorway: <Doorway id={modalData.id} />, // 门口门禁-口门
+      HGKM_MKMJ_GATE_TYPE_CAR: <Gate id={modalData.id} />, // 门口门禁-车辆闸机
+      HGKM_MKMJ_GATE_TYPE_PERSON: <Gate id={modalData.id} />, // 门口门禁-人员闸机
+      doorCamera: <DoorCamera id={modalData.id} />, // 门口门禁-摄像头
     }[markType];
   };
 

src/pages/Container/Map/components/Content/port/MenJin/GateStatsPanel/index.js

@@ -1,19 +1,47 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { useContext, useEffect, useState } from "react";
 import gateIcon from "~/assets/images/map_bi/content/img7.png";
 import barrierIcon from "~/assets/images/map_bi/content/img8.png";
+import { NS_BI_STATISTICS } from "~/enumerate/namespace";
 import Panel from "~/pages/Container/Map/components/Content/port/Panel";
+import { Context } from "~/pages/Container/Map/js/context";
 import "./index.less";
 
 const statistics = [
-  { image: gateIcon, gateCount: 0, vehicleGateCount: 0, peopleGateCount: 0 },
-  { image: barrierIcon, gateCount: 0, vehicleGateCount: 0, peopleGateCount: 0 },
+  { areaType: "QHD_GQ_DGQ", image: gateIcon, gateCount: 0, vehicleGateCount: 0, peopleGateCount: 0 },
+  { areaType: "QHD_GQ_XGQ", image: barrierIcon, gateCount: 0, vehicleGateCount: 0, peopleGateCount: 0 },
 ];
 
 /** 展示口门、车辆闸机和人员闸机的基础统计。 */
-function GateStatsPanel() {
+function GateStatsPanel(props) {
+  const { portArea } = useContext(Context);
+
+  const [data, setData] = useState(statistics);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const { data = [] } = await props.getPrimeportMkmjStatistics({ portArea });
+
+      // 根据固定区域模板重新生成状态，避免直接修改 React 保存的上一轮统计数据。
+      setData(statistics.map((item) => {
+        const currentStatistics = data.find(statisticsItem => statisticsItem.areaType === item.areaType) || {};
+
+        return {
+          ...item,
+          gateCount: currentStatistics.mkmjCount || 0,
+          vehicleGateCount: currentStatistics.carPassageCount || 0,
+          peopleGateCount: currentStatistics.personPassageCount || 0,
+        };
+      }));
+    };
+
+    loadData();
+  }, []);
+
   return (
     <Panel title="口门统计">
       <div className="port-gate-stats__options">
-        {statistics.map((item, index) => (
+        {data.map((item, index) => (
           <div key={index} className="port-gate-stats__option">
             <img src={item.image} className="port-gate-stats__image" alt="" />
             <div className="port-gate-stats__info">
@@ -37,4 +65,4 @@ function GateStatsPanel() {
   );
 }
 
-export default GateStatsPanel;
+export default Connect([NS_BI_STATISTICS], true)(GateStatsPanel);