mt-fe-group/xuchang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

update video order

Browse Source
This commit is contained in:
lb 2023-11-07 14:21:47 +08:00
parent 709008c3a3
commit 00d9bdeaf1
5 changed files with 118 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

106
src/components/工具组件/Ruler.jsx Normal file
View File

@ -0,0 +1,106 @@
import { useCallback, useEffect, useRef, useState } from 'react';
import { motion } from 'framer-motion';
function Ruler(props) {
const ruler = useRef(null);
const [left, setLeft] = useState(props.left || '100px');
const [dragging, setDragging] = useState(false);
const handleUp = useCallback(() => {
setDragging(false);
}, []);
const handleMove = useCallback(
(e) => {
if (!dragging) return;
const x = e.clientX;
setLeft(x + 'px');
},
[dragging],
);
useEffect(() => {
document.addEventListener('mouseup', handleUp);
document.addEventListener('mousemove', handleMove);
return () => {
document.removeEventListener('mouseup', handleUp);
document.removeEventListener('mousemove', handleMove);
};
}, [dragging]);
function handleMouseDown() {
setDragging(true);
}
return (
<motion.div
ref={ruler}
className="ruler-line"
style={{
position: 'relative',
top: 0,
left: left,
overflow: 'visible',
height: '100vh',
width: '1px',
cursor: 'pointer',
userSelect: 'none',
background: props.background || '#ccc',
}}
onMouseDown={handleMouseDown}
>
<div
className="ruler-tooltip"
style={{
position: 'absolute',
top: '200px',
right: '-132px',
width: '128px',
border: '1px solid #0008',
padding: '0 12px',
background: '#ecc100',
color: '#0008',
}}
>
left: <b>{left}</b>
</div>
</motion.div>
);
}
function RulerContainer(props) {
const [rulers, setRulers] = useState([]);
const rulerCfg = {
width: '2px',
height: '100vh',
background: '#ccc',
};
// 监听事件
useEffect(() => {
let fn = (e) => {
if (e.shiftKey && e.key === 'R') {
setRulers((rulers) => [...rulers, rulerCfg]);
}
if (e.shiftKey && e.key === 'Q') {
setRulers((rulers) => []);
}
};
document.addEventListener('keydown', fn);
}, []);
return (
<div
id="ruler-container"
style={{ position: 'fixed', top: 0, left: 0, width: 0, height: 0 }}
>
{rulers.map((ruler) => (
<Ruler key={Math.random()} {...ruler} />
))}
</div>
);
}
export default RulerContainer;

6
src/components/模块组件/窑炉内部/Center/videoComponents/Floor1To2.jsx
View File

@ -16,15 +16,15 @@ function FloorOneToTwo(props) {
className="video-wrapper" className="video-wrapper"
style={{ style={{
position: 'fixed', position: 'fixed',
top: 0, top: '7px',
left: 0, left: '50px',
width: '100%', width: '100%',
height: '100%', height: '100%',
zIndex: -998, zIndex: -998,
}} }}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }} exit={{ opacity: 0, transition: { duration: 0, delay: 0.1 } }}
> >
<video ref={vd} muted width={'100%'}> <video ref={vd} muted width={'100%'}>
<source src="/video/1to2.webm" type="video/mp4" /> <source src="/video/1to2.webm" type="video/mp4" />

6
src/components/模块组件/窑炉内部/Center/videoComponents/Floor2To1.jsx
View File

@ -16,15 +16,15 @@ function FloorTwoToOne(props) {
className="video-wrapper" className="video-wrapper"
style={{ style={{
position: 'fixed', position: 'fixed',
top: 0, top: '7px',
left: 0, left: '50px',
width: '100%', width: '100%',
height: '100%', height: '100%',
zIndex: -998, zIndex: -998,
}} }}
initial={{ opacity: 0 }} initial={{ opacity: 0 }}
animate={{ opacity: 1 }} animate={{ opacity: 1 }}
exit={{ opacity: [1, 1, 0], transition: { duration: 0.5 } }} exit={{ opacity: 0, transition: { duration: 0.2, delay: 0.2 } }}
> >
<video ref={vd} muted width={'100%'}> <video ref={vd} muted width={'100%'}>
<source src="/video/2to1.webm" type="video/mp4" /> <source src="/video/2to1.webm" type="video/mp4" />

9
src/pages/document.ejs
View File

@ -1,14 +1,11 @@
<head> <head>
<script src="<%= context.publicPath %>./v3d.js"></script> <!-- <script src="<%= context.publicPath %>./v3d.js"></script>
<script src="<%= context.publicPath %>./font.css"></script> <script src="<%= context.publicPath %>./font.css"></script> -->
</head> </head>
<body> <body>
<div id="root"> <div id="root">
</div> </div>
<div id="v1" style="color: brown;">
</div>
</body> </body>

4
src/pages/index.jsx
View File

@ -1,7 +1,6 @@
import './global.less'; import './global.less';
import './index.less'; import './index.less';
import Head from '../components/公共组件/顶部公司名称'; import Head from '../components/公共组件/顶部公司名称';
import { SocketContextProvider } from '../store/socket-data-provider'; import { SocketContextProvider } from '../store/socket-data-provider';
import useSlider, { Slider } from '../hooks/useSlider'; import useSlider, { Slider } from '../hooks/useSlider';
import NavMenu from '../components/公共组件/导航菜单'; import NavMenu from '../components/公共组件/导航菜单';
@ -9,6 +8,8 @@ import { useState } from 'react';
// import V3D from './V3D'; // import V3D from './V3D';
import Home from './总览'; import Home from './总览';
import EnergyAnalysis from './能耗分析'; import EnergyAnalysis from './能耗分析';
import RulerContainer from '../components/工具组件/Ruler';
import { createPortal } from 'react-dom';
export default function index() { export default function index() {
const { styles, value, setValue } = useSlider(75); const { styles, value, setValue } = useSlider(75);
@ -30,6 +31,7 @@ export default function index() {
</SocketContextProvider> </SocketContextProvider>
</div> </div>
<Slider value={value} setValue={setValue} /> <Slider value={value} setValue={setValue} />
{createPortal(<RulerContainer />, document.body)}
</> </>
); );
} }