From 18a7123259596bda25278789656415df9b3148c9 Mon Sep 17 00:00:00 2001 From: LiuJiaNan <15703339975@163.com> Date: Mon, 20 Jul 2026 17:47:02 +0800 Subject: [PATCH] =?UTF-8?q?feat(map):=20portIndex=E5=AF=B9=E6=8E=A5?= =?UTF-8?q?=E6=8E=A5=E5=8F=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/bi/index.js | 12 ++ .../Map/components/CenterUtils/index.js | 20 +-- .../Container/Map/components/Content/index.js | 4 +- .../components/Content/port/Index/index.js | 165 +++++++++++------- src/pages/Container/Map/js/context.js | 2 +- 5 files changed, 124 insertions(+), 79 deletions(-) diff --git a/src/api/bi/index.js b/src/api/bi/index.js index 3af0fa7..cfc4518 100644 --- a/src/api/bi/index.js +++ b/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", +); diff --git a/src/pages/Container/Map/components/CenterUtils/index.js b/src/pages/Container/Map/components/CenterUtils/index.js index ec45c59..b492429 100644 --- a/src/pages/Container/Map/components/CenterUtils/index.js +++ b/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) => { - if (portArea === activePortArea) + const onChangePortArea = (currentSelectPortArea) => { + if (portArea === currentSelectPortArea) return; - setActivePortArea(portArea); - actions.setPortArea(portArea); + actions.setPortArea(currentSelectPortArea); 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() {
- {[1, 3].includes(activePortArea) && ( + {[1, 3].includes(portArea) && (
西港区
@@ -104,7 +102,7 @@ function CenterUtils() { )} - {[1, 2].includes(activePortArea) && ( + {[1, 2].includes(portArea) && (
东港区
diff --git a/src/pages/Container/Map/components/Content/index.js b/src/pages/Container/Map/components/Content/index.js index 705bbc8..e4d4925 100644 --- a/src/pages/Container/Map/components/Content/index.js +++ b/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); diff --git a/src/pages/Container/Map/components/Content/port/Index/index.js b/src/pages/Container/Map/components/Content/port/Index/index.js index c124a9a..260268f 100644 --- a/src/pages/Container/Map/components/Content/port/Index/index.js +++ b/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() { - const { currentPort, portArea, currentBranchOffice } = useContext(Context); +function Index(props) { + const { portArea } = useContext(Context); const [block1OptionsList, setBlock1OptionsList] = useState([ { label: "分公司企业数", img: img3, count: 0 }, @@ -36,70 +39,100 @@ function Index() { ]); const [block3Index, setBlock3Index] = useState(0); - const [block3List, setBlock3List] = useState([ - { CORP_NAME: "秦皇岛港新益港务有限公司12", count: 197, allDeptCount: 74 }, - { CORP_NAME: "1122公司测试隐患考评", count: 1, allDeptCount: 1 }, - { CORP_NAME: "秦港股份二公司", count: 872, allDeptCount: 73 }, - { CORP_NAME: "秦港股份六公司", count: 1008, allDeptCount: 86 }, - { CORP_NAME: "秦港股份七公司", count: 1168, allDeptCount: 76 }, - { CORP_NAME: "秦港股份九公司", count: 785, allDeptCount: 51 }, - { CORP_NAME: "秦港股份杂货公司", count: 771, allDeptCount: 78 }, - { CORP_NAME: "秦港股份铁运公司", count: 578, allDeptCount: 41 }, - { CORP_NAME: "秦港股份流机公司", count: 671, allDeptCount: 87 }, - { CORP_NAME: "秦港股份电力公司", count: 364, allDeptCount: 43 }, - { CORP_NAME: "秦港股份船舶公司", count: 433, allDeptCount: 39 }, - { CORP_NAME: "秦港股份综服中心", count: 655, allDeptCount: 70 }, - { CORP_NAME: "秦港物资中心", count: 153, allDeptCount: 25 }, - { CORP_NAME: "秦港教培中心", count: 52, allDeptCount: 12 }, - { CORP_NAME: "秦港行政中心", count: 18, allDeptCount: 7 }, - { CORP_NAME: "秦港餐饮中心", count: 96, allDeptCount: 29 }, - { CORP_NAME: "工程项目中心", count: 12, allDeptCount: 5 }, - { CORP_NAME: "秦港技术中心", count: 50, allDeptCount: 7 }, - { CORP_NAME: "河北港口集团数联科技（雄安）有限公司", count: 15, allDeptCount: 5 }, - { CORP_NAME: "秦港新闻中心", count: 1, allDeptCount: 1 }, - ]); + const [block3List, setBlock3List] = useState([]); + const [isShow, setIsShow] = useState(false); + + const getCorpInfoCorpUserSummary = async () => { + const { data } = await props.getCorpInfoCorpUserSummary({ portArea }); + setBlock1OptionsList((prevState) => { + prevState[0].count = data.branchCorpCount; + prevState[1].count = data.relatedCorpCount; + prevState[2].count = data.userCount; + return [...prevState]; + }); + }; + + const getRiskPointCorpRiskLevel = async () => { + const { data } = await props.getRiskPointCorpRiskLevel({ portArea }); + setBlock2OptionsList((prevState) => { + for (let i = 0; i < data.length; i++) { + switch (data[i].level) { + case "levelD": + prevState[3].count = data[i].count; + 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="options"> - {block1OptionsList.map((item, index) => ( - <div key={index} className="option"> - <img src={item.img} className="img_top" alt="" /> - <img className="img_bottom" src={oval} alt="" /> - <div className="label">{item.label}</div> - <div className="count"> - <CountUp end={+item.count} /> - </div> - </div> - ))} - </div> - </div> - - <div className="block2"> - <Title title="风险区域统计" /> - <div className="options"> - {block2OptionsList.map((item, index) => ( - <div key={index} className="option"> - <img src={item.img} className="img" alt="" /> - <img src={item.bg_img} className="img_bg" alt="" /> - <div> + <Spin spinning={props.bi.portIndexBasicInfoSummaryLoading}> + <div className="options"> + {block1OptionsList.map((item, index) => ( + <div key={index} className="option"> + <img src={item.img} className="img_top" alt="" /> + <img className="img_bottom" src={oval} alt="" /> <div className="label">{item.label}</div> <div className="count"> <CountUp end={+item.count} /> </div> </div> - </div> - ))} - </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"> + <img src={item.img} className="img" alt="" /> + <img src={item.bg_img} className="img_bg" alt="" /> + <div> + <div className="label">{item.label}</div> + <div className="count"> + <CountUp end={+item.count} /> + </div> + </div> + </div> + ))} + </div> + </Spin> </div> <div className="block3"> @@ -124,19 +157,21 @@ function Index() { <div className="td">人员数</div> </div> <div className="scroll"> - <SeamlessScroll list={block3List} step={0.5}> - {block3List.map((item, index) => ( - <div key={index} className="tr"> - <div className="td"> - {block3Index === 0 ? item.CORP_NAME : item.RELEVANT_UNIT_NAME} - </div> - <div className="td"> - {block3Index === 0 ? item.allDeptCount - 1 : item.allDeptCount} - </div> - <div className="td">{item.count}</div> - </div> - ))} - </SeamlessScroll> + <Spin spinning={props.bi.portIndexBasicInfoStatisticPageLoading}> + { + isShow && ( + <SeamlessScroll list={block3List} step={0.5}> + {block3List.map((item, index) => ( + <div key={index} className="tr"> + <div className="td">{item.corpName}</div> + <div className="td">{item.departmentCount}</div> + <div className="td">{item.userCount}</div> + </div> + ))} + </SeamlessScroll> + ) + } + </Spin> </div> </div> </div> @@ -145,4 +180,4 @@ function Index() { ); } -export default Index; +export default Connect([NS_BI], true)(Index); diff --git a/src/pages/Container/Map/js/context.js b/src/pages/Container/Map/js/context.js index 9abcb0d..cc80b88 100644 --- a/src/pages/Container/Map/js/context.js +++ b/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: "秦港股份安全监管平台",