feat(map): portIndex对接接口
LiuJiaNan
parent
0bc668f56f
commit
18a7123259
|
|
@ -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",
|
||||
);
|
||||
|
|
|
|||
|
|
@ -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() {
|
|||
</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>
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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="port_index">
|
||||
<div className="block1">
|
||||
<Title title="单位基础信息" />
|
||||
<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);
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@ export const initialMapState = {
|
|||
coverMaskVisible: false,
|
||||
currentPort: "",
|
||||
currentBranchOffice: "",
|
||||
portArea: "",
|
||||
portArea: 1,
|
||||
bottomUtilsCurrentIndex: "",
|
||||
pureMap: false,
|
||||
headerTitle: "秦港股份安全监管平台",
|
||||
|
|
|
|||
Loading…
Reference in New Issue