Compare commits

...

2 Commits

  1. 63
      web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
  2. 623
      web/client/src/sections/quanju/containers/footer/build/style.less
  3. 9
      web/client/src/sections/quanju/containers/footer/guanli/index.js
  4. 4
      web/client/src/sections/quanju/containers/footer/guanli/style.less

63
web/client/src/sections/quanju/containers/footer/build/Rightbottom.js

@ -1,25 +1,26 @@
import './style.less'
import { Col, Progress, Row } from 'antd';
import React, { useEffect, useRef } from 'react';
import React, { useEffect, useRef, useState } from 'react';
// import ReactEcharts from 'echarts-for-react';
import * as echarts from 'echarts';
function Rightbottom (props) {
const { width, height, total, data, text } = props
const chartRef = useRef(null);
const [shuzu, setShuzu] = useState()
let colorList = [
"rgba(7,185,254,1)",
// "rgba(7,185,254,1)",
"rgba(28,96,254,1)",
"rgba(4,251,240,1)",
"rgba(255,194,20,1)",
'rgba(255,255,255,1)'
// "rgba(255,194,20,1)",
// 'rgba(255,255,255,1)'
]
let underColorList = [
"rgba(7,185,254,0.5)",
// "rgba(7,185,254,0.5)",
"rgba(28,96,254,0.5)",
"rgba(4,251,240,0.5)",
"rgba(255,194,20,0.5)",
'rgba(255,255,255,0.5)',
// "rgba(255,194,20,0.5)",
// 'rgba(255,255,255,0.5)',
]
let name = [], emptyName = []
// const name = data?.map(d)
@ -34,7 +35,6 @@ function Rightbottom (props) {
// ]
const rightLegend = ['一级公路', '二级公路', '三级公路', '四级公路', '等外公路']
// const rightLegend = ['三级及以上','四级']
// let data=[
// {name: "四级公路", value: 2969},
// {name: "等外公路", value: 171},
@ -63,6 +63,19 @@ function Rightbottom (props) {
value: d.value
})
})
let siji = dataq.map((item, index) => {
if (item.name == "四级公路" || item.name == "等外公路") {
return item.value
}
})
let sanji = dataq.map((item, index) => {
if (item.name == "三级公路" || item.name == "二级公路" || item.name == "一级公路") {
return item.value
}
})
let dataAll = [{ name: '四级', value: siji[0] + siji[1] }, { name: '三级及以上', value: sanji[2] + sanji[3] + sanji[4] }]
console.log(dataAll);
const chartTitle = '道路总公里';
const title = '基础设施安全监测版块';
// const number = 2738;
@ -149,7 +162,7 @@ function Rightbottom (props) {
label: {
show: false
},
data: dataq,
data: dataAll,
},
],
};
@ -186,7 +199,7 @@ function Rightbottom (props) {
// myChart.onChartReady = (instance) => {
// chartRef.current.safetyChart = instance;
// }
// myChart.setOption(option);
myChart.setOption(option);
return () => {
// clearInterval(changePieInterval)
}
@ -194,18 +207,36 @@ function Rightbottom (props) {
return (
<div className='build-right-bottom'>
<div className='build-right-bottom-item1'>
<div>
<span />
<span className='sanji'><i style={{color: 'rgba(28,96,254,1)'}}>&#9658;</i>&nbsp;</span>
</div>
<div>{sanji[2] + sanji[3] + sanji[4]}</div>
</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>{total || 0}</h2>
<span>道路总公里</span>
<h2>{siji[0] + siji[1]+sanji[2] + sanji[3] + sanji[4] || 0}</h2>
<span>路段总数</span>
</div>
<div className='img1'>
{/* <div className='img1'>
<img src='/assets/images/quanju/all.png' />
</div>
<div className='img2'>
</div> */}
<div className='img'>
<img src='/assets/images/quanju/chart-circle.png' />
</div>
<div ref={chartRef} style={{ width: width || "70%", height: height || "90%" }} id="ech"></div>
<div /* ref={chartRef} */ style={{ width: width || "70%", height: height || "90%"}} /* id="ech" */>
<div ref={chartRef} style={{ width: "65%", height: "90%"}} id="ech"></div>
<div className='build-right-bottom-item2'>
<div>
<span />
<span className='siji'><i style={{color:"rgba(4,251,240,1)"}}>&#9658;</i>&nbsp;</span>
</div>
<div>{siji[0] + siji[1]}</div>
</div>
</div>
</div>
);
}

623
web/client/src/sections/quanju/containers/footer/build/style.less

@ -1,64 +1,71 @@
@media screen and (max-width:1367px){
html{
@media screen and (max-width:1367px) {
html {
font-size: 10px;
}
}
// .bgbuild{
// // box-sizing: border-box;
// padding: 0 15px 0 15px;
// width: 100%;
// height: 100%;
// // display: flex;
// position: relative;
// justify-content: space-between;
.bgbuild-left{
position: absolute;
left: 0;
width: 25%;
// // box-sizing: border-box;
// padding: 0 15px 0 15px;
// width: 100%;
// height: 100%;
// // display: flex;
// position: relative;
// justify-content: space-between;
.bgbuild-left {
position: absolute;
left: 0;
width: 25%;
height: 100%;
.build-left-top {
height: 100%;
.build-left-top{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.build-left-top-center {
width: 100%;
height: 100%;
margin: 0 10px;
}
.build-left-top-item {
width: 25%;
height: 50%;
// background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
background-size: 95%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
.build-left-top-center{
width: 100%;
height: 100%;
margin: 0 10px;
}
.build-left-top-item{
width: 25%;
height: 50%;
// background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
background-size: 95%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
float: left;
// text-align: center;
div{
&:nth-child(1){
// width: 80%;
// height: 100%;
// margin: 1% auto 0;
font-size: 2.375rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
text-align: center;
// line-height: 49px;
text-shadow: 0px 2px 4px #1C60FE;
position: absolute;
float: left;
}
&:nth-child(2){
display: flex;
// text-align: center;
div {
&:nth-child(1) {
// width: 80%;
// height: 100%;
// margin: 1% auto 0;
font-size: 2.375rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
text-align: center;
// line-height: 49px;
text-shadow: 0px 2px 4px #1C60FE;
}
&:nth-child(2) {
display: flex;
justify-content: center;
align-items: center;
span{
&:nth-child(1){
span {
&:nth-child(1) {
font-size: 1rem;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
@ -67,62 +74,96 @@
}
}
}
}
}
}
.build-left-center{
}
.build-left-center {
width: 100%;
height: 100%;
.build-left-center-top {
width: 100%;
height: 100%;
height: 30%;
display: flex;
justify-content: space-between;
.build-left-center-top{
width: 100%;
height: 30%;
div {
width: 50%;
height: 100%;
display: flex;
justify-content: space-between;
div{
width: 50%;
height: 100%;
justify-content: center;
align-items: center;
img {
// height: 15%;
width: 25%;
}
div {
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
align-items: center;
img{
// height: 15%;
width: 25%;
margin-left: 10px;
}
div{
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
margin-left: 10px;
span{
&:nth-child(1){
font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #C2EEFF;
letter-spacing: 1px;
}
&:nth-child(2){
font-size: 1.75rem;
span {
&:nth-child(1) {
font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #C2EEFF;
letter-spacing: 1px;
}
&:nth-child(2) {
font-size: 1.75rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
// line-height: 36px;
text-shadow: 0px 0px 4px #07B9FE;
}
}
}
}
// background-color: pink;
}
.build-left-center-titile{
// background-color: pink;
}
.build-left-center-titile {
display: flex;
margin-bottom: 10px;
span {
flex: 1;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 16px;
}
}
.build-left-center-content {
// width: 100%;
// height:40%;
.build-left-center-item {
display: flex;
margin-bottom: 10px;
span{
flex:1;
width: 100%;
height: 28px;
align-items: center;
&:hover {
background: linear-gradient(270deg, rgba(0, 124, 230, 0) 0%, rgba(0, 70, 200, 0.8700) 100%);
}
span {
flex: 1;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
@ -131,88 +172,77 @@
line-height: 16px;
}
}
.build-left-center-content{
// width: 100%;
// height:40%;
.build-left-center-item{
display: flex ;
width: 100%;
height: 28px;
align-items: center;
&:hover{
background: linear-gradient(270deg, rgba(0,124,230,0) 0%, rgba(0,70,200,0.8700) 100%);
}
span{
flex:1;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 16px;
}
}
// .slick-list{
// height: 128px !important;
// }
}
// .slick-list{
// height: 128px !important;
// }
}
.build-left-bottom{
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.build-left-bottom-title{
}
.build-left-bottom {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.build-left-bottom-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
left: 15%;
top:38%;
h2{
font-size: 1.25rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
line-height: 1.625rem;
text-shadow: 0px 0px 0.25rem #1C60FE;
}
span{
font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E9F7FF;
}
}
img{
width: 19%;
position: absolute;
left: 16%;
top:29%
left: 15%;
top: 38%;
h2 {
font-size: 1.25rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
line-height: 1.625rem;
text-shadow: 0px 0px 0.25rem #1C60FE;
}
span {
font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E9F7FF;
}
}
img {
width: 19%;
position: absolute;
left: 16%;
top: 29%
}
}
.bgbuild-right{
position: absolute;
right: 0;
width: 25%;
}
.bgbuild-right {
position: absolute;
right: 0;
width: 25%;
height: 100%;
.build-right-top {
width: 100%;
height: 100%;
.build-right-top{
width: 100%;
height: 100%;
padding: 0 10px;
video{
padding: 0 10px;
video {
width: 100%;
height: 17vh;
// margin-bottom: 5%;
}
h2{
}
h2 {
height: 25%;
width: 100%;
padding-left: 0.9375rem;
@ -224,86 +254,233 @@
line-height: 31px;
background-image: url('/assets/images/quanju/bgxuanchuanlan.png');
background-size: 100% 100%;
}
}
.build-right-center{
width: 100%;
height: 100%;
}
.build-right-center {
width: 100%;
height: 100%;
// background-color: pink;
.build-right-center-top{
width: 100%;
height: 30%;
display: flex;
justify-content: space-around;
align-items: center;
img{
width:14% ;
// height: 80%;
}
div{
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #C2EEFF;
transform: translateX(-1.5rem);
// line-height: 22px;
letter-spacing: 0.0625rem;
}
h2{
font-size: 1.75rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
margin-bottom : 0!important;
text-shadow: 0px 0px 0.25rem #07B9FE;
}
}
}
.build-right-bottom{
.build-right-center-top {
width: 100%;
height: 100%;
height: 30%;
display: flex;
justify-content: space-around;
align-items: center;
img {
width: 14%;
// height: 80%;
}
div {
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #C2EEFF;
transform: translateX(-1.5rem);
// line-height: 22px;
letter-spacing: 0.0625rem;
}
h2 {
font-size: 1.75rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
margin-bottom: 0 !important;
text-shadow: 0px 0px 0.25rem #07B9FE;
}
}
}
.build-right-bottom {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.build-right-bottom-title {
display: flex;
flex-direction: column;
// align-items: center;
justify-content: center;
position: absolute;
align-items: center;
position: relative;
.build-right-bottom-title{
display: flex;
flex-direction: column;
// align-items: center;
justify-content: center;
position: absolute;
align-items: center;
left: 15%;
top:38%;
h2{
font-size: 1.25rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
line-height: 1.625rem;
text-shadow: 0px 0px 0.25rem #1C60FE;
}
span{
font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E9F7FF;
}
}
.img1{
width: 35%;
position: absolute;
left: 30%;
top:5%;
}
.img2{
width: 40%;
left: 44%;
top: 35%;
h2 {
font-size: 1.25rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
line-height: 1.625rem;
text-shadow: 0px 0px 0.25rem #1C60FE;
}
span {
font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E9F7FF;
}
}
.img {
width: 25%;
position: absolute;
left: 38%;
top: 20%;
}
#ech {
position: absolute;
left: 34%;
display: flex;
text-align: center;
}
.build-right-bottom-item1 {
width: 25%;
height: 50%;
background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
background-size: 95%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
// justify-content: left;
// align-items: center;
position: absolute;
// float: left;
left: 30px;
margin-top: -10px;
// text-align: center;
div {
&:nth-child(1) {
display: flex;
justify-content: center;
align-items: center;
.sanji {
position: absolute;
left: 40%;
top:5%;
z-index: 10;
left: 1px;
top: 20px;
width: 80px;
height: 22px;
display: inline-block;
overflow-wrap: break-word;
color: rgba(233, 247, 255, 1);
font-size: 16px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 22px;
text-align: left;
}
// span{
// &:nth-child(1){
// width: 0.5rem;
// height: 0.5rem;
// margin-right: 5px;
// background: #07B9FE;
// clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
// transform: rotate(134deg);
// }
// &:nth-child(2){
// font-size: 1rem;
// font-family: PingFangSC-Regular, PingFang SC;
// font-weight: 400;
// }
// }
// span{
// &:nth-child(2){
// // line-height: 22px;
// }
// }
}
&:nth-child(2) {
width: 112px;
height: 49px;
display: inline-block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 38px;
font-family: YouSheBiaoTiHei;
white-space: nowrap;
line-height: 49px;
text-align: left;
text-shadow: 0px 2px 4px rgba(28, 96, 254, 1);
text-align: center;
// line-height: 49px;
margin-top: 60px;
}
}
}
}
.build-right-bottom-item2 {
width: 25%;
height: 50%;
background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
background-size: 95%;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
// justify-content: left;
// align-items: center;
// position: absolute;
float: right;
margin-right: 10px;
margin-top: 50px;
margin-right: 20px;
div {
&:nth-child(1) {
display: flex;
justify-content: center;
align-items: center;
.siji {
left: 10px;
top: 30px;
width: 32px;
height: 22px;
display: inline-block;
overflow-wrap: break-word;
color: rgba(233, 247, 255, 1);
font-size: 16px;
font-family: PingFangSC-Regular;
white-space: nowrap;
line-height: 22px;
text-align: left;
margin-top: 20px;
margin-right: 20px;
}
}
&:nth-child(2) {
width: 112px;
height: 49px;
display: inline-block;
overflow-wrap: break-word;
color: rgba(255, 255, 255, 1);
font-size: 38px;
font-family: YouSheBiaoTiHei;
white-space: nowrap;
line-height: 49px;
text-align: left;
text-shadow: 0px 2px 4px rgba(28, 96, 254, 1);
text-align: center;
// line-height: 49px;
margin-top: 20px;
}
}
}
}
}

9
web/client/src/sections/quanju/containers/footer/guanli/index.js

@ -59,8 +59,9 @@ const Guanli = (props) => {
// );
const renderContent = () => {
// console.log(rightitemlist);
return <div style={{height:"100%"}}>
{rightitemlist && rightitemlist.length!==0?rightitemlist?.map(({ id, licensePlate, overrunRate,fine,processingTime,deductPoints }, index) => {
{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'>
@ -75,7 +76,7 @@ const Guanli = (props) => {
</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: "#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>
@ -129,9 +130,9 @@ const Guanli = (props) => {
<span>处罚</span>
<span>处理日期</span>
</div>
{rightitemlist && rightitemlist.length!==0?<div><AutoRollComponent content={renderContent()}
{rightitemlist && rightitemlist.length!==0?<AutoRollComponent content={renderContent()}
containerStyle={{ position: "relative", height: "90%", }}
divHeight={"100%"} divId={"chart-overview-deviceList"} /></div>:<NoData style={{height:"70%"}}/>}
divHeight={"100%"} divId={"chart-overview-deviceList"} />:<NoData style={{height:"70%"}}/>}
</Module>
</div>
</>

4
web/client/src/sections/quanju/containers/footer/guanli/style.less

@ -281,7 +281,9 @@
min-height: 0 !important;
background-color: rgba(0, 0, 0, 0) !important;
}
.ant-tooltip-arrow{
display: none;
}
// .ant-popover-arrow {
// .ant-popover-arrow-content {
// display: none;

Loading…
Cancel
Save