You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
106 lines
3.9 KiB
106 lines
3.9 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Carousel } from 'antd'
|
|
import AutoRollComponent from '../build/AutoRollComponent'
|
|
import Module from '../../public/module'
|
|
import LeftItem from './LeftItem'
|
|
import {getjiandmanage,getjiandetail} from '../../../actions/example'
|
|
import './style.less'
|
|
const Guanli = (props) => {
|
|
const {dispatch} = props
|
|
const [leftDatas,setleftDatas] = useState([])
|
|
const [rightDatas,setrightDatas] = useState([])
|
|
const requestleftDatas = async()=>{
|
|
const res = await dispatch(getjiandmanage())
|
|
res.payload.data.sort((a,b)=>{
|
|
return parseInt(b.total) - parseInt(a.total)
|
|
})
|
|
setleftDatas(res.payload.data)
|
|
console.log(res.payload.data,'哈哈哈')
|
|
}
|
|
const requestRightDatas = async()=>{
|
|
const res = await dispatch(getjiandetail())
|
|
setrightDatas(res.payload.data)
|
|
// console.log(res,'嘿嘿嘿')
|
|
}
|
|
useEffect(()=>{
|
|
requestleftDatas();
|
|
requestRightDatas()
|
|
},[])
|
|
// let datalist = newArry(30)
|
|
// datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"})
|
|
const renderContent = () => {
|
|
return <div style={{height:"100%"}}>
|
|
{rightDatas && rightDatas.length!==0?rightDatas.overSpeedList.map(({ id, licensePlate, overrunRate,fine,processingTime }, index) => {
|
|
if(index<30){
|
|
return <div key={index} className='guanli-right-item'>
|
|
<span>{licensePlate}</span>
|
|
<span>{overrunRate}%</span>
|
|
<span>{fine}{fine?"元":""}</span>
|
|
<span>{processingTime}</span>
|
|
</div>
|
|
}
|
|
}):""}
|
|
</div>
|
|
}
|
|
const renderLeftContent = ()=>{
|
|
// setleftDatas(leftDatas=>leftDatas.sort((a,b)=>b.total - a.total))
|
|
|
|
return leftDatas && leftDatas.length!==0?leftDatas.map((item,index)=>
|
|
<LeftItem key={index} datas={item}></LeftItem>
|
|
):""
|
|
|
|
}
|
|
// renderContent()
|
|
return (
|
|
<div className='guanli'>
|
|
<div className='guanli-left'>
|
|
<Module style={{height:"100%"}} title="检测点治超处理占比" customize={true}>
|
|
<AutoRollComponent content={renderLeftContent()}
|
|
containerStyle={{ position: "relative", height: "90%", }}
|
|
divHeight={"100%"} divId={"chart-overview-left"} />
|
|
</Module>
|
|
</div>
|
|
<div className='guanli-right'>
|
|
<Module style={{height:"100%"}} title="治超详情" customize={true}>
|
|
<div className = "guanli-right-top">
|
|
<img src="/assets/images/quanju/zhicaolog.png"></img>
|
|
<span>已处理</span>
|
|
<span>{rightDatas?.processed||0}</span>
|
|
<span>件</span>
|
|
</div>
|
|
<div className='guanli-right-title'>
|
|
<span>车牌号</span>
|
|
<span>超限</span>
|
|
<span>处罚</span>
|
|
<span>日期</span>
|
|
</div>
|
|
<AutoRollComponent content={renderContent()}
|
|
containerStyle={{ position: "relative", height: "90%", }}
|
|
divHeight={"100%"} divId={"chart-overview-deviceList"} />
|
|
</Module>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
function mapStateToProps(state) {
|
|
const { auth, depMessage } = state;
|
|
const pakData = (dep) => {
|
|
return dep.map((d) => {
|
|
return {
|
|
title: d.name,
|
|
value: d.id,
|
|
// children: d.type >= 2 ? [] : pakData(d.subordinate)
|
|
children: pakData(d.subordinate)
|
|
}
|
|
})
|
|
}
|
|
let depData = pakData(depMessage.data || [])
|
|
return {
|
|
user: auth.user,
|
|
depMessage: depMessage.data || [],
|
|
depLoading: depMessage.isRequesting,
|
|
depData,
|
|
};
|
|
}
|
|
export default connect(mapStateToProps)(Guanli);
|