养护大屏部分数据接入

web/client/src/sections/organization/components/depModal.js

@@ -75,7 +75,12 @@ function mapStateToProps(state) {
         title: d.name,
         value: d.id,
         // key: d.id,
-        children: pakData(d.subordinate)
+        children: d.subordinate.map(s => {
+          return {
+            title: s.name,
+            value: s.id,
+          }
+        })
       }
     })
   }

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

@@ -1,14 +1,35 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import Left from './left'
 import Right from './right'
+import { connect } from 'react-redux'
+import { getdaolutongji } from '../../../actions/example'
 
-const Conserve = () => {
+
+const Conserve = (props) => {
+
+    const [roadData, setRoadData] = useState()
+    const [loading, setLoading] = useState(true)
+    const { dispatch } = props
+    useEffect(() => {
+        dispatch(getdaolutongji()).then(res => {
+            setLoading(false)
+            setRoadData(res.payload.data || {})
+        })
+    }, [])
 
     return (
         <div style={{ display: 'flex', width: '100%', height: '100%', justifyContent: 'space-between' }}>
-            <Left />
+            <Left roadData={roadData} loading={loading} />
-            <Right /> 
+            <Right roadData={roadData} loading={loading} />
         </div>
     )
 }
-export default Conserve
+function mapStateToProps(state) {
+
+    // const { auth } = state;
+
+    return {
+
+    }
+}
+export default connect(mapStateToProps)(Conserve)

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

@@ -3,12 +3,13 @@ import LeftBottom from './left/left-bottom'
 import LeftCenter from './left/left-center'
 import LeftTop from './left/left-top'
 
-const Left = () => {
+const Left = (props) => {
+    const { roadData,loading } = props
     return (
-        <div style={{ display: 'flex',flexDirection: 'column', width: "23%", height: "100%", marginLeft: "1%" }}>
+        <div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginLeft: "1%" }}>
-            <LeftTop />
+            <LeftTop roadData={roadData} loading ={loading}/>
-            <LeftCenter />
+            <LeftCenter roadData={roadData} loading ={loading}/>
-            <LeftBottom />
+            <LeftBottom roadData={roadData} loading ={loading}/>
         </div>
     )
 }

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

@@ -4,9 +4,16 @@ import { useEffect, useRef } from 'react'
 import Module from '../../../public/module'
 import * as echarts from 'echarts';
 
