forgeplus-react/src/forge/SoftwareFactory/components/ProjectStatus/index.jsx

import React, { useEffect, useState } from "react";
import { Route, Switch } from "react-router-dom";
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 [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 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
            situation
          </div>
        </div>
        <div className="soft-title">软件工厂工作态势</div>
      </div>
      <div className="project-sub-t-wrap">
        <div className="project-sub-t">
          <div className="project-sub-inner">项目研发状态</div>
        </div>
      </div>
      <div className="project-bottom-wrap">
        <div className="project-list-wrap">
          {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} />
          <ProjectCard mgRight={true} shadow="shadow-left" />
          <ProjectCard mgRight={true} shadow="shadow-center" />
          <ProjectCard mgRight={true} shadow="shadow-center" />
          <ProjectCard mgRight={true} shadow="shadow-center" />
          <ProjectCard mgRight={false} shadow="shadow-right" /> */}
        </div>
      </div>
    </div>
  );
}
export default ProjectStatus;