refactor(map): 对接接口 港区页面下方工具栏去掉封闭区域

src/api/biStatistics/index.js

@@ -204,3 +204,7 @@ export const getScreenMkmjRecord = declareRequest(
   "getScreenMkmjRecordLoading",
   "Post > @/primeport/dashboard/mkmjRecord",
 );
+export const getScreenRelatedCorpStatistics = declareRequest(
+  "getScreenRelatedCorpStatisticsLoading",
+  "Post > @/xgfManager/project/relatedCorpStatistics",
+);

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

@@ -12,8 +12,8 @@ import bottomImg10 from "~/assets/images/map_bi/bottom_utils/first/img10.png";
 import bottomImg10On from "~/assets/images/map_bi/bottom_utils/first/img10_on.png";
 import bottomImg12 from "~/assets/images/map_bi/bottom_utils/first/img12.png";
 import bottomImg12On from "~/assets/images/map_bi/bottom_utils/first/img12_on.png";
-import bottomImg13 from "~/assets/images/map_bi/bottom_utils/first/img13.png";
+// import bottomImg13 from "~/assets/images/map_bi/bottom_utils/first/img13.png";
-import bottomImg13On from "~/assets/images/map_bi/bottom_utils/first/img13_on.png";
+// import bottomImg13On from "~/assets/images/map_bi/bottom_utils/first/img13_on.png";
 // 二级菜单图片资源
 import ico1 from "~/assets/images/map_bi/bottom_utils/second/ico1.png";
 import ico1On from "~/assets/images/map_bi/bottom_utils/second/ico1_on.png";
@@ -414,11 +414,11 @@ export const portUtilsList = [
       },
     ],
   },
-  {
+  // {
-    img: bottomImg13,
+  //   img: bottomImg13,
-    checkImg: bottomImg13On,
+  //   checkImg: bottomImg13On,
-    label: "封闭区域",
+  //   label: "封闭区域",
-    type: "closedArea",
+  //   type: "closedArea",
-    list: [],
+  //   list: [],
-  },
+  // },
 ];

src/pages/Container/Map/components/Content/branchOffice/IndexLeft/RelatedPartyStatsPanel/index.js

@@ -1,82 +1,28 @@
+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 records = [
-  {
-    relatedPartyCategory: "承包商",
-    firstLevelUnits: 15,
-    firstLevelPersonnel: 120,
-    secondLevelUnits: 25,
-    secondLevelPersonnel: 320,
-  },
-  {
-    relatedPartyCategory: "供应商",
-    firstLevelUnits: 8,
-    firstLevelPersonnel: 85,
-    secondLevelUnits: 18,
-    secondLevelPersonnel: 210,
-  },
-  {
-    relatedPartyCategory: "分包商",
-    firstLevelUnits: 12,
-    firstLevelPersonnel: 95,
-    secondLevelUnits: 30,
-    secondLevelPersonnel: 450,
-  },
-  {
-    relatedPartyCategory: "监理单位",
-    firstLevelUnits: 5,
-    firstLevelPersonnel: 40,
-    secondLevelUnits: 10,
-    secondLevelPersonnel: 80,
-  },
-  {
-    relatedPartyCategory: "设计单位",
-    firstLevelUnits: 6,
-    firstLevelPersonnel: 55,
-    secondLevelUnits: 12,
-    secondLevelPersonnel: 120,
-  },
-  {
-    relatedPartyCategory: "施工单位",
-    firstLevelUnits: 18,
-    firstLevelPersonnel: 200,
-    secondLevelUnits: 40,
-    secondLevelPersonnel: 680,
-  },
-  {
-    relatedPartyCategory: "检测机构",
-    firstLevelUnits: 3,
-    firstLevelPersonnel: 25,
-    secondLevelUnits: 8,
-    secondLevelPersonnel: 65,
-  },
-  {
-    relatedPartyCategory: "咨询公司",
-    firstLevelUnits: 7,
-    firstLevelPersonnel: 60,
-    secondLevelUnits: 15,
-    secondLevelPersonnel: 180,
-  },
-  {
-    relatedPartyCategory: "运维单位",
-    firstLevelUnits: 9,
-    firstLevelPersonnel: 75,
-    secondLevelUnits: 22,
-    secondLevelPersonnel: 320,
-  },
-  {
-    relatedPartyCategory: "其他单位",
-    firstLevelUnits: 4,
-    firstLevelPersonnel: 35,
-    secondLevelUnits: 14,
-    secondLevelPersonnel: 150,
-  },
-];
-
 /** 负责展示相关方单位及其人员统计。 */
