diff --git a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js b/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
index e01ddc38..10e64fc1 100644
--- a/web/client/src/sections/quanju/containers/footer/build/Rightbottom.js
+++ b/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 (
+
+
+
+
+ ► 三级及以上
+
+
{sanji[2] + sanji[3] + sanji[4]}
+
{/*
段 */}
-
{total || 0}
- 道路总公里
+ {siji[0] + siji[1]+sanji[2] + sanji[3] + sanji[4] || 0}
+ 路段总数
-
+ {/*
-
-
+
*/}
+
-
+
+
+
+
+
+
+ ► 四级
+
+
{siji[0] + siji[1]}
+
+
);
}
diff --git a/web/client/src/sections/quanju/containers/footer/build/style.less b/web/client/src/sections/quanju/containers/footer/build/style.less
index 0f64d0c5..f2e3030d 100644
--- a/web/client/src/sections/quanju/containers/footer/build/style.less
+++ b/web/client/src/sections/quanju/containers/footer/build/style.less
@@ -1,128 +1,169 @@
-@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;
-
- }
- &:nth-child(2){
- display: flex;
+ 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;
+
+ }
+
+ &: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;
color: #E9F7FF;
// line-height: 22px;
}
-
- }
+
}
}
}
}
- .build-left-center{
+ }
+
+ .build-left-center {
+ width: 100%;
+ height: 100%;
+
+ .build-left-center-top {
width: 100%;
- height: 100%;
-
- .build-left-center-top{
- width: 100%;
- height: 30%;
+ height: 30%;
+ display: flex;
+ justify-content: space-between;
+
+ 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;
+ 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: 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;
}
- }
- .img1{
- width: 35%;
- position: absolute;
- left: 30%;
- top:5%;
+
+ // 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;
+ // }
+
+ // }
}
- .img2{
- width: 40%;
- position: absolute;
- left: 40%;
- top:5%;
- z-index: 10;
+
+ &: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;
+ }
+ }
+ }
+ }
+}
\ No newline at end of file
diff --git a/web/client/src/sections/quanju/containers/footer/guanli/index.js b/web/client/src/sections/quanju/containers/footer/guanli/index.js
index 09bbb399..6085aa4f 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/index.js
+++ b/web/client/src/sections/quanju/containers/footer/guanli/index.js
@@ -59,8 +59,9 @@ const Guanli = (props) => {
// );
const renderContent = () => {
+ // console.log(rightitemlist);
return
- {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
@@ -75,7 +76,7 @@ const Guanli = (props) => {
车牌号{licensePlate}{/* {item.licensePlate} */}
-
检测点123456
+
检测点{nameOfInspectionPoint}
处罚{deductPoints?`-${deductPoints}分`:""}和-{fine}{fine?"元":""}{/* {item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"} */}
日期{processingTime}{/* {item.processingTime ? item.processingTime : "--"} */}
@@ -129,9 +130,9 @@ const Guanli = (props) => {
处罚
处理日期
- {rightitemlist && rightitemlist.length!==0?
:
}
+ divHeight={"100%"} divId={"chart-overview-deviceList"} />:}
>
diff --git a/web/client/src/sections/quanju/containers/footer/guanli/style.less b/web/client/src/sections/quanju/containers/footer/guanli/style.less
index 91060be1..f1edaf71 100644
--- a/web/client/src/sections/quanju/containers/footer/guanli/style.less
+++ b/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;