建设和管理大屏模块UI

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

@@ -15,7 +15,7 @@ const Build = () => {
         <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 +38,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>
@@ -99,7 +99,7 @@ const Build = () => {
             </Module>
             <Module title={"道路统计"} style={{ width: "100%",
             height:" 30%",marginTop:'3%'
-            }}>
+            }} customize = {true}>
                 <LeftBottom/>
             </Module>
            
@@ -115,12 +115,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/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

@@ -30,14 +30,14 @@ const Guanli = () => {
     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%;
-                height: 70%;
+                width: 45%;
+                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;