branchOffice WeiXian 按块拆分
LiuJiaNan
parent
feed4a0eaa
commit
b39ad7ad51
|
|
@ -0,0 +1,20 @@
|
||||||
|
import titleBackground from "~/assets/images/map_bi/content/title_bg2.png";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
/** 分公司大屏信息区块的统一标题与内容外层。 */
|
||||||
|
function Panel({ title, extra, children, className = "" }) {
|
||||||
|
return (
|
||||||
|
<section className={`branch-office-panel ${className}`.trim()}>
|
||||||
|
<div
|
||||||
|
className="branch-office-panel__title"
|
||||||
|
style={{ backgroundImage: `url(${titleBackground})` }}
|
||||||
|
>
|
||||||
|
<div className="branch-office-panel__title-label">{title}</div>
|
||||||
|
<div className="branch-office-panel__title-extra">{extra}</div>
|
||||||
|
</div>
|
||||||
|
<div className="branch-office-panel__content">{children}</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Panel;
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
.branch-office-panel__title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
width: 100%;
|
||||||
|
height: 41px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-panel__title-label {
|
||||||
|
padding-left: 25px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-panel__title-extra {
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,63 @@
|
||||||
|
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";
|
||||||
|
|
||||||
|
/** 负责查询并展示危险作业类别、状态及参与人数统计。 */
|
||||||
|
function DangerWorkDataPanel(props) {
|
||||||
|
const { portArea, currentBranchOffice } = useContext(Context);
|
||||||
|
const [records, setRecords] = useState([]);
|
||||||
|
useEffect(() => {
|
||||||
|
const loadRecords = async () => {
|
||||||
|
const { data = [] }
|
||||||
|
= await props.getEightWorkInfoScreenDangerWorkDataStatistics({
|
||||||
|
portArea,
|
||||||
|
corpinfoId: currentBranchOffice,
|
||||||
|
});
|
||||||
|
setRecords(data);
|
||||||
|
};
|
||||||
|
loadRecords();
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<Panel title="危险作业数据统计" className="branch-office-danger-work__data">
|
||||||
|
<div className="branch-office-danger-work-data__content">
|
||||||
|
<div className="branch-office-danger-work-data__table">
|
||||||
|
<div className="branch-office-danger-work-data__row">
|
||||||
|
<div>危险作业类别</div>
|
||||||
|
<div>作业数</div>
|
||||||
|
<div>作业状态数</div>
|
||||||
|
<div>参与人员数</div>
|
||||||
|
</div>
|
||||||
|
<div className="branch-office-danger-work-data__body">
|
||||||
|
<Spin
|
||||||
|
spinning={
|
||||||
|
props.biStatistics
|
||||||
|
.getEightWorkInfoScreenDangerWorkDataStatisticsLoading
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SeamlessScroll list={records} step={0.5}>
|
||||||
|
{records.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="branch-office-danger-work-data__row"
|
||||||
|
>
|
||||||
|
<div>{item.workTypeName}</div>
|
||||||
|
<div>{item.workCount}</div>
|
||||||
|
<div>{item.doingCount}</div>
|
||||||
|
<div>{item.personCount}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</Spin>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Panel>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Connect([NS_BI_STATISTICS], true)(DangerWorkDataPanel);
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
.branch-office-danger-work__data {
|
||||||
|
margin-top: 10px;
|
||||||
|
background: rgba(12, 28, 88, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-danger-work-data__content {
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: 1px solid;
|
||||||
|
border-top: none;
|
||||||
|
border-image: linear-gradient(to bottom,
|
||||||
|
rgba(58, 122, 149, 0),
|
||||||
|
rgba(58, 122, 149, 1)) 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-danger-work-data__table {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-danger-work-data__body {
|
||||||
|
height: 145px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-danger-work-data__row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
margin-top: 5px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(17, 51, 112, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-danger-work-data__row div {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,92 @@
|
||||||
|
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";
|
||||||
|
|
||||||
|
/** 负责合并两类部门作业统计并展示部门维度数据。 */
|
||||||
|
function DepartmentWorkPanel(props) {
|
||||||
|
const { portArea, currentBranchOffice } = useContext(Context);
|
||||||
|
const [records, setRecords] = useState([]);
|
||||||
|
useEffect(() => {
|
||||||
|
const loadRecords = async () => {
|
||||||
|
const [{ data: eightWorkData = [] }, { data: keyProjectData = [] }]
|
||||||
|
= await Promise.all([
|
||||||
|
props.getEightWorkInfoScreenDepartmentStatistics({
|
||||||
|
portArea,
|
||||||
|
corpinfoId: currentBranchOffice,
|
||||||
|
}),
|
||||||
|
props.getKeyProjectLargeScreenDepartmentStatistics({
|
||||||
|
portArea,
|
||||||
|
corpinfoId: currentBranchOffice,
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
const departmentMap = new Map(
|
||||||
|
keyProjectData.map(item => [
|
||||||
|
item.departmentId,
|
||||||
|
{
|
||||||
|
departmentName: item.departmentName,
|
||||||
|
fourNewHomeworkCount: item.fourNewHomeworkCount,
|
||||||
|
eightWorkCount: 0,
|
||||||
|
morePeopleCount: item.morePeopleCount,
|
||||||
|
},
|
||||||
|
]),
|
||||||
|
);
|
||||||
|
eightWorkData.forEach((item) => {
|
||||||
|
const department = departmentMap.get(item.departmentId) || {
|
||||||
|
departmentName: item.departmentName,
|
||||||
|
fourNewHomeworkCount: 0,
|
||||||
|
eightWorkCount: 0,
|
||||||
|
morePeopleCount: 0,
|
||||||
|
};
|
||||||
|
department.eightWorkCount = item.workCount || 0;
|
||||||
|
departmentMap.set(item.departmentId, department);
|
||||||
|
});
|
||||||
|
setRecords([...departmentMap.values()]);
|
||||||
|
};
|
||||||
|
loadRecords();
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<Panel
|
||||||
|
title="部门作业统计"
|
||||||
|
className="branch-office-danger-work__department"
|
||||||
|
>
|
||||||
|
<div className="branch-office-department-work__content">
|
||||||
|
<div className="branch-office-department-work__table">
|
||||||
|
<div className="branch-office-department-work__row">
|
||||||
|
<div>部门名称</div>
|
||||||
|
<div>四新作业</div>
|
||||||
|
<div>危险作业</div>
|
||||||
|
<div>三人以上作业数</div>
|
||||||
|
</div>
|
||||||
|
<div className="branch-office-department-work__body">
|
||||||
|
<Spin
|
||||||
|
spinning={
|
||||||
|
props.biStatistics
|
||||||
|
.getKeyProjectLargeScreenDepartmentStatisticsLoading
|
||||||
|
|| props.biStatistics
|
||||||
|
.getEightWorkInfoScreenDepartmentStatisticsLoading
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<SeamlessScroll list={records} step={0.5}>
|
||||||
|
{records.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.morePeopleCount}</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</SeamlessScroll>
|
||||||
|
</Spin>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Panel>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Connect([NS_BI_STATISTICS], true)(DepartmentWorkPanel);
|
||||||
|
|
@ -0,0 +1,36 @@
|
||||||
|
.branch-office-danger-work__department {
|
||||||
|
margin-top: 10px;
|
||||||
|
background: rgba(12, 28, 88, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-department-work__content {
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: 1px solid;
|
||||||
|
border-top: none;
|
||||||
|
border-image: linear-gradient(to bottom,
|
||||||
|
rgba(58, 122, 149, 0),
|
||||||
|
rgba(58, 122, 149, 1)) 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-department-work__table {
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-department-work__body {
|
||||||
|
height: 145px;
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-department-work__row {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(4, 1fr);
|
||||||
|
margin-top: 5px;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
background: rgba(17, 51, 112, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-department-work__row div {
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||||
|
import { Spin } from "antd";
|
||||||
|
import { useContext, useEffect, useState } from "react";
|
||||||
|
import CountUp from "react-countup";
|
||||||
|
import firstBackground from "~/assets/images/map_bi/content/bg9.png";
|
||||||
|
import secondBackground from "~/assets/images/map_bi/content/bg10.png";
|
||||||
|
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
||||||
|
import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
|
||||||
|
import { Context } from "~/pages/Container/Map/js/context";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
const defaultStatistics = [
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<>
|
||||||
|
四新
|
||||||
|
<br />
|
||||||
|
作业
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
currentCount: 0,
|
||||||
|
doingCount: 0,
|
||||||
|
archivedCount: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<>
|
||||||
|
危险
|
||||||
|
<br />
|
||||||
|
作业
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
currentCount: 0,
|
||||||
|
doingCount: 0,
|
||||||
|
archivedCount: 0,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: (
|
||||||
|
<>
|
||||||
|
三人及
|
||||||
|
<br />
|
||||||
|
以上作业
|
||||||
|
</>
|
||||||
|
),
|
||||||
|
currentCount: 0,
|
||||||
|
doingCount: 0,
|
||||||
|
archivedCount: 0,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/** 负责查询并展示各重点作业的执行状态。 */
|
||||||
|
function KeyWorkPanel(props) {
|
||||||
|
const { portArea, currentBranchOffice } = useContext(Context);
|
||||||
|
const [statistics, setStatistics] = useState(defaultStatistics);
|
||||||
|
useEffect(() => {
|
||||||
|
const loadStatistics = async () => {
|
||||||
|
const [{ data: eightWorkData = {} }, { data: keyProjectData = {} }]
|
||||||
|
= await Promise.all([
|
||||||
|
props.getEightWorkInfoDangerWorkStatistics({
|
||||||
|
portArea,
|
||||||
|
corpinfoId: currentBranchOffice,
|
||||||
|
}),
|
||||||
|
props.getKeyProjectLargeScreenStatistics({
|
||||||
|
portArea,
|
||||||
|
corpinfoId: currentBranchOffice,
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
setStatistics([
|
||||||
|
{
|
||||||
|
...defaultStatistics[0],
|
||||||
|
currentCount: keyProjectData.fourNewHomeworkStartCount,
|
||||||
|
doingCount: keyProjectData.fourNewHomeworkDoingCount,
|
||||||
|
archivedCount: keyProjectData.fourNewHomeworkArchiveCount,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
...defaultStatistics[1],
|
||||||
|
currentCount: eightWorkData.doingCount,
|
||||||
|
doingCount: eightWorkData.workingCount,
|
||||||
|
archivedCount: eightWorkData.archivedCount,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
...defaultStatistics[2],
|
||||||
|
currentCount: keyProjectData.morePeopleStartCount,
|
||||||
|
doingCount: keyProjectData.morePeopleDoingCount,
|
||||||
|
archivedCount: keyProjectData.morePeopleArchiveCount,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
loadStatistics();
|
||||||
|
}, []);
|
||||||
|
return (
|
||||||
|
<Panel title="重点作业" className="branch-office-danger-work__key-work">
|
||||||
|
<Spin
|
||||||
|
spinning={
|
||||||
|
props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading
|
||||||
|
|| props.biStatistics.getKeyProjectLargeScreenStatisticsLoading
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="branch-office-key-work__list">
|
||||||
|
{statistics.map((item, index) => (
|
||||||
|
<div
|
||||||
|
key={index}
|
||||||
|
className="branch-office-key-work__item"
|
||||||
|
style={{
|
||||||
|
backgroundImage: `url(${index % 2 === 0 ? firstBackground : secondBackground})`,
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="branch-office-key-work__title">{item.title}</div>
|
||||||
|
<div className="branch-office-key-work__statistics">
|
||||||
|
<Statistic label="当前作业数" value={item.currentCount} />
|
||||||
|
<Statistic label="作业中" value={item.doingCount} />
|
||||||
|
<Statistic label="已归档" value={item.archivedCount} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Spin>
|
||||||
|
</Panel>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Statistic({ label, value }) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="branch-office-key-work__label">{label}</div>
|
||||||
|
<div className="branch-office-key-work__value">
|
||||||
|
<CountUp end={+value} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Connect([NS_BI_STATISTICS], true)(KeyWorkPanel);
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
.branch-office-danger-work__key-work {
|
||||||
|
margin-top: 10px;
|
||||||
|
background: rgba(12, 28, 88, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work__list {
|
||||||
|
padding: 10px 15px;
|
||||||
|
border: 1px solid;
|
||||||
|
border-top: none;
|
||||||
|
border-image: linear-gradient(to bottom,
|
||||||
|
rgba(58, 122, 149, 0),
|
||||||
|
rgba(58, 122, 149, 1)) 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work__item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 12px 0;
|
||||||
|
margin-top: 5px;
|
||||||
|
color: #fff;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work__item:first-child {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work__title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 65px;
|
||||||
|
height: 50px;
|
||||||
|
margin-left: 15px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px solid #167ce4;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work__statistics {
|
||||||
|
display: flex;
|
||||||
|
flex: 1;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 30px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work__label {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work__value {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work__statistics
|
||||||
|
> div:nth-child(1)
|
||||||
|
.branch-office-key-work__value {
|
||||||
|
color: #00aeff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work__statistics
|
||||||
|
> div:nth-child(2)
|
||||||
|
.branch-office-key-work__value {
|
||||||
|
color: #ffa800;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work__statistics
|
||||||
|
> div:nth-child(3)
|
||||||
|
.branch-office-key-work__value {
|
||||||
|
color: #74cb3f;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,99 @@
|
||||||
|
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
||||||
|
import { Spin } from "antd";
|
||||||
|
import { useContext, useEffect, useState } from "react";
|
||||||
|
import CountUp from "react-countup";
|
||||||
|
import fourNewIcon from "~/assets/images/map_bi/content/ico4.png";
|
||||||
|
import dangerIcon from "~/assets/images/map_bi/content/ico5.png";
|
||||||
|
import multiPersonIcon from "~/assets/images/map_bi/content/ico6.png";
|
||||||
|
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
||||||
|
import Panel from "~/pages/Container/Map/components/Content/branchOffice/Panel";
|
||||||
|
import { Context } from "~/pages/Container/Map/js/context";
|
||||||
|
import "./index.less";
|
||||||
|
|
||||||
|
const defaultStatistics = [
|
||||||
|
{ title: "四新作业", icon: fourNewIcon, currentCount: 0, applyCount: 0 },
|
||||||
|
{ title: "危险作业", icon: dangerIcon, currentCount: 0, applyCount: 0 },
|
||||||
|
{
|
||||||
|
title: "三人及以上作业",
|
||||||
|
icon: multiPersonIcon,
|
||||||
|
currentCount: 0,
|
||||||
|
applyCount: 0,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/** 负责查询并展示重点作业当前数量与申请数量。 */
|
||||||
|
function KeyWorkStatsPanel(props) {
|
||||||
|
const { portArea, currentBranchOffice } = useContext(Context);
|
||||||
|
const [statistics, setStatistics] = useState(defaultStatistics);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const loadStatistics = async () => {
|
||||||
|
const [{ data: eightWorkData = {} }, { data: keyProjectData = {} }]
|
||||||
|
= await Promise.all([
|
||||||
|
props.getEightWorkInfoDangerWorkStatistics({
|
||||||
|
portArea,
|
||||||
|
corpinfoId: currentBranchOffice,
|
||||||
|
}),
|
||||||
|
props.getKeyProjectLargeScreenStatistics({
|
||||||
|
portArea,
|
||||||
|
corpinfoId: currentBranchOffice,
|
||||||
|
}),
|
||||||
|
]);
|
||||||
|
setStatistics([
|
||||||
|
{
|
||||||
|
...defaultStatistics[0],
|
||||||
|
currentCount: keyProjectData.fourNewHomeworkStartCount,
|
||||||
|
applyCount: keyProjectData.fourNewHomeworkApplyCount,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
...defaultStatistics[1],
|
||||||
|
currentCount: eightWorkData.workingCount,
|
||||||
|
applyCount: eightWorkData.appliedCount,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
...defaultStatistics[2],
|
||||||
|
currentCount: keyProjectData.morePeopleStartCount,
|
||||||
|
applyCount: keyProjectData.morePeopleApplyCount,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
};
|
||||||
|
loadStatistics();
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Panel title="重点作业统计" className="branch-office-danger-work__stats">
|
||||||
|
<Spin
|
||||||
|
spinning={
|
||||||
|
props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading
|
||||||
|
|| props.biStatistics.getKeyProjectLargeScreenStatisticsLoading
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<div className="branch-office-key-work-stats__list">
|
||||||
|
{statistics.map(item => (
|
||||||
|
<div
|
||||||
|
key={item.title}
|
||||||
|
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__info">
|
||||||
|
当前作业数：
|
||||||
|
<CountUp end={+item.currentCount} />
|
||||||
|
</div>
|
||||||
|
<div className="branch-office-key-work-stats__info">
|
||||||
|
申请数：
|
||||||
|
<CountUp end={+item.applyCount} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</Spin>
|
||||||
|
</Panel>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Connect([NS_BI_STATISTICS], true)(KeyWorkStatsPanel);
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
.branch-office-danger-work__stats {
|
||||||
|
background: rgba(12, 28, 88, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work-stats__list {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 10px 15px;
|
||||||
|
color: #fff;
|
||||||
|
border: 1px solid;
|
||||||
|
border-top: none;
|
||||||
|
border-image: linear-gradient(to bottom,
|
||||||
|
rgba(58, 122, 149, 0),
|
||||||
|
rgba(58, 122, 149, 1)) 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work-stats__title {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: bold;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work-stats__icon {
|
||||||
|
margin-top: 13px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work-stats__icon img {
|
||||||
|
width: 42px;
|
||||||
|
height: 48px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.branch-office-key-work-stats__info {
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
@ -1,232 +1,18 @@
|
||||||
import { Connect } from "@cqsjjb/jjb-dva-runtime";
|
import DangerWorkDataPanel from "./DangerWorkDataPanel";
|
||||||
import { Spin } from "antd";
|
import DepartmentWorkPanel from "./DepartmentWorkPanel";
|
||||||
import { useContext, useEffect, useState } from "react";
|
import KeyWorkPanel from "./KeyWorkPanel";
|
||||||
import CountUp from "react-countup";
|
import KeyWorkStatsPanel from "./KeyWorkStatsPanel";
|
||||||
import SeamlessScroll from "zy-react-library/components/SeamlessScroll";
|
|
||||||
|
|
||||||
import bg1 from "~/assets/images/map_bi/content/bg9.png";
|
|
||||||
import bg2 from "~/assets/images/map_bi/content/bg10.png";
|
|
||||||
import icon1 from "~/assets/images/map_bi/content/ico4.png";
|
|
||||||
import icon2 from "~/assets/images/map_bi/content/ico5.png";
|
|
||||||
import icon3 from "~/assets/images/map_bi/content/ico6.png";
|
|
||||||
import { NS_BI_STATISTICS } from "~/enumerate/namespace";
|
|
||||||
import Title from "~/pages/Container/Map/components/Content/branchOffice/Title";
|
|
||||||
import { Context } from "~/pages/Container/Map/js/context";
|
|
||||||
import "./index.less";
|
|
||||||
|
|
||||||
function WeiXian(props) {
|
|
||||||
const { portArea, currentBranchOffice } = useContext(Context);
|
|
||||||
|
|
||||||
const [block1List, setBlock1List] = useState([
|
|
||||||
{ title: "四新作业", count1: 0, count2: 0, icon: icon1 },
|
|
||||||
{ title: "危险作业", count1: 0, count2: 0, icon: icon2 },
|
|
||||||
{ title: "三人及以上作业", count1: 0, count2: 0, icon: icon3 },
|
|
||||||
]);
|
|
||||||
const [block2List, setBlock2List] = useState([
|
|
||||||
{ title: "四新<br/>作业", count1: 0, count2: 0, count3: 0 },
|
|
||||||
{ title: "危险<br/>作业", count1: 0, count2: 0, count3: 0 },
|
|
||||||
{ title: "三人及<br/>以上作业", count1: 0, count2: 0, count3: 0 },
|
|
||||||
]);
|
|
||||||
const [block3List, setBlock3List] = useState([]);
|
|
||||||
const [block4List, setBlock4List] = useState([]);
|
|
||||||
|
|
||||||
const getBlock1List = async () => {
|
|
||||||
const [{ data: eightWorkData = [] }, { data: keyProjectData = [] }] = await Promise.all([
|
|
||||||
props.getEightWorkInfoDangerWorkStatistics({ portArea, corpinfoId: currentBranchOffice }),
|
|
||||||
props.getKeyProjectLargeScreenStatistics({ portArea, corpinfoId: currentBranchOffice }),
|
|
||||||
]);
|
|
||||||
setBlock1List((prevState) => {
|
|
||||||
prevState[1].count1 = eightWorkData.workingCount;
|
|
||||||
prevState[1].count2 = eightWorkData.appliedCount;
|
|
||||||
|
|
||||||
prevState[0].count1 = keyProjectData.fourNewHomeworkStartCount;
|
|
||||||
prevState[0].count2 = keyProjectData.fourNewHomeworkApplyCount;
|
|
||||||
|
|
||||||
prevState[2].count1 = keyProjectData.morePeopleStartCount;
|
|
||||||
prevState[2].count2 = keyProjectData.morePeopleApplyCount;
|
|
||||||
|
|
||||||
return [...prevState];
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const getBlock2List = async () => {
|
|
||||||
const [{ data: eightWorkData = [] }, { data: keyProjectData = [] }] = await Promise.all([
|
|
||||||
props.getEightWorkInfoDangerWorkStatistics({ portArea, corpinfoId: currentBranchOffice }),
|
|
||||||
props.getKeyProjectLargeScreenStatistics({ portArea, corpinfoId: currentBranchOffice }),
|
|
||||||
]);
|
|
||||||
setBlock2List((prevState) => {
|
|
||||||
prevState[1].count1 = eightWorkData.doingCount;
|
|
||||||
prevState[1].count2 = eightWorkData.workingCount;
|
|
||||||
prevState[1].count3 = eightWorkData.archivedCount;
|
|
||||||
|
|
||||||
prevState[0].count1 = keyProjectData.fourNewHomeworkStartCount;
|
|
||||||
prevState[0].count2 = keyProjectData.fourNewHomeworkDoingCount;
|
|
||||||
prevState[0].count3 = keyProjectData.fourNewHomeworkArchiveCount;
|
|
||||||
|
|
||||||
prevState[2].count1 = keyProjectData.morePeopleStartCount;
|
|
||||||
prevState[2].count2 = keyProjectData.morePeopleDoingCount;
|
|
||||||
prevState[2].count3 = keyProjectData.morePeopleArchiveCount;
|
|
||||||
|
|
||||||
return [...prevState];
|
|
||||||
});
|
|
||||||
};
|
|
||||||
const getBlock3List = async () => {
|
|
||||||
const [{ data: eightWorkData = [] }, { data: keyProjectData = [] }] = await Promise.all([
|
|
||||||
props.getEightWorkInfoScreenDepartmentStatistics({ portArea, corpinfoId: currentBranchOffice }),
|
|
||||||
props.getKeyProjectLargeScreenDepartmentStatistics({ portArea, corpinfoId: currentBranchOffice }),
|
|
||||||
]);
|
|
||||||
const departmentMap = new Map();
|
|
||||||
|
|
||||||
keyProjectData.forEach((item) => {
|
|
||||||
departmentMap.set(item.departmentId, {
|
|
||||||
departmentName: item.departmentName,
|
|
||||||
fourNewHomeworkCount: item.fourNewHomeworkCount,
|
|
||||||
eightWorkCount: 0,
|
|
||||||
morePeopleCount: item.morePeopleCount,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
eightWorkData.forEach((item) => {
|
|
||||||
const department = departmentMap.get(item.departmentId) || {
|
|
||||||
departmentName: item.departmentName,
|
|
||||||
fourNewHomeworkCount: 0,
|
|
||||||
eightWorkCount: 0,
|
|
||||||
morePeopleCount: 0,
|
|
||||||
};
|
|
||||||
department.eightWorkCount = item.workCount || 0;
|
|
||||||
departmentMap.set(item.departmentId, department);
|
|
||||||
});
|
|
||||||
setBlock3List([...departmentMap.values()]);
|
|
||||||
};
|
|
||||||
const getBlock4List = async () => {
|
|
||||||
const { data = {} } = await props.getEightWorkInfoScreenDangerWorkDataStatistics({ portArea, corpinfoId: currentBranchOffice });
|
|
||||||
setBlock4List(data);
|
|
||||||
};
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
getBlock1List();
|
|
||||||
getBlock2List();
|
|
||||||
getBlock3List();
|
|
||||||
getBlock4List();
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
|
/** 分公司危险作业模块仅负责按展示顺序组合业务区块。 */
|
||||||
|
function WeiXian() {
|
||||||
return (
|
return (
|
||||||
<div className="branch_office_weixian">
|
<div className="branch-office-danger-work">
|
||||||
<div className="block1">
|
<KeyWorkStatsPanel />
|
||||||
<Title title="重点作业统计" />
|
<KeyWorkPanel />
|
||||||
<Spin spinning={props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading || props.biStatistics.getKeyProjectLargeScreenStatisticsLoading}>
|
<DepartmentWorkPanel />
|
||||||
<div className="options">
|
<DangerWorkDataPanel />
|
||||||
<div className="items">
|
|
||||||
{block1List.map((item, index) => (
|
|
||||||
<div className="item" key={index}>
|
|
||||||
<div className="title">{item.title}</div>
|
|
||||||
<div className="img">
|
|
||||||
<img src={item.icon} alt="" />
|
|
||||||
</div>
|
|
||||||
<div className="info">
|
|
||||||
<span>当前作业数：</span>
|
|
||||||
<CountUp end={+item.count1}></CountUp>
|
|
||||||
</div>
|
|
||||||
<div className="info">
|
|
||||||
<span>申请数：</span>
|
|
||||||
<CountUp end={+item.count2}></CountUp>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Spin>
|
|
||||||
</div>
|
|
||||||
<div className="block2">
|
|
||||||
<Title title="重点作业" />
|
|
||||||
<Spin spinning={props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading || props.biStatistics.getKeyProjectLargeScreenStatisticsLoading}>
|
|
||||||
<div className="options">
|
|
||||||
<div className="items">
|
|
||||||
{
|
|
||||||
block2List.map((item, index) => (
|
|
||||||
<div className="item" key={index} style={{ backgroundImage: `url(${index % 2 === 0 ? bg1 : bg2})` }}>
|
|
||||||
<div className="title" dangerouslySetInnerHTML={{ __html: item.title }} />
|
|
||||||
<div className="info">
|
|
||||||
<div>
|
|
||||||
<div className="label">当前作业数</div>
|
|
||||||
<div className="value">
|
|
||||||
<CountUp end={+item.count1}></CountUp>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="label">作业中</div>
|
|
||||||
<div className="value">
|
|
||||||
<CountUp end={+item.count2}></CountUp>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div className="label">已归档</div>
|
|
||||||
<div className="value">
|
|
||||||
<CountUp end={+item.count3}></CountUp>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Spin>
|
|
||||||
</div>
|
|
||||||
<div className="block3">
|
|
||||||
<Title title="部门作业统计" />
|
|
||||||
<div className="options">
|
|
||||||
<div className="table">
|
|
||||||
<div className="tr">
|
|
||||||
<div className="td">部门名称</div>
|
|
||||||
<div className="td">四新作业</div>
|
|
||||||
<div className="td">危险作业</div>
|
|
||||||
<div className="td">三人以上作业数</div>
|
|
||||||
</div>
|
|
||||||
<div className="scroll">
|
|
||||||
<Spin spinning={props.biStatistics.getKeyProjectLargeScreenDepartmentStatisticsLoading || props.biStatistics.getEightWorkInfoScreenDepartmentStatisticsLoading}>
|
|
||||||
<SeamlessScroll list={block3List} step={0.5}>
|
|
||||||
{block3List.map((item, index) => (
|
|
||||||
<div key={index} className="tr">
|
|
||||||
<div className="td">{item.departmentName}</div>
|
|
||||||
<div className="td">{item.fourNewHomeworkCount}</div>
|
|
||||||
<div className="td">{item.eightWorkCount}</div>
|
|
||||||
<div className="td">{item.morePeopleCount}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</SeamlessScroll>
|
|
||||||
</Spin>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="block4">
|
|
||||||
<Title title="危险作业数据统计" />
|
|
||||||
<div className="options">
|
|
||||||
<div className="table">
|
|
||||||
<div className="tr">
|
|
||||||
<div className="td">危险作业类别</div>
|
|
||||||
<div className="td">作业数</div>
|
|
||||||
<div className="td">作业状态数</div>
|
|
||||||
<div className="td">参与人员数</div>
|
|
||||||
</div>
|
|
||||||
<div className="scroll">
|
|
||||||
<Spin spinning={props.biStatistics.getEightWorkInfoScreenDangerWorkDataStatisticsLoading}>
|
|
||||||
<SeamlessScroll list={block4List} step={0.5}>
|
|
||||||
{block4List.map((item, index) => (
|
|
||||||
<div key={index} className="tr">
|
|
||||||
<div className="td">{item.workTypeName}</div>
|
|
||||||
<div className="td">{item.workCount}</div>
|
|
||||||
<div className="td">{item.doingCount}</div>
|
|
||||||
<div className="td">{item.personCount}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</SeamlessScroll>
|
|
||||||
</Spin>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Connect([NS_BI_STATISTICS], true)(WeiXian);
|
export default WeiXian;
|
||||||
|
|
|
||||||
|
|
@ -1,193 +0,0 @@
|
||||||
.branch_office_weixian {
|
|
||||||
.block1 {
|
|
||||||
background-color: rgba(12, 28, 88, 0.4);
|
|
||||||
|
|
||||||
.options {
|
|
||||||
padding: 10px 15px;
|
|
||||||
border: 1px solid;
|
|
||||||
border-image: linear-gradient(to bottom,
|
|
||||||
rgba(58, 122, 149, 0),
|
|
||||||
rgba(58, 122, 149, 1)) 1;
|
|
||||||
border-top: none;
|
|
||||||
|
|
||||||
.items {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
.item {
|
|
||||||
.title {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.img {
|
|
||||||
margin-top: 13px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 42px;
|
|
||||||
height: 48px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
margin-top: 5px;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block2 {
|
|
||||||
background-color: rgba(12, 28, 88, 0.4);
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.options {
|
|
||||||
padding: 10px 15px;
|
|
||||||
border: 1px solid;
|
|
||||||
border-image: linear-gradient(to bottom,
|
|
||||||
rgba(58, 122, 149, 0),
|
|
||||||
rgba(58, 122, 149, 1)) 1;
|
|
||||||
border-top: none;
|
|
||||||
|
|
||||||
.items {
|
|
||||||
.item {
|
|
||||||
color: #fff;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 12px 0;
|
|
||||||
background-size: 100% 100%;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
margin-top: 5px;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.title {
|
|
||||||
margin-left: 15px;
|
|
||||||
border: 1px solid #167CE4;
|
|
||||||
border-radius: 4px;
|
|
||||||
width: 65px;
|
|
||||||
height: 50px;
|
|
||||||
text-align: center;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info {
|
|
||||||
margin: 0 30px;
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
& > div {
|
|
||||||
&:nth-child(1) .value {
|
|
||||||
color: #00aeff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(2) .value {
|
|
||||||
color: #ffa800;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:nth-child(3) .value {
|
|
||||||
color: #74cb3f;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block3 {
|
|
||||||
background-color: rgba(12, 28, 88, 0.4);
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.options {
|
|
||||||
padding: 10px 15px;
|
|
||||||
border: 1px solid;
|
|
||||||
border-image: linear-gradient(to bottom,
|
|
||||||
rgba(58, 122, 149, 0),
|
|
||||||
rgba(58, 122, 149, 1)) 1;
|
|
||||||
border-top: none;
|
|
||||||
|
|
||||||
.table {
|
|
||||||
margin-top: 5px;
|
|
||||||
|
|
||||||
.scroll {
|
|
||||||
height: 145px;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tr {
|
|
||||||
margin-top: 5px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
background-color: rgba(17, 51, 112, 0.8);
|
|
||||||
|
|
||||||
.td {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #fff;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.block4 {
|
|
||||||
background-color: rgba(12, 28, 88, 0.4);
|
|
||||||
margin-top: 10px;
|
|
||||||
|
|
||||||
.options {
|
|
||||||
padding: 10px 15px;
|
|
||||||
border: 1px solid;
|
|
||||||
border-image: linear-gradient(to bottom,
|
|
||||||
rgba(58, 122, 149, 0),
|
|
||||||
rgba(58, 122, 149, 1)) 1;
|
|
||||||
border-top: none;
|
|
||||||
|
|
||||||
.table {
|
|
||||||
margin-top: 5px;
|
|
||||||
|
|
||||||
.scroll {
|
|
||||||
height: 145px;
|
|
||||||
overflow-y: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tr {
|
|
||||||
margin-top: 5px;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr 1fr 1fr;
|
|
||||||
background-color: rgba(17, 51, 112, 0.8);
|
|
||||||
|
|
||||||
.td {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #fff;
|
|
||||||
padding: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
Reference in New Issue