add 轮播功能

2024-01-26 14:08:31 +08:00 · 2024-01-26 14:08:31 +08:00 · 6cf533e718
Parent b0e7a7ca34
--- a/src/App.js
+++ b/src/App.js
@ -3,24 +3,40 @@ import "./index.css";
 import Head from "./components/Common/Company";
 import useSlider, { Slider } from "./hooks/useSlider";
 import NavMenu from "./components/Common/NavMenu";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Home from "./pages/Home";
 import EnergyAnalysis from "./pages/EnergyCostAnalysis";
 import RulerContainer from "./components/Tools/Ruler";
 import { createPortal } from "react-dom";

+const Menus = ["窑炉总览", "窑炉内部", "退火监测", "质检统计", "能耗分析"];
+
 function App() {
  const { styles, value, setValue } = useSlider(100);
  const [navActive, setNavActive] = useState("窑炉总览");

+  useEffect(() => {
+    const timer = setInterval(() => {
+      handleMenuChange(Menus[(Menus.indexOf(navActive) + 1) % Menus.length]);
+    }, 10000);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [navActive]);
+
+  function handleMenuChange(value) {
+    setNavActive(value);
+  }
+
  return (
    <>
      <div id="FullScreen" style={{ ...styles, overflow: "hidden" }}>
-        <NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
+        <NavMenu active={navActive} onChangeActive={handleMenuChange} />
        <Head />

        {navActive == "能耗分析" && <EnergyAnalysis />}
-        {navActive == "能耗分析" && <div className='bgDitu'></div>}
+        {navActive == "能耗分析" && <div className="bgDitu"></div>}
        {navActive != "能耗分析" && <Home active={navActive} />}
      </div>
      <Slider value={value} setValue={setValue} />
--- a/src/pages/Home/index.jsx
+++ b/src/pages/Home/index.jsx
@ -16,7 +16,7 @@ import useRefresh from "../../hooks/useRefresh";

 export default function Home({ active }) {
  useRefresh(true);
-  
+
  const videoUp = useRef(null);
  const videoDown = useRef(null);