124512

web/client/src/sections/quanju/containers/footer/leadership/centerleft/conter.less

@@ -0,0 +1,98 @@
+li{
+	list-style-type:none
+}
+
+.wy-rightTop{
+    .ant-select-selector, .ant-select-selection-placeholder{
+	background-color:#011f59 !important;
+	border:#1E7BD6 1px solid !important;
+	font-family: PingFangSC-Regular, PingFang SC !important;
+	height: 25px !important;
+	// line-height: 25px !important;
+}.ant-select-selection-item{
+	line-height: 25px !important;
+}
+.anticon{
+	color: #fff !important;
+}
+}
+
+
+.contain {
+    position: relative;
+    top: 5%;
+    left: 45%;
+    width: 100%;
+    height: 100%;
+    transition: all 30s;
+    transform: translateX(-50%);
+    color: #fff;
+    overflow: hidden;
+    cursor: pointer;
+}
+.contain .ul {
+     height: 100%;
+     list-style: none;
+}
+.contain .ul .items {
+       position: absolute;
+       top: 0px;
+       width: 100%;
+       height: 100%;
+}
+.ul li.show{
+    display: block;
+}
+.ul li {
+    display: none;
+}
+.ul li img {
+    width: 100%;
+    height: 100%;
+}
+.contain .dots {
+     position: absolute;
+     left: 50%;
+     bottom: 30px;
+     height: 10px;
+     transform: translateX(-50%);
+}
+.dots li {
+    float: left;
+    width: 10px;
+    height: 10px;
+    margin: 0px 5px;
+    border-radius: 50%;
+    transition: all .3s;
+    // background-color: antiquewhite;
+    list-style: none;
+}
+// .dots li.active {
+//    background-color: blue;
+// }
+.control .left {
+    position: absolute;
+    top: 80%;
+    left: 85%;
+    // padding: 5px;
+    // transform: translateY(-50%);
+	width: 20px;
+	height: 50px;
+    font-size: 20px;
+    cursor: pointer;
+}
+// .control .left:hover {
+//     background-color:  #000000, 
+// }
+.control .right {
+    position: absolute;
+    top: 80%;
+    right: 3%;
+    // padding: 5px;
+    // transform: translateY(-50%);
+    font-size: 20px;
+    cursor: pointer;
+}
+// .control .right:hover {
+//     background-color: rgba(0, 0, 0, .3);
+// }

web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'
 import Lun from "../right/lunbo"
 import { getRoadmaintain, getdaolutongji } from "../../../../actions/example"
 import moment from 'moment'
