1

src/page/TestPage/CenterUp.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from "react"; // 使用useState钩子来管理状态
+import intl from "react-intl-universal";
+import '../../lanhuapp/common.css';
+import "../../lanhuapp/index.css";
+import "../style/standard.css"
+import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
+import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
+import { number } from "echarts";
+import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
+
+function CenterUp() {
+
+// 使用 useState 钩子来管理当前的序号状态
+const [modelIndex, setModelIndex] = useState(1); // 默认序号为 1
+
+// 定义切换模型序号的函数
+const prevModelIndex = () => {
+  // 当前序号减 1，如果小于 1，则变为 5
+  setModelIndex((currentModelIndex) => (currentModelIndex - 1 + 5) % 5);
+};
+
+const nextModelIndex = () => {
+  // 当前序号加 1，如果大于 5，则变为 1
+  setModelIndex((currentModelIndex) => (currentModelIndex + 1) % 5);
+};
+
+
+    
+  return (
+    <div className="block_16 flex-col fineWin">
+      <div className="fineWin-footer"/>
+      <MybabylonJS_1 modelPath={`line${modelIndex+1}`} />
+      {/* 添加按钮来切换组件 */}
+      <button className="centerButton_1" onClick={prevModelIndex}>上一个组件</button>
+      <button className="centerButton_2" onClick={nextModelIndex}>下一个组件</button>
+      <h5 className="centerButton_2" >{modelIndex}</h5>
+    </div>
+  );
+}
+
+export default CenterUp;

src/page/TestPage/index.css

@@ -0,0 +1,4 @@
+.main-box {
+  font-size: 50px;
+  color: #fff;
+}

src/page/TestPage/index.tsx

@@ -0,0 +1,38 @@
+import "./index.css"
+import MainE from "../MainE/MainE";
+import {useParams,useNavigate} from "react-router-dom";
+import {useEffect} from 'react';
+function TestPage() {
+  const {LineID} = useParams()
+  const navigate = useNavigate();
+  console.log("TestPage被加载了")
+useEffect(() => {
+  const handleKeyDown = (event:any) => {
+    if (event.key === 'ArrowUp') {
+      console.log('TestPage向上键被按下');
+      // 执行向上键的逻辑
+    } else if (event.key === 'ArrowDown') {
+      console.log('TestPage向下键被按下');
+      // 执行向下键的逻辑
+      navigate('/LD',{ state: { LineID: LineID} });
+      
+    }
+  };
+
+  window.addEventListener('keydown', handleKeyDown);
+
+  return () => {
+    window.removeEventListener('keydown', handleKeyDown);
+  };
+}, []); 
+
+  return (
+    <>
+      <div className="main-box">TestPage Line{LineID}</div>
+      <div className="main-box" style={{display:'none'}}>3434</div>
+      <MainE/>
+    </>
+  );
+}
+
+export default TestPage;