forked from Gitlink/forgeplus-react
302 lines
13 KiB
JavaScript
302 lines
13 KiB
JavaScript
import React,{ useState, useEffect } from 'react';
|
||
import { httpUrl } from '../fetch';
|
||
|
||
import img1 from '../img/img1.png';
|
||
import img2 from '../img/img2.png';
|
||
import vision0 from '../img/vision0.png';
|
||
import vision1 from '../img/vision1.png';
|
||
import vision2 from '../img/vision2.png';
|
||
import vision3 from '../img/vision3.png';
|
||
import intro1 from '../img/intro1.png';
|
||
import intro2 from '../img/intro2.png';
|
||
import intro3 from '../img/intro3.png';
|
||
import intro4 from '../img/intro4.png';
|
||
import guideArrow from '../img/guideArrow1.png';
|
||
import ra from '../img/ra.png'
|
||
import title from '../img/title.png'
|
||
import { Link } from 'react-router-dom';
|
||
import shijian from '../img/shijian.png';
|
||
import axios from 'axios';
|
||
import Nodata from '../../Nodata';
|
||
import Projects from '../Component/projects';
|
||
import Contributor from '../Component/contributor';
|
||
import Partner from '../Component/partner';
|
||
import '../indexZone1.scss'
|
||
|
||
function HeaderPage(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, temp, history } = props;
|
||
|
||
const vision = [
|
||
{imageUrl: vision0, title: '促进技术创新和应用', content: '通过开源芯片社区的建设，可以让更多的人参与到硬件开发中来，激发大众的创造力和创新精神，从而推动硬件领域的技术创新和实际应用。'},
|
||
{imageUrl: vision1, title: '降低硬件开发成本', content: '通过共享开源芯片设计和资源，可以帮助个人和小型企业降低硬件开发的成本，打破品牌垄断，促进市场竞争。'},
|
||
{imageUrl: vision2, title: '推广教育和普及知识', content: '通过开源芯片社区的建设，可以提供更多的硬件开发教育和知识普及资源，为学生、教师和爱好者等不同群体提供更多的学习机会和平台。'},
|
||
{imageUrl: vision3, title: '加强国际合作和交流', content: '开源芯片社区可以促进国内外的交流和合作，扩大中国在全球开源芯片领域的影响力，推动中外企业和机构之间的技术合作和交流。'}
|
||
]
|
||
|
||
const communityInfo = [
|
||
{ level: '普通用户', todo: '寻找项目或SIG组' },
|
||
{ level: '项目贡献者', todo: '参与项目贡献' },
|
||
{ level: '项目开发者', todo: '推动项目发展' },
|
||
{ level: '项目管理者', todo: '成为项目领军人物' }
|
||
]
|
||
|
||
const growPathInfo = [
|
||
{ type: '计划一', plan: '保留chisel语言学习（学习）' },
|
||
{ type: '计划二', plan: '小核、SoC快速开发（初级、中级、高级）' },
|
||
{ type: '计划三', plan: '果壳项目（初级、中级、高级）' },
|
||
{ type: '计划四', plan: '香山贡献参与' }
|
||
]
|
||
|
||
const introDetail = [
|
||
{ title: '能力阶梯', icon: intro1, desc: '成长体系按照开发者从⼊门到进阶再到⾹⼭顶级项⽬设⽴了⽤户能⼒提升的阶梯式真实项⽬' },
|
||
{ title: '贡献分级', icon: intro2, desc: '所有开源项⽬全部为开芯院开源开放的真实项⽬，开发者参与开源项⽬的所有贡献将作为成长等级、知产授权、加⼊⾼级别项⽬（悬赏、获得offer等）、成为核⼼贡献者的参与 依据' },
|
||
{ title: '成长认证', icon: intro3, desc: '开发者可以通过完成开源项⽬对应的任务，赢取对应能⼒成长认证，开源项⽬对应的⾼级任务将获得对应等级L2或⾼级别的知识产权授权，同时解锁下⼀级别成长任务' },
|
||
{ title: '顶级认证', icon: intro4, desc: '参与顶级项⽬“⾹⼭”的贡献者，将获得中国科学院计算技术研究所副所长、研究员，北京开源芯⽚研究院⾸席科学家，RISC-V国际基⾦会理事会成员包云岗签名贡献者证书' }
|
||
]
|
||
|
||
|
||
useEffect(()=>{
|
||
if(id){
|
||
getProjectList();
|
||
getNewsList();
|
||
getPersonList();
|
||
getPartnerList();
|
||
}
|
||
},[id])
|
||
|
||
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);
|
||
}
|
||
}).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=>{})
|
||
}
|
||
return(
|
||
<div className="zone1_box">
|
||
{
|
||
// 专区简介
|
||
data && (data.introductionTitle || data.introductionContent || data.introductionImage) &&
|
||
<div className="boxmain zone_infos mb30">
|
||
<div className="zone_infos_desc">
|
||
<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 pb60">
|
||
<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>
|
||
<p className="vision_content">{ i.content }</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>
|
||
<div className="zone_new_first">
|
||
<p className="task-hide">
|
||
<span className="item_index">1</span>
|
||
<Link to={`/zone/${deptId}/newdetail/${newsList[0].id}`} className="new_first_title task-hide">{newsList[0].name}</Link>
|
||
</p>
|
||
<p className="new_first_desc mt20 task-hide-2">{newsList[0].summary}</p>
|
||
<p className="font-13 zone_n_value mt20" style={{color:"#8d95a3"}}>
|
||
<span className="flexCenter">
|
||
<img src={shijian} alt="" className="mr3" />
|
||
{newsList[0].publishTime}
|
||
</span>
|
||
<Link to={`/zone/${deptId}/newdetail/${newsList[0].id}`} className="zone_btn">查看更多<img src={guideArrow} alt="" width="14px" className="ml3"/></Link>
|
||
</p>
|
||
</div>
|
||
<ul className={ `zone_new_three ${ newsList && (newsList.length < 4) ? 'zone_new_two' : '' }`}>
|
||
{
|
||
newsList.map((i,k)=>{
|
||
return(
|
||
k > 0 &&
|
||
<div onClick={() => { history.push(`/zone/${deptId}/newdetail/${i.id}`) }}>
|
||
<li className="new_item" style={{ display: 'inline-block' }}>
|
||
<p className="task-hide">
|
||
<span className="item_index">{k + 1}</span>
|
||
<Link className="zone_n_title" to={`/zone/${deptId}/newdetail/${i.id}`}>{i.name}</Link>
|
||
</p>
|
||
<p className="zone_n_desc task-hide-2">{i.summary}</p>
|
||
<p className="zone_n_value">
|
||
<span className="font-13 flexCenter" style={{color:"#8d95a3"}}>
|
||
<img src={shijian} alt="" className="mr3" />
|
||
{i.publishTime}
|
||
</span>
|
||
<span className="flexCenter zone_btn">查看详情<img src={guideArrow} alt="" width="14px"/></span>
|
||
</p>
|
||
</li>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</ul>
|
||
</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>
|
||
<Contributor personList={personList}></Contributor>
|
||
</div>
|
||
}
|
||
|
||
<div className="zone_community pt60 pb60">
|
||
<p className="in_title mb20">参与社区</p>
|
||
<p className="sub_title mb50"><img src={ra} alt="" className="mr5" />成为社区成员，尽情发挥您的创意</p>
|
||
<div className="c_role boxmain">
|
||
{
|
||
communityInfo.map((i, k) => {
|
||
return (
|
||
<div className="c_role_item" key={ k }>
|
||
<p className="role_level">{ i.level }</p>
|
||
<p className="role_todo">{ i.todo }</p>
|
||
<div className="dot"></div>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
<div className="dot_line"></div>
|
||
</div>
|
||
|
||
<div className="zone_grow pt60 pb60">
|
||
{/* <p className="in_title mb20">开源芯<b>⽚⽤</b>户成长体系介绍</p> */}
|
||
<p className="in_title mb20"><img src={ title } alt="" /></p>
|
||
<p className="sub_title">参与开源芯⽚项⽬的开发者需要签署开源贡献者协议</p>
|
||
<p className="sub_title mb50">建议开发者按照开源项⽬成长路径进⾏参与，稳步提升能⼒，降低跳级参与带来的挑战</p>
|
||
<div className="grow_path boxmain">
|
||
{
|
||
growPathInfo.map((i, k) => {
|
||
return (
|
||
<div className="grow_path_item" key={ k }>
|
||
{ k % 2 === 1 && <div className="dot"></div> }
|
||
<div className="grow_path_type">
|
||
<div></div>
|
||
<div></div>
|
||
<div></div>
|
||
{ i.type }
|
||
</div>
|
||
<p className="grow_path_plan">{ i.plan }</p>
|
||
{ k % 2 === 0 && <div className="dot"></div> }
|
||
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
<div className="line"></div>
|
||
<div className="grow_introduction boxmain pt40">
|
||
{
|
||
introDetail.map((i, k) => {
|
||
return (
|
||
<div className="intro_item" key={ k }>
|
||
<p className="intro_title">
|
||
<img src={i.icon} alt="" className="mr3" />
|
||
{ i.title }
|
||
</p>
|
||
<p className="intro_desc">{ i.desc }</p>
|
||
</div>
|
||
)
|
||
})
|
||
}
|
||
</div>
|
||
<div className="dot_line"></div>
|
||
</div>
|
||
|
||
<div className="zone_communicate">
|
||
<p className="in_title">集萃群智经验 交流心得体会</p>
|
||
<button onClick={() => { window.location.href = 'https://forum.gitlink.org.cn/forums/theme/135' }}>立即加入</button>
|
||
</div>
|
||
{
|
||
// 合作伙伴
|
||
data && data.partnersShow === 1 && partnerList && partnerList.length > 0 &&
|
||
<div className="zone_parter">
|
||
<p className="in_title">{ data.homepagePartnersTitle }</p>
|
||
<Partner id={ id } partnerList={ partnerList }></Partner>
|
||
</div>
|
||
}
|
||
|
||
</div>
|
||
)
|
||
}
|
||
export default HeaderPage; |