feat(map): portIndex对接接口

src/api/bi/index.js

@@ -44,3 +44,15 @@ export const getKeyProjectLargeScreenStatistics = declareRequest(
   "indexInfoKeyProjectLoading",
   "Post > @/keyProject/keyProject/largeScreenStatistics",
 );
+export const getRiskPointCorpRiskLevel = declareRequest(
+  "portIndexRiskLoading",
+  "Post > @/risk/riskPoint/corpRiskLevel",
+);
+export const getCorpInfoCorpUserSummary = declareRequest(
+  "portIndexBasicInfoSummaryLoading",
+  "Post > @/basicInfo/corpInfo/corpUserSummary",
+);
+export const getCorpInfoCorpUserStatisticPage = declareRequest(
+  "portIndexBasicInfoStatisticPageLoading",
+  "Post > @/basicInfo/corpInfo/corpUserStatisticPage",
+);

src/pages/Container/Map/components/CenterUtils/index.js

@@ -1,5 +1,5 @@
 import { AnimatePresence, motion } from "motion/react";
-import { useContext, useState } from "react";
+import { useContext } from "react";
 import statisticsTitleImg from "~/assets/images/map_bi/center_utils/statistics_title.png";
 import guangImg from "~/assets/images/map_bi/center_utils/tabguang.png";
 import tabLeftImg from "~/assets/images/map_bi/center_utils/tableft.png";
