diff --git a/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js b/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
new file mode 100644
index 00000000..d774030c
--- /dev/null
+++ b/web/client/src/sections/quanju/containers/footer/guanli/LeftItem.js
@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react';
+import './style.less'
+import * as echarts from 'echarts';
+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,
+            show: false,
+          },
+          radiusAxis: {
+            type: "category",
+            show: true,
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          series: [
+            {
+              name: "",
+              type: "bar",
+              roundCap: true,
+              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",
+                    },
+                  ]),
+                },
+              },
+            },
+          ],
+        };
+        chartInstance.setOption(seasonOption);
+    
+      }, [])
+  return (
+    <div className='guanli-left-item'>
+        <div className='guanli-left-item-left'>
+            <span>莲塘镇</span>
+            <div>244 <span>个</span></div>
+        </div>
+        <div className='guanli-left-item-right'>
+            <div ref={seasonChartRef} style={{ height: "100%", width: "100%" }}></div>
+        </div>
+    </div>
+  )
+}
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 1a12353f..88552520 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/index.js
+++ b/web/client/src/sections/quanju/containers/footer/guanli/index.js
@@ -2,9 +2,11 @@ import React from 'react'
 import { Carousel } from 'antd'
 import AutoRollComponent from '../build/AutoRollComponent'
 import Module from '../../public/module'
+import LeftItem from './LeftItem'
 import './style.less'
 const Guanli = () => {
     const datas = new Array(35)
+    const itemlist = [1,2,3]
     const renderContent = () => {
         datas.fill({
             chepaihao:'苏LD1112121',
@@ -27,7 +29,12 @@ const Guanli = () => {
       renderContent()
     return (
         <div className='guanli'>
-        <div className='guanli-left'>   
+        <div className='guanli-left'> 
+        <Module style={{height:"100%"}} title="检测点治超处理占比">
+            {itemlist.map((item,index)=>
+            <LeftItem key={index}></LeftItem>
+           )}    
+        </Module>  
         </div>
         <div className='guanli-right'>
         <Module style={{height:"100%"}} title="治超详情">
diff --git a/web/client/src/sections/quanju/containers/footer/guanli/style.less b/web/client/src/sections/quanju/containers/footer/guanli/style.less
index a04a8639..c225f744 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/style.less
+++ b/web/client/src/sections/quanju/containers/footer/guanli/style.less
@@ -8,159 +8,58 @@
     .guanli-left{
         width: 25%;
         height: 100%;
-        background-color: pink;
-        .guanli-left-top{
-            height: 100%;
-            width: 100%;
+        .guanli-left-item{
+            box-sizing: border-box;
+            width: 85%;
+            height: 30%;
+            margin: 0 auto 3%;
             display: flex;
-            justify-content: center;
             align-items: center;
-            .guanli-left-top-center{
-                width: 174px;
-                height: 146px;
-                margin: 0 10px;
-            }
-            .guanli-left-top-item{
-                width: 25%;
-                height: 50%;
-                background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
-                background-size: 95%;
-                background-repeat: no-repeat;
+            padding: 0 10%;
+            justify-content: space-between;
+            border: 2px solid rgba(28,96,254,0.5000);
+            .guanli-left-item-left{
+                width: 30%;
+                height: 70%;
                 display: flex;
                 flex-direction: column;
-                justify-content: center;
                 align-items: center;
-                // text-align: center;
-                div{
-                    &:nth-child(1){
-                        display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    span{
-                        &:nth-child(1){
-                            width: 8px;
-                            height: 8px;
-                            margin-right: 5px;
-                            background: #07B9FE;
-                            clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
-                            transform: rotate(134deg);
-                        }
-                        &:nth-child(2){
-                            font-size: 16px;
-                            font-family: PingFangSC-Regular, PingFang SC;
-                            font-weight: 400;
-                            color: #E9F7FF;
-                            line-height: 22px;
-                        }
-                       
-                    }
-                    }
-                    &:nth-child(2){
-                        // width: 80%;
-                        // height: 100%;
-                        // margin: 1% auto 0;
-                        font-size: 38px;
-                        font-family: YouSheBiaoTiHei;
-                        color: #FFFFFF;
-                        text-align: center;
-                        // line-height: 49px;
-                        text-shadow: 0px 2px 4px #1C60FE;
-                        
-                    }
+                span{
+                    font-size: 20px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: rgba(216,240,255,0.8000);
                 }
-            }
-        }
-        .guanli-left-center{
-            width: 100%;
-            height: 100%;
-            
-            .guanli-left-center-top{
-                width: 100%;
-                height: 30%;
-                display: flex;
-                justify-content: space-between;
                 div{
-                    width: 50%;
-                    height: 100%;
                     display: flex;
                     justify-content: center;
-                    align-items: center;
-                    img{
-                        height: 50px;
-                        width: 78px;
-
-                    }
-                    div{
-                        display: flex;
-                        flex-direction: column;
-                        align-items: start;
-                        justify-content: center;
-                        margin-left: 10px;
-                        span{
-                            &:nth-child(1){
-                                font-size: 12px;
-                                font-family: PingFangSC-Medium, PingFang SC;
-                                font-weight: 500;
-                                color: #C2EEFF;
-                                letter-spacing: 1px;
-                            }
-                            &:nth-child(2){
-                                font-size: 28px;
-                            font-family: YouSheBiaoTiHei;
-                            color: #FFFFFF;
-                            line-height: 36px;
-                            text-shadow: 0px 0px 4px #07B9FE;
-                            }
-                        }
-                        
-                    }
-                }
-                // background-color: pink;
-            }
-            .guanli-left-center-titile{
-                display: flex;
-                margin-bottom: 10px;
-                span{
-                    flex:1;
-                    text-align: center;
-                    font-size: 12px;
-                    font-family: PingFangSC-Medium, PingFang SC;
-                    font-weight: 500;
+                    // align-items: ;
+                    font-size: 34px;
+                    font-family: YouSheBiaoTiHei;
                     color: #FFFFFF;
-                    line-height: 16px;
-                }
-            }
-            .guanli-left-center-content{
-                width: 100%;
-                height: 100px!important;
-                .guanli-left-center-item{
-                    display: flex !important;
-                    width: 100%!important;
-                    height: 28px!important;
+                    height: 60%;
+                    width: 100%;
+                    background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat;
+                    background-size: 100% 80%;
+                    background-position: center bottom;
                     span{
-                        flex:1;
-                        text-align: center;
-                        font-size: 12px;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
-                        color: #FFFFFF;
-                        line-height: 16px;
+                        font-size: 16px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        padding-top: 10%;
+                        margin-left: 5px;
+                        // height: 0;
+                        color: rgba(216,240,255,0.8000);
                     }
                 }
-                .slick-list{ 
-                    height: 128px !important;
-                }
+                // background-color: pink;
             }
-            
-           
-        }
-        .guanli-left-bottom{
-            width: 100%;
-           height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        
+            .guanli-left-item-right{
+                width: 40%;
+                height: 60%;
+                // background-color: pink;
+            }
+            // background-color: pink;
         }
     }
     .guanli-right{