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

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

@@ -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%'