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

web/client/src/sections/organization/containers/user.js

@@ -181,7 +181,9 @@ const UserManage = (props) => {
     // 删除部门
     const delDepartment = (id) => {
         dispatch(delDep(id)).then(res => {
+            if(res.success){
                 dispatch(getDepMessage())
+            }
         });
     }
     const renderTree = (item, id) => {

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: {
+    // title: {
-      text:titleNum,//主标题文本
+    //   text:titleNum,//主标题文本
-      left:'center',
+    //   left:'10%',
-      top:'35%',
+    //   top:'35%',
-        subtext:chartTitle,//副标题文本
+    //     subtext:chartTitle,//副标题文本
-        textStyle:{
+    //     textStyle:{
-          fontFamily : "YouSheBiaoTiHei",
+    //       fontFamily : "YouSheBiaoTiHei",
-          fontSize: 20,
+    //       fontSize: 20,
-          color:'#FFFFFF',
+    //       color:'#FFFFFF',
+    //       marginLeft:'20%',
     //       align:'center'
-          },
+    //       },
-          subtextStyle:{
+    //       subtextStyle:{
-            fontFamily : "PingFangSC-Medium PingFang SC",
+    //         fontFamily : "PingFangSC-Medium PingFang SC",
-            fontSize: 12,
+    //         fontSize: 12,
-            fontWeight:500,
+    //         fontWeight:500,
-            color:'#E9F7FF',
+    //         color:'#E9F7FF',
-        }
+ 
-    },
+    //     }
+    // },
     legend: [
 
       {
@@ -80,7 +81,8 @@ function Leftbottom() {
       {
         name: '道路统计',
         type: 'pie',
-        radius: ['50%', '65%'],
+        radius: ['50%', '63%'],
+        center: ["30%", "50%"],
         // emphasis: { // 设置高亮时显示标签
         //   label: {
         //     show: true
@@ -157,7 +159,12 @@ function Leftbottom() {
 
   return (
     <div className='build-left-bottom'>
-      <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
+     <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 || "70%", height: height || "90%" }} id="ech"></div>
     </div>
   );
 }

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

@@ -4,7 +4,7 @@ import { Col, Progress, Row } from 'antd';
 import React, { useEffect, useRef } from 'react';
 // import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts';
-function Leftbottom() {
+function Rightbottom() {
   // const {
   //   safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
   // } = props;
@@ -37,24 +37,24 @@ function Leftbottom() {
       },
       formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}    <b>${values.value}</b>个(${values.percent}%)`,
     },
-    title: {
+    // title: {
-      text:titleNum,//主标题文本
+    //   text:titleNum,//主标题文本
-      left:'center',
+    //   left:'center',
-      top:'35%',
+    //   top:'35%',
-        subtext:chartTitle,//副标题文本
+    //     subtext:chartTitle,//副标题文本
-        textStyle:{
+    //     textStyle:{
-          fontFamily : "YouSheBiaoTiHei",
+    //       fontFamily : "YouSheBiaoTiHei",
-          fontSize: 20,
+    //       fontSize: 20,
-          color:'#FFFFFF',
+    //       color:'#FFFFFF',
-          // align:'center'
+    //       // align:'center'
-          },
+    //       },
-          subtextStyle:{
+    //       subtextStyle:{
-            fontFamily : "PingFangSC-Medium PingFang SC",
+    //         fontFamily : "PingFangSC-Medium PingFang SC",
-            fontSize: 12,
+    //         fontSize: 12,
-            fontWeight:500,
+    //         fontWeight:500,
-            color:'#E9F7FF',
+    //         color:'#E9F7FF',
-        }
+    //     }
-    },
+    // },
     // graphic: {
     //   elements: [
     //     {
@@ -119,9 +119,10 @@ function Leftbottom() {
     ],
     series: [
       {
-        name: '道路统计',
+        name: '公路等级统计',
         type: 'pie',
-        radius: ['50%', '65%'],
+        radius: ['50%', '63%'],
+        center:['30%','50%'],
         // emphasis: { // 设置高亮时显示标签
         //   label: {
         //     show: true
@@ -198,8 +199,13 @@ function Leftbottom() {
 
   return (
     <div className='build-right-bottom'>
-      <div ref={chartRef} style={{ width: width || 400, height: height || 200 }} id="ech"></div>
+      <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 || "70%", height: height || "90%" }} id="ech"></div>
     </div>
   );
 }
-export default Leftbottom
+export default Rightbottom

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

@@ -8,14 +8,30 @@ 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'>
             <Module title={"各种状态公路数量统计"} style={{ width: "100%",
             height:" 33%"
-            }}>
+            }} customize = {true}>
                <div className='build-left-top'>
                     <div className='build-left-top-item'>
                     <div>
@@ -38,7 +54,7 @@ const Build = () => {
             </Module>
             <Module title={"各乡镇道路占比统计"} style={{ width: "100%",
             height:" 33%",marginTop:'3%'
-            }}>
+            }} customize = {true}>
                 <div className='build-left-center'>
                     <div className='build-left-center-top'>
                         <div>
@@ -61,45 +77,13 @@ const Build = () => {
                         <span>公路数量/条</span>
                         <span>公里</span>
                     </div>
-                    <div className='build-left-center-content'>
+                    <AutoRollComponent content = {rendercontent()} containerStyle={{ position: "relative", height: "50%", }}
-                        <Carousel dotPosition='left' autoplay={true} dots={false}>
+            divHeight={"100%"} divId={"chart"} />
-                    <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>
                 </div>
             </Module>
             <Module title={"道路统计"} style={{ width: "100%",
             height:" 30%",marginTop:'3%'
-            }}>
+            }} customize = {true}>
                 <LeftBottom/>
             </Module>
            
@@ -115,12 +99,12 @@ const Build = () => {
             </Module>
         <Module title={"各乡镇在建公路工程"} style={{ width: "100%",
             height:" 33%",marginTop:'3%'
-            }}>
+            }} customize = {true}>
                 <Rightcenter/>
             </Module>
         <Module title={"公路等级统计"} style={{ width: "100%",
             height:" 30%",marginTop:'3%'
-            }}>
+            }} customize = {true}>
                 <RightBottom/>
             </Module>
         </div>

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;
+                width: 35%;
-                height: 146px;
+                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;
+                        // height: 15%;
-                        width: 78px;
+                        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%;
+                // width: 100%;
-                height: 100px!important;
+                // height:40%;
                 .build-left-center-item{
-                    display: flex !important;
+                    display: flex ;
-                    width: 100%!important;
+                    width: 100%;
-                    height: 28px!important;
+                    height: 28px;
                     span{
                         flex:1;
                         text-align: center;
@@ -146,9 +151,9 @@
                         line-height: 16px;
                     }
                 }
-                .slick-list{ 
+                // .slick-list{ 
-                    height: 128px !important;
+                //     height: 128px !important;
-                }
+                // }
             }
             
            
@@ -159,6 +164,35 @@
             display: flex;
             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: 26.5%;
+                top:29%
+            }
         
         }
     }
@@ -179,7 +213,7 @@
             height: 30%;
             width: 100%;
             padding-left: 15px;
-            font-size: 24px;
+            font-size: 1.5rem;
             font-family: YouSheBiaoTiHei;
             color: #FFFFFF;
             display: flex;
@@ -200,23 +234,24 @@
                 justify-content: space-around;
                 align-items: center;
                 img{
-                    width:12% ;
+                    width:14% ;
-                    height: 80%;
+                    // height: 80%;
                 }
                 div{
-                    font-size: 16px;
+                    font-size: 1rem;
                     font-family: PingFangSC-Medium, PingFang SC;
                     font-weight: 500;
                     color: #C2EEFF;
-                    line-height: 22px;
+                    transform: translateX(-1.5rem);
-                    letter-spacing: 1px
+                    // 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;
                 }
            }
         }
@@ -226,6 +261,35 @@
             display: flex;
             justify-content: center;
             align-items: center;
+            position: relative;
+            .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: 26.5%;
+                top:29%
+            }
         }
     }
 }

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

@@ -3,6 +3,7 @@ import Left from './left'
 import Right from './right'
 
 const Conserve = () => {
+
     return (
         <div style={{ display: 'flex', width: '100%', height: '100%', justifyContent: 'space-between' }}>
             <Left />

web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js

@@ -1,27 +1,219 @@
 import { Col, Row } from 'antd'
 import React from 'react'
-import { useEffect } from 'react'
+import { useEffect, useRef } from 'react'
 import Module from '../../../public/module'
+import * as echarts from 'echarts';
 
 const LeftCenter = () => {
     const style = { height: "31%", marginTop: "3%" }
-
+    const chartRef = useRef(null);
     useEffect(() => {
+        let chartInstance = echarts.init(chartRef.current);
+        let colorArray = [
+            {
+                top: "#07B9FE",
+                bottom: "#10274B",
+            },
+            {
+                top: "#1978E5",
+                bottom: " #10274B",
+            },
+            {
+                top: "#1978E5",
+                bottom: "#10274B",
+            },
+        ];
+        const option = {
+            tooltip: {
+                show: true,
+                trigger: "axis",
+                axisPointer: {
+                    type: "none",
+                },
+            },
+            grid: {
+                left: "5%",
+                top: "12%",
+                right: "1%",
+                bottom: "8%",
+                containLabel: true,
+            },
+
+            xAxis: {
+                type: "value",
+                show: true,
+                position: "bottom",
+                axisTick: {
+                    show: true,
+                    lineStyle: {
+                        color: "rgba(176,215,255,0.25)",
+                        // type: "dashed",
+                    },
+                },
+                axisLine: {
+                    show: false,
+                    lineStyle: {
+                        color: "rgba(216,240,255,0.8000)",
+                    },
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: "rgba(176,215,255,0.25)",
+                        type: "dashed",
+                    },
+                },
+            },
+            yAxis: [
+                {
+                    type: "category",
+                    axisTick: {
+                        show: false,
+                        alignWithLabel: false,
+                        length: 5,
+                    },
+                    splitLine: {
+                        //网格线
+                        show: false,
+                    },
+                    inverse: true, //排序
+                    axisLine: {
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(176,215,255,0.8)",
+                        },
+                    },
+                    zlevel: 100,
+                    data: ["县级可绿化里程", "乡级可绿化里程", "村级可绿化里程"],
+                },
+                {
+                    type: "category",
+                    axisTick: {
+                        show: false,
+                        alignWithLabel: false,
+                        length: 5,
+                    },
+                    splitLine: {
+                        //网格线
+                        show: false,
+                    },
+                    axisLabel: {
+                        show: true,
+                        backgroundColor: {
+                            image: 'assets/images/quanju/kelvhua_bdbg.png',
+                        },
+                        width: 50,
+                        height: 20,
+                        color: '#D8F0FF',
+                        margin:40,
+                        verticalAlign: 'middle',
+                        align: 'center'
+                        // formatter:(f) =>{console.log('f:',f);}
+                    },
+                    inverse: true, //排序
+                    axisLine: {
+                        show: false,
+                        lineStyle: {
+                            color: "rgba(176,215,255,0.8)",
+                        },
+
+                    },
+                    data: [60, 132, 89],
+                },
+            ],
+            series: [
+                {
+                    name: '背景',
+                    type: "bar",
+                    barWidth: 3,
+                    barGap: "100%",
+                    barCategoryGap: "50%",
+                    color: "#15356E",
+                    data: [150, 150, 150, 150],
+                    tooltip: {
+                        show: false,
+                    },
+                },
+                {
+                    name: "",
+                    type: "bar",
+                    zlevel: 1,
+                    barWidth: 3,
+                    barGap: "-100%",
+                    barCategoryGap: "50%",
+                    data: [60, 132, 89],
+                    label: {
+                        show: true,
+                        position: 'right', // 位置
+                        fontSize: 12,
+                        lineHeight: 13,
+                        distance: -2,
+                        verticalAlign: "middle",
+                        formatter: [
+                            '{a| }',
+                        ].join(''), // 这里是数据展示的时候显示的数据
+                        rich: {
+                            a: {
+                                backgroundColor: {
+                                    image: 'assets/images/quanju/circle2.png'
+                                },
+                                width: 15,
+                                height: 15,
+                                align: 'left',
+                                verticalAlign: "center",
+                            }
+                        }
+                    },
+                    itemStyle: {
+                        normal: {
+                            show: true,
+                            color: function (params) {
+                                return {
+                                    type: "linear",
+                                    colorStops: [
+                                        {
+                                            offset: 0,
+                                            color: colorArray[params.dataIndex].bottom,
+                                        },
+                                        {
+                                            offset: 1,
+                                            color: colorArray[params.dataIndex].top,
+                                        },
+
 
-  }, [])
+                                    ],
+                                    // globalCoord: false,
+                                };
+                            },
+                            barBorderRadius: 70,
+                            borderWidth: 0,
+                            borderColor: "#333",
+                        },
+                    },
+                    emphasis: {
+                        disabled: true  //禁止移入柱子改变颜色
+                    }
+                },
+            ],
+        };
+        chartInstance.setOption(option);
+        window.onresize = function () {
+            chartInstance.resize();
+        }
+    }, []);
 
     return (
         <>
             <Module style={style} title={"可绿化里程统计"}>
 
-        <Row align='middle' style={{ padding: 10 }}>
+                <Row align='middle' style={{ padding: '10px 3% 0px 15px' }}>
                     <Col span={15}>
                         <img src='assets/images/quanju/kelvhua_icon.png' alt='icon' />
                         <span style={{ color: '#C2EEFF', marginLeft: 5 }}>可绿化里程总数</span>
                     </Col>
                     <Col span={9} style={{ fontSize: 28, fontFamily: 'YouSheBiaoTiHei', color: '#fff' }}>1234.123</Col>
                 </Row>
-        <div>图表</div>
+                <div ref={chartRef} style={{ height: "14.5vh", width: "96%" }}></div>
 
             </Module>
         </>

web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js

@@ -12,6 +12,9 @@ const LeftTop = () => {
   useEffect(() => {
     let chartInstance = echarts.init(seasonChartRef.current);
     const seasonOption = {
+      tooltip:{
+        show:true
+      },
       title: [
         {
           text: "季节性",
@@ -37,6 +40,13 @@ const LeftTop = () => {
         radius: ["60%", "68%"],
         center: ["50%", "50%"],
       },
+      grid: {
+        left: "5%",
+        top: "12%",
+        right: "1%",
+        bottom: "8%",
+        containLabel: true,
+      },
       angleAxis: {
         max: 100,
         show: false,
@@ -61,7 +71,7 @@ const LeftTop = () => {
           roundCap: true,
           barWidth: 30,
           showBackground: true,
-          data: [40],
+          data: [{value:40,name:'季节性'}],
           coordinateSystem: "polar",
           itemStyle: {
             normal: {
@@ -81,11 +91,21 @@ const LeftTop = () => {
       ],
     };
     chartInstance.setOption(seasonOption);
+    window.addEventListener('resize',() =>{
+      if(chartInstance) {
+        chartInstance.resize()
+      }
+     })
 
   }, [])
   useEffect(() => {
     let chartInstance = echarts.init(frequentlyChartRef.current);
+
     const frequentlyOption = {
+      tooltip:{
+        show:true,
+        trigger: "item",
+      },
       title: [
         {
           text: "经常性",
@@ -111,6 +131,14 @@ const LeftTop = () => {
         radius: ["60%", "68%"],
         center: ["50%", "50%"],
       },
+      grid: {
+        left: "10%",
+        top: "12%",
+        right: "1%",
+        bottom: "8%",
+        width: '70%',
+        containLabel: true,
+      },
       angleAxis: {
         max: 100,
         show: false,
@@ -135,7 +163,7 @@ const LeftTop = () => {
           roundCap: true,
           barWidth: 30,
           showBackground: true,
-          data: [40],
+          data:[{value:40,name:'经常性'}],
           coordinateSystem: "polar",
           itemStyle: {
             normal: {
@@ -157,30 +185,34 @@ const LeftTop = () => {
       ],
     };
     chartInstance.setOption(frequentlyOption);
-
+    window.addEventListener('resize', () => {
+      if (chartInstance) {
+        chartInstance.resize()
+      }
+    })
   }, [])
   const style = { height: "31%", marginTop: "3%" }
   return (
     <>
       <Module style={style} title={"道路养护周期统计"}>
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: 'relative', width: '100%', height: '100%' }}>
-          <div style={{ width: '100%', display: 'flex' }}>
+          <div style={{ width: '100%', height: '100%', display: 'flex', padding: '3%' }}>
-            <div ref={seasonChartRef} style={{ height: "23vh", width: "50%" }}>
+            <div ref={seasonChartRef} style={{ width: "50%" }}>
 
             </div>
 
-            <div ref={frequentlyChartRef} style={{ height: "23vh", width: "50%" }}></div>
+            <div ref={frequentlyChartRef} style={{ width: "50%" }}></div>
           </div>
           <img src='assets/images/quanju/circle.png' style={{
             position: 'absolute',
-            left: '19%',
+            left: '23%',
-            top: '70%',
+            top: '66%',
             zIndex: 999
           }} />
           <img src='assets/images/quanju/circle.png' style={{
             position: 'absolute',
             right: '27%',
-            top: '70%',
+            top: '66%',
             zIndex: 999
           }} />
         </div>

web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js

@@ -5,12 +5,12 @@ import Module from '../../../public/module'
 const RightTop = () => {
   const style = { height: "31%", marginTop: "3%" }
   const textStyle = { fontSize: 14, color: '#E9F7FF' }
-  const numStyle = { color: '#fff', fontSize: 24, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
+  const numStyle = { color: '#fff', fontSize: 20, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
   return (
     <>
       <Module style={style} title={"道路设施数量统计"}>
         <div style={{ paddingLeft: '8%' }}>
-          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+          <Row style={{ marginTop: "5%", justifyContent: 'space-around' }}>
             <Col style={{ display: 'flex', width: '50%' }}>
               <img src='assets/images/quanju/biaoxian.png' alt='icon' />
               <div style={{ marginLeft: 10 }}>
@@ -26,7 +26,7 @@ const RightTop = () => {
               </span>
             </Col>
           </Row>
-          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+          <Row style={{ justifyContent: 'space-around' }}>
             <Col style={{ display: 'flex', width: '50%' }}>
               <img src='assets/images/quanju/biaozhi.png' alt='icon' />
               <span style={{ marginLeft: 10 }}>

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

@@ -5,82 +5,10 @@ export default function LeftItem() {
     const seasonChartRef = useRef(null);
     useEffect(() => {
         let chartInstance = echarts.init(seasonChartRef.current);
-        // const seasonOption = {
-        //   title: [
-        //     {
-        //       text: "已处理",
-        //       x: "center",
-        //       top: "55%",
-        //       textStyle: {
-        //         color: "#E9F7FF",
-        //         fontSize: 14,
-        //       },
-        //     },
-        //     {
-        //       text: "2333",
-        //       x: "center",
-        //       y: "35%",
-        //       textStyle: {
-        //         fontSize: "30",
-        //         color: "#FFFFFF",
-        //         fontFamily: "YouSheBiaoTiHei",
-        //       },
-        //     },
-        //   ],
-        //   polar: {
-        //     radius: ["78%", "86%"],
-        //     center: ["50%", "50%"],
-        //   },
-        //   angleAxis: {
-        //     max: 100,
-        //     clockWise:false,  //逆时针加载
-        //     show: false,
-        //   },
-        //   radiusAxis: {
-        //     type: "category",
-        //     show: true,
-        //     axisLabel: {
-        //       show: false,
-        //     },
-        //     axisLine: {
-        //       show: false,
-        //     },
-        //     axisTick: {
-        //       show: false,
-        //     },
-        //   },
-        //   series: [
-        //     {
-        //       name: "",
-        //       type: "bar",
-        //       roundCap: true,
-        //       clockWise:false,  //逆时针加载
-        //       barWidth: 30,
-        //       showBackground: true,
-        //       data: [40],
-        //       coordinateSystem: "polar",
-        //       itemStyle: {
-        //         normal: {
-        //           color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
-        //             {
-        //               offset: 0,
-        //               color: "#AAC8FF",
-        //             },
-        //             {
-        //               offset: 1,
-        //               color: "#0041BB",
-        //             },
-        //           ]),
-        //         },
-        //       },
-        //     },
-        //   ],
-        // };
         const option = {
             title: {
             text: '75%',
             top:'35%',
-            
             textStyle: {
                 fontSize: 22,
                 fontFamily: 'PingFangSC-Medium, PingFang SC',
@@ -140,17 +68,17 @@ export default function LeftItem() {
         series: [{
             type: 'bar',
             data: [{
-                name: '作文得分',
+                name: '已处理',
                 value: 75,
                 itemStyle: {
                     normal: {
                         color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [ {
                             offset: 0,
-                            color: "#AAC8FF",
+                            color: "#00D5FF",
                           },
                           {
                             offset: 1,
-                            color: "#0041BB",
+                            color: "#1978E5",
                           }])
                     }
                 },
@@ -165,7 +93,7 @@ export default function LeftItem() {
             data: [{
                 value: 100,
                 itemStyle: {
-                    color: '#e2e2e2',
+                    color: '#092B7B ',
                     shadowColor: 'rgba(0, 0, 0, 0.2)',
                     shadowBlur: 5,
                     shadowOffsetY: 2
@@ -178,6 +106,9 @@ export default function LeftItem() {
             z: 1
           }]
       }
+      
+    
+      
         chartInstance.setOption(option);
     
       }, [])
@@ -188,7 +119,9 @@ export default function LeftItem() {
             <div>244 <span>个</span></div>
         </div>
         <div className='guanli-left-item-right'>
-            <div ref={seasonChartRef} style={{ height: "100%", width: "100%" }}></div>
+        <span></span>
+            <div ref={seasonChartRef} style={{ height: "100%", width: "100%" }}>
+            </div>
         </div>
     </div>
   )

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

@@ -26,18 +26,18 @@ const Guanli = () => {
           })}
         </div>
       }
-      renderContent()
+    //   renderContent()
     return (
         <div className='guanli'>
         <div className='guanli-left'> 
-        <Module style={{height:"100%"}} title="检测点治超处理占比">
+        <Module style={{height:"100%"}} title="检测点治超处理占比" customize={true}>
             {itemlist.map((item,index)=>
             <LeftItem key={index}></LeftItem>
            )}    
         </Module>  
         </div>
         <div className='guanli-right'>
-        <Module style={{height:"100%"}} title="治超详情">
+        <Module style={{height:"100%"}} title="治超详情" customize={true}>
             <div className = "guanli-right-top">
                 <img src="/assets/images/quanju/zhicaolog.png"></img>
                 <span>已处理</span>

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

@@ -19,8 +19,8 @@
             justify-content: space-between;
             border: 2px solid rgba(28,96,254,0.5000);
             .guanli-left-item-left{
-                width: 30%;
+                width: 45%;
-                height: 70%;
+                height: 60%;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
@@ -37,7 +37,7 @@
                     font-size: 34px;
                     font-family: YouSheBiaoTiHei;
                     color: #FFFFFF;
-                    height: 60%;
+                    height: 70%;
                     width: 100%;
                     background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat;
                     background-size: 100% 80%;
@@ -56,7 +56,20 @@
             }
             .guanli-left-item-right{
                 width: 40%;
-                height: 60%;
+                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;