170 lines
3.5 KiB
JavaScript
170 lines
3.5 KiB
JavaScript
import { useRef, useState } from 'react';
|
|
import cls from './index.module.css';
|
|
import Chart2 from '../../../公共组件/时间火向数据';
|
|
|
|
function KilnCenter() {
|
|
const videoRef = useRef(null);
|
|
const [currentVideo, setCurrentVideo] = useState(
|
|
'http://localhost:8000/video/new_boom.mp4',
|
|
);
|
|
const [activeFlr, setActiveFlr] = useState(0);
|
|
|
|
console.log('video', videoRef);
|
|
|
|
function handleClickFlr(flr) {
|
|
if (flr == 1) {
|
|
setActiveFlr(1);
|
|
setCurrentVideo('http://localhost:8000/video/new_flr1.mp4');
|
|
} else {
|
|
setActiveFlr(2);
|
|
setCurrentVideo('http://localhost:8000/video/new_flr2.mp4');
|
|
}
|
|
}
|
|
|
|
const data = [
|
|
{ name: 'TE271', value: 163.3 },
|
|
{ name: 'TE271', value: 163.3 },
|
|
{ name: 'TE271', value: 163.3 },
|
|
{ name: 'TE271', value: 163.3 },
|
|
{ name: 'TE271', value: 163.3 },
|
|
{ name: 'TE271', value: 163.3 },
|
|
{ name: 'TE271', value: 163.3 },
|
|
{ name: 'TE271', value: 163.3 },
|
|
{ name: 'TE271', value: 163.3 },
|
|
{ name: 'TE271', value: 163.3 },
|
|
];
|
|
|
|
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 +
|
|
' ' +
|
|
(activeFlr == 1 ? cls.active : '')
|
|
}
|
|
onClick={() => handleClickFlr(1)}
|
|
>
|
|
一层
|
|
</div>
|
|
<div
|
|
className={
|
|
'flr flr2 ' +
|
|
cls.menuItem +
|
|
' ' +
|
|
(activeFlr == 2 ? cls.active : '')
|
|
}
|
|
onClick={() => handleClickFlr(2)}
|
|
>
|
|
二层
|
|
</div>
|
|
</div>
|
|
|
|
{/* video */}
|
|
<div
|
|
className="video-wrapper"
|
|
style={{
|
|
position: 'fixed',
|
|
top: 0,
|
|
left: 0,
|
|
width: '100%',
|
|
height: '100%',
|
|
zIndex: -1000,
|
|
}}
|
|
>
|
|
<video muted preload="auto" autoPlay={true} width={'100%'}>
|
|
<source src="/video/enter.webm" type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
|
|
<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;
|