update layout
This commit is contained in:
		@@ -23,11 +23,12 @@ export default function index() {
 | 
			
		||||
				<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
 | 
			
		||||
				<Head />
 | 
			
		||||
				<SocketContextProvider>
 | 
			
		||||
					{navActive == '窑炉总览' && <Home />}
 | 
			
		||||
					{navActive == '质检统计' && <CheckInfo />}
 | 
			
		||||
					{navActive == '退火监测' && <FireCheck />}
 | 
			
		||||
					{navActive == '能耗分析' && <EnergyAnalysis />}
 | 
			
		||||
					{navActive == '窑炉内部' && <KilnInner />}
 | 
			
		||||
					{navActive != '能耗分析' && <Home active={navActive} />}
 | 
			
		||||
					{/* {navActive == '窑炉总览' && <Home />} */}
 | 
			
		||||
					{/* {navActive == '质检统计' && <CheckInfo />}
 | 
			
		||||
					{navActive == '退火监测' && <FireCheck />}
 | 
			
		||||
					{navActive == '窑炉内部' && <KilnInner />} */}
 | 
			
		||||
				</SocketContextProvider>
 | 
			
		||||
			</div>
 | 
			
		||||
			<Slider value={value} setValue={setValue} />
 | 
			
		||||
 
 | 
			
		||||
@@ -5,10 +5,116 @@ import CenterTopData from '../../components/模块组件/总览/CenterTop';
 | 
			
		||||
 | 
			
		||||
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 (
 | 
			
		||||
		<div className="Main">
 | 
			
		||||
			<LeftBar />
 | 
			
		||||
			{/* {active == '窑炉总览' && <KilnTotalLeft />} */}
 | 
			
		||||
			{active == '窑炉总览' && <LeftBar />}
 | 
			
		||||
			{active == '窑炉内部' && <KilnInnerLeft />}
 | 
			
		||||
			{active == '退火监测' && <FireCheckLeft />}
 | 
			
		||||
			{active == '质检统计' && <QualityCheckLeft />}
 | 
			
		||||
			{/* <LeftBar /> */}
 | 
			
		||||
			<div className="Center">
 | 
			
		||||
				<div className="CenterData">
 | 
			
		||||
					<CenterTopData />
 | 
			
		||||
@@ -19,7 +125,12 @@ export default function Home() {
 | 
			
		||||
					<BottomBar />
 | 
			
		||||
				</div>
 | 
			
		||||
			</div>
 | 
			
		||||
			<RightBar />
 | 
			
		||||
 | 
			
		||||
			{active == '窑炉总览' && <RightBar />}
 | 
			
		||||
			{active == '窑炉内部' && <KilnInnerRight />}
 | 
			
		||||
			{active == '退火监测' && <FireCheckRight />}
 | 
			
		||||
			{active == '质检统计' && <QualityCheckRight />}
 | 
			
		||||
			{/* <RightBar /> */}
 | 
			
		||||
		</div>
 | 
			
		||||
	);
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user