|
|
@ -2,160 +2,164 @@ import React, { useEffect, useState } from 'react'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { connect } from 'react-redux'; |
|
|
import { Carousel, Tooltip } from 'antd' |
|
|
import { Carousel, Tooltip } from 'antd' |
|
|
import AutoRollComponent from '../build/AutoRollComponent' |
|
|
import AutoRollComponent from '../build/AutoRollComponent' |
|
|
|
|
|
import VideoMonitor from '../build/videoMonitor' |
|
|
import Module from '../../public/module' |
|
|
import Module from '../../public/module' |
|
|
import LeftItem from './LeftItem' |
|
|
import LeftItem from './LeftItem' |
|
|
import { getjiandmanage, getjiandetail } from '../../../actions/example' |
|
|
import { getjiandmanage, getjiandetail } from '../../../actions/example' |
|
|
import './style.less' |
|
|
import './style.less' |
|
|
import NoData from '../../public/noData'; |
|
|
import NoData from '../../public/noData'; |
|
|
const Guanli = (props) => { |
|
|
const Guanli = (props) => { |
|
|
const { dispatch } = props |
|
|
const { dispatch } = props |
|
|
const [leftDatas, setleftDatas] = useState([]) |
|
|
const [leftDatas, setleftDatas] = useState([]) |
|
|
const [rightDatas, setrightDatas] = useState([]) |
|
|
const [rightDatas, setrightDatas] = useState([]) |
|
|
const [rightitemlist, setrightitemlist] = useState() |
|
|
const [rightitemlist, setrightitemlist] = useState() |
|
|
const requestleftDatas = async () => { |
|
|
const requestleftDatas = async () => { |
|
|
const res = await dispatch(getjiandmanage()) |
|
|
const res = await dispatch(getjiandmanage()) |
|
|
res.payload.data?.sort((a, b) => { |
|
|
res.payload.data?.sort((a, b) => { |
|
|
return parseInt(b.total) - parseInt(a.total) |
|
|
return parseInt(b.total) - parseInt(a.total) |
|
|
}) |
|
|
}) |
|
|
setleftDatas(res.payload.data) |
|
|
setleftDatas(res.payload.data) |
|
|
// console.log(res.payload.data,'哈哈哈')
|
|
|
// console.log(res.payload.data,'哈哈哈')
|
|
|
} |
|
|
} |
|
|
const data_string = (str) => { |
|
|
const data_string = (str) => { |
|
|
str.match('/([^.]*)$/g') |
|
|
str.match('/([^.]*)$/g') |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
const requestRightDatas = async () => { |
|
|
const requestRightDatas = async () => { |
|
|
const res = await dispatch(getjiandetail()) |
|
|
const res = await dispatch(getjiandetail()) |
|
|
// let d = res.payload.data?.overSpeedList.sort((a,b)=>b.processingTime < a.processingTime ?-1:1)
|
|
|
// let d = res.payload.data?.overSpeedList.sort((a,b)=>b.processingTime < a.processingTime ?-1:1)
|
|
|
|
|
|
|
|
|
var pattern = /[\u4e00-\u9fa5]*/; |
|
|
var pattern = /[\u4e00-\u9fa5]*/; |
|
|
// console.log(res.payload.data,'好的号的')
|
|
|
// console.log(res.payload.data,'好的号的')
|
|
|
let d = res.payload.data?.overSpeedList?.filter((item, index) => { |
|
|
let d = res.payload.data?.overSpeedList?.filter((item, index) => { |
|
|
return /.*[\u4e00-\u9fa5_a-zA-Z]+.*$/.test(item.processingTime) == false |
|
|
return /.*[\u4e00-\u9fa5_a-zA-Z]+.*$/.test(item.processingTime) == false |
|
|
}) |
|
|
}) |
|
|
|
|
|
|
|
|
d.map((item, index) => { |
|
|
d.map((item, index) => { |
|
|
if (parseInt(item.processingTime.match(/([^.]*)$/)[0]) < 10) { |
|
|
if (parseInt(item.processingTime.match(/([^.]*)$/)[0]) < 10) { |
|
|
return item.processingTime = `${(item.processingTime.match(/^([^.]*)(.[^.]*)/)[0])}.0${parseInt(item.processingTime.match(/([^.]*)$/)[0])}` |
|
|
return item.processingTime = `${(item.processingTime.match(/^([^.]*)(.[^.]*)/)[0])}.0${parseInt(item.processingTime.match(/([^.]*)$/)[0])}` |
|
|
} |
|
|
} |
|
|
// console.log(d3,'好评')
|
|
|
// console.log(d3,'好评')
|
|
|
// console.log(item.processingTime.match(/([^.]*)$/)[0],'kk')
|
|
|
// console.log(item.processingTime.match(/([^.]*)$/)[0],'kk')
|
|
|
}) |
|
|
}) |
|
|
d.sort((a, b) => b.processingTime.localeCompare(a.processingTime)) |
|
|
d.sort((a, b) => b.processingTime.localeCompare(a.processingTime)) |
|
|
setrightDatas(res.payload.data) |
|
|
setrightDatas(res.payload.data) |
|
|
setrightitemlist(d) |
|
|
setrightitemlist(d) |
|
|
// console.log(d,'对比的数据')
|
|
|
// console.log(d,'对比的数据')
|
|
|
// console.log(d2,'完美')
|
|
|
// console.log(d2,'完美')
|
|
|
// console.log(res.payload.data,'嘿嘿嘿')
|
|
|
// console.log(res.payload.data,'嘿嘿嘿')
|
|
|
} |
|
|
} |
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
requestleftDatas(); |
|
|
requestleftDatas(); |
|
|
requestRightDatas() |
|
|
requestRightDatas() |
|
|
}, []) |
|
|
}, []) |
|
|
// let datalist = newArry(30)
|
|
|
// let datalist = newArry(30)
|
|
|
// datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"})
|
|
|
// datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"})
|
|
|
// const content = (
|
|
|
// const content = (
|
|
|
|
|
|
|
|
|
// );
|
|
|
// );
|
|
|
const renderContent = () => { |
|
|
const renderContent = () => { |
|
|
// console.log(rightitemlist);
|
|
|
// console.log(rightitemlist);
|
|
|
return <div style={{ height: "100%" }}> |
|
|
return <div style={{ height: "100%" }}> |
|
|
{rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ id, licensePlate, overrunRate, fine, processingTime, deductPoints, nameOfInspectionPoint }, index) => { |
|
|
{rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ id, licensePlate, overrunRate, fine, processingTime, deductPoints, nameOfInspectionPoint }, index) => { |
|
|
if (index < 120) { |
|
|
if (index < 120) { |
|
|
return <div key={index} className='guanli-right-item'> |
|
|
return <div key={index} className='guanli-right-item'> |
|
|
<Tooltip title={<div className='popover-content'> |
|
|
<Tooltip title={<div className='popover-content'> |
|
|
<div style={{ width: "100%", height: "100%", marginTop: "0" }}> |
|
|
<div style={{ width: "100%", height: "100%", marginTop: "0" }}> |
|
|
|
|
|
|
|
|
{/* <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} /> */} |
|
|
{/* <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} /> */} |
|
|
<div style={{ position: "absolute", top: "0", width: "50%", padding: "20px" }}> |
|
|
<div style={{ position: "absolute", top: "0", width: "50%", padding: "20px" }}> |
|
|
<img src='/assets/images/leadership/yuanxing.png' style={{ width: "100%", height: "100%" }} /> |
|
|
<img src='/assets/images/leadership/yuanxing.png' style={{ width: "100%", height: "100%" }} /> |
|
|
<p style={{ color: "#09BAFF", position: "absolute", top: "42%", left: "27%", fontSize: "29px", fontFamily: "YouSheBiaoTiHei" }}>{overrunRate ? overrunRate.toFixed(2) : 0}%{/* {item.overrunRate ? item.overrunRate + "%" : "--"} */}</p> |
|
|
<p style={{ color: "#09BAFF", position: "absolute", top: "42%", left: "27%", fontSize: "29px", fontFamily: "YouSheBiaoTiHei" }}>{overrunRate ? overrunRate.toFixed(2) : 0}%{/* {item.overrunRate ? item.overrunRate + "%" : "--"} */}</p> |
|
|
<p style={{ color: "rgba(216,240,255,0.8)", position: "absolute", top: "60%", left: "43%", fontSize: "14px" }}>超限</p> |
|
|
<p style={{ color: "rgba(216,240,255,0.8)", position: "absolute", top: "60%", left: "43%", fontSize: "14px" }}>超限</p> |
|
|
</div> |
|
|
</div> |
|
|
<div style={{ position: "absolute", top: "0", width: "50%", left: "50%", top: '5px' }}> |
|
|
<div style={{ position: "absolute", top: "0", width: "50%", left: "50%", top: '5px' }}> |
|
|
<p style={{ color: "rgba(216,240,255,0.8)", marginTop: "30px", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>车牌号<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{licensePlate}{/* {item.licensePlate} */}</span></p> |
|
|
<p style={{ color: "rgba(216,240,255,0.8)", marginTop: "30px", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>车牌号<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{licensePlate}{/* {item.licensePlate} */}</span></p> |
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>检测点<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{nameOfInspectionPoint}</span></p> |
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>检测点<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{nameOfInspectionPoint}</span></p> |
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>处罚<span style={{ color: "#FF0001", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""}{/* {item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"} */}</span></p> |
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>处罚<span style={{ color: "#FF0001", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""}{/* {item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"} */}</span></p> |
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>日期<span style={{ color: "#EEF4FF", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{processingTime}{/* {item.processingTime ? item.processingTime : "--"} */}</span></p> |
|
|
<p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>日期<span style={{ color: "#EEF4FF", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{processingTime}{/* {item.processingTime ? item.processingTime : "--"} */}</span></p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div>} |
|
|
</div>} |
|
|
placement="leftTop" |
|
|
placement="leftTop" |
|
|
overlayStyle={{ minWidth: 400, minHeight: 212, padding: 0, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }} |
|
|
overlayStyle={{ minWidth: 400, minHeight: 212, padding: 0, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }} |
|
|
overlayClassName='popover' |
|
|
overlayClassName='popover' |
|
|
|
|
|
|
|
|
> |
|
|
> |
|
|
<div style={{ width: '100%', height: '100%', display: 'flex' }}> |
|
|
<div style={{ width: '100%', height: '100%', display: 'flex' }}> |
|
|
<span>{licensePlate}</span> |
|
|
<span>{licensePlate}</span> |
|
|
<span>{overrunRate}%</span> |
|
|
<span>{overrunRate}%</span> |
|
|
<span>{deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""}</span> |
|
|
<span>{deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""}</span> |
|
|
<span>{processingTime}</span> |
|
|
<span>{processingTime}</span> |
|
|
</div> |
|
|
</div> |
|
|
</Tooltip> |
|
|
</Tooltip> |
|
|
</div> |
|
|
</div> |
|
|
} |
|
|
} |
|
|
}) : ""} |
|
|
}) : ""} |
|
|
</div> |
|
|
</div> |
|
|
} |
|
|
} |
|
|
const renderLeftContent = () => { |
|
|
const renderLeftContent = () => { |
|
|
// setleftDatas(leftDatas=>leftDatas.sort((a,b)=>b.total - a.total))
|
|
|
// setleftDatas(leftDatas=>leftDatas.sort((a,b)=>b.total - a.total))
|
|
|
|
|
|
|
|
|
return leftDatas && leftDatas.length !== 0 ? leftDatas.map((item, index) => |
|
|
return leftDatas && leftDatas.length !== 0 ? leftDatas.map((item, index) => |
|
|
<LeftItem key={index} datas={item}></LeftItem> |
|
|
<LeftItem key={index} datas={item}></LeftItem> |
|
|
) : "" |
|
|
) : "" |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
// renderContent()
|
|
|
// renderContent()
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
<div className='guanli-left'> |
|
|
<div className='guanli-left'> |
|
|
<Module style={{ height: "100%" }} title="检测点治超处理占比" customize={true}> |
|
|
{/* <Module style={{ height: "100%" }} title="检测点治超处理占比" customize={true}> |
|
|
{leftDatas && leftDatas.length !== 0 ? <AutoRollComponent content={renderLeftContent()} |
|
|
{leftDatas && leftDatas.length !== 0 ? <AutoRollComponent content={renderLeftContent()} |
|
|
containerStyle={{ position: "relative", height: "90%", }} |
|
|
containerStyle={{ position: "relative", height: "90%", }} |
|
|
divHeight={"100%"} divId={"chart-overview-left"} /> : <NoData />} |
|
|
divHeight={"100%"} divId={"chart-overview-left"} /> : <NoData />} |
|
|
</Module> |
|
|
</Module> */} |
|
|
</div> |
|
|
<Module style={{ height: "100%" }} title="视频监控" customize={true}> |
|
|
<div className='guanli-right'> |
|
|
<VideoMonitor /> |
|
|
<Module style={{ height: "100%" }} title="治超详情" customize={true}> |
|
|
</Module> |
|
|
<div className="guanli-right-top"> |
|
|
</div> |
|
|
<img src="/assets/images/quanju/zhicaolog.png"></img> |
|
|
<div className='guanli-right'> |
|
|
<span>已处理</span> |
|
|
<Module style={{ height: "100%" }} title="治超详情" customize={true}> |
|
|
<span>{rightDatas?.processed || 0}</span> |
|
|
<div className="guanli-right-top"> |
|
|
<span>件</span> |
|
|
<img src="/assets/images/quanju/zhicaolog.png"></img> |
|
|
</div> |
|
|
<span>已处理</span> |
|
|
<div className='guanli-right-title'> |
|
|
<span>{rightDatas?.processed || 0}</span> |
|
|
<span>车牌号</span> |
|
|
<span>件</span> |
|
|
<span>超限</span> |
|
|
</div> |
|
|
<span>处罚</span> |
|
|
<div className='guanli-right-title'> |
|
|
<span>处理日期</span> |
|
|
<span>车牌号</span> |
|
|
</div> |
|
|
<span>超限</span> |
|
|
{rightitemlist && rightitemlist.length !== 0 ? <AutoRollComponent content={renderContent()} |
|
|
<span>处罚</span> |
|
|
containerStyle={{ position: "relative", height: "90%", }} |
|
|
<span>处理日期</span> |
|
|
divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "70%" }} />} |
|
|
</div> |
|
|
</Module> |
|
|
{rightitemlist && rightitemlist.length !== 0 ? <AutoRollComponent content={renderContent()} |
|
|
</div> |
|
|
containerStyle={{ position: "relative", height: "90%", }} |
|
|
</> |
|
|
divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "70%" }} />} |
|
|
) |
|
|
</Module> |
|
|
|
|
|
</div> |
|
|
|
|
|
</> |
|
|
|
|
|
) |
|
|
} |
|
|
} |
|
|
function mapStateToProps (state) { |
|
|
function mapStateToProps (state) { |
|
|
const { auth, depMessage } = state; |
|
|
const { auth, depMessage } = state; |
|
|
const pakData = (dep) => { |
|
|
const pakData = (dep) => { |
|
|
return dep.map((d) => { |
|
|
return dep.map((d) => { |
|
|
return { |
|
|
return { |
|
|
title: d.name, |
|
|
title: d.name, |
|
|
value: d.id, |
|
|
value: d.id, |
|
|
// children: d.type >= 2 ? [] : pakData(d.subordinate)
|
|
|
// children: d.type >= 2 ? [] : pakData(d.subordinate)
|
|
|
children: pakData(d.subordinate) |
|
|
children: pakData(d.subordinate) |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
} |
|
|
} |
|
|
let depData = pakData(depMessage.data || []) |
|
|
let depData = pakData(depMessage.data || []) |
|
|
return { |
|
|
return { |
|
|
user: auth.user, |
|
|
user: auth.user, |
|
|
depMessage: depMessage.data || [], |
|
|
depMessage: depMessage.data || [], |
|
|
depLoading: depMessage.isRequesting, |
|
|
depLoading: depMessage.isRequesting, |
|
|
depData, |
|
|
depData, |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
export default connect(mapStateToProps)(Guanli); |
|
|
export default connect(mapStateToProps)(Guanli); |
