|
|
@ -61,8 +61,8 @@ const Right = (props) => { |
|
|
|
|
|
|
|
<div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}> |
|
|
|
<div style={{ width: "96%", position: "relative", left: "2%" }}> |
|
|
|
<p style={{ position: "absolute", color: "rgba(216,240,255,0.8)", top: "10px" }}>占比<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={{ position: "absolute", color: "rgba(216,240,255,0.8)", top: "10px" }}>占比<span style={{ fontFamily: " PingFangSC-Regular, PingFang SC" }}>{isNaN(((roads?.["大桥"] / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])) * 100).toFixed(2)) ? "" : ((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" }}>{isNaN(roads?.["大桥"]) ? "" : 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 style={{ width: "96%", position: "relative", left: "2%", height: "50%" }}> |
|
|
|
<div style={{ width: parseInt((roads?.["大桥"] / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])) * 100) + "%" || "", height: "20%", transform: "skewX(-45deg)", backgroundColor: "#18ABFF", float: "left", marginTop: "5.6%" }}> |
|
|
@ -74,8 +74,8 @@ const Right = (props) => { |
|
|
|
{/* <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 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={{ position: "absolute", right: "0", color: "rgba(216,240,255,0.8)", top: "10px" }}>占比<span>{(((roads?.["小桥"] + roads?.["中桥"]) / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])) * 100).toFixed(2)}</span><span>%</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" }}>{isNaN(roads?.["小桥"] + roads?.["中桥"]) ? "" : roads?.["小桥"] + roads?.["中桥"]}</span><span style={{ marginLeft: "4%" }}>座</span></p> |
|
|
|
<p style={{ position: "absolute", right: "0", color: "rgba(216,240,255,0.8)", top: "10px" }}>占比<span>{isNaN((((roads?.["小桥"] + roads?.["中桥"]) / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])) * 100).toFixed(2)) ? "" : (((roads?.["小桥"] + roads?.["中桥"]) / (roads?.["小桥"] + roads?.["中桥"] + roads?.["大桥"])) * 100).toFixed(2)}</span><span>%</span></p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div style={{ height: "80%", width: "100%", position: "relative", left: "5%", top: "-8%" }}> |
|
|
@ -83,7 +83,7 @@ const Right = (props) => { |
|
|
|
{/* <p>{title || []}</p> */} |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
<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> |
|
|
|
{/* <img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "34px", position: "absolute", top: "12px", left: "6%" }} /> */} |
|
|
|
</div> |
|
|
|
<Lun |
|
|
|