forgeplus-react/src/forge/SoftwareFactory/components/Home/thirdPanel.jsx

56 lines
2.0 KiB
JavaScript

import React, { useEffect, useState } from "react";
import right from "../../img/right.png";
let thirdPanelList1 = [
{ title: "昨日完结任务数", num: 50, isNUm: true, unit: "个" },
{ title: "昨日关闭缺陷数", num: 10, isNUm: true, unit: "个" },
{ title: "昨日需求评审数", num: 5, isNUm: true, unit: "个" },
{ title: "昨日最活跃项目", num: 8, isNUm: true, unit: "个" },
];
let thirdPanelList2 = [
{ title: "本月完结任务数", num: 50, isNUm: true, unit: "个" },
{ title: "本月关闭缺陷数", num: 10, isNUm: true, unit: "个" },
{ title: "本月需求评审数", num: 5, isNUm: true, unit: "个" },
{ title: "本月最活跃项目", num: 8, isNUm: true, unit: "个" },
];
function ThirdPanel(props) {
const { cardPage } = props;
const [thirdPanelList, setThirdPanelList] = useState([]);
useEffect(() => {
let list = cardPage === "1" ? thirdPanelList1 : thirdPanelList2;
setThirdPanelList(list);
}, []);
return (
<div className="third-panel">
<div className="white-panel-out">
<div className="white-panel-center">
<div className="white-panel-inner">
{thirdPanelList.map((item, idx) => {
return (
<div className="panel-item">
<div className="panel-item-content">
<div className="panel-item-content-left">
<img src={right} alt="" srcset="" />
<div>{item.title}</div>
</div>
<div class="panel-item-content-right">
<span className="panel-num">{item.num}</span>
<span className="panel-unit">{item.unit}</span>
</div>
</div>
<div className="panel-item-line"></div>
</div>
);
})}
</div>
</div>
</div>
<div className="panel-title">
{cardPage === "2" ? "本月完结工作" : "昨日完结工作"}
</div>
</div>
);
}
export default ThirdPanel;