换成定位了

web/client/src/sections/quanju/containers/footer/leadership/centerLeft.js

@@ -8,7 +8,7 @@ const CenterLeft = (props) => {
     const { dispatch } = props
     return (
         <>
-            <div style={{ width: "48%", height: "100%", float: "left", marginLeft: "1%" }}>
+            <div style={{ width: "48%", height: "100%", position: "absolute", left: "25%" }}>
                 <Centerlefttop dispatch={dispatch} />
                 <Centerleftbottom dispatch={dispatch} />
             </div>

web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js

@@ -18,7 +18,7 @@ const Right = (props) => {
             setNums(res.payload.data.reportCount.filter((item, index) => {
                 return item.projectType == "road"
             }))
-            console.log(res.payload.data);
+            // console.log(res.payload.data);
         })
     }, [])
     useEffect(() => {
@@ -33,6 +33,7 @@ const Right = (props) => {
         return (
 
             <div style={{ width: "100%", height: "100%" }}>
+                {/* <Spin spinning={!nums} tip="Loading" style={{ width: "100%", height: "100%" }}> */}
                 {
                     list.map((item, index) => {
                         return (
@@ -53,30 +54,35 @@ const Right = (props) => {
                         )
                     })
                 }
+                {/* </Spin> */}
             </div>
         )
     }
     return (
         <>
+            {/* <Spin spinning={!nums && list && roads} tip="Loading" size="large" > */}
             <div style={{ width: "100%", height: "100%", float: "right", marginRight: "1%", position: "relative" }}>
 
                 <div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}>
                     <div style={{ width: "96%", position: "relative", left: "2%" }}>
+                        {/* <Spin spinning={!roads} tip="Loading" > */}
                         <p style={{ position: "absolute", color: "rgba(216,240,255,0.8)", top: "10px" }}>占比<span style={{ fontFamily: " PingFangSC-Regular, PingFang SC" }}>{((roads?.["县"] / (roads?.["乡"] + roads?.["村"] + roads?.["县"])) * 100).toFixed(2)}</span>%</p>
                         <p style={{ width: "50%", position: "absolute", right: "0%", fontFamily: "YouSheBiaoTiHei", textAlign: "right", fontSize: "24px", color: "#F5FCFF", marginLeft: "10%" }}>{roads?.["县"].toFixed(3)}<span style={{ color: "#F5FCFF", fontSize: "16px", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>公里</span><span style={{ fontSize: "18px", color: "rgba(216,240,255,0.8)", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>县道道路</span></p>
+                        {/* </Spin> */}
                     </div>
                     <div style={{ width: "96%", position: "relative", left: "2%", height: "50%" }}>
                         <div style={{ width: parseInt((roads?.["县"] / (roads?.["乡"] + roads?.["村"] + roads?.["县"])) * 100) + "%" || "", height: "20%", transform: "skewX(-45deg)", backgroundColor: "#18ABFF", float: "left", marginTop: "5.6%" }}>
 
                         </div>
-                        {/* <div style={{ width: "15%", height: "20%", backgroundColor: "#df0001", float: "left", marginTop: "5.6%" }}>
-
-</div> */}
                         <div style={{ width: parseInt(((roads?.["乡"] + roads?.["村"]) / (roads?.["乡"] + roads?.["村"] + roads?.["县"])) * 100) + "%" || "", height: "20%", transform: "skewX(-45deg)", backgroundColor: "#0A72FF", float: "left", marginTop: "5.6%" }}></div>
                     </div>
                     <div style={{ width: "96%", position: "relative", left: "2%" }}>
+                        {/* <Spin spinning={!roads} tip="Loading" > */}
+
                         <p style={{ width: "50%", position: "absolute", color: "rgba(216,240,255,0.8)", fontSize: "18px" }}>乡村道道路<span style={{ marginLeft: "4%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF" }}>{(roads?.["乡"] + roads?.["村"]).toFixed(3)}</span><span style={{ marginLeft: "4%" }}>公里</span></p>
                         <p style={{ position: "absolute", right: "0", color: "rgba(216,240,255,0.8)", top: "10px" }}>占比<span>{(((roads?.["乡"] + roads?.["村"]) / (roads?.["乡"] + roads?.["村"] + roads?.["县"])) * 100).toFixed(2)}</span><span>%</span></p>
+                        {/* </Spin> */}
+
                     </div>
                 </div>
                 <div style={{ height: "80%", width: "100%", position: "relative", left: "5%", top: "-8%" }}>
@@ -99,6 +105,7 @@ const Right = (props) => {
                 </div>
 
             </div>
+            {/* </Spin> */}
         </>
     )
 }

web/client/src/sections/quanju/containers/footer/leadership/centerleft/handong.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import Lun from "../right/lunbo"
 import { getRoadmaintain, getdaolutongji } from "../../../../actions/example"
 import moment from 'moment'
+// import { Spin } from 'antd'
 
 
 const Right = (props) => {
@@ -34,6 +35,8 @@ const Right = (props) => {
         return (
 
             <div style={{ width: "100%", height: "100%" }}>
+                {/* <Spin spinning={!nums} tip="Loading" style={{ width: "100%", height: "100%" }}> */}
+
                 {
                     list.map((item, index) => {
                         console.log(list);
@@ -57,14 +60,17 @@ const Right = (props) => {
                         )
                     })
                 }
+                {/* </Spin> */}
             </div>
         )
     }
     return (
         <>
+
             <div style={{ width: "100%", height: "100%", float: "right", marginRight: "1%", position: "relative" }}>
 
                 <div style={{ width: "100%", height: "43%", position: "relative", left: "1%" }}>
+                    {/* <Spin spinning={!roads} tip="Loading"  ></Spin> */}
                     <div style={{ width: "96%", position: "relative", left: "2%" }}>
                         <p style={{ position: "absolute", color: "rgba(216,240,255,0.8)", top: "10px" }}>占比<span style={{ fontFamily: " PingFangSC-Regular, PingFang SC" }}>{((roads?.["县"] / (roads?.["乡"] + roads?.["村"] + roads?.["县"])) * 100).toFixed(2)}</span>%</p>
                         <p style={{ width: "50%", position: "absolute", right: "0%", textAlign: "right", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF", marginLeft: "10%" }}>{roads?.["县"].toFixed(0)}<span style={{ color: "#F5FCFF", fontSize: "16px", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>个</span><span style={{ fontSize: "18px", color: "rgba(216,240,255,0.8)", fontFamily: "PingFangSC-Regular, PingFang SC", marginLeft: "5%" }}>县涵洞</span></p>
@@ -82,6 +88,7 @@ const Right = (props) => {
                         <p style={{ width: "50%", position: "absolute", color: "rgba(216,240,255,0.8)", fontSize: "18px" }}>乡村涵洞<span style={{ marginLeft: "4%", fontFamily: "YouSheBiaoTiHei", fontSize: "24px", color: "#F5FCFF" }}>{(roads?.["乡"] + roads?.["村"]).toFixed(0)}</span><span style={{ marginLeft: "4%" }}>个</span></p>
                         <p style={{ position: "absolute", right: "0", color: "rgba(216,240,255,0.8)", top: "10px" }}>占比<span>{(((roads?.["乡"] + roads?.["村"]) / (roads?.["乡"] + roads?.["村"] + roads?.["县"])) * 100).toFixed(2)}</span><span>%</span></p>
                     </div>
+
                 </div>
                 <div style={{ height: "80%", width: "100%", position: "relative", left: "5%", top: "-8%" }}>
                     <div style={{ width: "100%", height: "40px"/* , backgroundColor: "#fff" */, position: "relative" }}>

web/client/src/sections/quanju/containers/footer/leadership/left.js

@@ -7,7 +7,7 @@ const Left = (props) => {
     const { dispatch } = props
     return (
         <>
-            <div style={{ width: "23%", height: "100%", float: "left", marginLeft: "1%" }}>
+            <div style={{ width: "23%", height: "100%", position: "absolute", left: "1%" }}>
                 <Lefttop dispatch={dispatch} />
 
                 <Leftbottom dispatch={dispatch} />

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

@@ -15,9 +15,12 @@ const Lefttop = (props) => {
         const shuju = dispatch(getGodshuju()).then((res) => {
             // console.log(res);
             setMass(res.payload.data.index)
+            // setMass(70)
             setspeed(res.payload.data.speed)
         })
     }, [])
+
+    // console.log(mass);
     return (
         <>
             <Module style={style} title={"道路拥堵指数"} >

web/client/src/sections/quanju/containers/footer/leadership/right.js

@@ -7,7 +7,7 @@ const Right = (props) => {
     const { dispatch } = props
     return (
         <>
-            <div style={{ width: "25%", height: "100%", float: "right", marginRight: "1%" }}>
+            <div style={{ width: "25%", height: "100%", position: "absolute", left: "74%" }}>
                 <Righttop dispatch={dispatch} />
                 <Rightbottom dispatch={dispatch} />
             </div>

web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js

@@ -22,6 +22,7 @@ const Rightbottom = (props) => {
     const renderBody = () => {
         return (
             <div style={{ width: "100%", height: "50%" }}>
+                {/* <Spin spinning={!list} tip="Loading" size="large"> */}
                 {list?.map((item, index) => {
                     return <li style={{ width: "100%", height: "3vh", marginTop: "5px", position: "relative", }} onMouseEnter={() => {
                         setBeijing(index)
@@ -38,6 +39,7 @@ const Rightbottom = (props) => {
                 })
 
                 }
+                {/* </Spin> */}
             </div>
         )
     }

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

@@ -77,8 +77,8 @@ const Righttop = () => {
 
             <Module style={style} title={"路面执法监控"}>
                 <div style={{ width: "100%", height: "65%", position: "relative" }}>
-                    <p style={{ position: "absolute", left: "30%", top: "2%", fontSize: "14px", color: "#FFFFFF" }}>监控总数</p><p style={{ position: "absolute", left: "42%", fontSize: "24px", marginLeft: "1%", top: "-0.5%", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>129</p>
-                    <p style={{ position: "absolute", left: "60%", top: "2%", fontSize: "14px", color: "#FFFFFF" }}>在线率</p><p style={{ position: "absolute", left: "68%", fontSize: "24px", marginLeft: "2%", top: "-0.5%", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>88.87%</p>
+                    <p style={{ position: "absolute", left: "25%", top: "2%", fontSize: "14px", color: "#FFFFFF" }}>监控总数</p><p style={{ position: "absolute", left: "37%", fontSize: "24px", marginLeft: "1%", top: "-0.5%", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>129</p>
+                    <p style={{ position: "absolute", left: "55%", top: "2%", fontSize: "14px", color: "#FFFFFF" }}>在线率</p><p style={{ position: "absolute", right: "15%", fontSize: "24px", marginLeft: "2%", top: "-0.5%", color: "#FFFFFF", fontFamily: "YouSheBiaoTiHei" }}>88.87%</p>
                     <div style={{ width: "100%", height: "10%", position: "relative" }}>
                         <img src='/assets/images/leadership/head.png' style={{ width: "15%", marginLeft: "5%" }} />