数据接入

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

@@ -0,0 +1,17 @@
+'use strict';
+
+import { basicAction } from '@peace/utils'
+import { ApiTable } from '$utils'
+
+//获取路政列表
+export function getHighways() {
+    return dispatch => basicAction({
+        type: 'get',
+        dispatch: dispatch,
+        actionType: 'GET_HIGHWAYS',
+        url: `${ApiTable.getHighways}`,
+        msg: { error: '获取路政列表失败' },
+        reducer: { name: 'highways' }
+    });
+}
+//获取道路养护统计及列表

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

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

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 { roadData } = props
+    const { highwaysData } = props
     return (
         <div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}>
-            <RightTop roadData={roadData} />
+            <RightTop  highwaysData={highwaysData}/>
-            <RightCenter roadData={roadData} />
+            <RightCenter highwaysData={highwaysData}/>
-            <RightBottom roadData={roadData} />
+            <RightBottom />
         </div>
     )
 }

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

@@ -2,47 +2,56 @@ import React from 'react'
 import Module from '../../../public/module'
 import { Col, Row } from 'antd'
 
-const RightCenter = () => {
+// const unit =['个','个',]
+const icon = [
+  'assets/images/quanju/jiancha.png',
+  'assets/images/quanju/yushui.png',
+  'assets/images/quanju/lupai.png',
+  'assets/images/quanju/zerenpai.png'
+]
+const RightCenter = (props) => {
+  const { highwaysData } = props
   const style = { height: "31%", marginTop: "3%" }
   const textStyle = { fontSize: 14, color: '#E9F7FF' }
   const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
-
+  const list = highwaysData?.slice(4, 8).map((h,index)=>{
+    return {
+      id:h.id,
+      name:h.name,
+      count:h.count,
+      // unit:unit[index],
+      icon:icon[index]
+    }
+  })
+  const arrayChunk = (array, size) => {
+    let data = []
+    for (let i = 0; i < array.length; i += size) {
+      data.push(array.slice(i, i + size))
+    }
+    return data
+  }
+  let lists = list ? arrayChunk(list, 2) : []
   return (
       <>
           <Module style={style} title={"各类附属设施数量统计"}>
           <div style={{ paddingLeft: '8%' }}>
-          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+          {
-            <Col style={{ display: 'flex', width: '50%' }}>
+            lists?.map((item, index) => {
-              <img src='assets/images/quanju/jiancha.png' alt='icon' style={{ width: '36%', height: '100%' }}/>
+              return <div style={{ display: 'flex', marginTop: "5%", justifyContent: 'space-around' }} key={index}>
+                {
+                  item?.map(i => (
+                    <div style={{ display: 'flex', width: '50%' }} key={i.id}>
+                      <img src={i.icon} alt='icon' style={{ width: '36%', height: '100%' }} />
                       <div style={{ marginLeft: 10 }}>
-                <div style={textStyle}>检查井</div>
+                        <div style={textStyle}>{i.name}</div>
-                <div style={numStyle}>89个</div>
+                        <div style={numStyle}>{`${i.count}个`}</div>
+                      </div>
+                    </div>
+                  ))
+                }
               </div>
-            </Col>
+            })
-            <Col style={{ display: 'flex', width: '50%' }}>
+          }
-              <img src='assets/images/quanju/yushui.png' alt='icon' style={{ width: '36%', height: '100%' }}/>
-              <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' style={{ width: '36%', height: '100%' }}/>
-              <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' style={{ width: '36%', height: '100%' }}/>
-              <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,47 +1,61 @@
 import { Col, Row } from 'antd'
-import React from 'react'
+import React, { useState, useEffect } from 'react'
 import Module from '../../../public/module'
 
+
+const iconSrc = [
+  'assets/images/quanju/biaoxian.png',
+  'assets/images/quanju/renxing.png',
+  'assets/images/quanju/biaozhi.png',
+  'assets/images/quanju/fanghu.png'
+]
+const unit = ['km', '处', '个', 'km']
+
 const RightTop = (props) => {
+  const { highwaysData } = props
   const style = { height: "31%", marginTop: "3%" }
   const textStyle = { fontSize: 14, color: '#E9F7FF' }
   const numStyle = { color: '#fff', fontSize: 21, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
+  const list = highwaysData?.slice(0, 4).map((h,index)=>{
+    return {
+      id:h.id,
+      name:h.name,
+      count:h.count,
+      unit:unit[index],
+      icon:iconSrc[index]
+
+    }
+  })
+
+  const arrayChunk = (array, size) => {
+    let data = []
+    for (let i = 0; i < array.length; i += size) {
+      data.push(array.slice(i, i + size))
+    }
+    return data
+  }
+  let lists = list ? arrayChunk(list, 2) : []
   return (
     <>
       <Module style={style} title={"道路设施数量统计"}>
         <div style={{ paddingLeft: '8%' }}>
-          <Row style={{ marginTop: "5%", justifyContent: 'space-around' }}>
+          {
-            <Col style={{ display: 'flex', width: '50%' }}>
+            lists?.map((item, index) => {
-              <img src='assets/images/quanju/biaoxian.png' alt='icon' style={{ width: '36%', height: '100%' }} />
+              return <div style={{ display: 'flex', marginTop: "5%", justifyContent: 'space-around' }} key={index}>
+                {
+                  item?.map(i => (
+                    <div style={{ display: 'flex', width: '50%' }} key={i.id}>
+                      <img src={i.icon} alt='icon' style={{ width: '36%', height: '100%' }} />
                       <div style={{ marginLeft: 10 }}>
-                <div style={textStyle}>标线</div>
+                        <div style={textStyle}>{i.name}</div>
-                <div style={numStyle}>1352km</div>
+                        <div style={numStyle}>{`${i.count}${i.unit}`}</div>
+                      </div>
+                    </div>
+                  ))
+                }
               </div>
-            </Col>
+            })
-            <Col style={{ display: 'flex', width: '50%' }}>
+          }
-              <img src='assets/images/quanju/renxing.png' alt='icon'  style={{ width: '36%', height: '100%' }}/>
-              <span style={{ marginLeft: 10 }}>
-                <div style={textStyle}>人行道</div>
-                <div style={numStyle}>80处</div>
-              </span>
-            </Col>
-          </Row>
-          <Row style={{ justifyContent: 'space-around' }}>
-            <Col style={{ display: 'flex', width: '50%' }}>
-              <img src='assets/images/quanju/biaozhi.png' alt='icon'  style={{ width: '36%', height: '100%' }} />
-              <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'  style={{ width: '36%', height: '100%' }}/>
-              <span style={{ marginLeft: 10 }}>
-                <div style={textStyle}>防护栏</div>
-                <div style={numStyle}>1054km</div>
-              </span>
-            </Col>
-          </Row>
         </div>
       </Module>
     </>