|
|
@@ -8,15 +8,10 @@ import V3DBG from '../../assets/V3DBG.png'; |
|
|
|
const KilnTotalLeft = (props) => { |
|
|
|
return ( |
|
|
|
<motion.div |
|
|
|
style={{ |
|
|
|
marginLeft: '40px', |
|
|
|
width: '625px', |
|
|
|
height: '100%', |
|
|
|
background: '#fff3', |
|
|
|
}} |
|
|
|
initial={{ opacity: 0, position: 'absolute' }} |
|
|
|
animate={{ opacity: 1, position: 'unset' }} |
|
|
|
exit={{ opacity: 0, position: 'absolute' }} |
|
|
|
animate={{ opacity: 1, position: 'relative' }} |
|
|
|
exit={{ opacity: 0, position: 'relative' }} |
|
|
|
transition={{ type: 'tween' }} |
|
|
|
> |
|
|
|
窑炉总览LEFT |
|
|
|
</motion.div> |
|
|
@@ -25,100 +20,132 @@ const KilnTotalLeft = (props) => { |
|
|
|
|
|
|
|
const KilnInnerLeft = (props) => { |
|
|
|
return ( |
|
|
|
<div |
|
|
|
className="" |
|
|
|
style={{ |
|
|
|
marginLeft: '40px', |
|
|
|
width: '625px', |
|
|
|
height: '100%', |
|
|
|
background: '#f003', |
|
|
|
}} |
|
|
|
<motion.div |
|
|
|
initial={{ opacity: 0, position: 'absolute' }} |
|
|
|
animate={{ opacity: 1, position: 'relative' }} |
|
|
|
exit={{ opacity: 0, position: 'relative' }} |
|
|
|
transition={{ type: 'tween' }} |
|
|
|
> |
|
|
|
窑炉内部LEFT |
|
|
|
</div> |
|
|
|
窑炉内部侧边 |
|
|
|
</motion.div> |
|
|
|
); |
|
|
|
}; |
|
|
|
const FireCheckLeft = (props) => { |
|
|
|
return ( |
|
|
|
<div |
|
|
|
className="" |
|
|
|
style={{ |
|
|
|
marginLeft: '40px', |
|
|
|
width: '625px', |
|
|
|
height: '100%', |
|
|
|
background: '#00f3', |
|
|
|
}} |
|
|
|
<motion.div |
|
|
|
initial={{ opacity: 0, position: 'absolute' }} |
|
|
|
animate={{ opacity: 1, position: 'relative' }} |
|
|
|
exit={{ opacity: 0, position: 'relative' }} |
|
|
|
transition={{ type: 'tween' }} |
|
|
|
> |
|
|
|
退火监测LEFT |
|
|
|
</div> |
|
|
|
退火监测 |
|
|
|
</motion.div> |
|
|
|
); |
|
|
|
}; |
|
|
|
const QualityCheckLeft = (props) => { |
|
|
|
return ( |
|
|
|
<div |
|
|
|
className="" |
|
|
|
style={{ |
|
|
|
marginLeft: '40px', |
|
|
|
width: '625px', |
|
|
|
height: '100%', |
|
|
|
background: '#0f03', |
|
|
|
}} |
|
|
|
<motion.div |
|
|
|
initial={{ opacity: 0, position: 'absolute' }} |
|
|
|
animate={{ opacity: 1, position: 'relative' }} |
|
|
|
exit={{ opacity: 0, position: 'relative' }} |
|
|
|
transition={{ type: 'tween' }} |
|
|
|
> |
|
|
|
质检统计LEFT |
|
|
|
</div> |
|
|
|
质检统计LEfT |
|
|
|
</motion.div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
const KilnTotalRight = (props) => { |
|
|
|
return ( |
|
|
|
<div style={{ width: '625px', height: '100%', background: '#fff3' }}> |
|
|
|
窑炉总览 Right |
|
|
|
</div> |
|
|
|
<motion.div |
|
|
|
style={{ |
|
|
|
width: '625px', |
|
|
|
height: '900px', |
|
|
|
background: '#fff3', |
|
|
|
}} |
|
|
|
initial={{ opacity: 0, position: 'absolute' }} |
|
|
|
animate={{ opacity: 1, position: 'relative' }} |
|
|
|
exit={{ opacity: 0, position: 'absolute' }} |
|
|
|
transition={{ type: 'tween' }} |
|
|
|
> |
|
|
|
窑炉总览 RIGHT |
|
|
|
</motion.div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
const KilnInnerRight = (props) => { |
|
|
|
return ( |
|
|
|
<div |
|
|
|
className="" |
|
|
|
style={{ width: '625px', height: '100%', background: '#f003' }} |
|
|
|
<motion.div |
|
|
|
style={{ |
|
|
|
width: '625px', |
|
|
|
height: '900px', |
|
|
|
background: '#fff3', |
|
|
|
}} |
|
|
|
initial={{ opacity: 0, position: 'absolute' }} |
|
|
|
animate={{ opacity: 1, position: 'relative' }} |
|
|
|
exit={{ opacity: 0, position: 'absolute' }} |
|
|
|
transition={{ type: 'tween' }} |
|
|
|
> |
|
|
|
窑炉内部LEFT |
|
|
|
</div> |
|
|
|
窑炉内部 RIGHT |
|
|
|
</motion.div> |
|
|
|
); |
|
|
|
}; |
|
|
|
const FireCheckRight = (props) => { |
|
|
|
return ( |
|
|
|
<div |
|
|
|
className="" |
|
|
|
style={{ width: '625px', height: '100%', background: '#00f3' }} |
|
|
|
<motion.div |
|
|
|
style={{ |
|
|
|
width: '625px', |
|
|
|
height: '900px', |
|
|
|
background: '#fff3', |
|
|
|
}} |
|
|
|
initial={{ opacity: 0, position: 'absolute' }} |
|
|
|
animate={{ opacity: 1, position: 'relative' }} |
|
|
|
exit={{ opacity: 0, position: 'absolute' }} |
|
|
|
transition={{ type: 'tween' }} |
|
|
|
> |
|
|
|
退火监测LEFT |
|
|
|
</div> |
|
|
|
退火监测 RIGHT |
|
|
|
</motion.div> |
|
|
|
); |
|
|
|
}; |
|
|
|
const QualityCheckRight = (props) => { |
|
|
|
return ( |
|
|
|
<div |
|
|
|
className="" |
|
|
|
style={{ width: '625px', height: '100%', background: '#0f03' }} |
|
|
|
<motion.div |
|
|
|
style={{ |
|
|
|
width: '625px', |
|
|
|
height: '900px', |
|
|
|
background: '#fff3', |
|
|
|
}} |
|
|
|
initial={{ opacity: 0, position: 'absolute' }} |
|
|
|
animate={{ opacity: 1, position: 'relative' }} |
|
|
|
exit={{ opacity: 0, position: 'absolute' }} |
|
|
|
transition={{ type: 'tween' }} |
|
|
|
> |
|
|
|
质检统计LEFT |
|
|
|
</div> |
|
|
|
质检统计 RIGHT |
|
|
|
</motion.div> |
|
|
|
); |
|
|
|
}; |
|
|
|
|
|
|
|
export default function Home({ active }) { |
|
|
|
console.log('home', active); |
|
|
|
console.log('[rendering...] 加载 Home页面'); |
|
|
|
|
|
|
|
return ( |
|
|
|
<div className="Main"> |
|
|
|
{/* {active == '窑炉总览' && <KilnTotalLeft />} */} |
|
|
|
<AnimatePresence> |
|
|
|
{active == '窑炉总览' && <KilnTotalLeft />} |
|
|
|
<AnimatePresence mode="wait"> |
|
|
|
<div |
|
|
|
className="left-side" |
|
|
|
style={{ |
|
|
|
marginLeft: '40px', |
|
|
|
width: '625px', |
|
|
|
height: '100%', |
|
|
|
background: '#fff3', |
|
|
|
}} |
|
|
|
> |
|
|
|
{active == '窑炉总览' && <LeftBar key="kiln-total" />} |
|
|
|
{active == '窑炉内部' && <KilnInnerLeft key="kiln-inner" />} |
|
|
|
{active == '退火监测' && <FireCheckLeft key="fire-check" />} |
|
|
|
{active == '质检统计' && <QualityCheckLeft key="quality-check" />} |
|
|
|
</div> |
|
|
|
</AnimatePresence> |
|
|
|
{active == '窑炉内部' && <KilnInnerLeft />} |
|
|
|
{active == '退火监测' && <FireCheckLeft />} |
|
|
|
{active == '质检统计' && <QualityCheckLeft />} |
|
|
|
{/* <LeftBar /> */} |
|
|
|
<div className="Center"> |
|
|
|
<div className="CenterData"> |
|
|
@@ -131,10 +158,10 @@ export default function Home({ active }) { |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
{active == '窑炉总览' && <RightBar />} |
|
|
|
{active == '窑炉内部' && <KilnInnerRight />} |
|
|
|
{active == '退火监测' && <FireCheckRight />} |
|
|
|
{active == '质检统计' && <QualityCheckRight />} |
|
|
|
{active == '窑炉总览' && <RightBar key="right-bar" />} |
|
|
|
{active == '窑炉内部' && <KilnInnerRight key="kiln-inner-right" />} |
|
|
|
{active == '退火监测' && <FireCheckRight key="kiln-fire-check-right" />} |
|
|
|
{active == '质检统计' && <QualityCheckRight key="kiln-quality-right" />} |
|
|
|
{/* <RightBar /> */} |
|
|
|
</div> |
|
|
|
); |
|
|
|