refactor(map): 对接接口

2026-07-29 14:52:10 +08:00 · 2026-07-29 14:52:10 +08:00 · 4ebf572dbd
parent dbe87198b2
commit 4ebf572dbd
6 changed files with 154 additions and 140 deletions
--- a/src/api/biStatistics/index.js
+++ b/src/api/biStatistics/index.js
@ -188,3 +188,19 @@ export const getScreenFireCheckList = declareRequest(
  "getScreenFireCheckListLoading",
  "Post > @/fireCheck/fireCheckList/screen/list",
 );
+export const getScreenPersonLocationList = declareRequest(
+  "getScreenPersonLocationListLoading",
+  "Post > @/personnelPosition/bi/personLocation/companyPositioning/list",
+);
+export const getScreenLargeScreenInfo = declareRequest(
+  "getScreenLargeScreenInfoLoading",
+  "Post > @/keyProject/keyProject/largeScreenInfo",
+);
+export const getScreenRecordStat = declareRequest(
+  "getScreenRecordStatLoading",
+  "Post > @/primeport/dashboard/recordStat",
+);
+export const getScreenMkmjRecord = declareRequest(
+  "getScreenMkmjRecordLoading",
+  "Post > @/primeport/dashboard/mkmjRecord",
+);
--- a/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/GatePanel/index.js
+++ b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/GatePanel/index.js
@ -1,38 +1,62 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useEffect, useState } from "react";
 import closedBackground from "~/assets/images/public/bigScreen/bg11.png";
 import gateBackground from "~/assets/images/public/bigScreen/bg12.png";
+import { NS_BI_STATISTICS } from "~/enumerate/namespace";
 import Panel from "../../Panel";
 import "./index.less";

