2 changed files with 779 additions and 0 deletions
@ -0,0 +1,230 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import Module from '../../../public/module' |
|||
import { Spin } from 'antd' |
|||
import Lun from "../../leadership/right/lunbo" |
|||
import "../../leadership/right/left.less" |
|||
import { getZhichaolist } from "../../../../actions/example" |
|||
|
|||
const Lefttbottoms = (props) => { |
|||
// const { dispatch } = props
|
|||
const style = { height: "28%", marginTop: "4%" } |
|||
const [beijing, setBeijing] = useState() |
|||
const [list, setList] = useState([{ |
|||
deductPoints: "12", |
|||
fine: "2000", |
|||
id: 50364, |
|||
licensePlate: "苏L12345", |
|||
nameOfInspectionPoint: "才华无限", |
|||
overrunRate: 100, |
|||
processingTime: "2022.7.30", |
|||
testTime: "2022-07-29T00:00:00.000Z", |
|||
cun: "12", |
|||
xiang: "12", |
|||
xian: "12", |
|||
danwei: "蟹堡王章鱼哥海绵宝宝派大星" |
|||
}, { |
|||
deductPoints: "12", |
|||
fine: "2000", |
|||
id: 50364, |
|||
licensePlate: "苏L12345", |
|||
nameOfInspectionPoint: "才华无限", |
|||
overrunRate: 100, |
|||
processingTime: "2022.7.30", |
|||
testTime: "2022-07-29T00:00:00.000Z", |
|||
cun: "12", |
|||
xiang: "12", |
|||
xian: "12", |
|||
danwei: "蟹堡王章鱼哥海绵宝宝派大星" |
|||
}, { |
|||
deductPoints: "12", |
|||
fine: "2000", |
|||
id: 50364, |
|||
licensePlate: "苏L12345", |
|||
nameOfInspectionPoint: "才华无限", |
|||
overrunRate: 100, |
|||
processingTime: "2022.7.30", |
|||
testTime: "2022-07-29T00:00:00.000Z", |
|||
cun: "12", |
|||
xiang: "12", |
|||
xian: "12", |
|||
danwei: "蟹堡王章鱼哥海绵宝宝派大星" |
|||
}, { |
|||
deductPoints: "12", |
|||
fine: "2000", |
|||
id: 50364, |
|||
licensePlate: "苏L12345", |
|||
nameOfInspectionPoint: "才华无限", |
|||
overrunRate: 100, |
|||
processingTime: "2022.7.30", |
|||
testTime: "2022-07-29T00:00:00.000Z", |
|||
cun: "12", |
|||
xiang: "12", |
|||
xian: "12", |
|||
danwei: "蟹堡王章鱼哥海绵宝宝派大星" |
|||
}, { |
|||
deductPoints: "12", |
|||
fine: "2000", |
|||
id: 50364, |
|||
licensePlate: "苏L12345", |
|||
nameOfInspectionPoint: "才华无限", |
|||
overrunRate: 100, |
|||
processingTime: "2022.7.30", |
|||
testTime: "2022-07-29T00:00:00.000Z", |
|||
cun: "12", |
|||
xiang: "12", |
|||
xian: "12", |
|||
danwei: "蟹堡王章鱼哥海绵宝宝派大星" |
|||
}, { |
|||
deductPoints: "12", |
|||
fine: "2000", |
|||
id: 50364, |
|||
licensePlate: "苏L12345", |
|||
nameOfInspectionPoint: "才华无限", |
|||
overrunRate: 100, |
|||
processingTime: "2022.7.30", |
|||
testTime: "2022-07-29T00:00:00.000Z", |
|||
cun: "12", |
|||
xiang: "12", |
|||
xian: "12", |
|||
danwei: "蟹堡王章鱼哥海绵宝宝派大星" |
|||
}, { |
|||
deductPoints: "12", |
|||
fine: "2000", |
|||
id: 50364, |
|||
licensePlate: "苏L12345", |
|||
nameOfInspectionPoint: "才华无限", |
|||
overrunRate: 100, |
|||
processingTime: "2022.7.30", |
|||
testTime: "2022-07-29T00:00:00.000Z", |
|||
cun: "12", |
|||
xiang: "12", |
|||
xian: "12", |
|||
danwei: "蟹堡王章鱼哥海绵宝宝派大星" |
|||
}, { |
|||
deductPoints: "12", |
|||
fine: "2000", |
|||
id: 50364, |
|||
licensePlate: "苏L12345", |
|||
nameOfInspectionPoint: "才华无限", |
|||
overrunRate: 100, |
|||
processingTime: "2022.7.30", |
|||
testTime: "2022-07-29T00:00:00.000Z", |
|||
cun: "12", |
|||
xiang: "12", |
|||
xian: "12", |
|||
danwei: "蟹堡王章鱼哥海绵宝宝派大星" |
|||
}, { |
|||
deductPoints: "12", |
|||
fine: "2000", |
|||
id: 50364, |
|||
licensePlate: "苏L12345", |
|||
nameOfInspectionPoint: "才华无限", |
|||
overrunRate: 100, |
|||
processingTime: "2022.7.30", |
|||
testTime: "2022-07-29T00:00:00.000Z", |
|||
cun: "12", |
|||
xiang: "12", |
|||
xian: "12", |
|||
danwei: "蟹堡王章鱼哥海绵宝宝派大星" |
|||
}, { |
|||
deductPoints: "12", |
|||
fine: "2000", |
|||
id: 50364, |
|||
licensePlate: "苏L12345", |
|||
nameOfInspectionPoint: "才华无限", |
|||
overrunRate: 100, |
|||
processingTime: "2022.7.30", |
|||
testTime: "2022-07-29T00:00:00.000Z", |
|||
cun: "12", |
|||
xiang: "12", |
|||
xian: "12", |
|||
danwei: "蟹堡王章鱼哥海绵宝宝派大星" |
|||
},]) |
|||
const [rightDatas, setrightDatas] = useState([]) |
|||
const [nums, setNums] = useState([]) |
|||
const [num, setNum] = 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()
|
|||
// }, [])
|
|||
console.log(list); |
|||
const renderBody = () => { |
|||
return ( |
|||
<div style={{ width: "100%", height: "50%" }}> |
|||
{list?.map((item, index) => { |
|||
return <li style={{ width: "100%", height: "3vh", marginTop: "5px", position: "relative", }} onMouseEnter={() => { |
|||
setBeijing(index) |
|||
setNum(index) |
|||
}} onMouseLeave={() => { |
|||
setBeijing() |
|||
setNum() |
|||
}}> |
|||
{beijing == index ? <img src='/assets/images/leadership/bei.png' style={{ width: "100%", height: "100%", position: "absolute" }} /> : ""} |
|||
<div style={{ width: "25%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "3%", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{item.danwei}</div> |
|||
<div style={{ width: "12%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "33%" }}>{item.xian}</div> |
|||
<div style={{ width: "12%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "52%" }}>{item.xiang}</div> |
|||
<div style={{ width: "12%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "70%" }}>{item.cun}</div> |
|||
{/* <div style={{ width: "15%", height: "100%", textAlign: "center", lineHeight: "3vh", fontSize: "14px", color: beijing == index ? "#FFFFFF" : "rgba(216,240,255,0.8000)", position: "absolute", left: "76%" }}>{item.qiao}</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: "10px", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>车牌号<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.danwei}</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.xian}</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.xiang}</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.cun}</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.qiao}</span></p> |
|||
</div> |
|||
</div> : "" |
|||
} */} |
|||
</li> |
|||
}) |
|||
|
|||
} |
|||
</div> |
|||
) |
|||
} |
|||
return ( |
|||
<> |
|||
<div style={{ width: "90%", height: "3vh", backgroundColor: "rgba(21,77,160,0.2)", position: "relative", left: "5%", top: "5%" }}> |
|||
<p style={{ width: "35%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "-5%" }}>管养责任单位</p> |
|||
<p style={{ width: "25%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "30%" }}>管理人员（人）</p> |
|||
<p style={{ width: "20%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "54%" }}>工人（人）</p> |
|||
<p style={{ width: "25%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "73%" }}>公益岗位（人）</p> |
|||
{/* <p style={{ width: "20%", fontSize: "12px", color: "#FFFFFF", height: "100%", textAlign: "center", position: "absolute", lineHeight: "3vh", left: "82%" }}>桥梁（座）</p> */} |
|||
</div> |
|||
<Lun |
|||
content={renderBody()} |
|||
containerStyle={{ position: "relative", height: "80%", width: "100%", left: "5%", top: "8%" }} |
|||
divHeight={"100%"} |
|||
divId={"screen-slope-midde-tops"} |
|||
/> |
|||
</> |
|||
) |
|||
} |
|||
export default Lefttbottoms |
|||
Loading…
Reference in new issue