wangyue 2 years ago
parent
commit
bc40568d7c
  1. 98
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/conter.less
  2. 6
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/daolu.js
  3. 170
      web/client/src/sections/quanju/containers/footer/leadership/centerleft/hudong.js
  4. 6
      web/client/src/sections/quanju/containers/footer/leadership/left/echarts/leftbottomecharts.js
  5. 2
      web/client/src/sections/quanju/containers/footer/leadership/right/right-bottom.js
  6. 2
      web/package.json

98
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);
// }

6
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>

170
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;

6
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);

2
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>

2
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",

Loading…
Cancel
Save