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

Write Preview
Loading…
Cancel
Save