style(map): branchOffice MenJin 对接统计接口、点位接口、点位详情弹窗

src/api/biStatistics/index.js

@@ -12,9 +12,9 @@ export const getProjectTaskScoreCount = declareRequest(
   "getProjectTaskScoreCountLoading",
   "Get > /domain/projectTask/scoreCount",
 );
-export const getHiddenStatisticsByCorp = declareRequest(
+export const getHiddenStatisticsByPortArea = declareRequest(
-  "getHiddenStatisticsByCorpLoading",
+  "getHiddenStatisticsByPortAreaLoading",
-  "Post > @/hidden/hidden/statisticsByCorp",
+  "Post > @/hidden/hidden/statisticsByPortArea",
 );
 export const getXgfStatisticsListCorpStatistics = declareRequest(
   "getXgfStatisticsListCorpStatisticsLoading",
@@ -120,3 +120,15 @@ export const getPrimeportMkmjStatistics = declareRequest(
   "getPrimeportMkmjStatisticsLoading",
   "Get > /primeport/mkmj/statistics",
 );
+export const getPrimeportClosedAreaCorpStat = declareRequest(
+  "getPrimeportClosedAreaCorpStatLoading",
+  "Post > @/primeport/closedArea/corpStat",
+);
+export const getPrimeportClosedAreaCarApplyScreenList = declareRequest(
+  "getPrimeportClosedAreaCarApplyScreenListLoading",
+  "Post > @/primeport/closedAreaCarApply/screenList",
+);
+export const getPrimeportClosedAreaPersonApplyScreenList = declareRequest(
+  "getPrimeportClosedAreaPersonApplyScreenListLoading",
+  "Post > @/primeport/closedAreaPersonApply/screenList",
+);

src/pages/Container/Map/components/Content/IndexInfo/LeftPanel/RectificationPanel/index.js

@@ -13,7 +13,7 @@ function RectificationPanel(props) {
   const [data, setData] = useState([]);
   useEffect(() => {
     const loadData = async () => {
-      const { data = [] } = await props.getHiddenStatisticsByCorp({
+      const { data = [] } = await props.getHiddenStatisticsByPortArea({
         pageIndex: 1,
         pageSize: 9999,
       });
@@ -27,7 +27,7 @@ function RectificationPanel(props) {
       title="当前各公司隐患整改情况"
       className="index-info-left-panel__rectification"
     >
-      <Spin spinning={props.biStatistics.getHiddenStatisticsByCorpLoading}>
+      <Spin spinning={props.biStatistics.getHiddenStatisticsByPortAreaLoading}>
         <div className="index-info-rectification__table">
           <div
             className="index-info-rectification__header"

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

@@ -1,44 +1,68 @@
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
 import CountUp from "react-countup";
 import closedAreaIcon from "~/assets/images/map_bi/content/ico15.png";
 import vehiclePassageIcon from "~/assets/images/map_bi/content/ico16.png";
 import pedestrianPassageIcon from "~/assets/images/map_bi/content/ico17.png";
 import peopleIcon from "~/assets/images/map_bi/content/ico18.png";
 import cornerIcon from "~/assets/images/map_bi/content/icon32.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 = [
+const statistics = [
-  { label: "封闭区域数", count: 123, icon: closedAreaIcon },
+  { label: "封闭区域数", count: 0, icon: closedAreaIcon, field: "closedAreaCount" },
-  { label: "车行通道数", count: 123, icon: vehiclePassageIcon },
+  { label: "车行通道数", count: 0, icon: vehiclePassageIcon, field: "carPassageCount" },
-  { label: "人行通道数", count: 123, icon: pedestrianPassageIcon },
+  { label: "人行通道数", count: 0, icon: pedestrianPassageIcon, field: "personPassageCount" },
-  { label: "封闭区域当前人数", count: 123, icon: peopleIcon },
+  { label: "封闭区域当前人数", count: 0, icon: peopleIcon },
 ];
 
 /** 负责展示封闭区域及通道基础统计。 */
-function ClosedAreaStatsPanel() {
+function ClosedAreaStatsPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+
+  const [data, setData] = useState(statistics);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const { data = {} } = await props.getPrimeportClosedAreaCorpStat({ portArea, corpinfoId: currentBranchOffice });
+
+      setData(statistics.map(item => ({
+        ...item,
+        count: item.field ? data[item.field] || 0 : item.count,
+      })));
+    };
+
+    loadData();
+  }, []);
+
   return (
     <Panel title="封闭区域统计">
-      <div className="branch-office-gate-stats__content">
+      <Spin spinning={props.biStatistics.getPrimeportClosedAreaCorpStatLoading}>
-        {records.map(item => (
+        <div className="branch-office-gate-stats__content">
-          <div className="branch-office-gate-stats__item" key={item.label}>
+          {data.map(item => (
-            <div className="branch-office-gate-stats__image">
+            <div className="branch-office-gate-stats__item" key={item.label}>
-              <img src={item.icon} alt="" />
+              <div className="branch-office-gate-stats__image">
-            </div>
+                <img src={item.icon} alt="" />
-            <div className="branch-office-gate-stats__info">
-              <div className="branch-office-gate-stats__label">
-                {item.label}
               </div>
-              <div className="branch-office-gate-stats__count">
+              <div className="branch-office-gate-stats__info">
-                <CountUp end={+item.count} />
+                <div className="branch-office-gate-stats__label">
+                  {item.label}
+                </div>
+                <div className="branch-office-gate-stats__count">
+                  <CountUp end={+item.count} />
+                </div>
               </div>
+              <Corner className="branch-office-gate-stats__corner--top-left" />
+              <Corner className="branch-office-gate-stats__corner--top-right" />
+              <Corner className="branch-office-gate-stats__corner--bottom-left" />
+              <Corner className="branch-office-gate-stats__corner--bottom-right" />
             </div>
-            <Corner className="branch-office-gate-stats__corner--top-left" />
+          ))}
-            <Corner className="branch-office-gate-stats__corner--top-right" />
+        </div>
-            <Corner className="branch-office-gate-stats__corner--bottom-left" />
+      </Spin>
-            <Corner className="branch-office-gate-stats__corner--bottom-right" />
-          </div>
-        ))}
-      </div>
     </Panel>
   );
 }
@@ -52,4 +76,4 @@ function Corner({ className }) {
   );
 }
 
-export default ClosedAreaStatsPanel;
+export default Connect([NS_BI_STATISTICS], true)(ClosedAreaStatsPanel);

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

@@ -1,75 +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 { 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 = [
-  {
-    permissionRange: "A区",
-    status: "1",
-    applicant: "张三",
-    approver: "李主管",
-  },
-  {
-    permissionRange: "B区",
-    status: "1",
-    applicant: "李四",
-    approver: "王经理",
-  },
-  {
-    permissionRange: "C区",
-    status: "1",
-    applicant: "王五",
-    approver: "赵主任",
-  },
-  {
-    permissionRange: "D区",
-    status: "0",
-    applicant: "赵六",
-    approver: "钱总监",
-  },
-  {
-    permissionRange: "E区",
-    status: "0",
-    applicant: "钱七",
-    approver: "孙部长",
-  },
-  {
-    permissionRange: "F区",
-    status: "0",
-    applicant: "孙八",
-    approver: "周经理",
-  },
-  {
-    permissionRange: "G区",
-    status: "0",
-    applicant: "周九",
-    approver: "吴主任",
-  },
-  {
-    permissionRange: "H区",
-    status: "1",
-    applicant: "吴十",
-    approver: "郑主管",
-  },
-  {
-    permissionRange: "I区",
-    status: "0",
-    applicant: "郑一",
-    approver: "王总监",
-  },
-  {
-    permissionRange: "J区",
-    status: "1",
-    applicant: "王二",
-    approver: "张部长",
-  },
-];
 
 /** 负责展示口门申请记录及人员、车辆分类标签状态。 */
-function GateApplicationPanel() {
+function GateApplicationPanel(props) {
+  const { portArea, currentBranchOffice } = useContext(Context);
+
   const [activeIndex, setActiveIndex] = useState(0);
+  const [data, setData] = useState([]);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const loadData = async (activeIndex) => {
+    setIsVisible(false);
+    const { data = [] } = await props[activeIndex === 1 ? "getPrimeportClosedAreaCarApplyScreenList" : "getPrimeportClosedAreaPersonApplyScreenList"]({
+      pageIndex: 1,
+      pageSize: 9999,
+      portArea,
+      corpinfoId: currentBranchOffice,
+    });
+    setData(data);
+    setIsVisible(true);
+  };
+
+  const handleTabClick = (index) => {
+    if (index === activeIndex)
+      return;
+
+    setActiveIndex(index);
+    loadData(index);
+  };
+
+  useEffect(() => {
+    loadData(activeIndex);
+  }, []);
 
   return (
     <Panel
@@ -81,7 +51,7 @@ function GateApplicationPanel() {
             <div
               className={`branch-office-gate-application__tab ${index === activeIndex ? "branch-office-gate-application__tab--active" : ""}`}
               key={item}
-              onClick={() => setActiveIndex(index)}
+              onClick={() => handleTabClick(index)}
             >
               {item}
             </div>
@@ -92,29 +62,29 @@ function GateApplicationPanel() {
       <div className="branch-office-gate-application__content">
         <div className="branch-office-gate-application__table">
           <div className="branch-office-gate-application__row">
-            <div>权限范围</div>
-            <div>申请类型</div>
             <div>申请人</div>
-            <div>审批人</div>
+            <div>申请口门</div>
+            <div>开始时间</div>
+            <div>结束时间</div>
           </div>
           <div className="branch-office-gate-application__body">
-            <SeamlessScroll list={records} step={0.5}>
+            <Spin spinning={props.biStatistics.getPrimeportClosedAreaCarApplyScreenListLoading || props.biStatistics.getPrimeportClosedAreaPersonApplyScreenListLoading}>
-              {records.map((item, index) => (
+              {isVisible && (
-                <div
+                <SeamlessScroll list={data} step={0.5}>
-                  className="branch-office-gate-application__row"
+                  {data.map((item, index) => (
-                  key={index}
+                    <div
-                >
+                      className="branch-office-gate-application__row"
-                  <div>{item.permissionRange}</div>
+                      key={index}
-                  <div
+                    >
-                    className={`branch-office-gate-application__type branch-office-gate-application__type--${item.status}`}
+                      <div>{item.applyUserName}</div>
-                  >
+                      <div>{item.levelOneMkmjName}</div>
-                    {item.status === "1" ? "临时" : "长期"}
+                      <div>{item.visitStartTime}</div>
-                  </div>
+                      <div>{item.visitEndTime}</div>
-                  <div>{item.applicant}</div>
+                    </div>
-                  <div>{item.approver}</div>
+                  ))}
-                </div>
+                </SeamlessScroll>
-              ))}
+              )}
-            </SeamlessScroll>
+            </Spin>
           </div>
         </div>
       </div>
@@ -122,4 +92,4 @@ function GateApplicationPanel() {
   );
 }
 
-export default GateApplicationPanel;
+export default Connect([NS_BI_STATISTICS], true)(GateApplicationPanel);

src/pages/Container/Map/components/Content/branchOffice/MenJin/GateApplicationPanel/index.less

@@ -36,7 +36,7 @@
   background-color: rgba(42, 86, 158, 0.53);
 }
 
-.branch-office-gate-application__body
+.branch-office-gate-application__body,
 .branch-office-gate-application__row:nth-child(odd) {
   background-color: transparent;
 }
@@ -47,7 +47,3 @@
   font-size: 12px;
   text-align: center;
 }
-
-.branch-office-gate-application__row .branch-office-gate-application__type--1 {
-  color: #fc6b13;
-}

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

@@ -1,4 +1,5 @@
 import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
 import { useContext, useEffect, useState } from "react";
 import gateIcon from "~/assets/images/map_bi/content/img7.png";
 import barrierIcon from "~/assets/images/map_bi/content/img8.png";
@@ -40,27 +41,29 @@ function GateStatsPanel(props) {
 
   return (
     <Panel title="口门统计">
-      <div className="port-gate-stats__options">
+      <Spin spinning={props.biStatistics.getPrimeportMkmjStatisticsLoading}>
-        {data.map((item, index) => (
+        <div className="port-gate-stats__options">
-          <div key={index} className="port-gate-stats__option">
+          {data.map((item, index) => (
-            <img src={item.image} className="port-gate-stats__image" alt="" />
+            <div key={index} className="port-gate-stats__option">
-            <div className="port-gate-stats__info">
+              <img src={item.image} className="port-gate-stats__image" alt="" />
-              <div>
+              <div className="port-gate-stats__info">
-                口门数：
+                <div>
-                {item.gateCount}
+                  口门数：
-              </div>
+                  {item.gateCount}
-              <div>
+                </div>
-                车闸机数：
+                <div>
-                {item.vehicleGateCount}
+                  车闸机数：
-              </div>
+                  {item.vehicleGateCount}
-              <div>
+                </div>
-                人闸机数：
+                <div>
-                {item.peopleGateCount}
+                  人闸机数：
+                  {item.peopleGateCount}
+                </div>
               </div>
             </div>
-          </div>
+          ))}
-        ))}
+        </div>
-      </div>
+      </Spin>
     </Panel>
   );
 }