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

import React, { useEffect, useState, useRef } from 'react'
import { connect } from 'react-redux';
// import LeftTop from './Lefttop'
// import LeftCenter from './Leftcenter'
import LeftBottom from './Leftbottom'
// import RightTop from './Righttop'
import Rightcenter from './Rightcenter'
// import Rightbottom from './Rightbottom'
import NoData from '../../public/noData';
import Module from '../../public/module'
import RightBottom from './Rightbottom'
import AutoRollComponent from './AutoRollComponent'
import './style.less'
import { getdaolutongji, getxuanchuan } from '../../../actions/example'
import { Carousel } from 'antd';
import { getProject } from '../../../../fillion/actions/infor'

// import { number } from 'echarts';
const Build = (props) => {
    const { dispatch, projectList } = 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)
    const lunbo = useRef(null)
    const lunbovideo = useRef(null)
    const [lunboindex, setlunboindex] = useState(0)

    //
    const lunboMsg = useRef({ index: 0 })

    //获取道路管理数据
    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])) }))
        setdata(alltype.filter(item => item.name === '县' || item.name === "乡" || item.name === '村'))
        setbuildingnumber(res.payload.data)
    }

    //获取宣传栏数据
    const requestxuanchuanlan = async () => {
        const res = await dispatch(getxuanchuan());
        // setdata(alltype.filter(item=>item.name!=='null'))
        setxuandata(res.payload.data || [])
    }

    let t1 = Object.values(buildingnumber?.townRoad || {})

    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) => {
        let resValue = 0
        //小数点的位置
        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)
        } else {
            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) => {
        return b.number - a.number
    })
    list = list.filter(item => item.name !== "其他")

    //道路等级数据
    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) => {
        return b.total - a.total
    })
    let sunonlineproject = onlineproject?.reduce((x, y) => x + y.total, 0)
    let buildingCount = buildingnumber?.buildingCount
    //let projectAll=
    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(() => {
        requestbuildingnumber();
        requestxuanchuanlan()
        dispatch(getProject())
    }, [])

    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>)
    }
    // const xuandata1 = [
    //     {
    //         "id": 26,
    //         "name": "111",
    //         "video":null,
    //         "enable": true
    //     }
    // ]

    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)
                    }
                }
            }
        }
    }

    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/yuanhuan.webp' className='build-left-top-center' />
                            <div className='build-left-top-item'>
                                <div>{buildingCount || 0}</div>
                                <div>
                                    {/* <i>&#9658;</i> */}
                                    {/* <span /> */}
                                    <span>在建数量</span>
                                </div>
                            </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>
                                        <div>
                                            <span>公路公里数/公里</span>
                                            <span>{keepThreeNum(totalgongli)}</span>
                                        </div>
                                    </div>
                                    <div>
                                        <img src='/assets/images/quanju/gongluzong.png'></img>
                                        <div>
                                            <span>公路总数/条</span>
                                            <span>{totalcount || 0}</span>
                                        </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: " 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 title={"道路统计"} style={{
                    width: "100%",
                    height: " 30%", marginTop: '3%'
                }} customize={true}>
                    {data && sundata !== 0 ? <LeftBottom
                        data={data}
                        width='100%'
                        height='100%'
                        text='道路总公里'
                        //total={keepThreeNum(sundata)}
                        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 dots={false} ref={lunbo} key={lunboindex}>
                            {/* {
                                videos.map((v, i) => {
                                    return i == lunboMsg.current.index ?
                                        <video src={`${localStorage.getItem("qndmn")}/${v}`} key={Math.random()} autoPlay={i == lunboMsg.current.index} onEnded={() => {
                                            if (i == videos.length - 1) {
                                                setlunboindex(0)
                                                lunboMsg.current.index = 0
                                                lunbo.current.goTo(1)
                                            } else {
                                                setlunboindex(i + 1)
                                                lunboMsg.current.index = i + 1
                                                lunbo.current.next()
                                            }
                                        }}></video>
                                        : <p>123</p>
                                })
                            } */}

                            {
                                xuandata && xuandata !== null && xuandata.length !== 0 ? xuandata.filter(i => i.enable).map((item, index1) => {

                                    if (item.video && item.video !== null && item.video.length !== 0) {
                                        return item.video.map((i, index) => {
                                            if (index1 === lunboindex) {
                                                return <video src={`${localStorage.getItem("qndmn")}/${i}`} autoPlay={true} ref={lunbovideo} onEnded={() => {
                                                    if (index1 < xuandata.filter(i => i.enable).length - 1) {
                                                        setlunboindex(lunboindex + 1)
                                                    } else {
                                                        setlunboindex(0)
                                                    }

                                                }}></video>
                                            } else {
                                                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={buildingCount} /> : <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>
        </>
    )
}
function mapStateToProps (state) {
    const { auth, depMessage, projectList } = state;
    const pakData = (dep) => {
        return dep.map((d) => {
            return {
                title: d.name,
                value: d.id,
                // children: d.type >= 2 ? [] : pakData(d.subordinate)
                children: pakData(d.subordinate)
            }
        })
    }
    let depData = pakData(depMessage.data || [])
    return {
        user: auth.user,
        depMessage: depMessage.data || [],
        depLoading: depMessage.isRequesting,
        depData,
        projectList: projectList.data || []
    };
}
export default connect(mapStateToProps)(Build);