diff --git a/eslint.config.js b/eslint.config.js
index b695218..caab8ad 100644
--- a/eslint.config.js
+++ b/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",
diff --git a/src/api/biStatistics/index.js b/src/api/biStatistics/index.js
index f330680..6153824 100644
--- a/src/api/biStatistics/index.js
+++ b/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",
diff --git a/src/pages/Container/Map/components/Content/port/MenJin/GateRecordPanel/index.js b/src/pages/Container/Map/components/Content/port/MenJin/GateRecordPanel/index.js
index d8600e4..0898528 100644
--- a/src/pages/Container/Map/components/Content/port/MenJin/GateRecordPanel/index.js
+++ b/src/pages/Container/Map/components/Content/port/MenJin/GateRecordPanel/index.js
@@ -1,204 +1,102 @@
-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}>
-      <div className={styles.portGateRecord__content}>
-        <div className={styles.portGateRecord__tabs}>
-          {tabs.map((item, index) => (
-            <div
-              key={index}
-              className={styles.portGateRecord__tab}
-              style={{
-                backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
-              }}
-              onClick={() => handleTabClick(index)}
-            >
-              {item}
-            </div>
-          ))}
-        </div>
-        <div className={styles.portGateRecord__table}>
-          <div className={styles.portGateRecord__row}>
-            <div className={styles.portGateRecord__cell}>
-              {activeTab === 0 ? "人员" : "车牌"}
-            </div>
-            <div className={styles.portGateRecord__cell}>时间</div>
-            <div className={styles.portGateRecord__cell}>状态</div>
-            <div className={styles.portGateRecord__cell}>闸机名称</div>
+      <Spin spinning={props.biStatistics.getScreenAccessRecordLoading}>
+        <div className={styles.portGateRecord__content}>
+          <div className={styles.portGateRecord__tabs}>
+            {tabs.map((item, index) => (
+              <div
+                key={index}
+                className={styles.portGateRecord__tab}
+                style={{
+                  backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
+                }}
+                onClick={() => handleTabClick(index)}
+              >
+                {item}
+              </div>
+            ))}
           </div>
-          <div className={styles.portGateRecord__tableBody}>
-            <SeamlessScroll list={records} step={0.5}>
-              {records.map((item, index) => (
-                <div key={index} className={styles.portGateRecord__row}>
-                  <div className={styles.portGateRecord__cell}>
-                    {activeTab === 0 ? item.USERNAME : item.LICENSE_PLATE}
+          <div className={styles.portGateRecord__table}>
+            <div className={styles.portGateRecord__row}>
+              <div className={styles.portGateRecord__cell}>
+                {activeTab === 0 ? "人员" : "车牌"}
+              </div>
+              <div className={styles.portGateRecord__cell}>时间</div>
+              <div className={styles.portGateRecord__cell}>状态</div>
+              <div className={styles.portGateRecord__cell}>闸机名称</div>
+            </div>
+            <div className={styles.portGateRecord__tableBody}>
+              <SeamlessScroll list={records} step={0.5}>
+                {records.map((item, index) => (
+                  <div key={index} className={styles.portGateRecord__row}>
+                    <div className={styles.portGateRecord__cell}>
+                      {activeTab === 0 ? item.personName : item.carNum}
+                    </div>
+                    <div className={styles.portGateRecord__cell}>{item.swingTime}</div>
+                    <div
+                      className={[styles.portGateRecord__cell, activeTab === 0 && item.enterOrExit === 1 ? styles.portGateRecord__cellGreen : ""].filter(Boolean).join(" ")}
+                    >
+                      {activeTab === 0
+                        ? item.enterOrExit === 1
+                          ? "进入"
+                          : "出港"
+                        : item.enterOrExit === 1
+                          ? "进场"
+                          : "出场"}
+                    </div>
+                    <div
+                      className={[styles.portGateRecord__cell, activeTab === 0 && item.enterOrExit === 1 ? styles.portGateRecord__cellYellow : ""].filter(Boolean).join(" ")}
+                    >
+                      {item.gateName}
+                    </div>
                   </div>
-                  <div className={styles.portGateRecord__cell}>{item.TIME}</div>
-                  <div
-                    className={[styles.portGateRecord__cell, activeTab === 0 && item.STATE === "0" ? styles.portGateRecord__cellGreen : ""].filter(Boolean).join(" ")}
-                  >
-                    {activeTab === 0
-                      ? item.STATE === "0"
-                        ? "进入"
-                        : "出港"
-                      : item.STATE === "0"
-                        ? "进场"
-                        : "出场"}
-                  </div>
-                  <div
-                    className={[styles.portGateRecord__cell, activeTab === 0 && item.STATE === "0" ? styles.portGateRecord__cellYellow : ""].filter(Boolean).join(" ")}
-                  >
-                    {activeTab === 0 ? item.EQUIPMENTNAME : item.COMING_REASON}
-                  </div>
-                </div>
-              ))}
-            </SeamlessScroll>
+                ))}
+              </SeamlessScroll>
+            </div>
           </div>
         </div>
-      </div>
+      </Spin>
     </Panel>
   );
 }
 
-export default GateRecordPanel;
+export default Connect([NS_BI_STATISTICS], true)(GateRecordPanel);