diff --git a/package-lock.json b/package-lock.json index 2ced1af..3ff198f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -41,6 +41,7 @@ "dotenv": "^10.0.0", "dotenv-expand": "^5.1.0", "echarts": "^5.4.0", + "echarts-for-react": "^3.0.2", "eslint": "^8.3.0", "eslint-config-react-app": "^7.0.1", "eslint-webpack-plugin": "^3.1.1", @@ -6931,6 +6932,19 @@ "zrender": "5.4.3" } }, + "node_modules/echarts-for-react": { + "version": "3.0.2", + "resolved": "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz", + "integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==", + "dependencies": { + "fast-deep-equal": "^3.1.3", + "size-sensor": "^1.0.1" + }, + "peerDependencies": { + "echarts": "^3.0.0 || ^4.0.0 || ^5.0.0", + "react": "^15.0.0 || >=16.0.0" + } + }, "node_modules/ee-first": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", @@ -14843,6 +14857,11 @@ "resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz", "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==" }, + "node_modules/size-sensor": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.2.tgz", + "integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==" + }, "node_modules/slash": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz", @@ -21957,6 +21976,15 @@ "zrender": "5.4.3" } }, + "echarts-for-react": { + "version": "3.0.2", + "resolved": "https://registry.npmmirror.com/echarts-for-react/-/echarts-for-react-3.0.2.tgz", + "integrity": "sha512-DRwIiTzx8JfwPOVgGttDytBqdp5VzCSyMRIxubgU/g2n9y3VLUmF2FK7Icmg/sNVkv4+rktmrLN9w22U2yy3fA==", + "requires": { + "fast-deep-equal": "^3.1.3", + "size-sensor": "^1.0.1" + } + }, "ee-first": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/ee-first/-/ee-first-1.1.1.tgz", @@ -27955,6 +27983,11 @@ "resolved": "https://registry.npmmirror.com/sisteransi/-/sisteransi-1.0.5.tgz", "integrity": "sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==" }, + "size-sensor": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/size-sensor/-/size-sensor-1.0.2.tgz", + "integrity": "sha512-2NCmWxY7A9pYKGXNBfteo4hy14gWu47rg5692peVMst6lQLPKrVjhY+UTEsPI5ceFRJSl3gVgMYaUi/hKuaiKw==" + }, "slash": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/slash/-/slash-3.0.0.tgz", diff --git a/package.json b/package.json index c688386..57eeebc 100644 --- a/package.json +++ b/package.json @@ -36,6 +36,7 @@ "dotenv": "^10.0.0", "dotenv-expand": "^5.1.0", "echarts": "^5.4.0", + "echarts-for-react": "^3.0.2", "eslint": "^8.3.0", "eslint-config-react-app": "^7.0.1", "eslint-webpack-plugin": "^3.1.1", diff --git a/public/png/1x/编组 27.png b/public/png/1x/编组 27.png deleted file mode 100644 index 901a6e5..0000000 Binary files a/public/png/1x/编组 27.png and /dev/null differ diff --git a/public/png/2x/编组 27@2x.png b/public/png/2x/编组 27@2x.png deleted file mode 100644 index b8af60e..0000000 Binary files a/public/png/2x/编组 27@2x.png and /dev/null differ diff --git a/public/png/background.png b/public/png/background.png index 8e0f45f..34a7a68 100644 Binary files a/public/png/background.png and b/public/png/background.png differ diff --git a/public/png/rect/lp_center_down.png b/public/png/rect/lp_center_down.png new file mode 100644 index 0000000..0e92921 Binary files /dev/null and b/public/png/rect/lp_center_down.png differ diff --git a/public/png/rect/lp_center_up.png b/public/png/rect/lp_center_up.png new file mode 100644 index 0000000..b70c3fc Binary files /dev/null and b/public/png/rect/lp_center_up.png differ diff --git a/public/png/rect/lp_left_down.png b/public/png/rect/lp_left_down.png new file mode 100644 index 0000000..8829b14 Binary files /dev/null and b/public/png/rect/lp_left_down.png differ diff --git a/public/png/rect/lp_left_up.png b/public/png/rect/lp_left_up.png new file mode 100644 index 0000000..c959883 Binary files /dev/null and b/public/png/rect/lp_left_up.png differ diff --git a/public/png/rect/lp_right_down.png b/public/png/rect/lp_right_down.png new file mode 100644 index 0000000..ffcf2e7 Binary files /dev/null and b/public/png/rect/lp_right_down.png differ diff --git a/public/png/rect/lp_right_up.png b/public/png/rect/lp_right_up.png new file mode 100644 index 0000000..5a62d50 Binary files /dev/null and b/public/png/rect/lp_right_up.png differ diff --git a/public/png/topTiltle.png b/public/png/topTiltle.png new file mode 100644 index 0000000..23219e0 Binary files /dev/null and b/public/png/topTiltle.png differ diff --git a/public/svg/topback.svg b/public/svg/topback.svg index cff5a04..99cec12 100644 --- a/public/svg/topback.svg +++ b/public/svg/topback.svg @@ -1,100 +1,98 @@ - - - 编组 11 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/App.tsx b/src/App.tsx index 7ea1ba4..5899b51 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,6 +15,9 @@ import SwitchLine from "./page/AutoSwitch/SwitchLine"; import {MyObservable} from "./context/MyObservable"; import {Observable} from "@babylonjs/core"; import {selectGlassStatus} from "./store/ProductionMonitoringEntity"; +import TestPage from "./page/TestPage"; +import LDPage from "./page/LDPage" +import LinePage from './page/LinePage'; // const LOCALES_LIST = [ // { @@ -78,6 +81,28 @@ function App() { element: , errorElement: }, + ///////////////////////////////////////////////////////////////////////////// + { + path: "/TP/:LineID?", + element: , + errorElement: + }, + { + path: "/LD", + element: , + errorElement: + }, + /////////////////////////////////////////////////////////////// + { + path: "/LP/:LineID?", + element: , + errorElement: + }, + // { + // path: "/TP/:LineID?", + // element: , + // errorElement: + // }, ]); return ( diff --git a/src/babylonjs/LinePageBabylon.tsx b/src/babylonjs/LinePageBabylon.tsx new file mode 100644 index 0000000..700d7b7 --- /dev/null +++ b/src/babylonjs/LinePageBabylon.tsx @@ -0,0 +1,429 @@ +import React, { useEffect, useRef, useState, useContext, useMemo } from "react"; +import * as BABYLON from "@babylonjs/core"; +import "@babylonjs/core/Debug/debugLayer"; +import "@babylonjs/inspector"; +import "@babylonjs/loaders/glTF"; +import { GridMaterial } from "@babylonjs/materials/"; +import { + Animatable, + HemisphericLight, + Mesh, + Observable, + Vector3, +} from "@babylonjs/core"; +import { + GlassAnimation1_1, + GlassAnimation1_2D, + GlassAnimation1_2U, + GlassAnimation1_3, + GlassAnimation1_4, + GlassAnimation2_1, + GlassAnimation2_2D, + GlassAnimation2_2U, + GlassAnimation2_3, + GlassAnimation2_4, + GlassAnimation3_1, + GlassAnimation3_2D, + GlassAnimation3_2U, + GlassAnimation3_3, + GlassAnimation3_4, + GlassAnimation4_1, + GlassAnimation4_2D, + GlassAnimation4_2U, + GlassAnimation4_3, + GlassAnimation4_4, +} from "./GlassAnimation"; +import { useAppSelector } from "../store/hooks"; +import { + GlassStatus, + selectGlassStatus, +} from "../store/ProductionMonitoringEntity"; +import "../page/style/standard.css"; +import { MyObservable } from "../context/MyObservable"; +import { Button, ButtonGroup } from "@mui/material"; +import intl from "react-intl-universal"; +import { EquStatusInterface, selectEquStatus } from "../store/EquStatusEntity"; +import EquMap from "./EquMap"; + +const onMainCamObservable = new Observable(); +const onEquObservable = new Observable(); + +const myStyle = { + width: "1041px", + height: "562px", + outline: "none", +}; + +const DetailCamera = { + alpha: BABYLON.Tools.ToRadians(270), + beta: BABYLON.Tools.ToRadians(25), + radius: 120, + target: new BABYLON.Vector3(-110, 0, -8), + // Part_1: { + // alpha: BABYLON.Tools.ToRadians(270), + // beta: BABYLON.Tools.ToRadians(25), + // radius: 85, + // target: new BABYLON.Vector3(-110, 0, -8), + // }, + // Part_2: { + // alpha: BABYLON.Tools.ToRadians(270), + // beta: BABYLON.Tools.ToRadians(25), + // radius: 85, + // target: new BABYLON.Vector3(-40, 0, -8), + // }, + // Part_3: { + // alpha: BABYLON.Tools.ToRadians(270), + // beta: BABYLON.Tools.ToRadians(25), + // radius: 85, + // target: new BABYLON.Vector3(0, 0, -8), + // }, + // Part_4: { + // alpha: BABYLON.Tools.ToRadians(270), + // beta: BABYLON.Tools.ToRadians(25), + // radius: 85, + // target: new BABYLON.Vector3(110, 0, -8), + // }, +}; + +interface MybabylonJSProps { + modelPath: string; // 明确 modelPath 属性的类型为 string +} + +function MybabylonJS({ modelPath }: MybabylonJSProps) { + const onGlassObservable = useContext(MyObservable); + const EquStatus = useAppSelector(selectEquStatus); + const canvasRef = useRef(null); + onEquObservable.notifyObservers(EquStatus); + // const thisLineGlassStatus = useAppSelector(selectGlassStatus) + // onGlassObservable.notifyObservers(thisLineGlassStatus) + const [SelectedMeshName, setSelectedMeshName] = useState(null); + + interface MybabylonJSProps { + modelPath: string; + } + + // 使用 useRef 来存储当前加载的模型引用 + const currentMeshesRef = useRef>([]); + + useEffect(() => { + // 确保 canvas 引用存在 + if (!canvasRef.current) return; + + const canvas = canvasRef.current; + const engine = new BABYLON.Engine(canvas, true, { + preserveDrawingBuffer: true, + stencil: true, + }); + + const createScene = async function () { + // This creates a basic Babylon Scene object (non-mesh) + const scene = new BABYLON.Scene(engine); + scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); + + const light = new BABYLON.DirectionalLight( + "light", + new BABYLON.Vector3(20, 20, 100), + scene + ); + const light2 = new BABYLON.PointLight( + "light2", + new BABYLON.Vector3(20, 20, 100), + scene + ); + + const Glass1_1 = new BABYLON.TransformNode("Glass1_1"); + + const baseLight = new HemisphericLight( + "hemiLight", + new Vector3(-1, 1, 0), + scene + ); + baseLight.intensity = 1; + baseLight.diffuse = new BABYLON.Color3(1, 1, 1); + baseLight.specular = new BABYLON.Color3(0.25, 0.25, 0.25); + baseLight.groundColor = new BABYLON.Color3(0.5, 0.5, 0.5); + + //add an arcRotateCamera to the scene + const camera = new BABYLON.ArcRotateCamera( + "camera", + BABYLON.Tools.ToRadians(245), + BABYLON.Tools.ToRadians(25), + 90, + new BABYLON.Vector3(-13, 0, 0) + ); + camera.lowerRadiusLimit = 10; + camera.upperRadiusLimit = 600; + + // This attaches the camera to the canvas + camera.attachControl(canvas, true); + + //创建一个材质 + const newMt = new BABYLON.StandardMaterial("newMt"); + newMt.diffuseColor = BABYLON.Color3.Blue(); + + const ground = BABYLON.MeshBuilder.CreateGround( + "ground", + { + width: 1000, + height: 1000, + subdivisions: 1, + }, + scene + ); + + ground.scaling.x = 100; + ground.scaling.z = ground.scaling.x; + ground.isPickable = false; + + let grid = new GridMaterial("grid", scene); + + grid.majorUnitFrequency = 10; + grid.minorUnitVisibility = 0.3; + grid.gridRatio = 0.04; + grid.backFaceCulling = !1; + grid.mainColor = new BABYLON.Color3(1, 1, 1); + grid.lineColor = new BABYLON.Color3(1, 1, 1); + grid.opacity = 0.8; + grid.zOffset = 1; + grid.opacityTexture = new BABYLON.Texture( + "/public/png/backgroundGround.png", + scene + ); + ground.material = grid; + + let hl = new BABYLON.HighlightLayer("hl1", scene); + let hl2 = new BABYLON.HighlightLayer("hl2", scene); + + // var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, scene); + + // 定义一个函数来加载或重新加载模型 + const loadOrReloadModel = async () => { + // 在加载新模型之前卸载已加载的模型 + currentMeshesRef.current.forEach((mesh) => { + if (mesh && mesh.parent) { + scene.removeMesh(mesh, true); + } + }); + currentMeshesRef.current = []; // 重置模型数组 + try { + // 使用 ImportMeshAsync 加载新模型 + var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync( + "", + "/Line/", + `${modelPath}.babylon`, + scene + ); + // var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line1.babylon`, scene); + // var LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line2.babylon`, scene); + // var LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line3.babylon`, scene); + // var LOD3MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line4.babylon`, scene); + // var LOD4MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line5.babylon`, scene); + // 将新加载的模型添加到 currentMeshesRef 中 + currentMeshesRef.current.push(...LOD0MESH.meshes); + + // ...为新加载的模型设置交互逻辑 + + LOD0MESH.meshes.map((mesh) => { + mesh.isPickable = true; + mesh.actionManager = new BABYLON.ActionManager(scene); + //鼠标移动到物体上亮显 + mesh.actionManager.registerAction( + new BABYLON.ExecuteCodeAction( + BABYLON.ActionManager.OnPointerOverTrigger, + () => { + // @ts-ignore + hl.addMesh(mesh, BABYLON.Color3.Green()); + } + ) + ); + mesh.actionManager.registerAction( + new BABYLON.ExecuteCodeAction( + BABYLON.ActionManager.OnPointerOutTrigger, + () => { + // @ts-ignore + hl.removeMesh(mesh); + } + ) + ); + + mesh._scene.onPointerDown = async (event, _pickResult) => { + const pickInfo = mesh._scene.pick( + mesh._scene.pointerX, + mesh._scene.pointerY + ); + + const clickedPosition = _pickResult.pickedPoint; + //如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法 + // getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数 + + //判断是否是右键 + if (!(event.buttons === 1 && pickInfo.pickedMesh)) return; + const MeshName1 = pickInfo.pickedMesh.name.split(".")[0]; + + setSelectedMeshName(MeshName1); + }; + }); + + ///////////////////////////////////////////////////////////////////////////////////////////////// + onEquObservable.add((eventData, eventState) => { + LOD0MESH.meshes.find((mesh) => { + // @ts-ignore + hl2.removeMesh(mesh); + }); + Object.keys(eventData as EquStatusInterface).map((key) => { + // @ts-ignore + if (eventData[key] == 2) { + // @ts-ignore + EquMap[key].map((name) => { + LOD0MESH.meshes.find((mesh) => { + if (mesh.name == name) { + // @ts-ignore + hl2.addMesh(mesh, BABYLON.Color3.Red()); + } + }); + }); + } + }); + }); + + ///////////////////////////////////////////////////////////////////////////////////////////////// + } catch (error) { + console.error("加载模型失败:", error); + } + }; + + // 调用函数以加载或重新加载模型 + loadOrReloadModel(); + + function reset() { + camera.target = new BABYLON.Vector3(-13, 0, 0); + camera.alpha = BABYLON.Tools.ToRadians(245); + camera.beta = BABYLON.Tools.ToRadians(25); + camera.radius = 90; + } + + let resetCamera = setTimeout(reset, 15000); + scene.onPointerObservable.add((pointerInfo) => { + // console.log(camera.target, camera.alpha * 180 / 3.14, camera.beta * 180 / 3.14, camera.radius) + switch (pointerInfo.type) { + case BABYLON.PointerEventTypes.POINTERMOVE: + clearTimeout(resetCamera); + resetCamera = setTimeout(reset, 15000); + } + }); + + // onMainCamObservable.add((eventData, eventState) => { + // clearTimeout(resetCamera); + // resetCamera = setTimeout(reset, 5000); + // switch (eventData) { + // case 1: + // camera.target = DetailCamera.Part_1.target; + // camera.alpha = DetailCamera.Part_1.alpha; + // camera.beta = DetailCamera.Part_1.beta; + // camera.radius = DetailCamera.Part_1.radius; + // break; + // case 2: + // camera.target = DetailCamera.Part_2.target; + // camera.alpha = DetailCamera.Part_2.alpha; + // camera.beta = DetailCamera.Part_2.beta; + // camera.radius = DetailCamera.Part_2.radius; + // break; + // case 3: + // camera.target = DetailCamera.Part_3.target; + // camera.alpha = DetailCamera.Part_3.alpha; + // camera.beta = DetailCamera.Part_3.beta; + // camera.radius = DetailCamera.Part_3.radius; + // break; + // case 4: + // camera.target = DetailCamera.Part_4.target; + // camera.alpha = DetailCamera.Part_4.alpha; + // camera.beta = DetailCamera.Part_4.beta; + // camera.radius = DetailCamera.Part_4.radius; + // break; + // } + // }); + + return scene; + }; + + // call the createScene function + const scene = createScene(); + + scene.then((scene) => {}); + + // run the render loop + scene.then( + (scene) => { + engine.runRenderLoop(function () { + scene.render(); + }); + }, + (reason) => { + console.log(reason); + } + ); + + // Resize + window.addEventListener("resize", function () { + engine.resize(); + }); + + // 组件卸载时的清理逻辑 + return () => { + // 清理场景和引擎资源 + engine.dispose(); + }; + }, [modelPath]); + + // const handleClick1 = () => { + // onMainCamObservable.notifyObservers(1); + // }; + // const handleClick2 = () => { + // onMainCamObservable.notifyObservers(2); + // }; + // const handleClick3 = () => { + // onMainCamObservable.notifyObservers(3); + // }; + // const handleClick4 = () => { + // onMainCamObservable.notifyObservers(4); + // }; + + return ( +
+ {/* +

当前选择: {SelectedMeshName}

+ + + + + */} + +
+ ); +} + +export default MybabylonJS; diff --git a/src/babylonjs/MybabylonJS_1.tsx b/src/babylonjs/MybabylonJS_1.tsx index 1a05ab2..ed6e689 100644 --- a/src/babylonjs/MybabylonJS_1.tsx +++ b/src/babylonjs/MybabylonJS_1.tsx @@ -163,8 +163,8 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { }); currentMeshesRef.current = []; // 重置模型数组 try { // 使用 ImportMeshAsync 加载新模型 - // var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, scene); - var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line1.babylon`, scene); + var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, scene); + // var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line1.babylon`, scene); // var LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line2.babylon`, scene); // var LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line3.babylon`, scene); // var LOD3MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line4.babylon`, scene); diff --git a/src/page/LDPage/index.css b/src/page/LDPage/index.css new file mode 100644 index 0000000..dcf01e1 --- /dev/null +++ b/src/page/LDPage/index.css @@ -0,0 +1,4 @@ +.main-box { + font-size: 50px; + color: #fff; +} \ No newline at end of file diff --git a/src/page/LDPage/index.tsx b/src/page/LDPage/index.tsx new file mode 100644 index 0000000..7532158 --- /dev/null +++ b/src/page/LDPage/index.tsx @@ -0,0 +1,35 @@ +import "./index.css" +import {useEffect} from 'react'; +import {useLocation,useNavigate} from "react-router-dom"; +function LDPage() { + const navigate = useNavigate(); + const {state} = useLocation(); + console.log("LDPage被加载了") +useEffect(() => { + const handleKeyDown = (event:any) => { + if (event.key === 'ArrowUp') { + console.log('LDPage向上键被按下'); + navigate(`/TP/${state.LineID}`); + // 执行向上键的逻辑 + } else if (event.key === 'ArrowDown') { + console.log('LDPage向下键被按下'); + // 执行向下键的逻辑 + } + }; + + window.addEventListener('keydown', handleKeyDown); + + return () => { + window.removeEventListener('keydown', handleKeyDown); + }; +}, []); + + return ( + <> +
LDPage{state.LineID}
+
3434
+ + ); +} + +export default LDPage; \ No newline at end of file diff --git a/src/page/LinePage/Center/CenterDown.tsx b/src/page/LinePage/Center/CenterDown.tsx new file mode 100644 index 0000000..820e407 --- /dev/null +++ b/src/page/LinePage/Center/CenterDown.tsx @@ -0,0 +1,21 @@ +import TitleBox from "../Component/TitleBox"; +import LineChart from "./LineChart"; +function CenterDown() { + return ( +
+
+ + — 报警总数 — +
321,343
+
+ {/* 产线成品率 */} +
+ +
+ +
+
+
+ ); +} +export default CenterDown; diff --git a/src/page/LinePage/Center/CenterUp.tsx b/src/page/LinePage/Center/CenterUp.tsx new file mode 100644 index 0000000..f4e0c88 --- /dev/null +++ b/src/page/LinePage/Center/CenterUp.tsx @@ -0,0 +1,9 @@ +import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +function CenterUp() { + return ( +
+ +
+ ); +} +export default CenterUp; diff --git a/src/page/LinePage/Center/LineChart/chart.config.ts b/src/page/LinePage/Center/LineChart/chart.config.ts new file mode 100644 index 0000000..77af700 --- /dev/null +++ b/src/page/LinePage/Center/LineChart/chart.config.ts @@ -0,0 +1,102 @@ +import * as echarts from "echarts"; +export default function getOptions() { + const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"]; + return { + color: colors, + grid: { top: 38, right: 12, bottom: 26, left: 48 }, + legend: { + show: true, + icon: "roundRect", + top: 10, + right: 10, + padding: 0, + itemWidth: 10, + itemHeight: 10, + itemGap: 3, + height: 10, + textStyle: { + color: "#DFF1FE", + fontSize: 14, + }, + }, + xAxis: { + type: "category", + data: Array(7) + .fill(1) + .map((_, index) => { + const today = new Date(); + const dtimestamp = + today.getTime() - (index + 1) * 24 * 60 * 60 * 1000; + return `${new Date(dtimestamp).getMonth() + 1}.${new Date( + dtimestamp + ).getDate()}`; + }) + .reverse(), + axisLabel: { + color: "#fff", + fontSize: 14, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + }, + yAxis: { + name: "单位/%", + nameTextStyle: { + color: "#fff", + fontSize: 14, + }, + type: "value", + axisLabel: { + color: "#fff", + fontSize: 14, + formatter: "{value}", + }, + axisLine: { + show: true, + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + splitLine: { + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + }, + tooltip: {}, + series: [ + { + name: "产线1", + type: "line", + data: [20, 32, 10, 34, 90, 30, 20], + }, + { + name: "产线2", + type: "line", + data: [22, 82, 91, 34, 90, 33, 31], + }, + { + name: "产线3", + type: "line", + data: [50, 32, 20, 54, 19, 33, 41], + }, + { + name: "产线4", + type: "line", + data: [30, 32, 30, 34, 90, 33, 32], + }, + { + name: "产线5", + type: "line", + data: [20, 92, 91, 94, 90, 30, 53], + }, + ], + }; +} diff --git a/src/page/LinePage/Center/LineChart/index.tsx b/src/page/LinePage/Center/LineChart/index.tsx new file mode 100644 index 0000000..5d13da5 --- /dev/null +++ b/src/page/LinePage/Center/LineChart/index.tsx @@ -0,0 +1,6 @@ +import ReactECharts from "echarts-for-react"; +import getOptions from "./chart.config"; +function LineChart() { + return ; +} +export default LineChart; diff --git a/src/page/LinePage/Center/index.tsx b/src/page/LinePage/Center/index.tsx new file mode 100644 index 0000000..14d5036 --- /dev/null +++ b/src/page/LinePage/Center/index.tsx @@ -0,0 +1,12 @@ +import CenterDown from "./CenterDown"; +import CenterUp from "./CenterUp"; + +function Center() { + return ( +
+ + +
+ ); +} +export default Center; diff --git a/src/page/LinePage/Component/SwitchButton/index.css b/src/page/LinePage/Component/SwitchButton/index.css new file mode 100644 index 0000000..e885d58 --- /dev/null +++ b/src/page/LinePage/Component/SwitchButton/index.css @@ -0,0 +1,19 @@ +.switch-button { + height: 33px; +} +.switch-button button { + color: #fff; + font-size: 18px; + padding: 4px 15px; + background-color: rgba(49, 135, 140, 0.3); + cursor: pointer; +} +.switch-button button:first-child { + border-radius: 5px 0 0 5px; +} +.switch-button button:last-child { + border-radius: 0 5px 5px 0; +} +.switch-button button.active { + background-color: rgba(86, 244, 231, 0.7); +} diff --git a/src/page/LinePage/Component/SwitchButton/index.tsx b/src/page/LinePage/Component/SwitchButton/index.tsx new file mode 100644 index 0000000..46fec83 --- /dev/null +++ b/src/page/LinePage/Component/SwitchButton/index.tsx @@ -0,0 +1,29 @@ +import "./index.css"; +interface Name { + name: string; +} +interface nameListProps { + nameList: Name[]; + activeName: string; + setActiveName: (name: string) => void; +} +function SwitchButton(props: nameListProps) { + return ( +
+ {props.nameList.map((item, index) => { + return ( + + ); + })} +
+ ); +} +export default SwitchButton; diff --git a/src/page/LinePage/Component/TitleBox/index.css b/src/page/LinePage/Component/TitleBox/index.css new file mode 100644 index 0000000..3ae06db --- /dev/null +++ b/src/page/LinePage/Component/TitleBox/index.css @@ -0,0 +1,13 @@ +.title_box { + font-size: 24px; + color: #52fff1; + padding: 10px 0 0 15px; +} +.title_box img { + width: 33px; + height: 33px; + vertical-align: bottom; + margin-right: 3px; + position: relative; + top: 3px; +} diff --git a/src/page/LinePage/Component/TitleBox/index.tsx b/src/page/LinePage/Component/TitleBox/index.tsx new file mode 100644 index 0000000..9c4c043 --- /dev/null +++ b/src/page/LinePage/Component/TitleBox/index.tsx @@ -0,0 +1,53 @@ +import Defect from "./../../assets/icon/defect.png"; +import Alarm from "./../../assets/icon/alarm.png"; +import Finished from "./../../assets/icon/finished.png"; +import InputAndOutput from "./../../assets/icon/inputAndOutput.png"; +import Num from "./../../assets/icon/num.png"; +import Record from "./../../assets/icon/record.png"; +import "./index.css"; +interface titleProps { + title: string; +} +function TitleBox(props: titleProps) { + const filteredTitles = () => { + switch (props.title) { + case "left_up": + return { + img: Defect, + title: "产线缺陷汇总", + }; + case "left_down": + return { + img: Record, + title: "当前产线缺陷", + }; + case "center_down_left": + return { + img: Alarm, + title: "异常报警", + }; + case "center_down_right": + return { + img: Finished, + title: "产线成品率", + }; + case "right_up": + return { + img: Num, + title: "各产线总投入和产出", + }; + default: + return { + img: InputAndOutput, + title: "各产线投入和产出", + }; + } + }; + return ( +
+ title + {filteredTitles().title} +
+ ); +} +export default TitleBox; diff --git a/src/page/LinePage/Left/BarChart/chart.config.ts b/src/page/LinePage/Left/BarChart/chart.config.ts new file mode 100644 index 0000000..7fff553 --- /dev/null +++ b/src/page/LinePage/Left/BarChart/chart.config.ts @@ -0,0 +1,73 @@ +import * as echarts from "echarts"; +export default function getOptions() { + const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"]; + return { + color: colors, + grid: { top: 30, right: 12, bottom: 26, left: 48 }, + legend: { + show: false, + }, + xAxis: { + type: "category", + data: ["缺陷1", "缺陷2", "缺陷3", "缺陷4", "缺陷5", "缺陷6"], + axisLabel: { + color: "#fff", + fontSize: 14, + interval: 0, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + }, + yAxis: { + name: "单位/千片", + nameTextStyle: { + color: "#fff", + fontSize: 14, + }, + type: "value", + axisLabel: { + color: "#fff", + fontSize: 14, + formatter: "{value}", + }, + axisLine: { + show: true, + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + splitLine: { + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + }, + tooltip: {}, + series: [ + { + data: [120, 200, 150, 80, 70, 110], + type: "bar", + barWidth: 10, + label: { + show: true, + fontSize: 12, + color: "#9CD4FF", + position: "top", + }, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "#9DD5FF" }, + { offset: 1, color: "#1295FF" }, + ]), + }, + }, + ], + }; +} diff --git a/src/page/LinePage/Left/BarChart/index.tsx b/src/page/LinePage/Left/BarChart/index.tsx new file mode 100644 index 0000000..ff5631c --- /dev/null +++ b/src/page/LinePage/Left/BarChart/index.tsx @@ -0,0 +1,6 @@ +import ReactECharts from "echarts-for-react"; +import getOptions from "./chart.config"; +function BarChart() { + return ; +} +export default BarChart; diff --git a/src/page/LinePage/Left/LeftDown.tsx b/src/page/LinePage/Left/LeftDown.tsx new file mode 100644 index 0000000..e2ba671 --- /dev/null +++ b/src/page/LinePage/Left/LeftDown.tsx @@ -0,0 +1,47 @@ +import TitleBox from "../Component/TitleBox"; +import SwitchButton from "../Component/SwitchButton"; +import BarChart from "./BarChart"; +import { useState } from "react"; +function LeftDown() { + const nameList = [{ name: "表单" }, { name: "柱状" }]; + const [activeName, setActiveName] = useState(nameList[0].name); + return ( +
+ +
+ +
+
+
+
+ 当天 +
+
+
+ {activeName === "表单" ? "表单" : } +
+
+
+ 本周 +
+
+
+ {activeName === "表单" ? "表单" : } +
+
+
+ 本月 +
+
+
+ {activeName === "表单" ? "表单" : } +
+
+
+ ); +} +export default LeftDown; diff --git a/src/page/LinePage/Left/LeftUp.tsx b/src/page/LinePage/Left/LeftUp.tsx new file mode 100644 index 0000000..a2fdde3 --- /dev/null +++ b/src/page/LinePage/Left/LeftUp.tsx @@ -0,0 +1,24 @@ +import TitleBox from "../Component/TitleBox"; +import SwitchButton from "../Component/SwitchButton"; +import SummaryBarChart from "./SummaryBarChart"; +import { useState } from "react"; +function LeftUp() { + const nameList = [{ name: "天" }, { name: "周" }, { name: "月" }]; + const [activeName, setActiveName] = useState(nameList[0].name); + return ( +
+ +
+ +
+
+ +
+
+ ); +} +export default LeftUp; diff --git a/src/page/LinePage/Left/SummaryBarChart/chart.config.ts b/src/page/LinePage/Left/SummaryBarChart/chart.config.ts new file mode 100644 index 0000000..efddfd7 --- /dev/null +++ b/src/page/LinePage/Left/SummaryBarChart/chart.config.ts @@ -0,0 +1,138 @@ +import * as echarts from "echarts"; +export default function getOptions() { + const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"]; + return { + color: colors, + grid: { top: 38, right: 12, bottom: 26, left: 48 }, + legend: { + show: true, + icon: "roundRect", + top: 10, + right: 10, + padding: 0, + itemWidth: 10, + itemHeight: 10, + itemGap: 3, + height: 10, + textStyle: { + color: "#DFF1FE", + fontSize: 14, + }, + }, + xAxis: { + type: "category", + // data: Array(7) + // .fill(1) + // .map((_, index) => { + // const today = new Date(); + // const dtimestamp = today - (index+1) * 24 * 60 * 60 * 1000; + // return `${new Date(dtimestamp).getMonth() + 1}.${new Date( + // dtimestamp + // ).getDate()}`; + // }) + // .reverse(), + axisLabel: { + color: "#fff", + fontSize: 14, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + }, + yAxis: { + name: "单位/千片", + nameTextStyle: { + color: "#fff", + fontSize: 14, + }, + type: "value", + axisLabel: { + color: "#fff", + fontSize: 14, + formatter: "{value}", + }, + axisLine: { + show: true, + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + splitLine: { + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + }, + tooltip: {}, + dataset: { + source: [ + ["product", "产线1", "产线2", "产线3", "产线4", "产线5"], + ["缺陷1", 43, 85, 93, 60, 80], + ["缺陷2", 83, 73, 55, 67, 90], + ["缺陷3", 86, 65, 82, 68, 90], + ["缺陷4", 72, 53, 39, 88, 50], + ["缺陷5", 72, 53, 39, 88, 50], + ], + }, + // Declare several bar series, each will be mapped + // to a column of dataset.source by default. + series: [ + { + type: "bar", + barWidth: 8, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "#9DD5FF" }, + { offset: 1, color: "#1295FF" }, + ]), + }, + }, + { + type: "bar", + barWidth: 8, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "#FFC844" }, + { offset: 1, color: "#FFB70C" }, + ]), + }, + }, + { + type: "bar", + barWidth: 8, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "#FF8BC3" }, + { offset: 1, color: "#EB46A1" }, + ]), + }, + }, + { + type: "bar", + barWidth: 8, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "#85F6E9" }, + { offset: 1, color: "#2EC6B4" }, + ]), + }, + }, + { + type: "bar", + barWidth: 8, + itemStyle: { + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { offset: 0, color: "#9496FF" }, + { offset: 1, color: "#6567FF" }, + ]), + }, + }, + ], + }; +} diff --git a/src/page/LinePage/Left/SummaryBarChart/index.tsx b/src/page/LinePage/Left/SummaryBarChart/index.tsx new file mode 100644 index 0000000..d019ede --- /dev/null +++ b/src/page/LinePage/Left/SummaryBarChart/index.tsx @@ -0,0 +1,6 @@ +import ReactECharts from "echarts-for-react"; +import getOptions from "./chart.config"; +function SummaryBarChart() { + return ; +} +export default SummaryBarChart; diff --git a/src/page/LinePage/Left/Table/index.tsx b/src/page/LinePage/Left/Table/index.tsx new file mode 100644 index 0000000..6abcea0 --- /dev/null +++ b/src/page/LinePage/Left/Table/index.tsx @@ -0,0 +1,4 @@ +function Table() { + return
111
; +} +export default Table; diff --git a/src/page/LinePage/Left/index.tsx b/src/page/LinePage/Left/index.tsx new file mode 100644 index 0000000..6524b82 --- /dev/null +++ b/src/page/LinePage/Left/index.tsx @@ -0,0 +1,11 @@ +import LeftUp from "./LeftUp"; +import LeftDown from "./LeftDown"; +function Left() { + return ( +
+ + +
+ ); +} +export default Left; diff --git a/src/page/LinePage/Right/LineChart/chart.config.ts b/src/page/LinePage/Right/LineChart/chart.config.ts new file mode 100644 index 0000000..f518d12 --- /dev/null +++ b/src/page/LinePage/Right/LineChart/chart.config.ts @@ -0,0 +1,87 @@ +import * as echarts from "echarts"; +export default function getOptions() { + const colors = ["#1A99FF", "#50F4E3"]; + return { + color: colors, + grid: { top: 38, right: 12, bottom: 26, left: 48 }, + legend: { + show: true, + icon: "roundRect", + top: 10, + right: 10, + padding: 0, + itemWidth: 10, + itemHeight: 10, + itemGap: 3, + height: 10, + textStyle: { + color: "#DFF1FE", + fontSize: 14, + }, + }, + xAxis: { + type: "category", + data: Array(7) + .fill(1) + .map((_, index) => { + const today = new Date(); + const dtimestamp = + today.getTime() - (index + 1) * 24 * 60 * 60 * 1000; + return `${new Date(dtimestamp).getMonth() + 1}.${new Date( + dtimestamp + ).getDate()}`; + }) + .reverse(), + axisLabel: { + color: "#fff", + fontSize: 14, + }, + axisTick: { show: false }, + axisLine: { + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + }, + yAxis: { + name: "单位/千片", + nameTextStyle: { + color: "#fff", + fontSize: 14, + }, + type: "value", + axisLabel: { + color: "#fff", + fontSize: 14, + formatter: "{value}", + }, + axisLine: { + show: true, + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + splitLine: { + lineStyle: { + width: 2, + color: "#5982B2", + }, + }, + }, + tooltip: {}, + series: [ + { + name: "投入", + type: "line", + data: [20, 32, 10, 34, 90, 30, 20], + }, + { + name: "产出", + type: "line", + data: [22, 82, 91, 34, 90, 33, 31], + }, + ], + }; +} diff --git a/src/page/LinePage/Right/LineChart/index.tsx b/src/page/LinePage/Right/LineChart/index.tsx new file mode 100644 index 0000000..ff5631c --- /dev/null +++ b/src/page/LinePage/Right/LineChart/index.tsx @@ -0,0 +1,6 @@ +import ReactECharts from "echarts-for-react"; +import getOptions from "./chart.config"; +function BarChart() { + return ; +} +export default BarChart; diff --git a/src/page/LinePage/Right/RightDown.tsx b/src/page/LinePage/Right/RightDown.tsx new file mode 100644 index 0000000..38d20d4 --- /dev/null +++ b/src/page/LinePage/Right/RightDown.tsx @@ -0,0 +1,47 @@ +import TitleBox from "../Component/TitleBox"; +import SwitchButton from "../Component/SwitchButton"; +import LineChart from "./LineChart"; +import { useState } from "react"; +function RightDown() { + const nameList = [{ name: "表单" }, { name: "折线" }]; + const [activeName, setActiveName] = useState(nameList[0].name); + return ( +
+ +
+ +
+
+
+
+ 当天 +
+
+
+ {activeName === "表单" ? "表单" : } +
+
+
+ 本周 +
+
+
+ {activeName === "表单" ? "表单" : } +
+
+
+ 本月 +
+
+
+ {activeName === "表单" ? "表单" : } +
+
+
+ ); +} +export default RightDown; diff --git a/src/page/LinePage/Right/RightUp.tsx b/src/page/LinePage/Right/RightUp.tsx new file mode 100644 index 0000000..79f7679 --- /dev/null +++ b/src/page/LinePage/Right/RightUp.tsx @@ -0,0 +1,9 @@ +import TitleBox from "../Component/TitleBox"; +function RightUp() { + return ( +
+ +
+ ); +} +export default RightUp; diff --git a/src/page/LinePage/Right/index.tsx b/src/page/LinePage/Right/index.tsx new file mode 100644 index 0000000..53c802a --- /dev/null +++ b/src/page/LinePage/Right/index.tsx @@ -0,0 +1,12 @@ +import RightDown from "./RightDown"; +import RightUp from "./RightUp"; + +function Right() { + return ( +
+ + +
+ ); +} +export default Right; diff --git a/src/page/LinePage/TopP.tsx b/src/page/LinePage/TopP.tsx new file mode 100644 index 0000000..e7c7a64 --- /dev/null +++ b/src/page/LinePage/TopP.tsx @@ -0,0 +1,14 @@ +import '../../lanhuapp/common.css'; +import "./index.css"; + +function TopP() { + return ( +
+
+
+
+
+ ); +} + +export default TopP; \ No newline at end of file diff --git a/src/page/LinePage/assets/icon/alarm.png b/src/page/LinePage/assets/icon/alarm.png new file mode 100644 index 0000000..eb335f3 Binary files /dev/null and b/src/page/LinePage/assets/icon/alarm.png differ diff --git a/src/page/LinePage/assets/icon/defect.png b/src/page/LinePage/assets/icon/defect.png new file mode 100644 index 0000000..76ed17c Binary files /dev/null and b/src/page/LinePage/assets/icon/defect.png differ diff --git a/src/page/LinePage/assets/icon/finished.png b/src/page/LinePage/assets/icon/finished.png new file mode 100644 index 0000000..99b411b Binary files /dev/null and b/src/page/LinePage/assets/icon/finished.png differ diff --git a/src/page/LinePage/assets/icon/inputAndOutput.png b/src/page/LinePage/assets/icon/inputAndOutput.png new file mode 100644 index 0000000..113ed13 Binary files /dev/null and b/src/page/LinePage/assets/icon/inputAndOutput.png differ diff --git a/src/page/LinePage/assets/icon/num.png b/src/page/LinePage/assets/icon/num.png new file mode 100644 index 0000000..e77c409 Binary files /dev/null and b/src/page/LinePage/assets/icon/num.png differ diff --git a/src/page/LinePage/assets/icon/record.png b/src/page/LinePage/assets/icon/record.png new file mode 100644 index 0000000..4622f01 Binary files /dev/null and b/src/page/LinePage/assets/icon/record.png differ diff --git a/src/page/LinePage/index.css b/src/page/LinePage/index.css new file mode 100644 index 0000000..de19450 --- /dev/null +++ b/src/page/LinePage/index.css @@ -0,0 +1,168 @@ +/* 顶部 */ +.block_top { + width: 1920px; + height: 94px; + background: url(/public/svg/topback.svg) 100% no-repeat; + background-size: 100% 100%; + opacity: 1; + display: flex; + justify-content: center; +} + +.block_top_title { + width: 651px; + height: 77px; + background: url(/public/png/topTiltle.png) 100% no-repeat; + background-size: 100% 100%; + margin-top: 18px; +} +/* 中部 */ +.block_bottom { + width: 1920px; + height: 966px; + padding-top: 20px; +} + +.group_left { + width: 402px; + height: 966px; + margin: 0 0 0 24px; +} + +.group_center { + width: 1041px; + height: 966px; + margin: 0 0 0 15px; +} + +.group_right { + width: 401px; + height: 966px; + margin-left: 15px; +} + +.left_up { + width: 402px; + height: 332px; + background: url(../../../public/png/rect/lp_left_up.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; + position: relative; +} +.left_down { + width: 402px; + height: 599px; + background: url(../../../public/png/rect/lp_left_down.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; + margin-top: 14px; + position: relative; +} +.center_up { + width: 1041px; + height: 562px; + background: url(../../../public/png/rect/lp_center_up.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; +} +.center_down { + width: 1041px; + height: 368px; + margin-top: 17px; +} +.center_down_inner { + width: 513px; + height: 366px; + background: url(../../../public/png/rect/lp_center_down.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; +} +.center_down .left-box { + margin-right: 15px; + position: relative; +} +.center_down .left-box .alarm_num_title { + position: absolute; + left: 220px; + top: 22px; + font-size: 13px; + letter-spacing: 3px; + color: #fff; +} +.center_down .left-box .alarm_num { + color: #52fff1; + font-size: 40px; + text-align: center; + font-family: PingFangSC, PingFang SC; +} +.center_down .right_box .chart_box { + width: 100%; + height: 310px; + margin-top: 10px; +} +.right_up { + width: 401px; + height: 257px; + background: url(../../../public/png/rect/lp_right_up.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; +} +.right_down { + width: 401px; + height: 673px; + background: url(../../../public/png/rect/lp_right_down.png) no-repeat; + background-size: 100% 100%; + background-position: 0 0; + margin-top: 14px; + position: relative; +} +.left_up_switch { + position: absolute; + right: 10px; + top: 12px; +} +.left_up_chart { + height: 275px; + margin-top: 10px; +} +/* 左侧 */ +.left_down_title { + height: 18px; + justify-content: center; +} +.left_down_box1 { + width: 56px; + height: 13px; + background: url(/public/png/leftbar.png) 100% no-repeat; + background-size: 100% 100%; + margin-top: 2px; +} +.left_down_box2 { + width: 56px; + height: 13px; + background: url(/public/png/rightbar.png) 100% no-repeat; + background-size: 100% 100%; + margin: 2px 0 0 0px; +} +.left_down_text { + /*width: 40px;*/ + height: 18px; + overflow-wrap: break-word; + color: rgba(1, 207, 204, 1); + font-size: 18px; + letter-spacing: 5px; + font-family: PingFangSC-Regular; + white-space: nowrap; + line-height: 18px; + margin-left: 18px; + margin-right: 16px; + text-align: center; +} +.left_down_content { + height: 160px; + /* padding-bottom: 5px; */ +} +.right_down_content { + height: 185px; + /* padding-bottom: 5px; */ +} diff --git a/src/page/LinePage/index.tsx b/src/page/LinePage/index.tsx new file mode 100644 index 0000000..daf9389 --- /dev/null +++ b/src/page/LinePage/index.tsx @@ -0,0 +1,18 @@ +import React from "react"; +import TopP from "./TopP"; +import Left from "./Left"; +import Right from "./Right"; +import Center from "./Center"; +function LinePage() { + return ( + + +
+ +
+ +
+ + ); +} +export default LinePage; diff --git a/src/page/MainE/CenterUpE.tsx b/src/page/MainE/CenterUpE.tsx index a93b01b..66aef0f 100644 --- a/src/page/MainE/CenterUpE.tsx +++ b/src/page/MainE/CenterUpE.tsx @@ -1,12 +1,15 @@ import React from "react"; import LineBabylon from "../../babylonjs/LineBabylon"; +import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1"; import {Observable} from "@babylonjs/core"; +// import LineID from "../../store/ChangeLineID"; function CenterUpE() { return (
- + + {/* */}
) } diff --git a/src/page/MainE/MainE.tsx b/src/page/MainE/MainE.tsx index 972fbf9..9b886f6 100644 --- a/src/page/MainE/MainE.tsx +++ b/src/page/MainE/MainE.tsx @@ -15,6 +15,7 @@ import {MyObservable} from "../../context/MyObservable"; import {ThisLineID} from "../../context/ThisLineID"; + function MainE() { const contextLineID = useContext(ThisLineID); const {LineID} = useParams() @@ -26,7 +27,6 @@ function MainE() { } const dispatch = useAppDispatch(); dispatch(UpdateChangeLineID(NowThisLineID)); - return ( diff --git a/src/page/TestPage/CenterUp.tsx b/src/page/TestPage/CenterUp.tsx new file mode 100644 index 0000000..1388c2d --- /dev/null +++ b/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 ( +
+
+ + {/* 添加按钮来切换组件 */} + + +
{modelIndex}
+
+ ); +} + +export default CenterUp; \ No newline at end of file diff --git a/src/page/TestPage/index.css b/src/page/TestPage/index.css new file mode 100644 index 0000000..dcf01e1 --- /dev/null +++ b/src/page/TestPage/index.css @@ -0,0 +1,4 @@ +.main-box { + font-size: 50px; + color: #fff; +} \ No newline at end of file diff --git a/src/page/TestPage/index.tsx b/src/page/TestPage/index.tsx new file mode 100644 index 0000000..8e28e48 --- /dev/null +++ b/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 ( + <> +
TestPage Line{LineID}
+
3434
+ + + ); +} + +export default TestPage; \ No newline at end of file