refactor(map): 修改港区portArea字段类型并重命名多处组件

重点作业统计对接、地图标点、详情弹窗
2026-07-22 14:43:46 +08:00 · 2026-07-22 14:43:31 +08:00
32 changed files with 565 additions and 256 deletions
--- a/src/api/biMark/index.js
+++ b/src/api/biMark/index.js
@ -32,3 +32,11 @@ export const getEightWorkInfoScreenWorkList = declareRequest(
  "biFullLoading",
  "Post > @/eightwork/eightworkInfo/screenWorkPage",
 );
+export const getKeyProjectLargeScreenList = declareRequest(
+  "biFullLoading",
+  "Post > @/keyProject/keyProject/largeScreenPage",
+);
+export const getFixedCameraVideoList = declareRequest(
+  "biFullLoading",
+  "Post > @/videopatrol/fixedCamera/getVideoList",
+);
--- a/src/api/biMarkInfo/index.js
+++ b/src/api/biMarkInfo/index.js
@ -36,3 +36,11 @@ export const eightWorkMeasuresLogs = declareRequest(
  "biFullLoading",
  `Get > /eightwork/measuresLogs/listAll/{workId}`,
 );
+export const keyProjectInfo = declareRequest(
+  "biFullLoading",
+  "Get > /keyProject/keyProject/{id}",
+);
+export const getFixedCameraPlayUrl = declareRequest(
+  "biFullLoading",
+  "Get > /videopatrol/fixedCamera/getPlayUrl",
+);
--- a/src/api/biStatistics/index.js
+++ b/src/api/biStatistics/index.js
@ -72,3 +72,11 @@ export const getEightWorkInfoScreenWorkTrend = declareRequest(
  "portWeiXianEightWorkInfoScreenWorkTrendLoading",
  "Post > @/eightwork/eightworkInfo/screenWorkTrend",
 );
+export const getKeyProjectLargeScreenProjectStatistics = declareRequest(
+  "portZhongDianKeyProjectLargeScreenProjectStatisticsLoading",
+  "Post > @/keyProject/keyProject/largeScreenProjectStatistics",
+);
+export const getFixedCameraVideoLocationStat = declareRequest(
+  "portZhongDianFixedCameraVideoLocationStatLoading",
+  "Post > @/videopatrol/fixedCamera/getVideoLocationStat",
+);
--- a/src/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList.js
+++ b/src/pages/Container/Map/components/BottomUtils/branchOfficeUtilsList.js
@ -228,19 +228,23 @@ export const branchOfficeUtilsList = [
  },
  {
    label: "重点工程",
-    type: "project",
+    type: "keyProject",
    list: [
      {
        label: "重点工程定位",
        check: false,
-        type: "project",
+        type: "keyProject",
        markIcon: pointIco30,
+        request: "getKeyProjectLargeScreenList",
+        titleKey: "projectName",
      },
      {
        label: "视频定位",
        check: false,
        type: "video",
        markIcon: pointIco31,
+        request: "getFixedCameraVideoList",
+        titleKey: "videoName",
      },
    ],
  },
@ -253,6 +257,8 @@ export const branchOfficeUtilsList = [
        check: false,
        type: "platCamera",
        markIcon: pointIco3,
+        request: "getFixedCameraVideoList",
+        titleKey: "videoName",
      },
    ],
  },
