大屏管理右边的UI

web/client/src/sections/quanju/containers/footer/build/AutoRollComponent.js

@@ -111,7 +111,7 @@ export default class AutoRollComponent extends Component {
                 }
 
                 <div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
-                    <div>
+                    <div style={{height:"100%"}}>
                         {content ? content : ''}
                         {this.state.enabledScroll && content ? content : ''}
                         {

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

@@ -1,8 +1,54 @@
 import React from 'react'
-
+import { Carousel } from 'antd'
+import AutoRollComponent from '../build/AutoRollComponent'
+import Module from '../../public/module'
+import './style.less'
 const Guanli = () => {
+    const datas = new Array(35)
+    const renderContent = () => {
+        datas.fill({
+            chepaihao:'苏LD1112121',
+            caoxian:'30%',
+            chufa:'200元',
+            riqi:'2022年5月4日'
+        },1,35)
+        console.log(datas,'数组')
+        return <div style={{height:"100%"}}>
+          {datas?.map(({ chepaihao, caoxian, chufa,riqi }, index) => {
+            return <div key={index} className='guanli-right-item'>
+                <span>{chepaihao}</span>
+                <span>{caoxian}</span>
+                <span>{chufa}</span>
+                <span>{riqi}</span>
+            </div>
+          })}
+        </div>
+      }
+      renderContent()
     return (
-        <>管理</>
+        <div className='guanli'>
+        <div className='guanli-left'>   
+        </div>
+        <div className='guanli-right'>
+        <Module style={{height:"100%"}} title="治超详情">
+            <div className = "guanli-right-top">
+                <img src="/assets/images/quanju/zhicaolog.png"></img>
+                <span>已处理</span>
+                <span>187</span>
+                <span>件</span>
+            </div>
+            <div className='guanli-right-title'>
+                <span>车牌号</span>
+                <span>超限</span>
+                <span>处罚</span>
+                <span>日期</span>
+            </div>
+            <AutoRollComponent content={renderContent()}
+            containerStyle={{ position: "relative", height: "90%", }}
+            divHeight={"100%"} divId={"chart-overview-deviceList"} />
+        </Module>
+        </div>
+        </div>
     )
 }
 export default Guanli

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

@@ -0,0 +1,249 @@
+.guanli{
+    // box-sizing: border-box;
+    padding: 0 15px 0 15px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: space-between;
+    .guanli-left{
+        width: 25%;
+        height: 100%;
+        background-color: pink;
+        .guanli-left-top{
+            height: 100%;
+            width: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            .guanli-left-top-center{
+                width: 174px;
+                height: 146px;
+                margin: 0 10px;
+            }
+            .guanli-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;
+                // text-align: center;
+                div{
+                    &:nth-child(1){
+                        display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    span{
+                        &:nth-child(1){
+                            width: 8px;
+                            height: 8px;
+                            margin-right: 5px;
+                            background: #07B9FE;
+                            clip-path: polygon(0 0, 100% 0, 0 100%, 0 0);
+                            transform: rotate(134deg);
+                        }
+                        &:nth-child(2){
+                            font-size: 16px;
+                            font-family: PingFangSC-Regular, PingFang SC;
+                            font-weight: 400;
+                            color: #E9F7FF;
+                            line-height: 22px;
+                        }
+                       
+                    }
+                    }
+                    &:nth-child(2){
+                        // width: 80%;
+                        // height: 100%;
+                        // margin: 1% auto 0;
+                        font-size: 38px;
+                        font-family: YouSheBiaoTiHei;
+                        color: #FFFFFF;
+                        text-align: center;
+                        // line-height: 49px;
+                        text-shadow: 0px 2px 4px #1C60FE;
+                        
+                    }
+                }
+            }
+        }
+        .guanli-left-center{
+            width: 100%;
+            height: 100%;
+            
+            .guanli-left-center-top{
+                width: 100%;
+                height: 30%;
+                display: flex;
+                justify-content: space-between;
+                div{
+                    width: 50%;
+                    height: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    img{
+                        height: 50px;
+                        width: 78px;
+
+                    }
+                    div{
+                        display: flex;
+                        flex-direction: column;
+                        align-items: start;
+                        justify-content: center;
+                        margin-left: 10px;
+                        span{
+                            &:nth-child(1){
+                                font-size: 12px;
+                                font-family: PingFangSC-Medium, PingFang SC;
+                                font-weight: 500;
+                                color: #C2EEFF;
+                                letter-spacing: 1px;
+                            }
+                            &:nth-child(2){
+                                font-size: 28px;
+                            font-family: YouSheBiaoTiHei;
+                            color: #FFFFFF;
+                            line-height: 36px;
+                            text-shadow: 0px 0px 4px #07B9FE;
+                            }
+                        }
+                        
+                    }
+                }
+                // background-color: pink;
+            }
+            .guanli-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;
+                }
+            }
+            .guanli-left-center-content{
+                width: 100%;
+                height: 100px!important;
+                .guanli-left-center-item{
+                    display: flex !important;
+                    width: 100%!important;
+                    height: 28px!important;
+                    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;
+                }
+            }
+            
+           
+        }
+        .guanli-left-bottom{
+            width: 100%;
+           height: 100%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+        
+        }
+    }
+    .guanli-right{
+        width: 25%;
+        height: 100%;
+        .guanli-right-top{
+            width: 100%;
+        //    height: 5%;
+           display: flex;
+           justify-content: flex-end;
+           align-items: center;
+           padding-right: 10px;
+           img{
+            width: 4%;
+            // height: 40%;
+           }
+            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);
+             }
+           }
+            
+         
+        }
+        .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-right-item{
+            width: 90%;
+            height: 3.333%;
+            margin: auto;
+            display: flex;
+            align-items: center;
+            justify-content: space-around;
+            // background: rgba(21,77,160,0.2000);
+            span{
+                font-size: 14px;
+                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){
+                    
+                // }
+            }
+        }
+    }
+}
+
+