'道路设施数量统计、各类附属设备数量统计'

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

@@ -2,7 +2,7 @@ import React from 'react'
 import Module from '../../../public/module'
 
 const LeftBottom = () => {
-  const style = { height: "30%", marginTop: "5%" }
+  const style = { height: "31%", marginTop: "3%" }
   return (
       <>
           <Module style={style} title={"已绿化里程统计"}>

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

@@ -1,12 +1,28 @@
+import { Col, Row } from 'antd'
 import React from 'react'
+import { useEffect } from 'react'
 import Module from '../../../public/module'
 
 const LeftCenter = () => {
-  const style = { height: "30%", marginTop: "5%" }
+  const style = { height: "31%", marginTop: "3%" }
+
+  useEffect(() => {
+
+  }, [])
+
   return (
     <>
       <Module style={style} title={"可绿化里程统计"}>
 
+        <Row align='middle' style={{ padding: 10 }}>
+          <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>
+
       </Module>
     </>
   )

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

@@ -33,7 +33,7 @@ const LeftTop = () => {
         },
       ],
       polar: {
-        radius: ["65%", "73%"],
+        radius: ["60%", "68%"],
         center: ["50%", "50%"],
       },
       angleAxis: {
@@ -107,7 +107,7 @@ const LeftTop = () => {
         },
       ],
       polar: {
-        radius: ["65%", "73%"],
+        radius: ["60%", "68%"],
         center: ["50%", "50%"],
       },
       angleAxis: {
@@ -159,13 +159,13 @@ const LeftTop = () => {
     chartInstance.setOption(frequentlyOption);
 
   }, [])
-  const style = { height: "30%", marginTop: "5%" }
+  const style = { height: "31%", marginTop: "3%" }
   return (
     <>
       <Module style={style} title={"道路养护周期统计"}>
         <div style={{ width: '100%', display: 'flex' }}>
-          <div ref={seasonChartRef} style={{ height: "23vh", width: "45%" }}></div>
-          <div ref={frequentlyChartRef} style={{ height: "23vh", width: "45%" }}></div>
+          <div ref={seasonChartRef} style={{ height: "23vh", width: "50%" }}></div>
+          <div ref={frequentlyChartRef} style={{ height: "23vh", width: "50%" }}></div>
         </div>
 
       </Module>

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

@@ -5,7 +5,7 @@ import RightTop from './right/right-top'
 
 const Right = () => {
     return (
-        <div style={{ display: 'flex',flexDirection: 'column',  width: "23%", height: "100%", marginLeft: "1%", }}>
+        <div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}>
             <RightTop />
             <RightCenter />
             <RightBottom />

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

@@ -2,7 +2,7 @@ import React from 'react'
 import Module from '../../../public/module'
 
 const RightBottom = () => {
-  const style = { height: "30%", marginTop: "5%" }
+  const style = { height: "31%", marginTop: "3%" }
   return (
       <>
           <Module style={style} title={"养护完成情况"}>

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

@@ -1,12 +1,49 @@
 import React from 'react'
 import Module from '../../../public/module'
+import { Col, Row } from 'antd'
 
 const RightCenter = () => {
-  const style = { height: "30%", marginTop: "5%" }
+  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 }
+
   return (
       <>
           <Module style={style} title={"各类附属设施数量统计"}>
-
+          <div style={{ paddingLeft: '8%' }}>
+          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/jiancha.png' alt='icon' />
+              <div style={{ marginLeft: 10 }}>
+                <div style={textStyle}>检查井</div>
+                <div style={numStyle}>89个</div>
+              </div>
+            </Col>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/yushui.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>雨水口</div>
+                <div style={numStyle}>61个</div>
+              </span>
+            </Col>
+          </Row>
+          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/lupai.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>路牌名</div>
+                <div style={numStyle}>2230个</div>
+              </span>
+            </Col>
+            <Col span={12} style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/zerenpai.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>养护责任牌</div>
+                <div style={numStyle}>1217个</div>
+              </span>
+            </Col>
+          </Row>
+        </div>
           </Module>
       </>
   )

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

@@ -1,12 +1,48 @@
+import { Col, Row } from 'antd'
 import React from 'react'
 import Module from '../../../public/module'
 
-const RightTop= () => {
-  const style = { height: "30%", marginTop: "5%" }
+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 }
   return (
     <>
       <Module style={style} title={"道路设施数量统计"}>
-
+        <div style={{ paddingLeft: '8%' }}>
+          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/biaoxian.png' alt='icon' />
+              <div style={{ marginLeft: 10 }}>
+                <div style={textStyle}>标线</div>
+                <div style={numStyle}>1352km</div>
+              </div>
+            </Col>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/renxing.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>人行道</div>
+                <div style={numStyle}>80处</div>
+              </span>
+            </Col>
+          </Row>
+          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/biaozhi.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>标志牌</div>
+                <div style={numStyle}>4563个</div>
+              </span>
+            </Col>
+            <Col span={12} style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/fanghu.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>防护栏</div>
+                <div style={numStyle}>1054km</div>
+              </span>
+            </Col>
+          </Row>
+        </div>
       </Module>
     </>
   )