add 轮播功能
This commit is contained in:
parent
b0e7a7ca34
commit
6cf533e718
22
src/App.js
22
src/App.js
@ -3,24 +3,40 @@ import "./index.css";
|
|||||||
import Head from "./components/Common/Company";
|
import Head from "./components/Common/Company";
|
||||||
import useSlider, { Slider } from "./hooks/useSlider";
|
import useSlider, { Slider } from "./hooks/useSlider";
|
||||||
import NavMenu from "./components/Common/NavMenu";
|
import NavMenu from "./components/Common/NavMenu";
|
||||||
import { useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import Home from "./pages/Home";
|
import Home from "./pages/Home";
|
||||||
import EnergyAnalysis from "./pages/EnergyCostAnalysis";
|
import EnergyAnalysis from "./pages/EnergyCostAnalysis";
|
||||||
import RulerContainer from "./components/Tools/Ruler";
|
import RulerContainer from "./components/Tools/Ruler";
|
||||||
import { createPortal } from "react-dom";
|
import { createPortal } from "react-dom";
|
||||||
|
|
||||||
|
const Menus = ["窑炉总览", "窑炉内部", "退火监测", "质检统计", "能耗分析"];
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const { styles, value, setValue } = useSlider(100);
|
const { styles, value, setValue } = useSlider(100);
|
||||||
const [navActive, setNavActive] = useState("窑炉总览");
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<div id="FullScreen" style={{ ...styles, overflow: "hidden" }}>
|
<div id="FullScreen" style={{ ...styles, overflow: "hidden" }}>
|
||||||
<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
|
<NavMenu active={navActive} onChangeActive={handleMenuChange} />
|
||||||
<Head />
|
<Head />
|
||||||
|
|
||||||
{navActive == "能耗分析" && <EnergyAnalysis />}
|
{navActive == "能耗分析" && <EnergyAnalysis />}
|
||||||
{navActive == "能耗分析" && <div className='bgDitu'></div>}
|
{navActive == "能耗分析" && <div className="bgDitu"></div>}
|
||||||
{navActive != "能耗分析" && <Home active={navActive} />}
|
{navActive != "能耗分析" && <Home active={navActive} />}
|
||||||
</div>
|
</div>
|
||||||
<Slider value={value} setValue={setValue} />
|
<Slider value={value} setValue={setValue} />
|
||||||
|
Loading…
Reference in New Issue
Block a user