|
|
@ -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%' }}> |
|
|
|
<img src='assets/images/quanju/biaoxian.png' alt='icon' style={{ width: '36%', height: '100%' }} /> |
|
|
|
{ |
|
|
|
lists?.map((item, index) => { |
|
|
|
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={numStyle}>1352km</div> |
|
|
|
<div style={textStyle}>{i.name}</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> |
|
|
|
</> |
|
|
|