+import Hua from "./hudong"
 import { Spin } from 'antd'
 
 const Right = (props) => {
@@ -13,7 +14,9 @@ const Right = (props) => {
     const [num, setNum] = useState()
     useEffect(() => {
         const daolus = dispatch(getRoadmaintain()).then((res) => {
+            console.log(res);
             setList(res.payload.data.reportList.filter((item, index) => {
+
                 return item.projectType == "road"
             }))
             setNums(res.payload.data.reportCount.filter((item, index) => {
@@ -58,6 +61,9 @@ const Right = (props) => {
                                 {
                                     num == index ? <div style={{ position: "fixed", width: "400px", height: "200px", zIndex: 100, left: "50%", marginTop: "0", top: "35%" }}>
                                         <img src='/assets/images/leadership/beijinglan.png' style={{ width: "100%", height: "100%" }} />
+                                        <div style={{ width: "50%", height: "100%", position: "absolute", top: "0", }}>
+                                            <Hua op={121212} />
+                                        </div>
                                         <div style={{ position: "absolute", top: "0", width: "50%", left: "50%", paddingRight: "10px" }}>
                                             <p style={{ marginTop: "20px", color: "#FFFFFF", fontSize: "16px", fontFamily: "YouSheBiaoTiHei" }}>{item.roadSectionStart ? item.roadSectionStart : ""}{item.roadSectionStart && item.roadSectionEnd ? "——" : ""}{item.roadSectionEnd ? item.roadSectionEnd : ""}{item.roadSectionStart || item.roadSectionEnd ? "" : "--"}</p>
                                             <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>养护类型<span style={{ color: "#EEF4FF", marginLeft: "30px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>日常养护</span></p>

web/client/src/sections/quanju/containers/footer/leadership/centerleft/hudong.js

@@ -0,0 +1,170 @@
+import { values } from 'lodash';
+import React, { Component } from 'react';
+import './conter.less';
+class ReactCarousel extends Component {
+    chunk(arr, size) {
+        var arr1 = new Array();
+        for (var i = 0; i < Math.ceil(arr.length / size); i++) {
+            arr1[i] = new Array();
+        }
+        var j = 0;
+        var x = 0;
+        for (var i = 0; i < arr.length; i++) {
+            if (!((i % size == 0) && (i != 0))) {
+                arr1[j][x] = arr[i];
+                x++;
+                // console.log("j=" + j + "  " + "x=" + x);
+            } else {
+                j++;
+                x = 0;
+                // console.log("else:" + "j=" + j + "  " + "x=" + x);
+                arr1[j][x] = arr[i];
+                // console.log(arr1);
+                x++;
+            }
+        }
+        return arr1;
+    }
+
+    constructor(props) {
+        super(props);
+        this.state = {
+            shuzu: [{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段2", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段3", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段4", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+            { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }],
+            imgs: [],
+            showIndex: 0, //显示第几个图片
+            timer: null,  // 定时器
+            show: false,   // 前后按钮显示
+            // arr1: ""
+        }
+        // console.log(this.state.imgs);
+        this.state.imgs = [{ name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+        { name: "南昌县迎宾大道管制路段2", images: "/assets/images/leadership/shiyantu.png" },
+        { name: "南昌县迎宾大道管制路段3", images: "/assets/images/leadership/shiyantu.png" },
+        { name: "南昌县迎宾大道管制路段4", images: "/assets/images/leadership/shiyantu.png" },
+        { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+        { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+        { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+        { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" },
+        { name: "南昌县迎宾大道管制路段", images: "/assets/images/leadership/shiyantu.png" }]
+
+
+    }
+
+
+    render() {
+        return (
+            <div className="ReactCarousel" style={{ width: "100%", height: "100%" }}>
+                <div className="contain"
+                    onMouseEnter={() => { this.stop() }} //鼠标进入停止自动播放
+                    onMouseLeave={() => { this.start() }}  //鼠标退出自动播放
+                >
+                    <ul className="ul">
+                        {
+
+                            this.state.imgs.map((value, index) => {
+                                console.log(this.props);
+                                return (
+                                    <li style={{ position: "relative", width: "100%", height: "100%", top: "-5%", fontSize: "12px" }} className={index === this.state.showIndex ? 'show' : ''}
+                                        key={index}
+                                    >
+                                        {value.name ? <div style={{ width: "100%", height: "80%", backgroundColor: "#fff", position: "absolute", top: "10%", right: "5%" }}>
+                                            <div style={{ width: "100%", height: "100%", position: "absolute", top: "80%" }}>
+                                                <div style={{ width: "100%", height: "20%", backgroundColor: "rgba(0,0,0,0.6)", overflow: "hiddden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                                                    <img src='/assets/images/leadership/weizhis.png' style={{ width: "6%", height: "80%", marginLeft: "3%", marginRight: "3%" }} />
+                                                    {Math.ceil(Math.random() * 10)}
+                                                </div>
+                                            </div>
+                                        </div> : ""}
+                                        {/* <div>{value[1].name}</div>
+                                        <div>{value[2].name}</div>
+                                        <div>{value[3].name}</div> */}
+                                    </li>
+                                )
+                            })
+                        }
+                    </ul>
+                    {/* <ul className="dots" style={{ width: this.state.imgs.length * 20 + 'px' }}>
+                        {
+                            this.state.imgs.map((value, index) => {
+                                return (
+                                    <li key={index}
+                                        className={index === this.state.showIndex ? 'active' : ''}
+                                        onClick={() => { this.change(index) }}>
+                                    </li>)
+                            })
+                        }
+
+                    </ul> */}
+                    {/* <div className="control" style={{ width: "100%", height: "10%" }}>
+                        <span style={{ position: "absolute", top: "86%", width: "3%", height: "8%" }} className="left" onClick={(e) => { this.previous(e) }}>
+                            <img src='/assets/images/leadership/zuofanye.png' style={{ width: "100%", height: "100%" }} />
+                        </span>
+                        <span style={{ position: "absolute", top: "86%", width: "3%", height: "8%", right: "6%" }} className="right" onClick={(e) => { this.next(e) }}>
+                            <img src='/assets/images/leadership/youofanye.png' style={{ width: "100%", height: "100%" }} />
+                        </span>
+                    </div> */}
+                </div>
+            </div>
+        )
+    }
+    componentDidMount() { //一开始自动播放
+        this.start();
+    }
+
+    componentWillUnmount() { //销毁前清除定时器
+        this.stop();
+    }
+    stop = () => { //暂停
+        let { timer } = this.state;
+        clearInterval(timer);
+    }
+    start = () => { //开始
+        let { timer } = this.state;
+        timer = setInterval(() => {
+            this.next();
+        }, 3000);
+        this.setState({
+            timer
+        })
+    }
+    change = (index) => { //点击下面的按钮切换当前显示的图片
+        let { showIndex } = this.state;
+        showIndex = index;
+        this.setState({
+            showIndex
+        })
+    }
+    previous = (e) => { //上一张
+        let ev = e || window.event;
+        let { showIndex, imgs } = this.state;
+        if (showIndex <= 0) {
+            showIndex = imgs.length - 1;
+        } else {
+            showIndex--;
+        }
+        this.setState({
+            showIndex
+        })
+    }
+    next = (e) => { //下一张
+        let ev = e || window.event;
+        let { showIndex, imgs } = this.state;
+        if (showIndex >= imgs.length - 1) {
+            showIndex = 0;
+        } else {
+            showIndex++;
+        }
+        this.setState({
+            showIndex
+        })
+    }
+}
+export default ReactCarousel;

web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js

@@ -8,6 +8,7 @@ const Leftbottomecharts = (props) => {
     const [count, setCount] = useState([])
     const [value, setValue] = useState([])
     const [flag, setFlag] = useState(true)
+    const [years, setYears] = useState()
     useEffect(() => {
         const res = dispatch(getdaolutongji()).then((res) => {
             console.log(res);
@@ -17,7 +18,10 @@ const Leftbottomecharts = (props) => {
             setCount(res.payload.data.construction.map((item, index) => {
                 return item.count.toFixed(3)
             }))
-            setValue()
+            setValue(res.payload.data.constructionRebuild.map((item, index) => {
+                return item.count
+            }))
+            // setYears()
         });
     }, [])
     // console.log(list, count);

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

@@ -65,7 +65,7 @@ const Rightbottom = (props) => {
                                 </div>
                                 <div style={{ position: "absolute", top: "0", width: "50%", left: "50%", paddingRight: "10px" }}>
                                     <p style={{ color: "rgba(216,240,255,0.8)", marginTop: "30px", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>车牌号<span style={{ color: "#EEF4FF", marginLeft: "33px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.licensePlate}</span></p>
-                                    <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>检测点<span style={{ color: "#EEF4FF", marginLeft: "30px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>123456</span></p>
+                                    <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>检测点<span style={{ color: "#EEF4FF", marginLeft: "30px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.nameOfInspectionPoint ? item.nameOfInspectionPoint : "--"}</span></p>
                                     <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>处罚<span style={{ color: "#FF0001", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.deductPoints ? "-" + item.deductPoints + "分" : ""}{item.deductPoints && item.fine ? "和" : ""}{item.fine ? "-" + item.fine + "元" : ""}{item.deductPoints || item.fine ? "" : "--"}</span></p>
                                     <p style={{ color: "rgba(216,240,255,0.8)", fontSize: "14px", fontFamily: "PingFangSC-Regular, PingFang SC" }}>日期<span style={{ color: "#EEF4FF", marginLeft: "50px", fontFamily: " PingFangSC-Medium, PingFang SC" }}>{item.processingTime ? item.processingTime : "--"}</span></p>
                                 </div>

web/package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "test": "mocha",
     "start": "cross-env NODE_ENV=development npm run start-params",
-    "start-params": "node server -p 4000 -u http://localhost:14000 --qndmn http://rfkimpwbb.hn-bkt.clouddn.com",
+    "start-params": "node server -p 5000 -u http://localhost:14000 --qndmn http://rfkimpwbb.hn-bkt.clouddn.com",
     "deploy": "export NODE_ENV=production&&npm run color && npm run build && node server",
     "build-dev": "export NODE_ENV=development&&webpack --config webpack.config.js",
     "build": "export NODE_ENV=production&&webpack --config webpack.config.prod.js",