From 6f15fb0fc93637194485320f6b904e8dcaed42c0 Mon Sep 17 00:00:00 2001
From: dengyinhuan <deng.yinhuan@free-sun.com.cn>
Date: Sat, 23 Jul 2022 17:31:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=BB=BA=E8=AE=BE=E5=A4=A7?=
 =?UTF-8?q?=E5=B1=8F=E9=80=82=E9=85=8D1280=E5=B1=8F=E5=B9=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../containers/footer/build/Leftbottom.js     |  48 ++++----
 .../containers/footer/build/Rightbottom.js    |  45 +++----
 .../quanju/containers/footer/build/index.js   |  52 +++-----
 .../quanju/containers/footer/build/style.less | 112 +++++++++++++-----
 .../quanju/containers/footer/guanli/index.js  |   2 +-
 5 files changed, 153 insertions(+), 106 deletions(-)

diff --git a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
index 639dc4e0..55fd8020 100644
--- a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
+++ b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
@@ -1,6 +1,5 @@
 
 import './style.less'
-import { Col, Progress, Row } from 'antd';
 import React, { useEffect, useRef } from 'react';
 // import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts';
@@ -34,24 +33,26 @@ function Leftbottom() {
       },
       formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}    <b>${values.value}</b>个(${values.percent}%)`,
     },
-    title: {
-      text:titleNum,//主标题文本
-      left:'center',
-      top:'35%',
-        subtext:chartTitle,//副标题文本
-        textStyle:{
-          fontFamily : "YouSheBiaoTiHei",
-          fontSize: 20,
-          color:'#FFFFFF',
-          // align:'center'
-          },
-          subtextStyle:{
-            fontFamily : "PingFangSC-Medium PingFang SC",
-            fontSize: 12,
-            fontWeight:500,
-            color:'#E9F7FF',
-        }
-    },
+    // title: {
+    //   text:titleNum,//主标题文本
+    //   left:'10%',
+    //   top:'35%',
+    //     subtext:chartTitle,//副标题文本
+    //     textStyle:{
+    //       fontFamily : "YouSheBiaoTiHei",
+    //       fontSize: 20,
+    //       color:'#FFFFFF',
+    //       marginLeft:'20%',
+    //       align:'center'
+    //       },
+    //       subtextStyle:{
+    //         fontFamily : "PingFangSC-Medium PingFang SC",
+    //         fontSize: 12,
+    //         fontWeight:500,
+    //         color:'#E9F7FF',
+ 
+    //     }
+    // },
     legend: [
 
       {
@@ -80,7 +81,8 @@ function Leftbottom() {
       {
         name: '道路统计',
         type: 'pie',
-        radius: ['60%', '75%'],
+        radius: ['50%', '63%'],
+        center: ["30%", "50%"],
         // emphasis: { // 设置高亮时显示标签
         //   label: {
         //     show: true
@@ -157,8 +159,12 @@ function Leftbottom() {
 
   return (
     <div className='build-left-bottom'>
+     <div className='build-left-bottom-title'>
+        <h2>3234.23</h2>
+        <span>道路总公里</span>
+     </div>
       <img src='/assets/images/quanju/chart-circle.png'></img>
-      <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
+      <div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
     </div>
   );
 }
diff --git a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
index d1cb74a6..63b5b344 100644
--- a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
+++ b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
@@ -37,24 +37,24 @@ function Rightbottom() {
       },
       formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}    <b>${values.value}</b>个(${values.percent}%)`,
     },
-    title: {
-      text:titleNum,//主标题文本
-      left:'center',
-      top:'35%',
-        subtext:chartTitle,//副标题文本
-        textStyle:{
-          fontFamily : "YouSheBiaoTiHei",
-          fontSize: 20,
-          color:'#FFFFFF',
-          // align:'center'
-          },
-          subtextStyle:{
-            fontFamily : "PingFangSC-Medium PingFang SC",
-            fontSize: 12,
-            fontWeight:500,
-            color:'#E9F7FF',
-        }
-    },
+    // title: {
+    //   text:titleNum,//主标题文本
+    //   left:'center',
+    //   top:'35%',
+    //     subtext:chartTitle,//副标题文本
+    //     textStyle:{
+    //       fontFamily : "YouSheBiaoTiHei",
+    //       fontSize: 20,
+    //       color:'#FFFFFF',
+    //       // align:'center'
+    //       },
+    //       subtextStyle:{
+    //         fontFamily : "PingFangSC-Medium PingFang SC",
+    //         fontSize: 12,
+    //         fontWeight:500,
+    //         color:'#E9F7FF',
+    //     }
+    // },
     // graphic: {
     //   elements: [
     //     {
