refactor(map): 7月28日需求修改 对接接口
parent
07aea5d5fc
commit
dbe87198b2
|
|
@ -164,3 +164,27 @@ export const getPersonLocationCompanyOnlineStat = declareRequest(
|
||||||
"getPersonLocationCompanyOnlineStatLoading",
|
"getPersonLocationCompanyOnlineStatLoading",
|
||||||
"Post > @/personnelPosition/bi/personLocation/companyOnlineStat",
|
"Post > @/personnelPosition/bi/personLocation/companyOnlineStat",
|
||||||
);
|
);
|
||||||
|
export const getPersonStatistics = declareRequest(
|
||||||
|
"getPersonStatisticsLoading",
|
||||||
|
"Post > @/xgfManager/project/personStatistics",
|
||||||
|
);
|
||||||
|
export const getScreenWorkStatusStatistics = declareRequest(
|
||||||
|
"getScreenWorkStatusStatisticsLoading",
|
||||||
|
"Post > @/eightwork/eightworkInfo/screenWorkStatusStatistics",
|
||||||
|
);
|
||||||
|
export const getScreenWorkPieStatistics = declareRequest(
|
||||||
|
"getScreenWorkPieStatisticsLoading",
|
||||||
|
"Post > @/eightwork/eightworkInfo/screenWorkPieStatistics",
|
||||||
|
);
|
||||||
|
export const getScreenXgfStatistics = declareRequest(
|
||||||
|
"getScreenXgfStatisticsLoading",
|
||||||
|
"Post > @/keyProject/keyProject/largeScreenXgfStatistics",
|
||||||
|
);
|
||||||
|
export const getScreenWorkPage = declareRequest(
|
||||||
|
"getScreenWorkPageLoading",
|
||||||
|
"Post > @/eightwork/eightworkInfo/screenWorkPage",
|
||||||
|
);
|
||||||
|
export const getScreenFireCheckList = declareRequest(
|
||||||
|
"getScreenFireCheckListLoading",
|
||||||
|
"Post > @/fireCheck/fireCheckList/screen/list",
|
||||||
|
);
|
||||||
|
|
|
||||||
|
|
@ -11,8 +11,8 @@ import "./index.less";
|
||||||
function WorkStatusPanel(props) {
|
function WorkStatusPanel(props) {
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
const initEcharts = (main1Ref, chartInstance, data) => {
|
const initEcharts = (data) => {
|
||||||
chartInstance.current = echarts.init(main1Ref.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
|
||||||
const domainTypeName = data.map(item => item.domainTypeName);
|
const domainTypeName = data.map(item => item.domainTypeName);
|
||||||
const scoredCount = data.map(item => item.scoredCount);
|
const scoredCount = data.map(item => item.scoredCount);
|
||||||
|
|
@ -138,7 +138,7 @@ function WorkStatusPanel(props) {
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
const { data } = await props.getProjectTaskScoreCount();
|
const { data } = await props.getProjectTaskScoreCount();
|
||||||
initEcharts(chartRef, chartInstance, data || []);
|
initEcharts(data || []);
|
||||||
};
|
};
|
||||||
|
|
||||||
loadData();
|
loadData();
|
||||||
|
|
|
||||||
|
|
@ -58,8 +58,8 @@ function WorkPanel(props) {
|
||||||
spinning={props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading || props.biStatistics.getKeyProjectLargeScreenStatisticsLoading}
|
spinning={props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading || props.biStatistics.getKeyProjectLargeScreenStatisticsLoading}
|
||||||
>
|
>
|
||||||
<div className="index-info-work__list">
|
<div className="index-info-work__list">
|
||||||
{data.map(item => (
|
{data.map((item, index) => (
|
||||||
<div className="index-info-work__item" key={item.name}>
|
<div className="index-info-work__item" key={index}>
|
||||||
<img src={item.image} alt="" />
|
<img src={item.image} alt="" />
|
||||||
<div>
|
<div>
|
||||||
<strong>{item.name}</strong>
|
<strong>{item.name}</strong>
|
||||||
|
|
|
||||||
|
|
@ -15,10 +15,10 @@ function ClosedAreaStatsPanel() {
|
||||||
return (
|
return (
|
||||||
<Panel title="封闭区域统计">
|
<Panel title="封闭区域统计">
|
||||||
<div className="branch-office-closed-area-stats__content">
|
<div className="branch-office-closed-area-stats__content">
|
||||||
{statistics.map(item => (
|
{statistics.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
className="branch-office-closed-area-stats__item"
|
className="branch-office-closed-area-stats__item"
|
||||||
key={item.title}
|
key={index}
|
||||||
>
|
>
|
||||||
<div className="branch-office-closed-area-stats__image">
|
<div className="branch-office-closed-area-stats__image">
|
||||||
<img src={item.img} alt="" />
|
<img src={item.img} alt="" />
|
||||||
|
|
|
||||||
|
|
@ -24,8 +24,8 @@ function EntryExitTrendPanel() {
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
|
|
||||||
const initEcharts = (mainRef, chartInstance, data) => {
|
const initEcharts = (data) => {
|
||||||
chartInstance.current = echarts.init(mainRef.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
|
||||||
const inData = data.map(item => Number.parseInt(item.IN));
|
const inData = data.map(item => Number.parseInt(item.IN));
|
||||||
const outData = data.map(item => Number.parseInt(item.OUT));
|
const outData = data.map(item => Number.parseInt(item.OUT));
|
||||||
|
|
@ -164,7 +164,7 @@ function EntryExitTrendPanel() {
|
||||||
};
|
};
|
||||||
|
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
initEcharts(chartRef, chartInstance, records);
|
initEcharts(records);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (chartInstance.current) {
|
if (chartInstance.current) {
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,8 @@ function DepartmentResponsibilityPanel(props) {
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
|
|
||||||
const initEcharts = (mainRef, chartInstance, data) => {
|
const initEcharts = (data) => {
|
||||||
chartInstance.current = echarts.init(mainRef.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
color: ["#7d4449", "#009944", "#167ce4", "#00ffff"],
|
color: ["#7d4449", "#009944", "#167ce4", "#00ffff"],
|
||||||
|
|
@ -143,7 +143,7 @@ function DepartmentResponsibilityPanel(props) {
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
const { data } = await props.getDepartmentDuty({ portArea, corpinfoId: currentBranchOffice });
|
const { data } = await props.getDepartmentDuty({ portArea, corpinfoId: currentBranchOffice });
|
||||||
initEcharts(chartRef, chartInstance, data);
|
initEcharts(data);
|
||||||
};
|
};
|
||||||
|
|
||||||
loadData();
|
loadData();
|
||||||
|
|
|
||||||
|
|
@ -32,12 +32,12 @@ function RiskHazardPanel(props) {
|
||||||
<Panel title="风险点隐患" className="branch-office-index-left__risk-hazard">
|
<Panel title="风险点隐患" className="branch-office-index-left__risk-hazard">
|
||||||
<Spin spinning={props.biStatistics.getRiskPointHiddenLoading}>
|
<Spin spinning={props.biStatistics.getRiskPointHiddenLoading}>
|
||||||
<div className="branch-office-risk-hazard__content">
|
<div className="branch-office-risk-hazard__content">
|
||||||
{data.map((item) => {
|
{data.map((item, index) => {
|
||||||
const color = levelColor[item.level];
|
const color = levelColor[item.level];
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className="branch-office-risk-hazard__item"
|
className="branch-office-risk-hazard__item"
|
||||||
key={item.levelName}
|
key={index}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
className="branch-office-risk-hazard__decoration"
|
className="branch-office-risk-hazard__decoration"
|
||||||
|
|
|
||||||
|
|
@ -1,39 +1,47 @@
|
||||||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||||
import { Spin } from "antd";
|
import { Spin } from "antd";
|
||||||
import { useEffect, useState } from "react";
|
import { useContext, useEffect, useState } from "react";
|
||||||
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
||||||
import temperatureIcon from "~/assets/images/public/bigScreen/img10.png";
|
import temperatureIcon from "~/assets/images/public/bigScreen/img10.png";
|
||||||
import windIcon from "~/assets/images/public/bigScreen/img11.png";
|
import windIcon from "~/assets/images/public/bigScreen/img11.png";
|
||||||
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
||||||
import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
|
import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
|
||||||
|
import { Context } from "~/pages/Container/Map/js/context";
|
||||||
import { getAlertColor, getWeatherIcon } from "~/utils/weather";
|
import { getAlertColor, getWeatherIcon } from "~/utils/weather";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
const statistics = [
|
const statistics = [
|
||||||
{ label: "部门数", value: 10 },
|
{ label: "部门数", value: 0, key: "departmentCount" },
|
||||||
{ label: "人员数", value: 1250 },
|
{ label: "人员数", value: 0, key: "userCount" },
|
||||||
{ label: "相关单位数", value: 23 },
|
{ label: "相关单位数", value: 0, key: "relatedCorpCount" },
|
||||||
{ label: "相关方人员数", value: 1680 },
|
{ label: "相关方人员数", value: 0, key: "relatedUserCount" },
|
||||||
];
|
];
|
||||||
|
|
||||||
/** 负责查询并展示天气、预警及人员相关统计。 */
|
/** 负责查询并展示天气、预警及人员相关统计。 */
|
||||||
function WeatherPreventionPanel(props) {
|
function WeatherPreventionPanel(props) {
|
||||||
|
const { portArea, currentBranchOffice } = useContext(Context);
|
||||||
|
|
||||||
const [weather, setWeather] = useState({});
|
const [weather, setWeather] = useState({});
|
||||||
const [alerts, setAlerts] = useState([]);
|
const [alerts, setAlerts] = useState([]);
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
const { result = {} } = await props.getWeather();
|
const [{ result }, { data }] = await Promise.all([
|
||||||
|
await props.getWeather(),
|
||||||
|
await props.getPersonStatistics({ portArea, corpinfoId: currentBranchOffice }),
|
||||||
|
]);
|
||||||
setWeather(result.now || {});
|
setWeather(result.now || {});
|
||||||
setAlerts(Array.isArray(result.alerts) ? result.alerts : []);
|
setAlerts(Array.isArray(result.alerts) ? result.alerts : []);
|
||||||
|
setData(statistics.map(item => ({ ...item, value: (data || {})[item.key] || 0 })));
|
||||||
};
|
};
|
||||||
loadData();
|
loadData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Panel title="天气预防情况">
|
<Panel title="天气预防情况">
|
||||||
<Spin spinning={props.biStatistics.getWeatherLoading}>
|
<div className="branch-office-weather-prevention__content">
|
||||||
<div className="branch-office-weather-prevention__content">
|
<Spin spinning={props.biStatistics.getWeatherLoading}>
|
||||||
<div className="branch-office-weather-prevention__weather">
|
<div className="branch-office-weather-prevention__weather">
|
||||||
<div className="branch-office-weather-prevention__condition">
|
<div className="branch-office-weather-prevention__condition">
|
||||||
<div className="branch-office-weather-prevention__condition-image">
|
<div className="branch-office-weather-prevention__condition-image">
|
||||||
|
|
@ -80,9 +88,11 @@ function WeatherPreventionPanel(props) {
|
||||||
: <div className="branch-office-weather-prevention__no-alerts">当前暂无气象预警</div>
|
: <div className="branch-office-weather-prevention__no-alerts">当前暂无气象预警</div>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<Statistics />
|
</Spin>
|
||||||
</div>
|
<Spin spinning={props.biStatistics.getPersonStatisticsLoading}>
|
||||||
</Spin>
|
<Statistics data={data} />
|
||||||
|
</Spin>
|
||||||
|
</div>
|
||||||
</Panel>
|
</Panel>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -105,11 +115,11 @@ function WeatherMetric({ icon, label, value }) {
|
||||||
}
|
}
|
||||||
|
|
||||||
/** 天气预防区块内的部门及相关方统计块。 */
|
/** 天气预防区块内的部门及相关方统计块。 */
|
||||||
function Statistics() {
|
function Statistics({ data }) {
|
||||||
return (
|
return (
|
||||||
<div className="branch-office-weather-prevention__statistics">
|
<div className="branch-office-weather-prevention__statistics">
|
||||||
{statistics.map(item => (
|
{data.map((item, index) => (
|
||||||
<div className="branch-office-weather-prevention__statistic" key={item.label}>
|
<div className="branch-office-weather-prevention__statistic" key={index}>
|
||||||
<div className="branch-office-weather-prevention__statistic-label">{item.label}</div>
|
<div className="branch-office-weather-prevention__statistic-label">{item.label}</div>
|
||||||
<div className="branch-office-weather-prevention__statistic-value">{item.value}</div>
|
<div className="branch-office-weather-prevention__statistic-value">{item.value}</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -43,10 +43,10 @@ function GateAndClosedAreaPanel() {
|
||||||
return (
|
return (
|
||||||
<Panel title="口门及封闭区域">
|
<Panel title="口门及封闭区域">
|
||||||
<div className="branch-office-gate-closed-area__content">
|
<div className="branch-office-gate-closed-area__content">
|
||||||
{records.map(item => (
|
{records.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
className="branch-office-gate-closed-area__item"
|
className="branch-office-gate-closed-area__item"
|
||||||
key={item.title}
|
key={index}
|
||||||
style={{ backgroundImage: `url(${item.background})` }}
|
style={{ backgroundImage: `url(${item.background})` }}
|
||||||
>
|
>
|
||||||
<div className="branch-office-gate-closed-area__title">
|
<div className="branch-office-gate-closed-area__title">
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@ function KeyWorkStatsPanel(props) {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
const { data } = await props.getKeyProjectLargeScreenDepartmentStatistics({
|
const { data } = await props.getScreenXgfStatistics({
|
||||||
portArea,
|
portArea,
|
||||||
corpinfoId: currentBranchOffice,
|
corpinfoId: currentBranchOffice,
|
||||||
});
|
});
|
||||||
|
|
@ -31,29 +31,22 @@ function KeyWorkStatsPanel(props) {
|
||||||
<div className="branch-office-key-work-stats__content">
|
<div className="branch-office-key-work-stats__content">
|
||||||
<div className="branch-office-key-work-stats__table">
|
<div className="branch-office-key-work-stats__table">
|
||||||
<div className="branch-office-key-work-stats__row">
|
<div className="branch-office-key-work-stats__row">
|
||||||
<div>部门名称</div>
|
<div>相关方名称</div>
|
||||||
<div>三人以上作业数</div>
|
<div>三人以上作业数</div>
|
||||||
<div>夜间作业数</div>
|
<div>夜间作业数</div>
|
||||||
<div>其他作业数</div>
|
|
||||||
<div>四新作业数</div>
|
<div>四新作业数</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="branch-office-key-work-stats__body">
|
<div className="branch-office-key-work-stats__body">
|
||||||
<Spin
|
<Spin spinning={props.biStatistics.getScreenXgfStatisticsLoading}>
|
||||||
spinning={
|
|
||||||
props.biStatistics
|
|
||||||
.getKeyProjectLargeScreenDepartmentStatisticsLoading
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<SeamlessScroll list={data} step={0.5}>
|
<SeamlessScroll list={data} step={0.5}>
|
||||||
{data.map((item, index) => (
|
{data.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
className="branch-office-key-work-stats__row"
|
className="branch-office-key-work-stats__row"
|
||||||
key={index}
|
key={index}
|
||||||
>
|
>
|
||||||
<div>{item.departmentName}</div>
|
<div>{item.xgfCorpinfoName}</div>
|
||||||
<div>{item.morePeopleCount}</div>
|
<div>{item.morePeopleCount}</div>
|
||||||
<div>{item.nightWorkCount}</div>
|
<div>{item.nightWorkCount}</div>
|
||||||
<div>{item.otherWorkCount}</div>
|
|
||||||
<div>{item.fourNewHomeworkCount}</div>
|
<div>{item.fourNewHomeworkCount}</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
|
||||||
|
|
@ -17,7 +17,7 @@
|
||||||
|
|
||||||
.branch-office-key-work-stats__row {
|
.branch-office-key-work-stats__row {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 1fr 1.5fr 1fr 1fr 1fr;
|
grid-template-columns: repeat(4, 1fr);
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
background-color: rgba(17, 51, 112, 0.8);
|
background-color: rgba(17, 51, 112, 0.8);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -42,8 +42,8 @@ function ClosedAreaStatsPanel(props) {
|
||||||
<Panel title="封闭区域统计">
|
<Panel title="封闭区域统计">
|
||||||
<Spin spinning={props.biStatistics.getPrimeportClosedAreaCorpStatLoading}>
|
<Spin spinning={props.biStatistics.getPrimeportClosedAreaCorpStatLoading}>
|
||||||
<div className="branch-office-gate-stats__content">
|
<div className="branch-office-gate-stats__content">
|
||||||
{data.map(item => (
|
{data.map((item, index) => (
|
||||||
<div className="branch-office-gate-stats__item" key={item.label}>
|
<div className="branch-office-gate-stats__item" key={index}>
|
||||||
<div className="branch-office-gate-stats__image">
|
<div className="branch-office-gate-stats__image">
|
||||||
<img src={item.icon} alt="" />
|
<img src={item.icon} alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -24,8 +24,8 @@ function EntryExitTrendPanel() {
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
|
|
||||||
const initEcharts = (mainRef, chartInstance, data) => {
|
const initEcharts = (data) => {
|
||||||
chartInstance.current = echarts.init(mainRef.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
|
||||||
const inData = data.map(item => Number.parseInt(item.IN));
|
const inData = data.map(item => Number.parseInt(item.IN));
|
||||||
const outData = data.map(item => Number.parseInt(item.OUT));
|
const outData = data.map(item => Number.parseInt(item.OUT));
|
||||||
|
|
@ -164,7 +164,7 @@ function EntryExitTrendPanel() {
|
||||||
};
|
};
|
||||||
|
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
initEcharts(chartRef, chartInstance, records);
|
initEcharts(records);
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
if (chartInstance.current) {
|
if (chartInstance.current) {
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,8 @@ function AlarmTypeChartPanel(props) {
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
|
|
||||||
const initEcharts = (mainRef, chartInstance, data) => {
|
const initEcharts = (data) => {
|
||||||
chartInstance.current = echarts.init(mainRef.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
|
||||||
const option = {
|
const option = {
|
||||||
tooltip: {
|
tooltip: {
|
||||||
|
|
@ -49,7 +49,7 @@ function AlarmTypeChartPanel(props) {
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
const { data } = await props.getAlarmType({ portArea, corpinfoId: currentBranchOffice });
|
const { data } = await props.getAlarmType({ portArea, corpinfoId: currentBranchOffice });
|
||||||
initEcharts(chartRef, chartInstance, data || []);
|
initEcharts(data || []);
|
||||||
};
|
};
|
||||||
|
|
||||||
loadData();
|
loadData();
|
||||||
|
|
|
||||||
|
|
@ -15,8 +15,8 @@ function ClosedAreaPersonnelPanel(props) {
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
|
|
||||||
const initEcharts = (mainRef, chartInstance, data) => {
|
const initEcharts = (data) => {
|
||||||
chartInstance.current = echarts.init(mainRef.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
|
||||||
const unitPersonnelData = data.map(item => Number.parseInt(item.unitCount));
|
const unitPersonnelData = data.map(item => Number.parseInt(item.unitCount));
|
||||||
const relatedPartyPersonnelData = data.map(item => Number.parseInt(item.relatedCount));
|
const relatedPartyPersonnelData = data.map(item => Number.parseInt(item.relatedCount));
|
||||||
|
|
@ -157,7 +157,7 @@ function ClosedAreaPersonnelPanel(props) {
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
const { data } = await props.getPersonStat({ portArea, corpinfoId: currentBranchOffice });
|
const { data } = await props.getPersonStat({ portArea, corpinfoId: currentBranchOffice });
|
||||||
initEcharts(chartRef, chartInstance, data || []);
|
initEcharts(data || []);
|
||||||
};
|
};
|
||||||
|
|
||||||
loadData();
|
loadData();
|
||||||
|
|
|
||||||
|
|
@ -11,12 +11,15 @@ import "./index.less";
|
||||||
function DepartmentWorkPanel(props) {
|
function DepartmentWorkPanel(props) {
|
||||||
const { portArea, currentBranchOffice } = useContext(Context);
|
const { portArea, currentBranchOffice } = useContext(Context);
|
||||||
const [data, setData] = useState([]);
|
const [data, setData] = useState([]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
|
const { data } = await props.getScreenWorkPage({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 9999 });
|
||||||
|
setData(data);
|
||||||
};
|
};
|
||||||
loadData();
|
loadData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Panel
|
<Panel
|
||||||
title="部门作业统计"
|
title="部门作业统计"
|
||||||
|
|
@ -30,15 +33,13 @@ function DepartmentWorkPanel(props) {
|
||||||
<div>作业状态</div>
|
<div>作业状态</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="branch-office-department-work__body">
|
<div className="branch-office-department-work__body">
|
||||||
<Spin
|
<Spin spinning={props.biStatistics.getScreenWorkPageLoading}>
|
||||||
spinning={false}
|
|
||||||
>
|
|
||||||
<SeamlessScroll list={data} step={0.5}>
|
<SeamlessScroll list={data} step={0.5}>
|
||||||
{data.map((item, index) => (
|
{data.map((item, index) => (
|
||||||
<div className="branch-office-department-work__row" key={index}>
|
<div className="branch-office-department-work__row" key={index}>
|
||||||
<div>{item.departmentName}</div>
|
<div>{item.departmentName}</div>
|
||||||
<div>{item.fourNewHomeworkCount}</div>
|
<div>{item.workTypeName}</div>
|
||||||
<div>{item.eightWorkCount}</div>
|
<div>{item.currentStep}</div>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</SeamlessScroll>
|
</SeamlessScroll>
|
||||||
|
|
|
||||||
|
|
@ -1,27 +1,20 @@
|
||||||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||||
|
import { Spin } from "antd";
|
||||||
import * as echarts from "echarts";
|
import * as echarts from "echarts";
|
||||||
import { useEffect, useRef } from "react";
|
import { useContext, useEffect, useRef } from "react";
|
||||||
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
||||||
import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
|
import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
|
||||||
|
import { Context } from "~/pages/Container/Map/js/context";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
const records = [
|
|
||||||
{ name: "动火作业", archivedCount: 24, workingCount: 6, approvalCount: 3 },
|
|
||||||
{ name: "受限空间", archivedCount: 18, workingCount: 4, approvalCount: 2 },
|
|
||||||
{ name: "高处作业", archivedCount: 32, workingCount: 8, approvalCount: 5 },
|
|
||||||
{ name: "吊装作业", archivedCount: 16, workingCount: 3, approvalCount: 1 },
|
|
||||||
{ name: "临时用电", archivedCount: 27, workingCount: 7, approvalCount: 4 },
|
|
||||||
{ name: "动土作业", archivedCount: 12, workingCount: 2, approvalCount: 2 },
|
|
||||||
{ name: "断路作业", archivedCount: 15, workingCount: 5, approvalCount: 3 },
|
|
||||||
{ name: "盲板抽堵", archivedCount: 9, workingCount: 1, approvalCount: 1 },
|
|
||||||
];
|
|
||||||
|
|
||||||
/** 展示八类危险作业在已归档、作业中和审批中三个状态下的数量。 */
|
/** 展示八类危险作业在已归档、作业中和审批中三个状态下的数量。 */
|
||||||
function KeyWorkPanel() {
|
function KeyWorkPanel(props) {
|
||||||
|
const { portArea, currentBranchOffice } = useContext(Context);
|
||||||
|
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
|
|
||||||
useEffect(() => {
|
const initEcharts = (data) => {
|
||||||
chartInstance.current = echarts.init(chartRef.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
chartInstance.current.setOption({
|
chartInstance.current.setOption({
|
||||||
color: ["#74CB3F", "#00AEFF", "#FFA800"],
|
color: ["#74CB3F", "#00AEFF", "#FFA800"],
|
||||||
|
|
@ -49,7 +42,7 @@ function KeyWorkPanel() {
|
||||||
},
|
},
|
||||||
xAxis: {
|
xAxis: {
|
||||||
type: "category",
|
type: "category",
|
||||||
data: records.map(item => item.name),
|
data: data.map(item => item.workTypeName),
|
||||||
axisTick: { show: false },
|
axisTick: { show: false },
|
||||||
axisLine: {
|
axisLine: {
|
||||||
lineStyle: { color: "rgba(255, 255, 255, 0.25)" },
|
lineStyle: { color: "rgba(255, 255, 255, 0.25)" },
|
||||||
|
|
@ -75,11 +68,20 @@ function KeyWorkPanel() {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
series: [
|
series: [
|
||||||
{ name: "已归档", type: "bar", barMaxWidth: 14, data: records.map(item => item.archivedCount) },
|
{ name: "已归档", type: "bar", barMaxWidth: 14, data: data.map(item => item.archivedCount) },
|
||||||
{ name: "作业中", type: "bar", barMaxWidth: 14, data: records.map(item => item.workingCount) },
|
{ name: "作业中", type: "bar", barMaxWidth: 14, data: data.map(item => item.workingCount) },
|
||||||
{ name: "审批中", type: "bar", barMaxWidth: 14, data: records.map(item => item.approvalCount) },
|
{ name: "审批中", type: "bar", barMaxWidth: 14, data: data.map(item => item.approvingCount) },
|
||||||
],
|
],
|
||||||
});
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
const { data } = await props.getScreenWorkPieStatistics({ portArea, corpinfoId: currentBranchOffice });
|
||||||
|
initEcharts(data || []);
|
||||||
|
};
|
||||||
|
|
||||||
|
loadData();
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
chartInstance.current?.dispose();
|
chartInstance.current?.dispose();
|
||||||
|
|
@ -89,7 +91,9 @@ function KeyWorkPanel() {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Panel title="危险作业汇总" className="branch-office-danger-work__key-work">
|
<Panel title="危险作业汇总" className="branch-office-danger-work__key-work">
|
||||||
<div ref={chartRef} className="branch-office-key-work__chart" />
|
<Spin spinning={props.biStatistics.getScreenWorkPieStatisticsLoading}>
|
||||||
|
<div ref={chartRef} className="branch-office-key-work__chart" />
|
||||||
|
</Spin>
|
||||||
</Panel>
|
</Panel>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -10,39 +10,40 @@ import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
|
||||||
import { Context } from "~/pages/Container/Map/js/context";
|
import { Context } from "~/pages/Container/Map/js/context";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
const defaultStatistics = [
|
const statistics = [
|
||||||
{ title: "审批中", icon: fourNewIcon, count: 0 },
|
{ title: "审批中", icon: fourNewIcon, count: 0, key: "approvingCount" },
|
||||||
{ title: "作业中", icon: dangerIcon, count: 0 },
|
{ title: "作业中", icon: dangerIcon, count: 0, key: "workingCount" },
|
||||||
{ title: "已归档", icon: multiPersonIcon, count: 0 },
|
{ title: "已归档", icon: multiPersonIcon, count: 0, key: "archivedCount" },
|
||||||
];
|
];
|
||||||
|
|
||||||
/** 负责查询并展示重点作业当前数量与申请数量。 */
|
/** 负责查询并展示重点作业当前数量与申请数量。 */
|
||||||
function KeyWorkStatsPanel(props) {
|
function KeyWorkStatsPanel(props) {
|
||||||
const { portArea, currentBranchOffice } = useContext(Context);
|
const { portArea, currentBranchOffice } = useContext(Context);
|
||||||
const [data, setData] = useState(defaultStatistics);
|
const [data, setData] = useState(statistics);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const loadData = async () => {
|
const loadData = async () => {
|
||||||
|
const { data } = await props.getScreenWorkStatusStatistics({ portArea, corpinfoId: currentBranchOffice });
|
||||||
|
setData(statistics.map(item => ({ ...item, count: (data || {})[item.key] || 0 })));
|
||||||
};
|
};
|
||||||
loadData();
|
loadData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Panel title="危险作业统计">
|
<Panel title="危险作业统计">
|
||||||
<Spin spinning={false}>
|
<Spin spinning={props.biStatistics.getScreenWorkStatusStatisticsLoading}>
|
||||||
<div className="branch-office-key-work-stats__list">
|
<div className="branch-office-key-work-stats__list">
|
||||||
{data.map(item => (
|
{data.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
key={item.title}
|
key={index}
|
||||||
className="branch-office-key-work-stats__item"
|
className="branch-office-key-work-stats__item"
|
||||||
>
|
>
|
||||||
<div className="branch-office-key-work-stats__title">
|
|
||||||
{item.title}
|
|
||||||
</div>
|
|
||||||
<div className="branch-office-key-work-stats__icon">
|
<div className="branch-office-key-work-stats__icon">
|
||||||
<img src={item.icon} alt="" />
|
<img src={item.icon} alt="" />
|
||||||
</div>
|
</div>
|
||||||
|
<div className="branch-office-key-work-stats__title">
|
||||||
|
{item.title}
|
||||||
|
</div>
|
||||||
<div className="branch-office-key-work-stats__info">
|
<div className="branch-office-key-work-stats__info">
|
||||||
<CountUp end={+item.count} />
|
<CountUp end={+item.count} />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,19 @@
|
||||||
.branch-office-key-work-stats__list {
|
.branch-office-key-work-stats__list {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-around;
|
||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.branch-office-key-work-stats__title {
|
.branch-office-key-work-stats__icon {
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.branch-office-key-work-stats__icon {
|
.branch-office-key-work-stats__title {
|
||||||
margin-top: 13px;
|
margin-top: 13px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,19 +1,27 @@
|
||||||
|
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 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 Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
|
||||||
|
import { Context } from "~/pages/Container/Map/js/context";
|
||||||
import "./index.less";
|
import "./index.less";
|
||||||
|
|
||||||
const records = [
|
const STATE = { 0: "启用", 1: "禁用" };
|
||||||
{ inspectionForm: "码头消防点位检查表", principal: "张建国", pointCount: 28, status: "已完成" },
|
|
||||||
{ inspectionForm: "堆场消防点位检查表", principal: "李海峰", pointCount: 36, status: "已完成" },
|
|
||||||
{ inspectionForm: "仓储区消防点位检查表", principal: "王立新", pointCount: 22, status: "点检中" },
|
|
||||||
{ inspectionForm: "办公区消防点位检查表", principal: "赵明远", pointCount: 18, status: "待点检" },
|
|
||||||
{ inspectionForm: "散货区消防点位检查表", principal: "陈志强", pointCount: 31, status: "已完成" },
|
|
||||||
{ inspectionForm: "危化品区消防点位检查表", principal: "刘海涛", pointCount: 16, status: "异常" },
|
|
||||||
{ inspectionForm: "维修区消防点位检查表", principal: "孙志伟", pointCount: 24, status: "点检中" },
|
|
||||||
];
|
|
||||||
|
|
||||||
/** 展示消防点位检查表的负责人、点位数量和当前点检状态。 */
|
/** 展示消防点位检查表的负责人、点位数量和当前点检状态。 */
|
||||||
function FireInspectionRecordPanel() {
|
function FireInspectionRecordPanel(props) {
|
||||||
|
const { portArea, currentBranchOffice } = useContext(Context);
|
||||||
|
const [data, setData] = useState([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadData = async () => {
|
||||||
|
const { data } = await props.getScreenFireCheckList({ portArea, corpinfoId: currentBranchOffice, pageIndex: 1, pageSize: 9999 });
|
||||||
|
setData(data);
|
||||||
|
};
|
||||||
|
loadData();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Panel title="消防点检记录" className="branch-office-fire__inspection-record">
|
<Panel title="消防点检记录" className="branch-office-fire__inspection-record">
|
||||||
<div className="branch-office-fire-inspection-record__content">
|
<div className="branch-office-fire-inspection-record__content">
|
||||||
|
|
@ -25,16 +33,18 @@ function FireInspectionRecordPanel() {
|
||||||
<div>状态</div>
|
<div>状态</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="branch-office-fire-inspection-record__body">
|
<div className="branch-office-fire-inspection-record__body">
|
||||||
<SeamlessScroll list={records} step={0.5}>
|
<Spin spinning={props.biStatistics.getScreenFireCheckListLoading}>
|
||||||
{records.map(item => (
|
<SeamlessScroll list={data} step={0.5}>
|
||||||
<div className="branch-office-fire-inspection-record__row" key={item.inspectionForm}>
|
{data.map((item, index) => (
|
||||||
<div>{item.inspectionForm}</div>
|
<div className="branch-office-fire-inspection-record__row" key={index}>
|
||||||
<div>{item.principal}</div>
|
<div>{item.fireCheckName}</div>
|
||||||
<div>{item.pointCount}</div>
|
<div>{item.userName}</div>
|
||||||
<div>{item.status}</div>
|
<div>{item.firePointCount}</div>
|
||||||
</div>
|
<div>{STATE[item.state]}</div>
|
||||||
))}
|
</div>
|
||||||
</SeamlessScroll>
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</Spin>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -42,4 +52,4 @@ function FireInspectionRecordPanel() {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default FireInspectionRecordPanel;
|
export default Connect([NS_BI_STATISTICS], true)(FireInspectionRecordPanel);
|
||||||
|
|
|
||||||
|
|
@ -14,8 +14,8 @@ function ContractProjectPanel(props) {
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
|
|
||||||
const initEcharts = (mainRef, chartInstance, data) => {
|
const initEcharts = (data) => {
|
||||||
chartInstance.current = echarts.init(mainRef.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
|
||||||
const waitStartData = data.map(item =>
|
const waitStartData = data.map(item =>
|
||||||
Number.parseInt(item.pendingProjectCount),
|
Number.parseInt(item.pendingProjectCount),
|
||||||
|
|
@ -165,7 +165,7 @@ function ContractProjectPanel(props) {
|
||||||
pageIndex: 1,
|
pageIndex: 1,
|
||||||
pageSize: 9999,
|
pageSize: 9999,
|
||||||
});
|
});
|
||||||
initEcharts(chartRef, chartInstance, data || []);
|
initEcharts(data || []);
|
||||||
};
|
};
|
||||||
loadData();
|
loadData();
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -39,10 +39,10 @@ function ProjectStatsPanel(props) {
|
||||||
<Spin spinning={props.biStatistics.getProjectVisualProjectStatisticsLoading}>
|
<Spin spinning={props.biStatistics.getProjectVisualProjectStatisticsLoading}>
|
||||||
<div className="branch-office-project-stats__content">
|
<div className="branch-office-project-stats__content">
|
||||||
<div className="branch-office-project-stats__list">
|
<div className="branch-office-project-stats__list">
|
||||||
{data.map(item => (
|
{data.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
className="branch-office-project-stats__item"
|
className="branch-office-project-stats__item"
|
||||||
key={item.label}
|
key={index}
|
||||||
>
|
>
|
||||||
<div className="branch-office-project-stats__icon">
|
<div className="branch-office-project-stats__icon">
|
||||||
<img src={item.icon} alt="" />
|
<img src={item.icon} alt="" />
|
||||||
|
|
|
||||||
|
|
@ -17,8 +17,8 @@ function ClosedAreaStatsPanel() {
|
||||||
return (
|
return (
|
||||||
<Panel title="封闭区域统计">
|
<Panel title="封闭区域统计">
|
||||||
<div className="port-closed-area-stats__list">
|
<div className="port-closed-area-stats__list">
|
||||||
{statistics.map(item => (
|
{statistics.map((item, index) => (
|
||||||
<div className="port-closed-area-stats__item" key={item.name}>
|
<div className="port-closed-area-stats__item" key={index}>
|
||||||
<img
|
<img
|
||||||
className="port-closed-area-stats__image"
|
className="port-closed-area-stats__image"
|
||||||
src={item.image}
|
src={item.image}
|
||||||
|
|
|
||||||
|
|
@ -36,8 +36,8 @@ function EntryExitRecordPanel() {
|
||||||
</div>
|
</div>
|
||||||
<div className="port-closed-area-record__table-body">
|
<div className="port-closed-area-record__table-body">
|
||||||
<SeamlessScroll list={records} step={0.5}>
|
<SeamlessScroll list={records} step={0.5}>
|
||||||
{records.map(item => (
|
{records.map((item, index) => (
|
||||||
<div key={item.NAME} className="port-closed-area-record__row">
|
<div key={index} className="port-closed-area-record__row">
|
||||||
<div className="port-closed-area-record__cell">
|
<div className="port-closed-area-record__cell">
|
||||||
{item.NAME}
|
{item.NAME}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -24,8 +24,8 @@ function EntryExitTrendPanel() {
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
|
|
||||||
const initEcharts = (mainRef, chartInstance, data) => {
|
const initEcharts = (data) => {
|
||||||
chartInstance.current = echarts.init(mainRef.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
|
|
||||||
const inData = data.map(item => Number.parseInt(item.IN));
|
const inData = data.map(item => Number.parseInt(item.IN));
|
||||||
const outData = data.map(item => Number.parseInt(item.OUT));
|
const outData = data.map(item => Number.parseInt(item.OUT));
|
||||||
|
|
@ -120,7 +120,7 @@ function EntryExitTrendPanel() {
|
||||||
};
|
};
|
||||||
|
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
initEcharts(chartRef, chartInstance, records);
|
initEcharts(records);
|
||||||
return () => chartInstance.current?.dispose();
|
return () => chartInstance.current?.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -46,8 +46,8 @@ function BasicInfoPanel(props) {
|
||||||
<Panel title="单位基础信息">
|
<Panel title="单位基础信息">
|
||||||
<Spin spinning={props.biStatistics.getCorpInfoCorpUserSummaryLoading}>
|
<Spin spinning={props.biStatistics.getCorpInfoCorpUserSummaryLoading}>
|
||||||
<div className="port-basic-info__options">
|
<div className="port-basic-info__options">
|
||||||
{data.map(item => (
|
{data.map((item, index) => (
|
||||||
<div key={item.label} className="port-basic-info__option">
|
<div key={index} className="port-basic-info__option">
|
||||||
<img
|
<img
|
||||||
src={item.image}
|
src={item.image}
|
||||||
className="port-basic-info__option-icon"
|
className="port-basic-info__option-icon"
|
||||||
|
|
|
||||||
|
|
@ -48,7 +48,7 @@ function PersonnelStatsPanel(props) {
|
||||||
<div className="port-personnel-stats__tabs">
|
<div className="port-personnel-stats__tabs">
|
||||||
{tabs.map((item, index) => (
|
{tabs.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
key={item}
|
key={index}
|
||||||
className="port-personnel-stats__tab"
|
className="port-personnel-stats__tab"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
|
backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
|
||||||
|
|
|
||||||
|
|
@ -62,7 +62,7 @@ function EntryExitTrendPanel() {
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
|
|
||||||
const initEcharts = (mainRef, chartInstance, data) => {
|
const initEcharts = (data) => {
|
||||||
const xAxisData = data.map(item => item.AREA_NAME);
|
const xAxisData = data.map(item => item.AREA_NAME);
|
||||||
const enterData = data.map(
|
const enterData = data.map(
|
||||||
item => Number(item.CAR_IN) + Number(item.PEOPLE_IN),
|
item => Number(item.CAR_IN) + Number(item.PEOPLE_IN),
|
||||||
|
|
@ -70,7 +70,7 @@ function EntryExitTrendPanel() {
|
||||||
const exitData = data.map(
|
const exitData = data.map(
|
||||||
item => Number(item.CAR_OUT) + Number(item.PEOPLE_OUT),
|
item => Number(item.CAR_OUT) + Number(item.PEOPLE_OUT),
|
||||||
);
|
);
|
||||||
chartInstance.current = echarts.init(mainRef.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
chartInstance.current.setOption({
|
chartInstance.current.setOption({
|
||||||
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
|
||||||
grid: {
|
grid: {
|
||||||
|
|
@ -171,7 +171,7 @@ function EntryExitTrendPanel() {
|
||||||
};
|
};
|
||||||
|
|
||||||
useMount(() => {
|
useMount(() => {
|
||||||
initEcharts(chartRef, chartInstance, records);
|
initEcharts(records);
|
||||||
return () => chartInstance.current?.dispose();
|
return () => chartInstance.current?.dispose();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -147,7 +147,7 @@ function GateRecordPanel() {
|
||||||
<div className="port-gate-record__tabs">
|
<div className="port-gate-record__tabs">
|
||||||
{tabs.map((item, index) => (
|
{tabs.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
key={item}
|
key={index}
|
||||||
className="port-gate-record__tab"
|
className="port-gate-record__tab"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
|
backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@ function DeviceDetailPanel() {
|
||||||
<div className="port-weather-detail__tabs">
|
<div className="port-weather-detail__tabs">
|
||||||
{tabs.map((item, index) => (
|
{tabs.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
key={item}
|
key={index}
|
||||||
className="port-weather-detail__tab"
|
className="port-weather-detail__tab"
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
|
backgroundImage: `url(${index === activeTab ? activeTabBackground : tabBackground})`,
|
||||||
|
|
|
||||||
|
|
@ -20,8 +20,8 @@ function DeviceStatusPanel() {
|
||||||
return (
|
return (
|
||||||
<Panel title="监测设备状态" className="port-weather__device-status">
|
<Panel title="监测设备状态" className="port-weather__device-status">
|
||||||
<div className="port-weather-device-status__options">
|
<div className="port-weather-device-status__options">
|
||||||
{defaultStatistics.map(item => (
|
{defaultStatistics.map((item, index) => (
|
||||||
<div key={item.title} className="port-weather-device-status__option">
|
<div key={index} className="port-weather-device-status__option">
|
||||||
<div className="port-weather-device-status__title">
|
<div className="port-weather-device-status__title">
|
||||||
{item.title}
|
{item.title}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -39,8 +39,8 @@ function WeatherDataPanel() {
|
||||||
className="port-weather-data__background"
|
className="port-weather-data__background"
|
||||||
style={{ backgroundImage: `url(${weatherBackground})` }}
|
style={{ backgroundImage: `url(${weatherBackground})` }}
|
||||||
/>
|
/>
|
||||||
{statistics.map(item => (
|
{statistics.map((item, index) => (
|
||||||
<div key={item.title} className="port-weather-data__option">
|
<div key={index} className="port-weather-data__option">
|
||||||
<div className="port-weather-data__label">
|
<div className="port-weather-data__label">
|
||||||
{item.title}
|
{item.title}
|
||||||
:
|
:
|
||||||
|
|
|
||||||
|
|
@ -38,8 +38,8 @@ function LocationInfoPanel(props) {
|
||||||
<Panel title="定位基础信息">
|
<Panel title="定位基础信息">
|
||||||
<Spin spinning={props.biStatistics.getPersonLocationCompanyOnlineStatLoading}>
|
<Spin spinning={props.biStatistics.getPersonLocationCompanyOnlineStatLoading}>
|
||||||
<div className="port-location-info__options">
|
<div className="port-location-info__options">
|
||||||
{data.map(item => (
|
{data.map((item, index) => (
|
||||||
<div key={item.title} className="port-location-info__option">
|
<div key={index} className="port-location-info__option">
|
||||||
<div
|
<div
|
||||||
className="port-location-info__icon"
|
className="port-location-info__icon"
|
||||||
style={{ backgroundImage: `url(${iconBackground})` }}
|
style={{ backgroundImage: `url(${iconBackground})` }}
|
||||||
|
|
|
||||||
|
|
@ -25,8 +25,8 @@ function OnlineLocationInfoPanel() {
|
||||||
</div>
|
</div>
|
||||||
<div className="port-online-location-info__body">
|
<div className="port-online-location-info__body">
|
||||||
<SeamlessScroll list={records} step={0.5}>
|
<SeamlessScroll list={records} step={0.5}>
|
||||||
{records.map(item => (
|
{records.map((item, index) => (
|
||||||
<div className="port-online-location-info__row" key={item.corpName}>
|
<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.corpName}</div>
|
||||||
<div className="port-online-location-info__cell">{item.onlinePersonnelCount}</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.onlineVehicleCount}</div>
|
||||||
|
|
|
||||||
|
|
@ -48,8 +48,8 @@ function WorkStatusPanel(props) {
|
||||||
<Panel title="安全作业状态统计">
|
<Panel title="安全作业状态统计">
|
||||||
<Spin spinning={props.biStatistics.getEightWorkInfoScreenStatusStatisticsLoading}>
|
<Spin spinning={props.biStatistics.getEightWorkInfoScreenStatusStatisticsLoading}>
|
||||||
<div className="port-danger-work-status__options">
|
<div className="port-danger-work-status__options">
|
||||||
{data.map(item => (
|
{data.map((item, index) => (
|
||||||
<div key={item.label} className="port-danger-work-status__option">
|
<div key={index} className="port-danger-work-status__option">
|
||||||
<div
|
<div
|
||||||
className="port-danger-work-status__icon"
|
className="port-danger-work-status__icon"
|
||||||
style={{ backgroundImage: `url(${iconBackground})` }}
|
style={{ backgroundImage: `url(${iconBackground})` }}
|
||||||
|
|
|
||||||
|
|
@ -31,7 +31,7 @@ function WorkTrendPanel(props) {
|
||||||
const chartRef = useRef(null);
|
const chartRef = useRef(null);
|
||||||
const chartInstance = useRef(null);
|
const chartInstance = useRef(null);
|
||||||
|
|
||||||
const initEcharts = (mainRef, chartInstance, data) => {
|
const initEcharts = (data) => {
|
||||||
const colors = [
|
const colors = [
|
||||||
"29,128,219",
|
"29,128,219",
|
||||||
"1,245,255",
|
"1,245,255",
|
||||||
|
|
@ -69,7 +69,7 @@ function WorkTrendPanel(props) {
|
||||||
},
|
},
|
||||||
data: seriesData,
|
data: seriesData,
|
||||||
}));
|
}));
|
||||||
chartInstance.current = echarts.init(mainRef.current);
|
chartInstance.current = echarts.init(chartRef.current);
|
||||||
chartInstance.current.setOption({
|
chartInstance.current.setOption({
|
||||||
tooltip: { trigger: "axis" },
|
tooltip: { trigger: "axis" },
|
||||||
legend: {
|
legend: {
|
||||||
|
|
@ -118,7 +118,7 @@ function WorkTrendPanel(props) {
|
||||||
const { data } = await props.getEightWorkInfoScreenWorkTrend({
|
const { data } = await props.getEightWorkInfoScreenWorkTrend({
|
||||||
portArea,
|
portArea,
|
||||||
});
|
});
|
||||||
initEcharts(chartRef, chartInstance, formatWorkTrendData(data || []));
|
initEcharts(formatWorkTrendData(data || []));
|
||||||
};
|
};
|
||||||
|
|
||||||
loadData();
|
loadData();
|
||||||
|
|
|
||||||
|
|
@ -42,8 +42,8 @@ function KeyProjectPanel(props) {
|
||||||
<Panel title="重点工程" className="port-key-supervision__project">
|
<Panel title="重点工程" className="port-key-supervision__project">
|
||||||
<Spin spinning={props.biStatistics.getKeyProjectLargeScreenProjectStatisticsLoading}>
|
<Spin spinning={props.biStatistics.getKeyProjectLargeScreenProjectStatisticsLoading}>
|
||||||
<div className="port-key-project__options">
|
<div className="port-key-project__options">
|
||||||
{data.map(item => (
|
{data.map((item, index) => (
|
||||||
<div key={item.label} className="port-key-project__option">
|
<div key={index} className="port-key-project__option">
|
||||||
<div
|
<div
|
||||||
className="port-key-project__icon"
|
className="port-key-project__icon"
|
||||||
style={{ backgroundImage: `url(${iconBackground})` }}
|
style={{ backgroundImage: `url(${iconBackground})` }}
|
||||||
|
|
|
||||||
|
|
@ -46,9 +46,9 @@ function VideoLocationPanel(props) {
|
||||||
style={{ backgroundImage: `url(${videoBackground})` }}
|
style={{ backgroundImage: `url(${videoBackground})` }}
|
||||||
/>
|
/>
|
||||||
<div>
|
<div>
|
||||||
{data.map(item => (
|
{data.map((item, index) => (
|
||||||
<div
|
<div
|
||||||
key={item.label}
|
key={index}
|
||||||
className="port-video-location__statistic"
|
className="port-video-location__statistic"
|
||||||
>
|
>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -105,6 +105,11 @@ function Map(props) {
|
||||||
mapMethods.current.addPortPoint();
|
mapMethods.current.addPortPoint();
|
||||||
}, 500);
|
}, 500);
|
||||||
}
|
}
|
||||||
|
}).catch(() => {
|
||||||
|
setTimeout(() => {
|
||||||
|
mapMethods.current.flyTo();
|
||||||
|
mapMethods.current.addPortPoint();
|
||||||
|
}, 500);
|
||||||
}).finally(() => {
|
}).finally(() => {
|
||||||
setIsRenderContent(true);
|
setIsRenderContent(true);
|
||||||
});
|
});
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue