From 8fef35340cfd517b6844e51c335ba1d392449692 Mon Sep 17 00:00:00 2001
From: yangsen <952208207@qq.com>
Date: Thu, 11 Aug 2022 20:06:50 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B2=BB=E8=B6=85=E8=AF=A6=E6=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../quanju/containers/footer/build/index.js   |   6 +-
 .../quanju/containers/footer/build/style.less |  20 +-
 .../quanju/containers/footer/guanli/index.js  |  46 +-
 .../containers/footer/guanli/style.less       | 463 ++++++++++--------
 4 files changed, 302 insertions(+), 233 deletions(-)

diff --git a/web/client/src/sections/quanju/containers/footer/build/index.js b/web/client/src/sections/quanju/containers/footer/build/index.js
index cd9b7d1a..71030183 100644
--- a/web/client/src/sections/quanju/containers/footer/build/index.js
+++ b/web/client/src/sections/quanju/containers/footer/build/index.js
@@ -143,7 +143,7 @@ const Build = (props) => {
     return (
         <>
             <div className='bgbuild-left'>
-                <Module title={"各乡镇在建公路工程"} style={{
+                <Module title={"在建公路工程"} style={{
                     width: "100%",
                     height: " 33%"
                 }} customize={true}>
@@ -160,11 +160,11 @@ const Build = (props) => {
                             </div> */}
                             <img src='/assets/images/quanju/yuanhuan.webp' className='build-left-top-center' />
                             <div className='build-left-top-item'>
-                                <div>{buildingnumber?.buildedRoad || 0}</div>
+                                <div>{sunonlineproject || 0}</div>
                                 <div>
                                     {/* <i>&#9658;</i> */}
                                     {/* <span /> */}
-                                    <span>在建公路/公里</span>
+                                    <span>在建数量</span>
                                 </div>
                             </div>
                         </div> : <NoData />}
diff --git a/web/client/src/sections/quanju/containers/footer/build/style.less b/web/client/src/sections/quanju/containers/footer/build/style.less
index 8daf64c5..0f64d0c5 100644
--- a/web/client/src/sections/quanju/containers/footer/build/style.less
+++ b/web/client/src/sections/quanju/containers/footer/build/style.less
@@ -288,12 +288,20 @@
                         color: #E9F7FF;
                     }
                }
-               img{
-                width: 19%;
-                position: absolute;
-                left: 16%;
-                top:29%
-            }
+               .img1{
+                   width: 35%;
+                   position: absolute;
+                   left: 30%;
+                   top:5%;
+                }
+                .img2{
+                        width: 40%;
+                        position: absolute;
+                        left: 40%;
+                        top:5%;
+                        z-index: 10;
+                }
+            
         }
     }
 
diff --git a/web/client/src/sections/quanju/containers/footer/guanli/index.js b/web/client/src/sections/quanju/containers/footer/guanli/index.js
index d905e260..09bbb399 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/index.js
+++ b/web/client/src/sections/quanju/containers/footer/guanli/index.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { connect } from 'react-redux';
-import { Carousel,Popover  } from 'antd'
+import { Carousel,Tooltip  } from 'antd'
 import AutoRollComponent from '../build/AutoRollComponent'
 import Module from '../../public/module'
 import LeftItem from './LeftItem'
@@ -55,30 +55,42 @@ const Guanli = (props) => {
     },[])
     // let datalist = newArry(30)
     // datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"})
