10 changed files with 410 additions and 121 deletions
@ -1,61 +1,123 @@ |
|||||
import React from 'react' |
import React from 'react' |
||||
import Module from '../../../public/module' |
import Module from '../../../public/module' |
||||
import { Col, Row } from 'antd' |
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 unit =['个','个',]
|
||||
const icon = [ |
const icon = [ |
||||
'assets/images/quanju/jiancha.png', |
'assets/images/quanju/jiancha.png', |
||||
'assets/images/quanju/yushui.png', |
'assets/images/quanju/yushui.png', |
||||
'assets/images/quanju/lupai.png', |
'assets/images/quanju/lupai.png', |
||||
'assets/images/quanju/zerenpai.png' |
'assets/images/quanju/zerenpai.png' |
||||
] |
] |
||||
const RightCenter = (props) => { |
const RightCenter = (props) => { |
||||
const { highwaysData } = props |
const { highwaysData, dispatch } = props |
||||
const style = { height: "31%", marginTop: "3%" } |
|
||||
const textStyle = { fontSize: 14, color: '#E9F7FF' } |
const [data, setData] = useState([]) |
||||
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) |
const style = { height: "31%", marginTop: "3%" } |
||||
list = highwaysData?.slice(4, 8).map((h,index)=>{ |
// 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 { |
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