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 55fd8020..d2b731cb 100644
--- a/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
+++ b/web/client/src/sections/quanju/containers/footer/build/Leftbottom.js
@@ -3,11 +3,19 @@ import './style.less'
 import React, { useEffect, useRef } from 'react';
 // import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts';
-function Leftbottom() {
-  // const {
-  //   safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
-  // } = props;
+function Leftbottom(props) {
+  const { width, height, data, total, text } = props
   const chartRef = useRef(null);
+  let colorList = [
+    "rgba(7,185,254,1)",
+    "rgba(28,96,254,1)",
+    "rgba(4,251,240,1)",
+  ]
+  let underColorList = [
+    "rgba(7,185,254,0.5)",
+    "rgba(28,96,254,0.5)",
+    "rgba(4,251,240,0.5)",
+  ]
   const safetyData = [
   {name: '县道', value: 72},
   {name: '乡道', value: 17},
@@ -15,145 +23,201 @@ function Leftbottom() {
   ]
   const chartTitle = '道路总公里';
   const title = '基础设施安全监测版块';
-  // const number = 2738;
-  // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
-  const rightLegend = ['县道', '乡道', '村道']
-  const legendColor = undefined;
-  const width = undefined
-  const height = undefined
-  var titleNum = 15
-  let safetyOption = {
+  let name = [], emptyName = []
+  // const name = data?.map(d)
+  data?.forEach(d => {
+    name.push(d.name)
+    emptyName.push({
+      name: '',
+      value: d.value
+    })
+  })
+  
+  // let safetyOption = {
+  //   tooltip: {
+  //     show: true,
+  //     trigger: 'item',
+  //     position: 'right',
+  //     backgroundColor: 'rgba(0,0,0,0.7)',
+  //     textStyle: {
+  //       color: '#fff',
+  //     },
+  //     formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}    <b>${values.value}</b>个(${values.percent}%)`,
+  //   },
+  //   // 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: [
+
+  //     {
+  //       orient: 'vertical',
+  //       textStyle: {
+  //         color: '#DDEFFF',
+  //         fontFamily: 'SourceHanSansCN-Regular',
+  //         fontSize: 12,
+  //       },
+  //       right: 0,
+  //       top: 'center',
+  //       align: 'left',
+  //       itemWidth: 10,
+  //       itemHeight: 10,
+  //       data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
+  //       formatter: (name) => {
+  //         for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
+  //           if (name === safetyOption.series[0].data[i].name) {
+  //             return `${name} \t  ${safetyOption.series[0].data[i].value}`;
+  //           }
+  //         }
+  //       },
+  //     },
+  //   ],
+  //   series: [
+  //     {
+  //       name: '道路统计',
+  //       type: 'pie',
+  //       radius: ['50%', '63%'],
+  //       center: ["30%", "50%"],
+  //       // emphasis: { // 设置高亮时显示标签
+  //       //   label: {
+  //       //     show: true
+  //       //   },
+  //       //   // scale: true, // 设置高亮时放大图形
+  //       //   // scaleSize: 20
+  //       // },
+  //       label: {
+  //         show: false,
+  //       },
+  //       // selectedMode: 'single',
+  //       data: safetyData,
+  //       itemStyle: {
+  //         normal: {
+  //           color: (color) => {
+  //             const colorList = legendColor || [
+  //               '#98D8CA',
+  //               '#9494FF',
+  //               '#2A43FF',
+  //               '#FFD39F',
+  //               '#9D5F8B',
+  //               '#ADDE81',
+  //               '#F8EBA2',
+  //               '#5F8EFD',
+  //               '#2BB4D3',
+  //               '#1488C8',
+  //             ];
+  //             return colorList[color.dataIndex];
+  //           },
+  //         },
+  //       },
+  //     },
+  //   ],
+  // };
+  const option = {
     tooltip: {
-      show: true,
-      trigger: 'item',
-      position: 'right',
-      backgroundColor: 'rgba(0,0,0,0.7)',
+      trigger: "item",
+    },
+    legend: {
+      orient: "vertical",
+      itemWidth: 10,
+      itemHeight: 10,
+      right: '30%',
+      top: 'center',
+      align: 'left',
+      data: name,
       textStyle: {
-        color: '#fff',
+        color: "#fff",
       },
-      formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}    <b>${values.value}</b>个(${values.percent}%)`,
     },
-    // 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: [
+    grid: {
+      left: '10%'
+    },
 
+    series: [
       {
-        orient: 'vertical',
-        textStyle: {
-          color: '#DDEFFF',
-          fontFamily: 'SourceHanSansCN-Regular',
-          fontSize: 12,
+        name: "底层背景",
+        type: "pie",
+        hoverAnimation: false,
+        legendHoverLink: false,
+        radius: ["50%", "62%"],
+        center: ['25%', '50%'],
+        color: underColorList,
+        label: {
+          show: false
         },
-        right: 0,
-        top: 'center',
-        align: 'left',
-        itemWidth: 10,
-        itemHeight: 10,
-        data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
-        formatter: (name) => {
-          for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
-            if (name === safetyOption.series[0].data[i].name) {
-              return `${name} \t  ${safetyOption.series[0].data[i].value}`;
-            }
-          }
+        labelLine: {
+          show: false
         },
+        tooltip: {
+          show: false,
+        },
+
+        data: emptyName,
       },
-    ],
-    series: [
       {
-        name: '道路统计',
-        type: 'pie',
-        radius: ['50%', '63%'],
-        center: ["30%", "50%"],
-        // emphasis: { // 设置高亮时显示标签
-        //   label: {
-        //     show: true
-        //   },
-        //   // scale: true, // 设置高亮时放大图形
-        //   // scaleSize: 20
-        // },
+        name: "道路统计",
+        type: "pie",
+        radius: ["57%", "70%"],
+        center: ['25%', '50%'],
+        color: colorList,
         label: {
-          show: false,
-        },
-        // selectedMode: 'single',
-        data: safetyData,
-        itemStyle: {
-          normal: {
-            color: (color) => {
-              const colorList = legendColor || [
-                '#98D8CA',
-                '#9494FF',
-                '#2A43FF',
-                '#FFD39F',
-                '#9D5F8B',
-                '#ADDE81',
-                '#F8EBA2',
-                '#5F8EFD',
-                '#2BB4D3',
-                '#1488C8',
-              ];
-              return colorList[color.dataIndex];
-            },
-          },
+          show: false
         },
+        data: data,
       },
     ],
   };
-  
   let currentIndex = -1; // 当前高亮图形在饼图数据中的下标 
   useEffect(() => {
     let myChart = echarts.init(chartRef.current);
-    const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
-      for(var idx in safetyOption.series[0].data)
-        // 遍历饼图数据，取消所有图形的高亮效果
-        myChart.dispatchAction({
-          type: 'downplay',
-          seriesIndex: 0,
-          dataIndex: idx
-        });
-      // 高亮当前图形
-      myChart.dispatchAction({
-        type: 'highlight',
-        seriesIndex: 0,
-        dataIndex: currentIndex
-      });
-      // myChart.dispatchAction({
-      //   type: 'showTip',
-      //   seriesIndex: 0,
-      //   dataIndex: currentIndex,
-      // });
-    }
-    const selectPie=() =>{ // 高亮效果切换到下一个图形
-      var dataLen = safetyOption.series[0].data.length;
-      currentIndex = (currentIndex + 1) % dataLen;
-      highlightPie();
-    }
-    let changePieInterval = setInterval(selectPie, 1000);
+    // const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
+    //   for(var idx in safetyOption.series[0].data)
+    //     // 遍历饼图数据，取消所有图形的高亮效果
+    //     myChart.dispatchAction({
+    //       type: 'downplay',
+    //       seriesIndex: 0,
+    //       dataIndex: idx
+    //     });
+    //   // 高亮当前图形
+    //   myChart.dispatchAction({
+    //     type: 'highlight',
+    //     seriesIndex: 0,
+    //     dataIndex: currentIndex
+    //   });
+    //   // myChart.dispatchAction({
+    //   //   type: 'showTip',
+    //   //   seriesIndex: 0,
+    //   //   dataIndex: currentIndex,
+    //   // });
+    // }
+    // const selectPie=() =>{ // 高亮效果切换到下一个图形
+    //   var dataLen = safetyOption.series[0].data.length;
+    //   currentIndex = (currentIndex + 1) % dataLen;
+    //   highlightPie();
+    // }
+    // let changePieInterval = setInterval(selectPie, 1000);
       
     myChart.onChartReady = (instance) => {
       chartRef.current.safetyChart = instance;
     }
-    myChart.setOption(safetyOption);
+    myChart.setOption(option);
     return ()=>{
-      clearInterval(changePieInterval)
+      // clearInterval(changePieInterval)
     }
 }, []);
 
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 63b5b344..2c8107f0 100644
--- a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
+++ b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
@@ -4,194 +4,134 @@ import { Col, Progress, Row } from 'antd';
 import React, { useEffect, useRef } from 'react';
 // import ReactEcharts from 'echarts-for-react';
 import * as echarts from 'echarts';
-function Rightbottom() {
-  // const {
-  //   safetyData, chartTitle, title, number, leftLegend, rightLegend, legendColor, width, height,
-  // } = props;
+function Rightbottom(props) {
+  const { width, height, data, total, text } = props
   const chartRef = useRef(null);
-  const safetyData = [
-  {name: '一级公路', value: 42},
-  {name: '二级公路', value: 17},
-  {name: '三级公路', value: 17},
-  {name: '四级公路', value: 30},
-  {name: '等外公路', value: 30},
-
+  let colorList = [
+    "rgba(7,185,254,1)",
+    "rgba(28,96,254,1)",
+    "rgba(4,251,240,1)",
+    "rgba(255,194,20,1)"
+  ]
+  let underColorList = [
+    "rgba(7,185,254,0.5)",
+    "rgba(28,96,254,0.5)",
+    "rgba(4,251,240,0.5)",
+    "rgba(255,194,20,0.5)"
   ]
+  let name = [], emptyName = []
+  // const name = data?.map(d)
+
+  // const safetyData = [
+  // {name: '一级公路', value: 42},
+  // {name: '二级公路', value: 17},
+  // {name: '三级公路', value: 17},
+  // {name: '四级公路', value: 30},
+  // {name: '等外公路', value: 30},
+
+  // ]
+  data?.forEach(d => {
+    name.push(d.name)
+    emptyName.push({
+      name: '',
+      value: d.value
+    })
+  })
   const chartTitle = '道路总公里';
   const title = '基础设施安全监测版块';
   // const number = 2738;
   // const leftLegend = ['地灾', '桥梁', '基坑', '边坡', '水库大坝']
   const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路']
   const legendColor = undefined;
-  const width = undefined
-  const height = undefined
+
   var titleNum = 15
-  let safetyOption = {
+  const option = {
     tooltip: {
-      show: true,
-      trigger: 'item',
-      position: 'right',
-      backgroundColor: 'rgba(0,0,0,0.7)',
+      trigger: "item",
+    },
+    legend: {
+      orient: "vertical",
+      itemWidth: 10,
+      itemHeight: 10,
+      right: '30%',
+      top: 'center',
+      align: 'left',
       textStyle: {
-        color: '#fff',
+        color: "#fff",
       },
-      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',
-    //     }
-    // },
-    // graphic: {
-    //   elements: [
-    //     {
-    //       type: 'text',
-    //       style: {
-    //         text: chartTitle || '安全\n监测',
-    //         align: 'center',
-    //         fill: '#fff',
-    //         z: -999,
-    //         zlevel: -999,
-    //         font: '20px "YouSheBiaoTiHei", sans-serif',
-    //       },
-    //       left: 'center',
-    //       top: 'center',
-    //       position: [100, 100],
-    //     },
-    //   ],
-    // },
-    legend: [
+    grid: {
+      left: '10%'
+    },
 
-      // {
-      //   orient: 'vertical',
-      //   left: 'left',
-      //   top: 'center',
-      //   textStyle: {
-      //     color: '#DDEFFF',
-      //     fontFamily: 'SourceHanSansCN-Regular',
-      //     fontSize: 12,
-      //   },
-      //   itemWidth: 10,
-      //   itemHeight: 10,
-      //   data: leftLegend || ['基坑', '桥梁', '地铁', '边坡', '建筑物'],
-      //   formatter: (name) => {
-      //     for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
-      //       if (name === safetyOption.series[0].data[i].name) {
-      //         return `${name} \t  ${safetyOption.series[0].data[i].value}`;
-      //       }
-      //     }
-      //   },
-      // },
+    series: [
       {
-        orient: 'vertical',
-        textStyle: {
-          color: '#DDEFFF',
-          fontFamily: 'SourceHanSansCN-Regular',
-          fontSize: 12,
+        name: "底层背景",
+        type: "pie",
+        hoverAnimation: false,
+        legendHoverLink: false,
+        radius: ["50%", "62%"],
+        center: ['25%', '50%'],
+        color: underColorList,
+        label: {
+          show: false
         },
-        right: 0,
-        top: 'center',
-        align: 'left',
-        itemWidth: 10,
-        itemHeight: 10,
-        data: rightLegend || ['地灾', '隧道', '尾矿库', '水库大坝', '智慧消防'],
-        formatter: (name) => {
-          for (let i = 0; i < safetyOption.series[0].data.length; i += 1) {
-            if (name === safetyOption.series[0].data[i].name) {
-              return `${name} \t  ${safetyOption.series[0].data[i].value}`;
-            }
-          }
+        labelLine: {
+          show: false
         },
+        tooltip: {
+          show: false,
+        },
+
+        data: emptyName,
       },
-    ],
-    series: [
       {
-        name: '公路等级统计',
-        type: 'pie',
-        radius: ['50%', '63%'],
-        center:['30%','50%'],
-        // emphasis: { // 设置高亮时显示标签
-        //   label: {
-        //     show: true
-        //   },
-        //   // scale: true, // 设置高亮时放大图形
-        //   // scaleSize: 20
-        // },
+        name: "公路等级统计",
+        type: "pie",
+        radius: ["57%", "70%"],
+        center: ['25%', '50%'],
+        color: colorList,
         label: {
-          show: false,
-        },
-        // selectedMode: 'single',
-        data: safetyData,
-        itemStyle: {
-          normal: {
-            color: (color) => {
-              const colorList = legendColor || [
-                '#98D8CA',
-                '#9494FF',
-                '#2A43FF',
-                '#FFD39F',
-                '#9D5F8B',
-                '#ADDE81',
-                '#F8EBA2',
-                '#5F8EFD',
-                '#2BB4D3',
-                '#1488C8',
-              ];
-              return colorList[color.dataIndex];
-            },
-          },
+          show: false
         },
+        data: data,
       },
     ],
   };
-  
   let currentIndex = -1; // 当前高亮图形在饼图数据中的下标 
   useEffect(() => {
     let myChart = echarts.init(chartRef.current);
-    const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
-      for(var idx in safetyOption.series[0].data)
-        // 遍历饼图数据，取消所有图形的高亮效果
-        myChart.dispatchAction({
-          type: 'downplay',
-          seriesIndex: 0,
-          dataIndex: idx
-        });
-      // 高亮当前图形
-      myChart.dispatchAction({
-        type: 'highlight',
-        seriesIndex: 0,
-        dataIndex: currentIndex
-      });
-      // myChart.dispatchAction({
-      //   type: 'showTip',
-      //   seriesIndex: 0,
-      //   dataIndex: currentIndex,
-      // });
-    }
-    const selectPie=() =>{ // 高亮效果切换到下一个图形
-      var dataLen = safetyOption.series[0].data.length;
-      currentIndex = (currentIndex + 1) % dataLen;
-      highlightPie();
-    }
-    let changePieInterval = setInterval(selectPie, 1000);
+    // const highlightPie = () =>{ // 取消所有高亮并高亮当前图形
+    //   for(var idx in safetyOption.series[0].data)
+    //     // 遍历饼图数据，取消所有图形的高亮效果
+    //     myChart.dispatchAction({
+    //       type: 'downplay',
+    //       seriesIndex: 0,
+    //       dataIndex: idx
+    //     });
+    //   // 高亮当前图形
+    //   myChart.dispatchAction({
+    //     type: 'highlight',
+    //     seriesIndex: 0,
+    //     dataIndex: currentIndex
+    //   });
+    //   // myChart.dispatchAction({
+    //   //   type: 'showTip',
+    //   //   seriesIndex: 0,
+    //   //   dataIndex: currentIndex,
+    //   // });
+    // }
+    // const selectPie=() =>{ // 高亮效果切换到下一个图形
+    //   var dataLen = safetyOption.series[0].data.length;
+    //   currentIndex = (currentIndex + 1) % dataLen;
+    //   highlightPie();
+    // }
+    // let changePieInterval = setInterval(selectPie, 1000);
       
-    myChart.onChartReady = (instance) => {
-      chartRef.current.safetyChart = instance;
-    }
-    myChart.setOption(safetyOption);
+    // myChart.onChartReady = (instance) => {
+    //   chartRef.current.safetyChart = instance;
+    // }
+    myChart.setOption(option);
     return ()=>{
       clearInterval(changePieInterval)
     }
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 86884a9b..bbfac6ca 100644
--- a/web/client/src/sections/quanju/containers/footer/build/index.js
+++ b/web/client/src/sections/quanju/containers/footer/build/index.js
@@ -14,6 +14,19 @@ import './style.less'
 import {getdaolutongji} from '../../../actions/example'
 const Build = (props) => {
     const { dispatch } = props
+    let data = [
+        { value: 435, name: "县道" },
+        { value: 679, name: "乡道" },
+        { value: 848, name: "村道" },
+      ]
+        const safetyData = [
+  {name: '一级公路', value: 42},
+  {name: '二级公路', value: 17},
+  {name: '三级公路', value: 17},
+  {name: '四级公路', value: 30},
+
+
+  ]
     const [buildingnumber,setbuildingnumber] = useState(0)
     const requestbuildingnumber = async ()=>{
         const res = await dispatch(getdaolutongji());
@@ -97,7 +110,15 @@ const Build = (props) => {
             <Module title={"道路统计"} style={{ width: "100%",
             height:" 30%",marginTop:'3%'
             }} customize = {true}>
-                <LeftBottom/>
+                <LeftBottom
+          data={data}
+          width='100%'
+          height='100%'
+          text='道路总公里'
+          total={2344.13}
+        //   colorList={colorList}
+        //   underColorList={underColorList}
+        />
             </Module>
            
         </div>
@@ -118,7 +139,11 @@ const Build = (props) => {
         <Module title={"公路等级统计"} style={{ width: "100%",
             height:" 30%",marginTop:'3%'
             }} customize = {true}>
-                <RightBottom/>
+                <RightBottom  width='100%'
+          height='100%'
+          text='道路总公里'
+          total={2344.13}
+           data={safetyData}/>
             </Module>
         </div>
         </div>
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 727ada13..6e534f0f 100644
--- a/web/client/src/sections/quanju/containers/footer/build/style.less
+++ b/web/client/src/sections/quanju/containers/footer/build/style.less
@@ -171,7 +171,7 @@
             align-items: center;
             justify-content: center;
             position: absolute;
-             left: 27%;
+             left: 16%;
              top:38%;
                 h2{
                     font-size: 1.25rem;
@@ -190,7 +190,7 @@
             img{
                 width: 19%;
                 position: absolute;
-                left: 26.5%;
+                left: 16%;
                 top:29%
             }
         
@@ -268,7 +268,7 @@
                 align-items: center;
                 justify-content: center;
                 position: absolute;
-                 left: 27%;
+                 left: 16%;
                  top:38%;
                     h2{
                         font-size: 1.25rem;
@@ -287,7 +287,7 @@
                img{
                 width: 19%;
                 position: absolute;
-                left: 26.5%;
+                left: 16%;
                 top:29%
             }
         }