update 窑炉内部
This commit is contained in:
parent
1f091a7fa5
commit
1b25fa6eec
BIN
public/video/new_1to2.mp4
Normal file
BIN
public/video/new_1to2.mp4
Normal file
Binary file not shown.
BIN
public/video/new_boom.mp4
Normal file
BIN
public/video/new_boom.mp4
Normal file
Binary file not shown.
BIN
public/video/new_flr1.mp4
Normal file
BIN
public/video/new_flr1.mp4
Normal file
Binary file not shown.
BIN
public/video/new_flr2.mp4
Normal file
BIN
public/video/new_flr2.mp4
Normal file
Binary file not shown.
87
src/components/模块组件/窑炉内部/Center/index.jsx
Normal file
87
src/components/模块组件/窑炉内部/Center/index.jsx
Normal file
@ -0,0 +1,87 @@
|
|||||||
|
import { useRef, useState } from 'react';
|
||||||
|
import cls from './index.module.css';
|
||||||
|
|
||||||
|
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');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className="bgKilnInner"
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
position: 'absolute',
|
||||||
|
top: '12%',
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
<div
|
||||||
|
className="video-wrapper"
|
||||||
|
style={{
|
||||||
|
flex: 1,
|
||||||
|
// background: '#ccc3',
|
||||||
|
width: '100%',
|
||||||
|
}} // , top: '10%', left: '10%', position: 'absolute' }}
|
||||||
|
>
|
||||||
|
<video
|
||||||
|
src={currentVideo}
|
||||||
|
muted
|
||||||
|
preload="auto"
|
||||||
|
autoPlay={true}
|
||||||
|
width={'100%'}
|
||||||
|
ref={videoRef}
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default KilnCenter;
|
25
src/components/模块组件/窑炉内部/Center/index.module.css
Normal file
25
src/components/模块组件/窑炉内部/Center/index.module.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.menuItem {
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
padding: 10px 50px;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 48px;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
background: url(../../../../assets/bg_center_menu.png) no-repeat;
|
||||||
|
background-size: 100% 50%;
|
||||||
|
background-position: bottom;
|
||||||
|
color: #00fff788;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||||
|
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
|
||||||
|
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem.active,
|
||||||
|
.menuItem:hover {
|
||||||
|
color: #00fff7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem:not(:first-child) {
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
@ -3,7 +3,7 @@ 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 KilnCenter from '../../components/模块组件/窑炉内部/Center';
|
||||||
import KilnInnerLeft from '../../components/模块组件/窑炉内部/LeftSide';
|
import KilnInnerLeft from '../../components/模块组件/窑炉内部/LeftSide';
|
||||||
import KilnInnerRight from '../../components/模块组件/窑炉内部/RightSide';
|
import KilnInnerRight from '../../components/模块组件/窑炉内部/RightSide';
|
||||||
import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide';
|
import FireCheckLeft from '../../components/模块组件/退火监测/LeftSide';
|
||||||
@ -74,6 +74,8 @@ export default function Home({ active }) {
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
{active == '窑炉内部' && <KilnCenter />}
|
||||||
|
|
||||||
{active == '退火监测' && <div className="bgFire"></div>}
|
{active == '退火监测' && <div className="bgFire"></div>}
|
||||||
|
|
||||||
{active == '质检统计' && <div className="bgFire"></div>}
|
{active == '质检统计' && <div className="bgFire"></div>}
|
||||||
|
25
src/pages/总览/index.module.css
Normal file
25
src/pages/总览/index.module.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.menuItem {
|
||||||
|
transition: all 0.3s ease-out;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
padding: 10px 50px;
|
||||||
|
font-size: 32px;
|
||||||
|
line-height: 48px;
|
||||||
|
letter-spacing: 6px;
|
||||||
|
background: url(../../assets/bg_center_menu.png) no-repeat;
|
||||||
|
background-size: 100% 50%;
|
||||||
|
background-position: bottom;
|
||||||
|
color: #00fff788;
|
||||||
|
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||||
|
'PingFang SC', 'Microsoft YaHei', '微软雅黑', 'Microsoft YaHei UI',
|
||||||
|
'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Micro Hei', sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem.active,
|
||||||
|
.menuItem:hover {
|
||||||
|
color: #00fff7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem:not(:first-child) {
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user