refactor(map): 对接接口 港区页面下方工具栏去掉封闭区域
LiuJiaNan
parent
4ebf572dbd
commit
6c279d6ba6
|
|
@ -204,3 +204,7 @@ export const getScreenMkmjRecord = declareRequest(
|
|||
"getScreenMkmjRecordLoading",
|
||||
"Post > @/primeport/dashboard/mkmjRecord",
|
||||
);
|
||||
export const getScreenRelatedCorpStatistics = declareRequest(
|
||||
"getScreenRelatedCorpStatisticsLoading",
|
||||
"Post > @/xgfManager/project/relatedCorpStatistics",
|
||||
);
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ import bottomImg10 from "~/assets/images/map_bi/bottom_utils/first/img10.png";
|
|||
import bottomImg10On from "~/assets/images/map_bi/bottom_utils/first/img10_on.png";
|
||||
import bottomImg12 from "~/assets/images/map_bi/bottom_utils/first/img12.png";
|
||||
import bottomImg12On from "~/assets/images/map_bi/bottom_utils/first/img12_on.png";
|
||||
import bottomImg13 from "~/assets/images/map_bi/bottom_utils/first/img13.png";
|
||||
import bottomImg13On from "~/assets/images/map_bi/bottom_utils/first/img13_on.png";
|
||||
// import bottomImg13 from "~/assets/images/map_bi/bottom_utils/first/img13.png";
|
||||
// import bottomImg13On from "~/assets/images/map_bi/bottom_utils/first/img13_on.png";
|
||||
// 二级菜单图片资源
|
||||
import ico1 from "~/assets/images/map_bi/bottom_utils/second/ico1.png";
|
||||
import ico1On from "~/assets/images/map_bi/bottom_utils/second/ico1_on.png";
|
||||
|
|
@ -414,11 +414,11 @@ export const portUtilsList = [
|
|||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
img: bottomImg13,
|
||||
checkImg: bottomImg13On,
|
||||
label: "封闭区域",
|
||||
type: "closedArea",
|
||||
list: [],
|
||||
},
|
||||
// {
|
||||
// img: bottomImg13,
|
||||
// checkImg: bottomImg13On,
|
||||
// label: "封闭区域",
|
||||
// type: "closedArea",
|
||||
// list: [],
|
||||
// },
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,82 +1,28 @@
|
|||
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 records = [
|
||||
{
|
||||
relatedPartyCategory: "承包商",
|
||||
firstLevelUnits: 15,
|
||||
firstLevelPersonnel: 120,
|
||||
secondLevelUnits: 25,
|
||||
secondLevelPersonnel: 320,
|
||||
},
|
||||
{
|
||||
relatedPartyCategory: "供应商",
|
||||
firstLevelUnits: 8,
|
||||
firstLevelPersonnel: 85,
|
||||
secondLevelUnits: 18,
|
||||
secondLevelPersonnel: 210,
|
||||
},
|
||||
{
|
||||
relatedPartyCategory: "分包商",
|
||||
firstLevelUnits: 12,
|
||||
firstLevelPersonnel: 95,
|
||||
secondLevelUnits: 30,
|
||||
secondLevelPersonnel: 450,
|
||||
},
|
||||
{
|
||||
relatedPartyCategory: "监理单位",
|
||||
firstLevelUnits: 5,
|
||||
firstLevelPersonnel: 40,
|
||||
secondLevelUnits: 10,
|
||||
secondLevelPersonnel: 80,
|
||||
},
|
||||
{
|
||||
relatedPartyCategory: "设计单位",
|
||||
firstLevelUnits: 6,
|
||||
firstLevelPersonnel: 55,
|
||||
secondLevelUnits: 12,
|
||||
secondLevelPersonnel: 120,
|
||||
},
|
||||
{
|
||||
relatedPartyCategory: "施工单位",
|
||||
firstLevelUnits: 18,
|
||||
firstLevelPersonnel: 200,
|
||||
secondLevelUnits: 40,
|
||||
secondLevelPersonnel: 680,
|
||||
},
|
||||
{
|
||||
relatedPartyCategory: "检测机构",
|
||||
firstLevelUnits: 3,
|
||||
firstLevelPersonnel: 25,
|
||||
secondLevelUnits: 8,
|
||||
secondLevelPersonnel: 65,
|
||||
},
|
||||
{
|
||||
relatedPartyCategory: "咨询公司",
|
||||
firstLevelUnits: 7,
|
||||
firstLevelPersonnel: 60,
|
||||
secondLevelUnits: 15,
|
||||
secondLevelPersonnel: 180,
|
||||
},
|
||||
{
|
||||
relatedPartyCategory: "运维单位",
|
||||
firstLevelUnits: 9,
|
||||
firstLevelPersonnel: 75,
|
||||
secondLevelUnits: 22,
|
||||
secondLevelPersonnel: 320,
|
||||
},
|
||||
{
|
||||
relatedPartyCategory: "其他单位",
|
||||
firstLevelUnits: 4,
|
||||
firstLevelPersonnel: 35,
|
||||
secondLevelUnits: 14,
|
||||
secondLevelPersonnel: 150,
|
||||
},
|
||||
];
|
||||
|
||||
/** 负责展示相关方单位及其人员统计。 */
|
||||
function RelatedPartyStatsPanel() {
|
||||
function RelatedPartyStatsPanel(props) {
|
||||
const { portArea, currentBranchOffice } = useContext(Context);
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
const { data } = await props.getScreenRelatedCorpStatistics({
|
||||
portArea,
|
||||
corpinfoId: currentBranchOffice,
|
||||
});
|
||||
setData(data || []);
|
||||
};
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Panel
|
||||
title="相关方单位统计"
|
||||
|
|
@ -92,20 +38,22 @@ function RelatedPartyStatsPanel() {
|
|||
<div>二级人数</div>
|
||||
</div>
|
||||
<div className="branch-office-related-party-stats__body">
|
||||
<SeamlessScroll list={records} step={0.5}>
|
||||
{records.map((item, index) => (
|
||||
<div
|
||||
className="branch-office-related-party-stats__row"
|
||||
key={index}
|
||||
>
|
||||
<div>{item.relatedPartyCategory}</div>
|
||||
<div>{item.firstLevelUnits}</div>
|
||||
<div>{item.firstLevelPersonnel}</div>
|
||||
<div>{item.secondLevelUnits}</div>
|
||||
<div>{item.secondLevelPersonnel}</div>
|
||||
</div>
|
||||
))}
|
||||
</SeamlessScroll>
|
||||
<Spin spinning={props.biStatistics.getScreenRelatedCorpStatisticsLoading}>
|
||||
<SeamlessScroll list={data} step={0.5}>
|
||||
{data.map((item, index) => (
|
||||
<div
|
||||
className="branch-office-related-party-stats__row"
|
||||
key={index}
|
||||
>
|
||||
<div>{item.corpTypeName}</div>
|
||||
<div>{item.oneLevelCorpCount}</div>
|
||||
<div>{item.oneLevelUserCount}</div>
|
||||
<div>{item.twoLevelCorpCount}</div>
|
||||
<div>{item.twoLevelUserCount}</div>
|
||||
</div>
|
||||
))}
|
||||
</SeamlessScroll>
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -113,4 +61,4 @@ function RelatedPartyStatsPanel() {
|
|||
);
|
||||
}
|
||||
|
||||
export default RelatedPartyStatsPanel;
|
||||
export default Connect([NS_BI_STATISTICS], true)(RelatedPartyStatsPanel);
|
||||
|
|
|
|||
|
|
@ -1,74 +1,87 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { Spin } from "antd";
|
||||
import { useContext, useEffect, useState } from "react";
|
||||
import gateBackground from "~/assets/images/map_bi/content/bg4.png";
|
||||
import areaBackground from "~/assets/images/map_bi/content/bg5.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 = [
|
||||
{
|
||||
title: "口门进出统计",
|
||||
label1: "人数",
|
||||
label2: "车数",
|
||||
count1: 123,
|
||||
count2: 123,
|
||||
title: "一级口门进出统计",
|
||||
personKey: "oneLevelInoutPersonCount",
|
||||
carKey: "oneLevelInoutCarCount",
|
||||
background: gateBackground,
|
||||
},
|
||||
{
|
||||
title: "进入申请待审批",
|
||||
label1: "人数",
|
||||
label2: "车数",
|
||||
count1: 123,
|
||||
count2: 123,
|
||||
title: "一级口门进出审批",
|
||||
personKey: "oneLevelApprovalPersonCount",
|
||||
carKey: "oneLevelApprovalCarCount",
|
||||
background: gateBackground,
|
||||
},
|
||||
{
|
||||
title: "封闭区域人员情况",
|
||||
label1: "区域数",
|
||||
label2: "人数",
|
||||
count1: 123,
|
||||
count2: 123,
|
||||
title: "封闭区域进出统计",
|
||||
personKey: "closedAreaInoutPersonCount",
|
||||
carKey: "closedAreaInoutCarCount",
|
||||
background: areaBackground,
|
||||
},
|
||||
{
|
||||
title: "封闭区域作业情况",
|
||||
label1: "区域数",
|
||||
label2: "作业数",
|
||||
count1: 123,
|
||||
count2: 123,
|
||||
title: "封闭区域进出审批",
|
||||
personKey: "closedAreaApprovalPersonCount",
|
||||
carKey: "closedAreaApprovalCarCount",
|
||||
background: areaBackground,
|
||||
},
|
||||
];
|
||||
|
||||
/** 负责展示口门和封闭区域的基础统计。 */
|
||||
function GateAndClosedAreaPanel() {
|
||||
/** 查询并展示当前分公司的口门与封闭区域人员、车辆统计。 */
|
||||
function GateAndClosedAreaPanel(props) {
|
||||
const { portArea, currentBranchOffice } = useContext(Context);
|
||||
const [data, setData] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
// 分公司维度必须同时传入所属港区和企业 ID，避免获取到总览数据。
|
||||
const { data } = await props.getScreenRecordStat({
|
||||
portArea,
|
||||
corpinfoId: currentBranchOffice,
|
||||
});
|
||||
setData(data || {});
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Panel title="口门及封闭区域">
|
||||
<div className="branch-office-gate-closed-area__content">
|
||||
{records.map((item, index) => (
|
||||
<div
|
||||
className="branch-office-gate-closed-area__item"
|
||||
key={index}
|
||||
style={{ backgroundImage: `url(${item.background})` }}
|
||||
>
|
||||
<div className="branch-office-gate-closed-area__title">
|
||||
{item.title}
|
||||
</div>
|
||||
<div className="branch-office-gate-closed-area__values">
|
||||
<div>
|
||||
{item.label1}
|
||||
：
|
||||
{item.count1}
|
||||
<Spin spinning={props.biStatistics.getScreenRecordStatLoading}>
|
||||
<div className="branch-office-gate-closed-area__content">
|
||||
{records.map(item => (
|
||||
<div
|
||||
className="branch-office-gate-closed-area__item"
|
||||
key={item.title}
|
||||
style={{ backgroundImage: `url(${item.background})` }}
|
||||
>
|
||||
<div className="branch-office-gate-closed-area__title">
|
||||
{item.title}
|
||||
</div>
|
||||
<div>
|
||||
{item.label2}
|
||||
：
|
||||
{item.count2}
|
||||
<div className="branch-office-gate-closed-area__values">
|
||||
<div>
|
||||
人数：
|
||||
{data[item.personKey] ?? 0}
|
||||
</div>
|
||||
<div>
|
||||
车数：
|
||||
{data[item.carKey] ?? 0}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Spin>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
export default GateAndClosedAreaPanel;
|
||||
export default Connect([NS_BI_STATISTICS], true)(GateAndClosedAreaPanel);
|
||||
|
|
|
|||
|
|
@ -1,35 +1,34 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { useMount } from "ahooks";
|
||||
import { Spin } from "antd";
|
||||
import * as echarts from "echarts";
|
||||
import { useRef, useState } from "react";
|
||||
import { useContext, useRef, useState } from "react";
|
||||
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 = [
|
||||
{ NAME: "零号门", IN: "0", OUT: "0" },
|
||||
{ NAME: "一号门", IN: "15", OUT: "12" },
|
||||
{ NAME: "二号门", IN: "8", OUT: "10" },
|
||||
{ NAME: "三号门", IN: "22", OUT: "18" },
|
||||
{ NAME: "四号门", IN: "5", OUT: "7" },
|
||||
{ NAME: "五号门", IN: "30", OUT: "25" },
|
||||
{ NAME: "六号门", IN: "12", OUT: "14" },
|
||||
{ NAME: "七号门", IN: "18", OUT: "16" },
|
||||
{ NAME: "八号门", IN: "9", OUT: "11" },
|
||||
{ NAME: "九号门", IN: "25", OUT: "20" },
|
||||
];
|
||||
|
||||
/** 负责展示封闭区域进出趋势并管理图表实例生命周期。 */
|
||||
function EntryExitTrendPanel() {
|
||||
function EntryExitTrendPanel(props) {
|
||||
const { portArea, currentBranchOffice } = useContext(Context);
|
||||
|
||||
const [activeIndex, setActiveIndex] = useState(0);
|
||||
const chartInstance = useRef(null);
|
||||
const chartRef = useRef(null);
|
||||
|
||||
// 切换数据类型前释放旧实例，避免同一容器重复初始化 ECharts。
|
||||
const disposeChart = () => {
|
||||
chartInstance.current?.dispose();
|
||||
chartInstance.current = null;
|
||||
};
|
||||
|
||||
const initEcharts = (data) => {
|
||||
chartInstance.current = echarts.init(chartRef.current);
|
||||
|
||||
const inData = data.map(item => Number.parseInt(item.IN));
|
||||
const outData = data.map(item => Number.parseInt(item.OUT));
|
||||
const names = data.map(item => item.NAME);
|
||||
const inData = data.map(item => Number.parseInt(item.inCount));
|
||||
const outData = data.map(item => Number.parseInt(item.outCount));
|
||||
const names = data.map(item => item.mkmjName);
|
||||
|
||||
const option = {
|
||||
tooltip: {
|
||||
|
|
@ -162,18 +161,33 @@ function EntryExitTrendPanel() {
|
|||
|
||||
chartInstance.current.setOption(option);
|
||||
};
|
||||
const loadData = async (mkmjType) => {
|
||||
const { data } = await props.getScreenMkmjRecord({
|
||||
portArea,
|
||||
corpinfoId: currentBranchOffice,
|
||||
mkmjLevel: "2",
|
||||
mkmjType,
|
||||
});
|
||||
initEcharts(data);
|
||||
};
|
||||
|
||||
useMount(() => {
|
||||
initEcharts(records);
|
||||
loadData("1");
|
||||
|
||||
return () => {
|
||||
if (chartInstance.current) {
|
||||
chartInstance.current.dispose();
|
||||
chartInstance.current = null;
|
||||
}
|
||||
disposeChart();
|
||||
};
|
||||
});
|
||||
|
||||
const handleTabClick = (index) => {
|
||||
if (index === activeIndex)
|
||||
return;
|
||||
|
||||
disposeChart();
|
||||
setActiveIndex(index);
|
||||
loadData(index === 0 ? "1" : "2");
|
||||
};
|
||||
|
||||
return (
|
||||
<Panel
|
||||
title="封闭区域进出情况统计"
|
||||
|
|
@ -184,7 +198,7 @@ function EntryExitTrendPanel() {
|
|||
<div
|
||||
className={`branch-office-gate-trend__tab ${index === activeIndex ? "branch-office-gate-trend__tab--active" : ""}`}
|
||||
key={item}
|
||||
onClick={() => setActiveIndex(index)}
|
||||
onClick={() => handleTabClick(index)}
|
||||
>
|
||||
{item}
|
||||
</div>
|
||||
|
|
@ -193,10 +207,12 @@ function EntryExitTrendPanel() {
|
|||
)}
|
||||
>
|
||||
<div className="branch-office-gate-trend__content">
|
||||
<div ref={chartRef} className="branch-office-gate-trend__chart" />
|
||||
<Spin spinning={props.biStatistics.getScreenMkmjRecordLoading}>
|
||||
<div ref={chartRef} className="branch-office-gate-trend__chart" />
|
||||
</Spin>
|
||||
</div>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
export default EntryExitTrendPanel;
|
||||
export default Connect([NS_BI_STATISTICS], true)(EntryExitTrendPanel);
|
||||
|
|
|
|||
Loading…
Reference in New Issue