free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

fix 养护道路统计

dev
巴林闲侠 2 years ago
parent
67cf0d8ce2
commit
611efd332d
3 changed files with 97 additions and 86 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 134
      web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js
  2. 4
      web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js
  3. 45
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js

134
web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js
View File

@ -18,67 +18,79 @@ import PieChart from '../chart/pie-chart';
const type = ['culvert', '', 'road', 'bridge'] const type = ['culvert', '', 'road', 'bridge']
const RightBottom = (props) => { const RightBottom = (props) => {
const { roadMaintenances } = props const { roadMaintenances } = props
let totalData = null let totalData = null
let typesNum = null let typesNum = null
const list = roadMaintenances?.reportCount?.map((r, index) => { let list = roadMaintenances?.reportCount?.map((r, index) => {
totalData += Number(r.count) totalData += Number(r.count)
if (r.projectType === 'culvert' || 'road' || 'bridge') { if (r.projectType === 'culvert' || 'road' || 'bridge') {
typesNum += Number(r.count) typesNum += Number(r.count)
} }
switch (r.projectType) { switch (r.projectType) {
case 'road': case 'road':
return { case 'countyRoad':
name: '道路', case 'villageRoad':
value: r.count, case 'rusticRoad':
colorList: 'rgba(7,185,254,1)', return {
underColorList: 'rgba(7,185,254,0.5)' name: '道路',
value: r.count,
colorList: 'rgba(7,185,254,1)',
underColorList: 'rgba(7,185,254,0.5)'
}; };
case 'culvert': case 'culvert':
return { return {
name: '涵洞', name: '涵洞',
value: r.count, value: r.count,
colorList: 'rgba(4,251,240,1)', colorList: 'rgba(4,251,240,1)',
underColorList: 'rgba(4,251,240,0.5)' underColorList: 'rgba(4,251,240,0.5)'
}; };
case 'bridge': case 'bridge':
return { return {
name: '桥梁', name: '桥梁',
value: r.count, value: r.count,
colorList: 'rgba(28,96,254,1)', colorList: 'rgba(28,96,254,1)',
underColorList: 'rgba(28,96,254,0.5)' underColorList: 'rgba(28,96,254,0.5)'
}; };
case 'other': case 'other':
return { return {
name: '其他', name: '其他',
value: r.count, value: r.count,
colorList: 'rgba(255,194,20,1)', colorList: 'rgba(255,194,20,1)',
underColorList: 'rgba(255,194,20,0.5)' underColorList: 'rgba(255,194,20,0.5)'
}; };
} }
}).filter(f => f !== undefined) }).filter(f => f !== undefined)
console.log('list:',list);
let colorList = list?.map(c => c.colorList) list = list?.reduce((pre, cur) => {
let underColorList =list?.map(c => c.underColorList) let existIndex = pre.findIndex(p => p.name == cur.name)
const style = { height: "31%", marginTop: "3%" } if (existIndex > -1) {
return ( pre[existIndex].value = parseInt(pre[existIndex].value) + parseInt(cur.value)
<> } else {
<Module style={style} title={"养护完成情况"}> pre.push(cur)
{/* <div ref = {chartRef} style={{ width: '100%', height: '100%' }}></div> */} }
<PieChart return pre
data={list} }, [])
width='100%' let colorList = list?.map(c => c.colorList)
height='100%' let underColorList = list?.map(c => c.underColorList)
text='养护总数' const style = { height: "31%", marginTop: "3%" }
textLeft={'21%'} return (
numLeft={'22%'} <>
total={totalData || 0} <Module style={style} title={"养护完成情况"}>
colorList={colorList} {/* <div ref = {chartRef} style={{ width: '100%', height: '100%' }}></div> */}
underColorList={underColorList} <PieChart
/> data={list}
</Module> width='100%'
</> height='100%'
) text='养护总数'
textLeft={'21%'}
numLeft={'22%'}
total={totalData || 0}
colorList={colorList}
underColorList={underColorList}
/>
</Module>
</>
)
} }
export default RightBottom export default RightBottom

4
web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js
View File

