Gitlink
/
forgeplus-react
39
0
Fork 30
Code Issues Pull Requests Releases 1 Wiki Activity

项目联调

This commit is contained in:
qiukai 2025-03-11 13:52:23 +08:00
parent ab0158a6f2
commit a22c432ec1
13 changed files with 197 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.js
View File

@ -418,7 +418,7 @@ class App extends Component {
}> }>
</Route> </Route>
<Route <Route
path={"/softwareFactory/:type"} path={"/softwareFactory/home"}
render={ render={
(props) => { (props) => {
return (<SoftwareFactory {...this.props} {...props} {...this.state} />) return (<SoftwareFactory {...this.props} {...props} {...this.state} />)

4
src/forge/SoftwareFactory/components/FactoryHead.jsx
View File

@ -8,8 +8,8 @@ function FactoryHead(props) {
return ( return (
<div className="project-wrap"> <div className="project-wrap">
<div className="project-head"> <div className="project-head">
<div class="center-title-wrap"> <div className="center-title-wrap">
<img src={centerBg} alt="" srcset="" /> <img src={centerBg} alt="" />
<div className="center-title">可控开源创新中心</div> <div className="center-title">可控开源创新中心</div>
<div className="center-sub-title"> <div className="center-sub-title">
Controllable open source innovation center software factory work Controllable open source innovation center software factory work

12
src/forge/SoftwareFactory/components/Home/centerPanel.jsx
View File

@ -9,9 +9,9 @@ function CenterPanel(props) {
const [weatherObj, setWetherObj] = useState({}); const [weatherObj, setWetherObj] = useState({});
useEffect(() => { useEffect(() => {
const timer = setInterval(() => { const timer = setInterval(() => {
//天气10分钟更新一次 //天气5分钟更新一次
// getWether(); // getWether();
}, 600000); }, 300000);
// getWether(); // getWether();
return () => { return () => {
clearInterval(timer); clearInterval(timer);
@ -53,25 +53,25 @@ function CenterPanel(props) {
<div className="center-panel"> <div className="center-panel">
<div className="first-section"> <div className="first-section">
<div className="content"> <div className="content">
<img src={duoyun} alt="" srcset="" /> <img src={duoyun} alt="" />
<div>{weatherObj.text}</div> <div>{weatherObj.text}</div>
</div> </div>
</div> </div>
<div className="second-section"> <div className="second-section">
<div className="content"> <div className="content">
<img src={ziwaixian} alt="" srcset="" /> <img src={ziwaixian} alt="" />
<div>{weatherObj.temp}℃</div> <div>{weatherObj.temp}℃</div>
</div> </div>
</div> </div>
<div className="third-section"> <div className="third-section">
<div className="content"> <div className="content">
<img src={fengsu} alt="" srcset="" /> <img src={fengsu} alt="" />
<div>{weatherObj.windDir}</div> <div>{weatherObj.windDir}</div>
</div> </div>
</div> </div>
<div className="forth-section"> <div className="forth-section">
<div className="content"> <div className="content">
<img src={shidu} alt="" srcset="" /> <img src={shidu} alt="" />
<div>{weatherObj.humidity}%</div> <div>{weatherObj.humidity}%</div>
</div> </div>
</div> </div>

8
src/forge/SoftwareFactory/components/Home/firstPanel.jsx
View File

@ -69,14 +69,14 @@ function FirstPanel(props) {
<div className="white-panel-inner"> <div className="white-panel-inner">
{firstPanelList.map((item, idx) => { {firstPanelList.map((item, idx) => {
return ( return (
<div className="panel-item"> <div className="panel-item" key={idx}>
<div className="panel-item-content"> <div className="panel-item-content">
<div className="panel-item-content-left"> <div className="panel-item-content-left">
<img src={right} alt="" srcset="" /> <img src={right} alt="" />
<div>{item.title}</div> <div>{item.title}</div>
</div> </div>
{item.isNUm ? ( {item.isNUm ? (
<div class="panel-item-content-right"> <div className="panel-item-content-right">
<span className="panel-num"> <span className="panel-num">
{cardPage === "2" {cardPage === "2"
? weekMap[item.key] ? weekMap[item.key]
@ -85,7 +85,7 @@ function FirstPanel(props) {
<span className="panel-unit">{item.unit}</span> <span className="panel-unit">{item.unit}</span>
</div> </div>
) : ( ) : (
<div class="panel-item-content-right-text"> <div className="panel-item-content-right-text">
{cardPage === "2" {cardPage === "2"
? weekMap[item.key] ? weekMap[item.key]
: dayMap[item.key]} : dayMap[item.key]}

8
src/forge/SoftwareFactory/components/Home/forthPanel.jsx
View File

@ -31,14 +31,14 @@ function ForthPanel(props) {
<div className="white-panel-inner"> <div className="white-panel-inner">
{forthPanelList.map((item, idx) => { {forthPanelList.map((item, idx) => {
return ( return (
<div className="panel-item"> <div className="panel-item" key={idx}>
<div className="panel-item-content"> <div className="panel-item-content">
<div className="panel-item-content-left"> <div className="panel-item-content-left">
<img src={right} alt="" srcset="" /> <img src={right} alt="" />
<div>{item.title}</div> <div>{item.title}</div>
</div> </div>
{item.isNUm ? ( {item.isNUm ? (
<div class="panel-item-content-right"> <div className="panel-item-content-right">
<span className="panel-num"> <span className="panel-num">
{cardPage === "2" {cardPage === "2"
? monthMap[item.key] ? monthMap[item.key]
@ -47,7 +47,7 @@ function ForthPanel(props) {
<span className="panel-unit">{item.unit}</span> <span className="panel-unit">{item.unit}</span>
</div> </div>
) : ( ) : (
<div class="panel-item-content-right-text"> <div className="panel-item-content-right-text">
{cardPage === "2" {cardPage === "2"
? monthMap[item.key] ? monthMap[item.key]
: dayMap[item.key]} : dayMap[item.key]}

70
src/forge/SoftwareFactory/components/Home/index.jsx
View File

@ -59,9 +59,9 @@ const setting = {
slidesToShow: 1, slidesToShow: 1,
slidesToScroll: 1, slidesToScroll: 1,
pauseOnDotsHover: true, pauseOnDotsHover: true,
autoplaySpeed: 5000, autoplaySpeed: Number(localStorage.getItem('homeLoopSpeed')) || 5000,
pauseOnFocus: true, pauseOnFocus: true,
autoplay: false, autoplay: true,
arrows: true, arrows: true,
prevArrow: <img className="slick-prev slick-arrow" src={next} alt="" />, prevArrow: <img className="slick-prev slick-arrow" src={next} alt="" />,
nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />, nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />,
@ -74,48 +74,20 @@ function Home(props) {
const [timeObj, setTimeObj] = useState({}); const [timeObj, setTimeObj] = useState({});
const [firstNews, setFirstNews] = useState({}); const [firstNews, setFirstNews] = useState({});
const [focuseWorkList, setFocuseWorkList] = useState([]); const [focuseWorkList, setFocuseWorkList] = useState([]);
const rightContentDom = React.useRef(null)
// const [focuseWorkList, setFocuseWorkList] = useState([]); // const [focuseWorkList, setFocuseWorkList] = useState([]);
useEffect(() => { useEffect(() => {
getDay() getDay()
// getDayData() const timer = setInterval(() => {
// getWeekData() //默认10分钟更新一次
// getMonthData() getDay();
const timer = setInterval(() => { }, Number(localStorage.getItem('apiTime')) || 300000);
//10分钟更新一次 return () => {
getDay(); clearInterval(timer);
// getDayData() };
// getWeekData()
// getMonthData()
}, 600000);
return () => {
clearInterval(timer);
};
}, []); }, []);
function getDayData() {
//获取今日昨日数据
todayWorkSituation().then(res=>{
})
}
function getWeekData() {
//获取今日昨日数据
todayWorkSituation().then(res=>{
})
}
function getMonthData() {
//获取今日昨日数据
todayWorkSituation().then(res=>{
})
}
useEffect(() => { useEffect(() => {
if (newsList && newsList.length) { if (newsList && newsList.length) {
@ -186,13 +158,13 @@ function Home(props) {
<div className="home-wrap"> <div className="home-wrap">
<div className="home-left"> <div className="home-left">
<div className="news-wrap"> <div className="news-wrap">
<div class="left-title">要闻概览:</div> <div className="left-title">要闻概览:</div>
<div class="left-subTitle">Overview of important news</div> <div className="left-subTitle">Overview of important news</div>
<div class="news-month">{currentMonth}</div> <div className="news-month">{currentMonth}</div>
<div class="news-content-title">{firstNews.name}</div> <div className="news-content-title">{firstNews.name}</div>
<img class="news-line" src={newsLine} alt="" srcset="" /> <img className="news-line" src={newsLine} alt="" />
<div class="news-pic-wrap"> <div className="news-pic-wrap">
<img class="news-pic" src={firstNews.headImg} alt="" srcset="" /> <img className="news-pic" src={firstNews.headImg} alt="" />
</div> </div>
<div className="news-content">{firstNews.summary}</div> <div className="news-content">{firstNews.summary}</div>
<div className="point-work"> <div className="point-work">
@ -227,8 +199,8 @@ function Home(props) {
</div> </div>
<div className="home-right"> <div className="home-right">
<div className="right-head"> <div className="right-head">
<div class="center-title-wrap"> <div className="center-title-wrap">
<img src={centerBg} alt="" srcset="" /> <img src={centerBg} alt="" />
<div className="center-title">可控开源创新中心</div> <div className="center-title">可控开源创新中心</div>
<div className="center-sub-title"> <div className="center-sub-title">
Controllable open source innovation center software factory work Controllable open source innovation center software factory work
@ -237,7 +209,7 @@ function Home(props) {
</div> </div>
<div className="soft-title">软件工厂工作态势</div> <div className="soft-title">软件工厂工作态势</div>
</div> </div>
<RightContent timeObj={timeObj} /> <RightContent timeObj={timeObj} ref={rightContentDom}/>
</div> </div>
</div> </div>
); );

96
src/forge/SoftwareFactory/components/Home/rightContent.jsx
View File

@ -7,7 +7,7 @@ import SecondPanel from "./secondPanel";
import ThirdPanel from "./thirdPanel"; import ThirdPanel from "./thirdPanel";
import ForthPanel from "./forthPanel"; import ForthPanel from "./forthPanel";
import CenterPanel from "./centerPanel"; import CenterPanel from "./centerPanel";
import {todayWorkSituation,weekMonthWorkSituation} from '../../api' import { todayWorkSituation, weekMonthWorkSituation } from "../../api";
const setting = { const setting = {
dots: false, dots: false,
infinite: true, infinite: true,
@ -15,9 +15,9 @@ const setting = {
slidesToShow: 1, slidesToShow: 1,
slidesToScroll: 1, slidesToScroll: 1,
pauseOnDotsHover: false, pauseOnDotsHover: false,
autoplaySpeed: 5000, autoplaySpeed: Number(localStorage.getItem("pageLoopSpeed")) || 8000,
pauseOnFocus: false, pauseOnFocus: false,
autoplay: false, autoplay: true,
arrows: false, arrows: false,
fade: false, fade: false,
pauseOnHover: false, pauseOnHover: false,
@ -25,44 +25,58 @@ const setting = {
// nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />, // nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />,
// afterChange: (index) => setTag(index), // afterChange: (index) => setTag(index),
}; };
function RightContent(props) { function RightContent(props) {
const { timeObj } = props; const { timeObj } = props;
const [dayMap,setDayMap] = useState({}) const [dayMap, setDayMap] = useState({});
const [weekMap,setWeekMap] = useState({}) const [weekMap, setWeekMap] = useState({});
const [monthMap,setMonthMap] = useState({}) const [monthMap, setMonthMap] = useState({});
const firstDayDom = React.useRef(null);
const firstweekDom = React.useRef(null);
const secondDayDom = React.useRef(null);
const secondWeekDom = React.useRef(null);
const thirdDayDom = React.useRef(null);
const thirdmonthDom = React.useRef(null);
const forthDayDom = React.useRef(null);
const forthmonthDom = React.useRef(null);
const centerDom = React.useRef(null);
useEffect(()=>{ useEffect(() => {
getTodayData() getTodayData();
getWeekData() getWeekData();
getMonthData() getMonthData();
},[]) const timer = setInterval(() => {
//5分钟更新一次
getTodayData();
getWeekData();
getMonthData();
}, Number(localStorage.getItem("apiTime")) || 300000);
return () => {
clearInterval(timer);
};
}, []);
function getTodayData(){ function getTodayData() {
todayWorkSituation() todayWorkSituation().then((res) => {
.then(res=>{ if (res.data.code === 200) {
if(res.data.code === 200){ setDayMap(res.data.data);
setDayMap(res.data.data)
} }
}) });
} }
function getWeekData(){ function getWeekData() {
weekMonthWorkSituation('week') weekMonthWorkSituation("week").then((res) => {
.then(res=>{ if (res.data.code === 200) {
if(res.data.code === 200){ setWeekMap(res.data.data);
setWeekMap(res.data.data)
} }
}) });
} }
function getMonthData(){ function getMonthData() {
weekMonthWorkSituation('month') weekMonthWorkSituation("month").then((res) => {
.then(res=>{ if (res.data.code === 200) {
if(res.data.code === 200){ setMonthMap(res.data.data);
setMonthMap(res.data.data)
} }
}) });
} }
return ( return (
<div style={{ width: 1330, height: "100%" }}> <div style={{ width: 1330, height: "100%" }}>
@ -70,27 +84,27 @@ function RightContent(props) {
{/* <div key={0}>page1</div> {/* <div key={0}>page1</div>
<div key={1}>page2</div> <div key={1}>page2</div>
<div key={2}>page3</div> */} <div key={2}>page3</div> */}
<div className="right-content"> <div className="right-content" key="card1">
<div className="top-section"> <div className="top-section">
<FirstPanel cardPage="1" dayMap={dayMap} /> <FirstPanel cardPage="1" dayMap={dayMap} ref={firstDayDom}/>
<SecondPanel cardPage="1" dayMap={dayMap}/> <SecondPanel cardPage="1" dayMap={dayMap} ref={secondDayDom} />
</div> </div>
<div className="bottom-section"> <div className="bottom-section">
<ThirdPanel cardPage="1" dayMap={dayMap}/> <ThirdPanel cardPage="1" dayMap={dayMap} ref={thirdDayDom}/>
<ForthPanel cardPage="1" dayMap={dayMap} /> <ForthPanel cardPage="1" dayMap={dayMap} ref={forthDayDom} />
</div> </div>
<CenterPanel timeObj={timeObj} /> <CenterPanel timeObj={timeObj} />
</div> </div>
<div className="right-content"> <div className="right-content" key="card2">
<div className="top-section"> <div className="top-section">
<FirstPanel cardPage="2" weekMap={weekMap}/> <FirstPanel cardPage="2" weekMap={weekMap} ref={firstweekDom}/>
<SecondPanel cardPage="2" weekMap={weekMap}/> <SecondPanel cardPage="2" weekMap={weekMap} ref={secondWeekDom} />
</div> </div>
<div className="bottom-section"> <div className="bottom-section">
<ThirdPanel cardPage="2" monthMap={monthMap}/> <ThirdPanel cardPage="2" monthMap={monthMap} ref={thirdmonthDom} />
<ForthPanel cardPage="2" monthMap={monthMap} /> <ForthPanel cardPage="2" monthMap={monthMap} ref={forthmonthDom} />
</div> </div>
<CenterPanel timeObj={timeObj} /> <CenterPanel timeObj={timeObj} ref={centerDom}/>
</div> </div>
</Slider> </Slider>
</div> </div>

8
src/forge/SoftwareFactory/components/Home/secondPanel.jsx
View File

@ -32,14 +32,14 @@ function SecondPanel(props) {
<div className="white-panel-inner"> <div className="white-panel-inner">
{secondPanelList.map((item, idx) => { {secondPanelList.map((item, idx) => {
return ( return (
<div className="panel-item"> <div className="panel-item" key={idx}>
<div className="panel-item-content"> <div className="panel-item-content">
<div className="panel-item-content-left"> <div className="panel-item-content-left">
<img src={right} alt="" srcset="" /> <img src={right} alt="" />
<div>{item.title}</div> <div>{item.title}</div>
</div> </div>
{item.isNUm ? ( {item.isNUm ? (
<div class="panel-item-content-right"> <div className="panel-item-content-right">
<span className="panel-num"> <span className="panel-num">
{cardPage === "2" {cardPage === "2"
? weekMap[item.key] ? weekMap[item.key]
@ -48,7 +48,7 @@ function SecondPanel(props) {
<span className="panel-unit">{item.unit}</span> <span className="panel-unit">{item.unit}</span>
</div> </div>
) : ( ) : (
<div class="panel-item-content-right-text"> <div className="panel-item-content-right-text">
{cardPage === "2" {cardPage === "2"
? weekMap[item.key] ? weekMap[item.key]
: dayMap[item.key]} : dayMap[item.key]}

8
src/forge/SoftwareFactory/components/Home/thirdPanel.jsx
View File

@ -27,14 +27,14 @@ function ThirdPanel(props) {
<div className="white-panel-inner"> <div className="white-panel-inner">
{thirdPanelList.map((item, idx) => { {thirdPanelList.map((item, idx) => {
return ( return (
<div className="panel-item"> <div className="panel-item" key={idx}>
<div className="panel-item-content"> <div className="panel-item-content">
<div className="panel-item-content-left"> <div className="panel-item-content-left">
<img src={right} alt="" srcset="" /> <img src={right} alt="" />
<div>{item.title}</div> <div>{item.title}</div>
</div> </div>
{item.isNUm ? ( {item.isNUm ? (
<div class="panel-item-content-right"> <div className="panel-item-content-right">
<span className="panel-num"> <span className="panel-num">
{cardPage === "2" {cardPage === "2"
? monthMap[item.key] ? monthMap[item.key]
@ -43,7 +43,7 @@ function ThirdPanel(props) {
<span className="panel-unit">{item.unit}</span> <span className="panel-unit">{item.unit}</span>
</div> </div>
) : ( ) : (
<div class="panel-item-content-right-text"> <div className="panel-item-content-right-text">
{cardPage === "2" {cardPage === "2"
? monthMap[item.key] ? monthMap[item.key]
: dayMap[item.key]} : dayMap[item.key]}

30
src/forge/SoftwareFactory/components/ProjectStatus/ProjectCard.jsx
View File

@ -3,51 +3,51 @@ import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router"; import { withRouter } from "react-router";
function ProjectCard(props) { function ProjectCard(props) {
const {mgRight} = props; const {mgRight,shadow,dataMap} = props;
const [currentMonth, setCurrentMonth] = useState("2025年2月"); const [currentMonth, setCurrentMonth] = useState("2025年2月");
return ( return (
<div className="project-card-wrap" style={{marginRight:mgRight?'20px':0}}> <div className="project-card-wrap" style={{marginRight:mgRight?'20px':0}}>
<div className="pro-title">项目名称</div> <div className="pro-title">{dataMap.projectName}</div>
<div className="pro-group"> <div className="pro-group">
<div style={{opacity:1}}>{'开源项目组'}</div> <div style={{opacity:1}}>{dataMap.pmsEnterpriseName}</div>
<div style={{marginLeft:26}}>项目经理：{'蒋宇航'}</div> <div style={{marginLeft:26}}>项目经理：{dataMap.projectAssigneeName}</div>
</div> </div>
<div class="pro-center"> <div className="pro-center">
<div className="pro-center-item"> <div className="pro-center-item">
<div className="pro-center-name">项目需求数</div> <div className="pro-center-name">项目需求数</div>
<div className="pro-center-num">200</div> <div className="pro-center-num">{dataMap.needCount}</div>
<div className="pro-center-name" style={{marginTop:6}}>项目完成数</div> <div className="pro-center-name" style={{marginTop:6}}>项目完成数</div>
<div className="pro-center-num">150</div> <div className="pro-center-num">{dataMap.needFinishedCount}</div>
</div> </div>
<div className="pro-center-item" style={{marginLeft:6}}> <div className="pro-center-item" style={{marginLeft:6}}>
<div className="pro-center-name">项目任务数</div> <div className="pro-center-name">项目任务数</div>
<div className="pro-center-num">200</div> <div className="pro-center-num">{dataMap.taskCount}</div>
<div className="pro-center-name" style={{marginTop:6}}>任务完成数</div> <div className="pro-center-name" style={{marginTop:6}}>任务完成数</div>
<div className="pro-center-num">150</div> <div className="pro-center-num">{dataMap.taskFinishedCount}</div>
</div> </div>
<div className="pro-center-item" style={{marginLeft:6}}> <div className="pro-center-item" style={{marginLeft:6}}>
<div className="pro-center-name">项目迭代数</div> <div className="pro-center-name">项目迭代数</div>
<div className="pro-center-num">200</div> <div className="pro-center-num">{dataMap.sprintCount}</div>
<div className="pro-center-name" style={{marginTop:6}}>已完成迭代数</div> <div className="pro-center-name" style={{marginTop:6}}>已完成迭代数</div>
<div className="pro-center-num">150</div> <div className="pro-center-num">{dataMap.sprintFinishedCount}</div>
</div> </div>
</div> </div>
<div className="pro-bottom"> <div className="pro-bottom">
<div className="pro-bottom-item"> <div className="pro-bottom-item">
<div className="pro-bt-name">测试用例数</div> <div className="pro-bt-name">测试用例数</div>
<div className="pro-bt-num">927</div> <div className="pro-bt-num">{dataMap.testCaseCount}</div>
</div> </div>
<div className="pro-bottom-item"> <div className="pro-bottom-item">
<div className="pro-bt-name">测试缺陷数</div> <div className="pro-bt-name">测试缺陷数</div>
<div className="pro-bt-num">58</div> <div className="pro-bt-num">{dataMap.testBugCount}</div>
</div> </div>
<div className="pro-bottom-item"> <div className="pro-bottom-item">
<div className="pro-bt-name">待测试数</div> <div className="pro-bt-name">待测试数</div>
<div className="pro-bt-num">623</div> <div className="pro-bt-num">{dataMap.notExecTestCaseCount}</div>
</div> </div>
</div> </div>
{props.shadow && <div className={`card-shadow ${props.shadow}`} ></div>} {shadow && <div className={`card-shadow ${shadow}`} ></div>}
</div> </div>
); );
} }

69
src/forge/SoftwareFactory/components/ProjectStatus/index.jsx
View File

@ -4,16 +4,58 @@ import { withRouter } from "react-router";
import centerBg from "../../img/center_title_bg.png"; import centerBg from "../../img/center_title_bg.png";
import "./index.scss"; import "./index.scss";
import ProjectCard from "./ProjectCard"; import ProjectCard from "./ProjectCard";
import { projectSituation } from "../../api";
function ProjectStatus(props) { function ProjectStatus(props) {
const {} = props; const {} = props;
const [currentMonth, setCurrentMonth] = useState("2025年2月"); const [projectList, setProjectList] = useState([]);
const ProjectCardDom = React.useRef(null)
useEffect(() => {
getProjectList();
//项目信息五分钟更新一次
let timer = setInterval(()=>{
getProjectList();
}, Number(localStorage.getItem('apiTime')) || 300000)
return ()=>{
clearInterval(timer)
}
}, []);
function getProjectList() {
projectSituation().then((res) => {
if (res.data.code === 200) {
let list =
res.data.data.length > 10
? res.data.data.slice(0, 10)
: res.data.data;
setProjectList(list);
}
});
}
function getShadowCls(idx) {
switch (idx) {
case 5:
return "shadow-left";
case 6:
case 7:
case 8:
return "shadow-center";
case 9:
return "shadow-right";
default:
return ''
}
}
return ( return (
<div className="project-wrap"> <div className="project-wrap">
<div className="project-head"> <div className="project-head">
<div class="center-title-wrap"> <div className="center-title-wrap">
<img src={centerBg} alt="" srcset="" /> <img src={centerBg} alt="" />
<div className="center-title">可控开源创新中心</div> <div className="center-title">可控开源创新中心</div>
<div className="center-sub-title"> <div className="center-sub-title">
Controllable open source innovation center software factory work Controllable open source innovation center software factory work
@ -27,10 +69,21 @@ function ProjectStatus(props) {
<div className="project-sub-inner">项目研发状态</div> <div className="project-sub-inner">项目研发状态</div>
</div> </div>
</div> </div>
<div class="project-bottom-wrap"> <div className="project-bottom-wrap">
<div className="project-list-wrap"> <div className="project-list-wrap">
<ProjectCard mgRight={true} /> {projectList.map((item, idx) => {
<ProjectCard mgRight={true} /> return (
<ProjectCard
ref={ProjectCardDom}
key={idx}
mgRight={idx !== 4 && idx !== 9}
shadow={getShadowCls(idx)}
dataMap={item}
/>
);
})}
{/* <ProjectCard mgRight={true} />
<ProjectCard mgRight={true} /> <ProjectCard mgRight={true} />
<ProjectCard mgRight={true} /> <ProjectCard mgRight={true} />
<ProjectCard mgRight={false} /> <ProjectCard mgRight={false} />
@ -38,7 +91,7 @@ function ProjectStatus(props) {
<ProjectCard mgRight={true} shadow="shadow-center" /> <ProjectCard mgRight={true} shadow="shadow-center" />
<ProjectCard mgRight={true} shadow="shadow-center" /> <ProjectCard mgRight={true} shadow="shadow-center" />
<ProjectCard mgRight={true} shadow="shadow-center" /> <ProjectCard mgRight={true} shadow="shadow-center" />
<ProjectCard mgRight={false} shadow="shadow-right" /> <ProjectCard mgRight={false} shadow="shadow-right" /> */}
</div> </div>
</div> </div>
</div> </div>

4
src/forge/SoftwareFactory/components/ProjectStatus/index.scss
View File

@ -132,6 +132,10 @@
line-height: 27px; line-height: 27px;
text-align: center; text-align: center;
padding-top: 20px; padding-top: 20px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.pro-group { .pro-group {
display: flex; display: flex;

21
src/forge/SoftwareFactory/index.jsx
View File

@ -17,9 +17,9 @@ const setting = {
slidesToShow: 1, slidesToShow: 1,
slidesToScroll: 1, slidesToScroll: 1,
pauseOnDotsHover: true, pauseOnDotsHover: true,
autoplaySpeed: 15000, autoplaySpeed: Number(localStorage.getItem('pageLoopSpeed')) || 30000,
// pauseOnFocus: false, // pauseOnFocus: false,
autoplay: false, autoplay: true,
arrows: false, arrows: false,
pauseOnHover:false, pauseOnHover:false,
dotsClass:'fac-dots' dotsClass:'fac-dots'
@ -35,12 +35,23 @@ function Index(props){
const [id,setId] = useState(undefined) const [id,setId] = useState(undefined)
const [newsList,setNewsList] = useState([]) const [newsList,setNewsList] = useState([])
const homeDom = React.useRef(null)
const proDom = React.useRef(null)
useEffect(()=>{ useEffect(()=>{
getId() getId()
},[]) },[])
useEffect(()=>{ useEffect(()=>{
if(id)getNewsList() let timer = null
if(id){
getNewsList()
timer = setInterval(()=>{
getNewsList()
},Number(localStorage.getItem('apiTime')) || 300000)
return () =>{
clearInterval(timer)
}
}
},[id]) },[id])
function getNewsList() { function getNewsList() {
@ -66,8 +77,8 @@ function Index(props){
return (<div className="softFc-wrap"> return (<div className="softFc-wrap">
<Slider {...setting} > <Slider {...setting} >
<Home newsList={newsList}/> <Home newsList={newsList} key="home" ref={homeDom}/>
<ProjectStatus/> <ProjectStatus key="project" ref={proDom}/>
</Slider> </Slider>
</div>) </div>)
} }