|
|
@ -12,6 +12,7 @@ const Rightbottom = (props) => { |
|
|
|
const [list, setList] = useState([]) |
|
|
|
const [rightDatas, setrightDatas] = useState([]) |
|
|
|
const [nums, setNums] = useState([]) |
|
|
|
const [num, setNum] = useState() |
|
|
|
const requestRightDatas = async () => { |
|
|
|
const res = await dispatch(getZhichaolist()) |
|
|
|
var pattern = /[\u4e00-\u9fa5]*/; |
|
|
@ -43,15 +44,33 @@ const Rightbottom = (props) => { |
|
|
|
{list?.map((item, index) => { |
|
|
|
return <li style={{ width: "100%", height: "3vh", marginTop: "5px", position: "relative", }} onMouseEnter={() => { |
|
|
|
setBeijing(index) |
|
|
|
setNum(index) |
|
|
|
// console.log(beijing);
|
|
|
|
}} onMouseLeave={() => { |
|
|
|
setBeijing() |
|
|
|
setNum() |
|
|
|
}}> |
|
|
|
{beijing == index ? <img src='/assets/images/leadership/bei.png' style={{ width: "100%", height: "100%", position: "absolute" }} /> : ""} |
|
|
|
<div style={{ width: "30%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute" }}>{item.licensePlate}</div> |
|
|
|
<div style={{ width: "10%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "30%" }}>{item.overrunRate ? item.overrunRate + "%" : "--"}</div> |
|
|
|
<div style={{ width: "30%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "40%" }}>{item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"}</div> |
|
|
|
<div style={{ width: "30%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "70%" }}>{item.processingTime ? item.processingTime : "--"}</div> |
|
|
|
{ |
|
|
|
num == index ? <div style={{ position: "fixed", width: "400px", height: "200px", zIndex: 100, left: "55%", marginTop: "0", top: "78%" }}> |
|
|
|
<img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} /> |
|
|
|
<div style={{ position: "absolute", top: "0", width: "50%", padding: "20px" }}> |
|
|
|
<img src='/assets/images/leadership/yuanxing.png' style={{ width: "100%", height: "100%" }} /> |
|
|
|
<p style={{ color: "#09BAFF", position: "absolute", top: "42%", left: "27%", fontSize: "29px", fontFamily: "YouSheBiaoTiHei" }}>{item.overrunRate ? item.overrunRate + "%" : "--"}</p> |
|
|
|
<p style={{ color: "rgba(216,240,255,0.8)", position: "absolute", top: "60%", left: "43%", fontSize: "14px" }}>超限</p> |
|
|
|
</div> |
|
|
|
<div style={{ position: "absolute", top: "0", width: "50%", left: "50%", paddingRight: "10px" }}> |
|
|
|
<p style={{ color: "rgba(216,240,255,0.8)", marginTop: "30px", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>车牌号<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.licensePlate}</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" }}>123456</span></p> |
|
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>处罚<span style={{ color: "#FF0001", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"}</span></p> |
|
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>日期<span style={{ color: "#EEF4FF", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.processingTime ? item.processingTime : "--"}</span></p> |
|
|
|
</div> |
|
|
|
</div> : "" |
|
|
|
} |
|
|
|
</li> |
|
|
|
}) |
|
|
|
|
|
|
|