free-sun
/
Highways4Good
14
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

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

dev
LUCAS 2 years ago
parent
6bf95568e4 83afec6a51
commit
0ff14c9a0a
2 changed files with 220 additions and 155 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      web/client/src/sections/fillion/components/patrolTable.js
  2. 373
      web/client/src/sections/quanju/containers/footer/build/index.js

2
web/client/src/sections/fillion/components/patrolTable.js
View File

@ -123,7 +123,7 @@ const DetailList = (props) => {
switch (text) {
case 'road': return '道路';
case 'bridge': return '桥梁';
case 'culvert ': return '涵洞';
case 'culvert': return '涵洞';
case 'other': return '其他';
default: return text;
}

373
web/client/src/sections/quanju/containers/footer/build/index.js
View File

@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react'
import React, { useEffect, useState, useRef } from 'react'
import { connect } from 'react-redux';
// import LeftTop from './Lefttop'
// import LeftCenter from './Leftcenter'
@ -11,99 +11,108 @@ import Module from '../../public/module'
import RightBottom from './Rightbottom'
import AutoRollComponent from './AutoRollComponent'
import './style.less'
import {getdaolutongji,getxuanchuan} from '../../../actions/example'
import { getdaolutongji, getxuanchuan } from '../../../actions/example'
import { Carousel } from 'antd';
// import { number } from 'echarts';
const Build = (props) => {
const { dispatch } = props
let data1 = [
{name: "县", value: 207},
{name: "乡", value: 729},
{name: "村", value: 1938}
]
// const safetyData = [
// {name: '一级公路', value: 42},
// {name: '二级公路', value: 17},
// {name: '三级公路', value: 17},
// {name: '四级公路', value: 30},
// ]
const [buildingnumber,setbuildingnumber] = useState(0)
const [data,setdata] = useState([])
const [xuandata,setxuandata] = useState(null)
{ name: "县", value: 207 },
{ name: "乡", value: 729 },
{ name: "村", value: 1938 }
]
// const safetyData = [
// {name: '一级公路', value: 42},
// {name: '二级公路', value: 17},
// {name: '三级公路', value: 17},
// {name: '四级公路', value: 30},
// ]
const [buildingnumber, setbuildingnumber] = useState(0)
const [data, setdata] = useState([])
const [xuandata, setxuandata] = useState(null)
const lunbo = useRef(null)
const lunbovideo = useRef(null)
const [lunboindex, setlunboindex] = useState(0)
//
const lunboMsg = useRef({ index: 0 })
//获取道路管理数据
const requestbuildingnumber = async ()=>{
const requestbuildingnumber = async () => {
const res = await dispatch(getdaolutongji());
let alltype = Object.keys(res.payload.data?.roadType || {}).map((item)=>({name:item,value:Number(keepThreeNum(res.payload.data.roadType[item]))}))
let alltype = Object.keys(res.payload.data?.roadType || {}).map((item) => ({ name: item, value: Number(keepThreeNum(res.payload.data.roadType[item])) }))
// console.log(alltype,'打他啊')
setdata(alltype.filter(item=>item.name==='县'||item.name==="乡"||item.name==='村'))
setdata(alltype.filter(item => item.name === '县' || item.name === "乡" || item.name === '村'))
setbuildingnumber(res.payload.data)
// console.log(res.payload.data,'哈哈哈')
}
//获取宣传栏数据
const requestxuanchuanlan = async ()=>{
const requestxuanchuanlan = async () => {
const res = await dispatch(getxuanchuan());
// setdata(alltype.filter(item=>item.name!=='null'))
setxuandata(res.payload.data || [])
console.log(res.payload.data,'宣传栏数据')
console.log(res.payload.data, '宣传栏数据')
}
let t1 = Object.values(buildingnumber?.townRoad || {})
let totalgongli = t1.length!==0 ? t1.reduce((x,y)=>x+y.mileage,0):0 //乡镇道路占比总公里数
let totalgongli = t1.length !== 0 ? t1.reduce((x, y) => x + y.mileage, 0) : 0 //乡镇道路占比总公里数
// let totalcount = t1.length !==0 ? t1.reduce((x,y)=>x+y.roadCount,0):0 //乡镇道路占比公路总条数
let totalcount = buildingnumber?.buildedRoad || 0
// let sungongli = alltype.reduce((x,y)=>x+y.value,0)
const keepThreeNum=(value)=> {
const keepThreeNum = (value) => {
let resValue = 0
//小数点的位置
let index = value&&value.toString().indexOf('.') + 1
let index = value && value.toString().indexOf('.') + 1
//小数的位数
let num = value&&Math.abs(Number(value)).toString().length - index
if(index && num > 3){
resValue = value&&Number(value).toFixed(3)
let num = value && Math.abs(Number(value)).toString().length - index
if (index && num > 3) {
resValue = value && Number(value).toFixed(3)
} else {
resValue = value
resValue = value
}
return resValue
}
let datas = Object.keys(buildingnumber?.townRoad || {}).map((item)=>({name:item,number:buildingnumber.townRoad[item].roadCount,gongli:Number(keepThreeNum(buildingnumber.townRoad[item].mileage))}))
let list = datas.sort((a,b)=>{
}
let datas = Object.keys(buildingnumber?.townRoad || {}).map((item) => ({ name: item, number: buildingnumber.townRoad[item].roadCount, gongli: Number(keepThreeNum(buildingnumber.townRoad[item].mileage)) }))
let list = datas.sort((a, b) => {
return b.number - a.number
})
})
// console.log(list,'红红火')
//道路等级数据
let alldengji = Object.keys(buildingnumber?.roadLevel || {}).map((item)=>({name:item,value:Number(keepThreeNum(buildingnumber.roadLevel[item]))}))
//道路等级数据
let alldengji = Object.keys(buildingnumber?.roadLevel || {}).map((item) => ({ name: item, value: Number(keepThreeNum(buildingnumber.roadLevel[item])) }))
let onlineproject = Object.keys(buildingnumber?.townProject||{}).map((item)=>({name:item,total:buildingnumber.townProject[item]}))
onlineproject = onlineproject.sort((a,b)=>{
let onlineproject = Object.keys(buildingnumber?.townProject || {}).map((item) => ({ name: item, total: buildingnumber.townProject[item] }))
onlineproject = onlineproject.sort((a, b) => {
return b.total - a.total
})
let sunonlineproject = onlineproject?.reduce((x,y)=>x+y.total,0)
let safetyData = alldengji?.filter(item=>item.name==='一级公路'||item.name==='二级公路'||item.name==='三级公路'||item.name==='四级公路'||item.name==='等外公路')
let sundata = data?.reduce((x,y)=>x+y.value,0)
let sunsafetyData = safetyData?.reduce((x,y)=>x+y.value,0)
})
let sunonlineproject = onlineproject?.reduce((x, y) => x + y.total, 0)
let safetyData = alldengji?.filter(item => item.name === '一级公路' || item.name === '二级公路' || item.name === '三级公路' || item.name === '四级公路' || item.name === '等外公路')
let sundata = data?.reduce((x, y) => x + y.value, 0)
let sunsafetyData = safetyData?.reduce((x, y) => x + y.value, 0)
useEffect(()=>{
useEffect(() => {
requestbuildingnumber();
requestxuanchuanlan()
},[])
const rendercontent = ()=>{
}, [])
useEffect(()=>{
lunbo.current.goTo(lunboindex)
},[lunboindex])
const rendercontent = () => {
return (<div className='build-left-center-content'>
{list.map(({name,number,gongli},index)=><div className='build-left-center-item' key={index}>
<span>{name}</span>
<span>{number}</span>
<span>{gongli}</span>
</div>)}
</div>)
{list.map(({ name, number, gongli }, index) => <div className='build-left-center-item' key={index}>
<span>{name}</span>
<span>{number}</span>
<span>{gongli}</span>
</div>)}
</div>)
}
// const xuandata1 = [
// {
@ -113,119 +122,175 @@ const Build = (props) => {
// "enable": true
// }
// ]
console.log(localStorage.getItem("qndmn"),'七牛')
console.log(xuandata,"宣传")
// console.log(localStorage.getItem("qndmn"), '七牛')
// console.log(xuandata, "宣传")
let videos = []
if (xuandata && xuandata.length) {
for (let x of xuandata) {
if (x.enable) {
if (x.video && x.video.length) {
for (let v of x.video) {
videos.push(v)
}
}
}
}
}
console.log(lunboindex)
return (
<>
<div className='bgbuild-left'>
<Module title={"各状态公路数量统计"} style={{ width: "100%",
height:" 33%"
}} customize = {true}>
<div style={{height:"100%",position:"relative"}} >
<span style={{position:"absolute",width:"10%",color:"#FFF",backgroundColor:'rgba(216, 240, 255, 0.1)',right:"5%",textAlign:"center"}}>条</span>
{buildingnumber&&buildingnumber.buildedRoad!==0&&totalgongli!==0?<div className='build-left-top'>
<div className='build-left-top-item'>
<div>
{/* <i>&#9658;</i> */}
<span/>
<span>在建公路数量</span>
</div>
<div>{buildingnumber?.buildingRoad || 0}</div>
</div>
<img src='/assets/images/quanju/zhuangtaigonglui.png' className='build-left-top-center'/>
<div className='build-left-top-item'>
<div>
{/* <i>&#9658;</i> */}
<span/>
<span>已建公路数量</span>
</div>
<div>{buildingnumber?.buildedRoad || 0}</div>
<>
<div className='bgbuild-left'>
<Module title={"各状态公路数量统计"} style={{
width: "100%",
height: " 33%"
}} customize={true}>
<div style={{ height: "100%", position: "relative" }} >
<span style={{ position: "absolute", width: "10%", color: "#FFF", backgroundColor: 'rgba(216, 240, 255, 0.1)', right: "5%", textAlign: "center" }}>条</span>
{buildingnumber && buildingnumber.buildedRoad !== 0 && totalgongli !== 0 ? <div className='build-left-top'>
<div className='build-left-top-item'>
<div>
{/* <i>&#9658;</i> */}
<span />
<span>在建公路数量</span>
</div>
<div>{buildingnumber?.buildingRoad || 0}</div>
</div>
<img src='/assets/images/quanju/zhuangtaigonglui.png' className='build-left-top-center' />
<div className='build-left-top-item'>
<div>
{/* <i>&#9658;</i> */}
<span />
<span>已建公路数量</span>
</div>
<div>{buildingnumber?.buildedRoad || 0}</div>
</div>
</div> : <NoData />}
</div>
</div>:<NoData/>}
</div>
</Module>
<Module title={"各乡镇已建道路统计"} style={{ width: "100%",
height:" 33%",marginTop:'3%'
}} customize = {true}>
{ totalcount && totalcount!==0?<div className='build-left-center'>
<div className='build-left-center-top'>
<div>
<img src='/assets/images/quanju/gonglugongli.png'></img>
</Module>
<Module title={"各乡镇已建道路统计"} style={{
width: "100%",
height: " 33%", marginTop: '3%'
}} customize={true}>
{totalcount && totalcount !== 0 ? <div className='build-left-center'>
<div className='build-left-center-top'>
<div>
<span>公路公里数/公里</span>
<span>{keepThreeNum(totalgongli)}</span>
<img src='/assets/images/quanju/gonglugongli.png'></img>
<div>
<span>公路公里数/公里</span>
<span>{keepThreeNum(totalgongli)}</span>
</div>
</div>
</div>
<div>
<img src='/assets/images/quanju/gongluzong.png'></img>
<div>
<span>公路总数/条</span>
<span>{totalcount||0}</span>
<img src='/assets/images/quanju/gongluzong.png'></img>
<div>
<span>公路总数/条</span>
<span>{totalcount || 0}</span>
</div>
</div>
</div>
</div>
<div className='build-left-center-titile'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
<AutoRollComponent content = {rendercontent()} containerStyle={{ position: "relative", height: "50%", }}
divHeight={"100%"} divId={"chart"} />
</div>:<NoData/>}
</Module>
<Module title={"道路统计"} style={{ width: "100%",
height:" 30%",marginTop:'3%'
}} customize = {true}>
{ data&&sundata!==0?<LeftBottom
data={data}
width='100%'
height='100%'
text='道路总公里'
total={keepThreeNum(sundata)}
// colorList={colorList}
// underColorList={underColorList}
/>:<NoData/>}
</Module>
</div>
<div className='bgbuild-right'>
<Module title={"宣传栏"} style={{ width: "100%",
height:" 33%"
}} customize={true}>
<div className='build-right-top'>
{/* <img src='/assets/images/quanju/xuanchuanlan.jpg'></img> */}
<Carousel autoplay={true} dots={false} autoplaySpeed={180000}>
{xuandata&&xuandata!==null&&xuandata.length!==0?xuandata.map((item,index)=>{
<div className='build-left-center-titile'>
<span>乡镇名称</span>
<span>公路数量/条</span>
<span>公里</span>
</div>
<AutoRollComponent content={rendercontent()} containerStyle={{ position: "relative", height: "50%", }}
divHeight={"100%"} divId={"chart"} />
</div> : <NoData />}
</Module>
<Module title={"道路统计"} style={{
width: "100%",
height: " 30%", marginTop: '3%'
}} customize={true}>
{data && sundata !== 0 ? <LeftBottom
data={data}
width='100%'
height='100%'
text='道路总公里'
total={keepThreeNum(sundata)}
// colorList={colorList}
// underColorList={underColorList}
/> : <NoData />}
</Module>
</div>
<div className='bgbuild-right'>
<Module title={"宣传栏"} style={{
width: "100%",
height: " 33%"
}} customize={true}>
<div className='build-right-top'>
{lunboindex}//{lunboMsg.current.index}
{/* <img src='/assets/images/quanju/xuanchuanlan.jpg'></img> */}
<Carousel dots={true} ref={lunbo} key={lunboindex} afterChange={(current)=>{
setlunboindex(current)}}>
{/* {
videos.map((v, i) => {
console.log('first')
return i == lunboMsg.current.index ?
<video src={`${localStorage.getItem("qndmn")}/${v}`} key={Math.random()} autoPlay={i == lunboMsg.current.index} onEnded={() => {
console.log('end', i + 1, videos.length)
if (i == videos.length - 1) {
setlunboindex(0)
lunboMsg.current.index = 0
lunbo.current.goTo(1)
} else {
console.log('first222', i + 1)
setlunboindex(i + 1)
lunboMsg.current.index = i + 1
lunbo.current.next()
}
}}></video>
: <p>123</p>
})
} */}
{
xuandata&&xuandata!==null&&xuandata.length!==0?xuandata.map((item,index1)=>{
if(item.enable){
if(item.video&&item.video!==null&&item.video.length!==0){
return item.video.map((i,index)=>{
// console.log(i,'视频')
return <video src={`${localStorage.getItem("qndmn")}/${i}`} autoPlay="autoplay" loop></video>
console.log(index1,'index1')
if(index1-1===lunboindex){
// lunbo.current.goTo(lunboindex)
console.log("自动播放",index1)
return <video src={`${localStorage.getItem("qndmn")}/${i}`} autoPlay={true} ref={lunbovideo} loop></video>
}else{
// console.log("不自动播放",index1)
return <video src={`${localStorage.getItem("qndmn")}/${i}`} autoPlay={false}></video>
}
})
}
// return <video src={`${localStorage.getItem("qndmn")}/${item.video!==null&&item.video.length!==0?item.video[0]:""}`} autoPlay="autoplay" loop></video>
}
}):<video src='#'></video>}
{/* <video src={xuandata&&xuandata!==null&&xuandata.length!==0?`${localStorage.getItem("qndmn")}/${xuandata[0].video!==null&&xuandata[0].video?xuandata[0].video[0]:""}`:"#"} autoPlay="autoplay" loop></video> */}
</Carousel>
<h2>全面建设好农村公路，切实发挥先行官作用</h2>
</div>
</Module>
<Module title={"各乡镇在建工程统计"} style={{ width: "100%",
height:" 33%",marginTop:'3%'
}} customize = {true}>
{sunonlineproject!==0?<Rightcenter data={onlineproject} sundata={sunonlineproject}/>:<NoData/>}
</Module>
<Module title={"各路段技术等级统计"} style={{ width: "100%",
height:" 30%",marginTop:'3%'
}} customize = {true}>
{safetyData&&sunsafetyData!==0?<RightBottom width='100%'
height='100%'
text='道路总公里'
total={keepThreeNum(sundata)}
data={keepThreeNum(safetyData)}/>:<NoData/>}
</Module>
</div>
})
:<video src='#'></video>
}
{/* <video src={xuandata&&xuandata!==null&&xuandata.length!==0?`${localStorage.getItem("qndmn")}/${xuandata[0].video!==null&&xuandata[0].video?xuandata[0].video[0]:""}`:"#"} autoPlay="autoplay" loop></video> */}
</Carousel>
<h2>全面建设好农村公路，切实发挥先行官作用</h2>
</div>
</Module>
<Module title={"各乡镇在建工程统计"} style={{
width: "100%",
height: " 33%", marginTop: '3%'
}} customize={true}>
{sunonlineproject !== 0 ? <Rightcenter data={onlineproject} sundata={sunonlineproject} /> : <NoData />}
</Module>
<Module title={"各路段技术等级统计"} style={{
width: "100%",
height: " 30%", marginTop: '3%'
}} customize={true}>
{safetyData && sunsafetyData !== 0 ? <RightBottom width='100%'
height='100%'
text='道路总公里'
total={keepThreeNum(sundata)}
data={keepThreeNum(safetyData)} /> : <NoData />}
</Module>
</div>
</>
)
}

Write Preview
Loading…
Cancel
Save