update
This commit is contained in:
lb
父節點
b9c1c97cab
當前提交
c909129f41
@ -1,14 +1,21 @@
|
||||
import React from 'react';
|
||||
import Kiln from '../../../公共组件/窑炉信息/Kiln';
|
||||
import GoodProduction from '../../../公共组件/本日生产良品率/GoodProduction';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import cls from './index.module.less';
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<div className={cls.leftBar}>
|
||||
<motion.div
|
||||
className={cls.leftBar}
|
||||
initial={{ opacity: 0, position: 'absolute' }}
|
||||
animate={{ opacity: 1, position: 'relative' }}
|
||||
exit={{ opacity: 0, position: 'relative' }}
|
||||
transition={{ type: 'tween' }}
|
||||
>
|
||||
<Kiln />
|
||||
<GoodProduction />
|
||||
</div>
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.leftBar {
|
||||
width: 625px;
|
||||
height: 966px;
|
||||
margin-left: 40px;
|
||||
// margin-left: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@ -1 +0,0 @@
|
||||
1
|
||||
21
src/components/模块组件/窑炉内部/LeftSide/index.jsx
Normal file
21
src/components/模块组件/窑炉内部/LeftSide/index.jsx
Normal file
@ -0,0 +1,21 @@
|
||||
import React from 'react';
|
||||
import Kiln from '../../../公共组件/窑炉信息/Kiln';
|
||||
import GoodProduction from '../../../公共组件/本日生产良品率/GoodProduction';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
import cls from './index.module.less';
|
||||
|
||||
export default function index() {
|
||||
return (
|
||||
<motion.div
|
||||
className={cls.leftBar}
|
||||
initial={{ opacity: 0, position: 'absolute' }}
|
||||
animate={{ opacity: 1, position: 'relative' }}
|
||||
exit={{ opacity: 0, position: 'relative' }}
|
||||
transition={{ type: 'tween' }}
|
||||
>
|
||||
<Kiln />
|
||||
<GoodProduction />
|
||||
</motion.div>
|
||||
);
|
||||
}
|
||||
9
src/components/模块组件/窑炉内部/LeftSide/index.module.less
Normal file
9
src/components/模块组件/窑炉内部/LeftSide/index.module.less
Normal file
@ -0,0 +1,9 @@
|
||||
.leftBar {
|
||||
width: 625px;
|
||||
height: 966px;
|
||||
// margin-left: 40px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
}
|
||||
@ -22,6 +22,7 @@ export default function index() {
|
||||
<div id="FullScreen" style={styles}>
|
||||
<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
|
||||
<Head />
|
||||
{/* TODO: 为了不让每切换一次nav就刷新整个页面，将各个页面分别包裹在SocketContextProvider中 */}
|
||||
<SocketContextProvider>
|
||||
{navActive == '能耗分析' && <EnergyAnalysis />}
|
||||
{navActive != '能耗分析' && <Home active={navActive} />}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
export default function EnergyAnalysis() {
|
||||
console.log('[rendering...] 加载 能耗分析页面');
|
||||
return <div>EnergyAnalysis</div>;
|
||||
}
|
||||
|
||||
載入中…
新增問題並參考
Block a user