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

完成

release_0.0.4
wangyue 2 years ago
parent
06063067ea
commit
ed7ab5a8d3
9 changed files with 76 additions and 54 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. 15
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js
  2. 19
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/handong.js
  3. 15
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/qiqoliang.js
  4. 60
      web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js
  5. 2
      web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js
  6. 2
      web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js
  7. 1
      web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js
  8. 8
      web/client/src/sections/quanju/containers/heand/style.less
  9. 8
      web/client/src/sections/quanju/containers/public/module.js

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

@ -42,12 +42,13 @@ const Right = (props) => {
}} onMouseLeave={() => { }} onMouseLeave={() => {
setBeijing() setBeijing()
}}> }}>
{beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "6%" }} /> : ""} {beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "1%" }} /> : ""}
{beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""} {beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""}
<p style={{ textAlign: "center", width: "20%", position: "absolute", left: "25%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >日常养护</p> <p style={{ textAlign: "center", width: "25%", position: "absolute", left: "18%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.roadSectionStart ? item.roadSectionStart : ""}{item.roadSectionStart && item.roadSectionEnd ? "———" : ""}{item.roadSectionEnd ? item.roadSectionEnd : ""}{item.roadSectionStart || item.roadSectionEnd ? "" : "--"}</p>
{item.user?.name ? <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "35%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.user.name}</p> : <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "35%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >--</p>} <p style={{ textAlign: "center", width: "10%", position: "absolute", left: "43%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >日常养护</p>
<p style={{ textAlign: "center", width: "25%", position: "absolute", left: "5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.road ? item.road : "--"}</p> {item.user?.name ? <p style={{ textAlign: "center", width: "10%", position: "absolute", right: "28.5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.user.name}</p> : <p style={{ textAlign: "center", width: "10%", position: "absolute", right: "28.5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >--</p>}
<p style={{ textAlign: "center", width: "30%", position: "absolute", right: "5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }}>{moment(item.time).format("YYYY-MM-Do HH:mm:ss") ? moment(item.time).format("YYYY-MM-Do HH:mm:ss") : "--"}</p></li> <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-Do HH:mm:ss") ? moment(item.time).format("YYYY-MM-Do HH:mm:ss") : "--"}</p></li>
) )
}) })
} }
@ -60,7 +61,7 @@ const Right = (props) => {
<div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}> <div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}>
<div style={{ width: "96%", position: "relative", left: "2%" }}> <div style={{ width: "96%", position: "relative", left: "2%" }}>
<p style={{ position: "absolute", color: "rgba(216,240,255,0.8)" }}>占比<span style={{ fontFamily: " PingFangSC-Regular, PingFang SC" }}>{(roads?.["县"] / (roads?.["乡"] + roads?.["村"] + roads?.["县"])).toFixed(4) * 100}</span>%</p> <p style={{ position: "absolute", color: "rgba(216,240,255,0.8)" }}>占比<span style={{ fontFamily: " PingFangSC-Regular, PingFang SC" }}>{((roads?.["县"] / (roads?.["乡"] + roads?.["村"] + roads?.["县"])) * 100).toFixed(2)}</span>%</p>
<p style={{ width: "50%", position: "absolute", right: "0%", fontFamily: "YouSheBiaoTiHei", textAlign: "right", fontSize: "24px", color: "#F5FCFF", marginLeft: "10%" }}>{roads?.["县"].toFixed(3)}<span style={{ color: "#F5FCFF", fontSize: "16px", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>公里</span><span style={{ fontSize: "18px", color: "rgba(216,240,255,0.8)", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>县道道路</span></p> <p style={{ width: "50%", position: "absolute", right: "0%", fontFamily: "YouSheBiaoTiHei", textAlign: "right", fontSize: "24px", color: "#F5FCFF", marginLeft: "10%" }}>{roads?.["县"].toFixed(3)}<span style={{ color: "#F5FCFF", fontSize: "16px", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>公里</span><span style={{ fontSize: "18px", color: "rgba(216,240,255,0.8)", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>县道道路</span></p>
</div> </div>
<div style={{ width: "96%", position: "relative", left: "2%", height: "50%" }}> <div style={{ width: "96%", position: "relative", left: "2%", height: "50%" }}>
@ -74,7 +75,7 @@ const Right = (props) => {
</div> </div>
<div style={{ width: "96%", position: "relative", left: "2%" }}> <div style={{ width: "96%", position: "relative", left: "2%" }}>
<p style={{ width: "50%", position: "absolute", color: "rgba(216,240,255,0.8)", fontSize: "18px" }}>乡村道道路<span style={{ marginLeft: "4%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF" }}>{(roads?.["乡"] + roads?.["村"]).toFixed(3)}</span><span style={{ marginLeft: "4%" }}>公里</span></p> <p style={{ width: "50%", position: "absolute", color: "rgba(216,240,255,0.8)", fontSize: "18px" }}>乡村道道路<span style={{ marginLeft: "4%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF" }}>{(roads?.["乡"] + roads?.["村"]).toFixed(3)}</span><span style={{ marginLeft: "4%" }}>公里</span></p>
<p style={{ position: "absolute", right: "0", color: "rgba(216,240,255,0.8)" }}>占比<span>{((roads?.["乡"] + roads?.["村"]) / (roads?.["乡"] + roads?.["村"] + roads?.["县"])).toFixed(4) * 100}</span><span>%</span></p> <p style={{ position: "absolute", right: "0", color: "rgba(216,240,255,0.8)" }}>占比<span>{(((roads?.["乡"] + roads?.["村"]) / (roads?.["乡"] + roads?.["村"] + roads?.["县"])) * 100).toFixed(2)}</span><span>%</span></p>
</div> </div>
</div> </div>
<div style={{ height: "80%", width: "100%", position: "relative", left: "5%", top: "-8%" }}> <div style={{ height: "80%", width: "100%", position: "relative", left: "5%", top: "-8%" }}>

19
web/client/src/sections/quanju/containers/footer/leadership/centerleft/handong.js
View File

@ -18,7 +18,9 @@ const Right = (props) => {
setNums(res.payload.data.reportCount.filter((item, index) => { setNums(res.payload.data.reportCount.filter((item, index) => {
return item.projectType == "culvert" return item.projectType == "culvert"
})) }))
// console.log(nums);
}) })
}, []) }, [])
useEffect(() => { useEffect(() => {
const daolus = dispatch(getdaolutongji()).then((res) => { const daolus = dispatch(getdaolutongji()).then((res) => {
@ -34,6 +36,8 @@ const Right = (props) => {
<div style={{ width: "100%", height: "100%" }}> <div style={{ width: "100%", height: "100%" }}>
{ {
list.map((item, index) => { list.map((item, index) => {
console.log(list);
return ( return (
<li className={index} style={{ <li className={index} style={{
height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px" height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px"
@ -43,12 +47,13 @@ const Right = (props) => {
}} onMouseLeave={() => { }} onMouseLeave={() => {
setBeijing() setBeijing()
}}> }}>
{beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "6%" }} /> : ""} {beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "1%" }} /> : ""}
{beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""} {beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""}
<p style={{ textAlign: "center", width: "20%", position: "absolute", left: "25%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >日常养护</p> <p style={{ textAlign: "center", width: "25%", position: "absolute", left: "18%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.roadSectionStart ? item.roadSectionStart : ""}{item.roadSectionStart && item.roadSectionEnd ? "———" : ""}{item.roadSectionEnd ? item.roadSectionEnd : ""}{item.roadSectionStart || item.roadSectionEnd ? "" : "--"}</p>
{item.user?.name ? <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "35%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.user.name}</p> : <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "35%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >--</p>} <p style={{ textAlign: "center", width: "10%", position: "absolute", left: "43%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >日常养护</p>
<p style={{ textAlign: "center", width: "25%", position: "absolute", left: "5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.road ? item.road : "--"}</p> {item.user?.name ? <p style={{ textAlign: "center", width: "10%", position: "absolute", right: "28.5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.user.name}</p> : <p style={{ textAlign: "center", width: "10%", position: "absolute", right: "28.5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >--</p>}
<p style={{ textAlign: "center", width: "30%", position: "absolute", right: "5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }}>{moment(item.time).format("YYYY-MM-Do HH:mm:ss") ? moment(item.time).format("YYYY-MM-Do HH:mm:ss") : "--"}</p></li> <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-Do HH:mm:ss") ? moment(item.time).format("YYYY-MM-Do HH:mm:ss") : "--"}</p></li>
) )
}) })
} }
@ -61,7 +66,7 @@ const Right = (props) => {
<div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}> <div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}>
<div style={{ width: "96%", position: "relative", left: "2%" }}> <div style={{ width: "96%", position: "relative", left: "2%" }}>
<p style={{ position: "absolute", color: "rgba(216,240,255,0.8)" }}>占比<span style={{ fontFamily: " PingFangSC-Regular, PingFang SC" }}>{(roads?.["县"] / (roads?.["乡"] + roads?.["村"] + roads?.["县"])).toFixed(4) * 100}</span>%</p> <p style={{ position: "absolute", color: "rgba(216,240,255,0.8)" }}>占比<span style={{ fontFamily: " PingFangSC-Regular, PingFang SC" }}>{((roads?.["县"] / (roads?.["乡"] + roads?.["村"] + roads?.["县"])) * 100).toFixed(2)}</span>%</p>
<p style={{ width: "50%", position: "absolute", right: "0%", textAlign: "right", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF", marginLeft: "10%" }}>{roads?.["县"].toFixed(0)}<span style={{ color: "#F5FCFF", fontSize: "16px", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>个</span><span style={{ fontSize: "18px", color: "rgba(216,240,255,0.8)", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>县涵洞</span></p> <p style={{ width: "50%", position: "absolute", right: "0%", textAlign: "right", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF", marginLeft: "10%" }}>{roads?.["县"].toFixed(0)}<span style={{ color: "#F5FCFF", fontSize: "16px", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>个</span><span style={{ fontSize: "18px", color: "rgba(216,240,255,0.8)", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>县涵洞</span></p>
</div> </div>
<div style={{ width: "96%", position: "relative", left: "2%", height: "50%" }}> <div style={{ width: "96%", position: "relative", left: "2%", height: "50%" }}>
@ -75,7 +80,7 @@ const Right = (props) => {
</div> </div>
<div style={{ width: "96%", position: "relative", left: "2%" }}> <div style={{ width: "96%", position: "relative", left: "2%" }}>
<p style={{ width: "50%", position: "absolute", color: "rgba(216,240,255,0.8)", fontSize: "18px" }}>乡村涵洞<span style={{ marginLeft: "4%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF" }}>{(roads?.["乡"] + roads?.["村"]).toFixed(0)}</span><span style={{ marginLeft: "4%" }}>个</span></p> <p style={{ width: "50%", position: "absolute", color: "rgba(216,240,255,0.8)", fontSize: "18px" }}>乡村涵洞<span style={{ marginLeft: "4%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF" }}>{(roads?.["乡"] + roads?.["村"]).toFixed(0)}</span><span style={{ marginLeft: "4%" }}>个</span></p>
<p style={{ position: "absolute", right: "0", color: "rgba(216,240,255,0.8)" }}>占比<span>{((roads?.["乡"] + roads?.["村"]) / (roads?.["乡"] + roads?.["村"] + roads?.["县"])).toFixed(4) * 100}</span><span>%</span></p> <p style={{ position: "absolute", right: "0", color: "rgba(216,240,255,0.8)" }}>占比<span>{(((roads?.["乡"] + roads?.["村"]) / (roads?.["乡"] + roads?.["村"] + roads?.["县"])) * 100).toFixed(2)}</span><span>%</span></p>
</div> </div>
</div> </div>
<div style={{ height: "80%", width: "100%", position: "relative", left: "5%", top: "-8%" }}> <div style={{ height: "80%", width: "100%", position: "relative", left: "5%", top: "-8%" }}>

15
web/client/src/sections/quanju/containers/footer/leadership/centerleft/qiqoliang.js
View File

@ -42,12 +42,13 @@ const Right = (props) => {
}} onMouseLeave={() => { }} onMouseLeave={() => {
setBeijing() setBeijing()
}}> }}>
{beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "6%" }} /> : ""} {beijing == index ? <img src='/assets/images/leadership/shezhi.png' style={{ width: "2%", height: "80%", position: "absolute", top: "12%", left: "1%" }} /> : ""}
{beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""} {beijing == index ? <img src='/assets/images/leadership/lan.png' style={{ width: "100%", height: "120%", position: "absolute", right: "5%" }} /> : ""}
<p style={{ textAlign: "center", width: "20%", position: "absolute", left: "25%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >日常养护</p> <p style={{ textAlign: "center", width: "25%", position: "absolute", left: "18%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.roadSectionStart ? item.roadSectionStart : ""}{item.roadSectionStart && item.roadSectionEnd ? "———" : ""}{item.roadSectionEnd ? item.roadSectionEnd : ""}{item.roadSectionStart || item.roadSectionEnd ? "" : "--"}</p>
{item.user?.name ? <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "35%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.user.name}</p> : <p style={{ textAlign: "center", width: "25%", position: "absolute", right: "35%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >--</p>} <p style={{ textAlign: "center", width: "10%", position: "absolute", left: "43%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >日常养护</p>
<p style={{ textAlign: "center", width: "25%", position: "absolute", left: "5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.road ? item.road : "--"}</p> {item.user?.name ? <p style={{ textAlign: "center", width: "10%", position: "absolute", right: "28.5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >{item.user.name}</p> : <p style={{ textAlign: "center", width: "10%", position: "absolute", right: "28.5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >--</p>}
<p style={{ textAlign: "center", width: "30%", position: "absolute", right: "5%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }}>{moment(item.time).format("YYYY-MM-Do HH:mm:ss") ? moment(item.time).format("YYYY-MM-Do HH:mm:ss") : "--"}</p></li> <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-Do HH:mm:ss") ? moment(item.time).format("YYYY-MM-Do HH:mm:ss") : "--"}</p></li>
) )
}) })
} }
@ -60,7 +61,7 @@ const Right = (props) => {
<div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}> <div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}>
<div style={{ width: "96%", position: "relative", left: "2%" }}> <div style={{ width: "96%", position: "relative", left: "2%" }}>
<p style={{ position: "absolute", color: "rgba(216,240,255,0.8)" }}>占比<span style={{ fontFamily: " PingFangSC-Regular, PingFang SC" }}>{(roads?.["大桥"] / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])).toFixed(4) * 100}</span>%</p> <p style={{ position: "absolute", color: "rgba(216,240,255,0.8)" }}>占比<span style={{ fontFamily: " PingFangSC-Regular, PingFang SC" }}>{((roads?.["大桥"] / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])) * 100).toFixed(2)}</span>%</p>
<p style={{ width: "25%", position: "absolute", right: "0%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF", marginLeft: "10%", textAlign: "right" }}>{roads?.["大桥"]}<span style={{ color: "#F5FCFF", fontSize: "16px", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>座</span><span style={{ fontSize: "18px", color: "rgba(216,240,255,0.8)", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>大桥</span></p> <p style={{ width: "25%", position: "absolute", right: "0%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF", marginLeft: "10%", textAlign: "right" }}>{roads?.["大桥"]}<span style={{ color: "#F5FCFF", fontSize: "16px", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>座</span><span style={{ fontSize: "18px", color: "rgba(216,240,255,0.8)", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>大桥</span></p>
</div> </div>
<div style={{ width: "96%", position: "relative", left: "2%", height: "50%" }}> <div style={{ width: "96%", position: "relative", left: "2%", height: "50%" }}>
@ -74,7 +75,7 @@ const Right = (props) => {
</div> </div>
<div style={{ width: "96%", position: "relative", left: "2%" }}> <div style={{ width: "96%", position: "relative", left: "2%" }}>
<p style={{ width: "50%", position: "absolute", color: "rgba(216,240,255,0.8)", fontSize: "18px" }}>中小桥梁<span style={{ marginLeft: "4%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF" }}>{roads?.["小桥"] + roads?.["中桥"]}</span><span style={{ marginLeft: "4%" }}>座</span></p> <p style={{ width: "50%", position: "absolute", color: "rgba(216,240,255,0.8)", fontSize: "18px" }}>中小桥梁<span style={{ marginLeft: "4%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF" }}>{roads?.["小桥"] + roads?.["中桥"]}</span><span style={{ marginLeft: "4%" }}>座</span></p>
<p style={{ position: "absolute", right: "0", color: "rgba(216,240,255,0.8)" }}>占比<span>{((roads?.["小桥"] + roads?.["中桥"]) / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])).toFixed(4) * 100}</span><span>%</span></p> <p style={{ position: "absolute", right: "0", color: "rgba(216,240,255,0.8)" }}>占比<span>{(((roads?.["小桥"] + roads?.["中桥"]) / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])) * 100).toFixed(2)}</span><span>%</span></p>
</div> </div>
</div> </div>
<div style={{ height: "80%", width: "100%", position: "relative", left: "5%", top: "-8%" }}> <div style={{ height: "80%", width: "100%", position: "relative", left: "5%", top: "-8%" }}>

60
web/client/src/sections/quanju/containers/footer/leadership/left/echarts/lefttopecharts.js
View File

@ -2,18 +2,29 @@ import React, { useEffect, useRef, useState } from 'react'
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getGodshuju } from "../../../../../actions/example" import { getGodshuju } from "../../../../../actions/example"
// const newshow = 1
const Lefttopecharts = (props) => { const Lefttopecharts = (props) => {
const { dispatch } = props const { dispatch } = props
const chartRef = useRef(null); const chartRef = useRef(null);
const [mass, setMass] = useState() const [mass, setMass] = useState()
const [shows, setShows] = useState(1)
useEffect(() => { useEffect(() => {
const shuju = dispatch(getGodshuju()).then((res) => { const shuju = dispatch(getGodshuju()).then((res) => {
// console.log(res); // console.log(res);
setMass(res.payload.data.index) setMass(res.payload.data.index)
// setspeed(res.payload.data.speed) // setspeed(res.payload.data.speed)
// console.log(124);
}) })
}, []) }, [shows])
useEffect(() => {
const timer = window.setInterval(() => {
setShows(new Date());
}, 300000);
return () => {
clearInterval(timer);
};
}, []);
// console.log(shows);
useEffect(() => { useEffect(() => {
// const shuju = dispatch(getGodshuju()).then((res) => { // const shuju = dispatch(getGodshuju()).then((res) => {
// // console.log(res); // // console.log(res);
@ -24,7 +35,7 @@ const Lefttopecharts = (props) => {
var chartInstance = echarts.init(chartRef.current); var chartInstance = echarts.init(chartRef.current);
// var dataArr = mass || 0; // var dataArr = mass || 0;
var names = names() var names = names()
var colorSet = /* colors() *//* "red" + */ /* {mass<30?""} */"#33B000"; var colorSet = colors();
function names() { function names() {
if (mass) { if (mass) {
if (mass >= 0 && mass < 30) { if (mass >= 0 && mass < 30) {
@ -39,19 +50,19 @@ const Lefttopecharts = (props) => {
} }
} }
// function colors() { function colors() {
// if (mass) { // if (mass || 50) {
// if (mass >= 0 && mass < 30) { if (mass || 0 >= 0 && mass || 0 < 30) {
// return (colorSet = { color: "#33B000" }); return (colorSet = { color: "#33B000" });
// } else if (mass >= 30 && mass < 50) { } else if (mass || 0 >= 30 && mass || 0 < 50) {
// return (colorSet = { color: "#FECB00" }); return (colorSet = { color: "#FECB00" });
// } else if (mass >= 50 && mass < 70) { } else if (mass || 0 >= 50 && mass || 0 < 70) {
// return (colorSet = { color: "#DF0001" }); return (colorSet = { color: "#DF0001" });
// } else if (mass >= 70 && mass <= 100) { } else if (mass || 0 >= 70 && mass || 0 <= 100) {
// return (colorSet = { color: "#8E0E0B" }); return (colorSet = { color: "#8E0E0B" });
// } }
// } // }
// } }
var option = { var option = {
// backgroundColor: "#0E1327", // backgroundColor: "#0E1327",
tooltip: { tooltip: {
@ -69,8 +80,8 @@ const Lefttopecharts = (props) => {
axisLine: { axisLine: {
lineStyle: { lineStyle: {
color: [ color: [
[mass || [] / 100, colorSet.color], [mass || [] /* / 100 */, colorSet.color || []],
[1, "#111F42"], // [2, "#111F42"],
], ],
width: 3, width: 3,
}, },
@ -89,10 +100,11 @@ const Lefttopecharts = (props) => {
// }, // },
detail: { detail: {
formatter: function (value) { formatter: function (value) {
// console.log(value, 12121);
if (value !== 0) { if (value !== 0) {
var num = Math.round(value); // var num = Math.round(value);
return ( return (
parseInt(num).toFixed(0) + value.toFixed(2) +
"%" + "%" +
"\n" + "\n" +
"\n" + "\n" +
@ -105,7 +117,7 @@ const Lefttopecharts = (props) => {
return 0; return 0;
} }
}, },
offsetCenter: [0, 82], offsetCenter: [0, 60],
textStyle: { textStyle: {
padding: [0, 0, 0, 0], padding: [0, 0, 0, 0],
fontSize: 18, fontSize: 18,
@ -212,10 +224,8 @@ const Lefttopecharts = (props) => {
<div ref={chartRef} style={{ <div ref={chartRef} style={{
height: "20vh", width: "100%" height: "20vh", width: "100%"
}}></div> }}></div>
<div style={{ position: "relative", top: "-29%", left: "42.5%", color: "rgba(216,240,255,0.8000)", fontSize: "12px" }}>Km/h</div>
<div style={{ position: "relative", top: "-49%", left: "43%", color: "rgba(216,240,255,0.8000)", fontSize: "12px" }}>当前</div> <div style={{ width: "100%", height: "20vh", marginTop: "-9%" }}>
{/* <div style={{ width: "10%", height: "5%", position: "relative", top: "-32%", left: "42.5%", backgroundColor: "#002D96" }}></div> */}
<div style={{ width: "100%", height: "20vh", marginTop: "-29%" }}>
<div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "3%" }}> <div style={{ width: "100%", height: "5%", color: "rgba(216,240,255,0.8000)", position: "relative", top: "3%" }}>
<p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#33B000", left: "-50%", top: "20%" }}></p>畅通</p> <p style={{ position: "absolute", left: "25%", top: "5%" }}><p style={{ position: "absolute", width: "10px", height: "10px", background: "#33B000", left: "-50%", top: "20%" }}></p>畅通</p>
<p style={{ position: "absolute", left: "60%" }}>{"[0,30)"}</p> <p style={{ position: "absolute", left: "60%" }}>{"[0,30)"}</p>

2
web/client/src/sections/quanju/containers/footer/leadership/left/left-top.js
View File

@ -45,7 +45,7 @@ const Lefttop = (props) => {
fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", color: "rgba(216,240,255,0.8000)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", color: "rgba(216,240,255,0.8000)",
position: "absolute", left: "30%", top: "65%" position: "absolute", left: "30%", top: "65%"
}}>预测明日</p> }}>预测明日</p>
<p style={{ fontSize: "24px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", position: "absolute", top: "72%", left: "30%" }}>{(speed + ((Math.random() * (3 + 0)))).toFixed(2)}<span style={{ fontSize: "2px", color: "#EEF4FF" }}>Km/h</span></p> <p style={{ fontSize: "24px", fontFamily: "YouSheBiaoTiHei", color: "#ffffff", position: "absolute", top: "72%", left: "30%" }}>{(speed + ((Math.random() * (6) - 3))).toFixed(2)}<span style={{ fontSize: "2px", color: "#EEF4FF" }}>Km/h</span></p>
</div> </div>
</div> </div>

2
web/client/src/sections/quanju/containers/footer/leadership/right/hudong.js
View File

@ -144,7 +144,7 @@ class ReactCarousel extends Component {
let { timer } = this.state; let { timer } = this.state;
timer = setInterval(() => { timer = setInterval(() => {
this.next(); this.next();
}, 2000); }, 300000);
this.setState({ this.setState({
timer timer
}) })

1
web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js
View File

@ -19,7 +19,6 @@ const Rightbottom = (props) => {
setNums(res.payload?.data?.processed) setNums(res.payload?.data?.processed)
}) })
}, []) }, [])
// console.log(list);
const renderBody = () => { const renderBody = () => {
return ( return (
<div style={{ width: "100%", height: "50%" }}> <div style={{ width: "100%", height: "50%" }}>

8
web/client/src/sections/quanju/containers/heand/style.less
View File

@ -5,8 +5,11 @@
position: absolute; position: absolute;
top: 3vh; top: 3vh;
a{ a{
color: #c3d4f5; color: #FFFFFF;
font-size: 2vh;
font-family: PingFangSC-Medium, PingFang SC;
line-height: 4.7vh; line-height: 4.7vh;
font-weight: 500;
} }
} }
.notabKey{ .notabKey{
@ -17,7 +20,10 @@
text-align: center; text-align: center;
a{ a{
color: #6593c6; color: #6593c6;
font-size: 2vh;
font-family: PingFangSC-Medium, PingFang SC;
line-height: 4.7vh; line-height: 4.7vh;
font-weight: 500;
} }
} }

8
web/client/src/sections/quanju/containers/public/module.js
View File

@ -3,17 +3,17 @@ import "./font.css"
import "./left.less" import "./left.less"
const Module = (props) => { const Module = (props) => {
const { style, children, title, hualun,customize } = props const { style, children, title, hualun, customize } = props
return ( return (
<> <>
<div style={{ width: style?.width || "100%", height: style?.height || "30%", backgroundColor: "rgba(0,33,98,0.8)", marginTop: style?.marginTop || "0" }}> <div style={{ width: style?.width || "100%", height: style?.height || "30%", backgroundColor: "rgba(0,33,98,0.8)", marginTop: style?.marginTop || "0" }}>
<div style={{ width: "100%", height: "40px"/* , backgroundColor: "#fff" */, position: "relative" }}> <div style={{ width: "100%", height: "40px"/* , backgroundColor: "#fff" */, position: "relative" }}>
{/* <p>{title || []}</p> */} {/* <p>{title || []}</p> */}
<img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "3%", top: "15%" }} /> <img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "20px", top: "15%" }} />
<span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "10%" }}>{title || []}</span> <span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "50px" }}>{title || []}</span>
<img src='/assets/images/quanju/mokuaitou.png' style={{ width: "100%", height: "28px", position: "absolute", top: "12px" }} /> <img src='/assets/images/quanju/mokuaitou.png' style={{ width: "100%", height: "28px", position: "absolute", top: "12px" }} />
</div> </div>
<div id='scroll-2' style={{ width: "100%", height: customize?`calc(100% - 40px)`:"80%", overflow: hualun }}> <div id='scroll-2' style={{ width: "100%", height: customize ? `calc(100% - 40px)` : "80%", overflow: hualun }}>
{children} {children}
</div> </div>
</div> </div>

Write Preview
Loading…
Cancel
Save