-const LeftCenter = () => {
+const LeftCenter = (props) => {
     const style = { height: "31%", marginTop: "3%" }
     const chartRef = useRef(null);
+    const { roadData } = props
+    const data = roadData?.greenMileage || {}
+    const grad = Object.keys(data).map(g => g + '级可绿化里程') || []
+    const value = Object.values(data)?.map(s => s.canBeGreen.toFixed(3))
+    let totalData = value?.reduce((pre, cur) => Number(pre) + Number(cur), 0) || 0
+    let max = Math.max.apply(Math, value) + 10 || 0
+
     useEffect(() => {
         let chartInstance = echarts.init(chartRef.current);
         let colorArray = [
@@ -34,9 +41,9 @@ const LeftCenter = () => {
             grid: {
                 left: "5%",
                 top: "12%",
-                right: "5%",
+                right: "1%",
                 bottom: "8%",
-                width:'92%',
+                width: '100%',
                 containLabel: true,
             },
 
@@ -46,6 +53,7 @@ const LeftCenter = () => {
                 position: "bottom",
                 axisTick: {
                     show: true,
+                    interval: 2,
                     lineStyle: {
                         color: "rgba(176,215,255,0.25)",
                         // type: "dashed",
@@ -57,6 +65,10 @@ const LeftCenter = () => {
                         color: "rgba(216,240,255,0.8000)",
                     },
                 },
+                axisLabel: {
+                    interval: 2
+                },
+
                 splitLine: {
                     show: true,
                     lineStyle: {
@@ -85,7 +97,7 @@ const LeftCenter = () => {
                         },
                     },
                     zlevel: 100,
-                    data: ["县级可绿化里程", "乡级可绿化里程", "村级可绿化里程"],
+                    data: grad,
                 },
                 {
                     type: "category",
@@ -106,12 +118,12 @@ const LeftCenter = () => {
                         width: 70,
                         height: 22,
                         color: '#D8F0FF',
-                        margin:50,
+                        margin: 40,
                         verticalAlign: 'middle',
                         align: 'center',
-                        textShadowColor:'#1AD0FF',
+                        textShadowColor: '#1AD0FF',
-                        textShadowBlur:6,
+                        textShadowBlur: 6,
-                        fontSize:14
+                        fontSize: 14
                         // formatter:(f) =>{console.log('f:',f);}
                     },
                     inverse: true, //排序
@@ -122,7 +134,7 @@ const LeftCenter = () => {
                         },
 
                     },
-                    data: [60, 132, 89],
+                    data: value,
                 },
             ],
             series: [
@@ -133,7 +145,7 @@ const LeftCenter = () => {
                     barGap: "100%",
                     barCategoryGap: "50%",
                     color: "#15356E",
-                    data: [150, 150, 150, 150],
+                    data: [max, max, max],
                     tooltip: {
                         show: false,
                     },
@@ -145,7 +157,7 @@ const LeftCenter = () => {
                     barWidth: 3,
                     barGap: "-100%",
                     barCategoryGap: "50%",
-                    data: [60, 132, 89],
+                    data: value,
                     label: {
                         show: true,
                         position: 'right', // 位置
@@ -201,12 +213,12 @@ const LeftCenter = () => {
             ],
         };
         chartInstance.setOption(option);
-        window.addEventListener('resize',() =>{
+        window.addEventListener('resize', () => {
-            if(chartInstance) {
+            if (chartInstance) {
-              chartInstance.resize()
+                chartInstance.resize()
             }
-           })
+        })
-    }, []);
+    }, [roadData]);
 
     return (
         <>
@@ -214,12 +226,12 @@ const LeftCenter = () => {
 
                 <Row align='middle' style={{ padding: '10px 3% 0px 15px' }}>
                     <Col span={15}>
-                        <img src='assets/images/quanju/kelvhua_icon.png' alt='icon' />
+                        <img src='assets/images/quanju/kelvhua_icon.png' alt='icon' style={{ width: '26%' }} />
                         <span style={{ color: '#C2EEFF', marginLeft: 5 }}>可绿化里程总数</span>
                     </Col>
-                    <Col span={9} style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#fff' }}>1234</Col>
+                    <Col span={9} style={{ fontSize: 24, fontFamily: 'YouSheBiaoTiHei', color: '#fff' }}>{totalData}</Col>
                 </Row>
-                <div ref={chartRef} style={{ height: "14.5vh", width: "96%" }}></div>
+                <div ref={chartRef} style={{ height: "14.5vh", width: "100%" }}></div>
 
             </Module>
         </>

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

@@ -1,19 +1,20 @@
 import React, { useEffect, useRef } from 'react';
 import Module from '../../../public/module'
 import * as echarts from 'echarts';
-import { Badge } from 'antd';
+import { Badge, Spin } from 'antd';
 
 
-const LeftTop = () => {
+const LeftTop = (props) => {
   const seasonChartRef = useRef(null);
 
   const frequentlyChartRef = useRef(null);
-
+  const { roadData,loading } = props
+  let total = roadData?.curingPeriod?.frequent + roadData?.curingPeriod?.season
   useEffect(() => {
     let chartInstance = echarts.init(seasonChartRef.current);
     const seasonOption = {
-      tooltip:{
+      tooltip: {
-        show:true
+        show: true
       },
       title: [
         {
@@ -26,7 +27,7 @@ const LeftTop = () => {
           },
         },
         {
-          text: "2333",
+          text: roadData?.curingPeriod?.season || 0,
           x: "center",
           y: "35%",
           textStyle: {
@@ -48,7 +49,7 @@ const LeftTop = () => {
         containLabel: true,
       },
       angleAxis: {
-        max: 100,
+        max: total || 0,
         show: false,
       },
       radiusAxis: {
@@ -71,7 +72,7 @@ const LeftTop = () => {
           roundCap: true,
           barWidth: 30,
           showBackground: true,
-          data: [{value:40,name:'季节性'}],
+          data: [{ value: roadData?.curingPeriod?.season || 0, name: '季节性' }],
           coordinateSystem: "polar",
           itemStyle: {
             normal: {
@@ -91,19 +92,19 @@ const LeftTop = () => {
       ],
     };
     chartInstance.setOption(seasonOption);
-    window.addEventListener('resize',() =>{
+    window.addEventListener('resize', () => {
-      if(chartInstance) {
+      if (chartInstance) {
         chartInstance.resize()
       }
-     })
+    })
 
-  }, [])
+  }, [roadData])
   useEffect(() => {
     let chartInstance = echarts.init(frequentlyChartRef.current);
 
     const frequentlyOption = {
-      tooltip:{
+      tooltip: {
-        show:true,
+        show: true,
         trigger: "item",
       },
       title: [
@@ -117,7 +118,7 @@ const LeftTop = () => {
           },
         },
         {
-          text: "2333",
+          text: roadData?.curingPeriod?.frequent || 0,
           x: "center",
           y: "35%",
           textStyle: {
@@ -140,7 +141,7 @@ const LeftTop = () => {
         containLabel: true,
       },
       angleAxis: {
-        max: 100,
+        max: total || 0,
         show: false,
       },
       radiusAxis: {
@@ -163,7 +164,7 @@ const LeftTop = () => {
           roundCap: true,
           barWidth: 30,
           showBackground: true,
-          data:[{value:40,name:'经常性'}],
+          data: [{ value: roadData?.curingPeriod?.frequent || 0, name: '经常性' }],
           coordinateSystem: "polar",
           itemStyle: {
             normal: {
@@ -190,10 +191,10 @@ const LeftTop = () => {
         chartInstance.resize()
       }
     })
-  }, [])
+  }, [roadData])
   const style = { height: "31%", marginTop: "3%" }
   return (
-    <>
+
       <Module style={style} title={"路段养护周期统计"}>
         <div style={{ position: 'relative', width: '100%', height: '100%' }}>
           <div style={{ width: '100%', height: '100%', display: 'flex', padding: '3%' }}>
@@ -217,7 +218,6 @@ const LeftTop = () => {
           }} />
         </div>
       </Module>
-    </>
   )
 }
 export default LeftTop

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

@@ -3,12 +3,13 @@ import RightBottom from './right/right-bottom'
 import RightCenter from './right/right-center'
 import RightTop from './right/right-top'
 
-const Right = () => {
+const Right = (props) => {
+    const { roadData } = props
     return (
         <div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}>
-            <RightTop />
+            <RightTop roadData={roadData} />
-            <RightCenter />
+            <RightCenter roadData={roadData} />
-            <RightBottom />
+            <RightBottom roadData={roadData} />
         </div>
     )
 }