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
path={"/softwareFactory/:type"}
path={"/softwareFactory/home"}
render={
(props) => {
return (<SoftwareFactory {...this.props} {...props} {...this.state} />)

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

@ -8,8 +8,8 @@ function FactoryHead(props) {
return (
<div className="project-wrap">
<div className="project-head">
<div class="center-title-wrap">
<img src={centerBg} alt="" srcset="" />
<div className="center-title-wrap">
<img src={centerBg} alt="" />
<div className="center-title">可控开源创新中心</div>
<div className="center-sub-title">
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({});
useEffect(() => {
const timer = setInterval(() => {
//天气10分钟更新一次
//天气5分钟更新一次
// getWether();
}, 600000);
}, 300000);
// getWether();
return () => {
clearInterval(timer);
@ -53,25 +53,25 @@ function CenterPanel(props) {
<div className="center-panel">
<div className="first-section">
<div className="content">
<img src={duoyun} alt="" srcset="" />
<img src={duoyun} alt="" />
<div>{weatherObj.text}</div>
</div>
</div>
<div className="second-section">
<div className="content">
<img src={ziwaixian} alt="" srcset="" />
<img src={ziwaixian} alt="" />
<div>{weatherObj.temp}℃</div>
</div>
</div>
<div className="third-section">
<div className="content">
<img src={fengsu} alt="" srcset="" />
<img src={fengsu} alt="" />
<div>{weatherObj.windDir}</div>
</div>
</div>
<div className="forth-section">
<div className="content">
<img src={shidu} alt="" srcset="" />
<img src={shidu} alt="" />
<div>{weatherObj.humidity}%</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">
{firstPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item" key={idx}>
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<img src={right} alt="" />
<div>{item.title}</div>
</div>
{item.isNUm ? (
<div class="panel-item-content-right">
<div className="panel-item-content-right">
<span className="panel-num">
{cardPage === "2"
? weekMap[item.key]
@ -85,7 +85,7 @@ function FirstPanel(props) {
<span className="panel-unit">{item.unit}</span>
</div>
) : (
<div class="panel-item-content-right-text">
<div className="panel-item-content-right-text">
{cardPage === "2"
? weekMap[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">
{forthPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item" key={idx}>
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<img src={right} alt="" />
<div>{item.title}</div>
</div>
{item.isNUm ? (
<div class="panel-item-content-right">
<div className="panel-item-content-right">
<span className="panel-num">
{cardPage === "2"
? monthMap[item.key]
@ -47,7 +47,7 @@ function ForthPanel(props) {
<span className="panel-unit">{item.unit}</span>
</div>
) : (
<div class="panel-item-content-right-text">
<div className="panel-item-content-right-text">
{cardPage === "2"
? monthMap[item.key]
: dayMap[item.key]}

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

@ -59,9 +59,9 @@ const setting = {
slidesToShow: 1,
slidesToScroll: 1,
pauseOnDotsHover: true,
autoplaySpeed: 5000,
autoplaySpeed: Number(localStorage.getItem('homeLoopSpeed')) || 5000,
pauseOnFocus: true,
autoplay: false,
autoplay: true,
arrows: true,
prevArrow: <img className="slick-prev 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 [firstNews, setFirstNews] = useState({});
const [focuseWorkList, setFocuseWorkList] = useState([]);
const rightContentDom = React.useRef(null)
// const [focuseWorkList, setFocuseWorkList] = useState([]);
useEffect(() => {
getDay()
// getDayData()
// getWeekData()
// getMonthData()
const timer = setInterval(() => {
//10分钟更新一次
//默认10分钟更新一次
getDay();
// getDayData()
// getWeekData()
// getMonthData()
}, 600000);
}, Number(localStorage.getItem('apiTime')) || 300000);
return () => {
clearInterval(timer);
};
}, []);
function getDayData() {
//获取今日昨日数据
todayWorkSituation().then(res=>{
})
}
function getWeekData() {
//获取今日昨日数据
todayWorkSituation().then(res=>{
})
}
function getMonthData() {
//获取今日昨日数据
todayWorkSituation().then(res=>{
})
}
useEffect(() => {
if (newsList && newsList.length) {
@ -186,13 +158,13 @@ function Home(props) {
<div className="home-wrap">
<div className="home-left">
<div className="news-wrap">
<div class="left-title">要闻概览:</div>
<div class="left-subTitle">Overview of important news</div>
<div class="news-month">{currentMonth}</div>
<div class="news-content-title">{firstNews.name}</div>
<img class="news-line" src={newsLine} alt="" srcset="" />
<div class="news-pic-wrap">
<img class="news-pic" src={firstNews.headImg} alt="" srcset="" />
<div className="left-title">要闻概览:</div>
<div className="left-subTitle">Overview of important news</div>
<div className="news-month">{currentMonth}</div>
<div className="news-content-title">{firstNews.name}</div>
<img className="news-line" src={newsLine} alt="" />
<div className="news-pic-wrap">
<img className="news-pic" src={firstNews.headImg} alt="" />
</div>
<div className="news-content">{firstNews.summary}</div>
<div className="point-work">
@ -227,8 +199,8 @@ function Home(props) {
</div>
<div className="home-right">
<div className="right-head">
<div class="center-title-wrap">
<img src={centerBg} alt="" srcset="" />
<div className="center-title-wrap">
<img src={centerBg} alt="" />
<div className="center-title">可控开源创新中心</div>
<div className="center-sub-title">
Controllable open source innovation center software factory work
@ -237,7 +209,7 @@ function Home(props) {
</div>
<div className="soft-title">软件工厂工作态势</div>
</div>
<RightContent timeObj={timeObj} />
<RightContent timeObj={timeObj} ref={rightContentDom}/>
</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 ForthPanel from "./forthPanel";
import CenterPanel from "./centerPanel";
import {todayWorkSituation,weekMonthWorkSituation} from '../../api'
import { todayWorkSituation, weekMonthWorkSituation } from "../../api";
const setting = {
dots: false,
infinite: true,
@ -15,9 +15,9 @@ const setting = {
slidesToShow: 1,
slidesToScroll: 1,
pauseOnDotsHover: false,
autoplaySpeed: 5000,
autoplaySpeed: Number(localStorage.getItem("pageLoopSpeed")) || 8000,
pauseOnFocus: false,
autoplay: false,
autoplay: true,
arrows: false,
fade: false,
pauseOnHover: false,
@ -25,44 +25,58 @@ const setting = {
// nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />,
// afterChange: (index) => setTag(index),
};
function RightContent(props) {
const { timeObj } = props;
const [dayMap,setDayMap] = useState({})
const [weekMap,setWeekMap] = useState({})
const [monthMap,setMonthMap] = useState({})
const [dayMap, setDayMap] = useState({});
const [weekMap, setWeekMap] = 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(()=>{
getTodayData()
getWeekData()
getMonthData()
},[])
useEffect(() => {
getTodayData();
getWeekData();
getMonthData();
const timer = setInterval(() => {
//5分钟更新一次
getTodayData();
getWeekData();
getMonthData();
}, Number(localStorage.getItem("apiTime")) || 300000);
return () => {
clearInterval(timer);
};
}, []);
function getTodayData(){
todayWorkSituation()
.then(res=>{
if(res.data.code === 200){
setDayMap(res.data.data)
function getTodayData() {
todayWorkSituation().then((res) => {
if (res.data.code === 200) {
setDayMap(res.data.data);
}
})
});
}
function getWeekData(){
weekMonthWorkSituation('week')
.then(res=>{
if(res.data.code === 200){
setWeekMap(res.data.data)
function getWeekData() {
weekMonthWorkSituation("week").then((res) => {
if (res.data.code === 200) {
setWeekMap(res.data.data);
}
})
});
}
function getMonthData(){
weekMonthWorkSituation('month')
.then(res=>{
if(res.data.code === 200){
setMonthMap(res.data.data)
function getMonthData() {
weekMonthWorkSituation("month").then((res) => {
if (res.data.code === 200) {
setMonthMap(res.data.data);
}
})
});
}
return (
<div style={{ width: 1330, height: "100%" }}>
@ -70,27 +84,27 @@ function RightContent(props) {
{/* <div key={0}>page1</div>
<div key={1}>page2</div>
<div key={2}>page3</div> */}
<div className="right-content">
<div className="right-content" key="card1">
<div className="top-section">
<FirstPanel cardPage="1" dayMap={dayMap} />
<SecondPanel cardPage="1" dayMap={dayMap}/>
<FirstPanel cardPage="1" dayMap={dayMap} ref={firstDayDom}/>
<SecondPanel cardPage="1" dayMap={dayMap} ref={secondDayDom} />
</div>
<div className="bottom-section">
<ThirdPanel cardPage="1" dayMap={dayMap}/>
<ForthPanel cardPage="1" dayMap={dayMap} />
<ThirdPanel cardPage="1" dayMap={dayMap} ref={thirdDayDom}/>
<ForthPanel cardPage="1" dayMap={dayMap} ref={forthDayDom} />
</div>
<CenterPanel timeObj={timeObj} />
</div>
<div className="right-content">
<div className="right-content" key="card2">
<div className="top-section">
<FirstPanel cardPage="2" weekMap={weekMap}/>
<SecondPanel cardPage="2" weekMap={weekMap}/>
<FirstPanel cardPage="2" weekMap={weekMap} ref={firstweekDom}/>
<SecondPanel cardPage="2" weekMap={weekMap} ref={secondWeekDom} />
</div>
<div className="bottom-section">
<ThirdPanel cardPage="2" monthMap={monthMap}/>
<ForthPanel cardPage="2" monthMap={monthMap} />
<ThirdPanel cardPage="2" monthMap={monthMap} ref={thirdmonthDom} />
<ForthPanel cardPage="2" monthMap={monthMap} ref={forthmonthDom} />
</div>
<CenterPanel timeObj={timeObj} />
<CenterPanel timeObj={timeObj} ref={centerDom}/>
</div>
</Slider>
</div>

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

@ -32,14 +32,14 @@ function SecondPanel(props) {
<div className="white-panel-inner">
{secondPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item" key={idx}>
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<img src={right} alt="" />
<div>{item.title}</div>
</div>
{item.isNUm ? (
<div class="panel-item-content-right">
<div className="panel-item-content-right">
<span className="panel-num">
{cardPage === "2"
? weekMap[item.key]
@ -48,7 +48,7 @@ function SecondPanel(props) {
<span className="panel-unit">{item.unit}</span>
</div>
) : (
<div class="panel-item-content-right-text">
<div className="panel-item-content-right-text">
{cardPage === "2"
? weekMap[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">
{thirdPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item" key={idx}>
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<img src={right} alt="" />
<div>{item.title}</div>
</div>
{item.isNUm ? (
<div class="panel-item-content-right">
<div className="panel-item-content-right">
<span className="panel-num">
{cardPage === "2"
? monthMap[item.key]
@ -43,7 +43,7 @@ function ThirdPanel(props) {
<span className="panel-unit">{item.unit}</span>
</div>
) : (
<div class="panel-item-content-right-text">
<div className="panel-item-content-right-text">
{cardPage === "2"
? monthMap[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";
function ProjectCard(props) {
const {mgRight} = props;
const {mgRight,shadow,dataMap} = props;
const [currentMonth, setCurrentMonth] = useState("2025年2月");
return (
<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 style={{opacity:1}}>{'开源项目组'}</div>
<div style={{marginLeft:26}}>项目经理：{'蒋宇航'}</div>
<div style={{opacity:1}}>{dataMap.pmsEnterpriseName}</div>
<div style={{marginLeft:26}}>项目经理：{dataMap.projectAssigneeName}</div>
</div>
<div class="pro-center">
<div className="pro-center">
<div className="pro-center-item">
<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-num">150</div>
<div className="pro-center-num">{dataMap.needFinishedCount}</div>
</div>
<div className="pro-center-item" style={{marginLeft:6}}>
<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-num">150</div>
<div className="pro-center-num">{dataMap.taskFinishedCount}</div>
</div>
<div className="pro-center-item" style={{marginLeft:6}}>
<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-num">150</div>
<div className="pro-center-num">{dataMap.sprintFinishedCount}</div>
</div>
</div>
<div className="pro-bottom">
<div className="pro-bottom-item">
<div className="pro-bt-name">测试用例数</div>
<div className="pro-bt-num">927</div>
<div className="pro-bt-num">{dataMap.testCaseCount}</div>
</div>
<div className="pro-bottom-item">
<div className="pro-bt-name">测试缺陷数</div>
<div className="pro-bt-num">58</div>
<div className="pro-bt-num">{dataMap.testBugCount}</div>
</div>
<div className="pro-bottom-item">
<div className="pro-bt-name">待测试数</div>
<div className="pro-bt-num">623</div>
<div className="pro-bt-num">{dataMap.notExecTestCaseCount}</div>
</div>
</div>
{props.shadow && <div className={`card-shadow ${props.shadow}`} ></div>}
{shadow && <div className={`card-shadow ${shadow}`} ></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 "./index.scss";
import ProjectCard from "./ProjectCard";
import { projectSituation } from "../../api";
function ProjectStatus(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 (
<div className="project-wrap">
<div className="project-head">
<div class="center-title-wrap">
<img src={centerBg} alt="" srcset="" />
<div className="center-title-wrap">
<img src={centerBg} alt="" />
<div className="center-title">可控开源创新中心</div>
<div className="center-sub-title">
Controllable open source innovation center software factory work
@ -27,10 +69,21 @@ function ProjectStatus(props) {
<div className="project-sub-inner">项目研发状态</div>
</div>
</div>
<div class="project-bottom-wrap">
<div className="project-bottom-wrap">
<div className="project-list-wrap">
<ProjectCard mgRight={true} />
<ProjectCard mgRight={true} />
{projectList.map((item, idx) => {
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={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={false} shadow="shadow-right" />
<ProjectCard mgRight={false} shadow="shadow-right" /> */}
</div>
</div>
</div>

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

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

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

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