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

2026-07-24 16:33:58 +08:00 · 2026-07-24 16:33:58 +08:00 · f23b8d0f0d
parent 6f4b53b3eb
commit f23b8d0f0d
6 changed files with 145 additions and 140 deletions
--- a/src/api/biStatistics/index.js
+++ b/src/api/biStatistics/index.js
@ -12,9 +12,9 @@ export const getProjectTaskScoreCount = declareRequest(
  "getProjectTaskScoreCountLoading",
  "Get > /domain/projectTask/scoreCount",
 );
-export const getHiddenStatisticsByCorp = declareRequest(
-  "getHiddenStatisticsByCorpLoading",
-  "Post > @/hidden/hidden/statisticsByCorp",
+export const getHiddenStatisticsByPortArea = declareRequest(
+  "getHiddenStatisticsByPortAreaLoading",
+  "Post > @/hidden/hidden/statisticsByPortArea",
 );
 export const getXgfStatisticsListCorpStatistics = declareRequest(
  "getXgfStatisticsListCorpStatisticsLoading",
@ -120,3 +120,15 @@ export const getPrimeportMkmjStatistics = declareRequest(
  "getPrimeportMkmjStatisticsLoading",
  "Get > /primeport/mkmj/statistics",
 );
+export const getPrimeportClosedAreaCorpStat = declareRequest(
+  "getPrimeportClosedAreaCorpStatLoading",
+  "Post > @/primeport/closedArea/corpStat",
+);
+export const getPrimeportClosedAreaCarApplyScreenList = declareRequest(
+  "getPrimeportClosedAreaCarApplyScreenListLoading",
+  "Post > @/primeport/closedAreaCarApply/screenList",
+);
+export const getPrimeportClosedAreaPersonApplyScreenList = declareRequest(
+  "getPrimeportClosedAreaPersonApplyScreenListLoading",
+  "Post > @/primeport/closedAreaPersonApply/screenList",
+);
--- a/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/RectificationPanel/index.js
+++ b/src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/RectificationPanel/index.js
@ -13,7 +13,7 @@ function RectificationPanel(props) {
  const [data, setData] = useState([]);
  useEffect(() => {
    const loadData = async () => {
-      const { data = [] } = await props.getHiddenStatisticsByCorp({
+      const { data = [] } = await props.getHiddenStatisticsByPortArea({
        pageIndex: 1,
        pageSize: 9999,
      });
@ -27,7 +27,7 @@ function RectificationPanel(props) {
      title="当前各公司隐患整改情况"
      className="index-info-left-panel__rectification"
    >
-      <Spin spinning={props.biStatistics.getHiddenStatisticsByCorpLoading}>
+      <Spin spinning={props.biStatistics.getHiddenStatisticsByPortAreaLoading}>
        <div className="index-info-rectification__table">
          <div
            className="index-info-rectification__header"
--- a/src/pages/Container/Map/components/Content/branchOffice/MenJin/ClosedAreaStatsPanel/index.js
+++ b/src/pages/Container/Map/components/Content/branchOffice/MenJin/ClosedAreaStatsPanel/index.js
@ -1,44 +1,68 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
 import CountUp from "react-countup";
 import closedAreaIcon from "~/assets/images/map_bi/content/ico15.png";
 import vehiclePassageIcon from "~/assets/images/map_bi/content/ico16.png";
 import pedestrianPassageIcon from "~/assets/images/map_bi/content/ico17.png";
 import peopleIcon from "~/assets/images/map_bi/content/ico18.png";
 import cornerIcon from "~/assets/images/map_bi/content/icon32.png";
+import { NS_BI_STATISTICS } from "~/enumerate/namespace";
 import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
+import { Context } from "~/pages/Container/Map/js/context";
 import "./index.less";

-const records = [
-  { label: "封闭区域数", count: 123, icon: closedAreaIcon },
-  { label: "车行通道数", count: 123, icon: vehiclePassageIcon },
-  { label: "人行通道数", count: 123, icon: pedestrianPassageIcon },
-  { label: "封闭区域当前人数", count: 123, icon: peopleIcon },
+const statistics = [
+  { label: "封闭区域数", count: 0, icon: closedAreaIcon, field: "closedAreaCount" },
+  { label: "车行通道数", count: 0, icon: vehiclePassageIcon, field: "carPassageCount" },
+  { label: "人行通道数", count: 0, icon: pedestrianPassageIcon, field: "personPassageCount" },
+  { label: "封闭区域当前人数", count: 0, icon: peopleIcon },
 ];

 /** 负责展示封闭区域及通道基础统计。 */
-function ClosedAreaStatsPanel() {
+function ClosedAreaStatsPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+
+  const [data, setData] = useState(statistics);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const { data = {} } = await props.getPrimeportClosedAreaCorpStat({ portArea, corpinfoId: currentBranchOffice });
+
+      setData(statistics.map(item => ({
+        ...item,
+        count: item.field ? data[item.field] || 0 : item.count,
+      })));
+    };
+
+    loadData();
+  }, []);
+
  return (
    <Panel title="封闭区域统计">
-      <div className="branch-office-gate-stats__content">
-        {records.map(item => (
-          <div className="branch-office-gate-stats__item" key={item.label}>
-            <div className="branch-office-gate-stats__image">
-              <img src={item.icon} alt="" />
-            </div>
-            <div className="branch-office-gate-stats__info">
-              <div className="branch-office-gate-stats__label">
-                {item.label}
+      <Spin spinning={props.biStatistics.getPrimeportClosedAreaCorpStatLoading}>
+        <div className="branch-office-gate-stats__content">
+          {data.map(item => (
+            <div className="branch-office-gate-stats__item" key={item.label}>
+              <div className="branch-office-gate-stats__image">
+                <img src={item.icon} alt="" />
              </div>
-              <div className="branch-office-gate-stats__count">
-                <CountUp end={+item.count} />
+              <div className="branch-office-gate-stats__info">
+                <div className="branch-office-gate-stats__label">
+                  {item.label}
+                </div>
+                <div className="branch-office-gate-stats__count">
+                  <CountUp end={+item.count} />
+                </div>
              </div>
+              <Corner className="branch-office-gate-stats__corner--top-left" />
+              <Corner className="branch-office-gate-stats__corner--top-right" />
+              <Corner className="branch-office-gate-stats__corner--bottom-left" />
+              <Corner className="branch-office-gate-stats__corner--bottom-right" />
            </div>
-            <Corner className="branch-office-gate-stats__corner--top-left" />
-            <Corner className="branch-office-gate-stats__corner--top-right" />
-            <Corner className="branch-office-gate-stats__corner--bottom-left" />
-            <Corner className="branch-office-gate-stats__corner--bottom-right" />
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      </Spin>
    </Panel>
  );
 }
@ -52,4 +76,4 @@ function Corner({ className }) {
  );
 }

-export default ClosedAreaStatsPanel;
+export default Connect([NS_BI_STATISTICS], true)(ClosedAreaStatsPanel);
--- a/src/pages/Container/Map/components/Content/branchOffice/MenJin/GateApplicationPanel/index.js
+++ b/src/pages/Container/Map/components/Content/branchOffice/MenJin/GateApplicationPanel/index.js
@ -1,75 +1,45 @@
-import { useState } from "react";
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
 import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
+import { NS_BI_STATISTICS } from "~/enumerate/namespace";
 import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
+import { Context } from "~/pages/Container/Map/js/context";
 import "./index.less";

 const tabs = ["人员", "车辆"];
-const records = [
-  {
-    permissionRange: "A区",
-    status: "1",
-    applicant: "张三",
-    approver: "李主管",
-  },
-  {
-    permissionRange: "B区",
-    status: "1",
-    applicant: "李四",
-    approver: "王经理",
-  },
-  {
-    permissionRange: "C区",
-    status: "1",
-    applicant: "王五",
-    approver: "赵主任",
-  },
-  {
-    permissionRange: "D区",
-    status: "0",
-    applicant: "赵六",
-    approver: "钱总监",
-  },
-  {
-    permissionRange: "E区",
-    status: "0",
-    applicant: "钱七",
-    approver: "孙部长",
-  },
-  {
-    permissionRange: "F区",
-    status: "0",
-    applicant: "孙八",
-    approver: "周经理",
-  },
-  {
-    permissionRange: "G区",
-    status: "0",
-    applicant: "周九",
-    approver: "吴主任",
-  },
-  {
-    permissionRange: "H区",
-    status: "1",
-    applicant: "吴十",
-    approver: "郑主管",
-  },
-  {
-    permissionRange: "I区",
-    status: "0",
-    applicant: "郑一",
-    approver: "王总监",
-  },
-  {
-    permissionRange: "J区",
-    status: "1",
-    applicant: "王二",
-    approver: "张部长",
-  },
-];

 /** 负责展示口门申请记录及人员、车辆分类标签状态。 */
-function GateApplicationPanel() {
+function GateApplicationPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+
  const [activeIndex, setActiveIndex] = useState(0);
+  const [data, setData] = useState([]);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const loadData = async (activeIndex) => {
+    setIsVisible(false);
+    const { data = [] } = await props[activeIndex === 1 ? "getPrimeportClosedAreaCarApplyScreenList" : "getPrimeportClosedAreaPersonApplyScreenList"]({
+      pageIndex: 1,
+      pageSize: 9999,
+      portArea,
+      corpinfoId: currentBranchOffice,
+    });
+    setData(data);
+    setIsVisible(true);
+  };
+
+  const handleTabClick = (index) => {
+    if (index === activeIndex)
+      return;
+
+    setActiveIndex(index);
+    loadData(index);
+  };
+
+  useEffect(() => {
+    loadData(activeIndex);
+  }, []);

  return (
    <Panel
@ -81,7 +51,7 @@ function GateApplicationPanel() {
            <div
              className={`branch-office-gate-application__tab ${index === activeIndex ? "branch-office-gate-application__tab--active" : ""}`}
              key={item}
-              onClick={() => setActiveIndex(index)}
+              onClick={() => handleTabClick(index)}
            >
              {item}
            </div>
@ -92,29 +62,29 @@ function GateApplicationPanel() {
      <div className="branch-office-gate-application__content">
        <div className="branch-office-gate-application__table">
          <div className="branch-office-gate-application__row">
-            <div>权限范围</div>
-            <div>申请类型</div>
            <div>申请人</div>
-            <div>审批人</div>
+            <div>申请口门</div>
+            <div>开始时间</div>
+            <div>结束时间</div>
          </div>
          <div className="branch-office-gate-application__body">
-            <SeamlessScroll list={records} step={0.5}>
-              {records.map((item, index) => (
-                <div
-                  className="branch-office-gate-application__row"
-                  key={index}
-                >
-                  <div>{item.permissionRange}</div>
-                  <div
-                    className={`branch-office-gate-application__type branch-office-gate-application__type--${item.status}`}
-                  >
-                    {item.status === "1" ? "临时" : "长期"}
-                  </div>
-                  <div>{item.applicant}</div>
-                  <div>{item.approver}</div>
-                </div>
-              ))}
-            </SeamlessScroll>
+            <Spin spinning={props.biStatistics.getPrimeportClosedAreaCarApplyScreenListLoading || props.biStatistics.getPrimeportClosedAreaPersonApplyScreenListLoading}>
+              {isVisible && (
+                <SeamlessScroll list={data} step={0.5}>
+                  {data.map((item, index) => (
+                    <div
+                      className="branch-office-gate-application__row"
+                      key={index}
+                    >
+                      <div>{item.applyUserName}</div>
+                      <div>{item.levelOneMkmjName}</div>
+                      <div>{item.visitStartTime}</div>
+                      <div>{item.visitEndTime}</div>
+                    </div>
+                  ))}
+                </SeamlessScroll>
+              )}
+            </Spin>
          </div>
        </div>
      </div>
@ -122,4 +92,4 @@ function GateApplicationPanel() {
  );
 }

-export default GateApplicationPanel;
+export default Connect([NS_BI_STATISTICS], true)(GateApplicationPanel);
--- a/src/pages/Container/Map/components/Content/branchOffice/MenJin/GateApplicationPanel/index.less
+++ b/src/pages/Container/Map/components/Content/branchOffice/MenJin/GateApplicationPanel/index.less
@ -36,7 +36,7 @@
  background-color: rgba(42, 86, 158, 0.53);
 }

-.branch-office-gate-application__body
+.branch-office-gate-application__body,
 .branch-office-gate-application__row:nth-child(odd) {
  background-color: transparent;
 }
@ -47,7 +47,3 @@
  font-size: 12px;
  text-align: center;
 }
-
-.branch-office-gate-application__row .branch-office-gate-application__type--1 {
-  color: #fc6b13;
-}
--- a/src/pages/Container/Map/components/Content/port/MenJin/GateStatsPanel/index.js
+++ b/src/pages/Container/Map/components/Content/port/MenJin/GateStatsPanel/index.js
@ -1,4 +1,5 @@
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
 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";
@ -40,27 +41,29 @@ function GateStatsPanel(props) {

  return (
    <Panel title="口门统计">
-      <div className="port-gate-stats__options">
-        {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">
-              <div>
-                口门数：
-                {item.gateCount}
-              </div>
-              <div>
-                车闸机数：
-                {item.vehicleGateCount}
-              </div>
-              <div>
-                人闸机数：
-                {item.peopleGateCount}
+      <Spin spinning={props.biStatistics.getPrimeportMkmjStatisticsLoading}>
+        <div className="port-gate-stats__options">
+          {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">
+                <div>
+                  口门数：
+                  {item.gateCount}
+                </div>
+                <div>
+                  车闸机数：
+                  {item.vehicleGateCount}
+                </div>
+                <div>
+                  人闸机数：
+                  {item.peopleGateCount}
+                </div>
              </div>
            </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      </Spin>
    </Panel>
  );
 }