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

Compare commits

base: free-sun:354784e6a2dec1044c8086a78d0df876917d22b5
Branches Tags
free-sun:dev
free-sun:master
free-sun:release_0.0.1
free-sun:release_0.0.4
...
compare: free-sun:717f761285c41ce3dd10e262fb7b0033b00918de
Branches Tags
free-sun:dev
free-sun:master
free-sun:release_0.0.1
free-sun:release_0.0.4

2 Commits
354784e6a2 ... 717f761285

Author SHA1 Message Date
yangsen 717f761285 Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev
3 years ago
yangsen bd3afd4983 (*)更新
3 years ago
4 changed files with 461 additions and 250 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. 63
      web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
  2. 317
      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
View File

@ -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>
);
}

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

@ -1,33 +1,37 @@
@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{
// // 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{
.build-left-top {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.build-left-top-center{
.build-left-top-center {
width: 100%;
height: 100%;
margin: 0 10px;
}
.build-left-top-item{
.build-left-top-item {
width: 25%;
height: 50%;
// background-image: url('/assets/images/quanju/zhuangtaigognlubiankuang.png');
@ -39,9 +43,10 @@
align-items: center;
position: absolute;
float: left;
// text-align: center;
div{
&:nth-child(1){
div {
&:nth-child(1) {
// width: 80%;
// height: 100%;
// margin: 1% auto 0;
@ -53,12 +58,14 @@
text-shadow: 0px 2px 4px #1C60FE;
}
&:nth-child(2){
&: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;
@ -71,41 +78,47 @@
}
}
}
.build-left-center{
.build-left-center {
width: 100%;
height: 100%;
.build-left-center-top{
.build-left-center-top {
width: 100%;
height: 30%;
display: flex;
justify-content: space-between;
div{
div {
width: 50%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
img{
img {
// height: 15%;
width: 25%;
}
div{
div {
display: flex;
flex-direction: column;
align-items: start;
justify-content: center;
margin-left: 10px;
span{
&:nth-child(1){
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){
&:nth-child(2) {
font-size: 1.75rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
@ -116,13 +129,16 @@
}
}
// background-color: pink;
}
.build-left-center-titile{
.build-left-center-titile {
display: flex;
margin-bottom: 10px;
span{
flex:1;
span {
flex: 1;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
@ -131,19 +147,23 @@
line-height: 16px;
}
}
.build-left-center-content{
.build-left-center-content {
// width: 100%;
// height:40%;
.build-left-center-item{
display: flex ;
.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%);
&:hover {
background: linear-gradient(270deg, rgba(0, 124, 230, 0) 0%, rgba(0, 70, 200, 0.8700) 100%);
}
span{
flex:1;
span {
flex: 1;
text-align: center;
font-size: 12px;
font-family: PingFangSC-Medium, PingFang SC;
@ -152,6 +172,7 @@
line-height: 16px;
}
}
// .slick-list{
// height: 128px !important;
// }
@ -159,60 +180,69 @@
}
.build-left-bottom{
.build-left-bottom {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.build-left-bottom-title{
.build-left-bottom-title {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
left: 15%;
top:38%;
h2{
top: 38%;
h2 {
font-size: 1.25rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
line-height: 1.625rem;
text-shadow: 0px 0px 0.25rem #1C60FE;
}
span{
span {
font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E9F7FF;
}
}
img{
img {
width: 19%;
position: absolute;
left: 16%;
top:29%
top: 29%
}
}
}
.bgbuild-right{
}
.bgbuild-right {
position: absolute;
right: 0;
width: 25%;
height: 100%;
.build-right-top{
.build-right-top {
width: 100%;
height: 100%;
padding: 0 10px;
video{
video {
width: 100%;
height: 17vh;
// margin-bottom: 5%;
}
h2{
h2 {
height: 25%;
width: 100%;
padding-left: 0.9375rem;
@ -226,21 +256,25 @@
background-size: 100% 100%;
}
}
.build-right-center{
.build-right-center {
width: 100%;
height: 100%;
// background-color: pink;
.build-right-center-top{
.build-right-center-top {
width: 100%;
height: 30%;
display: flex;
justify-content: space-around;
align-items: center;
img{
width:14% ;
img {
width: 14%;
// height: 80%;
}
div{
div {
font-size: 1rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
@ -249,61 +283,204 @@
// line-height: 22px;
letter-spacing: 0.0625rem;
}
h2{
h2 {
font-size: 1.75rem;
font-family: YouSheBiaoTiHei;
color: #FFFFFF;
margin-bottom : 0!important;
margin-bottom: 0 !important;
text-shadow: 0px 0px 0.25rem #07B9FE;
}
}
}
.build-right-bottom{
.build-right-bottom {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.build-right-bottom-title{
.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{
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{
span {
font-size: 0.75rem;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #E9F7FF;
}
}
.img1{
width: 35%;
.img {
width: 25%;
position: absolute;
left: 38%;
top: 20%;
}
#ech {
position: absolute;
left: 30%;
top:5%;
left: 34%;
display: flex;
text-align: center;
}
.img2{
width: 40%;
.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
View File

@ -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
View File

@ -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;

Write Preview
Loading…
Cancel
Save