|
|
@ -12,128 +12,128 @@ import AutoRollComponent from '../../build/AutoRollComponent' |
|
|
|
|
|
|
|
|
|
|
|
const Rightbottom = (props) => { |
|
|
|
const { dispatch } = props |
|
|
|
const style = { height: "28%", marginTop: "4%" } |
|
|
|
const [beijing, setBeijing] = useState() |
|
|
|
const [list, setList] = useState([]) |
|
|
|
const [rightDatas, setrightDatas] = useState([]) |
|
|
|
const [nums, setNums] = useState([]) |
|
|
|
const [num, setNum] = useState() |
|
|
|
const [rightitemlist, setrightitemlist] = useState([]) |
|
|
|
|
|
|
|
const requestRightDatas = async () => { |
|
|
|
const res = await dispatch(getZhichaolist()) |
|
|
|
var pattern = /[\u4e00-\u9fa5]*/; |
|
|
|
let d = res.payload.data?.overSpeedList?.filter((item, index) => { |
|
|
|
return /.*[\u4e00-\u9fa5_a-zA-Z]+.*$/.test(item.processingTime) == false |
|
|
|
}) |
|
|
|
console.log(res); |
|
|
|
d.map((item, index) => { |
|
|
|
if (parseInt(item.processingTime.match(/([^.]*)$/)[0]) < 10) { |
|
|
|
return item.processingTime = `${(item.processingTime.match(/^([^.]*)(.[^.]*)/)[0])}.0${parseInt(item.processingTime.match(/([^.]*)$/)[0])}` |
|
|
|
} |
|
|
|
}) |
|
|
|
d.sort((a, b) => b.processingTime.localeCompare(a.processingTime)) |
|
|
|
// setrightDatas(res.payload.data)
|
|
|
|
setList(d) |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
// const zhichaolist = dispatch(getZhichaolist()).then((res) => {
|
|
|
|
// setNums(res.payload?.data?.processed)
|
|
|
|
|
|
|
|
// })
|
|
|
|
// requestRightDatas()
|
|
|
|
roadManagement() |
|
|
|
}, []) |
|
|
|
|
|
|
|
const roadManagement = async () => { |
|
|
|
await dispatch(getRoadadministration({})).then(res => { |
|
|
|
if (res.success) { |
|
|
|
setrightitemlist(res.payload.data?.rows || []) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const renderContent = () => { |
|
|
|
|
|
|
|
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: '90%', height: '100%', margin:'auto',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> |
|
|
|
const { dispatch } = props |
|
|
|
const style = { height: "28%", marginTop: "4%" } |
|
|
|
const [beijing, setBeijing] = useState() |
|
|
|
const [list, setList] = useState([]) |
|
|
|
const [rightDatas, setrightDatas] = useState([]) |
|
|
|
const [nums, setNums] = useState([]) |
|
|
|
const [num, setNum] = useState() |
|
|
|
const [rightitemlist, setrightitemlist] = useState([]) |
|
|
|
|
|
|
|
const requestRightDatas = async () => { |
|
|
|
const res = await dispatch(getZhichaolist()) |
|
|
|
var pattern = /[\u4e00-\u9fa5]*/; |
|
|
|
let d = res.payload.data?.overSpeedList?.filter((item, index) => { |
|
|
|
return /.*[\u4e00-\u9fa5_a-zA-Z]+.*$/.test(item.processingTime) == false |
|
|
|
}) |
|
|
|
console.log(res); |
|
|
|
d.map((item, index) => { |
|
|
|
if (parseInt(item.processingTime.match(/([^.]*)$/)[0]) < 10) { |
|
|
|
return item.processingTime = `${(item.processingTime.match(/^([^.]*)(.[^.]*)/)[0])}.0${parseInt(item.processingTime.match(/([^.]*)$/)[0])}` |
|
|
|
} |
|
|
|
}) : ""} |
|
|
|
</div> |
|
|
|
} |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<Module style={style} title={"道路隐患排查治理"}> |
|
|
|
|
|
|
|
<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: "90%", }} |
|
|
|
divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "20%" }} />} |
|
|
|
|
|
|
|
</Module> |
|
|
|
</> |
|
|
|
) |
|
|
|
}) |
|
|
|
d.sort((a, b) => b.processingTime.localeCompare(a.processingTime)) |
|
|
|
// setrightDatas(res.payload.data)
|
|
|
|
setList(d) |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
// const zhichaolist = dispatch(getZhichaolist()).then((res) => {
|
|
|
|
// setNums(res.payload?.data?.processed)
|
|
|
|
|
|
|
|
// })
|
|
|
|
// requestRightDatas()
|
|
|
|
roadManagement() |
|
|
|
}, []) |
|
|
|
|
|
|
|
const roadManagement = async () => { |
|
|
|
await dispatch(getRoadadministration({})).then(res => { |
|
|
|
if (res.success) { |
|
|
|
setrightitemlist(res.payload.data?.rows || []) |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
const renderContent = () => { |
|
|
|
|
|
|
|
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: '90%', height: '100%', margin: 'auto', 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> |
|
|
|
} |
|
|
|
return ( |
|
|
|
<> |
|
|
|
<Module style={style} title={"道路隐患排查治理"}> |
|
|
|
|
|
|
|
<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: "90%", }} |
|
|
|
divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "20%" }} />} |
|
|
|
|
|
|
|
</Module> |
|
|
|
</> |
|
|
|
) |
|
|
|
} |
|
|
|
export default Rightbottom |