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

import React, { useEffect, useState } 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 { Carousel } from 'antd'
import Module from '../../public/module'
import RightBottom from './Rightbottom'
import AutoRollComponent from './AutoRollComponent'
import './style.less'
import {getdaolutongji,getxuanchuan} from '../../../actions/example'
const Build = (props) => {
    const { dispatch } = 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 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!=='null'))
        setbuildingnumber(res.payload.data)
        console.log(res.payload.data,'哈哈哈')
        
    }

    //获取宣传栏数据
    const requestxuanchuanlan = async ()=>{
        const res = await dispatch(getxuanchuan());
       
        // setdata(alltype.filter(item=>item.name!=='null'))
        setxuandata(res.payload.data)
        console.log(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 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 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 sunonlineproject = onlineproject.reduce((x,y)=>x+y.total,0)
       let safetyData = alldengji.filter(item=>item.name!=='null')
       let sundata = data.reduce((x,y)=>x+y.value,0)
       let sunsafetyData = safetyData.reduce((x,y)=>x+y.value,0)
      console.log(safetyData,'好凶猛')
      console.log(data1,'对比')
      // console.log(totalgongli,"好好的")
    // console.log(keepThreeNum(totalgongli),'jjjjj')
    useEffect(()=>{
        requestbuildingnumber();
        requestxuanchuanlan()
    },[])
    // const datas = new Array(15)
    // datas.fill({
    //     name:"东乡镇",
    //     number:"11111",
    //     gongli:'9999'
    // },0,15)
    const rendercontent = ()=>{
        return (<div className='build-left-center-content'>
        {datas.map(({name,number,gongli},index)=><div className='build-left-center-item' key={index}>
        <span>{name}</span>
        <span>{number}</span>
        <span>{gongli}</span>
    </div>)}
    </div>)
    }
    return (
       <div className='bgbuild'>
        <div className='bgbuild-left'>
            <Module title={"各种状态公路数量统计"} style={{ width: "100%",
            height:" 33%"
            }} customize = {true}>
               <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/zhuangtaigonglui.png' className='build-left-top-center'/>
                    <div className='build-left-top-item'>
                        <div>
                            {/* <i>&#9658;</i> */}
                            <span/>
                            <span>已建公路数量</span> 
                        </div>
                        <div>{buildingnumber?.buildedRoad || 0}</div>
                    </div>
               </div>
            </Module>
            <Module title={"各乡镇道路占比统计"} style={{ width: "100%",
            height:" 33%",marginTop:'3%'
            }} customize = {true}>
                <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>
            </Module>
            <Module title={"道路统计"} style={{ width: "100%",
            height:" 30%",marginTop:'3%'
            }} customize = {true}>
                <LeftBottom
          data={data}
          width='100%'
          height='100%'
          text='道路总公里'
          total={keepThreeNum(sundata)}
        //   colorList={colorList}
        //   underColorList={underColorList}
        />
            </Module>
           
        </div>
        <div className='bgbuild-right'>
        <Module title={"宣传栏"} style={{ width: "100%",
            height:" 33%"
            }}>
               <div className='build-right-top'>
               <img src='/assets/images/quanju/xuanchuanlan.jpg'></img>
               <h2>全面建设好农村公路，切实发挥先行官作用</h2>
               </div>
            </Module>
        <Module title={"各乡镇在建公路工程"} style={{ width: "100%",
            height:" 33%",marginTop:'3%'
            }} customize = {true}>
                <Rightcenter data={onlineproject} sundata={sunonlineproject}/>
            </Module>
        <Module title={"公路等级统计"} style={{ width: "100%",
            height:" 30%",marginTop:'3%'
            }} customize = {true}>
                <RightBottom  width='100%'
          height='100%'
          text='道路总公里'
          total={sunsafetyData}
           data={keepThreeNum(safetyData)}/>
            </Module>
        </div>
        </div>
    )
}
function mapStateToProps(state) {
    const { auth, depMessage } = 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,
    };
}
export default connect(mapStateToProps)(Build);