refactor(map): 对接接口
LiuJiaNan
parent
dbe87198b2
commit
4ebf572dbd
|
|
@ -188,3 +188,19 @@ export const getScreenFireCheckList = declareRequest(
|
|||
"getScreenFireCheckListLoading",
|
||||
"Post > @/fireCheck/fireCheckList/screen/list",
|
||||
);
|
||||
export const getScreenPersonLocationList = declareRequest(
|
||||
"getScreenPersonLocationListLoading",
|
||||
"Post > @/personnelPosition/bi/personLocation/companyPositioning/list",
|
||||
);
|
||||
export const getScreenLargeScreenInfo = declareRequest(
|
||||
"getScreenLargeScreenInfoLoading",
|
||||
"Post > @/keyProject/keyProject/largeScreenInfo",
|
||||
);
|
||||
export const getScreenRecordStat = declareRequest(
|
||||
"getScreenRecordStatLoading",
|
||||
"Post > @/primeport/dashboard/recordStat",
|
||||
);
|
||||
export const getScreenMkmjRecord = declareRequest(
|
||||
"getScreenMkmjRecordLoading",
|
||||
"Post > @/primeport/dashboard/mkmjRecord",
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,38 +1,62 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { Spin } from "antd";
|
||||
import { useEffect, useState } from "react";
|
||||
import closedBackground from "~/assets/images/public/bigScreen/bg11.png";
|
||||
import gateBackground from "~/assets/images/public/bigScreen/bg12.png";
|
||||
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
||||
import Panel from "../../Panel";
|
||||
import "./index.less";
|
||||
|
||||
/** 展示当前口门与封闭区的固定统计信息。 */
|
||||
function GatePanel() {
|
||||
/** 查询并展示当前口门与封闭区的人员、车辆统计。 */
|
||||
function GatePanel(props) {
|
||||
const [data, setData] = useState({});
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
const { data } = await props.getScreenRecordStat();
|
||||
setData(data || {});
|
||||
};
|
||||
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const items = [
|
||||
["一级口门进出统计", gateBackground],
|
||||
["一级口门进出审批", gateBackground],
|
||||
["封闭区域进出统计", closedBackground],
|
||||
["封闭区域进出审批", closedBackground],
|
||||
["一级口门进出统计", gateBackground, "oneLevelInoutPersonCount", "oneLevelInoutCarCount"],
|
||||
["一级口门进出审批", gateBackground, "oneLevelApprovalPersonCount", "oneLevelApprovalCarCount"],
|
||||
["封闭区域进出统计", closedBackground, "closedAreaInoutPersonCount", "closedAreaInoutCarCount"],
|
||||
["封闭区域进出审批", closedBackground, "closedAreaApprovalPersonCount", "closedAreaApprovalCarCount"],
|
||||
];
|
||||
|
||||
return (
|
||||
<Panel
|
||||
title="当前口门、封闭区情况"
|
||||
className="index-info-right-panel__gate"
|
||||
>
|
||||
<Spin spinning={props.biStatistics.getScreenRecordStatLoading}>
|
||||
<div className="index-info-gate__list">
|
||||
{items.map(([title, background]) => (
|
||||
{items.map(([title, background, personKey, carKey], index) => (
|
||||
<div
|
||||
className="index-info-gate__item"
|
||||
style={{ backgroundImage: `url(${background})` }}
|
||||
key={title}
|
||||
key={index}
|
||||
>
|
||||
<strong>{title}</strong>
|
||||
<div>
|
||||
<span>人数：2100</span>
|
||||
<span>车数：1125</span>
|
||||
<span>
|
||||
人数：
|
||||
{data[personKey] ?? 0}
|
||||
</span>
|
||||
<span>
|
||||
车数：
|
||||
{data[carKey] ?? 0}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Spin>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
export default GatePanel;
|
||||
export default Connect([NS_BI_STATISTICS], true)(GatePanel);
|
||||
|
|
|
|||
|
|
@ -15,6 +15,6 @@
|
|||
|
||||
.index-info-gate__item div {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
justify-content: space-around;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,75 +1,25 @@
|
|||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||
import { useMount } from "ahooks";
|
||||
import { Spin } from "antd";
|
||||
import * as echarts from "echarts";
|
||||
import { useRef } from "react";
|
||||
import { useContext, useRef } from "react";
|
||||
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
||||
import Panel from "~/pages/Container/Map/components/Content/port/Panel";
|
||||
import { Context } from "~/pages/Container/Map/js/context";
|
||||
import { textFormatter } from "~/pages/Container/Map/js/utils";
|
||||
import "./index.less";
|
||||
|
||||
const records = [
|
||||
{
|
||||
PEOPLE_OUT: "2",
|
||||
AREA_NAME: "王雯仲测试",
|
||||
PEOPLE_IN: "1",
|
||||
CAR_IN: "0",
|
||||
CAR_OUT: "0",
|
||||
},
|
||||
{
|
||||
PEOPLE_OUT: "0",
|
||||
AREA_NAME: "测试",
|
||||
PEOPLE_IN: "0",
|
||||
CAR_IN: "0",
|
||||
CAR_OUT: "0",
|
||||
},
|
||||
{
|
||||
PEOPLE_OUT: "0",
|
||||
AREA_NAME: "测试11",
|
||||
PEOPLE_IN: "0",
|
||||
CAR_IN: "0",
|
||||
CAR_OUT: "0",
|
||||
},
|
||||
{
|
||||
PEOPLE_OUT: "0",
|
||||
AREA_NAME: "1",
|
||||
PEOPLE_IN: "0",
|
||||
CAR_IN: "0",
|
||||
CAR_OUT: "0",
|
||||
},
|
||||
...[
|
||||
"秦港一号门",
|
||||
"秦港二号门",
|
||||
"秦港三号门",
|
||||
"秦港四号门",
|
||||
"秦港五号门",
|
||||
"秦港六号门",
|
||||
"秦港七号门",
|
||||
"秦港八号门",
|
||||
"秦港九号门",
|
||||
"秦港十号门",
|
||||
"翻控一号门",
|
||||
"翻控二号门",
|
||||
"翻控三号门",
|
||||
].map(AREA_NAME => ({
|
||||
PEOPLE_OUT: "0",
|
||||
AREA_NAME,
|
||||
PEOPLE_IN: "0",
|
||||
CAR_IN: "0",
|
||||
CAR_OUT: "0",
|
||||
})),
|
||||
];
|
||||
|
||||
/** 负责初始化口门进出统计图，并在卸载时释放图表实例。 */
|
||||
function EntryExitTrendPanel() {
|
||||
function EntryExitTrendPanel(props) {
|
||||
const { portArea } = useContext(Context);
|
||||
|
||||
const chartRef = useRef(null);
|
||||
const chartInstance = useRef(null);
|
||||
|
||||
const initEcharts = (data) => {
|
||||
const xAxisData = data.map(item => item.AREA_NAME);
|
||||
const enterData = data.map(
|
||||
item => Number(item.CAR_IN) + Number(item.PEOPLE_IN),
|
||||
);
|
||||
const exitData = data.map(
|
||||
item => Number(item.CAR_OUT) + Number(item.PEOPLE_OUT),
|
||||
);
|
||||
const xAxisData = data.map(item => item.mkmjName);
|
||||
const enterData = data.map(item => Number(item.inCount));
|
||||
const exitData = data.map(item => Number(item.outCount));
|
||||
chartInstance.current = echarts.init(chartRef.current);
|
||||
chartInstance.current.setOption({
|
||||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||||
|
|
@ -171,17 +121,24 @@ function EntryExitTrendPanel() {
|
|||
};
|
||||
|
||||
useMount(() => {
|
||||
initEcharts(records);
|
||||
const loadData = async () => {
|
||||
const { data } = await props.getScreenMkmjRecord({ portArea, mkmjLevel: "1" });
|
||||
initEcharts(data);
|
||||
};
|
||||
|
||||
loadData();
|
||||
return () => chartInstance.current?.dispose();
|
||||
});
|
||||
|
||||
return (
|
||||
<Panel title="进入进出统计" className="port-gate__trend">
|
||||
<Spin spinning={props.biStatistics.getScreenMkmjRecordLoading}>
|
||||
<div className="port-gate-trend__content">
|
||||
<div ref={chartRef} className="port-gate-trend__chart" />
|
||||
</div>
|
||||
</Spin>
|
||||
</Panel>
|
||||
);
|
||||
}
|
||||
|
||||
export default EntryExitTrendPanel;
|
||||
export default Connect([NS_BI_STATISTICS], true)(EntryExitTrendPanel);
|
||||
|
|
|
|||
|
|
@ -1,19 +1,26 @@
|
|||
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/port/Panel";
|
||||
import { Context } from "~/pages/Container/Map/js/context";
|
||||
import "./index.less";
|
||||
|
||||
const records = [
|
||||
{ corpName: "港区建设有限公司", onlinePersonnelCount: 126, onlineVehicleCount: 18 },
|
||||
{ corpName: "临港工程有限公司", onlinePersonnelCount: 98, onlineVehicleCount: 12 },
|
||||
{ corpName: "海港设备安装有限公司", onlinePersonnelCount: 75, onlineVehicleCount: 9 },
|
||||
{ corpName: "港航建设集团", onlinePersonnelCount: 142, onlineVehicleCount: 21 },
|
||||
{ corpName: "东港物流有限公司", onlinePersonnelCount: 86, onlineVehicleCount: 16 },
|
||||
{ corpName: "港区能源有限公司", onlinePersonnelCount: 63, onlineVehicleCount: 7 },
|
||||
{ corpName: "海运工程有限公司", onlinePersonnelCount: 109, onlineVehicleCount: 14 },
|
||||
];
|
||||
|
||||
/** 展示各公司当前在线定位的人员和车辆数量。 */
|
||||
function OnlineLocationInfoPanel() {
|
||||
function OnlineLocationInfoPanel(props) {
|
||||
const { portArea } = useContext(Context);
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
const { data } = await props.getScreenPersonLocationList({ portArea });
|
||||
setData(data);
|
||||
};
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Panel title="在线定位信息" className="port-personnel__online-location-info">
|
||||
<div className="port-online-location-info__content">
|
||||
|
|
@ -24,15 +31,17 @@ function OnlineLocationInfoPanel() {
|
|||
<div className="port-online-location-info__cell">在线定位车辆数</div>
|
||||
</div>
|
||||
<div className="port-online-location-info__body">
|
||||
<SeamlessScroll list={records} step={0.5}>
|
||||
{records.map((item, index) => (
|
||||
<Spin spinning={props.biStatistics.getScreenPersonLocationListLoading}>
|
||||
<SeamlessScroll list={data} step={0.5}>
|
||||
{data.map((item, index) => (
|
||||
<div className="port-online-location-info__row" key={index}>
|
||||
<div className="port-online-location-info__cell">{item.corpName}</div>
|
||||
<div className="port-online-location-info__cell">{item.onlinePersonnelCount}</div>
|
||||
<div className="port-online-location-info__cell">{item.onlineVehicleCount}</div>
|
||||
<div className="port-online-location-info__cell">{item.corpinfoName}</div>
|
||||
<div className="port-online-location-info__cell">{item.personCount}</div>
|
||||
<div className="port-online-location-info__cell">{item.vehicleCount}</div>
|
||||
</div>
|
||||
))}
|
||||
</SeamlessScroll>
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -40,4 +49,4 @@ function OnlineLocationInfoPanel() {
|
|||
);
|
||||
}
|
||||
|
||||
export default OnlineLocationInfoPanel;
|
||||
export default Connect([NS_BI_STATISTICS], true)(OnlineLocationInfoPanel);
|
||||
|
|
|
|||
|
|
@ -1,30 +1,36 @@
|
|||
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/port/Panel";
|
||||
import { Context } from "~/pages/Container/Map/js/context";
|
||||
import "./index.less";
|
||||
|
||||
const records = [
|
||||
{ corpName: "港区建设有限公司", projectName: "码头泊位改造工程", projectStatus: "进行中" },
|
||||
{ corpName: "临港工程有限公司", projectName: "堆场智能化升级工程", projectStatus: "未开工" },
|
||||
{ corpName: "海港设备安装有限公司", projectName: "装卸设备检修工程", projectStatus: "完工申请中" },
|
||||
{ corpName: "港航建设集团", projectName: "航道疏浚维护工程", projectStatus: "已结束" },
|
||||
{ corpName: "东港物流有限公司", projectName: "散货泊位扩建工程", projectStatus: "进行中" },
|
||||
{ corpName: "港区能源有限公司", projectName: "岸电设施建设工程", projectStatus: "开工申请中" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
{ corpName: "海运工程有限公司", projectName: "仓储区消防改造工程", projectStatus: "未开工" },
|
||||
];
|
||||
const STATUS = {
|
||||
0: "暂存",
|
||||
1: "未开工",
|
||||
2: "开工申请中",
|
||||
3: "已超期",
|
||||
4: "进行中",
|
||||
5: "完工申请中",
|
||||
6: "已完工",
|
||||
};
|
||||
|
||||
/** 展示重点作业的所属公司、工程名称和当前工程状态。 */
|
||||
function KeyWorkInfoPanel() {
|
||||
function KeyWorkInfoPanel(props) {
|
||||
const { portArea } = useContext(Context);
|
||||
|
||||
const [data, setData] = useState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadData = async () => {
|
||||
const { data } = await props.getScreenLargeScreenInfo({ portArea });
|
||||
setData(data);
|
||||
};
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Panel title="重点作业信息" className="port-key-supervision__work-info">
|
||||
<div className="port-key-work-info__content">
|
||||
|
|
@ -35,15 +41,17 @@ function KeyWorkInfoPanel() {
|
|||
<div className="port-key-work-info__cell">工程状态</div>
|
||||
</div>
|
||||
<div className="port-key-work-info__body">
|
||||
<SeamlessScroll list={records} step={0.5}>
|
||||
{records.map((item, index) => (
|
||||
<Spin spinning={props.biStatistics.getScreenLargeScreenInfoLoading}>
|
||||
<SeamlessScroll list={data} step={0.5}>
|
||||
{data.map((item, index) => (
|
||||
<div className="port-key-work-info__row" key={index}>
|
||||
<div className="port-key-work-info__cell">{item.corpName}</div>
|
||||
<div className="port-key-work-info__cell">{item.jurisdictionCorpinfoName}</div>
|
||||
<div className="port-key-work-info__cell">{item.projectName}</div>
|
||||
<div className="port-key-work-info__cell">{item.projectStatus}</div>
|
||||
<div className="port-key-work-info__cell">{STATUS[item.applyStatus]}</div>
|
||||
</div>
|
||||
))}
|
||||
</SeamlessScroll>
|
||||
</Spin>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -51,4 +59,4 @@ function KeyWorkInfoPanel() {
|
|||
);
|
||||
}
|
||||
|
||||
export default KeyWorkInfoPanel;
|
||||
export default Connect([NS_BI_STATISTICS], true)(KeyWorkInfoPanel);
|
||||
|
|
|
|||
Loading…
Reference in New Issue