339 lines
13 KiB
JavaScript
339 lines
13 KiB
JavaScript
import React, { useEffect, useState, useRef } from 'react';
|
||
import './index.scss';
|
||
import { TPMIndexHOC } from "../../modules/tpm/TPMIndexHOC";
|
||
import KFIcon from '../../components/KFIcon/index';
|
||
import { factoryZoneId, lessonId, manualId, standardId, docId } from '../../constants/factory'
|
||
import { Carousel } from 'antd';
|
||
import back1 from '../../images/factory/back1.png'
|
||
import back2 from '../../images/factory/back2.png'
|
||
import back3 from '../../images/factory/back3.png'
|
||
import manual1 from '../../images/factory/lessons/manual-1.webp'
|
||
import manual2 from '../../images/factory/lessons/manual-2.webp'
|
||
import '../common.scss'
|
||
import { Link } from "react-router-dom";
|
||
import Waves from '../components/Waves/index'
|
||
import moment from 'moment';
|
||
import { getSourceList, httpUrl } from '../api'
|
||
import { downloadFunc } from '../../forge/Utils/utils'
|
||
import chapterBg from '../../images/factory/lessons/chapter-bg.webp'
|
||
import { message } from 'antd';
|
||
|
||
const backList = [back1, back2, back3]
|
||
|
||
function Index(props) {
|
||
const [nowTop, setNowTop] = useState(0)
|
||
const [isVisible, setIsVisible] = useState(false);
|
||
const carouselEL = useRef(null);
|
||
|
||
const [chapterList, setChapterList] = useState([]);
|
||
const [standardList, setStandardList] = useState([]);
|
||
const [manualList, setManualList] = useState([]);
|
||
const [lesson, setLesson] = useState([])
|
||
const [docList, setDocList] = useState([])
|
||
|
||
useEffect(() => {
|
||
document.title = '学习专区-软件工厂专区';
|
||
getLessonList();
|
||
getStandardList();
|
||
getManualList();
|
||
getDocList();
|
||
}, []);
|
||
|
||
const getLessonList = () => {
|
||
getSourceList({ id: factoryZoneId, keywords: lessonId }).then(res => {
|
||
const rows = []
|
||
res.data.rows.forEach(e => {
|
||
let extendData = {}
|
||
if (e.extendData) {
|
||
extendData = JSON.parse(e.extendData)
|
||
}
|
||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||
});
|
||
setLesson(rows[0]);
|
||
getChapterList(rows[0].name)
|
||
});
|
||
};
|
||
|
||
const getChapterList = (id) => {
|
||
getSourceList({ id: factoryZoneId, keywords: id }).then(res => {
|
||
const rows = []
|
||
res.data.rows.forEach(e => {
|
||
let extendData = {}
|
||
if (e.extendData) {
|
||
extendData = JSON.parse(e.extendData)
|
||
}
|
||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||
});
|
||
setChapterList(rows);
|
||
});
|
||
};
|
||
|
||
const getStandardList = () => {
|
||
getSourceList({ id: factoryZoneId, keywords: standardId }).then(res => {
|
||
const rows = []
|
||
res.data.rows.forEach(e => {
|
||
let extendData = {}
|
||
if (e.extendData) {
|
||
extendData = JSON.parse(e.extendData)
|
||
}
|
||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||
});
|
||
setStandardList(rows);
|
||
});
|
||
}
|
||
|
||
const getManualList = () => {
|
||
getSourceList({ id: factoryZoneId, keywords: manualId }).then(res => {
|
||
const rows = []
|
||
res.data.rows.forEach(e => {
|
||
let extendData = {}
|
||
if (e.extendData) {
|
||
extendData = JSON.parse(e.extendData)
|
||
}
|
||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||
});
|
||
setManualList(rows);
|
||
});
|
||
}
|
||
|
||
const getDocList = () => {
|
||
getSourceList({ id: factoryZoneId, keywords: docId }).then(res => {
|
||
const rows = []
|
||
res.data.rows.forEach(e => {
|
||
let extendData = {}
|
||
if (e.extendData) {
|
||
extendData = JSON.parse(e.extendData)
|
||
}
|
||
rows.push({ ...e, extendDataUrl: extendData.url, extendDataHeadImg: extendData.headImg })
|
||
});
|
||
setDocList(rows.slice(0, 6));
|
||
});
|
||
}
|
||
|
||
return (
|
||
<div className={`lessons ${isVisible ? 'animate-active' : ''}`}>
|
||
<img src={chapterBg} className="lessons-bg" alt="" />
|
||
<div className="lessons-header">
|
||
<h2><span>学习专区，</span>多样资源服务工厂应用</h2>
|
||
<p >从核心课程到规范标准，构建持续进化的工程能力体系。</p>
|
||
{/* <div className="header-animation">
|
||
<Waves />
|
||
</div> */}
|
||
</div>
|
||
<div className="lesson-body">
|
||
<div className="lesson-left">
|
||
<h3>{lesson.name}</h3>
|
||
<p>{lesson.summary}</p>
|
||
<div className="chapter-wrapper">
|
||
<div className="chapter-list" style={{ marginTop: `-${88 * (chapterList.length - nowTop < 4 ? chapterList.length - 4 : nowTop)}px` }}>
|
||
{
|
||
chapterList.map((item, index) => {
|
||
return <div className={`chapter-item ${nowTop === index ? 'active' : ''}`} key={item.id}>
|
||
{
|
||
index < 10 ?
|
||
<span className="chapter-index">0{index + 1}</span> :
|
||
<span className="chapter-index">{index + 1}</span>
|
||
}
|
||
<Link to={`/sf/lessons/${item.id}`}>
|
||
<div title={item.name}>
|
||
{
|
||
item.name
|
||
}
|
||
</div>
|
||
</Link>
|
||
|
||
|
||
</div>
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="lesson-right">
|
||
<Carousel
|
||
autoplay
|
||
ref={carouselEL}
|
||
afterChange={e => { setNowTop(e) }}
|
||
dots={false}
|
||
>
|
||
{chapterList.map((item, index) => {
|
||
const prevIndex2 = (index - 2 + chapterList.length) % chapterList.length;
|
||
const prevIndex1 = (index - 1 + chapterList.length) % chapterList.length;
|
||
const nextIndex1 = (index + 1) % chapterList.length;
|
||
const nextIndex2 = (index + 2) % chapterList.length;
|
||
|
||
return (
|
||
<div className="right-item" key={index}>
|
||
<div className="right-item-top">
|
||
{
|
||
index < 10 ?
|
||
<span className="chapter-index">0{index + 1}</span> :
|
||
<span className="chapter-index">{index + 1}</span>
|
||
}
|
||
{
|
||
item.name
|
||
}
|
||
</div>
|
||
<div className="images">
|
||
<div>
|
||
<img
|
||
src={chapterList[prevIndex2].extendDataHeadImg || backList[prevIndex2 % backList.length]}
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<img
|
||
src={chapterList[prevIndex1].extendDataHeadImg || backList[prevIndex1 % backList.length]}
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div className="current-img">
|
||
<img
|
||
src={item.extendDataHeadImg || backList[index % backList.length]}
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<img
|
||
src={chapterList[nextIndex1].extendDataHeadImg || backList[nextIndex1 % backList.length]}
|
||
alt=""
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<img
|
||
src={chapterList[nextIndex2].extendDataHeadImg || backList[nextIndex2 % backList.length]}
|
||
alt=""
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</Carousel>
|
||
</div>
|
||
</div>
|
||
<div className="chapter">
|
||
<div className="chapter-chapter1">
|
||
{
|
||
chapterList.slice(0, 3).map((item, index) => {
|
||
return <div className="chapter-chapter1-item" key={item.id}>
|
||
<img src={item.extendDataHeadImg || backList[index % backList.length]} alt="" />
|
||
<div className="chapter-info">
|
||
<h4>{item.name}</h4>
|
||
<p>{item.summary}</p>
|
||
<div className="chapter-tag">
|
||
<span>{item.domainName}</span>
|
||
</div>
|
||
<div className="button-wrapper">
|
||
<Link to={`/sf/lessons/${item.id}`}><button>查看详情</button></Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
})
|
||
}
|
||
</div>
|
||
<div className="chapter-chapter2">
|
||
{
|
||
chapterList.slice(3).map((item, index) => {
|
||
return <div className="chapter-chapter2-item" key={item.id}>
|
||
<div className="chapter-head">
|
||
<Link to={`/sf/lessons/${item.id}`}><h4 title={item.name}>{item.name}</h4></Link>
|
||
<div className="line-1"></div>
|
||
<div className="line-2"></div>
|
||
<div className="line-3"></div>
|
||
</div>
|
||
<div className="chapter-body">
|
||
<p title={ item.summary }>{item.summary}</p>
|
||
<span>{moment(item.createTime).format('YYYY/MM/DD')}</span>
|
||
</div>
|
||
</div>
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
<div className="standard">
|
||
<h2>标准规范</h2>
|
||
<div className="standard-content">
|
||
{
|
||
standardList.slice(0, 3).map((item, index) => {
|
||
return <div className="standard-item" key={index}>
|
||
<div className="standard-item-head">
|
||
<h4>{item.name}</h4>
|
||
<button onClick={() => {
|
||
if (item.fileIds) {
|
||
downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)
|
||
}
|
||
}} disabled={!item.fileIds} className={ !item.fileIds && 'disabled' } >{item.fileIds ? '下载' : '稍后下载'}</button>
|
||
</div>
|
||
<p>{item.summary}</p>
|
||
<div className="standard-item-img">
|
||
<img src={item.extendDataHeadImg || backList[index % backList.length]} alt="" />
|
||
</div>
|
||
</div>
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
<div className="docs">
|
||
<h2>文档资料</h2>
|
||
<div className="docs-content">
|
||
{
|
||
docList.map((item, index) => {
|
||
return <div className="news-item" key={index}>
|
||
<div className="news-item-img">
|
||
<img src={item.extendDataHeadImg || backList[index % backList.length]} alt="" />
|
||
</div>
|
||
<div className="news-item-info">
|
||
<Link to={`/sf/lessons/${item.id}`}><h3>{item.name}</h3></Link>
|
||
<p>{item.summary}</p>
|
||
<div className="news-item-info-bottom">
|
||
<span>{moment(item.createTime).format('YYYY/MM/DD')}</span>
|
||
<Link to={`/sf/lessons/${item.id}`}>
|
||
<span>查看详情</span>
|
||
<KFIcon type="icon-icon_blackarrow_hover" font={40} />
|
||
</Link>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
<div className="manual">
|
||
<h2>用户手册</h2>
|
||
<div className="manual-content">
|
||
<div className="manual-left">
|
||
<h4>全面掌握软件工厂：从理念到实践的全方位指南</h4>
|
||
<p>《软件工厂白皮书》——系统阐释工厂理念、架构与战略价值</p>
|
||
<p>《软件工厂使用手册》——详解平台功能、操作流程与最佳实践</p>
|
||
<p>从顶层设计到落地操作——贯通方法论与工具链的完整知识体系</p>
|
||
<p>持续迭代的权威指南——随工厂进化同步更新的鲜活知识库</p>
|
||
</div>
|
||
{
|
||
manualList.slice(0, 2).map((item, index) => {
|
||
const nameList = item.name.split('软件工厂')
|
||
return <div className={`manual-${index + 1}`}>
|
||
<img src={index === 0 ? manual1 : manual2} alt="" />
|
||
{index === 0 ? <div>{item.name}</div> : <div><span>软件工厂</span><div></div>{nameList[1]}</div>}
|
||
<p>{item.summary}</p>
|
||
<button onClick={() => {
|
||
if (item.fileIds) {
|
||
downloadFunc(`${httpUrl}/file/open/download/${item.fileIds}`)
|
||
}
|
||
}} disabled={!item.fileIds} className={ !item.fileIds && 'disabled-button' } >{item.fileIds ? '下载' : '稍后下载'}</button>
|
||
</div>
|
||
})
|
||
}
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
</div>
|
||
)
|
||
}
|
||
export default TPMIndexHOC(Index) |