From 4e6188a596da5f5d80fb4c3a0b6007febedddf8a Mon Sep 17 00:00:00 2001 From: wenlele Date: Fri, 4 Aug 2023 20:53:27 +0800 Subject: [PATCH] =?UTF-8?q?=E9=81=93=E8=B7=AF=E9=9A=90=E6=82=A3=E6=8E=92?= =?UTF-8?q?=E6=9F=A5=E6=B2=BB=E7=90=86=20=20=E9=A9=BE=E9=A9=B6=E8=88=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../quanju/containers/footer/guanli/index.js | 14 +- .../containers/footer/guanli/style.less | 547 +++++++++--------- .../footer/leadership/right/right-bottom.js | 163 +++--- 3 files changed, 382 insertions(+), 342 deletions(-) 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 3e42faf5..44a348cf 100644 --- a/web/client/src/sections/quanju/containers/footer/guanli/index.js +++ b/web/client/src/sections/quanju/containers/footer/guanli/index.js @@ -64,7 +64,7 @@ const Guanli = (props) => { } - + console.log(1111, qndmn); useEffect(() => { requestleftDatas(); @@ -82,9 +82,11 @@ const Guanli = (props) => {
{picfile?.length > 0 ? - {picfile?.map(v => )} : { 处罚 处理日期
*/} - o
+
执法日期
执法成果
@@ -181,7 +183,7 @@ const Guanli = (props) => { ) } function mapStateToProps (state) { - const { auth, depMessage } = state; + const { auth, depMessage, global } = state; const pakData = (dep) => { return dep.map((d) => { return { 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 f1edaf71..7d612b9f 100644 --- a/web/client/src/sections/quanju/containers/footer/guanli/style.less +++ b/web/client/src/sections/quanju/containers/footer/guanli/style.less @@ -1,7 +1,7 @@ -@media screen and (max-width:1366px) { - html { - font-size: 12px; - } +@media screen and (max-width: 1366px) { + html { + font-size: 12px; + } } // .guanli{ @@ -13,291 +13,298 @@ // display: flex; // justify-content: space-between; .guanli-left { - width: 25%; - height: 100%; - position: absolute; - left: 0; - - .guanli-left-item { - box-sizing: border-box; - width: 85%; - position: relative; - // height: 30%; - height: 24vh; - margin: 0 auto 3%; + width: 25%; + height: 100%; + position: absolute; + left: 0; + + .guanli-left-item { + box-sizing: border-box; + width: 85%; + position: relative; + // height: 30%; + height: 24vh; + margin: 0 auto 3%; + display: flex; + align-items: center; + padding: 0 10%; + justify-content: space-between; + border: 2px solid rgba(28, 96, 254, 0.5); + + .guanli-left-item-left { + width: 45%; + height: 60%; + display: flex; + flex-direction: column; + align-items: center; + + span { + font-size: 1.25rem; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: rgba(216, 240, 255, 0.8); + } + + div { display: flex; - align-items: center; - padding: 0 10%; - justify-content: space-between; - 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 { - font-size: 1.25rem; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: rgba(216, 240, 255, 0.8000); - } - - div { - display: flex; - justify-content: center; - // align-items: ; - font-size: 2.125rem; - font-family: YouSheBiaoTiHei; - color: #FFFFFF; - height: 70%; - width: 100%; - background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat; - background-size: 100% 80%; - background-position: center bottom; - - 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); - } - } - - // background-color: pink; - } - - .guanli-left-item-right { - width: 40%; - height: 50%; - position: relative; - - span { - position: absolute; - width: 8px; - height: 8px; - background-color: #fff; - top: 1.5%; - left: 50%; - z-index: 10; - border-radius: 4px; - display: block; - } - - // background-color: pink; - } - - // background-color: pink; - } -} - -.guanli-right { - width: 25%; - height: 100%; - position: absolute; - right: 0; - - .guanli-right-top { + justify-content: center; + // align-items: ; + font-size: 2.125rem; + font-family: YouSheBiaoTiHei; + color: #ffffff; + height: 70%; width: 100%; - // height: 5%; - display: flex; - justify-content: flex-end; - align-items: center; - padding-right: 10px; - - img { - width: 4%; - // height: 40%; - } + background: url("/assets/images/quanju/guanlijiance_1.png") no-repeat; + background-size: 100% 80%; + background-position: center bottom; 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 - } - - &:nth-child(3) { - font-size: 18px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #FFFFFF; - margin-right: 10px; - } - - &:nth-child(4) { - font-size: 14px; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: rgba(216, 240, 255, 0.8000); - } + 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.8); } + } - + // background-color: pink; } - .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 { - font-size: 12px; - font-family: PingFangSC-Medium, PingFang SC; - font-weight: 500; - color: #FFFFFF; - flex: 1; - text-align: center; - // &:nth-child(1){ - - // } - } + .guanli-left-item-right { + width: 40%; + height: 50%; + position: relative; + + span { + position: absolute; + width: 8px; + height: 8px; + background-color: #fff; + top: 1.5%; + left: 50%; + z-index: 10; + border-radius: 4px; + display: block; + } + + // background-color: pink; } - .guanli-right-item { - width: 90%; - // height: 4%; - height: 3vh; - margin: auto; - display: flex; - align-items: center; - justify-content: space-around; + // background-color: pink; + } +} - &:hover { - background: linear-gradient(270deg, rgba(0, 124, 230, 0) 0%, rgba(0, 70, 200, 0.8700) 100%); - } +.guanli-right { + width: 25%; + height: 100%; + position: absolute; + right: 0; + + .guanli-right-top { + width: 100%; + // height: 5%; + display: flex; + justify-content: flex-end; + align-items: center; + padding-right: 10px; + + img { + width: 4%; + // height: 40%; + } - // background: rgba(21,77,160,0.2000); - span { - font-size: 0.875rem; - font-family: PingFangSC-Regular, PingFang SC; - font-weight: 400; - color: rgba(216, 240, 255, 0.8000); - line-height: 20px; - flex: 1; - text-align: center; - // &:nth-child(1){ + span { + &:nth-child(2) { + font-size: 16px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: rgba(216, 240, 255, 0.8); + margin: 0 10px 0 2px; + } + + &:nth-child(3) { + font-size: 18px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #ffffff; + margin-right: 10px; + } + + &:nth-child(4) { + font-size: 14px; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: rgba(216, 240, 255, 0.8); + } + } + } + + .guanli-right-title { + width: 90%; + height: 5%; + margin: auto; + display: flex; + align-items: center; + justify-content: space-around; + background: rgba(21, 77, 160, 0.2); + + span { + font-size: 12px; + font-family: PingFangSC-Medium, PingFang SC; + font-weight: 500; + color: #ffffff; + flex: 1; + text-align: center; + // &:nth-child(1){ + + // } + } + } + + .guanli-right-item { + width: 90%; + // height: 4%; + height: 3vh; + margin: auto; + 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.87) 100% + ); + } - // } - } + // background: rgba(21,77,160,0.2000); + span { + font-size: 0.875rem; + font-family: PingFangSC-Regular, PingFang SC; + font-weight: 400; + color: rgba(216, 240, 255, 0.8); + line-height: 20px; + flex: 1; + text-align: center; + // &:nth-child(1){ + + // } } + + } } .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; - // } - // } - // } - // } + // 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; + // } + // } + // } + // } + .picfileimg { + width: 200px !important; + height: 200px !important; + } } .popover { - .ant-tooltip-inner{ - min-width: 0 !important; - min-height: 0 !important; - background-color: rgba(0, 0, 0, 0) !important; - } -.ant-tooltip-arrow{ + .ant-tooltip-inner { + min-width: 0 !important; + 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; + // } + + // span { + // display: none; + // } + // } + + // .ant-popover-inner { + // .ant-popover-inner-content { + // padding: 0; + // } + // } + // .ant-popover-inner{padding: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;} -} \ No newline at end of file diff --git a/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js b/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js index a5c5af5c..6500d1dc 100644 --- a/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js +++ b/web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js @@ -1,9 +1,15 @@ import React, { useState, useEffect } from 'react' import Module from '../../../public/module' -import { Spin } from 'antd' +import { Carousel, Tooltip,} from 'antd' import Lun from "./lunbo" +import moment from 'moment' import "./left.less" import { getZhichaolist } from "../../../../actions/example" +import { getRoadadministration } from '../../../../../fillion/actions/luzheng' +import NoData from '../../../public/noData'; +import AutoRollComponent from '../../build/AutoRollComponent' + + const Rightbottom = (props) => { const { dispatch } = props @@ -13,6 +19,8 @@ const Rightbottom = (props) => { const [rightDatas, setrightDatas] = useState([]) const [nums, setNums] = useState([]) const [num, setNum] = useState() + const [rightitemlist, setrightitemlist] = useState([]) + const requestRightDatas = async () => { const res = await dispatch(getZhichaolist()) var pattern = /[\u4e00-\u9fa5]*/; @@ -30,77 +38,100 @@ const Rightbottom = (props) => { setList(d) } useEffect(() => { - const zhichaolist = dispatch(getZhichaolist()).then((res) => { - setNums(res.payload?.data?.processed) + // const zhichaolist = dispatch(getZhichaolist()).then((res) => { + // setNums(res.payload?.data?.processed) - }) - requestRightDatas() + // }) + // requestRightDatas() + roadManagement() }, []) - console.log(list); - const renderBody = () => { - return ( -
- {/* */} - {list?.map((item, index) => { - return
  • { - setBeijing(index) - setNum(index) - // console.log(beijing); - }} onMouseLeave={() => { - setBeijing() - setNum() - }}> - {beijing == index ? : ""} -
    {item.licensePlate}
    -
    {item.overrunRate ? item.overrunRate + "%" : "--"}
    -
    {item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"}
    -
    {item.processingTime ? item.processingTime : "--"}
    - { - num == index ?
    - -
    - -

    {item.overrunRate ? item.overrunRate + "%" : "--"}

    -

    超限

    -
    -
    -

    车牌号{item.licensePlate}

    -

    检测点{item.nameOfInspectionPoint ? item.nameOfInspectionPoint : "--"}

    -

    处罚{item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"}

    -

    日期{item.processingTime ? item.processingTime : "--"}

    -
    -
    : "" + + const roadManagement = async () => { + await dispatch(getRoadadministration({})).then(res => { + if (res.success) { + setrightitemlist(res.payload.data?.rows || []) + } + }) + + + + } + + const renderContent = () => { + + return
    + {rightitemlist && rightitemlist.length !== 0 ? rightitemlist?.map(({ enforcementdate, enforcementreslt, roadname, picfile }, index) => { + if (index < 120) { + return
    + +
    + + {picfile?.length > 0 ? + {picfile?.map(v => )} + + : } -
    • - }) - } - {/*     */} -
    - ) - } + +
    +

    + 执法日期: + {enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"} +

    +

    + 执法道路: + {roadname} +

    +

    + 执法成果: + {enforcementreslt}

    +
    +
    + + } + placement="leftTop" + overlayStyle={{ minWidth: 500, minHeight: 200, paddingTop: 10, margin: 0, backgroundImage: `url(../../../../../assets/images/leadership/beijinglan.png)` }} + overlayClassName='popover' + + > +
    +
    {enforcementdate && moment(enforcementdate).format("YYYY-MM-DD") || "--"}
    +
    {enforcementreslt}
    +
    + + + } + }) : ""} + + } return ( <> - - -
    - - 已处理{nums ? nums : 0}件 -
    -
    -

    车牌号

    -

    超限

    -

    处罚

    -

    处理日期

    -
    - {/* */} - - {/* */} + + +
    +
    执法日期
    +
    执法成果
    +
    + {rightitemlist && rightitemlist.length !== 0 ? : } +     )