Merge branch 'dev' of https://gitea.anxinyun.cn/gao.zhiyuan/Highways4Good into dev

web/client/src/sections/auth/containers/login.js

@@ -56,39 +56,38 @@ const Login = props => {
 
     return (
         <div className='login'>
-            <div className='left'></div>
+            {/* <div className='left'></div> */}
             <div className='right'>
                 <div className='loginBox'>
-                    <h1>四好公路</h1>
-                    <Form onKeyDown={enterHandler}>
+                    <h1>南昌县智慧交通监管系统</h1>
+                        <Form onKeyDown={enterHandler}>
+                            <FormItem>
+                                <div className='loginFormTit'>用户名</div>
+                                <Input
+                                    className='loginInp'
+                                    type="text"
+                                    value={username}
+                                    maxlength={11}
+                                    onChange={e => {
+                                        setUserName(e.target.value)
+                                        setInputChanged(true)
+                                    }}
+                                />
+                            </FormItem>
+                            <div className='loginFormTit'>密码</div>
+                            <FormItem>
+                                <Input
+                                    className='loginInp'
+                                    type="password"
+                                    value={password}
 
-                        <FormItem>
-                            <div className='loginFormTit'>用户名</div>
-                            <Input
-                                className='loginInp'
-                                type="text"
-                                value={username}
-                                maxlength={11}
-                                onChange={e => {
-                                    setUserName(e.target.value)
-                                    setInputChanged(true)
-                                }}
-                            />
-                        </FormItem>
-                        <div className='loginFormTit'>密码</div>
-                        <FormItem>
-                            <Input
-                                className='loginInp'
-                                type="password"
-                                value={password}
-
-                                onChange={e => {
-                                    setPassword(e.target.value)
-                                    setInputChanged(true)
-                                }}
-                            />
-                        </FormItem>
-                    </Form>
+                                    onChange={e => {
+                                        setPassword(e.target.value)
+                                        setInputChanged(true)
+                                    }}
+                                />
+                            </FormItem>
+                        </Form>
                     <Button type="primary" className='loginBtn' loading={isRequesting} onClick={handleLogin}>登录</Button>
                 </div>
             </div>

web/client/src/sections/auth/containers/style.less

@@ -5,21 +5,22 @@
     top: 0;
     left: 0;
 
-    .left {
-        background-image: url('/assets/images/loginBg.jpg');
-        background-size: 100% 100%;
-        background-repeat: no-repeat;
-        width: 55%;
-        height: 100%;
-        float: left;
-        top: 0px;
-        left: 0px;
-    }
+    // .left {
+    //     background-image: url('/assets/images/bj.png');
+    //     background-size: 100% 100%;
+    //     background-repeat: no-repeat;
+    //     width: 55%;
+    //     height: 100%;
+    //     float: left;
+    //     top: 0px;
+    //     left: 0px;
+    // }
 
     .right {
-        width: 45%;
+        background-image: url('/assets/images/bj.png');
+        width: 100%;
         height: 100%;
-        background-color: #000066;
+        // background-color: #000066;
         float: left;
         right: 0px;
         bottom: 0px;
@@ -45,22 +46,28 @@
 }
 
 .loginBox {
-    height: 50%;
-    width: 25%;
+    // height: 50%;
+    width: 480px;
     position: absolute;
-    right: 6.5%;
+    right: 9%;
     z-index: 20;
+    text-align: center;
+    border: 3px solid rgba(255, 255, 255, 0.6);
+    border-radius: 20px;
 
     h1 {
+        margin-top: 6%;
         color: #fff;
-        font-size: 58px;
+        font-size: 40px;
+        font-family: "YouSheBiaoTiHei";
     }
 
     .loginFormTit {
-        width: 20%;
+        // width: 20%;
         font-size: 18px;
         color: rgb(255, 255, 255);
-        margin-bottom: 10px;
+        margin: 0 0 10px 10%;
+        text-align: left;
     }
 
     .loginInp {
@@ -74,8 +81,10 @@
     .loginBtn {
         width: 80%;
         height: 50px;
-        margin-top: 20px;
+        margin: 20px 0 9% 0;
         border-radius: 5px;
         font-size: 16px;
     }
+
+
 }

web/client/src/sections/quanju/containers/footer/conserve/left/left-bottom.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Module from '../../../public/module'
 
 const LeftBottom = () => {
-  const style = { height: "30%", marginTop: "5%" }
+  const style = { height: "31%", marginTop: "3%" }
   return (
       <>
           <Module style={style} title={"已绿化里程统计"}>

web/client/src/sections/quanju/containers/footer/conserve/left/left-center.js

@@ -1,14 +1,30 @@
+import { Col, Row } from 'antd'
 import React from 'react'
+import { useEffect } from 'react'
 import Module from '../../../public/module'
 
 const LeftCenter = () => {
-  const style = { height: "30%", marginTop: "5%" }
+  const style = { height: "31%", marginTop: "3%" }
+
+  useEffect(() => {
+
+  }, [])
+
   return (
-      <>
-          <Module style={style} title={"可绿化里程统计"}>
+    <>
+      <Module style={style} title={"可绿化里程统计"}>
+
+        <Row align='middle' style={{ padding: 10 }}>
+          <Col span={15}>
+            <img src='assets/images/quanju/kelvhua_icon.png' alt='icon' />
+            <span style={{ color: '#C2EEFF', marginLeft: 5 }}>可绿化里程总数</span>
+          </Col>
+          <Col span={9} style={{ fontSize: 28, fontFamily: 'YouSheBiaoTiHei', color: '#fff' }}>1234.123</Col>
+        </Row>
+        <div>图表</div>
 
-          </Module>
-      </>
+      </Module>
+    </>
   )
 }
 export default LeftCenter

web/client/src/sections/quanju/containers/footer/conserve/left/left-top.js

@@ -33,7 +33,7 @@ const LeftTop = () => {
         },
       ],
       polar: {
-        radius: ["65%", "73%"],
+        radius: ["60%", "68%"],
         center: ["50%", "50%"],
       },
       angleAxis: {
@@ -107,7 +107,7 @@ const LeftTop = () => {
         },
       ],
       polar: {
-        radius: ["65%", "73%"],
+        radius: ["60%", "68%"],
         center: ["50%", "50%"],
       },
       angleAxis: {
@@ -159,13 +159,13 @@ const LeftTop = () => {
     chartInstance.setOption(frequentlyOption);
 
   }, [])
-  const style = { height: "30%", marginTop: "5%" }
+  const style = { height: "31%", marginTop: "3%" }
   return (
     <>
       <Module style={style} title={"道路养护周期统计"}>
         <div style={{ width: '100%', display: 'flex' }}>
-          <div ref={seasonChartRef} style={{ height: "23vh", width: "45%" }}></div>
-          <div ref={frequentlyChartRef} style={{ height: "23vh", width: "45%" }}></div>
+          <div ref={seasonChartRef} style={{ height: "23vh", width: "50%" }}></div>
+          <div ref={frequentlyChartRef} style={{ height: "23vh", width: "50%" }}></div>
         </div>
 
       </Module>

web/client/src/sections/quanju/containers/footer/conserve/right.js

@@ -5,7 +5,7 @@ import RightTop from './right/right-top'
 
 const Right = () => {
     return (
-        <div style={{ display: 'flex',flexDirection: 'column',  width: "23%", height: "100%", marginLeft: "1%", }}>
+        <div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}>
             <RightTop />
             <RightCenter />
             <RightBottom />

web/client/src/sections/quanju/containers/footer/conserve/right/right-bottom.js

@@ -2,7 +2,7 @@ import React from 'react'
 import Module from '../../../public/module'
 
 const RightBottom = () => {
-  const style = { height: "30%", marginTop: "5%" }
+  const style = { height: "31%", marginTop: "3%" }
   return (
       <>
           <Module style={style} title={"养护完成情况"}>

web/client/src/sections/quanju/containers/footer/conserve/right/right-center.js

@@ -1,12 +1,49 @@
 import React from 'react'
 import Module from '../../../public/module'
+import { Col, Row } from 'antd'
 
 const RightCenter = () => {
-  const style = { height: "30%", marginTop: "5%" }
+  const style = { height: "31%", marginTop: "3%" }
+  const textStyle = { fontSize: 14, color: '#E9F7FF' }
+  const numStyle = { color: '#fff', fontSize: 24, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
+
   return (
       <>
           <Module style={style} title={"各类附属设施数量统计"}>
-
+          <div style={{ paddingLeft: '8%' }}>
+          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/jiancha.png' alt='icon' />
+              <div style={{ marginLeft: 10 }}>
+                <div style={textStyle}>检查井</div>
+                <div style={numStyle}>89个</div>
+              </div>
+            </Col>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/yushui.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>雨水口</div>
+                <div style={numStyle}>61个</div>
+              </span>
+            </Col>
+          </Row>
+          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/lupai.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>路牌名</div>
+                <div style={numStyle}>2230个</div>
+              </span>
+            </Col>
+            <Col span={12} style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/zerenpai.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>养护责任牌</div>
+                <div style={numStyle}>1217个</div>
+              </span>
+            </Col>
+          </Row>
+        </div>
           </Module>
       </>
   )

web/client/src/sections/quanju/containers/footer/conserve/right/right-top.js

@@ -1,14 +1,50 @@
+import { Col, Row } from 'antd'
 import React from 'react'
 import Module from '../../../public/module'
 
-const RightTop= () => {
-  const style = { height: "30%", marginTop: "5%" }
+const RightTop = () => {
+  const style = { height: "31%", marginTop: "3%" }
+  const textStyle = { fontSize: 14, color: '#E9F7FF' }
+  const numStyle = { color: '#fff', fontSize: 24, fontFamily: 'YouSheBiaoTiHei', textShadow: '0px 0px 8px #1C60FE', marginTop: 8 }
   return (
-      <>
-          <Module style={style} title={"道路设施数量统计"}>
-
-          </Module>
-      </>
+    <>
+      <Module style={style} title={"道路设施数量统计"}>
+        <div style={{ paddingLeft: '8%' }}>
+          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/biaoxian.png' alt='icon' />
+              <div style={{ marginLeft: 10 }}>
+                <div style={textStyle}>标线</div>
+                <div style={numStyle}>1352km</div>
+              </div>
+            </Col>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/renxing.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>人行道</div>
+                <div style={numStyle}>80处</div>
+              </span>
+            </Col>
+          </Row>
+          <Row style={{ marginTop: 20, justifyContent: 'space-around' }}>
+            <Col style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/biaozhi.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>标志牌</div>
+                <div style={numStyle}>4563个</div>
+              </span>
+            </Col>
+            <Col span={12} style={{ display: 'flex', width: '50%' }}>
+              <img src='assets/images/quanju/fanghu.png' alt='icon' />
+              <span style={{ marginLeft: 10 }}>
+                <div style={textStyle}>防护栏</div>
+                <div style={numStyle}>1054km</div>
+              </span>
+            </Col>
+          </Row>
+        </div>
+      </Module>
+    </>
   )
 }
 export default RightTop

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

@@ -0,0 +1,91 @@
+import React, { useEffect, useRef } from 'react';
+import './style.less'
+import * as echarts from 'echarts';
+export default function LeftItem() {
+    const seasonChartRef = useRef(null);
+    useEffect(() => {
+        let chartInstance = echarts.init(seasonChartRef.current);
+        const seasonOption = {
+          title: [
+            {
+              text: "已处理",
+              x: "center",
+              top: "55%",
+              textStyle: {
+                color: "#E9F7FF",
+                fontSize: 14,
+              },
+            },
+            {
+              text: "2333",
+              x: "center",
+              y: "35%",
+              textStyle: {
+                fontSize: "30",
+                color: "#FFFFFF",
+                fontFamily: "YouSheBiaoTiHei",
+              },
+            },
+          ],
+          polar: {
+            radius: ["78%", "86%"],
+            center: ["50%", "50%"],
+          },
+          angleAxis: {
+            max: 100,
+            show: false,
+          },
+          radiusAxis: {
+            type: "category",
+            show: true,
+            axisLabel: {
+              show: false,
+            },
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              show: false,
+            },
+          },
+          series: [
+            {
+              name: "",
+              type: "bar",
+              roundCap: true,
+              barWidth: 30,
+              showBackground: true,
+              data: [40],
+              coordinateSystem: "polar",
+              itemStyle: {
+                normal: {
+                  color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                      offset: 0,
+                      color: "#AAC8FF",
+                    },
+                    {
+                      offset: 1,
+                      color: "#0041BB",
+                    },
+                  ]),
+                },
+              },
+            },
+          ],
+        };
+        chartInstance.setOption(seasonOption);
+    
+      }, [])
+  return (
+    <div className='guanli-left-item'>
+        <div className='guanli-left-item-left'>
+            <span>莲塘镇</span>
+            <div>244 <span>个</span></div>
+        </div>
+        <div className='guanli-left-item-right'>
+            <div ref={seasonChartRef} style={{ height: "100%", width: "100%" }}></div>
+        </div>
+    </div>
+  )
+}

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

@@ -2,9 +2,11 @@ import React from 'react'
 import { Carousel } from 'antd'
 import AutoRollComponent from '../build/AutoRollComponent'
 import Module from '../../public/module'
+import LeftItem from './LeftItem'
 import './style.less'
 const Guanli = () => {
     const datas = new Array(35)
+    const itemlist = [1,2,3]
     const renderContent = () => {
         datas.fill({
             chepaihao:'苏LD1112121',
@@ -27,7 +29,12 @@ const Guanli = () => {
       renderContent()
     return (
         <div className='guanli'>
-        <div className='guanli-left'>   
+        <div className='guanli-left'> 
+        <Module style={{height:"100%"}} title="检测点治超处理占比">
+            {itemlist.map((item,index)=>
+            <LeftItem key={index}></LeftItem>
+           )}    
+        </Module>  
         </div>
         <div className='guanli-right'>
         <Module style={{height:"100%"}} title="治超详情">

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

@@ -8,159 +8,58 @@
     .guanli-left{
         width: 25%;
         height: 100%;
-        background-color: pink;
-        .guanli-left-top{
-            height: 100%;
-            width: 100%;
+        .guanli-left-item{
+            box-sizing: border-box;
+            width: 85%;
+            height: 30%;
+            margin: 0 auto 3%;
             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;
+            padding: 0 10%;
+            justify-content: space-between;
+            border: 2px solid rgba(28,96,254,0.5000);
+            .guanli-left-item-left{
+                width: 30%;
+                height: 70%;
                 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;
-                        
-                    }
+                span{
+                    font-size: 20px;
+                    font-family: PingFangSC-Regular, PingFang SC;
+                    font-weight: 400;
+                    color: rgba(216,240,255,0.8000);
                 }
-            }
-        }
-        .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;
+                    // align-items: ;
+                    font-size: 34px;
+                    font-family: YouSheBiaoTiHei;
                     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;
+                    height: 60%;
+                    width: 100%;
+                    background: url('/assets/images/quanju/guanlijiance_1.png') no-repeat;
+                    background-size: 100% 80%;
+                    background-position: center bottom;
                     span{
-                        flex:1;
-                        text-align: center;
-                        font-size: 12px;
-                        font-family: PingFangSC-Medium, PingFang SC;
-                        font-weight: 500;
-                        color: #FFFFFF;
-                        line-height: 16px;
+                        font-size: 16px;
+                        font-family: PingFangSC-Regular, PingFang SC;
+                        font-weight: 400;
+                        padding-top: 10%;
+                        margin-left: 5px;
+                        // height: 0;
+                        color: rgba(216,240,255,0.8000);
                     }
                 }
-                .slick-list{ 
-                    height: 128px !important;
-                }
+                // background-color: pink;
             }
-            
-           
-        }
-        .guanli-left-bottom{
-            width: 100%;
-           height: 100%;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-        
+            .guanli-left-item-right{
+                width: 40%;
+                height: 60%;
+                // background-color: pink;
+            }
+            // background-color: pink;
         }
     }
     .guanli-right{