diff --git a/src/api/biStatistics/index.js b/src/api/biStatistics/index.js index 898baae..84b55b7 100644 --- a/src/api/biStatistics/index.js +++ b/src/api/biStatistics/index.js @@ -80,3 +80,15 @@ export const getFixedCameraVideoLocationStat = declareRequest( "getFixedCameraVideoLocationStatLoading", "Post > @/videopatrol/fixedCamera/getVideoLocationStat", ); +export const getEightWorkInfoScreenDangerWorkDataStatistics = declareRequest( + "getEightWorkInfoScreenDangerWorkDataStatisticsLoading", + "Post > @/eightwork/eightworkInfo/screenDangerWorkDataStatistics", +); +export const getKeyProjectLargeScreenDepartmentStatistics = declareRequest( + "getKeyProjectLargeScreenDepartmentStatisticsLoading", + "Post > @/keyProject/keyProject/largeScreenDepartmentStatistics", +); +export const getEightWorkInfoScreenDepartmentStatistics = declareRequest( + "getEightWorkInfoScreenDepartmentStatisticsLoading", + "Post > @/eightwork/eightworkInfo/screenDepartmentStatistics", +); diff --git a/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/WorkPanel/index.js b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/WorkPanel/index.js index aa4bbb2..8dff460 100644 --- a/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/WorkPanel/index.js +++ b/src/pages/Container/Map/components/Content/IndexInfo/RightPanel/WorkPanel/index.js @@ -29,8 +29,10 @@ function WorkPanel(props) { ]); useEffect(() => { const loadStatistics = async () => { - const { data: eightWorkData = {} } = await props.getEightWorkInfoDangerWorkStatistics(); - const { data: keyProjectData = {} } = await props.getKeyProjectLargeScreenStatistics(); + const [{ data: eightWorkData = [] }, { data: keyProjectData = [] }] = await Promise.all([ + props.getEightWorkInfoDangerWorkStatistics(), + props.getKeyProjectLargeScreenStatistics(), + ]); setList((prevState) => { prevState[1].doingCount = eightWorkData.doingCount; prevState[1].appliedCount = eightWorkData.appliedCount; diff --git a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js index b8c5f1a..c65eb19 100644 --- a/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js +++ b/src/pages/Container/Map/components/Content/branchOffice/WeiXian/index.js @@ -1,108 +1,175 @@ -import { useState } from "react"; +import { Connect } from "@cqsjjb/jjb-dva-runtime"; +import { Spin } from "antd"; +import { useContext, useEffect, useState } from "react"; import CountUp from "react-countup"; 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() { +function WeiXian(props) { + const { portArea, currentBranchOffice } = useContext(Context); + const [block1List, setBlock1List] = useState([ - { title: "四新作业", count1: 123, count2: 123, icon: icon1 }, - { title: "危险作业", count1: 123, count2: 123, icon: icon2 }, - { title: "三人及以上作业", count1: 123, count2: 123, icon: icon3 }, + { 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: "四新
作业", count1: 123, count2: 123, count3: 123 }, - { title: "危险
作业", count1: 123, count2: 123, count3: 123 }, - { title: "三人及
以上作业", count1: 123, count2: 123, count3: 123 }, - ]); - const [block3List, setBlock3List] = useState([ - { department: "技术部", newWork: 15, dangerousWork: 22, threeOrMoreWork: 18 }, - { department: "生产部", newWork: 12, dangerousWork: 28, threeOrMoreWork: 25 }, - { department: "安全部", newWork: 8, dangerousWork: 35, threeOrMoreWork: 12 }, - { department: "质检部", newWork: 10, dangerousWork: 15, threeOrMoreWork: 20 }, - { department: "设备部", newWork: 18, dangerousWork: 30, threeOrMoreWork: 22 }, - { department: "维修部", newWork: 14, dangerousWork: 25, threeOrMoreWork: 16 }, - { department: "仓储部", newWork: 6, dangerousWork: 12, threeOrMoreWork: 14 }, - { department: "物流部", newWork: 9, dangerousWork: 18, threeOrMoreWork: 19 }, - { department: "人事部", newWork: 3, dangerousWork: 5, threeOrMoreWork: 8 }, - { department: "财务部", newWork: 2, dangerousWork: 3, threeOrMoreWork: 5 }, - ]); - const [block4List, setBlock4List] = useState([ - { dangerousWorkCategory: "高空作业", workCount: 25, workStatusCount: 18, personnelCount: 45 }, - { dangerousWorkCategory: "动火作业", workCount: 32, workStatusCount: 28, personnelCount: 68 }, - { dangerousWorkCategory: "受限空间作业", workCount: 18, workStatusCount: 15, personnelCount: 32 }, - { dangerousWorkCategory: "临时用电作业", workCount: 42, workStatusCount: 38, personnelCount: 56 }, - { dangerousWorkCategory: "吊装作业", workCount: 21, workStatusCount: 19, personnelCount: 35 }, - { dangerousWorkCategory: "挖掘作业", workCount: 15, workStatusCount: 12, personnelCount: 28 }, - { dangerousWorkCategory: "爆破作业", workCount: 8, workStatusCount: 6, personnelCount: 18 }, - { dangerousWorkCategory: "带压作业", workCount: 12, workStatusCount: 10, personnelCount: 22 }, - { dangerousWorkCategory: "断路作业", workCount: 9, workStatusCount: 7, personnelCount: 15 }, - { dangerousWorkCategory: "其他危险作业", workCount: 16, workStatusCount: 14, personnelCount: 26 }, + { title: "四新
作业", count1: 0, count2: 0, count3: 0 }, + { title: "危险
作业", count1: 0, count2: 0, count3: 0 }, + { title: "三人及
以上作业", 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(); + }, []); return (
- <div className="options"> - <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="" /> + <Spin spinning={props.biStatistics.getEightWorkInfoDangerWorkStatisticsLoading || props.biStatistics.getKeyProjectLargeScreenStatisticsLoading}> + <div className="options"> + <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 className="info"> - <span>当前作业数:</span> - <CountUp end={+item.count1}></CountUp> - </div> - <div className="info"> - <span>申请数:</span> - <CountUp end={+item.count2}></CountUp> - </div> - </div> - ))} + ))} + </div> </div> - </div> + </Spin> </div> <div className="block2"> <Title title="重点作业" /> - <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> + <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> - <div className="label">作业中</div> - <div className="value"> - <CountUp end={+item.count2}></CountUp> + <div> + <div className="label">作业中</div> + <div className="value"> + <CountUp end={+item.count2}></CountUp> + </div> </div> - </div> - <div> - <div className="label">已归档</div> - <div className="value"> - <CountUp end={+item.count3}></CountUp> + <div> + <div className="label">已归档</div> + <div className="value"> + <CountUp end={+item.count3}></CountUp> + </div> </div> </div> </div> - </div> - )) - } + )) + } + </div> </div> - </div> + </Spin> </div> <div className="block3"> <Title title="部门作业统计" /> @@ -115,16 +182,18 @@ function WeiXian() { <div className="td">三人以上作业数</div> </div> <div className="scroll"> - <SeamlessScroll list={block3List} step={0.5}> - {block3List.map((item, index) => ( - <div key={index} className="tr"> - <div className="td">{item.department}</div> - <div className="td">{item.newWork}</div> - <div className="td">{item.dangerousWork}</div> - <div className="td">{item.threeOrMoreWork}</div> - </div> - ))} - </SeamlessScroll> + <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> @@ -140,16 +209,18 @@ function WeiXian() { <div className="td">参与人员数</div> </div> <div className="scroll"> - <SeamlessScroll list={block4List} step={0.5}> - {block4List.map((item, index) => ( - <div key={index} className="tr"> - <div className="td">{item.dangerousWorkCategory}</div> - <div className="td">{item.workCount}</div> - <div className="td">{item.workStatusCount}</div> - <div className="td">{item.personnelCount}</div> - </div> - ))} - </SeamlessScroll> + <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> @@ -158,4 +229,4 @@ function WeiXian() { ); } -export default WeiXian; +export default Connect([NS_BI_STATISTICS], true)(WeiXian);