refactor(map): 对接接口

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",
+);

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, "oneLevelInoutPersonCount", "oneLevelInoutCarCount"],
-    ["一级口门进出审批", gateBackground],
+    ["一级口门进出审批", gateBackground, "oneLevelApprovalPersonCount", "oneLevelApprovalCarCount"],
-    ["封闭区域进出统计", closedBackground],
+    ["封闭区域进出统计", closedBackground, "closedAreaInoutPersonCount", "closedAreaInoutCarCount"],
-    ["封闭区域进出审批", closedBackground],
+    ["封闭区域进出审批", closedBackground, "closedAreaApprovalPersonCount", "closedAreaApprovalCarCount"],
   ];
+
   return (
     <Panel
       title="当前口门、封闭区情况"
       className="index-info-right-panel__gate"
     >
+      <Spin spinning={props.biStatistics.getScreenRecordStatLoading}>
         <div className="index-info-gate__list">
-        {items.map(([title, background]) => (
+          {items.map(([title, background, personKey, carKey], index) => (
             <div
               className="index-info-gate__item"
               style={{ backgroundImage: `url(${background})` }}
-            key={title}
+              key={index}
             >
               <strong>{title}</strong>
               <div>
-              <span>人数：2100</span>
+                <span>
-              <span>车数：1125</span>
+                  人数：
+                  {data[personKey] ?? 0}
+                </span>
+                <span>
+                  车数：
+                  {data[carKey] ?? 0}
+                </span>
               </div>
             </div>
           ))}
         </div>
+      </Spin>
     </Panel>
   );
 }
 
-export default GatePanel;
+export default Connect([NS_BI_STATISTICS], true)(GatePanel);

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;
 }

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 xAxisData = data.map(item => item.mkmjName);
-    const enterData = data.map(
+    const enterData = data.map(item => Number(item.inCount));
-      item => Number(item.CAR_IN) + Number(item.PEOPLE_IN),
+    const exitData = data.map(item => Number(item.outCount));
-    );
-    const exitData = data.map(
-      item => Number(item.CAR_OUT) + Number(item.PEOPLE_OUT),
-    );
     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">
+      <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);

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}>
+            <Spin spinning={props.biStatistics.getScreenPersonLocationListLoading}>
-              {records.map((item, index) => (
+              <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.corpName}</div>
+                    <div className="port-online-location-info__cell">{item.corpinfoName}</div>
-                  <div className="port-online-location-info__cell">{item.onlinePersonnelCount}</div>
+                    <div className="port-online-location-info__cell">{item.personCount}</div>
-                  <div className="port-online-location-info__cell">{item.onlineVehicleCount}</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);

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 = [
+const STATUS = {
-  { corpName: "港区建设有限公司", projectName: "码头泊位改造工程", projectStatus: "进行中" },
+  0: "暂存",
-  { corpName: "临港工程有限公司", projectName: "堆场智能化升级工程", projectStatus: "未开工" },
+  1: "未开工",
-  { corpName: "海港设备安装有限公司", projectName: "装卸设备检修工程", projectStatus: "完工申请中" },
+  2: "开工申请中",
-  { corpName: "港航建设集团", projectName: "航道疏浚维护工程", projectStatus: "已结束" },
+  3: "已超期",
-  { corpName: "东港物流有限公司", projectName: "散货泊位扩建工程", projectStatus: "进行中" },
+  4: "进行中",
-  { corpName: "港区能源有限公司", projectName: "岸电设施建设工程", projectStatus: "开工申请中" },
+  5: "完工申请中",
-  { corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
+  6: "已完工",
-  { 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: "未开工" },
-];
 
 /** 展示重点作业的所属公司、工程名称和当前工程状态。 */
-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}>
+            <Spin spinning={props.biStatistics.getScreenLargeScreenInfoLoading}>
-              {records.map((item, index) => (
+              <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.corpName}</div>
+                    <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">{item.projectStatus}</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);