mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update

Browse Source
This commit is contained in:
lb 2023-11-02 10:16:08 +08:00
parent b9c1c97cab
commit c909129f41
8 changed files with 136 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/模块组件/总览/LeftSide/index.jsx
View File

@ -1,14 +1,21 @@
import React from 'react'; import React from 'react';
import Kiln from '../../../公共组件/窑炉信息/Kiln'; import Kiln from '../../../公共组件/窑炉信息/Kiln';
import GoodProduction from '../../../公共组件/本日生产良品率/GoodProduction'; import GoodProduction from '../../../公共组件/本日生产良品率/GoodProduction';
import { motion } from 'framer-motion';
import cls from './index.module.less'; import cls from './index.module.less';
export default function index() { export default function index() {
return ( 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 /> <Kiln />
<GoodProduction /> <GoodProduction />
</div> </motion.div>
); );
} }

2
src/components/模块组件/总览/LeftSide/index.module.less
View File

@ -1,7 +1,7 @@
.leftBar { .leftBar {
width: 625px; width: 625px;
height: 966px; height: 966px;
margin-left: 40px; // margin-left: 40px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;

1
src/components/模块组件/窑炉内部/1
View File

@ -1 +0,0 @@
1

21
src/components/模块组件/窑炉内部/LeftSide/index.jsx Normal file
View 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
View File

@ -0,0 +1,9 @@
.leftBar {
width: 625px;
height: 966px;
// margin-left: 40px;
display: flex;
flex-direction: column;
justify-content: space-between;
}

1
src/pages/index.jsx
View File

@ -22,6 +22,7 @@ export default function index() {
<div id="FullScreen" style={styles}> <div id="FullScreen" style={styles}>
<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} /> <NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
<Head /> <Head />
{/* TODO: 为了不让每切换一次nav就刷新整个页面，将各个页面分别包裹在SocketContextProvider中 */}
<SocketContextProvider> <SocketContextProvider>
{navActive == '能耗分析' && <EnergyAnalysis />} {navActive == '能耗分析' && <EnergyAnalysis />}
{navActive != '能耗分析' && <Home active={navActive} />} {navActive != '能耗分析' && <Home active={navActive} />}

161
src/pages/总览/index.jsx
View File

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

1
src/pages/能耗分析/index.jsx
View File

@ -1,3 +1,4 @@
export default function EnergyAnalysis() { export default function EnergyAnalysis() {
console.log('[rendering...] 加载 能耗分析页面');
return <div>EnergyAnalysis</div>; return <div>EnergyAnalysis</div>;
} }