From bd3afd49835f2efc36f5d325986f1f1c7c3635cf Mon Sep 17 00:00:00 2001 From: yangsen <952208207@qq.com> Date: Fri, 12 Aug 2022 11:42:07 +0800 Subject: [PATCH] =?UTF-8?q?(*)=E6=9B=B4=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../containers/footer/build/Rightbottom.js | 63 +- .../quanju/containers/footer/build/style.less | 635 +++++++++++------- .../quanju/containers/footer/guanli/index.js | 9 +- .../containers/footer/guanli/style.less | 4 +- 4 files changed, 461 insertions(+), 250 deletions(-) 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;