Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev

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

@@ -1,25 +1,26 @@
 
 import './style.less'
 import { Col, Progress, Row } from 'antd';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 // import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts';
 function Rightbottom (props) {
     const { width, height, total, data, text } = props
     const chartRef = useRef(null);
+    const [shuzu, setShuzu] = useState()
     let colorList = [
-        "rgba(7,185,254,1)",
+        // "rgba(7,185,254,1)",
         "rgba(28,96,254,1)",
         "rgba(4,251,240,1)",
-        "rgba(255,194,20,1)",
+        // "rgba(255,194,20,1)",
-        'rgba(255,255,255,1)'
+        // 'rgba(255,255,255,1)'
     ]
     let underColorList = [
-        "rgba(7,185,254,0.5)",
+        // "rgba(7,185,254,0.5)",
         "rgba(28,96,254,0.5)",
         "rgba(4,251,240,0.5)",
-        "rgba(255,194,20,0.5)",
+        // "rgba(255,194,20,0.5)",
-        'rgba(255,255,255,0.5)',
+        // 'rgba(255,255,255,0.5)',
     ]
     let name = [], emptyName = []
     // const name = data?.map(d)
@@ -34,7 +35,6 @@ function Rightbottom (props) {
     // ]
 
     const rightLegend = ['一级公路', '二级公路', '三级公路', '四级公路', '等外公路']
-    // const rightLegend = ['三级及以上','四级']
     //  let data=[
     //   {name: "四级公路", value: 2969},
     //  {name: "等外公路", value: 171},
@@ -63,6 +63,19 @@ function Rightbottom (props) {
             value: d.value
         })
     })
+    let siji = dataq.map((item, index) => {
+        if (item.name == "四级公路" || item.name == "等外公路") {
+            return item.value
+        }
+
+    })
+    let sanji = dataq.map((item, index) => {
+        if (item.name == "三级公路" || item.name == "二级公路" || item.name == "一级公路") {
+            return item.value
+        }
+    })
+    let dataAll = [{ name: '四级', value: siji[0] + siji[1] }, { name: '三级及以上', value: sanji[2] + sanji[3] + sanji[4] }]
+    console.log(dataAll);
     const chartTitle = '道路总公里';
     const title = '基础设施安全监测版块';
     // const number = 2738;
@@ -149,7 +162,7 @@ function Rightbottom (props) {
                 label: {
                     show: false
                 },
-                data: dataq,
+                data: dataAll,
             },
         ],
     };
