提交

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

@@ -10,6 +10,7 @@ const Right = (props) => {
     const [nums, setNums] = useState()
     const [list, setList] = useState([])
     const [roads, setRoads] = useState()
+    const [num, setNum] = useState()
     useEffect(() => {
         const daolus = dispatch(getRoadmaintain()).then((res) => {
             setList(res.payload.data.reportList.filter((item, index) => {
@@ -41,8 +42,11 @@ const Right = (props) => {
                                 height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px"
                             }} onMouseEnter={() => {
                                 setBeijing(index)
+                                setNum(index)
+
                             }} onMouseLeave={() => {
                                 setBeijing()
+                                setNum()
                             }}>
                                 {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%" }} /> : ""}
@@ -50,8 +54,21 @@ const Right = (props) => {
                                 <p style={{ textAlign: "center", width: "10%", position: "absolute", left: "43%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >日常养护</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: "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></li>
+                                <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%" }}>
+                                        <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} />
+                                        <div style={{ position: "absolute", top: "0", width: "50%", left: "50%", paddingRight: "10px" }}>
+                                            <p style={{ marginTop: "20px", color: "#FFFFFF", fontSize: "16px", fontFamily: "YouSheBiaoTiHei" }}>南昌县大道路段三号路口西南门路</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: "45px", 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>
+                                        </div>
+                                    </div> : ""
+                                }
+                            </li>
                         )
+
                     })
                 }
                 {/* </Spin> */}

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

@@ -11,6 +11,7 @@ const Right = (props) => {
     const [list, setList] = useState([])
     const [roads, setRoads] = useState()
     const [nums, setNums] = useState()
+    const [num, setNum] = useState()
     useEffect(() => {
         const daolus = dispatch(getRoadmaintain()).then((res) => {
             setList(res.payload.data.reportList.filter((item, index) => {
@@ -46,9 +47,11 @@ const Right = (props) => {
                                 height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px"
                             }} onMouseEnter={() => {
                                 setBeijing(index)
+                                setNum(index)
                                 // console.log(beijing);
                             }} onMouseLeave={() => {
                                 setBeijing()
+                                setNum()
                             }}>
                                 {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%" }} /> : ""}
@@ -56,7 +59,19 @@ const Right = (props) => {
                                 <p style={{ textAlign: "center", width: "10%", position: "absolute", left: "43%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >日常养护</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: "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>
+                                <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>
+                                {
+                                    num == index ? <div style={{ position: "fixed", width: "400px", height: "200px", zIndex: 100, left: "50%", marginTop: "0", top: "35%" }}>
+                                        <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} />
+                                        <div style={{ position: "absolute", top: "0", width: "50%", left: "50%", paddingRight: "10px" }}>
+                                            <p style={{ marginTop: "20px", color: "#FFFFFF", fontSize: "16px", fontFamily: "YouSheBiaoTiHei" }}>南昌县大道路段三号路口西南门路</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: "45px", 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" }}>2022-06-05</span></p>
+                                        </div>
+                                    </div> : ""
+                                }
+                            </li>
                         )
                     })
                 }

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

@@ -9,6 +9,7 @@ const Right = (props) => {
     const [list, setList] = useState([])
     const [roads, setRoads] = useState()
     const [nums, setNums] = useState()
+    const [num, setNum] = useState()
     useEffect(() => {
         const daolus = dispatch(getRoadmaintain()).then((res) => {
             setList(res.payload.data.reportList.filter((item, index) => {
@@ -38,9 +39,11 @@ const Right = (props) => {
                                 height: "20px", position: "relative", width: "100%", color: "#FFFFFF", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", fontSize: "14px"
                             }} onMouseEnter={() => {
                                 setBeijing(index)
+                                setNum(index)
                                 // console.log(beijing);
                             }} onMouseLeave={() => {
                                 setBeijing()
+                                setNum()
                             }}>
                                 {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%" }} /> : ""}
@@ -48,7 +51,19 @@ const Right = (props) => {
                                 <p style={{ textAlign: "center", width: "10%", position: "absolute", left: "43%", color: beijing == index ? "#ffffff" : "rgba(216,240,255,0.8)" }} >日常养护</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: "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>
+                                <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>
+                                {
+                                    num == index ? <div style={{ position: "fixed", width: "400px", height: "200px", zIndex: 100, left: "50%", marginTop: "0", top: "35%" }}>
+                                        <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} />
+                                        <div style={{ position: "absolute", top: "0", width: "50%", left: "50%", paddingRight: "10px" }}>
+                                            <p style={{ marginTop: "20px", color: "#FFFFFF", fontSize: "16px", fontFamily: "YouSheBiaoTiHei" }}>南昌县大道路段三号路口西南门路</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: "45px", 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" }}>2022-06-05</span></p>
+                                        </div>
+                                    </div> : ""
+                                }
+                            </li>
                         )
                     })
                 }

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

@@ -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>
                 })