forgeplus-react/src/forge/Information/Pages/JCC/homePage.jsx

import React,{ useState, useRef, useEffect } from 'react';
import { httpUrl } from '../../fetch';
import img1 from '../../img/img1.png';

import visionFw from '../../img/vision-fw.png';
import visionYj from '../../img/vision-yj.png';
import visionZy from '../../img/vision-zy.png';
import visionJz from '../../img/vision-jz.png';
import guideArrow from '../../img/guideArrow1.png';
import { Link } from 'react-router-dom';
import shijian from '../../img/shijian.png';
import axios from 'axios';
import Projects from '../../Component/projects';
import PartnerJcc from './Component/partnerJcc';
import '../../indexZone1.scss'
import './index.scss'
import { Popover, Tabs } from 'antd';

let tabTimer = undefined;

function HeaderPageJCC(props){
  const [ projectList , setProjectList ] = useState(undefined);
  const [ personList , setPersonList ] = useState(undefined);
  const [ newsList, setNewsList ] = useState(undefined);
  const [ partnerList, setParterList ] = useState(undefined);
  const { deptId } = props.match.params;
  const { data, id, history } = props;
  const [ activeKey, setActiveKey ] = useState(undefined);

  const vision = [
    {imageUrl: visionFw, title: '服务无边界'},
    {imageUrl: visionYj, title: '云间有协作'},
    {imageUrl: visionZy, title: '资源易共享'},
    {imageUrl: visionJz, title: '价值可交换'}
  ]

  useEffect(()=>{
    if(id){
      getProjectList();
      getNewsList();
      getPersonList();
      getPartnerList();
    }
    return componentWillUnmount;
  },[id])

  function componentWillUnmount() {
    clearInterval(tabTimer)
  }
  function getPersonList(){
    const url = `${httpUrl}/zone/open/${id}/member/homePageList`;
    axios.get(url).then(result=>{
      if(result){
        setPersonList(result.data.rows);
      }
    }).catch(error=>{})
  }

  function getNewsList(){
    const url = `${httpUrl}/cms/doc/open/zone/${id}/homePageDocList`;
    axios.get(url).then(result=>{
      if(result){
        setNewsList(result.data.rows);
        clearInterval(tabTimer)
        tabTimer = setInterval(() => {
          handle(result.data.rows && result.data.rows[0].id, result.data.rows)
        }, 4000)
      }
    }).catch(error=>{})
  }

  function getProjectList(){
    const url = `${httpUrl}/zone/open/${id}/project/list`;
    axios.get(url,{params:{
      isHomepage:1
    }}).then(result=>{
      if(result){
        if (result.data.rows.length < 3) {
          setProjectList(result.data.rows)
        } else {
          setProjectList([...result.data.rows, {}]);
        }
      }
    }).catch(console.error())
  }

  function getPartnerList(){
    const url = `${httpUrl}/zone/open/${id}/partners/list`;
    axios.get(url).then(result=>{
      if(result){
        const array = result.data.rows;
        const newArray = [];
        for(let i in array) {
          let e = array[i]
          if (e.zonePartnersList && e.zonePartnersList.length > 0) {
            e.zonePartnersList[0].typeName = e.typeName;
          }
          if ( e.zonePartnersList.length > 0 ) {
            newArray.push(e.zonePartnersList);
          }
        }
        setParterList(newArray);
      }
    }).catch(error=>{})
  }

  function handle(value, rows){
    // 获取新闻id的数组
    let idList = rows ? rows.map(obj => obj.id) : []
    // 获取所有 tab节点
    let tabs = document.querySelectorAll('.zone_news .ant-tabs-tab')
    const tabIndex = idList.indexOf(Number(value))
    if(tabIndex !== -1 ){
      if(tabIndex !== idList.length -1){
        tabs[tabIndex + 1].click()
      }else{
        tabs[0].click()
      }
    }
  }
  function handleTabChange(key) {
    setTimeout(()=>{
      setActiveKey(key)
    },100)
    clearInterval(tabTimer)
    tabTimer = setInterval(() => {
      handle(key, newsList)
    }, 4000)
  }

  return(
    <div className="zone_jcc_box">
      {
        // 专区简介
        data && (data.introductionTitle || data.introductionContent ||  data.introductionImage) &&
        <div className="boxmain zone_infos mb30">
            <div className="zone_infos_desc">
              {data && <p className="in_title tleft">{data.firstTitle}</p>}
              <p className="z_name">{data.introductionTitle}</p>
              <p className="z_desc task-hide-2" dangerouslySetInnerHTML={{ __html: data.introductionContent }} ></p>
            </div>
          {
            data.introductionImage &&
            <img src={data.introductionImage} alt="" width="600px" height="361px"/>
          }
        </div>
      }
      <div className="zone_vision pt40 pb100">
        <p className="in_title mb40">宗旨及愿景</p>
        <div className='boxmain'>
          {
            vision.map((i, k) => {
              return (
                <div className="vision_item" key={ k }>
                  <div className="vision_icon">
                    <img src={i.imageUrl} alt="" />
                  </div>
                  <p className="vision_title">{ i.title }</p>
                </div>
              )
            })
          }
        </div>
      </div>
      {
        // 新闻动态
        data && data.cmsShow === 1 && newsList && newsList.length>0 &&
        <div className="zone_news">
          <div className="boxmain" style={{display:"flex"}}>
            <p className="news_title">{ data.homepageCmsTitle }</p>
            <Tabs className='news_tab' tabPosition="left" onChange={handleTabChange} >
              {
                newsList.map((i,k)=>{
                  return(
                    <Tabs.TabPane  tab={i.name} key={i.id}>
                      <div className='tab-content'>
                        <Link to={`/zone/${deptId}/newdetail/${i.id}`}><div className='title_JCC'>{i.name}</div>
                        <p><img src={shijian} alt="" className="mr3 photo" />{i.publishTime}</p>
                        <p className='new_desc'>{i.summary || '-'}</p>
                        <img src={newsList[k].headImg || img1} alt="" height="260px" style={{width:"100%",objectFit:"cover"}}/></Link>
                      </div>
                    </Tabs.TabPane>
                  )
                })
              }
            </Tabs>
          </div>
        </div>
      }
      {
        // 精选项目
        data && data.projectShow === 1 && projectList && projectList.length > 0 &&
        <div className="zone_projects pt50 pb30">
          <p className="in_title mb40">{ data.homepageProjectTitle }</p>
          <Projects projectList={projectList}></Projects>
        </div>
      }

      {
        // 核心贡献者
        data && data.memberShow === 1 && personList && personList.length > 0 &&
        <div className="zone_contributor">
          <p className="in_title">{ data.homepageMemberTitle }</p>
          {
            <ul className="boxmain zone_c_lists">
              {
                personList.map((i,k)=>{
                  return(
                  <li key={k}>
                    <Popover overlayClassName="zone_popover"  content={i.introduction || "暂无~"} title={i.name} trigger="hover">
                      <Link to={`/${i.login}`}><img src={i.imageUrl} alt="" /></Link>
                    </Popover>
                  </li>
                  )
                })
              }
            </ul>
          }
        </div>
      }

      {
        // 合作伙伴
        data && data.partnersShow === 1 && partnerList && partnerList.length > 0 &&
        <div className="zone_parter">
          <p className="in_title">{ data.homepagePartnersTitle }</p>
          <PartnerJcc id={ id } partnerList={ partnerList }></PartnerJcc>
        </div>
      }

    </div>
  )
}
export default HeaderPageJCC;