@@ -121,7 +121,8 @@ function Rightbottom() {
       {
         name: '公路等级统计',
         type: 'pie',
-        radius: ['60%', '75%'],
+        radius: ['50%', '63%'],
+        center:['30%','50%'],
         // emphasis: { // 设置高亮时显示标签
         //   label: {
         //     show: true
@@ -198,8 +199,12 @@ function Rightbottom() {
 
   return (
     <div className='build-right-bottom'>
+      <div className='build-right-bottom-title'>
+        <h2>3234.23</h2>
+        <span>道路总公里</span>
+     </div>
       <img src='/assets/images/quanju/chart-circle.png'></img>
-      <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
+      <div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
     </div>
   );
 }
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 bb83009b..834b1b31 100644
--- a/web/client/src/sections/quanju/containers/footer/build/index.js
+++ b/web/client/src/sections/quanju/containers/footer/build/index.js
@@ -8,8 +8,24 @@ import Rightcenter from './Rightcenter'
 import { Carousel } from 'antd'
 import Module from '../../public/module'
 import RightBottom from './Rightbottom'
+import AutoRollComponent from './AutoRollComponent'
 import './style.less'
 const Build = () => {
+    const datas = new Array(15)
+    datas.fill({
+        name:"东乡镇",
+        number:"11111",
+        gongli:'9999'
+    },0,15)
+    const rendercontent = ()=>{
+        return (<div className='build-left-center-content'>
+        {datas.map(({name,number,gongli},index)=><div className='build-left-center-item' key={index}>
+        <span>{name}</span>
+        <span>{number}</span>
+        <span>{gongli}</span>
+    </div>)}
+    </div>)
+    }
     return (
        <div className='bgbuild'>
         <div className='bgbuild-left'>
@@ -61,40 +77,8 @@ const Build = () => {
                         <span>公路数量/条</span>
                         <span>公里</span>
                     </div>
-                    <div className='build-left-center-content'>
-                        <Carousel dotPosition='left' autoplay={true} dots={false}>
-                    <div className='build-left-center-item'>
-                        <span>乡镇名称</span>
-                        <span>公路数量/条</span>
-                        <span>公里</span>
-                    </div>
-                    <div className='build-left-center-item'>
-                        <span>乡镇名称</span>
-                        <span>公路数量/条</span>
-                        <span>公里</span>
-                    </div>
-                    <div className='build-left-center-item'>
-                        <span>乡镇名称</span>
-                        <span>公路数量/条</span>
-                        <span>公里</span>
-                    </div>
-                    <div className='build-left-center-item'>
-                        <span>乡镇名称</span>
-                        <span>公路数量/条</span>
-                        <span>公里</span>
-                    </div>
-                    <div className='build-left-center-item'>
-                        <span>乡镇名称</span>
-                        <span>公路数量/条</span>
-                        <span>公里</span>
-                    </div>
-                    <div className='build-left-center-item'>
-                        <span>乡镇名称</span>
-                        <span>公路数量/条</span>
-                        <span>公里</span>
-                    </div>
-                        </Carousel>
-                    </div>
+                    <AutoRollComponent content = {rendercontent()} containerStyle={{ position: "relative", height: "50%", }}
+            divHeight={"100%"} divId={"chart"} />
                 </div>
             </Module>
             <Module title={"道路统计"} style={{ width: "100%",
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 30b50752..727ada13 100644
--- a/web/client/src/sections/quanju/containers/footer/build/style.less
+++ b/web/client/src/sections/quanju/containers/footer/build/style.less
@@ -1,3 +1,8 @@
+@media screen and (max-width:1281px){
+    html{
+        font-size: 10px;
+    }
+}
 .bgbuild{
     // box-sizing: border-box;
     padding: 0 15px 0 15px;
@@ -15,8 +20,8 @@
             justify-content: center;
             align-items: center;
             .build-left-top-center{
-                width: 174px;
-                height: 146px;
+                width: 35%;
+                height: 50%;
                 margin: 0 10px;
             }
             .build-left-top-item{
@@ -45,11 +50,11 @@
                             transform: rotate(134deg);
                         }
                         &:nth-child(2){
-                            font-size: 16px;
+                            font-size: 1rem;
                             font-family: PingFangSC-Regular, PingFang SC;
                             font-weight: 400;
                             color: #E9F7FF;
-                            line-height: 22px;
+                            // line-height: 22px;
                         }
                        
                     }
@@ -58,7 +63,7 @@
                         // width: 80%;
                         // height: 100%;
                         // margin: 1% auto 0;
-                        font-size: 38px;
+                        font-size: 2.375rem;
                         font-family: YouSheBiaoTiHei;
                         color: #FFFFFF;
                         text-align: center;
@@ -85,8 +90,8 @@
                     justify-content: center;
                     align-items: center;
                     img{
-                        height: 50px;
-                        width: 78px;
+                        // height: 15%;
+                        width: 25%;
 
                     }
                     div{
@@ -97,14 +102,14 @@
                         margin-left: 10px;
                         span{
                             &:nth-child(1){
-                                font-size: 12px;
+                                font-size: 0.75rem;
                                 font-family: PingFangSC-Medium, PingFang SC;
                                 font-weight: 500;
                                 color: #C2EEFF;
                                 letter-spacing: 1px;
                             }
                             &:nth-child(2){
-                                font-size: 28px;
+                                font-size: 1.75rem;
                             font-family: YouSheBiaoTiHei;
                             color: #FFFFFF;
                             line-height: 36px;
@@ -130,12 +135,12 @@
                 }
             }
             .build-left-center-content{
-                width: 100%;
-                height: 100px!important;
+                // width: 100%;
+                // height:40%;
                 .build-left-center-item{
-                    display: flex !important;
-                    width: 100%!important;
-                    height: 28px!important;
+                    display: flex ;
+                    width: 100%;
+                    height: 28px;
                     span{
                         flex:1;
                         text-align: center;
@@ -146,9 +151,9 @@
                         line-height: 16px;
                     }
                 }
-                .slick-list{ 
-                    height: 128px !important;
-                }
+                // .slick-list{ 
+                //     height: 128px !important;
+                // }
             }
             
            
@@ -160,10 +165,33 @@
             justify-content: center;
             align-items: center;
             position: relative;
+           .build-left-bottom-title{
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+             left: 27%;
+             top:38%;
+                h2{
+                    font-size: 1.25rem;
+                    font-family: YouSheBiaoTiHei;
+                    color: #FFFFFF;
+                    line-height: 1.625rem;
+                    text-shadow: 0px 0px 0.25rem #1C60FE;
+                }
+                span{
+                    font-size: 0.75rem;
+                    font-family: PingFangSC-Medium, PingFang SC;
+                    font-weight: 500;
+                    color: #E9F7FF;
+                }
+           }
             img{
+                width: 19%;
                 position: absolute;
-                left: 38%;
-                top:26%
+                left: 26.5%;
+                top:29%
             }
         
         }
@@ -185,7 +213,7 @@
             height: 30%;
             width: 100%;
             padding-left: 15px;
-            font-size: 24px;
+            font-size: 1.5rem;
             font-family: YouSheBiaoTiHei;
             color: #FFFFFF;
             display: flex;
@@ -206,23 +234,24 @@
                 justify-content: space-around;
                 align-items: center;
                 img{
-                    width:12% ;
-                    height: 80%;
+                    width:14% ;
+                    // height: 80%;
                 }
                 div{
-                    font-size: 16px;
+                    font-size: 1rem;
                     font-family: PingFangSC-Medium, PingFang SC;
                     font-weight: 500;
                     color: #C2EEFF;
-                    line-height: 22px;
-                    letter-spacing: 1px
+                    transform: translateX(-1.5rem);
+                    // line-height: 22px;
+                    letter-spacing: 0.0625rem;
                 }
                 h2{
-                    font-size: 28px;
+                    font-size: 1.75rem;
                     font-family: YouSheBiaoTiHei;
                     color: #FFFFFF;
                     margin-bottom : 0!important;
-                    text-shadow: 0px 0px 4px #07B9FE;
+                    text-shadow: 0px 0px 0.25rem #07B9FE;
                 }
            }
         }
@@ -233,10 +262,33 @@
             justify-content: center;
             align-items: center;
             position: relative;
-            img{
+            .build-right-bottom-title{
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                position: absolute;
+                 left: 27%;
+                 top:38%;
+                    h2{
+                        font-size: 1.25rem;
+                        font-family: YouSheBiaoTiHei;
+                        color: #FFFFFF;
+                        line-height: 1.625rem;
+                        text-shadow: 0px 0px 0.25rem #1C60FE;
+                    }
+                    span{
+                        font-size: 0.75rem;
+                        font-family: PingFangSC-Medium, PingFang SC;
+                        font-weight: 500;
+                        color: #E9F7FF;
+                    }
+               }
+               img{
+                width: 19%;
                 position: absolute;
-                left: 38%;
-                top:26%
+                left: 26.5%;
+                top:29%
             }
         }
     }
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 1bf8a079..e50e8467 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/index.js
+++ b/web/client/src/sections/quanju/containers/footer/guanli/index.js
@@ -26,7 +26,7 @@ const Guanli = () => {
           })}
         </div>
       }
-      renderContent()
+    //   renderContent()
     return (
         <div className='guanli'>
         <div className='guanli-left'>