10 changed files with 410 additions and 121 deletions
@ -1,61 +1,123 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
import { Col, Row } from 'antd' |
|||
import { useEffect, useState } from 'react' |
|||
import { connect } from 'react-redux' |
|||
import ReactECharts from 'echarts-for-react'; |
|||
import { getNearestAssessData } from "../../../../actions/example" |
|||
|
|||
// const unit =['个','个',]
|
|||
const icon = [ |
|||
'assets/images/quanju/jiancha.png', |
|||
'assets/images/quanju/yushui.png', |
|||
'assets/images/quanju/lupai.png', |
|||
'assets/images/quanju/zerenpai.png' |
|||
'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 } |
|||
let list = highwaysData?.sort((a, b) => a.id - b.id) |
|||
list = highwaysData?.slice(4, 8).map((h,index)=>{ |
|||
const { highwaysData, dispatch } = props |
|||
|
|||
const [data, setData] = useState([]) |
|||
|
|||
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 }
|
|||
// let list = highwaysData?.sort((a, b) => a.id - b.id)
|
|||
// 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) : []
|
|||
|
|||
|
|||
useEffect(() => { |
|||
dispatch(getNearestAssessData()).then(res => { |
|||
if (res.success) { |
|||
setData(res.payload.data) |
|||
} |
|||
}) |
|||
}, []) |
|||
|
|||
|
|||
return ( |
|||
<> |
|||
<Module style={style} title={"各乡镇考核得分情况"}> |
|||
<div style={{ paddingLeft: '8%' }}> |
|||
{/* { |
|||
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}>{i.name}</div> |
|||
<div style={numStyle}>{`${i.count}个`}</div> |
|||
</div> |
|||
</div> |
|||
)) |
|||
} |
|||
</div> |
|||
}) |
|||
} */} |
|||
<ReactECharts |
|||
notMerge={true} |
|||
lazyUpdate={true} |
|||
option={{ |
|||
xAxis: { |
|||
type: 'category', |
|||
data: data.map(d => d.unit), |
|||
axisTick: { |
|||
show: false |
|||
} |
|||
}, |
|||
yAxis: { |
|||
type: 'value', |
|||
splitLine: { |
|||
show: false |
|||
} |
|||
}, |
|||
tooltip: { |
|||
trigger: "axis" |
|||
}, |
|||
series: [ |
|||
{ |
|||
data: data.map(d => d.totalPoints), |
|||
type: 'bar', |
|||
showBackground: true, |
|||
backgroundStyle: { |
|||
color: 'rgba(180, 180, 180, 0.2)' |
|||
} |
|||
} |
|||
], |
|||
grid: { |
|||
left: '3%', |
|||
right: '4%', |
|||
bottom: '21%', |
|||
top: '4%', |
|||
containLabel: true |
|||
}, |
|||
}} |
|||
/> |
|||
</div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
function mapStateToProps (state) { |
|||
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%' }}> |
|||
{ |
|||
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}>{i.name}</div> |
|||
<div style={numStyle}>{`${i.count}个`}</div> |
|||
</div> |
|||
</div> |
|||
)) |
|||
} |
|||
</div> |
|||
}) |
|||
} |
|||
</div> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default RightCenter |
|||
export default connect(mapStateToProps)(RightCenter) |
|||
Loading…
Reference in new issue