--- a/src/pages/Container/Map/components/BottomUtils/index.js
+++ b/src/pages/Container/Map/components/BottomUtils/index.js
@ -118,18 +118,26 @@ function BottomUtils(props) {
    const check = !list[index].list[index1].check;
    if (check) {
      if (item1.request) {
+        let pointData = [];
        const requestParams = { portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 9999 };
        if (dangerWorkTypes.includes(item1.type)) {
          requestParams.workType = item1.type;
        }
        const { data = [] } = await props[item1.request](requestParams);
+        pointData = [...data];
        if (dangerWorkTypes.includes(item1.type)) {
+          for (let i = 0; i < pointData.length; i++) {
+            pointData[i].latitude = pointData[i].info.latitude;
+            pointData[i].longitude = pointData[i].info.longitude;
+          }
+        }
+        if (["platCamera", "video"].includes(item1.type)) {
+          pointData = [];
          for (let i = 0; i < data.length; i++) {
-            data[i].latitude = data[i].info.latitude;
-            data[i].longitude = data[i].info.longitude;
+            pointData.push(...data[i].fixedCameraCOList);
          }
        }
-        mapMethods.current.addMarkPoint(data, {
+        mapMethods.current.addMarkPoint(pointData, {
          markType: item1.type,
          markIcon: item1.markIcon,
          subLabel: item1.label,
--- a/src/pages/Container/Map/components/BottomUtils/portUtilsList.js
+++ b/src/pages/Container/Map/components/BottomUtils/portUtilsList.js
@ -353,7 +353,7 @@ export const portUtilsList = [
  {
    img: bottomImg10,
    checkImg: bottomImg10On,
-    label: "摄像头",
+    label: "视频巡屏",
    type: "camera",
    list: [
      {
@ -363,6 +363,8 @@ export const portUtilsList = [
        img: ico26,
        checkImg: ico26On,
        markIcon: pointIco3,
+        request: "getFixedCameraVideoList",
+        titleKey: "videoName",
      },
    ],
  },
@ -370,15 +372,17 @@ export const portUtilsList = [
    img: bottomImg12,
    checkImg: bottomImg12On,
    label: "重点工程",
-    type: "project",
+    type: "keyProject",
    list: [
      {
        label: "重点工程定位",
        check: false,
-        type: "project",
+        type: "keyProject",
        img: ico27,
        checkImg: ico27On,
        markIcon: pointIco30,
+        request: "getKeyProjectLargeScreenList",
+        titleKey: "projectName",
      },
      {
        label: "视频定位",
@ -387,6 +391,8 @@ export const portUtilsList = [
        img: ico26,
        checkImg: ico26On,
        markIcon: pointIco31,
+        request: "getFixedCameraVideoList",
+        titleKey: "videoName",
      },
    ],
  },
--- a/src/pages/Container/Map/components/CenterUtils/index.js
+++ b/src/pages/Container/Map/components/CenterUtils/index.js
@ -47,7 +47,7 @@ function CenterUtils() {

  const list = [
    { label: "秦皇岛西", portArea: 3 },
-    { label: "秦皇岛港区", portArea: 1 },
+    { label: "秦皇岛港区", portArea: "" },
    { label: "秦皇岛东", portArea: 2 },
  ];

@ -89,7 +89,7 @@ function CenterUtils() {
            </div>
            <div className="statistics">
              <AnimatePresence>
-                {[1, 3].includes(portArea) && (
+                {["", 3].includes(portArea) && (
                  <motion.div key="west" {...statisticAnimation}>
                    <div className="statistic">
                      <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
@ -102,7 +102,7 @@ function CenterUtils() {
                )}
              </AnimatePresence>
              <AnimatePresence>
-                {[1, 2].includes(portArea) && (
+                {["", 2].includes(portArea) && (
                  <motion.div key="east" {...statisticAnimation}>
                    <div className="statistic">
                      <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>
--- a/src/pages/Container/Map/components/Content/index.js
+++ b/src/pages/Container/Map/components/Content/index.js
@ -73,7 +73,7 @@ function Content(props) {
      "danger": PortWeiXian,
      "weather": PortQiXiang,
      "people": PortRenYuan,
-      "project": PortZhongDian,
+      "keyProject": PortZhongDian,
      "closedArea": PortFengBi,
    };
    const Component = contentMap[bottomUtilsCurrentType];
@ -88,7 +88,7 @@ function Content(props) {
      "fire": BranchXiaoFang,
      "people": BranchRenYuan,
      "weather": BranchQiXiang,
-      "project": BranchZhongDian,
+      "keyProject": BranchZhongDian,
      "closedArea": BranchFengBi,
      "camera": BranchCamera,
    };
--- a/src/pages/Container/Map/components/Content/modal/AlarmEquipment/index.js
+++ b/src/pages/Container/Map/components/Content/modal/AlarmEquipment/index.js
@ -1,7 +1,7 @@
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { Descriptions } from "antd";
 import { useEffect, useState } from "react";
-import { getLabelName } from "zy-react-library/utils";
+import { getLabelName, isEmptyToWhether } from "zy-react-library/utils";
 import { NS_BI_MARK_INFO } from "~/enumerate/namespace";

 const SENSOR_ATTR_OPTIONS = [
@ -9,11 +9,6 @@ const SENSOR_ATTR_OPTIONS = [
  { bianma: "SWITCH", name: "开关类" },
 ];

-const YES_NO_OPTIONS = [
-  { bianma: 1, name: "是" },
-  { bianma: 0, name: "否" },
-];
-
 const SENSOR_STATUS_OPTIONS = [
  { bianma: "NORMAL", name: "正常" },
  { bianma: "FAULT", name: "故障" },
@ -21,7 +16,7 @@ const SENSOR_STATUS_OPTIONS = [
  { bianma: "deactivate", name: "停用" },
 ];

-const FireRescueTeam = (props) => {
+const AlarmEquipment = (props) => {
  const [info, setInfo] = useState({});

  const getData = async () => {
@ -47,11 +42,11 @@ const FireRescueTeam = (props) => {
          { label: "传感器状态", children: getLabelName({ status: info.sensorStatus, list: SENSOR_STATUS_OPTIONS }) },
          { label: "安装位置", children: info.installPosition },
          { label: "出厂日期", children: info.factoryDate },
-          { label: "是否阈值设定", children: getLabelName({ status: info.thresholdFlag, list: YES_NO_OPTIONS }) },
+          { label: "是否阈值设定", children: isEmptyToWhether(info.thresholdFlag) },
        ]}
      />
    </div>
  );
 };

-export default Connect([NS_BI_MARK_INFO], true)(FireRescueTeam);
+export default Connect([NS_BI_MARK_INFO], true)(AlarmEquipment);
--- a/src/pages/Container/Map/components/Content/modal/BlindBoardWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/BlindBoardWork/index.js
@ -8,7 +8,7 @@ import OpinionSign from "../eightWordPubilc/OpinionSign";
 import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
 import "../eightWordPubilc/index.less";

-function View(props) {
+function BlindBoardWork(props) {
  const [info, setInfo] = useState({});

  const getData = async () => {
@ -175,4 +175,4 @@ function View(props) {
  );
 }

-export default Connect([NS_BI_MARK_INFO], true)(View);
+export default Connect([NS_BI_MARK_INFO], true)(BlindBoardWork);
--- a/src/pages/Container/Map/components/Content/modal/BreakGroundWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/BreakGroundWork/index.js
@ -9,7 +9,7 @@ import OpinionSign from "../eightWordPubilc/OpinionSign";
 import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
 import "../eightWordPubilc/index.less";

-function View(props) {
+function BreakGroundWork(props) {
  const [info, setInfo] = useState({});

  const getData = async () => {
@ -144,4 +144,4 @@ function View(props) {
  );
 }

-export default Connect([NS_BI_MARK_INFO], true)(View);
+export default Connect([NS_BI_MARK_INFO], true)(BreakGroundWork);
--- a/src/pages/Container/Map/components/Content/modal/ConfinedSpaceWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/ConfinedSpaceWork/index.js
@ -5,7 +5,7 @@ import { getFileUrl } from "zy-react-library/utils";
 import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
 import "../eightWordPubilc/index.less";

-function View(props) {
+function ConfinedSpaceWork(props) {
  const [info, setInfo] = useState({});
  const [safetyMeasures, setSafetyMeasures] = useState([]);
  const [otherSafetyMeasures, setOtherSafetyMeasures] = useState([]);
@ -206,4 +206,4 @@ function View(props) {
  );
 }

-export default Connect([NS_BI_MARK_INFO], true)(View);
+export default Connect([NS_BI_MARK_INFO], true)(ConfinedSpaceWork);
--- a/src/pages/Container/Map/components/Content/modal/CutRoadWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/CutRoadWork/index.js
@ -9,7 +9,7 @@ import OpinionSign from "../eightWordPubilc/OpinionSign";
 import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
 import "../eightWordPubilc/index.less";

-function View(props) {
+function CutRoadWork(props) {
  const [info, setInfo] = useState({});

  const getData = async () => {
@ -144,4 +144,4 @@ function View(props) {
  );
 }

-export default Connect([NS_BI_MARK_INFO], true)(View);
+export default Connect([NS_BI_MARK_INFO], true)(CutRoadWork);
--- a/src/pages/Container/Map/components/Content/modal/ElectricityWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/ElectricityWork/index.js
@ -9,7 +9,7 @@ import OpinionSign from "../eightWordPubilc/OpinionSign";
 import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
 import "../eightWordPubilc/index.less";

-function View(props) {
+function ElectricityWork(props) {
  const [info, setInfo] = useState({});
  const [gasMonitoringRecord, setGasMonitoringRecord] = useState([]);

@ -175,4 +175,4 @@ function View(props) {
  );
 }

-export default Connect([NS_BI_MARK_INFO], true)(View);
+export default Connect([NS_BI_MARK_INFO], true)(ElectricityWork);
--- a/src/pages/Container/Map/components/Content/modal/FireControlRoom/index.js
+++ b/src/pages/Container/Map/components/Content/modal/FireControlRoom/index.js
@ -9,7 +9,7 @@ import useGetFile from "zy-react-library/hooks/useGetFile";
 import { getLabelName } from "zy-react-library/utils";
 import { NS_BI_MARK_INFO } from "~/enumerate/namespace";

-const FireRescueTeam = (props) => {
+const FireControlRoom = (props) => {
  const { getDictionary } = useDictionary();
  const { getFile } = useGetFile();

@ -86,4 +86,4 @@ const FireRescueTeam = (props) => {
  );
 };

-export default Connect([NS_BI_MARK_INFO], true)(FireRescueTeam);
+export default Connect([NS_BI_MARK_INFO], true)(FireControlRoom);
--- a/src/pages/Container/Map/components/Content/modal/FirePointLocation/index.js
+++ b/src/pages/Container/Map/components/Content/modal/FirePointLocation/index.js
@ -2,9 +2,10 @@ import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { Descriptions } from "antd";
 import { useEffect, useState } from "react";
 import PreviewImg from "zy-react-library/components/PreviewImg";
+import { isEmptyToWhether } from "zy-react-library/utils";
 import { NS_BI_MARK_INFO } from "~/enumerate/namespace";

-const FireRescueTeam = (props) => {
+const FirePointLocation = (props) => {
  const [info, setInfo] = useState({});

  const getData = async () => {
@ -30,7 +31,7 @@ const FireRescueTeam = (props) => {
          { label: "消防点位编码", children: info.firePointCode },
          { label: "经度", children: info.longitude },
          { label: "维度", children: info.latitude },
-          { label: "是否关联NFC", children: info.nfcFlag === 1 ? "是" : info.nfcFlag === 0 ? "否" : "" },
+          { label: "是否关联NFC", children: isEmptyToWhether(info.nfcFlag) },
          { label: "点检照片", children: (<PreviewImg files={info.urlList} />) },
        ]}
      />
@ -38,4 +39,4 @@ const FireRescueTeam = (props) => {
  );
 };

-export default Connect([NS_BI_MARK_INFO], true)(FireRescueTeam);
+export default Connect([NS_BI_MARK_INFO], true)(FirePointLocation);
--- a/src/pages/Container/Map/components/Content/modal/FirePumpRoom/index.js
+++ b/src/pages/Container/Map/components/Content/modal/FirePumpRoom/index.js
@ -9,7 +9,7 @@ import useGetFile from "zy-react-library/hooks/useGetFile";
 import { getLabelName } from "zy-react-library/utils";
 import { NS_BI_MARK_INFO } from "~/enumerate/namespace";

-const FireRescueTeam = (props) => {
+const FirePumpRoom = (props) => {
  const { getDictionary } = useDictionary();
  const { getFile } = useGetFile();

@ -76,4 +76,4 @@ const FireRescueTeam = (props) => {
  );
 };

-export default Connect([NS_BI_MARK_INFO], true)(FireRescueTeam);
+export default Connect([NS_BI_MARK_INFO], true)(FirePumpRoom);
--- a/src/pages/Container/Map/components/Content/modal/FireWaterSource/index.js
+++ b/src/pages/Container/Map/components/Content/modal/FireWaterSource/index.js
@ -5,7 +5,7 @@ import useDictionary from "zy-react-library/hooks/useDictionary";
 import { getLabelName } from "zy-react-library/utils";
 import { NS_BI_MARK_INFO } from "~/enumerate/namespace";

-const FireRescueTeam = (props) => {
+const FireWaterSource = (props) => {
  const { getDictionary } = useDictionary();

  const [info, setInfo] = useState({});
@ -55,4 +55,4 @@ const FireRescueTeam = (props) => {
  );
 };

-export default Connect([NS_BI_MARK_INFO], true)(FireRescueTeam);
+export default Connect([NS_BI_MARK_INFO], true)(FireWaterSource);
--- a/src/pages/Container/Map/components/Content/modal/HighWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/HighWork/index.js
@ -9,7 +9,7 @@ import OpinionSign from "../eightWordPubilc/OpinionSign";
 import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
 import "../eightWordPubilc/index.less";

-function View(props) {
+function HighWork(props) {
  const [info, setInfo] = useState({});

  const getData = async () => {
@ -141,4 +141,4 @@ function View(props) {
  );
 }

-export default Connect([NS_BI_MARK_INFO], true)(View);
+export default Connect([NS_BI_MARK_INFO], true)(HighWork);
--- a/src/pages/Container/Map/components/Content/modal/HoistingWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/HoistingWork/index.js
@ -9,7 +9,7 @@ import OpinionSign from "../eightWordPubilc/OpinionSign";
 import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
 import "../eightWordPubilc/index.less";

-function View(props) {
+function HoistingWork(props) {
  const [info, setInfo] = useState({});

  const getData = async () => {
@ -153,4 +153,4 @@ function View(props) {
  );
 }

-export default Connect([NS_BI_MARK_INFO], true)(View);
+export default Connect([NS_BI_MARK_INFO], true)(HoistingWork);
--- a/src/pages/Container/Map/components/Content/modal/HotWork/index.js
+++ b/src/pages/Container/Map/components/Content/modal/HotWork/index.js
@ -7,7 +7,7 @@ import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
 import SafetyMeasures from "../eightWordPubilc/SafetyMeasures";
 import "../eightWordPubilc/index.less";

-function View(props) {
+function HotWork(props) {
  const [info, setInfo] = useState({});
  const [delayedMonitoringRecord, setDelayedMonitoringRecord] = useState([]);
  const [gasMonitoringRecord, setGasMonitoringRecord] = useState([]);
@ -200,4 +200,4 @@ function View(props) {
  );
 }

-export default Connect([NS_BI_MARK_INFO], true)(View);
+export default Connect([NS_BI_MARK_INFO], true)(HotWork);
--- a/src/pages/Container/Map/components/Content/modal/KeyProject/index.js
+++ b/src/pages/Container/Map/components/Content/modal/KeyProject/index.js
@ -0,0 +1,150 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Descriptions, Divider } from "antd";
+import { useEffect, useState } from "react";
+import PreviewImg from "zy-react-library/components/PreviewImg";
+import PreviewPdf from "zy-react-library/components/PreviewPdf";
+import PreviewWord from "zy-react-library/components/PreviewWord";
+import Table from "zy-react-library/components/Table";
+import { UPLOAD_FILE_TYPE_ENUM } from "zy-react-library/enum/uploadFile/gwj";
+import useGetFile from "zy-react-library/hooks/useGetFile";
+import { getFileSuffix, getLabelName, isEmptyToWhether } from "zy-react-library/utils";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+
+const STATUS = [
+  { bianma: "0", name: "暂存" },
+  { bianma: "1", name: "未开工" },
+  { bianma: "2", name: "开工申请中" },
+  { bianma: "4", name: "进行中" },
+  { bianma: "5", name: "完工申请中" },
+  { bianma: "6", name: "已结束" },
+];
+const VIDEO_TYPE = [
+  { bianma: 1, name: "固定摄像头" },
+  { bianma: 2, name: "移动摄像头" },
+];
+
+const renderFiles = (files = []) => {
+  const pdfFiles = [];
+  const imgFiles = [];
+  const wordFiles = [];
+  for (let i = 0; i < files.length; i++) {
+    const file = files[i];
+    if (getFileSuffix(file.filePath) === "pdf") {
+      pdfFiles.push(file);
+    }
+    else if (["jpg", "jpeg", "png"].includes(getFileSuffix(file.filePath))) {
+      imgFiles.push(file);
+    }
+    else if (["doc", "docx"].includes(getFileSuffix(file.filePath))) {
+      wordFiles.push(file);
+    }
+  }
+  return (
+    <>
+      {imgFiles.length > 0 && <PreviewImg files={imgFiles} />}
+      {pdfFiles.length > 0 && <PreviewPdf files={pdfFiles} />}
+      {wordFiles.length > 0 && <PreviewWord files={wordFiles} />}
+    </>
+  );
+};
+
+const KeyProject = (props) => {
+  const { getFile } = useGetFile();
+
+  const [info, setInfo] = useState({});
+
+  const getData = async () => {
+    const { data = {} } = await props.keyProjectInfo({ id: props.id });
+    console.log(data);
+    const files = await getFile({
+      eqType: UPLOAD_FILE_TYPE_ENUM["168"],
+      eqForeignKey: data.keyProjectId,
+    });
+    setInfo({
+      files,
+      ...data,
+    });
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div>
+      <Divider titlePlacement="start">基本信息</Divider>
+      <div>
+        <Descriptions
+          bordered
+          column={1}
+          items={[
+            { label: "辖区单位", children: info.jurisdictionDepartmentName },
+            { label: "辖区单位负责人", children: info.jurisdictionUserName },
+            { label: "主管部门", children: info.masterDepartmentName },
+            { label: "是否已有项目作业", children: isEmptyToWhether(info.projectWorkFlag) },
+            { label: "重点作业名称", children: info.projectName },
+            { label: "重点作业属性", children: info.projectTypeName && info.projectTypeName.join(",") },
+            { label: "计划工期开始", children: info.planWorkStartDate },
+            { label: "计划竣工时间", children: info.planWorkEndDate },
+            { label: "相关方单位", children: info.xgfCorpinfoName },
+            { label: "相关方单位负责人", children: info.xgfUserName },
+            { label: "相关方单位负责人手机号", children: info.xgfMasterPhone },
+            { label: "是否设置监理单位", children: isEmptyToWhether(info.supervisionUnitFlag) },
+            ...(info.supervisionUnitFlag === 0
+              ? []
+              : [
+                  { label: "监理单位", children: info.supervisionUnitCorpName },
+                  { label: "监理单位工程负责人", children: info.supervisionUnitUserName },
+                  { label: "监理单位工程负责人电话", children: info.supervisionUnitUserPhone },
+                ]),
+            { label: "状态", children: getLabelName({ status: info.applyStatus, list: STATUS }) },
+            {
+              label: "重点作业定位",
+              children: (
+                <>
+                  <span>
+                    经度：
+                    {info.longitude || "-"}
+                  </span>
+                  <span>
+                    纬度：
+                    {info.latitude || "-"}
+                  </span>
+                </>
+              ),
+            },
+            { label: "安全协议管理", children: renderFiles(info.files) },
+          ]}
+        />
+      </div>
+      <Divider orientation="left">绑定视频监控</Divider>
+      <div>
+        <Table
+          dataSource={info.keyProjectCameraList || []}
+          columns={[
+            { title: "视频名称", dataIndex: "cameraName" },
+            { title: "视频类型", dataIndex: "cameraType", render: (_, record) => getLabelName({ status: record.cameraType, list: VIDEO_TYPE }) },
+          ]}
+          disabledResizer
+          options={false}
+          pagination={false}
+        />
+      </div>
+      <Divider orientation="left">处罚人员设置</Divider>
+      <div>
+        <Table
+          dataSource={info.keyProjectPenaltyPersonnelList || []}
+          columns={[
+            { title: "处罚人部门", dataIndex: "departmentName" },
+            { title: "处罚人", dataIndex: "userName" },
+          ]}
+          disabledResizer
+          options={false}
+          pagination={false}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Connect([NS_BI_MARK_INFO], true)(KeyProject);
--- a/src/pages/Container/Map/components/Content/modal/VideoPlay/index.js
+++ b/src/pages/Container/Map/components/Content/modal/VideoPlay/index.js
@ -0,0 +1,32 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { useEffect, useState } from "react";
+import AliPlayer from "zy-react-library/components/Video/AliPlayer";
+import { NS_BI_MARK_INFO } from "~/enumerate/namespace";
+
+const VideoPlay = (props) => {
+  const [playUrl, setPlayUrl] = useState("");
+
+  const getData = async () => {
+    const { data, success } = await props.getFixedCameraPlayUrl({ indexCode: props.cameraNumber });
+    if (success && data)
+      setPlayUrl(data.url);
+  };
+
+  useEffect(() => {
+    getData();
+  }, []);
+
+  return (
+    <div>
+      {playUrl
+        ? (
+            <AliPlayer source={playUrl} height="500px" isLive />
+          )
+        : (
+            <div style={{ color: "#fff", textAlign: "center" }}>暂无视频</div>
+          )}
+    </div>
+  );
+};
+
+export default Connect([NS_BI_MARK_INFO], true)(VideoPlay);
--- a/src/pages/Container/Map/components/Content/modal/index.js
+++ b/src/pages/Container/Map/components/Content/modal/index.js
@ -15,7 +15,9 @@ import FireWaterSource from "./FireWaterSource";
 import HighWork from "./HighWork";
 import HoistingWork from "./HoistingWork";
 import HotWork from "./HotWork";
+import KeyProject from "./KeyProject";
 import MeteorologicalMonitoring from "./MeteorologicalMonitoring";
+import VideoPlay from "./VideoPlay";

 const CustomModal = () => {
  const { modalVisible, modalData, actions } = useContext(Context);
@ -38,6 +40,9 @@ 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} />, // 重点工程定位
+      video: <VideoPlay cameraNumber={modalData.cameraNumber} />, // 重点工程-视频定位
+      platCamera: <VideoPlay cameraNumber={modalData.cameraNumber} />, // 视频巡屏-摄像头
    }[markType];
  };

--- a/src/pages/Container/Map/components/Content/port/ZhongDian/KeyProjectPanel/index.js
+++ b/src/pages/Container/Map/components/Content/port/ZhongDian/KeyProjectPanel/index.js
@ -0,0 +1,77 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
+import CountUp from "react-countup";
+import iconBackground from "~/assets/images/map_bi/content/icobg.png";
+import totalProjectIcon from "~/assets/images/map_bi/content/icon25.png";
+import startedProjectIcon from "~/assets/images/map_bi/content/icon26.png";
+import labelBackground from "~/assets/images/map_bi/content/label.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 defaultStatistics = [
+  { image: totalProjectIcon, label: "重点工程总数", count: 0 },
+  { image: startedProjectIcon, label: "重点工程开工数量", count: 0 },
+];
+
+/** 负责查询并展示重点工程总量与开工数量。 */
+function KeyProjectPanel(props) {
+  const { portArea } = useContext(Context);
+  const [statistics, setStatistics] = useState(defaultStatistics);
+
+  useEffect(() => {
+    const loadStatistics = async () => {
+      const { data = {} } = await props.getKeyProjectLargeScreenProjectStatistics({
+        portArea,
+      });
+      const counts = [data.totalProjectCount, data.startCount];
+      setStatistics(
+        defaultStatistics.map((item, index) => ({
+          ...item,
+          count: counts[index],
+        })),
+      );
+    };
+
+    loadStatistics();
+  }, []);
+
+  return (
+    <Panel title="重点工程" className="port-key-supervision__project">
+      <Spin
+        spinning={
+          props.biStatistics
+            .portZhongDianKeyProjectLargeScreenProjectStatisticsLoading
+        }
+      >
+        <div className="port-key-project__options">
+          {statistics.map(item => (
+            <div key={item.label} className="port-key-project__option">
+              <div
+                className="port-key-project__icon"
+                style={{ backgroundImage: `url(${iconBackground})` }}
+              >
+                <img src={item.image} alt="" />
+              </div>
+              <div className="port-key-project__info">
+                <div
+                  className="port-key-project__label"
+                  style={{ backgroundImage: `url(${labelBackground})` }}
+                >
+                  {item.label}
+                </div>
+                <div className="port-key-project__count">
+                  <CountUp end={+item.count} />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </Spin>
+    </Panel>
+  );
+}
+
+export default Connect([NS_BI_STATISTICS], true)(KeyProjectPanel);
--- a/src/pages/Container/Map/components/Content/port/ZhongDian/KeyProjectPanel/index.less
+++ b/src/pages/Container/Map/components/Content/port/ZhongDian/KeyProjectPanel/index.less
@ -0,0 +1,85 @@
+.port-key-supervision__project {
+  margin-top: 10px;
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8)
+  );
+}
+.port-key-project__options {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  height: 150px;
+  padding: 10px 15px;
+  border: 1px solid;
+  border-top: none;
+  border-image: linear-gradient(
+      to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)
+    )
+    1;
+}
+.port-key-project__option {
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 50%;
+}
+.port-key-project__icon {
+  width: 70px;
+  height: 70px;
+  margin-top: 5px;
+  padding-top: 13px;
+  text-align: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.port-key-project__icon img {
+  width: 25px;
+  height: 26px;
+  animation: portKeyProjectSlideY 2s infinite;
+}
+.port-key-project__info {
+  flex: 1;
+  text-align: center;
+}
+.port-key-project__label {
+  width: 120px;
+  height: 24px;
+  margin-top: 5px;
+  color: #fff;
+  font-size: 12px;
+  line-height: 25px;
+  text-align: center;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.port-key-project__count {
+  margin-top: 13px;
+  font-family:
+    "PingFang SC", "Helvetica Neue", "Hiragino Sans GB", "Segoe UI",
+    "Microsoft YaHei", "微软雅黑", sans-serif;
+  font-weight: bold;
+  background: linear-gradient(to top, #48bbf0, #fff);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+.port-key-project__count span {
+  font-size: 24px;
+}
+@keyframes portKeyProjectSlideY {
+  0% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
--- a/src/pages/Container/Map/components/Content/port/ZhongDian/VideoLocationPanel/index.js
+++ b/src/pages/Container/Map/components/Content/port/ZhongDian/VideoLocationPanel/index.js
@ -0,0 +1,75 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
+import CountUp from "react-countup";
+import videoBackground from "~/assets/images/map_bi/content/videoimg1.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 defaultStatistics = [
+  { label: "视频总数", count: 0 },
+  { label: "在线数量", count: 0 },
+  { label: "离线数量", count: 0 },
+];
+
+/** 负责查询并展示摄像头总数、在线与离线统计。 */
+function VideoLocationPanel(props) {
+  const { portArea } = useContext(Context);
+  const [statistics, setStatistics] = useState(defaultStatistics);
+
+  useEffect(() => {
+    const loadStatistics = async () => {
+      const { data = {} } = await props.getFixedCameraVideoLocationStat({
+        portArea,
+      });
+      const counts = [data.totalCount, data.onlineCount, data.offlineCount];
+      setStatistics(
+        defaultStatistics.map((item, index) => ({
+          ...item,
+          count: counts[index],
+        })),
+      );
+    };
+
+    loadStatistics();
+  }, []);
+
+  return (
+    <Panel title="视频定位" className="port-key-supervision__video-location">
+      <Spin
+        spinning={
+          props.biStatistics.portZhongDianFixedCameraVideoLocationStatLoading
+        }
+      >
+        <div className="port-video-location__options">
+          <div className="port-video-location__option">
+            <div
+              className="port-video-location__image"
+              style={{ backgroundImage: `url(${videoBackground})` }}
+            />
+            <div>
+              {statistics.map(item => (
+                <div
+                  key={item.label}
+                  className="port-video-location__statistic"
+                >
+                  <div>
+                    {item.label}
+                    ：
+                  </div>
+                  <div>
+                    <CountUp end={+item.count} />
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </Spin>
+    </Panel>
+  );
+}
+
+export default Connect([NS_BI_STATISTICS], true)(VideoLocationPanel);
--- a/src/pages/Container/Map/components/Content/port/ZhongDian/VideoLocationPanel/index.less
+++ b/src/pages/Container/Map/components/Content/port/ZhongDian/VideoLocationPanel/index.less
@ -0,0 +1,43 @@
+.port-key-supervision__video-location {
+  background-image: linear-gradient(
+    to bottom,
+    rgba(0, 0, 0, 0),
+    rgba(0, 0, 0, 0.8)
+  );
+}
+.port-video-location__options {
+  display: flex;
+  justify-content: space-between;
+  border: 1px solid;
+  border-top: none;
+  border-image: linear-gradient(
+      to bottom,
+      rgba(58, 122, 149, 0),
+      rgba(58, 122, 149, 1)
+    )
+    1;
+}
+.port-video-location__option {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+.port-video-location__image {
+  width: 225px;
+  height: 160px;
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+}
+.port-video-location__statistic {
+  display: flex;
+  flex: 1;
+  color: #fff;
+  font-size: 14px;
+  line-height: 3;
+}
+.port-video-location__statistic > div:first-child {
+  margin-right: 5px;
+}
+.port-video-location__statistic span {
+  font-size: 14px;
+}
--- a/src/pages/Container/Map/components/Content/port/ZhongDian/index.js
+++ b/src/pages/Container/Map/components/Content/port/ZhongDian/index.js
@ -1,74 +1,14 @@
-import { useContext, useState } from "react";
-import CountUp from "react-countup";
-import icobg from "~/assets/images/map_bi/content/icobg.png";
-import icon25 from "~/assets/images/map_bi/content/icon25.png";
-import icon26 from "~/assets/images/map_bi/content/icon26.png";
-import label from "~/assets/images/map_bi/content/label.png";
-import videoimg1 from "~/assets/images/map_bi/content/videoimg1.png";
-import Title from "~/pages/Container/Map/components/Content/port/Title";
-import { Context } from "~/pages/Container/Map/js/context";
-import "./index.less";
-
-const ZhongDian = () => {
-  const { currentPort, portArea, currentBranchOffice } = useContext(Context);
-
-  const [block1OptionsList, setBlock1OptionsList] = useState([
-    { lable: "视频总数", count: 0 },
-    { lable: "在线数量", count: 0 },
-    { lable: "离线数量", count: 0 },
-  ]);
-
-  const [block2OptionsList, setBlock2OptionsList] = useState([
-    { img: icon25, label: "重点工程总数", count: 0 },
-    { img: icon26, label: "重点工程开工数量", count: 0 },
-  ]);
+import KeyProjectPanel from "./KeyProjectPanel";
+import VideoLocationPanel from "./VideoLocationPanel";

+/** 重点监管模块仅负责按展示顺序组合业务区块。 */
+function ZhongDian() {
  return (
-    <div className="port_zhongdian">
-      <div className="block1">
-        <Title title="视频定位" />
-        <div className="options">
-          <div className="option">
-            <div className="leftimg" style={{ backgroundImage: `url(${videoimg1})` }} />
-            <div>
-              {block1OptionsList.map((item, index) => (
-                <div key={index} className="info">
-                  <div className="lable">
-                    {item.lable}
-                    :
-                  </div>
-                  <div className="count">
-                    <CountUp end={+item.count} />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div className="block2">
-        <Title title="重点工程" />
-        <div className="options">
-          {block2OptionsList.map((item, index) => (
-            <div key={index} className="option">
-              <div className="circular" style={{ backgroundImage: `url(${icobg})` }}>
-                <img src={item.img} alt="" />
-              </div>
-              <div className="info">
-                <div className="title" style={{ backgroundImage: `url(${label})` }}>
-                  {item.label}
-                </div>
-                <div className="count">
-                  <CountUp end={+item.count} />
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
+    <div className="port-key-supervision">
+      <VideoLocationPanel />
+      <KeyProjectPanel />
    </div>
  );
-};
+}

 export default ZhongDian;
--- a/src/pages/Container/Map/components/Content/port/ZhongDian/index.less
+++ b/src/pages/Container/Map/components/Content/port/ZhongDian/index.less
@ -1,138 +0,0 @@
-.port_zhongdian {
-  .block1 {
-    background-image: linear-gradient(to bottom,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 0.8));
-
-    .options {
-      display: flex;
-      justify-content: space-between;
-
-      border: 1px solid;
-      border-image: linear-gradient(to bottom,
-      rgba(58, 122, 149, 0),
-      rgba(58, 122, 149, 1)) 1;
-      border-top: none;
-
-      .option {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-
-        .leftimg {
-          width: 225px;
-          height: 160px;
-          background-size: 100% 100%;
-          background-repeat: no-repeat;
-        }
-
-        .info {
-          flex: 1;
-          color: #fff;
-          font-size: 14px;
-          display: flex;
-          line-height: 3;
-
-          .lable {
-            margin-right: 5px;
-          }
-
-          .count {
-            span {
-              font-size: 14px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  .block2 {
-    background-image: linear-gradient(to bottom,
-    rgba(0, 0, 0, 0),
-    rgba(0, 0, 0, 0.8));
-    margin-top: 10px;
-
-    .options {
-      padding: 10px 15px;
-      border: 1px solid;
-      border-image: linear-gradient(to bottom,
-      rgba(58, 122, 149, 0),
-      rgba(58, 122, 149, 1)) 1;
-      border-top: none;
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: space-between;
-      align-items: center;
-      position: relative;
-      height: 150px;
-
-      .option {
-        width: 50%;
-        display: flex;
-        align-items: center;
-        justify-content: space-around;
-
-        .circular {
-          margin-top: 5px;
-          background-size: 100% 100%;
-          background-repeat: no-repeat;
-          width: 70px;
-          height: 70px;
-          text-align: center;
-          padding-top: 13px;
-
-          img {
-            width: 25px;
-            height: 26px;
-            animation: zhongdianSlideY 2s infinite;
-          }
-        }
-
-        .info {
-          flex: 1;
-          text-align: center;
-
-          .title {
-            background-size: 100% 100%;
-            background-repeat: no-repeat;
-            width: 120px;
-            height: 24px;
-            margin-top: 5px;
-            font-size: 12px;
-            line-height: 25px;
-            text-align: center;
-            color: #fff;
-          }
-
-          .count {
-            margin-top: 13px;
-            background: linear-gradient(to top, #48bbf0, #ffffff);
-            -webkit-background-clip: text;
-            background-clip: text;
-            -webkit-text-fill-color: transparent;
-            font-weight: bold;
-            font-family: "PingFang SC", "Helvetica Neue", "Hiragino Sans GB",
-            "Segoe UI", "Microsoft YaHei", "微软雅黑", sans-serif;
-
-            span {
-              font-size: 24px;
-            }
-          }
-        }
-      }
-    }
-  }
-
-  @keyframes zhongdianSlideY {
-    0% {
-      transform: translateY(0);
-    }
-    50% {
-      transform: translateY(-5px);
-    }
-    100% {
-      transform: translateY(0);
-    }
-  }
-}
--- a/src/pages/Container/Map/js/context.js
+++ b/src/pages/Container/Map/js/context.js
@ -7,7 +7,7 @@ export const initialMapState = {
  coverMaskVisible: false,
  currentPort: "",
  currentBranchOffice: "",
-  portArea: 1,
+  portArea: "",
  bottomUtilsCurrentIndex: "",
  pureMap: false,
  headerTitle: "秦港股份安全监管平台",
--- a/src/pages/Container/Map/js/mapMethods.js
+++ b/src/pages/Container/Map/js/mapMethods.js
@ -129,7 +129,7 @@ export default function useMapMethods(viewerRef, request) {
  };

  // 添加分公司点
-  const addBranchOfficePoint = async (portArea = 1, pointInfo = null) => {
+  const addBranchOfficePoint = async (portArea = "", pointInfo = null) => {
    const { data = [] } = await request.getCorpInfoListAll({ eqPortArea: portArea, inType: [0, 1, 2, 6] });
    mitt.emit(changeCoverMaskVisibleMittKey, true);
    let branchOfficePoint = [];
Author	SHA1	Message	Date
LiuJiaNan	731de8b1a8	refactor(map): 修改港区portArea字段类型并重命名多处组件	2026-07-22 14:43:46 +08:00
LiuJiaNan	f4d2d6766e	重点作业统计对接、地图标点、详情弹窗	2026-07-22 14:43:31 +08:00