@ -4,7 +4,7 @@ import Module from '../../../public/module'
import { connect } from 'react-redux' import { connect } from 'react-redux'
import Lun from "../../leadership/right/lunbo" import Lun from "../../leadership/right/lunbo"
import { getRoadmaintain } from "../../../../actions/example" import { getRoadmaintain } from "../../../../actions/example"
import Hua from "../../leadership/right/hudong" import Hua from "../../leadership/centerleft/hudong"
import moment from 'moment' import moment from 'moment'
const iconSrc = [ const iconSrc = [
@ -48,7 +48,7 @@ const RightTop = (props) => {
useEffect(() => { useEffect(() => {
dispatch(getRoadmaintain()).then((res) => { dispatch(getRoadmaintain()).then((res) => {
setRoadmaintainList(res.payload.data.reportList.filter((item, index) => { setRoadmaintainList(res.payload.data.reportList.filter((item, index) => {
return item.projectType == "road" return item.projectType == "road" || item.projectType == "countyRoad" || item.projectType == "villageRoad" || item.projectType == "rusticRoad"
})) }))
}) })
}, []) }, [])

45
web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js
View File

@ -16,16 +16,15 @@ const Right = (props) => {
const [shuzu, setShuzu] = useState([]) const [shuzu, setShuzu] = useState([])
useEffect(() => { useEffect(() => {
const daolus = dispatch(getRoadmaintain()).then((res) => { const daolus = dispatch(getRoadmaintain()).then((res) => {
// console.log(res);
setList(res.payload.data.reportList.filter((item, index) => { setList(res.payload.data.reportList.filter((item, index) => {
return item.projectType == "road" || item.projectType == "countyRoad" || item.projectType == "villageRoad" || item.projectType == "rusticRoad"
return item.projectType == "road"
}))
setNums(res.payload.data.reportCount.filter((item, index) => {
return item.projectType == "road"
})) }))
// console.log(res.payload.data); setNums(res.payload.data.reportCount.reduce((count, item) => {
if (item.projectType == "road" || item.projectType == "countyRoad" || item.projectType == "villageRoad" || item.projectType == "rusticRoad") {
count += parseInt(item.count)
}
return count
}, 0))
}) })
}, []) }, [])
useEffect(() => { useEffect(() => {
@ -35,7 +34,7 @@ const Right = (props) => {
// const // const
}) })
}, []) }, [])
// console.log("1211", nums); console.log("1211", nums);
const renderBody = () => { const renderBody = () => {
return ( return (
@ -64,18 +63,19 @@ const Right = (props) => {
<p style={{ textAlign: "left", width: "25%", position: "absolute", left: "5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.road ? item.road : "--"}</p> <p style={{ textAlign: "left", width: "25%", position: "absolute", left: "5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.road ? item.road : "--"}</p>
<p style={{ textAlign: "right", width: "30%", position: "absolute", right: "3%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }}>{moment(item.time).format("YYYY-MM-DD HH:mm:ss") ? moment(item.time).format("YYYY-MM-DD HH:mm:ss") : "--"}</p> <p style={{ textAlign: "right", width: "30%", position: "absolute", right: "3%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }}>{moment(item.time).format("YYYY-MM-DD HH:mm:ss") ? moment(item.time).format("YYYY-MM-DD HH:mm:ss") : "--"}</p>
{ {
num == index ? <div style={{ position: "fixed", width: "400px", height: "200px", zIndex: 100, left: "50%", marginTop: "0", top: "35%" }}> num == index ?
<img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} /> <div style={{ position: "fixed", width: "400px", height: "200px", zIndex: 100, left: "50%", marginTop: "0", top: "35%" }}>
<div style={{ width: "50%", height: "100%", position: "absolute", top: "0", }}> <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} />
<Hua shuzu={[{ "imgs": item.conserveAfterPic ? item.conserveAfterPic[0] : "" }, { "imgs": item.conserveBeforePic ? item.conserveBeforePic[0] : "" }, { "imgs": item.conserveUnderwayPic ? item.conserveUnderwayPic[0] : "" }]} /> <div style={{ width: "50%", height: "100%", position: "absolute", top: "0", }}>
</div> <Hua shuzu={[{ "imgs": item.conserveAfterPic ? item.conserveAfterPic[0] : "" }, { "imgs": item.conserveBeforePic ? item.conserveBeforePic[0] : "" }, { "imgs": item.conserveUnderwayPic ? item.conserveUnderwayPic[0] : "" }]} />
<div style={{ position: "absolute", top: "0", width: "50%", left: "50%", paddingRight: "10px" }}> </div>
<p style={{ marginTop: "20px", color: "#FFFFFF", fontSize: "16px", fontFamily: "YouSheBiaoTiHei" }}>{item.roadSectionStart ? item.roadSectionStart : ""}{item.roadSectionStart && item.roadSectionEnd ? "——" : ""}{item.roadSectionEnd ? item.roadSectionEnd : ""}{item.roadSectionStart || item.roadSectionEnd ? "" : "--"}</p> <div style={{ position: "absolute", top: "0", width: "50%", left: "50%", paddingRight: "10px" }}>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>养护类型<span style={{ color: "#EEF4FF", marginLeft: "30px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>日常养护</span></p> <p style={{ marginTop: "20px", color: "#FFFFFF", fontSize: "16px", fontFamily: "YouSheBiaoTiHei" }}>{item.roadSectionStart ? item.roadSectionStart : ""}{item.roadSectionStart && item.roadSectionEnd ? "——" : ""}{item.roadSectionEnd ? item.roadSectionEnd : ""}{item.roadSectionStart || item.roadSectionEnd ? "" : "--"}</p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>负责人<span style={{ color: "#EEF4FF", marginLeft: "45px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.user?.name ? item.user.name : "--"}</span></p> <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>养护类型<span style={{ color: "#EEF4FF", marginLeft: "30px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>日常养护</span></p>
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>日期<span style={{ color: "#EEF4FF", marginLeft: "60px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{moment(item.time).format("YYYY-MM-DD") ? moment(item.time).format("YYYY-MM-DD") : "--"}</span></p> <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>负责人<span style={{ color: "#EEF4FF", marginLeft: "45px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.user?.name ? item.user.name : "--"}</span></p>
</div> <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>日期<span style={{ color: "#EEF4FF", marginLeft: "60px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{moment(item.time).format("YYYY-MM-DD") ? moment(item.time).format("YYYY-MM-DD") : "--"}</span></p>
</div> : "" </div>
</div> : ""
} }
</li> </li>
) )
@ -88,7 +88,6 @@ const Right = (props) => {
} }
return ( return (
<> <>
{/* <Spin spinning={!nums && list && roads} tip="Loading" size="large" > */}
<div style={{ width: "100%", height: "100%", float: "right", marginRight: "1%", position: "relative" }}> <div style={{ width: "100%", height: "100%", float: "right", marginRight: "1%", position: "relative" }}>
<div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}> <div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}>
@ -118,7 +117,7 @@ const Right = (props) => {
{/* <p>{title || []}</p> */} {/* <p>{title || []}</p> */}
<img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "-1%", top: "18%" }} /> <img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "-1%", top: "18%" }} />
<span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "19px" }}>养护事件</span> <span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "19px" }}>养护事件</span>
<p style={{ position: "absolute", color: "#D8F0FF", fontSize: "14px", right: "6%" }}><span style={{ marginLeft: "-20%" }}>道路</span><span style={{ fontSize: "18px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", marginLeft: "10%" }}>{nums ? nums[0]?.count : 0}</span><span style={{ marginLeft: "10%" }}>次</span></p> <p style={{ position: "absolute", color: "#D8F0FF", fontSize: "14px", right: "6%" }}><span style={{ marginLeft: "-20%" }}>道路</span><span style={{ fontSize: "18px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", marginLeft: "10%" }}>{nums}</span><span style={{ marginLeft: "10%" }}>次</span></p>
{/* <img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "34px", position: "absolute", top: "12px", left: "6%" }} /> */} {/* <img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "34px", position: "absolute", top: "12px", left: "6%" }} /> */}
</div> </div>
{/* <Spin spinning={true} style={{ height: "80%" }}> */} {/* <Spin spinning={true} style={{ height: "80%" }}> */}

Write Preview
Loading…
Cancel
Save