@@ -186,7 +199,7 @@ function Rightbottom (props) {
         // myChart.onChartReady = (instance) => {
         //   chartRef.current.safetyChart = instance;
         // }
-        // myChart.setOption(option);
+        myChart.setOption(option);
         return () => {
             // clearInterval(changePieInterval)
         }
@@ -194,18 +207,36 @@ function Rightbottom (props) {
 
     return (
         <div className='build-right-bottom'>
+            <div className='build-right-bottom-item1'>
+                                <div>
+                                    
+                                    <span />
+                                    <span className='sanji'><i style={{color: 'rgba(28,96,254,1)'}}>&#9658;</i>&nbsp;三级及以上</span>
+                                </div>
+                                <div>{sanji[2] + sanji[3] + sanji[4]}</div>
+                            </div>
             {/* <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>
+                <h2>{siji[0] + siji[1]+sanji[2] + sanji[3] + sanji[4] || 0}</h2>
-                <span>道路总公里</span>
+                <span>路段总数</span>
             </div>
-            <div className='img1'>
+            {/* <div className='img1'>
                 <img src='/assets/images/quanju/all.png' />
-            </div>
+            </div> */}
-            <div className='img2'>
+            <div className='img'>
                 <img src='/assets/images/quanju/chart-circle.png' />
             </div>
-            <div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
+            <div /* ref={chartRef} */ style={{ width: width || "70%", height: height || "90%"}} /* id="ech" */>
+                <div  ref={chartRef} style={{ width:  "65%", height:  "90%"}} id="ech"></div>
+                <div className='build-right-bottom-item2'>
+                <div>
+                    
+                    <span />
+                    <span className='siji'><i style={{color:"rgba(4,251,240,1)"}}>&#9658;</i>&nbsp;四级</span>
+                </div>
+                <div>{siji[0] + siji[1]}</div>
+            </div>
+            </div>
         </div>
     );
 }

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

@@ -1,33 +1,37 @@
-@media screen and (max-width:1367px){
+@media screen and (max-width:1367px) {
-    html{
+    html {
         font-size: 10px;
     }
 }
+
 // .bgbuild{
-    // // box-sizing: border-box;
+// // box-sizing: border-box;
-    // padding: 0 15px 0 15px;
+// padding: 0 15px 0 15px;
-    // width: 100%;
+// width: 100%;
-    // height: 100%;
+// height: 100%;
-    // // display: flex;
+// // display: flex;
-    // position: relative;
+// position: relative;
-    // justify-content: space-between;
+// justify-content: space-between;
-    .bgbuild-left{
+.bgbuild-left {
     position: absolute;
     left: 0;
     width: 25%;
     height: 100%;
-        .build-left-top{
+
+    .build-left-top {
         height: 100%;
         width: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
-            .build-left-top-center{
+
+        .build-left-top-center {
             width: 100%;
             height: 100%;
             margin: 0 10px;
         }
-            .build-left-top-item{
+
+        .build-left-top-item {
             width: 25%;
             height: 50%;
             // background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
@@ -39,9 +43,10 @@
             align-items: center;
             position: absolute;
             float: left;
+
             // text-align: center;
-                div{
+            div {
-                    &:nth-child(1){
+                &:nth-child(1) {
                     // width: 80%;
                     // height: 100%;
                     // margin: 1% auto 0;
@@ -53,12 +58,14 @@
                     text-shadow: 0px 2px 4px #1C60FE;
 
                 }
-                    &:nth-child(2){
+
+                &:nth-child(2) {
                     display: flex;
                     justify-content: center;
                     align-items: center;
-                    span{
+
-                        &:nth-child(1){
+                    span {
+                        &:nth-child(1) {
                             font-size: 1rem;
                             font-family: PingFangSC-Regular, PingFang SC;
                             font-weight: 400;
@@ -71,41 +78,47 @@
             }
         }
     }
-        .build-left-center{
+
+    .build-left-center {
         width: 100%;
         height: 100%;
 
-            .build-left-center-top{
+        .build-left-center-top {
             width: 100%;
             height: 30%;
             display: flex;
             justify-content: space-between;
-                div{
+
+            div {
                 width: 50%;
                 height: 100%;
                 display: flex;
                 justify-content: center;
                 align-items: center;
-                    img{
+
+                img {
                     // height: 15%;
                     width: 25%;
 
                 }
-                    div{
+
+                div {
                     display: flex;
                     flex-direction: column;
                     align-items: start;
                     justify-content: center;
                     margin-left: 10px;
-                        span{
+
-                            &:nth-child(1){
+                    span {
+                        &:nth-child(1) {
                             font-size: 0.75rem;
                             font-family: PingFangSC-Medium, PingFang SC;
                             font-weight: 500;
                             color: #C2EEFF;
                             letter-spacing: 1px;
                         }
-                            &:nth-child(2){
+
+                        &:nth-child(2) {
                             font-size: 1.75rem;
                             font-family: YouSheBiaoTiHei;
                             color: #FFFFFF;
@@ -116,13 +129,16 @@
 
                 }
             }
+
             // background-color: pink;
         }
-            .build-left-center-titile{
+
+        .build-left-center-titile {
             display: flex;
             margin-bottom: 10px;
-                span{
+
-                    flex:1;
+            span {
+                flex: 1;
                 text-align: center;
                 font-size: 12px;
                 font-family: PingFangSC-Medium, PingFang SC;
@@ -131,19 +147,23 @@
                 line-height: 16px;
             }
         }
-            .build-left-center-content{
+
+        .build-left-center-content {
+
             // width: 100%;
             // height:40%;
-                .build-left-center-item{
+            .build-left-center-item {
-                    display: flex ;
+                display: flex;
                 width: 100%;
                 height: 28px;
                 align-items: center;
-                    &:hover{
+
-                        background: linear-gradient(270deg, rgba(0,124,230,0) 0%, rgba(0,70,200,0.8700) 100%);
+                &:hover {
+                    background: linear-gradient(270deg, rgba(0, 124, 230, 0) 0%, rgba(0, 70, 200, 0.8700) 100%);
                 }
-                    span{
+
-                        flex:1;
+                span {
+                    flex: 1;
                     text-align: center;
                     font-size: 12px;
                     font-family: PingFangSC-Medium, PingFang SC;
@@ -152,6 +172,7 @@
                     line-height: 16px;
                 }
             }
+
             // .slick-list{ 
             //     height: 128px !important;
             // }
@@ -159,60 +180,69 @@
 
 
     }
-        .build-left-bottom{
+
+    .build-left-bottom {
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;
-           .build-left-bottom-title{
+
+        .build-left-bottom-title {
             display: flex;
             flex-direction: column;
             align-items: center;
             justify-content: center;
             position: absolute;
             left: 15%;
-             top:38%;
+            top: 38%;
-                h2{
+
+            h2 {
                 font-size: 1.25rem;
                 font-family: YouSheBiaoTiHei;
                 color: #FFFFFF;
                 line-height: 1.625rem;
                 text-shadow: 0px 0px 0.25rem #1C60FE;
             }
-                span{
+
+            span {
                 font-size: 0.75rem;
                 font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
                 color: #E9F7FF;
             }
         }
-            img{
+
+        img {
             width: 19%;
             position: absolute;
             left: 16%;
-                top:29%
+            top: 29%
         }
 
     }
-    }
+}
-    .bgbuild-right{
+
+.bgbuild-right {
     position: absolute;
     right: 0;
     width: 25%;
     height: 100%;
-        .build-right-top{
+
+    .build-right-top {
         width: 100%;
         height: 100%;
         padding: 0 10px;
-           video{
+
+        video {
             width: 100%;
             height: 17vh;
             // margin-bottom: 5%;
 
         }
-           h2{
+
+        h2 {
             height: 25%;
             width: 100%;
             padding-left: 0.9375rem;
@@ -226,21 +256,25 @@
             background-size: 100% 100%;
         }
     }
-        .build-right-center{
+
+    .build-right-center {
         width: 100%;
         height: 100%;
+
         //    background-color: pink;
-           .build-right-center-top{
+        .build-right-center-top {
             width: 100%;
             height: 30%;
             display: flex;
             justify-content: space-around;
             align-items: center;
-                img{
+
-                    width:14% ;
+            img {
+                width: 14%;
                 // height: 80%;
             }
-                div{
+
+            div {
                 font-size: 1rem;
                 font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
@@ -249,61 +283,204 @@
                 // line-height: 22px;
                 letter-spacing: 0.0625rem;
             }
-                h2{
+
+            h2 {
                 font-size: 1.75rem;
                 font-family: YouSheBiaoTiHei;
                 color: #FFFFFF;
-                    margin-bottom : 0!important;
+                margin-bottom: 0 !important;
                 text-shadow: 0px 0px 0.25rem #07B9FE;
             }
         }
     }
-        .build-right-bottom{
+
+    .build-right-bottom {
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         align-items: center;
         position: relative;
-            .build-right-bottom-title{
+
+        .build-right-bottom-title {
             display: flex;
             flex-direction: column;
             // align-items: center;
             justify-content: center;
             position: absolute;
             align-items: center;
-                 left: 15%;
+            left: 44%;
-                 top:38%;
+            top: 35%;
-                    h2{
+
+            h2 {
                 font-size: 1.25rem;
                 font-family: YouSheBiaoTiHei;
                 color: #FFFFFF;
                 line-height: 1.625rem;
                 text-shadow: 0px 0px 0.25rem #1C60FE;
             }
-                    span{
+
+            span {
                 font-size: 0.75rem;
                 font-family: PingFangSC-Medium, PingFang SC;
                 font-weight: 500;
                 color: #E9F7FF;
             }
         }
-               .img1{
+
-                   width: 35%;
+        .img {
+            width: 25%;
+            position: absolute;
+            left: 38%;
+            top: 20%;
+        }
+
+        #ech {
             position: absolute;
-                   left: 30%;
+            left: 34%;
-                   top:5%;
+            display: flex;
+            text-align: center;
         }
-                .img2{
+
-                        width: 40%;
+        .build-right-bottom-item1 {
+            width: 25%;
+            height: 50%;
+            background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
+            background-size: 95%;
+            background-repeat: no-repeat;
+            display: flex;
+            flex-direction: column;
+            // justify-content: left;
+            // align-items: center;
+            position: absolute;
+            // float: left;
+            left: 30px;
+            margin-top: -10px;
+
+            // text-align: center;
+            div {
+                &:nth-child(1) {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    .sanji {
                         position: absolute;
-                        left: 40%;
+                        left: 1px;
-                        top:5%;
+                        top: 20px;
-                        z-index: 10;
+                        width: 80px;
+                        height: 22px;
+                        display: inline-block;
+                        overflow-wrap: break-word;
+                        color: rgba(233, 247, 255, 1);
+                        font-size: 16px;
+                        font-family: PingFangSC-Regular;
+                        white-space: nowrap;
+                        line-height: 22px;
+                        text-align: left;
                     }
 
+                    //     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;
+
+                    //     }
+                    // }
+                    // span{
+                    //     &:nth-child(2){
+                    //         // line-height: 22px;
+                    //     }
+
+                    // }
+                }
+
+                &:nth-child(2) {
+                    width: 112px;
+                    height: 49px;
+                    display: inline-block;
+                    overflow-wrap: break-word;
+                    color: rgba(255, 255, 255, 1);
+                    font-size: 38px;
+                    font-family: YouSheBiaoTiHei;
+                    white-space: nowrap;
+                    line-height: 49px;
+                    text-align: left;
+                    text-shadow: 0px 2px 4px rgba(28, 96, 254, 1);
+                    text-align: center;
+                    // line-height: 49px;
+                    margin-top: 60px;
+
+                }
             }
         }
 
+        .build-right-bottom-item2 {
+            width: 25%;
+            height: 50%;
+            background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
+            background-size: 95%;
+            background-repeat: no-repeat;
+            display: flex;
+            flex-direction: column;
+            // justify-content: left;
+            // align-items: center;
+            // position: absolute;
+            float: right;
+            margin-right: 10px;
+            margin-top: 50px;
+            margin-right: 20px;
 
+            div {
+                &:nth-child(1) {
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+
+                    .siji {
+                        left: 10px;
+                        top: 30px;
+                        width: 32px;
+                        height: 22px;
+                        display: inline-block;
+                        overflow-wrap: break-word;
+                        color: rgba(233, 247, 255, 1);
+                        font-size: 16px;
+                        font-family: PingFangSC-Regular;
+                        white-space: nowrap;
+                        line-height: 22px;
+                        text-align: left;
+                        margin-top: 20px;
+                        margin-right: 20px;
+                    }
+                }
 
+                &:nth-child(2) {
+                    width: 112px;
+                    height: 49px;
+                    display: inline-block;
+                    overflow-wrap: break-word;
+                    color: rgba(255, 255, 255, 1);
+                    font-size: 38px;
+                    font-family: YouSheBiaoTiHei;
+                    white-space: nowrap;
+                    line-height: 49px;
+                    text-align: left;
+                    text-shadow: 0px 2px 4px rgba(28, 96, 254, 1);
+                    text-align: center;
+                    // line-height: 49px;
+                    margin-top: 20px;
+                }
+            }
+        }
+    }
+}

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

@@ -59,8 +59,9 @@ const Guanli = (props) => {
       
     //   );
     const renderContent = () => {
+        // console.log(rightitemlist);
         return <div style={{height:"100%"}}>
-          {rightitemlist && rightitemlist.length!==0?rightitemlist?.map(({ id, licensePlate, overrunRate,fine,processingTime,deductPoints }, index) => {
+          {rightitemlist && rightitemlist.length!==0?rightitemlist?.map(({ id, licensePlate, overrunRate,fine,processingTime,deductPoints,nameOfInspectionPoint }, index) => {
            if(index<120){
             return <div key={index} className='guanli-right-item'>
             <div className='popover'>
@@ -75,7 +76,7 @@ const Guanli = (props) => {
                                 </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: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC"}}>{nameOfInspectionPoint}</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>
@@ -129,9 +130,9 @@ const Guanli = (props) => {
                 <span>处罚</span>
                 <span>处理日期</span>
             </div>
-            {rightitemlist && rightitemlist.length!==0?<div><AutoRollComponent content={renderContent()}
+            {rightitemlist && rightitemlist.length!==0?<AutoRollComponent content={renderContent()}
             containerStyle={{ position: "relative", height: "90%", }}
-            divHeight={"100%"} divId={"chart-overview-deviceList"} /></div>:<NoData style={{height:"70%"}}/>}
+            divHeight={"100%"} divId={"chart-overview-deviceList"} />:<NoData style={{height:"70%"}}/>}
         </Module>
         </div>
         </>

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

@@ -281,7 +281,9 @@
         min-height: 0 !important;
         background-color: rgba(0, 0, 0, 0) !important;
     }
-
+.ant-tooltip-arrow{
+    display: none;
+}
     // .ant-popover-arrow {
     //     .ant-popover-arrow-content {
     //         display: none;