|
|
|
@ -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'
|
|
|
|
@ -32,6 +32,12 @@ const Build = (props) => { |
|
|
|
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 () => { |
|
|
|
@ -96,6 +102,9 @@ const Build = (props) => { |
|
|
|
requestbuildingnumber(); |
|
|
|
requestxuanchuanlan() |
|
|
|
}, []) |
|
|
|
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}> |
|
|
|
@ -113,12 +122,27 @@ 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%", |
|
|
|
<Module title={"各状态公路数量统计"} style={{ |
|
|
|
width: "100%", |
|
|
|
height: " 33%" |
|
|
|
}} customize={true}> |
|
|
|
<div style={{ height: "100%", position: "relative" }} > |
|
|
|
@ -144,7 +168,8 @@ const Build = (props) => { |
|
|
|
</div> : <NoData />} |
|
|
|
</div> |
|
|
|
</Module> |
|
|
|
<Module title={"各乡镇已建道路统计"} style={{ width: "100%", |
|
|
|
<Module title={"各乡镇已建道路统计"} style={{ |
|
|
|
width: "100%", |
|
|
|
height: " 33%", marginTop: '3%' |
|
|
|
}} customize={true}> |
|
|
|
{totalcount && totalcount !== 0 ? <div className='build-left-center'> |
|
|
|
@ -173,7 +198,8 @@ const Build = (props) => { |
|
|
|
divHeight={"100%"} divId={"chart"} /> |
|
|
|
</div> : <NoData />} |
|
|
|
</Module> |
|
|
|
<Module title={"道路统计"} style={{ width: "100%", |
|
|
|
<Module title={"道路统计"} style={{ |
|
|
|
width: "100%", |
|
|
|
height: " 30%", marginTop: '3%' |
|
|
|
}} customize={true}> |
|
|
|
{data && sundata !== 0 ? <LeftBottom |
|
|
|
@ -189,34 +215,73 @@ const Build = (props) => { |
|
|
|
|
|
|
|
</div> |
|
|
|
<div className='bgbuild-right'> |
|
|
|
<Module title={"宣传栏"} style={{ width: "100%", |
|
|
|
<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 autoplay={true} dots={false} autoplaySpeed={180000}> |
|
|
|
{xuandata&&xuandata!==null&&xuandata.length!==0?xuandata.map((item,index)=>{ |
|
|
|
<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='#'></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%", |
|
|
|
<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%", |
|
|
|
<Module title={"各路段技术等级统计"} style={{ |
|
|
|
width: "100%", |
|
|
|
height: " 30%", marginTop: '3%' |
|
|
|
}} customize={true}> |
|
|
|
{safetyData && sunsafetyData !== 0 ? <RightBottom width='100%' |
|
|
|
|
