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