(*)建设、治超

web/client/src/sections/quanju/containers/footer/build/index.js

@@ -81,9 +81,11 @@ const Build = (props) => {
         return resValue
     }
     let datas = Object.keys(buildingnumber?.townRoad || {}).map((item) => ({ name: item, number: buildingnumber.townRoad[item].roadCount, gongli: Number(keepThreeNum(buildingnumber.townRoad[item].mileage)) }))
-    let list = datas.sort((a, b) => {
+   
+    let  list = datas.sort((a, b) => {
         return b.number - a.number
     })
+    list=list.filter(item=>item.name!=="其他")
     //   console.log(list,'红红火')
 
     //道路等级数据
@@ -141,29 +143,29 @@ const Build = (props) => {
     return (
         <>
             <div className='bgbuild-left'>
-                <Module title={"各状态公路数量统计"} style={{
+                <Module title={"各乡镇在建公路工程"} style={{
                     width: "100%",
                     height: " 33%"
                 }} customize={true}>
                     <div style={{ height: "100%", position: "relative" }} >
-                        <span style={{ position: "absolute", width: "10%", color: "#FFF", backgroundColor: 'rgba(216, 240, 255, 0.1)', right: "5%", textAlign: "center" }}>条</span>
+                        {/* <span style={{ position: "absolute", width: "10%", color: "#FFF", backgroundColor: 'rgba(216, 240, 255, 0.1)', right: "5%", textAlign: "center" }}>条</span> */}
                         {buildingnumber && buildingnumber.buildedRoad !== 0 && totalgongli !== 0 ? <div className='build-left-top'>
-                            <div className='build-left-top-item'>
+                            {/* <div className='build-left-top-item'>
                                 <div>
-                                    {/* <i>&#9658;</i> */}
+                                    <i>&#9658;</i>
                                     <span />
                                     <span>在建公路数量</span>
                                 </div>
                                 <div>{buildingnumber?.buildingRoad || 0}</div>
-                            </div>
+                            </div> */}
-                            <img src='/assets/images/quanju/zhuangtaigonglui.png' className='build-left-top-center' />
+                            <img src='/assets/images/quanju/yuanhuan.webp' className='build-left-top-center' />
                             <div className='build-left-top-item'>
+                                <div>{buildingnumber?.buildedRoad || 0}</div>
                                 <div>
                                     {/* <i>&#9658;</i> */}
-                                    <span />
+                                    {/* <span /> */}
-                                    <span>已建公路数量</span>
+                                    <span>在建公路/公里</span>
                                 </div>
-                                <div>{buildingnumber?.buildedRoad || 0}</div>
                             </div>
                         </div> : <NoData />}
                     </div>

web/client/src/sections/quanju/containers/footer/build/style.less

@@ -23,36 +23,42 @@
             justify-content: center;
             align-items: center;
             .build-left-top-center{
-                width: 35%;
+                width: 100%;
-                height: 50%;
+                height: 100%;
                 margin: 0 10px;
             }
             .build-left-top-item{
                 width: 25%;
                 height: 50%;
-                background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
+                // background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
                 background-size: 95%;
                 background-repeat: no-repeat;
                 display: flex;
                 flex-direction: column;
                 justify-content: center;
                 align-items: center;
+                position: absolute;
+                float: left;
                 // text-align: center;
                 div{
                     &:nth-child(1){
+                        // width: 80%;
+                        // height: 100%;
+                        // margin: 1% auto 0;
+                        font-size: 2.375rem;
+                        font-family: YouSheBiaoTiHei;
+                        color: #FFFFFF;
+                        text-align: center;
+                        // line-height: 49px;
+                        text-shadow: 0px 2px 4px #1C60FE;
+                        
+                    }
+                    &:nth-child(2){
                         display: flex;
                     justify-content: center;
                     align-items: center;
                     span{
                         &:nth-child(1){
-                            width: 0.5rem;
-                            height: 0.5rem;
-                            margin-right: 5px;
-                            background: #07B9FE;
-                            clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
-                            transform: rotate(134deg);
-                        }
-                        &:nth-child(2){
                             font-size: 1rem;
                             font-family: PingFangSC-Regular, PingFang SC;
                             font-weight: 400;
@@ -62,18 +68,6 @@
                        
                     }
                     }
-                    &:nth-child(2){
-                        // width: 80%;
-                        // height: 100%;
-                        // margin: 1% auto 0;
-                        font-size: 2.375rem;
-                        font-family: YouSheBiaoTiHei;
-                        color: #FFFFFF;
-                        text-align: center;
-                        // line-height: 49px;
-                        text-shadow: 0px 2px 4px #1C60FE;
-                        
-                    }
                 }
             }
         }

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 } from 'antd'
+import { Carousel,Popover  } from 'antd'
 import AutoRollComponent from '../build/AutoRollComponent'
 import Module from '../../public/module'
 import LeftItem from './LeftItem'
@@ -55,15 +55,31 @@ 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 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}> */}
             <span>{licensePlate}</span>
             <span>{overrunRate}%</span>
             <span>{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}</span>
             <span>{processingTime}</span>
+            {/* </Popover> */}
+            
+            </div>
         </div>
            }
           }):""}
@@ -101,9 +117,9 @@ const Guanli = (props) => {
                 <span>处罚</span>
                 <span>处理日期</span>
             </div>
-            {rightitemlist && rightitemlist.length!==0?<AutoRollComponent content={renderContent()}
+            {rightitemlist && rightitemlist.length!==0?<div><AutoRollComponent content={renderContent()}
             containerStyle={{ position: "relative", height: "90%", }}
-            divHeight={"100%"} divId={"chart-overview-deviceList"} />:<NoData style={{height:"70%"}}/>}
+            divHeight={"100%"} divId={"chart-overview-deviceList"} /></div>:<NoData style={{height:"70%"}}/>}
         </Module>
         </div>
         </>

web/client/src/sections/quanju/containers/footer/guanli/style.less

@@ -173,5 +173,80 @@
         }
     }
 
+.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;
+            }
+        }
+    }
+}
 
-
+.popover{
+    background-color: aqua;
+    .ant-popover-arrow{
+        .ant-popover-arrow-content{
+            display:none;
+        }
+        span{
+            display:none;
+        }
+    }
+    .ant-popover-inner{
+        .ant-popover-inner-content{
+            padding: 0;
+        }
+    }
+}