mt-fe-group
/
xuchang-screen
7
0
複製 0
程式碼 問題 0 合併請求 0 版本發佈 0 Wiki 活動
瀏覽代碼

update

xc-v2
lb 10 月之前
父節點
b9c1c97cab
當前提交
c909129f41
共有 8 個檔案被更改，包括 136 行新增 和 71 行删除
分割檢視
Diff Options
Show Stats Download Patch File Download Diff File
  1. +9
    -2
      src/components/模块组件/总览/LeftSide/index.jsx
  2. +1
    -1
      src/components/模块组件/总览/LeftSide/index.module.less
  3. +0
    -1
      src/components/模块组件/窑炉内部/1
  4. +21
    -0
      src/components/模块组件/窑炉内部/LeftSide/index.jsx
  5. +9
    -0
      src/components/模块组件/窑炉内部/LeftSide/index.module.less
  6. +1
    -0
      src/pages/index.jsx
  7. +94
    -67
      src/pages/总览/index.jsx
  8. +1
    -0
      src/pages/能耗分析/index.jsx

+ 9
- 2
src/components/模块组件/总览/LeftSide/index.jsx 查看文件

@@ -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
- 1
src/components/模块组件/总览/LeftSide/index.module.less 查看文件

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

display: flex;
flex-direction: column;


+ 0
- 1
src/components/模块组件/窑炉内部/1 查看文件

@@ -1 +0,0 @@
1

+ 21
- 0
src/components/模块组件/窑炉内部/LeftSide/index.jsx 查看文件

@@ -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
- 0
src/components/模块组件/窑炉内部/LeftSide/index.module.less 查看文件

@@ -0,0 +1,9 @@
.leftBar {
width: 625px;
height: 966px;
// margin-left: 40px;

display: flex;
flex-direction: column;
justify-content: space-between;
}

+ 1
- 0
src/pages/index.jsx 查看文件

@@ -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} />}


+ 94
- 67
src/pages/总览/index.jsx 查看文件

@@ -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
- 0
src/pages/能耗分析/index.jsx 查看文件

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

Write Preview
Loading…
取消
儲存