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

Compare commits

base: free-sun:92d15e51c350664c5ef95595802fdb60627d0837
Branches Tags
free-sun:dev
free-sun:master
free-sun:release_0.0.1
free-sun:release_0.0.4
...
compare: free-sun:cb765f028dbe2a4463e9967508a3725a1ca353ad
Branches Tags
free-sun:dev
free-sun:master
free-sun:release_0.0.1
free-sun:release_0.0.4

3 Commits
92d15e51c3 ... cb765f028d

Author SHA1 Message Date
yangsen cb765f028d 治超详情
2 years ago
yangsen 4c64617822 Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev
2 years ago
yangsen 8fef35340c 治超详情
2 years ago
8 changed files with 2643 additions and 422 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
  1. 6
      api/log/development.log
  2. BIN
      web/client/assets/images/quanju/all.png
  3. 125
      web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
  4. 6
      web/client/src/sections/quanju/containers/footer/build/index.js
  5. 16
      web/client/src/sections/quanju/containers/footer/build/style.less
  6. 46
      web/client/src/sections/quanju/containers/footer/guanli/index.js
  7. 271
      web/client/src/sections/quanju/containers/footer/guanli/style.less
  8. 2147
      web/log/development.txt

6
api/log/development.log
View File

@ -10815,4 +10815,10 @@ headers: {}
2022-07-30 17:48:40.061 - debug: [FS-LOGGER] Init.
2022-07-30 17:48:40.152 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-07-30 17:48:40.152 - info: [FS-AUTH] Inject auth and api mv into router.
<<<<<<< Updated upstream
>>>>>>> d8f96cea72338cf7a61dea293bd6d0cd5da48bb0
=======
2022-08-11 09:02:08.616 - debug: [FS-LOGGER] Init.
2022-08-11 09:02:08.699 - info: [FS-ATTACHMENT] Inject attachment mw into router.
2022-08-11 09:02:08.699 - info: [FS-AUTH] Inject auth and api mv into router.
>>>>>>> Stashed changes

BIN
web/client/assets/images/quanju/all.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 35 KiB

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

