add 退火监测左边栏
This commit is contained in:
parent
c909129f41
commit
e11565ab7e
@ -38,7 +38,7 @@ const Container = (props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={`${cls.container} ${props.className}`}>
|
<div className={`${cls.container} ${props.className}`} style={props.style}>
|
||||||
<div className={cls.container__head}>
|
<div className={cls.container__head}>
|
||||||
<img
|
<img
|
||||||
src={icon.current}
|
src={icon.current}
|
||||||
|
@ -7,6 +7,7 @@ function BottomBarItem(props) {
|
|||||||
icon={props.icon}
|
icon={props.icon}
|
||||||
title={props.title}
|
title={props.title}
|
||||||
className={`${cls.bottomBarItem} ${props.className}`}
|
className={`${cls.bottomBarItem} ${props.className}`}
|
||||||
|
style={props.style}
|
||||||
>
|
>
|
||||||
{props.children}
|
{props.children}
|
||||||
</Container>
|
</Container>
|
||||||
|
@ -149,7 +149,12 @@ function GasI(props) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<BottomBarItem icon="pause" title="助燃风流量" className={cls.gas}>
|
<BottomBarItem
|
||||||
|
icon="pause"
|
||||||
|
title="助燃风流量"
|
||||||
|
className={cls.gas}
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
<div className={cls.headWidget}>
|
<div className={cls.headWidget}>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
<Switch size="small" defaultChecked onChange={handleSwitchChange} />
|
||||||
|
@ -31,7 +31,12 @@ function GasII(props) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<BottomBarItem icon="pause" title="天然气流量" className={cls.gas}>
|
<BottomBarItem
|
||||||
|
icon="pause"
|
||||||
|
title="天然气流量"
|
||||||
|
className={`${cls.gas} ${props.className}`}
|
||||||
|
style={props.style}
|
||||||
|
>
|
||||||
{/* legend */}
|
{/* legend */}
|
||||||
<div className={cls.headWidget}>
|
<div className={cls.headWidget}>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
@ -1,6 +1,8 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import Kiln from '../../../公共组件/窑炉信息/Kiln';
|
import Kiln from '../../../公共组件/窑炉信息/Kiln';
|
||||||
import GoodProduction from '../../../公共组件/本日生产良品率/GoodProduction';
|
import GasFlow from '../../../公共组件/天然气流量';
|
||||||
|
import WindFlow from '../../../公共组件/助燃风流量';
|
||||||
|
|
||||||
import { motion } from 'framer-motion';
|
import { motion } from 'framer-motion';
|
||||||
|
|
||||||
import cls from './index.module.less';
|
import cls from './index.module.less';
|
||||||
@ -15,7 +17,8 @@ export default function index() {
|
|||||||
transition={{ type: 'tween' }}
|
transition={{ type: 'tween' }}
|
||||||
>
|
>
|
||||||
<Kiln />
|
<Kiln />
|
||||||
<GoodProduction />
|
<GasFlow style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
<WindFlow style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
</motion.div>
|
</motion.div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -1 +0,0 @@
|
|||||||
1
|
|
24
src/components/模块组件/退火监测/LeftSide/index.jsx
Normal file
24
src/components/模块组件/退火监测/LeftSide/index.jsx
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Kiln from '../../../公共组件/窑炉信息/Kiln';
|
||||||
|
import GasFlow from '../../../公共组件/天然气流量';
|
||||||
|
import WindFlow from '../../../公共组件/助燃风流量';
|
||||||
|
|
||||||
|
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 />
|
||||||
|
<GasFlow style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
<WindFlow style={{ flex: 1, width: '100%', marginTop: '24px' }} />
|
||||||
|
</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;
|
||||||
|
}
|
@ -3,6 +3,10 @@ import BottomBar from '../../components/模块组件/总览/Bottom';
|
|||||||
import RightBar from '../../components/模块组件/总览/RightSide';
|
import RightBar from '../../components/模块组件/总览/RightSide';
|
||||||
import CenterTopData from '../../components/模块组件/总览/CenterTop';
|
import CenterTopData from '../../components/模块组件/总览/CenterTop';
|
||||||
import { AnimatePresence, motion } from 'framer-motion';
|
import { AnimatePresence, motion } from 'framer-motion';
|
||||||
|
|
||||||
|
import KilnInnerLeft from '../../components/模块组件/窑炉内部/LeftSide';
|
||||||
|
import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide';
|
||||||
|
|
||||||
import V3DBG from '../../assets/V3DBG.png';
|
import V3DBG from '../../assets/V3DBG.png';
|
||||||
|
|
||||||
const KilnTotalLeft = (props) => {
|
const KilnTotalLeft = (props) => {
|
||||||
@ -18,30 +22,6 @@ const KilnTotalLeft = (props) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const KilnInnerLeft = (props) => {
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, position: 'absolute' }}
|
|
||||||
animate={{ opacity: 1, position: 'relative' }}
|
|
||||||
exit={{ opacity: 0, position: 'relative' }}
|
|
||||||
transition={{ type: 'tween' }}
|
|
||||||
>
|
|
||||||
窑炉内部侧边
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const FireCheckLeft = (props) => {
|
|
||||||
return (
|
|
||||||
<motion.div
|
|
||||||
initial={{ opacity: 0, position: 'absolute' }}
|
|
||||||
animate={{ opacity: 1, position: 'relative' }}
|
|
||||||
exit={{ opacity: 0, position: 'relative' }}
|
|
||||||
transition={{ type: 'tween' }}
|
|
||||||
>
|
|
||||||
退火监测
|
|
||||||
</motion.div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const QualityCheckLeft = (props) => {
|
const QualityCheckLeft = (props) => {
|
||||||
return (
|
return (
|
||||||
<motion.div
|
<motion.div
|
||||||
|
Loading…
Reference in New Issue
Block a user