free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

(*)更新

dev
yangsen 2 years ago
parent
717f761285
commit
dbd78c882f
4 changed files with 84 additions and 84 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
  2. 2
      web/client/src/sections/quanju/containers/footer/build/index.js
  3. 2
      web/client/src/sections/quanju/containers/footer/build/style.less
  4. 160
      web/client/src/sections/quanju/containers/footer/guanli/index.js

4
web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
View File

@ -217,8 +217,8 @@ function Rightbottom (props) {
</div>
{/* <span style={{position:"absolute",width:"10%",color:"#FFF",backgroundColor:'rgba(216, 240, 255, 0.1)',right:"5%",textAlign:"center",top:0}}>段</span> */}
<div className='build-right-bottom-title'>
<h2>{siji[0] + siji[1]+sanji[2] + sanji[3] + sanji[4] || 0}</h2>
<span>路段总数</span>
<h2>{total || 0}</h2>
<span>道路总公里</span>
</div>
{/* <div className='img1'>
<img src='/assets/images/quanju/all.png' />

2
web/client/src/sections/quanju/containers/footer/build/index.js
View File

@ -170,7 +170,7 @@ const Build = (props) => {
</div> : <NoData />}
</div>
</Module>
<Module title={"各乡镇已建道路统计"} style={{
<Module title={"各乡镇现有道路统计"} style={{
width: "100%",
height: " 33%", marginTop: '3%'
}} customize={true}>

2
web/client/src/sections/quanju/containers/footer/build/style.less
View File

@ -309,7 +309,7 @@
justify-content: center;
position: absolute;
align-items: center;
left: 44%;
left: 40%;
top: 35%;
h2 {

160
web/client/src/sections/quanju/containers/footer/guanli/index.js
View File

@ -1,42 +1,42 @@
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Carousel,Tooltip } from 'antd'
import { Carousel, Tooltip } from 'antd'
import AutoRollComponent from '../build/AutoRollComponent'
import Module from '../../public/module'
import LeftItem from './LeftItem'
import {getjiandmanage,getjiandetail} from '../../../actions/example'
import { getjiandmanage, getjiandetail } from '../../../actions/example'
import './style.less'
import NoData from '../../public/noData';
const Guanli = (props) => {
const {dispatch} = props
const [leftDatas,setleftDatas] = useState([])
const [rightDatas,setrightDatas] = useState([])
const [rightitemlist,setrightitemlist] = useState()
const requestleftDatas = async()=>{
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)=>{
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 data_string = (str) => {
str.match('/([^.]*)$/g')
}
const requestRightDatas = async()=>{
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)=>{
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){
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,'好评')
@ -49,96 +49,96 @@ const Guanli = (props) => {
// console.log(d2,'完美')
// console.log(res.payload.data,'嘿嘿嘿')
}
useEffect(()=>{
useEffect(() => {
requestleftDatas();
requestRightDatas()
},[])
}, [])
// let datalist = newArry(30)
// datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"})
// const content = (
// );
const renderContent = () => {
// console.log(rightitemlist);
return <div style={{height:"100%"}}>
{rightitemlist && rightitemlist.length!==0?rightitemlist?.map(({ id, licensePlate, overrunRate,fine,processingTime,deductPoints,nameOfInspectionPoint }, index) => {
if(index<120){
return <div key={index} className='guanli-right-item'>
<div className='popover'>
<Tooltip title={ <div className='popover-content'>
<div style={{ width: "100%", height: "100%", marginTop: "0"}}>
return <div style={{ height: "100%" }}>
{rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ id, licensePlate, overrunRate, fine, processingTime, deductPoints, nameOfInspectionPoint }, 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" }}>
{/* <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" }}>{overrunRate?overrunRate:0}{/* {item.overrunRate ? item.overrunRate + "%" : "--"} */}</p>
<p style={{ color: "#09BAFF", position: "absolute", top: "42%", left: "27%", fontSize: "29px", fontFamily: "YouSheBiaoTiHei" }}>{overrunRate ? overrunRate.toFixed(2) : 0}%{/* {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%", top:'5px'}}>
<div style={{ position: "absolute", top: "0", width: "50%", left: "50%", top: '5px' }}>
<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" }}>{licensePlate}{/* {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: "33px", fontFamily: " PingFangSC-Medium, PingFang SC"}}>{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" }}>{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}{/* {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: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{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" }}>{deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""}{/* {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" }}>{processingTime}{/* {item.processingTime ? item.processingTime : "--"} */}</span></p>
</div>
</div>
</div>}
placement="leftTop"
overlayStyle={{ minWidth:400, minHeight: 212,padding:0,margin:0,backgroundImage:`url(../../../../../assets/images/leadership/beijinglan.png)`}}
overlayClassName='popover'
>
<span>{licensePlate}</span>
<span>{overrunRate}%</span>
<span>{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}</span>
<span>{processingTime}</span>
</Tooltip>
</div>
</div>
}
}):""}
</div>
</div>}
placement="leftTop"
overlayStyle={{ minWidth: 400, minHeight: 212, padding: 0, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }}
overlayClassName='popover'
>
<div style={{ width: '100%', height: '100%', display: 'flex' }}>
<span>{licensePlate}</span>
<span>{overrunRate}%</span>
<span>{deductPoints ? `-${deductPoints}分` : ""}和-{fine}{fine ? "元" : ""}</span>
<span>{processingTime}</span>
</div>
</Tooltip>
</div>
}
}) : ""}
</div>
}
const renderLeftContent = ()=>{
}
const renderLeftContent = () => {
// setleftDatas(leftDatas=>leftDatas.sort((a,b)=>b.total - a.total))
return leftDatas && leftDatas.length!==0?leftDatas.map((item,index)=>
return leftDatas && leftDatas.length !== 0 ? leftDatas.map((item, index) =>
<LeftItem key={index} datas={item}></LeftItem>
):""
) : ""
}
// renderContent()
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>
</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 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>
</div>
<div className='guanli-right-title'>
<span>车牌号</span>
<span>超限</span>
<span>处罚</span>
<span>处理日期</span>
<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>
{rightitemlist && rightitemlist.length !== 0 ? <AutoRollComponent content={renderContent()}
containerStyle={{ position: "relative", height: "90%", }}
divHeight={"100%"} divId={"chart-overview-deviceList"} /> : <NoData style={{ height: "70%" }} />}
</Module>
</div>
{rightitemlist && rightitemlist.length!==0?<AutoRollComponent content={renderContent()}
containerStyle={{ position: "relative", height: "90%", }}
divHeight={"100%"} divId={"chart-overview-deviceList"} />:<NoData style={{height:"70%"}}/>}
</Module>
</div>
</>
)
}
function mapStateToProps(state) {
function mapStateToProps (state) {
const { auth, depMessage } = state;
const pakData = (dep) => {
return dep.map((d) => {

Write Preview
Loading…
Cancel
Save