update layout
This commit is contained in:
		@@ -23,11 +23,12 @@ export default function index() {
 | 
				
			|||||||
				<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
 | 
									<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
 | 
				
			||||||
				<Head />
 | 
									<Head />
 | 
				
			||||||
				<SocketContextProvider>
 | 
									<SocketContextProvider>
 | 
				
			||||||
					{navActive == '窑炉总览' && <Home />}
 | 
					 | 
				
			||||||
					{navActive == '质检统计' && <CheckInfo />}
 | 
					 | 
				
			||||||
					{navActive == '退火监测' && <FireCheck />}
 | 
					 | 
				
			||||||
					{navActive == '能耗分析' && <EnergyAnalysis />}
 | 
										{navActive == '能耗分析' && <EnergyAnalysis />}
 | 
				
			||||||
					{navActive == '窑炉内部' && <KilnInner />}
 | 
										{navActive != '能耗分析' && <Home active={navActive} />}
 | 
				
			||||||
 | 
										{/* {navActive == '窑炉总览' && <Home />} */}
 | 
				
			||||||
 | 
										{/* {navActive == '质检统计' && <CheckInfo />}
 | 
				
			||||||
 | 
										{navActive == '退火监测' && <FireCheck />}
 | 
				
			||||||
 | 
										{navActive == '窑炉内部' && <KilnInner />} */}
 | 
				
			||||||
				</SocketContextProvider>
 | 
									</SocketContextProvider>
 | 
				
			||||||
			</div>
 | 
								</div>
 | 
				
			||||||
			<Slider value={value} setValue={setValue} />
 | 
								<Slider value={value} setValue={setValue} />
 | 
				
			||||||
 
 | 
				
			|||||||
@@ -5,10 +5,116 @@ import CenterTopData from '../../components/模块组件/总览/CenterTop';
 | 
				
			|||||||
 | 
					
 | 
				
			||||||
import V3DBG from '../../assets/V3DBG.png';
 | 
					import V3DBG from '../../assets/V3DBG.png';
 | 
				
			||||||
 | 
					
 | 
				
			||||||
export default function Home() {
 | 
					const KilnTotalLeft = (props) => {
 | 
				
			||||||
 | 
						return (
 | 
				
			||||||
 | 
							<div
 | 
				
			||||||
 | 
								style={{
 | 
				
			||||||
 | 
									marginLeft: '40px',
 | 
				
			||||||
 | 
									width: '625px',
 | 
				
			||||||
 | 
									height: '100%',
 | 
				
			||||||
 | 
									background: '#fff3',
 | 
				
			||||||
 | 
								}}
 | 
				
			||||||
 | 
							>
 | 
				
			||||||
 | 
								窑炉总览LEFT
 | 
				
			||||||
 | 
							</div>
 | 
				
			||||||
 | 
						);
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const KilnInnerLeft = (props) => {
 | 
				
			||||||
 | 
						return (
 | 
				
			||||||
 | 
							<div
 | 
				
			||||||
 | 
								className=""
 | 
				
			||||||
 | 
								style={{
 | 
				
			||||||
 | 
									marginLeft: '40px',
 | 
				
			||||||
 | 
									width: '625px',
 | 
				
			||||||
 | 
									height: '100%',
 | 
				
			||||||
 | 
									background: '#f003',
 | 
				
			||||||
 | 
								}}
 | 
				
			||||||
 | 
							>
 | 
				
			||||||
 | 
								窑炉内部LEFT
 | 
				
			||||||
 | 
							</div>
 | 
				
			||||||
 | 
						);
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					const FireCheckLeft = (props) => {
 | 
				
			||||||
 | 
						return (
 | 
				
			||||||
 | 
							<div
 | 
				
			||||||
 | 
								className=""
 | 
				
			||||||
 | 
								style={{
 | 
				
			||||||
 | 
									marginLeft: '40px',
 | 
				
			||||||
 | 
									width: '625px',
 | 
				
			||||||
 | 
									height: '100%',
 | 
				
			||||||
 | 
									background: '#00f3',
 | 
				
			||||||
 | 
								}}
 | 
				
			||||||
 | 
							>
 | 
				
			||||||
 | 
								退火监测LEFT
 | 
				
			||||||
 | 
							</div>
 | 
				
			||||||
 | 
						);
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					const QualityCheckLeft = (props) => {
 | 
				
			||||||
 | 
						return (
 | 
				
			||||||
 | 
							<div
 | 
				
			||||||
 | 
								className=""
 | 
				
			||||||
 | 
								style={{
 | 
				
			||||||
 | 
									marginLeft: '40px',
 | 
				
			||||||
 | 
									width: '625px',
 | 
				
			||||||
 | 
									height: '100%',
 | 
				
			||||||
 | 
									background: '#0f03',
 | 
				
			||||||
 | 
								}}
 | 
				
			||||||
 | 
							>
 | 
				
			||||||
 | 
								质检统计LEFT
 | 
				
			||||||
 | 
							</div>
 | 
				
			||||||
 | 
						);
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const KilnTotalRight = (props) => {
 | 
				
			||||||
 | 
						return (
 | 
				
			||||||
 | 
							<div style={{ width: '625px', height: '100%', background: '#fff3' }}>
 | 
				
			||||||
 | 
								窑炉总览 Right
 | 
				
			||||||
 | 
							</div>
 | 
				
			||||||
 | 
						);
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					const KilnInnerRight = (props) => {
 | 
				
			||||||
 | 
						return (
 | 
				
			||||||
 | 
							<div
 | 
				
			||||||
 | 
								className=""
 | 
				
			||||||
 | 
								style={{ width: '625px', height: '100%', background: '#f003' }}
 | 
				
			||||||
 | 
							>
 | 
				
			||||||
 | 
								窑炉内部LEFT
 | 
				
			||||||
 | 
							</div>
 | 
				
			||||||
 | 
						);
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					const FireCheckRight = (props) => {
 | 
				
			||||||
 | 
						return (
 | 
				
			||||||
 | 
							<div
 | 
				
			||||||
 | 
								className=""
 | 
				
			||||||
 | 
								style={{ width: '625px', height: '100%', background: '#00f3' }}
 | 
				
			||||||
 | 
							>
 | 
				
			||||||
 | 
								退火监测LEFT
 | 
				
			||||||
 | 
							</div>
 | 
				
			||||||
 | 
						);
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					const QualityCheckRight = (props) => {
 | 
				
			||||||
 | 
						return (
 | 
				
			||||||
 | 
							<div
 | 
				
			||||||
 | 
								className=""
 | 
				
			||||||
 | 
								style={{ width: '625px', height: '100%', background: '#0f03' }}
 | 
				
			||||||
 | 
							>
 | 
				
			||||||
 | 
								质检统计LEFT
 | 
				
			||||||
 | 
							</div>
 | 
				
			||||||
 | 
						);
 | 
				
			||||||
 | 
					};
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					export default function Home({ active }) {
 | 
				
			||||||
 | 
						console.log('home', active);
 | 
				
			||||||
	return (
 | 
						return (
 | 
				
			||||||
		<div className="Main">
 | 
							<div className="Main">
 | 
				
			||||||
			<LeftBar />
 | 
								{/* {active == '窑炉总览' && <KilnTotalLeft />} */}
 | 
				
			||||||
 | 
								{active == '窑炉总览' && <LeftBar />}
 | 
				
			||||||
 | 
								{active == '窑炉内部' && <KilnInnerLeft />}
 | 
				
			||||||
 | 
								{active == '退火监测' && <FireCheckLeft />}
 | 
				
			||||||
 | 
								{active == '质检统计' && <QualityCheckLeft />}
 | 
				
			||||||
 | 
								{/* <LeftBar /> */}
 | 
				
			||||||
			<div className="Center">
 | 
								<div className="Center">
 | 
				
			||||||
				<div className="CenterData">
 | 
									<div className="CenterData">
 | 
				
			||||||
					<CenterTopData />
 | 
										<CenterTopData />
 | 
				
			||||||
@@ -19,7 +125,12 @@ export default function Home() {
 | 
				
			|||||||
					<BottomBar />
 | 
										<BottomBar />
 | 
				
			||||||
				</div>
 | 
									</div>
 | 
				
			||||||
			</div>
 | 
								</div>
 | 
				
			||||||
			<RightBar />
 | 
					
 | 
				
			||||||
 | 
								{active == '窑炉总览' && <RightBar />}
 | 
				
			||||||
 | 
								{active == '窑炉内部' && <KilnInnerRight />}
 | 
				
			||||||
 | 
								{active == '退火监测' && <FireCheckRight />}
 | 
				
			||||||
 | 
								{active == '质检统计' && <QualityCheckRight />}
 | 
				
			||||||
 | 
								{/* <RightBar /> */}
 | 
				
			||||||
		</div>
 | 
							</div>
 | 
				
			||||||
	);
 | 
						);
 | 
				
			||||||
}
 | 
					}
 | 
				
			||||||
 
 | 
				
			|||||||
		Reference in New Issue
	
	Block a user