mt-fe-group/xuchang-new
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add 轮播功能

Browse Source
This commit is contained in:
lb 2024-01-26 14:08:31 +08:00
parent b0e7a7ca34
commit 6cf533e718
2 changed files with 20 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.js
View File

@ -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} />