@@ -43,24 +43,22 @@ const statisticAnimation = {
 };
 
 function CenterUtils() {
-  const { currentPort, currentBranchOffice, pureMap, mapMethods, actions } = useContext(Context);
+  const { currentPort, currentBranchOffice, pureMap, mapMethods, actions, portArea } = useContext(Context);
 
   const list = [
     { label: "秦皇岛西", portArea: 3 },
     { label: "秦皇岛港区", portArea: 1 },
     { label: "秦皇岛东", portArea: 2 },
   ];
-  const [activePortArea, setActivePortArea] = useState(1);
 
   const isVisible = currentPort === "00003" && !currentBranchOffice && !pureMap;
 
-  const onChangePortArea = (portArea) => {
+  const onChangePortArea = (currentSelectPortArea) => {
-    if (portArea === activePortArea)
+    if (portArea === currentSelectPortArea)
       return;
-    setActivePortArea(portArea);
+    actions.setPortArea(currentSelectPortArea);
-    actions.setPortArea(portArea);
     mapMethods.current.removeBranchOfficePoint();
-    mapMethods.current.addBranchOfficePoint(portArea);
+    mapMethods.current.addBranchOfficePoint(currentSelectPortArea);
     actions.resetBottomUtils();
   };
 
@@ -79,7 +77,7 @@ function CenterUtils() {
                   key={index}
                   className={`option option${index}`}
                   style={{
-                    backgroundImage: `url(${activePortArea === item.portArea
+                    backgroundImage: `url(${portArea === item.portArea
                       ? [tabLeftOnImg, tabMidOnImg, tabRightOnImg][index]
                       : [tabLeftImg, tabMidImg, tabRightImg][index]})`,
                   }}
@@ -91,7 +89,7 @@ function CenterUtils() {
             </div>
             <div className="statistics">
               <AnimatePresence>
-                {[1, 3].includes(activePortArea) && (
+                {[1, 3].includes(portArea) && (
                   <motion.div key="west" {...statisticAnimation}>
                     <div className="statistic">
                       <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>西港区</div>
@@ -104,7 +102,7 @@ function CenterUtils() {
                 )}
               </AnimatePresence>
               <AnimatePresence>
-                {[1, 2].includes(activePortArea) && (
+                {[1, 2].includes(portArea) && (
                   <motion.div key="east" {...statisticAnimation}>
                     <div className="statistic">
                       <div className="title" style={{ backgroundImage: `url(${statisticsTitleImg})` }}>东港区</div>

src/pages/Container/Map/components/Content/index.js

@@ -41,14 +41,14 @@ const panelAnimation = side => ({
 });
 
 function Content(props) {
-  const { currentPort, currentBranchOffice, pureMap, bottomUtilsCurrentIndex } = useContext(Context);
+  const { currentPort, currentBranchOffice, pureMap, bottomUtilsCurrentIndex, portArea } = useContext(Context);
   const [isLeftCollapsed, setIsLeftCollapsed] = useState(false);
   const [isRightCollapsed, setIsRightCollapsed] = useState(false);
 
   const bottomUtilsCurrentType = currentBranchOffice
     ? branchOfficeUtilsList[bottomUtilsCurrentIndex]?.type || ""
     : portUtilsList[bottomUtilsCurrentIndex]?.type || "";
-  const contentKey = `${currentPort}_${currentBranchOffice}_${bottomUtilsCurrentIndex}`;
+  const contentKey = `${currentPort}_${currentBranchOffice}_${bottomUtilsCurrentIndex}_${portArea}`;
   const pageKey = `${currentPort}_${currentBranchOffice}`;
   const isPortContent = currentPort === "00003" && !currentBranchOffice;
   const [leftButtonKey, setLeftButtonKey] = useState(bottomUtilsCurrentIndex);

src/pages/Container/Map/components/Content/port/Index/index.js

@@ -1,4 +1,6 @@
-import { useContext, useState } from "react";
+import { Connect } from "@cqsjjb/jjb-dva-runtime";
+import { Spin } from "antd";
+import { useContext, useEffect, useState } from "react";
 import CountUp from "react-countup";
 import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
 import img2_1 from "~/assets/images/map_bi/content/img2_1.png";
@@ -13,14 +15,15 @@ import img5 from "~/assets/images/map_bi/content/img5.png";
 import oval from "~/assets/images/map_bi/content/oval.png";
 import navTitleOn from "~/assets/images/map_bi/content/title.png";
 import navTitle from "~/assets/images/map_bi/content/title_on.png";
+import { NS_BI } from "~/enumerate/namespace";
 import Title from "~/pages/Container/Map/components/Content/port/Title";
 import { Context } from "~/pages/Container/Map/js/context";
 import "./index.less";
 
 const block3OptionsNavList = ["分公司统计", "相关方单位统计"];
 
-function Index() {
+function Index(props) {
-  const { currentPort, portArea, currentBranchOffice } = useContext(Context);
+  const { portArea } = useContext(Context);
 
   const [block1OptionsList, setBlock1OptionsList] = useState([
     { label: "分公司企业数", img: img3, count: 0 },
@@ -36,40 +39,67 @@ function Index() {
   ]);
 
   const [block3Index, setBlock3Index] = useState(0);
-  const [block3List, setBlock3List] = useState([
+  const [block3List, setBlock3List] = useState([]);
-    { CORP_NAME: "秦皇岛港新益港务有限公司12", count: 197, allDeptCount: 74 },
+  const [isShow, setIsShow] = useState(false);
-    { CORP_NAME: "1122公司测试隐患考评", count: 1, allDeptCount: 1 },
+
-    { CORP_NAME: "秦港股份二公司", count: 872, allDeptCount: 73 },
+  const getCorpInfoCorpUserSummary = async () => {
-    { CORP_NAME: "秦港股份六公司", count: 1008, allDeptCount: 86 },
+    const { data } = await props.getCorpInfoCorpUserSummary({ portArea });
-    { CORP_NAME: "秦港股份七公司", count: 1168, allDeptCount: 76 },
+    setBlock1OptionsList((prevState) => {
-    { CORP_NAME: "秦港股份九公司", count: 785, allDeptCount: 51 },
+      prevState[0].count = data.branchCorpCount;
-    { CORP_NAME: "秦港股份杂货公司", count: 771, allDeptCount: 78 },
+      prevState[1].count = data.relatedCorpCount;
-    { CORP_NAME: "秦港股份铁运公司", count: 578, allDeptCount: 41 },
+      prevState[2].count = data.userCount;
-    { CORP_NAME: "秦港股份流机公司", count: 671, allDeptCount: 87 },
+      return [...prevState];
-    { CORP_NAME: "秦港股份电力公司", count: 364, allDeptCount: 43 },
+    });
-    { CORP_NAME: "秦港股份船舶公司", count: 433, allDeptCount: 39 },
+  };
-    { CORP_NAME: "秦港股份综服中心", count: 655, allDeptCount: 70 },
+
-    { CORP_NAME: "秦港物资中心", count: 153, allDeptCount: 25 },
+  const getRiskPointCorpRiskLevel = async () => {
-    { CORP_NAME: "秦港教培中心", count: 52, allDeptCount: 12 },
+    const { data } = await props.getRiskPointCorpRiskLevel({ portArea });
-    { CORP_NAME: "秦港行政中心", count: 18, allDeptCount: 7 },
+    setBlock2OptionsList((prevState) => {
-    { CORP_NAME: "秦港餐饮中心", count: 96, allDeptCount: 29 },
+      for (let i = 0; i < data.length; i++) {
-    { CORP_NAME: "工程项目中心", count: 12, allDeptCount: 5 },
+        switch (data[i].level) {
-    { CORP_NAME: "秦港技术中心", count: 50, allDeptCount: 7 },
+          case "levelD":
-    { CORP_NAME: "河北港口集团数联科技（雄安）有限公司", count: 15, allDeptCount: 5 },
+            prevState[3].count = data[i].count;
-    { CORP_NAME: "秦港新闻中心", count: 1, allDeptCount: 1 },
+            break;
-  ]);
+          case "levelC":
+            prevState[2].count = data[i].count;
+            break;
+          case "levelB":
+            prevState[1].count = data[i].count;
+            break;
+          case "levelA":
+            prevState[0].count = data[i].count;
+            break;
+        }
+      }
+      return [...prevState];
+    });
+  };
+
+  const getCorpInfoCorpUserStatisticPage = async (enterpriseType) => {
+    const { data } = await props.getCorpInfoCorpUserStatisticPage({ portArea, enterpriseType });
+    setBlock3List(data);
+    setIsShow(true);
+  };
 
   const block3OptionsClick = (index) => {
     if (index === block3Index)
       return;
+    setIsShow(false);
     setBlock3Index(index);
-    setBlock3List([]);
+    getCorpInfoCorpUserStatisticPage(index === 0 ? 2 : 3);
   };
 
+  useEffect(() => {
+    getCorpInfoCorpUserSummary();
+    getRiskPointCorpRiskLevel();
+    getCorpInfoCorpUserStatisticPage(2);
+  }, []);
+
   return (
     <div className="port_index">
       <div className="block1">
         <Title title="单位基础信息" />
+        <Spin spinning={props.bi.portIndexBasicInfoSummaryLoading}>
           <div className="options">
             {block1OptionsList.map((item, index) => (
               <div key={index} className="option">
@@ -82,10 +112,12 @@ function Index() {
               </div>
             ))}
           </div>
+        </Spin>
       </div>
 
       <div className="block2">
         <Title title="风险区域统计" />
+        <Spin spinning={props.bi.portIndexRiskLoading}>
           <div className="options">
             {block2OptionsList.map((item, index) => (
               <div key={index} className="option">
@@ -100,6 +132,7 @@ function Index() {
               </div>
             ))}
           </div>
+        </Spin>
       </div>
 
       <div className="block3">
@@ -124,19 +157,21 @@ function Index() {
               <div className="td">人员数</div>
             </div>
             <div className="scroll">
+              <Spin spinning={props.bi.portIndexBasicInfoStatisticPageLoading}>
+                {
+                  isShow && (
                     <SeamlessScroll list={block3List} step={0.5}>
                       {block3List.map((item, index) => (
                         <div key={index} className="tr">
-                    <div className="td">
+                          <div className="td">{item.corpName}</div>
-                      {block3Index === 0 ? item.CORP_NAME : item.RELEVANT_UNIT_NAME}
+                          <div className="td">{item.departmentCount}</div>
-                    </div>
+                          <div className="td">{item.userCount}</div>
-                    <div className="td">
-                      {block3Index === 0 ? item.allDeptCount - 1 : item.allDeptCount}
-                    </div>
-                    <div className="td">{item.count}</div>
                         </div>
                       ))}
                     </SeamlessScroll>
+                  )
+                }
+              </Spin>
             </div>
           </div>
         </div>
@@ -145,4 +180,4 @@ function Index() {
   );
 }
 
-export default Index;
+export default Connect([NS_BI], true)(Index);

src/pages/Container/Map/js/context.js

@@ -7,7 +7,7 @@ export const initialMapState = {
   coverMaskVisible: false,
   currentPort: "",
   currentBranchOffice: "",
-  portArea: "",
+  portArea: 1,
   bottomUtilsCurrentIndex: "",
   pureMap: false,
   headerTitle: "秦港股份安全监管平台",