|
|
@ -13,9 +13,11 @@ 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 { getProject } from '../../../../fillion/actions/infor' |
|
|
|
|
|
|
|
|
// import { number } from 'echarts';
|
|
|
// import { number } from 'echarts';
|
|
|
const Build = (props) => { |
|
|
const Build = (props) => { |
|
|
const { dispatch } = props |
|
|
const { dispatch, projectList } = props |
|
|
let data1 = [ |
|
|
let data1 = [ |
|
|
{ name: "县", value: 207 }, |
|
|
{ name: "县", value: 207 }, |
|
|
{ name: "乡", value: 729 }, |
|
|
{ name: "乡", value: 729 }, |
|
|
@ -26,8 +28,6 @@ const Build = (props) => { |
|
|
// {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([]) |
|
|
@ -43,22 +43,17 @@ const Build = (props) => { |
|
|
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,'打他啊')
|
|
|
|
|
|
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, '哈哈哈') |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
//获取宣传栏数据
|
|
|
//获取宣传栏数据
|
|
|
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, '宣传栏数据') |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
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 //乡镇道路占比总公里数
|
|
|
@ -86,7 +81,6 @@ const Build = (props) => { |
|
|
return b.number - a.number |
|
|
return b.number - a.number |
|
|
}) |
|
|
}) |
|
|
list = list.filter(item => item.name !== "其他") |
|
|
list = list.filter(item => item.name !== "其他") |
|
|
// 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])) })) |
|
|
@ -95,10 +89,8 @@ const Build = (props) => { |
|
|
onlineproject = onlineproject.sort((a, b) => { |
|
|
onlineproject = onlineproject.sort((a, b) => { |
|
|
return b.total - a.total |
|
|
return b.total - a.total |
|
|
}) |
|
|
}) |
|
|
//console.log('onlineproject', onlineproject)
|
|
|
|
|
|
let sunonlineproject = onlineproject?.reduce((x, y) => x + y.total, 0) |
|
|
let sunonlineproject = onlineproject?.reduce((x, y) => x + y.total, 0) |
|
|
let buildingCount = buildingnumber?.buildingCount |
|
|
let buildingCount = buildingnumber?.buildingCount |
|
|
//console.log('projectAll', projectAll)
|
|
|
|
|
|
//let projectAll=
|
|
|
//let projectAll=
|
|
|
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) |
|
|
@ -107,10 +99,13 @@ const Build = (props) => { |
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
requestbuildingnumber(); |
|
|
requestbuildingnumber(); |
|
|
requestxuanchuanlan() |
|
|
requestxuanchuanlan() |
|
|
|
|
|
dispatch(getProject()) |
|
|
}, []) |
|
|
}, []) |
|
|
|
|
|
|
|
|
useEffect(() => { |
|
|
useEffect(() => { |
|
|
lunbo.current.goTo(lunboindex) |
|
|
lunbo.current.goTo(lunboindex) |
|
|
}, [lunboindex]) |
|
|
}, [lunboindex]) |
|
|
|
|
|
|
|
|
const rendercontent = () => { |
|
|
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}> |
|
|
@ -128,8 +123,6 @@ const Build = (props) => { |
|
|
// "enable": true
|
|
|
// "enable": true
|
|
|
// }
|
|
|
// }
|
|
|
// ]
|
|
|
// ]
|
|
|
// console.log(localStorage.getItem("qndmn"), '七牛')
|
|
|
|
|
|
// console.log(xuandata, "宣传")
|
|
|
|
|
|
|
|
|
|
|
|
let videos = [] |
|
|
let videos = [] |
|
|
if (xuandata && xuandata.length) { |
|
|
if (xuandata && xuandata.length) { |
|
|
@ -143,7 +136,7 @@ const Build = (props) => { |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
console.log(lunboindex) |
|
|
|
|
|
return ( |
|
|
return ( |
|
|
<> |
|
|
<> |
|
|
<div className='bgbuild-left'> |
|
|
<div className='bgbuild-left'> |
|
|
@ -174,11 +167,13 @@ const Build = (props) => { |
|
|
</div> : <NoData />} |
|
|
</div> : <NoData />} |
|
|
</div> |
|
|
</div> |
|
|
</Module> |
|
|
</Module> |
|
|
<Module title={"各乡镇现有道路统计"} style={{ |
|
|
{/* <Module title={"各乡镇现有道路统计"} style={{ |
|
|
width: "100%", |
|
|
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> |
|
|
<div> |
|
|
<img src='/assets/images/quanju/gonglugongli.png'></img> |
|
|
<img src='/assets/images/quanju/gonglugongli.png'></img> |
|
|
@ -202,7 +197,45 @@ const Build = (props) => { |
|
|
</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 title={"在建项目列表"} style={{ |
|
|
|
|
|
width: "100%", |
|
|
|
|
|
height: " 33%", marginTop: '3%' |
|
|
|
|
|
}} customize={true}> |
|
|
|
|
|
{ |
|
|
|
|
|
totalcount && totalcount !== 0 ? |
|
|
|
|
|
<div className='build-left-center' style={{ padding: 12 }}> |
|
|
|
|
|
<div className='build-left-center'> |
|
|
|
|
|
<div className='build-left-center-titile'> |
|
|
|
|
|
<span>项目名称</span> |
|
|
|
|
|
<span>项目规模(公里)</span> |
|
|
|
|
|
<span>项目投资(万元)</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<AutoRollComponent content={ |
|
|
|
|
|
<div className='build-left-center-content'> |
|
|
|
|
|
{ |
|
|
|
|
|
projectList.map((p, index) => { |
|
|
|
|
|
return ( |
|
|
|
|
|
<div className='build-left-center-item' key={index}> |
|
|
|
|
|
<span className='ellipsis' title={p.entryName}>{p.entryName}</span> |
|
|
|
|
|
<span>{p.projectMileage}</span> |
|
|
|
|
|
<span>{p.investment}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
) |
|
|
|
|
|
}) |
|
|
|
|
|
} |
|
|
|
|
|
</div> |
|
|
|
|
|
} |
|
|
|
|
|
containerStyle={{ position: "relative", height: "85%", }} |
|
|
|
|
|
divHeight={"100%"} divId={"chart"} |
|
|
|
|
|
/> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
: <NoData /> |
|
|
|
|
|
} |
|
|
</Module> |
|
|
</Module> |
|
|
<Module title={"道路统计"} style={{ |
|
|
<Module title={"道路统计"} style={{ |
|
|
width: "100%", |
|
|
width: "100%", |
|
|
@ -213,6 +246,7 @@ const Build = (props) => { |
|
|
width='100%' |
|
|
width='100%' |
|
|
height='100%' |
|
|
height='100%' |
|
|
text='道路总公里' |
|
|
text='道路总公里' |
|
|
|
|
|
//total={keepThreeNum(sundata)}
|
|
|
total={keepThreeNum(sundata)} |
|
|
total={keepThreeNum(sundata)} |
|
|
// colorList={colorList}
|
|
|
// colorList={colorList}
|
|
|
// underColorList={underColorList}
|
|
|
// underColorList={underColorList}
|
|
|
@ -231,17 +265,13 @@ const Build = (props) => { |
|
|
<Carousel dots={false} ref={lunbo} key={lunboindex}> |
|
|
<Carousel dots={false} ref={lunbo} key={lunboindex}> |
|
|
{/* { |
|
|
{/* { |
|
|
videos.map((v, i) => { |
|
|
videos.map((v, i) => { |
|
|
console.log('first') |
|
|
|
|
|
return i == lunboMsg.current.index ? |
|
|
return i == lunboMsg.current.index ? |
|
|
<video src={`${localStorage.getItem("qndmn")}/${v}`} key={Math.random()} autoPlay={i == lunboMsg.current.index} onEnded={() => { |
|
|
<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) { |
|
|
if (i == videos.length - 1) { |
|
|
setlunboindex(0) |
|
|
setlunboindex(0) |
|
|
lunboMsg.current.index = 0 |
|
|
lunboMsg.current.index = 0 |
|
|
lunbo.current.goTo(1) |
|
|
lunbo.current.goTo(1) |
|
|
} else { |
|
|
} else { |
|
|
console.log('first222', i + 1) |
|
|
|
|
|
setlunboindex(i + 1) |
|
|
setlunboindex(i + 1) |
|
|
lunboMsg.current.index = i + 1 |
|
|
lunboMsg.current.index = i + 1 |
|
|
lunbo.current.next() |
|
|
lunbo.current.next() |
|
|
@ -256,23 +286,16 @@ const Build = (props) => { |
|
|
|
|
|
|
|
|
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(index1, 'index1') |
|
|
|
|
|
if (index1 === lunboindex) { |
|
|
if (index1 === lunboindex) { |
|
|
// lunbo.current.goTo(lunboindex)
|
|
|
|
|
|
console.log("自动播放", index1) |
|
|
|
|
|
return <video src={`${localStorage.getItem("qndmn")}/${i}`} autoPlay={true} ref={lunbovideo} onEnded={() => { |
|
|
return <video src={`${localStorage.getItem("qndmn")}/${i}`} autoPlay={true} ref={lunbovideo} onEnded={() => { |
|
|
if (index1 < xuandata.filter(i => i.enable).length - 1) { |
|
|
if (index1 < xuandata.filter(i => i.enable).length - 1) { |
|
|
// console.log(index1,xuandata,'触发了')
|
|
|
|
|
|
setlunboindex(lunboindex + 1) |
|
|
setlunboindex(lunboindex + 1) |
|
|
} else { |
|
|
} else { |
|
|
// console.log(index1,xuandata,'触发了')
|
|
|
|
|
|
setlunboindex(0) |
|
|
setlunboindex(0) |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
}}></video> |
|
|
}}></video> |
|
|
} else { |
|
|
} else { |
|
|
// console.log("不自动播放",index1)
|
|
|
|
|
|
return <video src={`${localStorage.getItem("qndmn")}/${i}`} autoPlay={false} ></video> |
|
|
return <video src={`${localStorage.getItem("qndmn")}/${i}`} autoPlay={false} ></video> |
|
|
} |
|
|
} |
|
|
}) |
|
|
}) |
|
|
@ -308,7 +331,7 @@ const Build = (props) => { |
|
|
) |
|
|
) |
|
|
} |
|
|
} |
|
|
function mapStateToProps (state) { |
|
|
function mapStateToProps (state) { |
|
|
const { auth, depMessage } = state; |
|
|
const { auth, depMessage, projectList } = state; |
|
|
const pakData = (dep) => { |
|
|
const pakData = (dep) => { |
|
|
return dep.map((d) => { |
|
|
return dep.map((d) => { |
|
|
return { |
|
|
return { |
|
|
@ -325,6 +348,7 @@ function mapStateToProps(state) { |
|
|
depMessage: depMessage.data || [], |
|
|
depMessage: depMessage.data || [], |
|
|
depLoading: depMessage.isRequesting, |
|
|
depLoading: depMessage.isRequesting, |
|
|
depData, |
|
|
depData, |
|
|
|
|
|
projectList: projectList.data || [] |
|
|
}; |
|
|
}; |
|
|
} |
|
|
} |
|
|
export default connect(mapStateToProps)(Build); |
|
|
export default connect(mapStateToProps)(Build); |
|
|
|