-function RelatedPartyStatsPanel() {
+function RelatedPartyStatsPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const { data } = await props.getScreenRelatedCorpStatistics({
+        portArea,
+        corpinfoId: currentBranchOffice,
+      });
+      setData(data || []);
+    };
+    loadData();
+  }, []);
+
   return (
     <Panel
       title="相关方单位统计"
@@ -92,20 +38,22 @@ function RelatedPartyStatsPanel() {
             <div>二级人数</div>
           </div>
           <div className="branch-office-related-party-stats__body">
-            <SeamlessScroll list={records} step={0.5}>
+            <Spin spinning={props.biStatistics.getScreenRelatedCorpStatisticsLoading}>
-              {records.map((item, index) => (
+              <SeamlessScroll list={data} step={0.5}>
+                {data.map((item, index) => (
                   <div
                     className="branch-office-related-party-stats__row"
                     key={index}
                   >
-                  <div>{item.relatedPartyCategory}</div>
+                    <div>{item.corpTypeName}</div>
-                  <div>{item.firstLevelUnits}</div>
+                    <div>{item.oneLevelCorpCount}</div>
-                  <div>{item.firstLevelPersonnel}</div>
+                    <div>{item.oneLevelUserCount}</div>
-                  <div>{item.secondLevelUnits}</div>
+                    <div>{item.twoLevelCorpCount}</div>
-                  <div>{item.secondLevelPersonnel}</div>
+                    <div>{item.twoLevelUserCount}</div>
                   </div>
                 ))}
               </SeamlessScroll>
+            </Spin>
           </div>
         </div>
       </div>
@@ -113,4 +61,4 @@ function RelatedPartyStatsPanel() {
   );
 }
 
-export default RelatedPartyStatsPanel;
+export default Connect([NS_BI_STATISTICS], true)(RelatedPartyStatsPanel);

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

@@ -1,52 +1,66 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
 import gateBackground from "~/assets/images/map_bi/content/bg4.png";
 import areaBackground from "~/assets/images/map_bi/content/bg5.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 = [
   {
-    title: "口门进出统计",
+    title: "一级口门进出统计",
-    label1: "人数",
+    personKey: "oneLevelInoutPersonCount",
-    label2: "车数",
+    carKey: "oneLevelInoutCarCount",
-    count1: 123,
-    count2: 123,
     background: gateBackground,
   },
   {
-    title: "进入申请待审批",
+    title: "一级口门进出审批",
-    label1: "人数",
+    personKey: "oneLevelApprovalPersonCount",
-    label2: "车数",
+    carKey: "oneLevelApprovalCarCount",
-    count1: 123,
-    count2: 123,
     background: gateBackground,
   },
   {
-    title: "封闭区域人员情况",
+    title: "封闭区域进出统计",
-    label1: "区域数",
+    personKey: "closedAreaInoutPersonCount",
-    label2: "人数",
+    carKey: "closedAreaInoutCarCount",
-    count1: 123,
-    count2: 123,
     background: areaBackground,
   },
   {
-    title: "封闭区域作业情况",
+    title: "封闭区域进出审批",
-    label1: "区域数",
+    personKey: "closedAreaApprovalPersonCount",
-    label2: "作业数",
+    carKey: "closedAreaApprovalCarCount",
-    count1: 123,
-    count2: 123,
     background: areaBackground,
   },
 ];
 
-/** 负责展示口门和封闭区域的基础统计。 */
+/** 查询并展示当前分公司的口门与封闭区域人员、车辆统计。 */
-function GateAndClosedAreaPanel() {
+function GateAndClosedAreaPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+  const [data, setData] = useState({});
+
+  useEffect(() => {
+    const loadData = async () => {
+      // 分公司维度必须同时传入所属港区和企业 ID，避免获取到总览数据。
+      const { data } = await props.getScreenRecordStat({
+        portArea,
+        corpinfoId: currentBranchOffice,
+      });
+      setData(data || {});
+    };
+
+    loadData();
+  }, []);
+
   return (
     <Panel title="口门及封闭区域">
+      <Spin spinning={props.biStatistics.getScreenRecordStatLoading}>
         <div className="branch-office-gate-closed-area__content">
-        {records.map((item, index) => (
+          {records.map(item => (
             <div
               className="branch-office-gate-closed-area__item"
-            key={index}
+              key={item.title}
               style={{ backgroundImage: `url(${item.background})` }}
             >
               <div className="branch-office-gate-closed-area__title">
@@ -54,21 +68,20 @@ function GateAndClosedAreaPanel() {
               </div>
               <div className="branch-office-gate-closed-area__values">
                 <div>
-                {item.label1}
+                  人数：
-                ：
+                  {data[item.personKey] ?? 0}
-                {item.count1}
                 </div>
                 <div>
-                {item.label2}
+                  车数：
-                ：
+                  {data[item.carKey] ?? 0}
-                {item.count2}
                 </div>
               </div>
             </div>
           ))}
         </div>
+      </Spin>
     </Panel>
   );
 }
 
-export default GateAndClosedAreaPanel;
+export default Connect([NS_BI_STATISTICS], true)(GateAndClosedAreaPanel);

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

@@ -1,35 +1,34 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { useMount } from "ahooks";
+import { Spin } from "antd";
 import * as echarts from "echarts";
-import { useRef, useState } from "react";
+import { useContext, useRef, useState } from "react";
+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 = [
-  { NAME: "零号门", IN: "0", OUT: "0" },
-  { NAME: "一号门", IN: "15", OUT: "12" },
-  { NAME: "二号门", IN: "8", OUT: "10" },
-  { NAME: "三号门", IN: "22", OUT: "18" },
-  { NAME: "四号门", IN: "5", OUT: "7" },
-  { NAME: "五号门", IN: "30", OUT: "25" },
-  { NAME: "六号门", IN: "12", OUT: "14" },
-  { NAME: "七号门", IN: "18", OUT: "16" },
-  { NAME: "八号门", IN: "9", OUT: "11" },
-  { NAME: "九号门", IN: "25", OUT: "20" },
-];
 
 /** 负责展示封闭区域进出趋势并管理图表实例生命周期。 */
-function EntryExitTrendPanel() {
+function EntryExitTrendPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+
   const [activeIndex, setActiveIndex] = useState(0);
   const chartInstance = useRef(null);
   const chartRef = useRef(null);
 
+  // 切换数据类型前释放旧实例，避免同一容器重复初始化 ECharts。
+  const disposeChart = () => {
+    chartInstance.current?.dispose();
+    chartInstance.current = null;
+  };
+
   const initEcharts = (data) => {
     chartInstance.current = echarts.init(chartRef.current);
-
+    const inData = data.map(item => Number.parseInt(item.inCount));
-    const inData = data.map(item => Number.parseInt(item.IN));
+    const outData = data.map(item => Number.parseInt(item.outCount));
-    const outData = data.map(item => Number.parseInt(item.OUT));
+    const names = data.map(item => item.mkmjName);
-    const names = data.map(item => item.NAME);
 
     const option = {
       tooltip: {
@@ -162,18 +161,33 @@ function EntryExitTrendPanel() {
 
     chartInstance.current.setOption(option);
   };
+  const loadData = async (mkmjType) => {
+    const { data } = await props.getScreenMkmjRecord({
+      portArea,
+      corpinfoId: currentBranchOffice,
+      mkmjLevel: "2",
+      mkmjType,
+    });
+    initEcharts(data);
+  };
 
   useMount(() => {
-    initEcharts(records);
+    loadData("1");
 
     return () => {
-      if (chartInstance.current) {
+      disposeChart();
-        chartInstance.current.dispose();
-        chartInstance.current = null;
-      }
     };
   });
 
+  const handleTabClick = (index) => {
+    if (index === activeIndex)
+      return;
+
+    disposeChart();
+    setActiveIndex(index);
+    loadData(index === 0 ? "1" : "2");
+  };
+
   return (
     <Panel
       title="封闭区域进出情况统计"
@@ -184,7 +198,7 @@ function EntryExitTrendPanel() {
             <div
               className={`branch-office-gate-trend__tab ${index === activeIndex ? "branch-office-gate-trend__tab--active" : ""}`}
               key={item}
-              onClick={() => setActiveIndex(index)}
+              onClick={() => handleTabClick(index)}
             >
               {item}
             </div>
@@ -193,10 +207,12 @@ function EntryExitTrendPanel() {
       )}
     >
       <div className="branch-office-gate-trend__content">
+        <Spin spinning={props.biStatistics.getScreenMkmjRecordLoading}>
           <div ref={chartRef} className="branch-office-gate-trend__chart" />
+        </Spin>
       </div>
     </Panel>
   );
 }
 
-export default EntryExitTrendPanel;
+export default Connect([NS_BI_STATISTICS], true)(EntryExitTrendPanel);