126 lines
2.5 KiB
JavaScript
126 lines
2.5 KiB
JavaScript
import { useState } from 'react';
|
|
import cls from './index.module.css';
|
|
import Chart2 from '../../../公共组件/时间火向数据';
|
|
import VideoContainer from './VideoContainer';
|
|
|
|
function KilnCenter() {
|
|
const [floor, setFloor] = useState(0);
|
|
|
|
function onFloorUpdate(flr) {
|
|
setFloor(flr);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="bgKilnInner"
|
|
style={{
|
|
width: '100%',
|
|
position: 'absolute',
|
|
top: '12%',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
}}
|
|
>
|
|
{/* 时间火向数据 */}
|
|
<div
|
|
className="fireAndTime"
|
|
style={{ position: 'absolute', top: '-112px', height: '212px' }}
|
|
>
|
|
<Chart2 />
|
|
</div>
|
|
|
|
{/* menu */}
|
|
<div
|
|
className="subMenu"
|
|
style={{
|
|
display: 'flex',
|
|
marginBottom: '24px',
|
|
justifyContent: 'center',
|
|
}}
|
|
>
|
|
<div
|
|
className={
|
|
'flr flr1 ' + cls.menuItem + ' ' + (floor == 1 ? cls.active : '')
|
|
}
|
|
onClick={() => onFloorUpdate(1)}
|
|
>
|
|
一层
|
|
</div>
|
|
<div
|
|
className={
|
|
'flr flr2 ' + cls.menuItem + ' ' + (floor == 2 ? cls.active : '')
|
|
}
|
|
onClick={() => onFloorUpdate(2)}
|
|
>
|
|
二层
|
|
</div>
|
|
</div>
|
|
|
|
{/* video */}
|
|
<VideoContainer onFloorUpdate={onFloorUpdate} floor={floor} />
|
|
|
|
<div className={cls.videoLayer2}></div>
|
|
|
|
{/* left side */}
|
|
{/* <div
|
|
className="leftSide"
|
|
style={{
|
|
position: 'absolute',
|
|
left: '88px',
|
|
top: '24%',
|
|
display: 'grid',
|
|
gridTemplateColumns: '100px 100px',
|
|
gap: '20px 18px',
|
|
gridAutoRows: '64px',
|
|
}}
|
|
>
|
|
{data.map((item) => (
|
|
<div
|
|
className="leftSideItem"
|
|
style={{
|
|
background: '#fff3',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
background: '#32535d',
|
|
}}
|
|
>
|
|
<span style={{ fontSize: '18px', lineHeight: 1, color: '#2EE4E6' }}>
|
|
{item.name}
|
|
</span>
|
|
<span
|
|
style={{ fontSize: '24px', lineHeight: '32px', color: '#fff' }}
|
|
>
|
|
{item.value} ℃
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<div
|
|
className="toolbox"
|
|
style={{
|
|
position: 'absolute',
|
|
bottom: '32px',
|
|
left: '64px',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '24px',
|
|
}}
|
|
>
|
|
<div
|
|
className="tlj tlj1"
|
|
style={{ background: '#ccc', width: '200px', height: '100px' }}
|
|
></div>
|
|
<div
|
|
className="tlj tlj2"
|
|
style={{ background: '#ccc', width: '200px', height: '100px' }}
|
|
></div>
|
|
</div> */}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default KilnCenter;
|