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

import React, { useEffect, useState } from "react";
import { Route, Switch } from "react-router-dom";
import { withRouter } from "react-router";
import bj1 from "../../img/bj1.png";
import newsLine from "../../img/news_line.png";
import next from "../../img/next.png";
import right from "../../img/right.png";
import centerBg from "../../img/center_title_bg.png";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import FirstPanel from "./firstPanel";
import SecondPanel from "./secondPanel";
import ThirdPanel from "./thirdPanel";
import ForthPanel from "./forthPanel";
import CenterPanel from "./centerPanel";
let focuseWorkList = [
  {
    name: "page1",
    list: [
      { num: 1, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 2, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 3, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 4, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 5, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
    ],
  },
  {
    name: "page2",
    list: [
      { num: 6, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 7, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 8, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 9, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 10, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
    ],
  },
  {
    name: "page3",
    list: [
      { num: 11, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 12, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 13, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 14, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
      { num: 15, content: "IDRL团队/IDRLnet《基于内嵌物理知识..》" },
    ],
  },
];

const setting = {
  dots: false,
  infinite: true,
  speed: 2000,
  slidesToShow: 1,
  slidesToScroll: 1,
  pauseOnDotsHover: true,
  autoplaySpeed: 5000,
  pauseOnFocus: true,
  autoplay: true,
  arrows: true,
  prevArrow: <img className="slick-prev slick-arrow" src={next} alt="" />,
  nextArrow: <img className="slick-next slick-arrow" src={next} alt="" />,
  //   afterChange: (index) => setTag(index),
};

function Home(props) {
  const {} = props;
  const [currentMonth, setCurrentMonth] = useState("2025年2月");
  //   const [focuseWorkList, setFocuseWorkList] = useState([]);
  //   useEffect(() => {
  //     getWorkList();
  //   }, []);

  //   function getWorkList() {
  //     let workList = [];
  //   }
  // function getDay(){
  //     let day = '2025年2月'
  //     return day
  // }
  return (
    <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">
            IDRL团队/IDRLnet《基于内嵌物理知经.》
          </div>
          <img class="news-line" src={newsLine} alt="" srcset="" />
          <div class="news-pic-wrap">
            <img class="news-pic" src={bj1} alt="" srcset="" />
          </div>
          <div className="news-content">
            为解决飞行器设计优化过程中物理场快速仿真问题和运行监测阶段物理场精确反演问题，国防科技创新研究院无人系统技术研究中心智能设计与究中心智能设计与
          </div>
          <div className="point-work">
            <div className="left-title">重点工作:</div>
            <div className="left-subTitle">Focus on work</div>
            <div className="point-work-wrap">
              <Slider {...setting}>
                {focuseWorkList && focuseWorkList.length > 0
                  ? focuseWorkList.map((page, idx) => {
                      return (
                        <div className="point-work-page" key={idx}>
                          {page.list.map((item, index) => {
                            return (
                              <div className="point-work-item" key={item.num}>
                                <div className="point-work-item-num">
                                  {item.num}
                                </div>
                                <div className="point-work-item-content">
                                  {item.content}
                                </div>
                              </div>
                            );
                          })}
                        </div>
                      );
                    })
                  : ""}
              </Slider>
            </div>
          </div>
        </div>
      </div>
      <div className="home-right">
        <div className="right-head">
          <div class="center-title-wrap">
            <img src={centerBg} alt="" srcset="" />
            <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="right-content">
          <div className="top-section">
            <FirstPanel />
            <SecondPanel />
          </div>
          <div className="bottom-section">
            <ThirdPanel />
            <ForthPanel />
          </div>
          <CenterPanel/>
        </div>
      </div>
    </div>
  );
}
export default Home;