治超详情

api/log/development.log

@@ -10815,4 +10815,10 @@ headers: {}
 2022-07-30 17:48:40.061 - debug: [FS-LOGGER] Init.
 2022-07-30 17:48:40.152 - info: [FS-ATTACHMENT] Inject attachment mw into router.
 2022-07-30 17:48:40.152 - info: [FS-AUTH] Inject auth and api mv into router.
+<<<<<<< Updated upstream
 >>>>>>> d8f96cea72338cf7a61dea293bd6d0cd5da48bb0
+=======
+2022-08-11 09:02:08.616 - debug: [FS-LOGGER] Init.
+2022-08-11 09:02:08.699 - info: [FS-ATTACHMENT] Inject attachment mw into router.
+2022-08-11 09:02:08.699 - info: [FS-AUTH] Inject auth and api mv into router.
+>>>>>>> Stashed changes

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

@@ -34,6 +34,7 @@ function Rightbottom(props) {
     // ]
 
     const rightLegend = ['一级公路', '二级公路', '三级公路', '四级公路', '等外公路']
+    // const rightLegend = ['三级及以上','四级']
     //  let data=[
     //   {name: "四级公路", value: 2969},
     //  {name: "等外公路", value: 171},
@@ -41,10 +42,15 @@ const rightLegend = ['一级公路', '二级公路', '三级公路','四级公
     //  {name: "二级公路", value: 15},
     //  ]
     //  console.log(data.map(i=>i.name),'jjj')
+    console.log(data);
     let dataq = rightLegend.map((item, index) => {
+        console.log(item, index);
         if (data.map(i => i.name).includes(item)) {
+            console.log(item);
+            console.log(1);
             return { name: item, value: data.filter(i1 => i1.name === item)[0].value }
         } else {
+            console.log(2);
             return { name: item, value: 0 }
         }
     })
@@ -76,39 +82,39 @@ let dataq = rightLegend.map((item,index)=>{
             },
             formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}<b>${values.value}</b>段`,
         },
-    legend: {
+        // legend: {
-      orient: "vertical",
+        //   orient: "vertical",
-      itemWidth: 10,
+        //   itemWidth: 10,
-      itemHeight: 10,
+        //   itemHeight: 10,
-      // right: '30%',
+        //   // right: '30%',
-      left: '50%',
+        //   left: '50%',
-      top: 'center',
+        //   top: 'center',
-      align: 'left',
+        //   align: 'left',
-      data: name,
+        //   data: name,
-      formatter: (name) => {
+        //   formatter: (name) => {
-        for (let i = 0; i < option.series[1].data.length; i += 1) {
+        //     for (let i = 0; i < option.series[1].data.length; i += 1) {
-          if (name === option.series[1].data[i].name) {
+        //       if (name === option.series[1].data[i].name) {
-            let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`]
+        //         let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`]
-            return arr.join('\t');
+        //         return arr.join('\t');
-          }
+        //       }
-        }
+        //     }
-      },
+        //   },
-      textStyle: {
+        //   textStyle: {
-        rich: {
+        //     rich: {
-          a: {
+        //       a: {
-            color: '#E9F7FF',
+        //         color: '#E9F7FF',
-            fontSize: 14,
+        //         fontSize: 14,
-            padding:[0,10]
+        //         padding:[0,10]
-          },
+        //       },
-          b: {
+        //       b: {
-            fontSize: 16,
+        //         fontSize: 16,
-            fontFamily: 'YouSheBiaoTiHei',
+        //         fontFamily: 'YouSheBiaoTiHei',
-            color: '#fff',
+        //         color: '#fff',
-            padding:[0,0,0,15]
+        //         padding:[0,0,0,15]
-          },
+        //       },
-        }
+        //     }
-      }
+        //   }
-    },
+        // },
         grid: {
             left: '10%'
         },
