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