63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import TopP from "./TopP";
|
|
import Left from "./Left";
|
|
import Right from "./Right";
|
|
import Center from "./Center";
|
|
import {useEffect} from 'react';
|
|
import {useNavigate} from "react-router-dom";
|
|
import { useDispatch } from 'react-redux';
|
|
import { UpdateLine5Before } from "../../store/LinePageSlice";
|
|
function LinePage() {
|
|
const dispatch = useDispatch();
|
|
const myUrl = "192.168.8.22"
|
|
// const myUrl = window.location.host;
|
|
useEffect(() => {
|
|
let websocket5_1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=5-1-" + Date.now());
|
|
// @ts-ignore
|
|
websocket5_1.onmessage = function (event) {
|
|
let msgData = event.data
|
|
try {
|
|
msgData = JSON.parse(event.data);
|
|
} catch (error) {
|
|
console.log("websocket: [unable to msgData] : ", event.data);
|
|
}
|
|
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
|
dispatch(UpdateLine5Before(msgData));
|
|
}
|
|
// 清理函数
|
|
return () => {
|
|
websocket5_1.close();
|
|
};
|
|
}, [dispatch]);
|
|
|
|
const navigate = useNavigate();
|
|
useEffect(() => {
|
|
const handleKeyDown = (event:any) => {
|
|
if (event.key === 'ArrowUp') {
|
|
console.log('LDPage向上键被按下');
|
|
navigate('/LD?lineId=5-1');
|
|
// 执行向上键的逻辑
|
|
} else if (event.key === 'ArrowDown') {
|
|
console.log('LDPage向下键被按下');
|
|
// 执行向下键的逻辑
|
|
navigate('/LD?lineId=5-1');
|
|
}
|
|
}
|
|
window.addEventListener('keydown', handleKeyDown);
|
|
return () => {
|
|
window.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
});
|
|
return (
|
|
<React.Fragment>
|
|
<TopP />
|
|
<div className="block_bottom flex-row">
|
|
<Left />
|
|
<Center />
|
|
<Right />
|
|
</div>
|
|
</React.Fragment>
|
|
);
|
|
}
|
|
export default LinePage;
|