@@ -180,7 +186,7 @@ let dataq = rightLegend.map((item,index)=>{
         // myChart.onChartReady = (instance) => {
         //   chartRef.current.safetyChart = instance;
         // }
-    myChart.setOption(option);
+        // myChart.setOption(option);
         return () => {
             // clearInterval(changePieInterval)
         }
@@ -188,12 +194,17 @@ let dataq = rightLegend.map((item,index)=>{
 
     return (
         <div className='build-right-bottom'>
-      <span style={{position:"absolute",width:"10%",color:"#FFF",backgroundColor:'rgba(216, 240, 255, 0.1)',right:"5%",textAlign:"center",top:0}}>段</span>
+            {/* <span style={{position:"absolute",width:"10%",color:"#FFF",backgroundColor:'rgba(216, 240, 255, 0.1)',right:"5%",textAlign:"center",top:0}}>段</span> */}
             <div className='build-right-bottom-title'>
                 <h2>{total || 0}</h2>
                 <span>道路总公里</span>
             </div>
-      <img src='/assets/images/quanju/chart-circle.png'></img>
+            <div className='img1'>
+                <img src='/assets/images/quanju/all.png' />
+            </div>
+            <div className='img2'>
+                <img src='/assets/images/quanju/chart-circle.png' />
+            </div>
             <div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
         </div>
     );

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 />}

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

@@ -288,12 +288,20 @@
                         color: #E9F7FF;
                     }
                }
-               img{
+               .img1{
-                width: 19%;
+                   width: 35%;
                    position: absolute;
-                left: 16%;
+                   left: 30%;
-                top:29%
+                   top:5%;
                 }
+                .img2{
+                        width: 40%;
+                        position: absolute;
+                        left: 40%;
+                        top:5%;
+                        z-index: 10;
+                }
+            
         }
     }
 

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 = (
+    // 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%"}}>
           {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'}}>
+            <div className='popover'>
-            {/* <Popover content={content}> */}
+            <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>
            }

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

@@ -3,6 +3,7 @@
         font-size: 12px;
     }
 }
+
 // .guanli{
 //     // box-sizing: border-box;
 //     padding: 0 15px 0 15px;
@@ -16,6 +17,7 @@
     height: 100%;
     position: absolute;
     left: 0;
+
     .guanli-left-item {
         box-sizing: border-box;
         width: 85%;
@@ -28,18 +30,21 @@
         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;
+
             span {
                 font-size: 1.25rem;
                 font-family: PingFangSC-Regular, PingFang SC;
                 font-weight: 400;
                 color: rgba(216, 240, 255, 0.8000);
             }
+
             div {
                 display: flex;
                 justify-content: center;
@@ -52,6 +57,7 @@
                 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;
@@ -62,12 +68,15 @@
                     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;
@@ -82,14 +91,17 @@
 
             // background-color: pink;
         }
+
         // background-color: pink;
     }
 }
