|
|
|
@ -1,9 +1,15 @@ |
|
|
|
import React, { useState, useEffect } from 'react' |
|
|
|
import Module from '../../../public/module' |
|
|
|
import { Spin } from 'antd' |
|
|
|
import { Carousel, Tooltip,} from 'antd' |
|
|
|
import Lun from "./lunbo" |
|
|
|
import moment from 'moment' |
|
|
|
import "./left.less" |
|
|
|
import { getZhichaolist } from "../../../../actions/example" |
|
|
|
import { getRoadadministration } from '../../../../../fillion/actions/luzheng' |
|
|
|
import NoData from '../../../public/noData'; |
|
|
|
import AutoRollComponent from '../../build/AutoRollComponent' |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const Rightbottom = (props) => { |
|
|
|
const { dispatch } = props |
|
|
|
@ -13,6 +19,8 @@ const Rightbottom = (props) => { |
|
|
|
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]*/; |
|
|
|
@ -30,77 +38,100 @@ const Rightbottom = (props) => { |
|
|
|
setList(d) |
|
|
|
} |
|
|
|
useEffect(() => { |
|
|
|
const zhichaolist = dispatch(getZhichaolist()).then((res) => { |
|
|
|
setNums(res.payload?.data?.processed) |
|
|
|
// const zhichaolist = dispatch(getZhichaolist()).then((res) => {
|
|
|
|
// setNums(res.payload?.data?.processed)
|
|
|
|
|
|
|
|
}) |
|
|
|
requestRightDatas() |
|
|
|
// })
|
|
|
|
// requestRightDatas()
|
|
|
|
roadManagement() |
|
|
|
}, []) |
|
|
|
console.log(list); |
|
|
|
const renderBody = () => { |
|
|
|
return ( |
|
|
|
<div style={{ width: "100%", height: "50%" }}> |
|
|
|
{/* <Spin spinning={!list} tip="Loading" size="large"> */} |
|
|
|
{list?.map((item, index) => { |
|
|
|
return <li style={{ width: "100%", height: "3vh", marginTop: "5px", position: "relative", }} onMouseEnter={() => { |
|
|
|
setBeijing(index) |
|
|
|
setNum(index) |
|
|
|
// console.log(beijing);
|
|
|
|
}} onMouseLeave={() => { |
|
|
|
setBeijing() |
|
|
|
setNum() |
|
|
|
}}> |
|
|
|
{beijing == index ? <img src='/assets/images/leadership/bei.png' style={{ width: "100%", height: "100%", position: "absolute" }} /> : ""} |
|
|
|
<div style={{ width: "30%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute" }}>{item.licensePlate}</div> |
|
|
|
<div style={{ width: "10%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "30%" }}>{item.overrunRate ? item.overrunRate + "%" : "--"}</div> |
|
|
|
<div style={{ width: "30%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "40%" }}>{item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"}</div> |
|
|
|
<div style={{ width: "30%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "70%" }}>{item.processingTime ? item.processingTime : "--"}</div> |
|
|
|
{ |
|
|
|
num == index ? <div style={{ position: "fixed", width: "400px", height: "200px", zIndex: 100, left: "55%", marginTop: "0", top: "78%" }}> |
|
|
|
<img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} /> |
|
|
|
<div style={{ position: "absolute", top: "0", width: "50%", padding: "20px" }}> |
|
|
|
<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" }}>{item.overrunRate ? item.overrunRate + "%" : "--"}</p> |
|
|
|
<p style={{ color: "rgba(216,240,255,0.8)", position: "absolute", top: "60%", left: "43%", fontSize: "14px" }}>超限</p> |
|
|
|
</div> |
|
|
|
<div style={{ position: "absolute", top: "0", width: "50%", left: "50%", paddingRight: "10px" }}> |
|
|
|
<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" }}>{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: "30px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.nameOfInspectionPoint ? item.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" }}>{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" }}>{item.processingTime ? item.processingTime : "--"}</span></p> |
|
|
|
</div> |
|
|
|
</div> : "" |
|
|
|
|
|
|
|
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", 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> |
|
|
|
: <img src="/" style={{ |
|
|
|
width: 200, height: 200, margin: "20px 0px 0px 20px", display: 'inline-block', borderRight: "1px solid #FFF", |
|
|
|
}} /> |
|
|
|
} |
|
|
|
</li> |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
{/* </Spin> */} |
|
|
|
</div> |
|
|
|
) |
|
|
|
} |
|
|
|
|
|
|
|
<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 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 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: "#FFF" }}> |
|
|
|
<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={{ position: "relative", width: "90%", height: "5%", left: "5%", textAlign: "right", fontSize: "16px", top: "-3%", color: "rgba(216,240,255,0.8)" }}> |
|
|
|
<img src='/assets/images/leadership/jiejue.png' style={{ width: "4.5%", height: "2vh", marginTop: "-1%" }} /> |
|
|
|
已处理<span style={{ color: "#FFFFFF", fontSize: "18px", paddingLeft: "2%", paddingRight: "2%" }}>{nums ? nums : 0}</span>件 |
|
|
|
</div> |
|
|
|
<div style={{ width: "90%", height: "3vh", backgroundColor: "rgba(21,77,160,0.2)", position: "relative", left: "5%", top: "5%" }}> |
|
|
|
<p style={{ width: "30%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh" }}>车牌号</p> |
|
|
|
<p style={{ width: "10%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "30%" }}>超限</p> |
|
|
|
<p style={{ width: "30%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "40%" }}>处罚</p> |
|
|
|
<p style={{ width: "30%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "70%" }}>处理日期</p> |
|
|
|
</div> |
|
|
|
{/* <Spin tip="Loading..." spinning={false} > */} |
|
|
|
<Lun |
|
|
|
content={renderBody()} |
|
|
|
containerStyle={{ position: "relative", height: "70%", width: "90%", left: "5%", top: "8%" }} |
|
|
|
divHeight={"100%"} |
|
|
|
divId={"screen-slope-midde-top"} |
|
|
|
/> |
|
|
|
{/* </Spin> */} |
|
|
|
<Module style={style} title={"道路隐患排查治理"}> |
|
|
|
|
|
|
|
<div style={{ width: "100%", 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> |
|
|
|
</> |
|
|
|
) |
|
|
|
|
dengyinhuan
1 year ago