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.
265 lines
13 KiB
265 lines
13 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import { Carousel, Tooltip, Image } from 'antd'
|
|
import AutoRollComponent from '../build/AutoRollComponent'
|
|
import VideoMonitor from '../build/videoMonitor'
|
|
import Module from '../../public/module'
|
|
import moment from 'moment'
|
|
import LeftItem from './LeftItem'
|
|
import { getjiandmanage, getjiandetail } from '../../../actions/example'
|
|
import { getRoadadministration } from '../../../../fillion/actions/luzheng'
|
|
import './style.less'
|
|
import NoData from '../../public/noData';
|
|
import { stubString } from 'lodash';
|
|
const Guanli = (props) => {
|
|
const { dispatch } = props
|
|
const [leftDatas, setleftDatas] = useState([])
|
|
const [rightDatas, setrightDatas] = useState([])
|
|
const [rightitemlist, setrightitemlist] = 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 data_string = (str) => {
|
|
str.match('/([^.]*)$/g')
|
|
|
|
|
|
}
|
|
const requestRightDatas = async () => {
|
|
const res = await dispatch(getjiandetail())
|
|
// let d = res.payload.data?.overSpeedList.sort((a,b)=>b.processingTime < a.processingTime ?-1:1)
|
|
|
|
var pattern = /[\u4e00-\u9fa5]*/;
|
|
// console.log(res.payload.data,'好的号的')
|
|
let d = res.payload.data?.overSpeedList?.filter((item, index) => {
|
|
return /.*[\u4e00-\u9fa5_a-zA-Z]+.*$/.test(item.processingTime) == false
|
|
})
|
|
|
|
d.map((item, index) => {
|
|
if (parseInt(item.processingTime.match(/([^.]*)$/)[0]) < 10) {
|
|
return item.processingTime = `${(item.processingTime.match(/^([^.]*)(.[^.]*)/)[0])}.0${parseInt(item.processingTime.match(/([^.]*)$/)[0])}`
|
|
}
|
|
// console.log(d3,'好评')
|
|
// console.log(item.processingTime.match(/([^.]*)$/)[0],'kk')
|
|
})
|
|
d.sort((a, b) => b.processingTime.localeCompare(a.processingTime))
|
|
setrightDatas(res.payload.data)
|
|
setrightitemlist(d)
|
|
// console.log(d,'对比的数据')
|
|
// console.log(d2,'完美')
|
|
// console.log(res.payload.data,'嘿嘿嘿')
|
|
}
|
|
|
|
const roadManagement = async () => {
|
|
await dispatch(getRoadadministration({})).then(res => {
|
|
if (res.success) {
|
|
setrightitemlist(res.payload.data?.rows || [])
|
|
}
|
|
})
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
useEffect(() => {
|
|
requestleftDatas();
|
|
// requestRightDatas()
|
|
|
|
roadManagement()
|
|
}, [])
|
|
|
|
// const renderContent = () => {
|
|
// console.log('rightitemlist', rightitemlist)
|
|
// return <div style={{ height: "100%" }}>
|
|
// {rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => {
|
|
// if (index < 120) {
|
|
// return <div key={index} className='guanli-right-item'>
|
|
// <Tooltip title={<div className='popover-content'>
|
|
// <div style={{ width: '100%', height: "100%", marginTop: "0", paddingBottom: 20, display: "flex" }}>
|
|
// {picfile?.length > 0 ? <Carousel autoplay style={{ width: 200, height: 200, margin: "20px 0px 0px 20px" }}>
|
|
// {picfile?.map(v => <img className='picfileimg'
|
|
// style={{ width: 200, height: 200, display: 'inline-block', }}
|
|
// // src={`/_file-server/${v.storageUrl}`}
|
|
// src={v.url}
|
|
// width={`200px`}
|
|
// />)}
|
|
// </Carousel>
|
|
// : <div style={{
|
|
// width: 200, height: 200, margin: "20px 0px 0px 20px",
|
|
// }} />
|
|
// }
|
|
|
|
|
|
// <div style={{ width: 240, marginLeft: 20, marginTop: 20, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
|
|
// <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
|
|
// 执法日期:<span style={{
|
|
// color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
|
|
// overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
|
|
// }}>
|
|
// {enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
|
|
// </span></p>
|
|
// <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
|
|
// 执法道路:<span title={roadname} style={{
|
|
// color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
|
|
// overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
|
|
// }}>
|
|
// {roadname}
|
|
// </span></p>
|
|
// <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
|
|
// 执法成果:<span title={enforcementreslt} style={{
|
|
// color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
|
|
// overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
|
|
// }}>
|
|
// {enforcementreslt}</span></p>
|
|
// </div>
|
|
// </div>
|
|
|
|
// </div>}
|
|
// placement="leftTop"
|
|
// overlayStyle={{ minWidth: 500, minHeight: 200, paddingTop: 10, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }}
|
|
// overlayClassName='popover'
|
|
|
|
// >
|
|
// <div style={{ width: '100%', height: '100%', display: 'flex', color: "rgba(216, 240, 255, 0.8)" }}>
|
|
// <div style={{ width: '50%', textAlign: "center", }}>{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}</div>
|
|
// <div title={enforcementreslt} style={{ width: '50%', textAlign: "center", overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis" }}>{enforcementreslt}</div>
|
|
// </div>
|
|
// </Tooltip>
|
|
// </div>
|
|
// }
|
|
// }) : ""}
|
|
// </div>
|
|
// }
|
|
const renderContent = rightitemlist.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => {
|
|
return (
|
|
<div key={index} style={{}} className='carCardRight'>
|
|
{picfile?.length > 0 ? <Carousel autoplay style={{ width: 200, height: 200, margin: "20px 10px" }}>
|
|
{picfile?.map(v => <div style={{ width: 200, height: 200 }}>
|
|
<img className='picfileimg'
|
|
style={{ width: 200, height: 150, display: 'inline-block', }}
|
|
// src={`/_file-server/${v.storageUrl}`}
|
|
src={v.url}
|
|
width={`200px`}
|
|
/>
|
|
</div>)}
|
|
</Carousel>
|
|
: <div style={{
|
|
width: 200, height: 200, margin: "20px 0px 0px 20px",
|
|
}} />
|
|
}
|
|
<div style={{ width: 240, marginLeft: 10, marginTop: 20, display: "flex", flexDirection: "column", justifyContent: "space-around" }}>
|
|
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
|
|
执法日期:<span style={{
|
|
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
|
|
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis"
|
|
}}>
|
|
{enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
|
|
</span></p>
|
|
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
|
|
执法道路:<span title={roadname} style={{
|
|
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
|
|
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
|
|
}}>
|
|
{roadname.length > 2 ? <Tooltip title={roadname}>{roadname.substring(0, 5) + '...'} </Tooltip> : roadname}
|
|
</span></p>
|
|
<p style={{ whiteSpace: "nowrap", color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC", display: "flex" }}>
|
|
执法成果:<span title={enforcementreslt} style={{
|
|
color: "#EEF4FF", marginLeft: "10px", fontFamily: " PingFangSC-Medium, PingFang SC",
|
|
overflow: 'hidden', whiteSpace: "nowrap", textOverflow: "ellipsis", display: 'inline-block', width: 160
|
|
}}>
|
|
{enforcementreslt.length > 2 ? <Tooltip title={enforcementreslt}><span>{enforcementreslt.substring(0, 5) + '...'}</span> </Tooltip> : enforcementreslt}
|
|
|
|
</span></p>
|
|
</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()
|
|
// console.log(' renderContent.length', renderContent.length)
|
|
return (
|
|
<>
|
|
<div className='guanli-left'>
|
|
{/* <Module style={{ height: "100%" }} title="检测点治超处理占比" customize={true}>
|
|
{leftDatas && leftDatas.length !== 0 ? <AutoRollComponent content={renderLeftContent()}
|
|
containerStyle={{ position: "relative", height: "90%", }}
|
|
divHeight={"100%"} divId={"chart-overview-left"} /> : <NoData />}
|
|
</Module> */}
|
|
<Module style={{ height: "100%" }} title="视频监控" customize={true}>
|
|
<VideoMonitor />
|
|
</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> */}
|
|
{/* <div style={{ width: "90%", margin: "auto", display: "flex", color: "#FFF" }}>
|
|
<div style={{ width: '50%', textAlign: "center" }}>执法日期</div>
|
|
<div style={{ width: '50%', textAlign: "center", }}>执法成果</div>
|
|
</div> */}
|
|
{rightitemlist && rightitemlist.length !== 0 ? <AutoRollComponent content={renderContent}
|
|
containerStyle={{ position: "relative", height: "100%", margin: "20px" }}
|
|
divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "20%" }} />}
|
|
|
|
{/* {
|
|
renderContent.length > 3 ? <Carousel
|
|
autoplay
|
|
infinite
|
|
// autoplaySpeed={300000}
|
|
autoplaySpeed={1000 * 3}
|
|
vertical={true}
|
|
//slidesToShow={3}
|
|
>
|
|
|
|
{renderContent}
|
|
</Carousel> : renderContent
|
|
} */}
|
|
</Module>
|
|
</div >
|
|
</>
|
|
)
|
|
}
|
|
function mapStateToProps(state) {
|
|
const { auth, depMessage, global } = 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);
|