+
 .guanli-right {
     width: 25%;
     height: 100%;
     position: absolute;
     right: 0;
+
     .guanli-right-top {
         width: 100%;
         //    height: 5%;
@@ -97,10 +109,12 @@
         justify-content: flex-end;
         align-items: center;
         padding-right: 10px;
+
         img {
             width: 4%;
             // height: 40%;
         }
+
         span {
             &:nth-child(2) {
                 font-size: 16px;
@@ -109,6 +123,7 @@
                 color: rgba(216, 240, 255, 0.8000);
                 margin: 0 10px 0 2px
             }
+
             &:nth-child(3) {
                 font-size: 18px;
                 font-family: PingFangSC-Medium, PingFang SC;
@@ -116,6 +131,7 @@
                 color: #FFFFFF;
                 margin-right: 10px;
             }
+
             &:nth-child(4) {
                 font-size: 14px;
                 font-family: PingFangSC-Regular, PingFang SC;
@@ -126,6 +142,7 @@
 
 
     }
+
     .guanli-right-title {
         width: 90%;
         height: 5%;
@@ -134,6 +151,7 @@
         align-items: center;
         justify-content: space-around;
         background: rgba(21, 77, 160, 0.2000);
+
         span {
             font-size: 12px;
             font-family: PingFangSC-Medium, PingFang SC;
@@ -146,6 +164,7 @@
             // }
         }
     }
+
     .guanli-right-item {
         width: 90%;
         // height: 4%;
@@ -154,9 +173,11 @@
         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;
@@ -174,79 +195,107 @@
 }
 
 .popover-content {
-    background-color: red;
+    // background-color: red;
-    .address{
+    // .ant-popover-inner-content{
-        width: 80%;
+    //     padding: 0!important;
-        height: 80%;
+    // }
-        top: -1%;
+    // .address {
-        position: absolute;
+    //     width: 80%;
-        background-color: aqua;
+    //     height: 80%;
-        span{
+    //     top: 10%;
-            &:nth-child(1){
+    //     position: absolute;
-                width: 42px;
+    //     // background-color: pink;
-                height: 20px;
+
-                display: inline-block;
+    //     .address1 {
-                overflow-wrap: break-word;
+    //         width: 194px;
-                color: rgba(216, 240, 255, 0.8);
+    //         height: 20px;
-                font-size: 14px;
+    //         margin: 16px 0 24px 26px;
-                font-family: PingFangSC-Regular;
+    //         span {
-                white-space: nowrap;
+    //             &:nth-child(1) {
-                line-height: 20px;
+    //                 margin-right: 20px;
-                text-align: left;
+    //                 width: 42px;
-             }
+    //                 height: 20px;
-             &:nth-child(2){
+    //                 display: inline-block;
-                width: 28px;
+    //                 overflow-wrap: break-word;
-                height: 20px;
+    //                 color: rgba(216, 240, 255, 0.8);
-                display: inline-block;
+    //                 font-size: 14px;
-                overflow-wrap: break-word;
+    //                 font-family: PingFangSC-Regular;
-                color: rgba(238, 244, 255, 1);
+    //                 white-space: nowrap;
-                font-size: 14px;
+    //                 line-height: 20px;
-                font-family: PingFangSC-Medium;
+    //                 text-align: left;
-                white-space: nowrap;
+    //             }
-                line-height: 20px;
+    //             &:nth-child(2) {
-                text-align: left;
+    //                 width: 28px;
-             }
+    //                 height: 20px;
-             &:nth-child(3){
+    //                 display: inline-block;
-                width: 28px;
+    //                 overflow-wrap: break-word;
-                height: 20px;
+    //                 color: rgba(238, 244, 255, 1);
-                display: inline-block;
+    //                 font-size: 14px;
-                overflow-wrap: break-word;
+    //                 font-family: PingFangSC-Medium;
-                color: rgba(216, 240, 255, 0.8);
+    //                 white-space: nowrap;
-                font-size: 14px;
+    //                 line-height: 20px;
-                font-family: PingFangSC-Regular;
+    //                 text-align: left;
-                white-space: nowrap;
+    //             }
-                line-height: 20px;
+    //         }
-                text-align: right;
+    //     }
-            }
+
-            &:nth-child(4){
+    //     .address2 {
-                width: 126px;
+    //         width: 194px;
-                height: 20px;
+    //         height: 20px;
-                display: inline-block;
+    //         margin: 16px 0 24px 26px;
-                overflow-wrap: break-word;
+
-                color: rgba(255, 255, 255, 1);
+    //         span {
-                font-size: 14px;
+    //             &:nth-child(1) {
-                font-family: PingFangSC-Medium;
+    //                 margin-right: 35px;
-                white-space: nowrap;
+    //                 width: 28px;
-                line-height: 20px;
+    //                 height: 20px;
-                text-align: right;
+    //                 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 {
-    background-color: aqua;
+    .ant-tooltip-inner{
-    .ant-popover-arrow{
+        min-width: 0 !important;
-        .ant-popover-arrow-content{
+        min-height: 0 !important;
-            display:none;
+        background-color: rgba(0, 0, 0, 0) !important;
-        }
-        span{
-            display:none;
-        }
-    }
-    .ant-popover-inner{
-        .ant-popover-inner-content{
-            padding: 0;
-        }
     }
+
+    // .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;}
 }