update

2023-11-01 14:50:03 +08:00 · 2023-11-01 14:50:03 +08:00 · 296a39c7f8
--- a/src/components/公共组件/导航菜单/index.jsx
+++ b/src/components/公共组件/导航菜单/index.jsx
@ -1,6 +1,7 @@
+import { useCallback, useState } from 'react';
 import cls from './index.module.less';

-export default function CenterMenu() {
+export default function CenterMenu({ active, onChangeActive }) {
 	const menuList = [
 		['窑炉总览', '/kilnSummary'],
 		['窑炉内部', '/kilnInner'],
@ -11,7 +12,11 @@ export default function CenterMenu() {
 	return (
 		<div className={`${cls.centerMenu} flex`}>
 			{menuList.map((menu) => (
-				<div key={menu[0]} className={cls.menuItem}>
+				<div
+					key={menu[0]}
+					className={`${cls.menuItem} ${active == menu[0] ? cls.active : ''}`}
+					onClick={() => onChangeActive(menu[0])}
+				>
 					{menu[0]}
 				</div>
 			))}
--- a/src/components/公共组件/导航菜单/index.module.less
+++ b/src/components/公共组件/导航菜单/index.module.less
@ -23,6 +23,7 @@
 		'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
 }

+.menuItem.active,
 .menuItem:hover {
 	color: #00fff7;
 }
--- a/src/components/模块组件/总览/CenterTop/index.jsx
+++ b/src/components/模块组件/总览/CenterTop/index.jsx
@ -1,5 +1,4 @@
 import React from 'react';
-import NavMenu from '../../../公共组件/导航菜单';
 import Item2 from './RightTable';
 import Item1 from './LeftBoxes';

@ -8,7 +7,6 @@ import cls from './index.module.less';
 export default function index() {
 	return (
 		<>
-			<NavMenu />
 			<div className="flex justify-between w-full h-full">
 				<div className={cls.leftGrid}>
 					<Item1 />
--- a/src/hooks/useSlider.js
+++ b/src/hooks/useSlider.js
@ -44,5 +44,5 @@ export default function useSlider(defaultSize) {
 		};
 	}, [value]);

-	return { styles, setValue };
+	return { styles, value, setValue };
 }
--- a/src/pages/index.jsx
+++ b/src/pages/index.jsx
@ -7,17 +7,25 @@ import RightBar from '../components/模块组件/总览/RightSide';
 import CenterTopData from '../components/模块组件/总览/CenterTop';
 import { SocketContextProvider } from '../store/socket-data-provider';
 import useSlider, { Slider } from '../hooks/useSlider';
-
+import NavMenu from '../components/公共组件/导航菜单';
 import V3DBG from '../assets/V3DBG.png';
+import { useState } from 'react';
 // import V3D from './V3D';
+import Home from './总览';
+import CheckInfo from './质检统计';
+import FireCheck from './退火监测';
+import EnergyAnalysis from './能耗分析';
+import KilnInner from './窑炉内部';

 export default function index() {
-	const { styles, setValue } = useSlider(75);
+	const { styles, value, setValue } = useSlider(75);
+	const [navActive, setNavActive] = useState('窑炉总览');

 	return (
 		<>
-			<SocketContextProvider>
-				<div id="FullScreen" style={styles}>
+			<div id="FullScreen" style={styles}>
+				<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
+				<SocketContextProvider>
 					<Head />
 					<div className="Main">
 						<LeftBar />
@ -33,9 +41,9 @@ export default function index() {
 						</div>
 						<RightBar />
 					</div>
-				</div>
-				<Slider setValue={setValue} />
-			</SocketContextProvider>
+				</SocketContextProvider>
+			</div>
+			<Slider value={value} setValue={setValue} />
 		</>
 	);
 }
--- a/src/pages/总览/1
+++ b/src/pages/总览/1
--- a/src/pages/总览/index.jsx
+++ b/src/pages/总览/index.jsx
@ -0,0 +1,3 @@
+export default function Home() {
+	return <div>Home</div>;
+}
--- a/src/pages/窑炉内部/1
+++ b/src/pages/窑炉内部/1
@ -1 +0,0 @@
-1
--- a/src/pages/窑炉内部/index.jsx
+++ b/src/pages/窑炉内部/index.jsx
@ -0,0 +1,3 @@
+export default function KilnInner() {
+	return <div>KilnInner</div>;
+}
--- a/src/pages/能耗分析/1
+++ b/src/pages/能耗分析/1
@ -1 +0,0 @@
-1
--- a/src/pages/能耗分析/index.jsx
+++ b/src/pages/能耗分析/index.jsx
@ -0,0 +1,3 @@
+export default function EnergyAnalysis() {
+	return <div>EnergyAnalysis</div>;
+}
--- a/src/pages/质检统计/1
+++ b/src/pages/质检统计/1
@ -1,2 +0,0 @@
-1
-1
--- a/src/pages/质检统计/index.jsx
+++ b/src/pages/质检统计/index.jsx
@ -0,0 +1,3 @@
+export default function CheckInfo() {
+	return <div>CheckInfo</div>;
+}
--- a/src/pages/退火监测/1
+++ b/src/pages/退火监测/1
@ -1 +0,0 @@
-1
--- a/src/pages/退火监测/index.jsx
+++ b/src/pages/退火监测/index.jsx
@ -0,0 +1,3 @@
+export default function FireCheck() {
+	return <div>FireCheck</div>;
+}