-/** 展示当前口门与封闭区的固定统计信息。 */
-function GatePanel() {
+/** 查询并展示当前口门与封闭区的人员、车辆统计。 */
+function GatePanel(props) {
+  const [data, setData] = useState({});
+
+  useEffect(() => {
+    const loadData = async () => {
+      const { data } = await props.getScreenRecordStat();
+      setData(data || {});
+    };
+
+    loadData();
+  }, []);
+
  const items = [
-    ["一级口门进出统计", gateBackground],
-    ["一级口门进出审批", gateBackground],
-    ["封闭区域进出统计", closedBackground],
-    ["封闭区域进出审批", closedBackground],
+    ["一级口门进出统计", gateBackground, "oneLevelInoutPersonCount", "oneLevelInoutCarCount"],
+    ["一级口门进出审批", gateBackground, "oneLevelApprovalPersonCount", "oneLevelApprovalCarCount"],
+    ["封闭区域进出统计", closedBackground, "closedAreaInoutPersonCount", "closedAreaInoutCarCount"],
+    ["封闭区域进出审批", closedBackground, "closedAreaApprovalPersonCount", "closedAreaApprovalCarCount"],
  ];
+
  return (
    <Panel
      title="当前口门、封闭区情况"
      className="index-info-right-panel__gate"
    >
-      <div className="index-info-gate__list">
-        {items.map(([title, background]) => (
-          <div
-            className="index-info-gate__item"
-            style={{ backgroundImage: `url(${background})` }}
-            key={title}
-          >
-            <strong>{title}</strong>
-            <div>
-              <span>人数：2100</span>
-              <span>车数：1125</span>
+      <Spin spinning={props.biStatistics.getScreenRecordStatLoading}>
+        <div className="index-info-gate__list">
+          {items.map(([title, background, personKey, carKey], index) => (
+            <div
+              className="index-info-gate__item"
+              style={{ backgroundImage: `url(${background})` }}
+              key={index}
+            >
+              <strong>{title}</strong>
+              <div>
+                <span>
+                  人数：
+                  {data[personKey] ?? 0}
+                </span>
+                <span>
+                  车数：
+                  {data[carKey] ?? 0}
+                </span>
+              </div>
            </div>
-          </div>
-        ))}
-      </div>
+          ))}
+        </div>
+      </Spin>
    </Panel>
  );
 }

-export default GatePanel;
+export default Connect([NS_BI_STATISTICS], true)(GatePanel);
--- a/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/GatePanel/index.less
+++ b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/GatePanel/index.less
@ -15,6 +15,6 @@

 .index-info-gate__item div {
  display: flex;
-  justify-content: space-between;
+  justify-content: space-around;
  margin-top: 5px;
 }
--- a/src/pages/Container/Map/components/Content/port/MenJin/EntryExitTrendPanel/index.js
+++ b/src/pages/Container/Map/components/Content/port/MenJin/EntryExitTrendPanel/index.js
@ -1,75 +1,25 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
 import { useMount } from "ahooks";
+import { Spin } from "antd";
 import * as echarts from "echarts";
-import { useRef } from "react";
+import { useContext, useRef } from "react";
+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 { textFormatter } from "~/pages/Container/Map/js/utils";
 import "./index.less";

-const records = [
-  {
-    PEOPLE_OUT: "2",
-    AREA_NAME: "王雯仲测试",
-    PEOPLE_IN: "1",
-    CAR_IN: "0",
-    CAR_OUT: "0",
-  },
-  {
-    PEOPLE_OUT: "0",
-    AREA_NAME: "测试",
-    PEOPLE_IN: "0",
-    CAR_IN: "0",
-    CAR_OUT: "0",
-  },
-  {
-    PEOPLE_OUT: "0",
-    AREA_NAME: "测试11",
-    PEOPLE_IN: "0",
-    CAR_IN: "0",
-    CAR_OUT: "0",
-  },
-  {
-    PEOPLE_OUT: "0",
-    AREA_NAME: "1",
-    PEOPLE_IN: "0",
-    CAR_IN: "0",
-    CAR_OUT: "0",
-  },
-  ...[
-    "秦港一号门",
-    "秦港二号门",
-    "秦港三号门",
-    "秦港四号门",
-    "秦港五号门",
-    "秦港六号门",
-    "秦港七号门",
-    "秦港八号门",
-    "秦港九号门",
-    "秦港十号门",
-    "翻控一号门",
-    "翻控二号门",
-    "翻控三号门",
-  ].map(AREA_NAME => ({
-    PEOPLE_OUT: "0",
-    AREA_NAME,
-    PEOPLE_IN: "0",
-    CAR_IN: "0",
-    CAR_OUT: "0",
-  })),
-];
-
 /** 负责初始化口门进出统计图，并在卸载时释放图表实例。 */
-function EntryExitTrendPanel() {
+function EntryExitTrendPanel(props) {
+  const { portArea } = useContext(Context);
+
  const chartRef = useRef(null);
  const chartInstance = useRef(null);

  const initEcharts = (data) => {
-    const xAxisData = data.map(item => item.AREA_NAME);
-    const enterData = data.map(
-      item => Number(item.CAR_IN) + Number(item.PEOPLE_IN),
-    );
-    const exitData = data.map(
-      item => Number(item.CAR_OUT) + Number(item.PEOPLE_OUT),
-    );
+    const xAxisData = data.map(item => item.mkmjName);
+    const enterData = data.map(item => Number(item.inCount));
+    const exitData = data.map(item => Number(item.outCount));
    chartInstance.current = echarts.init(chartRef.current);
    chartInstance.current.setOption({
      tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
@ -171,17 +121,24 @@ function EntryExitTrendPanel() {
  };

  useMount(() => {
-    initEcharts(records);
+    const loadData = async () => {
+      const { data } = await props.getScreenMkmjRecord({ portArea, mkmjLevel: "1" });
+      initEcharts(data);
+    };
+
+    loadData();
    return () => chartInstance.current?.dispose();
  });

  return (
    <Panel title="进入进出统计" className="port-gate__trend">
-      <div className="port-gate-trend__content">
-        <div ref={chartRef} className="port-gate-trend__chart" />
-      </div>
+      <Spin spinning={props.biStatistics.getScreenMkmjRecordLoading}>
+        <div className="port-gate-trend__content">
+          <div ref={chartRef} className="port-gate-trend__chart" />
+        </div>
+      </Spin>
    </Panel>
  );
 }

-export default EntryExitTrendPanel;
+export default Connect([NS_BI_STATISTICS], true)(EntryExitTrendPanel);
--- a/src/pages/Container/Map/components/Content/port/RenYuan/OnlineLocationInfoPanel/index.js
+++ b/src/pages/Container/Map/components/Content/port/RenYuan/OnlineLocationInfoPanel/index.js
@ -1,19 +1,26 @@
+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/port/Panel";
+import { Context } from "~/pages/Container/Map/js/context";
 import "./index.less";

-const records = [
-  { corpName: "港区建设有限公司", onlinePersonnelCount: 126, onlineVehicleCount: 18 },
-  { corpName: "临港工程有限公司", onlinePersonnelCount: 98, onlineVehicleCount: 12 },
-  { corpName: "海港设备安装有限公司", onlinePersonnelCount: 75, onlineVehicleCount: 9 },
-  { corpName: "港航建设集团", onlinePersonnelCount: 142, onlineVehicleCount: 21 },
-  { corpName: "东港物流有限公司", onlinePersonnelCount: 86, onlineVehicleCount: 16 },
-  { corpName: "港区能源有限公司", onlinePersonnelCount: 63, onlineVehicleCount: 7 },
-  { corpName: "海运工程有限公司", onlinePersonnelCount: 109, onlineVehicleCount: 14 },
-];
-
 /** 展示各公司当前在线定位的人员和车辆数量。 */
-function OnlineLocationInfoPanel() {
+function OnlineLocationInfoPanel(props) {
+  const { portArea } = useContext(Context);
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const { data } = await props.getScreenPersonLocationList({ portArea });
+      setData(data);
+    };
+    loadData();
+  }, []);
+
  return (
    <Panel title="在线定位信息" className="port-personnel__online-location-info">
      <div className="port-online-location-info__content">
@ -24,15 +31,17 @@ function OnlineLocationInfoPanel() {
            <div className="port-online-location-info__cell">在线定位车辆数</div>
          </div>
          <div className="port-online-location-info__body">
-            <SeamlessScroll list={records} step={0.5}>
-              {records.map((item, index) => (
-                <div className="port-online-location-info__row" key={index}>
-                  <div className="port-online-location-info__cell">{item.corpName}</div>
-                  <div className="port-online-location-info__cell">{item.onlinePersonnelCount}</div>
-                  <div className="port-online-location-info__cell">{item.onlineVehicleCount}</div>
-                </div>
-              ))}
-            </SeamlessScroll>
+            <Spin spinning={props.biStatistics.getScreenPersonLocationListLoading}>
+              <SeamlessScroll list={data} step={0.5}>
+                {data.map((item, index) => (
+                  <div className="port-online-location-info__row" key={index}>
+                    <div className="port-online-location-info__cell">{item.corpinfoName}</div>
+                    <div className="port-online-location-info__cell">{item.personCount}</div>
+                    <div className="port-online-location-info__cell">{item.vehicleCount}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </Spin>
          </div>
        </div>
      </div>
@ -40,4 +49,4 @@ function OnlineLocationInfoPanel() {
  );
 }

-export default OnlineLocationInfoPanel;
+export default Connect([NS_BI_STATISTICS], true)(OnlineLocationInfoPanel);
--- a/src/pages/Container/Map/components/Content/port/ZhongDian/KeyWorkInfoPanel/index.js
+++ b/src/pages/Container/Map/components/Content/port/ZhongDian/KeyWorkInfoPanel/index.js
@ -1,30 +1,36 @@
+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/port/Panel";
+import { Context } from "~/pages/Container/Map/js/context";
 import "./index.less";

-const records = [
-  { corpName: "港区建设有限公司", projectName: "码头泊位改造工程", projectStatus: "进行中" },
-  { corpName: "临港工程有限公司", projectName: "堆场智能化升级工程", projectStatus: "未开工" },
-  { corpName: "海港设备安装有限公司", projectName: "装卸设备检修工程", projectStatus: "完工申请中" },
-  { corpName: "港航建设集团", projectName: "航道疏浚维护工程", projectStatus: "已结束" },
-  { corpName: "东港物流有限公司", projectName: "散货泊位扩建工程", projectStatus: "进行中" },
-  { corpName: "港区能源有限公司", projectName: "岸电设施建设工程", projectStatus: "开工申请中" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
-];
+const STATUS = {
+  0: "暂存",
+  1: "未开工",
+  2: "开工申请中",
+  3: "已超期",
+  4: "进行中",
+  5: "完工申请中",
+  6: "已完工",
+};

 /** 展示重点作业的所属公司、工程名称和当前工程状态。 */
-function KeyWorkInfoPanel() {
+function KeyWorkInfoPanel(props) {
+  const { portArea } = useContext(Context);
+
+  const [data, setData] = useState([]);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const { data } = await props.getScreenLargeScreenInfo({ portArea });
+      setData(data);
+    };
+    loadData();
+  }, []);
+
  return (
    <Panel title="重点作业信息" className="port-key-supervision__work-info">
      <div className="port-key-work-info__content">
@ -35,15 +41,17 @@ function KeyWorkInfoPanel() {
            <div className="port-key-work-info__cell">工程状态</div>
          </div>
          <div className="port-key-work-info__body">
-            <SeamlessScroll list={records} step={0.5}>
-              {records.map((item, index) => (
-                <div className="port-key-work-info__row" key={index}>
-                  <div className="port-key-work-info__cell">{item.corpName}</div>
-                  <div className="port-key-work-info__cell">{item.projectName}</div>
-                  <div className="port-key-work-info__cell">{item.projectStatus}</div>
-                </div>
-              ))}
-            </SeamlessScroll>
+            <Spin spinning={props.biStatistics.getScreenLargeScreenInfoLoading}>
+              <SeamlessScroll list={data} step={0.5}>
+                {data.map((item, index) => (
+                  <div className="port-key-work-info__row" key={index}>
+                    <div className="port-key-work-info__cell">{item.jurisdictionCorpinfoName}</div>
+                    <div className="port-key-work-info__cell">{item.projectName}</div>
+                    <div className="port-key-work-info__cell">{STATUS[item.applyStatus]}</div>
+                  </div>
+                ))}
+              </SeamlessScroll>
+            </Spin>
          </div>
        </div>
      </div>
@ -51,4 +59,4 @@ function KeyWorkInfoPanel() {
  );
 }

-export default KeyWorkInfoPanel;
+export default Connect([NS_BI_STATISTICS], true)(KeyWorkInfoPanel);