@ -4,8 +4,8 @@ import { Col, Progress, Row } from 'antd';
import React, { useEffect, useRef } from 'react';
// import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
function Rightbottom(props) {
const { width, height, total,data, text } = props
function Rightbottom (props) {
const { width, height, total, data, text } = props
const chartRef = useRef(null);
let colorList = [
"rgba(7,185,254,1)",
@ -33,23 +33,29 @@ function Rightbottom(props) {
// ]
const rightLegend = ['一级公路', '二级公路', '三级公路','四级公路','等外公路']
// let data=[
// {name: "四级公路", value: 2969},
// {name: "等外公路", value: 171},
// {name: "三级公路", value: 103},
// {name: "二级公路", value: 15},
// ]
// console.log(data.map(i=>i.name),'jjj')
let dataq = rightLegend.map((item,index)=>{
if(data.map(i=>i.name).includes(item)){
return {name:item,value:data.filter(i1=>i1.name===item)[0].value}
}else{
return {name:item,value:0}
const rightLegend = ['一级公路', '二级公路', '三级公路', '四级公路', '等外公路']
// const rightLegend = ['三级及以上','四级']
// let data=[
// {name: "四级公路", value: 2969},
// {name: "等外公路", value: 171},
// {name: "三级公路", value: 103},
// {name: "二级公路", value: 15},
// ]
// console.log(data.map(i=>i.name),'jjj')
console.log(data);
let dataq = rightLegend.map((item, index) => {
console.log(item, index);
if (data.map(i => i.name).includes(item)) {
console.log(item);
console.log(1);
return { name: item, value: data.filter(i1 => i1.name === item)[0].value }
} else {
console.log(2);
return { name: item, value: 0 }
}
})
console.log(dataq,'数据')
dataq?.sort((a,b)=>b.value - a.value)
})
console.log(dataq, '数据')
dataq?.sort((a, b) => b.value - a.value)
dataq?.forEach(d => {
name.push(d.name)
emptyName.push({
@ -76,39 +82,39 @@ let dataq = rightLegend.map((item,index)=>{
},
formatter: (values) => `${values.seriesName}<br /> ${values.marker} ${values.name}<b>${values.value}</b>段`,
},
legend: {
orient: "vertical",
itemWidth: 10,
itemHeight: 10,
// right: '30%',
left: '50%',
top: 'center',
align: 'left',
data: name,
formatter: (name) => {
for (let i = 0; i < option.series[1].data.length; i += 1) {
if (name === option.series[1].data[i].name) {
let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`]
return arr.join('\t');
}
}
},
textStyle: {
rich: {
a: {
color: '#E9F7FF',
fontSize: 14,
padding:[0,10]
},
b: {
fontSize: 16,
fontFamily: 'YouSheBiaoTiHei',
color: '#fff',
padding:[0,0,0,15]
},
}
}
},
// legend: {
// orient: "vertical",
// itemWidth: 10,
// itemHeight: 10,
// // right: '30%',
// left: '50%',
// top: 'center',
// align: 'left',
// data: name,
// formatter: (name) => {
// for (let i = 0; i < option.series[1].data.length; i += 1) {
// if (name === option.series[1].data[i].name) {
// let arr = [`{a|${name}}`, `{b|${option.series[1].data[i].value}}`]
// return arr.join('\t');
// }
// }
// },
// textStyle: {
// rich: {
// a: {
// color: '#E9F7FF',
// fontSize: 14,
// padding:[0,10]
// },
// b: {
// fontSize: 16,
// fontFamily: 'YouSheBiaoTiHei',
// color: '#fff',
// padding:[0,0,0,15]
// },
// }
// }
// },
grid: {
left: '10%'
},
@ -180,20 +186,25 @@ let dataq = rightLegend.map((item,index)=>{
// myChart.onChartReady = (instance) => {
// chartRef.current.safetyChart = instance;
// }
myChart.setOption(option);
return ()=>{
// myChart.setOption(option);
return () => {
// clearInterval(changePieInterval)
}
}, [data]);
}, [data]);
return (
<div className='build-right-bottom'>
<span style={{position:"absolute",width:"10%",color:"#FFF",backgroundColor:'rgba(216, 240, 255, 0.1)',right:"5%",textAlign:"center",top:0}}>段</span>
{/* <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>{total||0}</h2>
<h2>{total || 0}</h2>
<span>道路总公里</span>
</div>
<img src='/assets/images/quanju/chart-circle.png'></img>
<div className='img1'>
<img src='/assets/images/quanju/all.png' />
</div>
<div className='img2'>
<img src='/assets/images/quanju/chart-circle.png' />
</div>
<div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
</div>
);

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

@ -143,7 +143,7 @@ const Build = (props) => {
return (
<>
<div className='bgbuild-left'>
<Module title={"各乡镇在建公路工程"} style={{
<Module title={"在建公路工程"} style={{
width: "100%",
height: " 33%"
}} customize={true}>
@ -160,11 +160,11 @@ const Build = (props) => {
</div> */}
<img src='/assets/images/quanju/yuanhuan.webp' className='build-left-top-center' />
<div className='build-left-top-item'>
<div>{buildingnumber?.buildedRoad || 0}</div>
<div>{sunonlineproject || 0}</div>
<div>
{/* <i>&#9658;</i> */}
{/* <span /> */}
<span>在建公路/公里</span>
<span>在建数量</span>
</div>
</div>
</div> : <NoData />}

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

@ -288,12 +288,20 @@
color: #E9F7FF;
}
}
img{
width: 19%;
.img1{
width: 35%;
position: absolute;
left: 16%;
top:29%
left: 30%;
top:5%;
}
.img2{
width: 40%;
position: absolute;
left: 40%;
top:5%;
z-index: 10;
}
}
}

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

@ -1,6 +1,6 @@
import React, { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Carousel,Popover } from 'antd'
import { Carousel,Tooltip } from 'antd'
import AutoRollComponent from '../build/AutoRollComponent'
import Module from '../../public/module'
import LeftItem from './LeftItem'
@ -55,30 +55,42 @@ const Guanli = (props) => {
},[])
// let datalist = newArry(30)
// datalist.fill({licensePlate:"赣A44454",overrunRate:"30%",fine:"200元",processingTime:"2020年4月1日"})
const content = (
<div className='popover-content'>
<img src='/assets/images/quanju/zhichao.png'/>
<div className='address'>
<span>检测点</span>
<span>远不</span>
<span>地址</span>
<span>呼呼呼呼呼呼呼呼呼</span>
</div>
</div>
);
// const content = (
// );
const renderContent = () => {
return <div style={{height:"100%"}} >
return <div style={{height:"100%"}}>
{rightitemlist && rightitemlist.length!==0?rightitemlist?.map(({ id, licensePlate, overrunRate,fine,processingTime,deductPoints }, index) => {
if(index<120){
return <div key={index} className='guanli-right-item'>
<div className='popover' style={{background:'pink'}}>
{/* <Popover content={content}> */}
<div className='popover'>
<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: "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'}}>
<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: "30px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>123456</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>
{/* </Popover> */}
</Tooltip>
</div>
</div>
}

271
web/client/src/sections/quanju/containers/footer/guanli/style.less
View File

@ -1,22 +1,24 @@
@media screen and (max-width:1366px){
html{
@media screen and (max-width:1366px) {
html {
font-size: 12px;
}
}
// .guanli{
// // box-sizing: border-box;
// padding: 0 15px 0 15px;
// width: 100%;
// height: 100%;
// position: relative;
// display: flex;
// justify-content: space-between;
.guanli-left{
// display: flex;
// justify-content: space-between;
.guanli-left {
width: 25%;
height: 100%;
position: absolute;
left: 0;
.guanli-left-item{
.guanli-left-item {
box-sizing: border-box;
width: 85%;
position: relative;
@ -27,20 +29,23 @@
align-items: center;
padding: 0 10%;
justify-content: space-between;
border: 2px solid rgba(28,96,254,0.5000);
.guanli-left-item-left{
border: 2px solid rgba(28, 96, 254, 0.5000);
.guanli-left-item-left {
width: 45%;
height: 60%;
display: flex;
flex-direction: column;
align-items: center;
span{
span {
font-size: 1.25rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(216,240,255,0.8000);
color: rgba(216, 240, 255, 0.8000);
}
div{
div {
display: flex;
justify-content: center;
// align-items: ;
@ -52,28 +57,32 @@
background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat;
background-size: 100% 80%;
background-position: center bottom;
span{
span {
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
padding-top: 10%;
margin-left: 5px;
// height: 0;
color: rgba(216,240,255,0.8000);
color: rgba(216, 240, 255, 0.8000);
}
}
// background-color: pink;
}
.guanli-left-item-right{
.guanli-left-item-right {
width: 40%;
height: 50%;
position: relative;
span{
span {
position: absolute;
width: 8px;
height: 8px;
background-color: #fff;
top:1.5%;
top: 1.5%;
left: 50%;
z-index: 10;
border-radius: 4px;
@ -82,71 +91,81 @@
// background-color: pink;
}
// background-color: pink;
}
}
.guanli-right{
}
.guanli-right {
width: 25%;
height: 100%;
position: absolute;
right: 0;
.guanli-right-top{
.guanli-right-top {
width: 100%;
// height: 5%;
display: flex;
justify-content: flex-end;
align-items: center;
padding-right: 10px;
img{
img {
width: 4%;
// height: 40%;
}
span{
&:nth-child(2){
span {
&:nth-child(2) {
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(216,240,255,0.8000);
margin:0 10px 0 2px
color: rgba(216, 240, 255, 0.8000);
margin: 0 10px 0 2px
}
&:nth-child(3){
&:nth-child(3) {
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
margin-right: 10px;
}
&:nth-child(4){
&:nth-child(4) {
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(216,240,255,0.8000);
color: rgba(216, 240, 255, 0.8000);
}
}
}
.guanli-right-title{
.guanli-right-title {
width: 90%;
height: 5%;
margin: auto;
display: flex;
align-items: center;
justify-content: space-around;
background: rgba(21,77,160,0.2000);
span{
background: rgba(21, 77, 160, 0.2000);
span {
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
flex:1;
flex: 1;
text-align: center;
// &:nth-child(1){
// }
}
}
.guanli-right-item{
.guanli-right-item {
width: 90%;
// height: 4%;
height: 3vh;
@ -154,99 +173,129 @@
display: flex;
align-items: center;
justify-content: space-around;
&:hover{
background:linear-gradient(270deg, rgba(0,124,230,0) 0%, rgba(0,70,200,0.8700) 100%);
&:hover {
background: linear-gradient(270deg, rgba(0, 124, 230, 0) 0%, rgba(0, 70, 200, 0.8700) 100%);
}
// background: rgba(21,77,160,0.2000);
span{
span {
font-size: 0.875rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: rgba(216,240,255,0.8000);
color: rgba(216, 240, 255, 0.8000);
line-height: 20px;
flex:1;
flex: 1;
text-align: center;
// &:nth-child(1){
// }
}
}
}
}
.popover-content{
background-color: red;
.address{
width: 80%;
height: 80%;
top: -1%;
position: absolute;
background-color: aqua;
span{
&:nth-child(1){
width: 42px;
height: 20px;
display: inline-block;
overflow-wrap: break-word;
color: rgba(216, 240, 255, 0.8);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
&:nth-child(2){
width: 28px;
height: 20px;
display: inline-block;
overflow-wrap: break-word;
color: rgba(238, 244, 255, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 20px;
text-align: left;
}
&:nth-child(3){
width: 28px;
height: 20px;
display: inline-block;
overflow-wrap: break-word;
color: rgba(216, 240, 255, 0.8);
font-size: 14px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 20px;
text-align: right;
}
&:nth-child(4){
width: 126px;
height: 20px;
display: inline-block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 14px;
font-family: PingFangSC-Medium;
white-space: nowrap;
line-height: 20px;
text-align: right;
}
}
}
.popover-content {
// background-color: red;
// .ant-popover-inner-content{
// padding: 0!important;
// }
// .address {
// width: 80%;
// height: 80%;
// top: 10%;
// position: absolute;
// // background-color: pink;
// .address1 {
// width: 194px;
// height: 20px;
// margin: 16px 0 24px 26px;
// span {
// &:nth-child(1) {
// margin-right: 20px;
// width: 42px;
// height: 20px;
// display: inline-block;
// overflow-wrap: break-word;
// color: rgba(216, 240, 255, 0.8);
// font-size: 14px;
// font-family: PingFangSC-Regular;
// white-space: nowrap;
// line-height: 20px;
// text-align: left;
// }
// &:nth-child(2) {
// width: 28px;
// height: 20px;
// display: inline-block;
// overflow-wrap: break-word;
// color: rgba(238, 244, 255, 1);
// font-size: 14px;
// font-family: PingFangSC-Medium;
// white-space: nowrap;
// line-height: 20px;
// text-align: left;
// }
// }
// }
// .address2 {
// width: 194px;
// height: 20px;
// margin: 16px 0 24px 26px;
// span {
// &:nth-child(1) {
// margin-right: 35px;
// width: 28px;
// height: 20px;
// display: inline-block;
// overflow-wrap: break-word;
// color: rgba(216, 240, 255, 0.8);
// font-size: 14px;
// font-family: PingFangSC-Regular;
// white-space: nowrap;
// line-height: 20px;
// text-align: right;
// }
// &:nth-child(2) {
// width: 126px;
// height: 20px;
// display: inline-block;
// overflow-wrap: break-word;
// color: rgba(255, 255, 255, 1);
// font-size: 14px;
// font-family: PingFangSC-Medium;
// white-space: nowrap;
// line-height: 20px;
// text-align: right;
// }
// }
// }
// }
}
.popover{
background-color: aqua;
.ant-popover-arrow{
.ant-popover-arrow-content{
display:none;
}
span{
display:none;
}
}
.ant-popover-inner{
.ant-popover-inner-content{
padding: 0;
}
.popover {
.ant-tooltip-inner{
min-width: 0 !important;
min-height: 0 !important;
background-color: rgba(0, 0, 0, 0) !important;
}
// .ant-popover-arrow {
// .ant-popover-arrow-content {
// display: none;
// }
// span {
// display: none;
// }
// }
// .ant-popover-inner {
// .ant-popover-inner-content {
// padding: 0;
// }
// }
// .ant-popover-inner{padding:0 !important;}
}

2147
web/log/development.txt
View File

File diff suppressed because it is too large
Write Preview
Loading…
Cancel
Save