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 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 { number } from 'echarts';
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]))}))
        // console.log(alltype,'打他啊')
        setdata(alltype.filter(item=>item.name==='县'||item.name==="乡"||item.name==='村'))
        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 list = datas.sort((a,b)=>{
        return b.number - a.number
      })
    //   console.log(list,'红红火')

      //道路等级数据
      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 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)
    //   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'>
        {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
    //     }
    // ]
    console.log(localStorage.getItem("qndmn"),'七牛')
    return (
       <div className='bgbuild'>
        <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/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>:<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:" 30%",marginTop:'3%'
            }} customize = {true}>
               { data&&sundata!==0?<LeftBottom
          data={data}
          width='100%'
          height='100%'
          text='道路总公里'
          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> */}
               <video src={xuandata && xuandata.length?`${localStorage.getItem("qndmn")}/${xuandata[0].video!==null&&xuandata[0].video?xuandata[0].video[0]:""}`:"#"} autoPlay="autoplay" loop></video>
               <h2>全面建设好农村公路，切实发挥先行官作用</h2>
               </div>
            </Module>
        <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%",
            height:" 30%",marginTop:'3%'
            }} customize = {true}>
                {safetyData&&sunsafetyData!==0?<RightBottom  width='100%'
          height='100%'
          text='道路总公里'
          total={keepThreeNum(sundata)}
           data={keepThreeNum(safetyData)}/>:<NoData/>}
            </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);