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

import React, { useEffect, useState } from "react";
import right from "../../img/right.png";
let firstPanelList1 = [
  {
    title: "需求待评审数",
    key: "needNotFinishCount",
    num: 50,
    isNUm: true,
    unit: "个",
  },
  {
    title: "任务待完成数",
    key: "taskNotFinishCount",
    num: 10,
    isNUm: true,
    unit: "个",
  },
  {
    title: "缺陷待修复数",
    key: "bugNotFinishCount",
    num: 5,
    isNUm: true,
    unit: "个",
  },
  {
    title: "测试用例未执行数",
    key: "notExecTestCaseCount",
    num: 8,
    isNUm: true,
    unit: "个",
  },
];
let firstPanelList2 = [
  {
    title: "本周完结任务数",
    key: "yesterdayFinishTask",
    num: 50,
    isNUm: true,
    unit: "个",
  },
  {
    title: "本周关闭缺陷数",
    key: "yesterdayFinishBug",
    num: 10,
    isNUm: true,
    unit: "个",
  },
  {
    title: "本周需求评审数",
    key: "yesterdayFinishNeed",
    num: 5,
    isNUm: true,
    unit: "个",
  },
  { title: "本周最活跃项目", key: "zonePmsProjectMax", num: 8, isNUm: false },
];

function FirstPanel(props) {
  const { cardPage, dayMap, weekMap } = props;
  const [firstPanelList, setFirstPanelList] = useState([]);
  useEffect(() => {
    let list = cardPage === "1" ? firstPanelList1 : firstPanelList2;
    setFirstPanelList(list);
  }, []);
  return (
    <div className="first-panel">
      <div className="white-panel-out">
        <div className="white-panel-center">
          <div className="white-panel-inner">
            {firstPanelList.map((item, idx) => {
              return (
                <div className="panel-item" key={idx}>
                  <div className="panel-item-content">
                    <div className="panel-item-content-left">
                      <img src={right} alt=""  />
                      <div>{item.title}</div>
                    </div>
                    {item.isNUm ? (
                      <div className="panel-item-content-right">
                        <span className="panel-num">
                          {cardPage === "2"
                            ? weekMap[item.key]
                            : dayMap[item.key]}
                        </span>
                        <span className="panel-unit">{item.unit}</span>
                      </div>
                    ) : (
                      <div className="panel-item-content-right-text">
                        {cardPage === "2"
                          ? weekMap[item.key]
                          : dayMap[item.key]}
                      </div>
                    )}
                  </div>
                  <div className="panel-item-line"></div>
                </div>
              );
            })}
          </div>
        </div>
      </div>
      <div className="panel-title">
        {cardPage === "2" ? "本周完结工作" : "今日项目状态"}
      </div>
    </div>
  );
}

export default FirstPanel;