forgeplus-react/src/forge/Information/Pages/main.jsx

import React , { useState , useEffect } from 'react';
import { Menu , Spin , Skeleton } from 'antd';
import Hot from '../Component/hot';
import { Box , LongWidth } from '../../Component/layout';
import { Link } from 'react-router-dom';
import Lists from './newsList';
import guideArrow from '../img/guideArrow.png';
import axios from 'axios';
import shijian from '../img/shijian.png';
import liulan from '../img/liulan.png';
import emptydata from '../../Images/nodata.png';
import DefaultImg from '../Component/defaultImg';
import { getNewsAllList , getNewsHotList } from '../api';

function Main(props){
  const [ key , setKey ] = useState("1");
  const [ mainList , setMainList ] = useState(undefined);
  const [ name , setName] = useState(undefined);
  const [ menuH , setMenuH ] = useState(true);
  const [ hotList , setHotList ] = useState(undefined);
  const [ isSpin , setIsSpin ] = useState(true);
  const { deptId , cateId } = props.match.params;
  const { id } = props;


  useEffect(()=>{
    if(id) {
      setIsSpin(true);
      getMainList();
      getHotList();
    }
  },[id])

  function getMainList(){
    getNewsAllList(id).then(result=>{
      if(result){
        let rows = result.data.rows;
        setMainList(rows);
        setTimeout(() => {
          let ele = document.getElementById("menus");
          if(ele){
            let h = ele.clientHeight;
            setMenuH(h>56);
          }
          setIsSpin(false);
        }, 100);
      }
    }).catch(error=>{})
  }

  function getHotList(){
    getNewsHotList(id,{
      pageSize:15,pageNum:1
    }).then(result=>{
      if(result){
        setHotList(result.data.rows);
      }
    }).catch(error=>{})
  }

  return(
    <div>
      <div className="main_content">
        <div className="boxmain">
          <p className="in_title">领域资讯</p>
          {
            mainList && mainList.length>0 && 
            <Menu mode={"horizontal"} id="menus" selectedKeys={[cateId||"0"]} style={{justifyContent:menuH?"flex-start":"center"}}>
              <Menu.Item key={"0"}><Link to={`/zone/${deptId}/news`}>全部</Link></Menu.Item>
              {
                mainList.map((i,k)=>{
                  return(
                    <Menu.Item key={`${i.id}`}><Link to={`/zone/${deptId}/news/${i.id}`}>{i.name}</Link></Menu.Item>
                  )
                })
              }
            </Menu>
          }
          {
            !mainList && <div style={{height:105}}><Skeleton /></div>
          }
        </div>
        <div style={{width:'1200px',margin:"0px auto"}}>
          <Box>
            <LongWidth>
              <Spin spinning={isSpin}>
                {
                  cateId ? 
                  <Lists {...props}/>
                  :
                  <div style={{minHeight:"400px"}}>
                  {
                    mainList && mainList.length>0 &&
                    mainList.map((i,k)=>{
                      return(
                        <div className="main_card radius4" style={{paddingTop:"25px"}}>
                          <div className="guide">
                            <span className="task-hide">{i.name}</span>
                            { i.cmsDocList && i.cmsDocList.length> 0 && <Link className="flexCenter" to={`/zone/${deptId}/news/${i.id}`} onClick={()=>{window.scrollTo(0,400)}}>更多<img src={guideArrow} alt="" width="14px"/></Link> }
                          </div>
                          <div>
                            {
                              i.cmsDocList && i.cmsDocList.length>0 ?
                              i.cmsDocList.map((j,e)=>{
                                return(
                                  <div className="main_card_item" onClick={()=>{props.history.push(`/zone/${deptId}/newdetail/${j.id}`)}}>
                                    {e===0 && 
                                      (
                                        j.headImg ?
                                        <img src={j.headImg} alt=""/>
                                        :
                                        <DefaultImg name="GitLink" title={i.name} />
                                      )
                                    }
                                    <div style={{flex:1,width:0}}>
                                      <Link to={`/zone/${deptId}/newdetail/${j.id}`} className={`sub_name task-hide ${e===0? "":"sub_i"}`}>{j.name}</Link>
                                      <p className={`sub_desc ${e===0? "task-hide-2":"task-hide"}`}>
                                      {j.summary}
                                      </p>
                                      <div className="sub_info">
                                        <span><img src={shijian} alt="" />{j.publishTime}</span>
                                        <span><img src={liulan} alt="" />{j.visits}</span>
                                      </div>
                                    </div>
                                  </div>
                                )
                              })
                              :
                              <div style={{display:"flex",justifyContent:"center",alignItems:"center",flexDirection:"column",height:300}}>
                                <img src={emptydata} alt="" width="230"/>
                                <p className="font-15 color-grey-6 mt20">暂无数据~</p>
                              </div>
                            }
                          </div>
                        </div>
                      )
                    })
                  }
                  </div>
                }
              </Spin>
            </LongWidth>
            {
              hotList && hotList.length>0 &&
              <div className="short_width radius4">
                <Hot title={"热门资讯"} list={hotList} deptId={deptId}/>
              </div>
            }
          </Box>
        </div>
      </div>
    </div>
  )
}
export default Main;