mt-fe-group/xuchang-screen
9
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
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 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>
);
}

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

@@ -1,7 +1,7 @@
.leftBar {
width: 625px;
height: 966px;
margin-left: 40px;
// margin-left: 40px;
display: flex;
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}>
<NavMenu active={navActive} onChangeActive={(v) => setNavActive(v)} />
<Head />
{/* TODO: 为了不让每切换一次nav就刷新整个页面，将各个页面分别包裹在SocketContextProvider中 */}
<SocketContextProvider>
{navActive == '能耗分析' && <EnergyAnalysis />}
{navActive != '能耗分析' && <Home active={navActive} />}

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

@@ -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
src/pages/能耗分析/index.jsx
View File

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