-    const content = (
-        <div className='popover-content'>
-          <img src='/assets/images/quanju/zhichao.png'/>
-            <div className='address'>
-              <span>检测点</span>
-              <span>远不</span>
-              <span>地址</span>
-              <span>呼呼呼呼呼呼呼呼呼</span>
-            </div>
-        </div>
-      );
+    // const content = (
+      
+    //   );
     const renderContent = () => {
-        return <div style={{height:"100%"}} >
+        return <div style={{height:"100%"}}>
           {rightitemlist && rightitemlist.length!==0?rightitemlist?.map(({ id, licensePlate, overrunRate,fine,processingTime,deductPoints }, index) => {
            if(index<120){
             return <div key={index} className='guanli-right-item'>
-            <div className='popover'  style={{background:'pink'}}>
-            {/* <Popover content={content}> */}
+            <div className='popover'>
+            <Tooltip title={  <div className='popover-content'>
+          <div style={{ width: "100%", height: "100%",   marginTop: "0"}}>
+
+                                {/* <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" }}>{overrunRate?overrunRate:0}{/* {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%", top:'5px'}}>
+                                    <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" }}>{licensePlate}{/* {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" }}>{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}{/* {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" }}>{processingTime}{/* {item.processingTime ? item.processingTime : "--"} */}</span></p>
+                                </div>
+                            </div> 
+        </div>}
+            placement="leftTop"
+            overlayStyle={{ minWidth:400, minHeight: 212,padding:0,margin:0,backgroundImage:`url(../../../../../assets/images/leadership/beijinglan.png)`}}   
+            overlayClassName='popover'
+            
+            >
             <span>{licensePlate}</span>
             <span>{overrunRate}%</span>
             <span>{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}</span>
             <span>{processingTime}</span>
-            {/* </Popover> */}
-            
+            </Tooltip>
             </div>
         </div>
            }
diff --git a/web/client/src/sections/quanju/containers/footer/guanli/style.less b/web/client/src/sections/quanju/containers/footer/guanli/style.less
index 27856d8e..91060be1 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/style.less
+++ b/web/client/src/sections/quanju/containers/footer/guanli/style.less
@@ -1,252 +1,301 @@
-@media screen and (max-width:1366px){
-    html{
+@media screen and (max-width:1366px) {
+    html {
         font-size: 12px;
     }
 }
+
 // .guanli{
 //     // box-sizing: border-box;
 //     padding: 0 15px 0 15px;
 //     width: 100%;
 //     height: 100%;
 //     position: relative;
-    // display: flex;
-    // justify-content: space-between;
-    .guanli-left{
-        width: 25%;
-        height: 100%;
-        position: absolute;
-        left: 0;
-        .guanli-left-item{
-            box-sizing: border-box;
-            width: 85%;
-            position: relative;
-            // height: 30%;
-            height: 24vh;
-            margin: 0 auto 3%;
+// display: flex;
+// justify-content: space-between;
+.guanli-left {
+    width: 25%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+
+    .guanli-left-item {
+        box-sizing: border-box;
+        width: 85%;
+        position: relative;
+        // height: 30%;
+        height: 24vh;
+        margin: 0 auto 3%;
+        display: flex;
+        align-items: center;
+        padding: 0 10%;
+        justify-content: space-between;
+        border: 2px solid rgba(28, 96, 254, 0.5000);
+
+        .guanli-left-item-left {
+            width: 45%;
+            height: 60%;
             display: flex;
+            flex-direction: column;
             align-items: center;
-            padding: 0 10%;
-            justify-content: space-between;
-            border: 2px solid rgba(28,96,254,0.5000);
-            .guanli-left-item-left{
-                width: 45%;
-                height: 60%;
+
+            span {
+                font-size: 1.25rem;
+                font-family: PingFangSC-Regular, PingFang SC;
+                font-weight: 400;
+                color: rgba(216, 240, 255, 0.8000);
+            }
+
+            div {
                 display: flex;
-                flex-direction: column;
-                align-items: center;
-                span{
-                    font-size: 1.25rem;
+                justify-content: center;
+                // align-items: ;
+                font-size: 2.125rem;
+                font-family: YouSheBiaoTiHei;
+                color: #FFFFFF;
+                height: 70%;
+                width: 100%;
+                background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat;
+                background-size: 100% 80%;
+                background-position: center bottom;
+
+                span {
+                    font-size: 1rem;
                     font-family: PingFangSC-Regular, PingFang SC;
                     font-weight: 400;
-                    color: rgba(216,240,255,0.8000);
-                }
-                div{
-                    display: flex;
-                    justify-content: center;
-                    // align-items: ;
-                    font-size: 2.125rem;
-                    font-family: YouSheBiaoTiHei;
-                    color: #FFFFFF;
-                    height: 70%;
-                    width: 100%;
-                    background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat;
-                    background-size: 100% 80%;
-                    background-position: center bottom;
-                    span{
-                        font-size: 1rem;
-                        font-family: PingFangSC-Regular, PingFang SC;
-                        font-weight: 400;
-                        padding-top: 10%;
-                        margin-left: 5px;
-                        // height: 0;
-                        color: rgba(216,240,255,0.8000);
-                    }
+                    padding-top: 10%;
+                    margin-left: 5px;
+                    // height: 0;
+                    color: rgba(216, 240, 255, 0.8000);
                 }
-                // background-color: pink;
             }
-            .guanli-left-item-right{
-                width: 40%;
-                height: 50%;
-                position: relative;     
-                    span{
-                        position: absolute;
-                        width: 8px;
-                        height: 8px;
-                        background-color: #fff;
-                        top:1.5%;
-                        left: 50%;
-                        z-index: 10;
-                        border-radius: 4px;
-                        display: block;
-                    }
-           
-                // background-color: pink;
+
+            // background-color: pink;
+        }
+
+        .guanli-left-item-right {
+            width: 40%;
+            height: 50%;
+            position: relative;
+
+            span {
+                position: absolute;
+                width: 8px;
+                height: 8px;
+                background-color: #fff;
+                top: 1.5%;
+                left: 50%;
+                z-index: 10;
+                border-radius: 4px;
+                display: block;
             }
+
             // background-color: pink;
         }
+
+        // background-color: pink;
     }
-    .guanli-right{
-        width: 25%;
-        height: 100%;
-        position: absolute;
-        right: 0;
-        .guanli-right-top{
-            width: 100%;
+}
+
+.guanli-right {
+    width: 25%;
+    height: 100%;
+    position: absolute;
+    right: 0;
+
+    .guanli-right-top {
+        width: 100%;
         //    height: 5%;
-           display: flex;
-           justify-content: flex-end;
-           align-items: center;
-           padding-right: 10px;
-           img{
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        padding-right: 10px;
+
+        img {
             width: 4%;
             // height: 40%;
-           }
-            span{
-             &:nth-child(2){
+        }
+
+        span {
+            &:nth-child(2) {
                 font-size: 16px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
-                color: rgba(216,240,255,0.8000);
-                margin:0 10px 0 2px
-             }
-             &:nth-child(3){
+                color: rgba(216, 240, 255, 0.8000);
+                margin: 0 10px 0 2px
+            }
+
+            &:nth-child(3) {
                 font-size: 18px;
                 font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
                 color: #FFFFFF;
                 margin-right: 10px;
-             }
-             &:nth-child(4){
-                font-size: 14px;
-                font-family: PingFangSC-Regular, PingFang SC;
-                font-weight: 400;
-                color: rgba(216,240,255,0.8000);
-             }
-           }
-            
-         
-        }
-        .guanli-right-title{
-            width: 90%;
-            height: 5%;
-            margin: auto;
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-            background: rgba(21,77,160,0.2000);
-            span{
-                font-size: 12px;
-                font-family: PingFangSC-Medium, PingFang SC;
-                font-weight: 500;
-                color: #FFFFFF;
-                flex:1;
-                text-align: center;
-                // &:nth-child(1){
-                    
-                // }
             }
-        }
-        .guanli-right-item{
-            width: 90%;
-            // height: 4%;
-            height: 3vh;
-            margin: auto;
-            display: flex;
-            align-items: center;
-            justify-content: space-around;
-            &:hover{
-                background:linear-gradient(270deg, rgba(0,124,230,0) 0%, rgba(0,70,200,0.8700) 100%);
-            }
-            // background: rgba(21,77,160,0.2000);
-            span{
-                font-size: 0.875rem;
+
+            &:nth-child(4) {
+                font-size: 14px;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
-                color: rgba(216,240,255,0.8000);
-                line-height: 20px;
-                flex:1;
-                text-align: center;
-                // &:nth-child(1){
-                    
-                // }
+                color: rgba(216, 240, 255, 0.8000);
             }
         }
+
+
     }
 
-.popover-content{
-    background-color: red;
-    .address{
-        width: 80%;
-        height: 80%;
-        top: -1%;
-        position: absolute;
-        background-color: aqua;
-        span{
-            &:nth-child(1){
-                width: 42px;
-                height: 20px;
-                display: inline-block;
-                overflow-wrap: break-word;
-                color: rgba(216, 240, 255, 0.8);
-                font-size: 14px;
-                font-family: PingFangSC-Regular;
-                white-space: nowrap;
-                line-height: 20px;
-                text-align: left;
-             }
-             &:nth-child(2){
-                width: 28px;
-                height: 20px;
-                display: inline-block;
-                overflow-wrap: break-word;
-                color: rgba(238, 244, 255, 1);
-                font-size: 14px;
-                font-family: PingFangSC-Medium;
-                white-space: nowrap;
-                line-height: 20px;
-                text-align: left;
-             }
-             &:nth-child(3){
-                width: 28px;
-                height: 20px;
-                display: inline-block;
-                overflow-wrap: break-word;
-                color: rgba(216, 240, 255, 0.8);
-                font-size: 14px;
-                font-family: PingFangSC-Regular;
-                white-space: nowrap;
-                line-height: 20px;
-                text-align: right;
-            }
-            &:nth-child(4){
-                width: 126px;
-                height: 20px;
-                display: inline-block;
-                overflow-wrap: break-word;
-                color: rgba(255, 255, 255, 1);
-                font-size: 14px;
-                font-family: PingFangSC-Medium;
-                white-space: nowrap;
-                line-height: 20px;
-                text-align: right;
-            }
+    .guanli-right-title {
+        width: 90%;
+        height: 5%;
+        margin: auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+        background: rgba(21, 77, 160, 0.2000);
+
+        span {
+            font-size: 12px;
+            font-family: PingFangSC-Medium, PingFang SC;
+            font-weight: 500;
+            color: #FFFFFF;
+            flex: 1;
+            text-align: center;
+            // &:nth-child(1){
+
+            // }
         }
     }
-}
 
-.popover{
-    background-color: aqua;
-    .ant-popover-arrow{
-        .ant-popover-arrow-content{
-            display:none;
-        }
-        span{
-            display:none;
+    .guanli-right-item {
+        width: 90%;
+        // height: 4%;
+        height: 3vh;
+        margin: auto;
+        display: flex;
+        align-items: center;
+        justify-content: space-around;
+
+        &:hover {
+            background: linear-gradient(270deg, rgba(0, 124, 230, 0) 0%, rgba(0, 70, 200, 0.8700) 100%);
         }
-    }
-    .ant-popover-inner{
-        .ant-popover-inner-content{
-            padding: 0;
+
+        // background: rgba(21,77,160,0.2000);
+        span {
+            font-size: 0.875rem;
+            font-family: PingFangSC-Regular, PingFang SC;
+            font-weight: 400;
+            color: rgba(216, 240, 255, 0.8000);
+            line-height: 20px;
+            flex: 1;
+            text-align: center;
+            // &:nth-child(1){
+
+            // }
         }
     }
 }
+
+.popover-content {
+    // background-color: red;
+    // .ant-popover-inner-content{
+    //     padding: 0!important;
+    // }
+    // .address {
+    //     width: 80%;
+    //     height: 80%;
+    //     top: 10%;
+    //     position: absolute;
+    //     // background-color: pink;
+
+    //     .address1 {
+    //         width: 194px;
+    //         height: 20px;
+    //         margin: 16px 0 24px 26px;
+    //         span {
+    //             &:nth-child(1) {
+    //                 margin-right: 20px;
+    //                 width: 42px;
+    //                 height: 20px;
+    //                 display: inline-block;
+    //                 overflow-wrap: break-word;
+    //                 color: rgba(216, 240, 255, 0.8);
+    //                 font-size: 14px;
+    //                 font-family: PingFangSC-Regular;
+    //                 white-space: nowrap;
+    //                 line-height: 20px;
+    //                 text-align: left;
+    //             }
+    //             &:nth-child(2) {
+    //                 width: 28px;
+    //                 height: 20px;
+    //                 display: inline-block;
+    //                 overflow-wrap: break-word;
+    //                 color: rgba(238, 244, 255, 1);
+    //                 font-size: 14px;
+    //                 font-family: PingFangSC-Medium;
+    //                 white-space: nowrap;
+    //                 line-height: 20px;
+    //                 text-align: left;
+    //             }
+    //         }
+    //     }
+
+    //     .address2 {
+    //         width: 194px;
+    //         height: 20px;
+    //         margin: 16px 0 24px 26px;
+
+    //         span {
+    //             &:nth-child(1) {
+    //                 margin-right: 35px;
+    //                 width: 28px;
+    //                 height: 20px;
+    //                 display: inline-block;
+    //                 overflow-wrap: break-word;
+    //                 color: rgba(216, 240, 255, 0.8);
+    //                 font-size: 14px;
+    //                 font-family: PingFangSC-Regular;
+    //                 white-space: nowrap;
+    //                 line-height: 20px;
+    //                 text-align: right;
+    //             }
+    //             &:nth-child(2) {
+    //                 width: 126px;
+    //                 height: 20px;
+    //                 display: inline-block;
+    //                 overflow-wrap: break-word;
+    //                 color: rgba(255, 255, 255, 1);
+    //                 font-size: 14px;
+    //                 font-family: PingFangSC-Medium;
+    //                 white-space: nowrap;
+    //                 line-height: 20px;
+    //                 text-align: right;
+    //             }
+    //         }
+    //     }
+    // }
+}
+
+.popover {
+    .ant-tooltip-inner{
+        min-width: 0 !important;
+        min-height: 0 !important;
+        background-color: rgba(0, 0, 0, 0) !important;
+    }
+
+    // .ant-popover-arrow {
+    //     .ant-popover-arrow-content {
+    //         display: none;
+    //     }
+
+    //     span {
+    //         display: none;
+    //     }
+    // }
+
+    // .ant-popover-inner {
+    //     .ant-popover-inner-content {
+    //         padding: 0;
+    //     }
+    // }
+    // .ant-popover-inner{padding:0 !important;}
+}
\ No newline at end of file