feat(portGate): 口门进出记录 对接接口

eslint.config.js

@@ -18,6 +18,7 @@ export default antfu({
       "react-hooks-extra/no-unnecessary-use-prefix": "off",
       "react-hooks-extra/prefer-use-state-lazy-initialization": "off",
       "react-hooks/exhaustive-deps": "off",
+      "react/no-implicit-key": "off",
     },
     javascript: {
       "no-console": process.env.NODE_ENV === "production" ? "error" : "warn",

src/api/biStatistics/index.js

@@ -204,6 +204,10 @@ export const getScreenMkmjRecord = declareRequest(
   "getScreenMkmjRecordLoading",
   "Post > @/primeport/dashboard/mkmjRecord",
 );
+export const getScreenAccessRecord = declareRequest(
+  "getScreenAccessRecordLoading",
+  "Post > @/primeport/dashboard/accessRecord",
+);
 export const getScreenRelatedCorpStatistics = declareRequest(
   "getScreenRelatedCorpStatisticsLoading",
   "Post > @/xgfManager/project/relatedCorpStatistics",

src/pages/Container/Map/components/Content/port/MenJin/GateRecordPanel/index.js

@@ -1,148 +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 activeTabBackground from "~/assets/images/map_bi/content/title.png";
 import tabBackground from "~/assets/images/map_bi/content/title_on.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 styles from "./index.module.less";
 
 const tabs = ["人员闸机", "车辆闸机"];
-const defaultRecords = [
-  {
-    USERNAME: "张三",
-    TIME: "2023-12-01 08:30:15",
-    STATE: "0",
-    EQUIPMENTNAME: "东门人行闸机",
-  },
-  {
-    USERNAME: "李四",
-    TIME: "2023-12-01 09:15:22",
-    STATE: "1",
-    EQUIPMENTNAME: "西门人行闸机",
-  },
-  {
-    USERNAME: "王五",
-    TIME: "2023-12-01 10:45:30",
-    STATE: "0",
-    EQUIPMENTNAME: "南门人行闸机",
-  },
-  {
-    USERNAME: "赵六",
-    TIME: "2023-12-01 11:20:18",
-    STATE: "1",
-    EQUIPMENTNAME: "北门人行闸机",
-  },
-  {
-    USERNAME: "陈七",
-    TIME: "2023-12-01 13:30:45",
-    STATE: "0",
-    EQUIPMENTNAME: "东门人行闸机",
-  },
-  {
-    USERNAME: "刘八",
-    TIME: "2023-12-01 14:15:20",
-    STATE: "0",
-    EQUIPMENTNAME: "西门人行闸机",
-  },
-  {
-    USERNAME: "孙九",
-    TIME: "2023-12-01 15:45:10",
-    STATE: "1",
-    EQUIPMENTNAME: "南门人行闸机",
-  },
-  {
-    USERNAME: "周十",
-    TIME: "2023-12-01 16:30:25",
-    STATE: "0",
-    EQUIPMENTNAME: "北门人行闸机",
-  },
-  {
-    USERNAME: "吴十一",
-    TIME: "2023-12-02 08:15:30",
-    STATE: "0",
-    EQUIPMENTNAME: "东门人行闸机",
-  },
-  {
-    USERNAME: "郑十二",
-    TIME: "2023-12-02 09:30:40",
-    STATE: "1",
-    EQUIPMENTNAME: "西门人行闸机",
-  },
-  {
-    USERNAME: "王十三",
-    TIME: "2023-12-02 10:20:15",
-    STATE: "0",
-    EQUIPMENTNAME: "南门人行闸机",
-  },
-  {
-    USERNAME: "冯十四",
-    TIME: "2023-12-02 11:45:25",
-    STATE: "1",
-    EQUIPMENTNAME: "北门人行闸机",
-  },
-  {
-    USERNAME: "蒋十五",
-    TIME: "2023-12-02 13:10:35",
-    STATE: "0",
-    EQUIPMENTNAME: "东门人行闸机",
-  },
-  {
-    USERNAME: "韩十六",
-    TIME: "2023-12-02 14:50:20",
-    STATE: "0",
-    EQUIPMENTNAME: "西门人行闸机",
-  },
-  {
-    USERNAME: "杨十七",
-    TIME: "2023-12-02 15:30:45",
-    STATE: "1",
-    EQUIPMENTNAME: "南门人行闸机",
-  },
-  {
-    USERNAME: "朱十八",
-    TIME: "2023-12-02 16:20:10",
-    STATE: "0",
-    EQUIPMENTNAME: "北门人行闸机",
-  },
-  {
-    USERNAME: "秦十九",
-    TIME: "2023-12-03 08:45:30",
-    STATE: "0",
-    EQUIPMENTNAME: "东门人行闸机",
-  },
-  {
-    USERNAME: "何二十",
-    TIME: "2023-12-03 09:20:15",
-    STATE: "1",
-    EQUIPMENTNAME: "西门人行闸机",
-  },
-  {
-    USERNAME: "吕二十一",
-    TIME: "2023-12-03 10:30:20",
-    STATE: "0",
-    EQUIPMENTNAME: "南门人行闸机",
-  },
-  {
-    USERNAME: "施二十二",
-    TIME: "2023-12-03 11:15:40",
-    STATE: "1",
-    EQUIPMENTNAME: "北门人行闸机",
-  },
-];
 
-/** 展示口门进出记录，并在切换闸机类型时清空当前列表。 */
+/** 展示港区人员和车辆的实时进出记录，并在切换记录类型时重新请求数据。 */
-function GateRecordPanel() {
+function GateRecordPanel(props) {
+  const { portArea } = useContext(Context);
   const [activeTab, setActiveTab] = useState(0);
-  const [records, setRecords] = useState(defaultRecords);
+  const [records, setRecords] = useState([]);
+
+  const loadRecords = async (tabIndex) => {
+    setRecords([]);
+    const { data = [] } = await props.getScreenAccessRecord({
+      portArea,
+      recordType: tabIndex + 1,
+    });
+    setRecords(data);
+  };
+
+  useEffect(() => {
+    loadRecords(activeTab);
+  }, []);
 
   const handleTabClick = (index) => {
     if (index === activeTab)
       return;
     setActiveTab(index);
-    setRecords([]);
+    loadRecords(index);
   };
 
   return (
     <Panel title="口门进出记录" className={styles.portGate__record}>
+      <Spin spinning={props.biStatistics.getScreenAccessRecordLoading}>
         <div className={styles.portGateRecord__content}>
           <div className={styles.portGateRecord__tabs}>
             {tabs.map((item, index) => (
@@ -172,24 +69,24 @@ function GateRecordPanel() {
                 {records.map((item, index) => (
                   <div key={index} className={styles.portGateRecord__row}>
                     <div className={styles.portGateRecord__cell}>
-                    {activeTab === 0 ? item.USERNAME : item.LICENSE_PLATE}
+                      {activeTab === 0 ? item.personName : item.carNum}
                     </div>
-                  <div className={styles.portGateRecord__cell}>{item.TIME}</div>
+                    <div className={styles.portGateRecord__cell}>{item.swingTime}</div>
                     <div
-                    className={[styles.portGateRecord__cell, activeTab === 0 && item.STATE === "0" ? styles.portGateRecord__cellGreen : ""].filter(Boolean).join(" ")}
+                      className={[styles.portGateRecord__cell, activeTab === 0 && item.enterOrExit === 1 ? styles.portGateRecord__cellGreen : ""].filter(Boolean).join(" ")}
                     >
                       {activeTab === 0
-                      ? item.STATE === "0"
+                        ? item.enterOrExit === 1
                           ? "进入"
                           : "出港"
-                      : item.STATE === "0"
+                        : item.enterOrExit === 1
                           ? "进场"
                           : "出场"}
                     </div>
                     <div
-                    className={[styles.portGateRecord__cell, activeTab === 0 && item.STATE === "0" ? styles.portGateRecord__cellYellow : ""].filter(Boolean).join(" ")}
+                      className={[styles.portGateRecord__cell, activeTab === 0 && item.enterOrExit === 1 ? styles.portGateRecord__cellYellow : ""].filter(Boolean).join(" ")}
                     >
-                    {activeTab === 0 ? item.EQUIPMENTNAME : item.COMING_REASON}
+                      {item.gateName}
                     </div>
                   </div>
                 ))}
@@ -197,8 +94,9 @@ function GateRecordPanel() {
             </div>
           </div>
         </div>
+      </Spin>
     </Panel>
   );
 }
 
-export default GateRecordPanel;
+export default Connect([NS_BI_STATISTICS], true)(GateRecordPanel);