数据接入

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

@@ -9,9 +9,19 @@ export function getHighways() {
         type: 'get',
         dispatch: dispatch,
         actionType: 'GET_HIGHWAYS',
-        url: `${ApiTable.getHighways}`,
+        url: ApiTable.getHighways,
         msg: { error: '获取路政列表失败' },
         reducer: { name: 'highways' }
     });
 }
 //获取道路养护统计及列表
+export function getRoadMaintenances() {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_ROAD_MAINTENANCES',
+        url: ApiTable.getRoadMaintenance,
+        msg: { error: '获取道路养护列表失败' },
+        reducer: { name: 'RoadMaintenances' }
+    });
+}

web/client/src/sections/quanju/containers/footer/conserve/chart/pie-chart.js

@@ -43,13 +43,13 @@ const PieChart = (props) => {
             a: {
               color: '#E9F7FF',
               fontSize: 14,
-              padding:[0,10]
+              padding:[0,2]
             },
             b: {
               fontSize: 16,
               fontFamily: 'YouSheBiaoTiHei',
               color: '#fff',
-              padding:[0,0,0,15]
+              padding:[0,0,0,10]
             },
           }
         }

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

@@ -3,13 +3,14 @@ import Left from './left'
 import Right from './right'
 import { connect } from 'react-redux'
 import { getdaolutongji } from '../../../actions/example'
-import { getHighways } from './action'
+import { getHighways, getRoadMaintenances } from './action'
 
 
 const Conserve = (props) => {
 
     const [roadData, setRoadData] = useState()
     const [highwaysData, setHighwaysData] = useState()
+    const [roadMaintenances, setRoadMaintenances] = useState()
 
     const [loading, setLoading] = useState(true)
     const { dispatch } = props
@@ -21,12 +22,15 @@ const Conserve = (props) => {
         dispatch(getHighways()).then(res =>{
             setHighwaysData(res.payload.data || [])
         })
+        dispatch(getRoadMaintenances()).then(res =>{
+            setRoadMaintenances(res.payload.data || [])
+        })
     }, [])
 
     return (
         <div style={{ display: 'flex', width: '100%', height: '100%', justifyContent: 'space-between' }}>
             <Left roadData={roadData} loading={loading} />
-            <Right highwaysData={highwaysData} />
+            <Right highwaysData={highwaysData} roadMaintenances={roadMaintenances}/>
         </div>
     )
 }

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

@@ -2,11 +2,6 @@ import React from 'react'
 import Module from '../../../public/module'
 import PieChart from '../chart/pie-chart';
 
-let data = [
-  { value: 435, name: "县道" },
-  { value: 679, name: "乡道" },
-  { value: 848, name: "村道" },
-]
 let colorList = [
   "rgba(7,185,254,1)",
   "rgba(28,96,254,1)",

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

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

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

@@ -2,12 +2,6 @@ import React from 'react'
 import Module from '../../../public/module'
 import PieChart from '../chart/pie-chart';
 
-let data = [
-  { value: 435, name: "道路" },
-  { value: 679, name: "桥梁" },
-  { value: 848, name: "涵洞" },
-  { value: 666, name: "其他" },
-]
 let colorList = [
   "rgba(7,185,254,1)",
   "rgba(28,96,254,1)",
@@ -20,18 +14,49 @@ let underColorList = [
   "rgba(4,251,240,0.5)",
   "rgba(255,194,20,0.5)"
 ]
-const RightBottom = () => {
+
+const type = ['road', 'culvert', 'bridge']
+
+const RightBottom = (props) => {
+  const { roadMaintenances } = props
+  let totalData = null
+  let typesNum = null
+  const list = roadMaintenances?.reportCount?.map((r, index) => {
+    totalData += Number(r.count)
+    if (r.projectType === type[index]) {
+      typesNum += Number(r.count)
+    }
+    switch (r.projectType) {
+      case 'road':
+        return {
+          name: '道路',
+          value: r.count
+        };
+      case 'culvert':
+        return {
+          name: '涵洞',
+          value: r.count
+        };
+      case 'bridge':
+        return {
+          name: '桥梁',
+          value: r.count
+        }
+    }
+  }).filter(f => f !== undefined)
+  const otherNum = totalData - typesNum
+  otherNum !== null && list?.push({ name: '其他', value: otherNum })
   const style = { height: "31%", marginTop: "3%" }
   return (
     <>
       <Module style={style} title={"养护完成情况"}>
         {/* <div ref = {chartRef} style={{ width: '100%', height: '100%' }}></div> */}
         <PieChart
-          data={data}
+          data={list}
           width='100%'
           height='100%'
           text='养护总数'
-          total={2344.13}
+          total={totalData || 0}
           colorList={colorList}
           underColorList={underColorList}
         />