|
@ -8,11 +8,15 @@ const Right = (props) => { |
|
|
const [beijing, setBeijing] = useState() |
|
|
const [beijing, setBeijing] = useState() |
|
|
const [list, setList] = useState([]) |
|
|
const [list, setList] = useState([]) |
|
|
const [roads, setRoads] = useState() |
|
|
const [roads, setRoads] = useState() |
|
|
|
|
|
const [nums, setNums] = useState() |
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
const daolus = dispatch(getRoadmaintain()).then((res) => { |
|
|
const daolus = dispatch(getRoadmaintain()).then((res) => { |
|
|
setList(res.payload.data.reportList.filter((item, index) => { |
|
|
setList(res.payload.data.reportList.filter((item, index) => { |
|
|
return item.projectType == "bridge" |
|
|
return item.projectType == "bridge" |
|
|
})) |
|
|
})) |
|
|
|
|
|
setNums(res.payload.data.reportCount.filter((item, index) => { |
|
|
|
|
|
return item.projectType == "bridge" |
|
|
|
|
|
})) |
|
|
}) |
|
|
}) |
|
|
}, []) |
|
|
}, []) |
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
@ -55,16 +59,16 @@ 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?.["大桥"])).toFixed(4) * 100}</span>%</p> |
|
|
<p style={{ width: "25%", position: "absolute", right: "1%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF", marginLeft: "10%" }}>{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%" }}> |
|
|
<div style={{ width: (roads?.["大桥"] / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])).toFixed(2) * 100 + "%" || "", height: "40%", backgroundColor: "#fff", float: "left", marginTop: "4%" }}> |
|
|
<div style={{ width: (roads?.["大桥"] / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])).toFixed(2) * 100 + "%" || "", height: "20%", transform: "skewX(-45deg)", backgroundColor: "#fff", float: "left", marginTop: "5.6%" }}> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div style={{ width: (roads?.["中桥"] / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])).toFixed(2) * 100 + "%" || "", height: "20%", backgroundColor: "#df0001", float: "left", marginTop: "5.6%" }}> |
|
|
<div style={{ width: (roads?.["中桥"] / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])).toFixed(2) * 100 + "%" || "", height: "20%", transform: "skewX(-45deg)", backgroundColor: "#df0001", float: "left", marginTop: "5.6%" }}> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div style={{ width: (roads?.["小桥"] / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])).toFixed(2) * 100 + "%" || "", height: "20%", backgroundColor: "#18ABFF", float: "left", marginTop: "5.6%" }}></div> |
|
|
<div style={{ width: (roads?.["小桥"] / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])).toFixed(2) * 100 + "%" || "", height: "20%", transform: "skewX(-45deg)", backgroundColor: "#18ABFF", float: "left", marginTop: "5.6%", borderRadius: "0 2% 2% 0" }}></div> |
|
|
</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> |
|
@ -76,7 +80,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: "23%" }} /> |
|
|
<img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "-1%", top: "23%" }} /> |
|
|
<span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "3%" }}>养护事件</span> |
|
|
<span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "3%" }}>养护事件</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%" }}>187</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 ? nums[0]?.count : []}</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> |
|
|
<Lun |
|
|
<Lun |
|
|