From 1f7b867dc57f1d851c223eee02a823ba7fc2865e Mon Sep 17 00:00:00 2001 From: juzi <819872918@qq.com> Date: Fri, 1 Nov 2024 10:35:32 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=89=E7=BB=B4=E6=8E=A5=E5=8F=A3=E8=B0=83?= =?UTF-8?q?=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/wsconfig.json | 2 +- src/babylonjs/EqInfoData.ts | 445 +++++++++++++++++++++ src/babylonjs/EquMap.ts | 59 --- src/babylonjs/LinePageBabylon.tsx | 33 +- src/babylonjs/LinePageBabylonNew.tsx | 396 ++++++++++++++++++ src/page/LinePage1-1/Center/CenterDown.tsx | 1 - src/page/LinePage1-1/Center/CenterUp.tsx | 2 +- src/page/LinePage1-1/Left/LeftUp.tsx | 1 - src/page/LinePage1-2/Center/CenterDown.tsx | 1 - src/page/LinePage1-2/Center/CenterUp.tsx | 2 +- src/page/LinePage1-2/Left/LeftUp.tsx | 1 - src/page/LinePage2-1/Center/CenterDown.tsx | 1 - src/page/LinePage2-1/Center/CenterUp.tsx | 2 +- src/page/LinePage2-2/Center/CenterDown.tsx | 1 - src/page/LinePage2-2/Center/CenterUp.tsx | 2 +- src/page/LinePage3-1/Center/CenterDown.tsx | 1 - src/page/LinePage3-1/Center/CenterUp.tsx | 2 +- src/page/LinePage3-1/Left/LeftUp.tsx | 1 - src/page/LinePage3-2/Center/CenterDown.tsx | 1 - src/page/LinePage3-2/Center/CenterUp.tsx | 2 +- src/page/LinePage3-2/Left/LeftUp.tsx | 1 - src/page/LinePage4-1/Center/CenterDown.tsx | 1 - src/page/LinePage4-1/Center/CenterUp.tsx | 2 +- src/page/LinePage4-2/Center/CenterDown.tsx | 1 - src/page/LinePage4-2/Center/CenterUp.tsx | 2 +- src/page/LinePage5-1/Center/CenterDown.tsx | 1 - src/page/LinePage5-1/Center/CenterUp.tsx | 2 +- src/page/LinePage5-2/Center/CenterDown.tsx | 1 - src/page/LinePage5-2/Center/CenterUp.tsx | 2 +- src/page/LinePage5-2/Left/LeftUp.tsx | 1 - 30 files changed, 854 insertions(+), 116 deletions(-) create mode 100644 src/babylonjs/EqInfoData.ts delete mode 100644 src/babylonjs/EquMap.ts create mode 100644 src/babylonjs/LinePageBabylonNew.tsx diff --git a/public/wsconfig.json b/public/wsconfig.json index a95d606..b7b5d8b 100644 --- a/public/wsconfig.json +++ b/public/wsconfig.json @@ -1,3 +1,3 @@ { - "url": "192.168.1.35:48080" + "url": "192.168.1.45:48080" } \ No newline at end of file diff --git a/src/babylonjs/EqInfoData.ts b/src/babylonjs/EqInfoData.ts new file mode 100644 index 0000000..81ade82 --- /dev/null +++ b/src/babylonjs/EqInfoData.ts @@ -0,0 +1,445 @@ +interface EqInfoInterface { + name: string; + data: Array<{ name: string; value: number, code:string, label:string}>; + position: Array; +} +interface EqInfoDataInterface { + [key: string]: Array; +} +const EqInfoData:EqInfoDataInterface = { + "Line1-1": [ + { + name: "磨边进口", + data: [ + { name: "1支线", value: 0, code:'1-edge1', label:'inputNum' }, + { name: "2支线", value: 0, code:'1-edge2', label:'inputNum' }, + { name: "3支线", value: 0, code:'1-edge3', label:'inputNum' }, + ], + position: [120, 240], + }, + { + name: "磨边清洗出口", + data: [ + { name: "1支线", value: 0, code:'1-edgeclean1', label:'outputNum' }, + { name: "2支线", value: 0, code:'1-edgeclean2', label:'outputNum' }, + { name: "3支线", value: 0, code:'1-edgeclean3', label:'outputNum' }, + ], + position: [320, 150], + }, + { + name: "打孔出口", + data: [ + { name: "1支线", value: 0, code:'1-punch1', label:'outputNum' }, + { name: "2支线", value: 0, code:'1-punch2', label:'outputNum' }, + { name: "3支线", value: 0, code:'1-punch3', label:'outputNum' }, + ], + position: [550, 320], + }, + { + name: "丝印进口", + data: [ + { name: "1支线", value: 0, code:'1-silk1', label:'inputNum' }, + { name: "2支线", value: 0, code:'1-silk2', label:'inputNum' }, + { name: "3支线", value: 0, code:'1-silk3', label:'inputNum' }, + ], + position: [520, 75], + }, + { + name: "二次固化出口", + data: [ + { name: "1支线", value: 0, code:'1-secsolid1', label:'outputNum' }, + { name: "2支线", value: 0, code:'1-secsolid2', label:'outputNum' }, + { name: "3支线", value: 0, code:'1-secsolid3', label:'outputNum' }, + ], + position: [850, 170], + }, + { + name: "钢化进口", + data: [{ name: "钢化进口", value: 0, code:'1-temper1', label:'inputNum' }], + position: [810, 10], + }, + ], + "Line1-2": [ + { + name: "钢化出口", + data: [{ name: "钢化出口", value: 0, code:'1-temper1', label:'outputNum' }], + position: [140, 250], + }, + { + name: "包装清洗机入口", + data: [ + { name: "包装清洗机1_1", value: 0, code:'1-packclean1', label:'inputNum' }, + { name: "包装清洗机1_2", value: 0, code:'1-packclean2', label:'inputNum' }, + ], + position: [450, 320], + }, + { + name: "包装清洗机出口", + data: [ + { name: "包装清洗机1_1", value: 0, code:'1-packclean1', label:'outputNum' }, + { name: "包装清洗机1_2", value: 0, code:'1-packclean2', label:'outputNum' }, + ], + position: [350, 130], + }, + { + name: "铺纸机", + data: [ + { name: "铺纸机1_1", value: 0, code:'1-paper1', label:'outputNum' }, + { name: "铺纸机1_2", value: 0, code:'1-paper2', label:'outputNum' }, + ], + position: [640, 240], + }, + { + name: "下片机械手", + data: [ + { name: "下片机械手1_1", value: 0, code:'1-down1', label:'outputNum'}, + { name: "下片机械手1_2", value: 0, code:'1-down2', label:'outputNum'}, + { name: "下片机械手1_3", value: 0, code:'1-down3', label:'outputNum'}, + ], + position: [570, 10], + }, + ], + "Line2-1": [ + { + name: "磨边进口", + data: [ + { name: "1支线", value: 0, code:'2-edge1', label:'inputNum' }, + { name: "2支线", value: 0, code:'2-edge2', label:'inputNum' }, + ], + position: [120, 265], + }, + { + name: "磨边清洗出口", + data: [ + { name: "1支线", value: 0, code:'2-edgeclean1', label:'outputNum' }, + { name: "2支线", value: 0, code:'2-edgeclean2', label:'outputNum' }, + ], + position: [310, 180], + }, + { + name: "打孔出口", + data: [ + { name: "1支线", value: 0, code:'2-punch1', label:'outputNum' }, + { name: "2支线", value: 0, code:'2-punch2', label:'outputNum' }, + ], + position: [540, 300], + }, + { + name: "丝印进口", + data: [ + { name: "1支线", value: 0, code:'2-silk1', label:'inputNum' }, + { name: "2支线", value: 0, code:'2-silk2', label:'inputNum' }, + ], + position: [530, 100], + }, + { + name: "二次固化出口", + data: [ + { name: "1支线", value: 0, code:'2-secsolid1', label:'outputNum' }, + { name: "2支线", value: 0, code:'2-secsolid2', label:'outputNum' }, + ], + position: [850, 170], + }, + { + name: "钢化进口", + data: [{ name: "钢化进口", value: 0, code:'2-temper1', label:'inputNum' }], + position: [810, 10], + }, + ], + "Line2-2": [ + { + name: "钢化出口", + data: [{ name: "钢化出口", value: 0, code:'2-temper1', label:'outputNum' }], + position: [305, 260], + }, + { + name: "包装清洗机入口", + data: [ + { name: "包装清洗机", value: 0, code:'2-packclean1', label:'inputNum' }, + ], + position: [640, 270], + }, + { + name: "包装清洗机出口", + data: [ + { name: "包装清洗机", value: 0, code:'2-packclean1', label:'outputNum' }, + ], + position: [550, 140], + }, + { + name: "铺纸机", + data: [ + { name: "铺纸机", value: 0, code:'2-paper1', label:'outputNum' }, + ], + position: [810, 210], + }, + { + name: "下片机械手", + data: [ + { name: "下片机械手2_1", value: 0, code:'2-down1', label:'outputNum'}, + { name: "下片机械手2_2", value: 0, code:'2-down2', label:'outputNum'}, + ], + position: [630, 10], + }, + ], + "Line3-1": [ + { + name: "磨边进口", + data: [ + { name: "1支线", value: 0, code:'3-edge1', label:'inputNum' }, + { name: "2支线", value: 0, code:'3-edge2', label:'inputNum' }, + ], + position: [150, 255], + }, + { + name: "磨边清洗出口", + data: [ + { name: "1支线", value: 0, code:'3-edgeclean1', label:'outputNum' }, + { name: "2支线", value: 0, code:'3-edgeclean2', label:'outputNum' }, + ], + position: [350, 170], + }, + { + name: "打孔出口", + data: [ + { name: "1支线", value: 0, code:'3-punch1', label:'outputNum' }, + { name: "2支线", value: 0, code:'3-punch2', label:'outputNum' }, + ], + position: [590, 290], + }, + { + name: "丝印进口", + data: [ + { name: "1支线", value: 0, code:'3-silk1', label:'inputNum' }, + { name: "2支线", value: 0, code:'3-silk2', label:'inputNum' }, + ], + position: [570, 90], + }, + { + name: "二次固化出口", + data: [ + { name: "1支线", value: 0, code:'3-secsolid1', label:'outputNum' }, + { name: "2支线", value: 0, code:'3-secsolid2', label:'outputNum' }, + ], + position: [850, 170], + }, + { + name: "钢化进口", + data: [{ name: "钢化进口", value: 0, code:'3-temper1', label:'inputNum' }], + position: [820, 28], + }, + ], + "Line3-2": [ + { + name: "钢化出口", + data: [{ name: "钢化出口", value: 0, code:'3-temper1', label:'outputNum' }], + position: [300, 190], + }, + { + name: "包装清洗机入口", + data: [ + { name: "包装清洗机", value: 0, code:'3-packclean1', label:'inputNum' }, + ], + position: [580, 250], + }, + { + name: "包装清洗机出口", + data: [ + { name: "包装清洗机", value: 0, code:'3-packclean1', label:'outputNum' }, + ], + position: [520, 100], + }, + { + name: "铺纸机", + data: [ + { name: "铺纸机", value: 0, code:'3-paper1', label:'outputNum' }, + ], + position: [760, 190], + }, + { + name: "下片机械手", + data: [ + { name: "下片机械手3_1", value: 0, code:'3-down1', label:'outputNum'}, + { name: "下片机械手3_2", value: 0, code:'3-down2', label:'outputNum'}, + ], + position: [670, 10], + }, + ], + "Line4-1": [ + { + name: "磨边进口", + data: [ + { name: "1支线", value: 0, code:'4-edge1', label:'inputNum' }, + { name: "2支线", value: 0, code:'4-edge2', label:'inputNum' }, + ], + position: [200, 240], + }, + { + name: "磨边清洗出口", + data: [ + { name: "1支线", value: 0, code:'4-edgeclean1', label:'outputNum' }, + { name: "2支线", value: 0, code:'4-edgeclean2', label:'outputNum' }, + ], + position: [370, 190], + }, + { + name: "一次镀膜进口", + data: [ + { name: "1支线", value: 0, code:'4-fircoat1', label:'inputNum' }, + { name: "2支线", value: 0, code:'4-fircoat2', label:'inputNum' }, + ], + position: [610, 300], + }, + { + name: "二次镀膜进口", + data: [ + { name: "1支线", value: 0, code:'4-seccoat1', label:'inputNum' }, + { name: "2支线", value: 0, code:'4-seccoat2', label:'inputNum' }, + ], + position: [590, 85], + }, + { + name: "二次固化出口", + data: [ + { name: "1支线", value: 0, code:'4-secsolid1', label:'outputNum' }, + { name: "2支线", value: 0, code:'4-secsolid2', label:'outputNum' }, + ], + position: [860, 190], + }, + { + name: "钢化进口", + data: [{ name: "钢化进口", value: 0, code:'4-temper1', label:'inputNum' }], + position: [800, 30], + }, + ], + "Line4-2": [ + { + name: "钢化出口", + data: [{ name: "钢化出口", value: 0, code:'4-temper1', label:'outputNum' }], + position: [290, 230], + }, + { + name: "包装清洗机入口", + data: [ + { name: "包装清洗机", value: 0, code:'4-packclean1', label:'inputNum' }, + ], + position: [550, 280], + }, + { + name: "包装清洗机出口", + data: [ + { name: "包装清洗机", value: 0, code:'4-packclean1', label:'outputNum' }, + ], + position: [500, 130], + }, + { + name: "铺纸机", + data: [ + { name: "铺纸机4_1", value: 0, code:'4-paper1', label:'outputNum'}, + { name: "铺纸机4_2", value: 0, code:'4-paper2', label:'outputNum'}, + ], + position: [765, 210], + }, + { + name: "下片机械手", + data: [ + { name: "下片机械手4_1", value: 0, code:'4-down1', label:'outputNum' }, + { name: "下片机械手4_2", value: 0, code:'4-down2', label:'outputNum' }, + ], + position: [560, 10], + }, + ], + "Line5-1": [ + { + name: "磨边进口", + data: [ + { name: "1支线", value: 0, code:'5-edge1', label:'inputNum' }, + { name: "2支线", value: 0, code:'5-edge2', label:'inputNum' }, + { name: "3支线", value: 0, code:'5-edge3', label:'inputNum' }, + ], + position: [160, 220], + }, + { + name: "磨边清洗出口", + data: [ + { name: "1支线", value: 0, code:'5-edgeclean1', label:'outputNum' }, + { name: "2支线", value: 0, code:'5-edgeclean2', label:'outputNum' }, + { name: "3支线", value: 0, code:'5-edgeclean3', label:'outputNum' }, + ], + position: [331, 160], + }, + { + name: "一次镀膜进口", + data: [ + { name: "1支线", value: 0, code:'5-fircoat1', label:'inputNum' }, + { name: "2支线", value: 0, code:'5-fircoat2', label:'inputNum' }, + { name: "3支线", value: 0, code:'5-fircoat3', label:'inputNum' }, + ], + position: [555, 329], + }, + { + name: "二次镀膜进口", + data: [ + { name: "1支线", value: 0, code:'5-seccoat1', label:'inputNum' }, + { name: "2支线", value: 0, code:'5-seccoat2', label:'inputNum' }, + { name: "3支线", value: 0, code:'5-seccoat3', label:'inputNum' }, + ], + position: [560, 65], + }, + { + name: "二次固化出口", + data: [ + { name: "1支线", value: 0, code:'5-secsolid1', label:'outputNum' }, + { name: "2支线", value: 0, code:'5-secsolid2', label:'outputNum' }, + { name: "3支线", value: 0, code:'5-secsolid3', label:'outputNum' }, + ], + position: [850, 200], + }, + { + name: "钢化进口", + data: [{ name: "钢化进口", value: 0, code:'5-temper1', label:'inputNum' }], + position: [800, 20], + }, + ], + "Line5-2": [ + { + name: "钢化出口", + data: [{ name: "钢化出口", value: 0, code:'5-temper1', label:'outputNum' }], + position: [260, 255], + }, + { + name: "包装清洗机入口", + data: [ + { name: "包装清洗机5_1", value: 0, code:'5-packclean1', label:'inputNum' }, + { name: "包装清洗机5_2", value: 0, code:'5-packclean2', label:'inputNum' }, + ], + position: [508, 350], + }, + { + name: "包装清洗机出口", + data: [ + { name: "包装清洗机5_1", value: 0, code:'5-packclean1', label:'outputNum' }, + { name: "包装清洗机5_2", value: 0, code:'5-packclean2', label:'outputNum' }, + ], + position: [444, 120], + }, + { + name: "铺纸机", + data: [ + { name: "铺纸机5_1", value: 0, code:'5-paper1', label:'outputNum' }, + { name: "铺纸机5_2", value: 0, code:'5-paper2', label:'outputNum' }, + ], + position: [710, 272], + }, + { + name: "下片机械手", + data: [ + { name: "下片机械手5_1", value: 0, code:'5-down1', label:'outputNum'}, + { name: "下片机械手5_2", value: 0, code:'5-down2', label:'outputNum'}, + { name: "下片机械手5_3", value: 0, code:'5-down3', label:'outputNum'}, + ], + position: [700, 10], + }, + ], +} +export default EqInfoData \ No newline at end of file diff --git a/src/babylonjs/EquMap.ts b/src/babylonjs/EquMap.ts deleted file mode 100644 index 8a5b806..0000000 --- a/src/babylonjs/EquMap.ts +++ /dev/null @@ -1,59 +0,0 @@ -const EquMap = { - CleanAfterEdge1_1: ['object_1_003'], - CleanAfterEdge1_2: ['object_1_004'], - CleanAfterEdge2_1: ['object_2_003'], - CleanAfterEdge2_2: ['object_2_004'], - CleanAfterEdge3_1: ['object_3_003'], - CleanAfterEdge3_2: ['object_3_004'], - CleanAfterEdge4_1: ['object_4_003'], - CleanAfterEdge4_2: ['object_4_004'], - CleanAfterTemper1_1: ['object_1_026', 'object_1_027'], - CleanAfterTemper2_1: ['object_2_022', 'object_2_023'], - CleanAfterTemper3_1: ['object_3_022', 'object_3_023'], - CleanAfterTemper4_1: ['object_4_026', 'object_4_027'], - CleanBeforCoat1_1: ['object_1_009'], - CleanBeforCoat1_2: ['object_1_010'], - CleanBeforCoat4_1: ['object_4_009'], - CleanBeforCoat4_2: ['object_4_010'], - Edge1_1: ['object_1_001'], - Edge1_2: ['object_1_002'], - Edge2_1: ['object_2_001'], - Edge2_2: ['object_2_002'], - Edge3_1: ['object_3_001'], - Edge3_2: ['object_3_002'], - Edge4_1: ['object_4_001'], - Edge4_2: ['object_4_002'], - FirstCoat1_1: ['object_1_011'], - FirstCoat1_2: ['object_1_012'], - FirstCoat2_1: ['object_2_007'], - FirstCoat2_2: ['object_2_008'], - FirstCoat3_1: ['object_3_007'], - FirstCoat3_2: ['object_3_008'], - FirstCoat4_1: ['object_4_011'], - FirstCoat4_2: ['object_4_012'], - Punch1_1: ['object_1_007'], - Punch1_2: ['object_1_008'], - Punch4_1: ['object_4_007'], - Punch4_2: ['object_4_008'], - SecondCoat1_1: ['object_1_013'], - SecondCoat1_2: ['object_1_014'], - SecondCoat2_1: ['object_2_009'], - SecondCoat2_2: ['object_2_010'], - SecondCoat3_1: ['object_3_009'], - SecondCoat3_2: ['object_3_010'], - SecondCoat4_1: ['object_4_013'], - SecondCoat4_2: ['object_4_014'], - Temper1_1: ['object_1_017', 'object_1_018', 'object_1_019', 'object_1_020', 'object_1_021', 'object_1_022', 'object_1_023', 'object_1_024', 'object_1_025'], - Temper2_1: ['object_2_013', 'object_2_014', 'object_2_015', 'object_2_016', 'object_2_017', 'object_2_018', 'object_2_019', 'object_2_020', 'object_2_021'], - Temper3_1: ['object_3_013', 'object_3_014', 'object_3_015', 'object_3_016', 'object_3_017', 'object_3_018', 'object_3_019', 'object_3_020', 'object_3_021'], - Temper4_1: ['object_4_017', 'object_4_018', 'object_4_019', 'object_4_020', 'object_4_021', 'object_4_022', 'object_4_023', 'object_4_024', 'object_4_025'], - Unload1_1: ['object_1_028'], - Unload1_2: ['object_1_029'], - Unload2_1: ['object_2_024'], - Unload2_2: ['object_2_025'], - Unload3_1: ['object_3_024'], - Unload3_2: ['object_3_025'], - Unload4_1: ['object_4_028'], - Unload4_2: ['object_4_029'] -} -export default EquMap; \ No newline at end of file diff --git a/src/babylonjs/LinePageBabylon.tsx b/src/babylonjs/LinePageBabylon.tsx index 8c96a1d..5abed6a 100644 --- a/src/babylonjs/LinePageBabylon.tsx +++ b/src/babylonjs/LinePageBabylon.tsx @@ -14,19 +14,10 @@ import { import { useAppSelector } from "../store/hooks"; import "../page/style/standard.css"; import { EquStatusInterface, selectEquStatus } from "../store/EquStatusEntity"; -import EquMap from "./EquMap"; +import EqInfoData from "./EqInfoData"; import AlarmTipGreen from "./../page/LinePage/assets/icon/g.png"; import AlarmTipYellow from "./../page/LinePage/assets/icon/y.png"; import AlarmTipRed from "./../page/LinePage/assets/icon/r.png"; - -// const onEquObservable = new Observable(); -// const lineNameNo = { -// "1":"一", -// "2":"二", -// "3":"三", -// "4":"四", -// "5":"五", -// } const lineNameNo = ["一","二","三","四","五"] const myStyle = { @@ -445,6 +436,7 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { // ); mesh._scene.onPointerDown = async (event, _pickResult) => { + console.log('_pickResult=====',_pickResult) const pickInfo = mesh._scene.pick( mesh._scene.pointerX, mesh._scene.pointerY @@ -466,27 +458,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { }); }; }); - - // 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); } diff --git a/src/babylonjs/LinePageBabylonNew.tsx b/src/babylonjs/LinePageBabylonNew.tsx new file mode 100644 index 0000000..24f1c59 --- /dev/null +++ b/src/babylonjs/LinePageBabylonNew.tsx @@ -0,0 +1,396 @@ +import React, { useEffect, useRef, useState } 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 { HemisphericLight, Vector3 } from "@babylonjs/core"; +import { useAppSelector } from "../store/hooks"; +import "../page/style/standard.css"; +import EqInfoData from "./EqInfoData"; +import AlarmTipGreen from "./../page/LinePage/assets/icon/g.png"; +import AlarmTipYellow from "./../page/LinePage/assets/icon/y.png"; +import AlarmTipRed from "./../page/LinePage/assets/icon/r.png"; +import {selectLine1Before} from "../store/LinePageSlice" + +const lineNameNo = ["一","二","三","四","五"] +const myStyle = { + width: "1041px", + height: "562px", + outline: "none", +}; +interface MybabylonJSProps { + modelPath: string; // 明确 modelPath 属性的类型为 string +} +interface EqListType { + [key: string]: EqMsg +} +interface EqMsg { + equipmentName?:string; + run?:boolean; + error?:boolean; + inputNum?:number; + outputNum?:number; + quantityTime?:number; + status?:string; + statusTime?:number; + localDateTime?:number; + equipmentCode?:string; + equipmentId?:number; +} +function MybabylonJS({ modelPath }: MybabylonJSProps) { + const [eqList, setEqList] = useState({}); + const allData = useAppSelector(selectLine1Before) as any; // 使用`any`来绕过类型检查 + const canvasRef = useRef(null); + const resetRef = useRef<(() => void) | null>(null); + // onEquObservable.notifyObservers(EquStatus); + const [selectedMeshName, setSelectedMeshName] = useState(null); + const [selectedMeshId, setSelectedMeshId] = useState(null); + const [selectedMeshObj, setSelectedMeshObj] = useState({ + equipmentName: "", + run: true, + error: false, + }); + const [showInfo, setShowInfo] = useState(true); + + // 使用 useRef 来存储当前加载的模型引用 + const currentMeshesRef = useRef>([]); + useEffect(() => { + const equStatus = allData?.equStatus; + if (equStatus) { + setEqList(equStatus); + } + },[allData]) + useEffect(() => { + const equStatus = allData?.equStatus; + if (equStatus) { + for (let i = 0; i < EqInfoData[modelPath].length; i++) { + for (let j = 0; j < EqInfoData[modelPath][i].data.length; j++) { + EqInfoData[modelPath][i].data[j].value = equStatus[EqInfoData[modelPath][i].data[j].code][EqInfoData[modelPath][i].data[j].label] ? equStatus[EqInfoData[modelPath][i].data[j].code][EqInfoData[modelPath][i].data[j].label] : 0 + } + } + } + },[allData,modelPath]) + useEffect(() => { + if (selectedMeshId && eqList[selectedMeshId]) { + setSelectedMeshObj({ + equipmentName:eqList[selectedMeshId].equipmentName, + run:eqList[selectedMeshId].run ? eqList[selectedMeshId].run : true, + error:eqList[selectedMeshId].error ? eqList[selectedMeshId].error : false, + }); + } + },[selectedMeshId]) + 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 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), + modelPath.slice(-1) === "1" + ? 110 + : modelPath.slice(-3) === "5-2" + ? 100 + : modelPath.slice(-3) === "1-2" + ? 90 + : 65, + 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; + 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); + + // 定义一个函数来加载或重新加载模型 + 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 + ); + // 将新加载的模型添加到 currentMeshesRef 中 + currentMeshesRef.current.push(...LOD0MESH.meshes); + + // ...为新加载的模型设置交互逻辑 + + LOD0MESH.meshes.map((mesh) => { + mesh.isPickable = true; + mesh.actionManager = new BABYLON.ActionManager(scene); + if (modelPath.slice(-1) === "1") { + if ( + mesh.name.includes("磨边") || + mesh.name.includes("清洗") || + mesh.name.includes("镀膜") || + mesh.name.includes("固化") || + mesh.name.includes("丝印") || + mesh.name.includes("打孔") + ) { + // @ts-ignore + hl.addMesh(mesh, BABYLON.Color3.Green()); + } + } else { + if ( + mesh.name.includes("钢化") || + mesh.name.includes("包装") || + mesh.name.includes("铺纸") || + mesh.name.includes("下片机械手") + ) { + // @ts-ignore + hl.addMesh(mesh, BABYLON.Color3.Green()); + } + } + mesh._scene.onPointerDown = async (event, _pickResult) => { + console.log('_pickResult',_pickResult) + const pickInfo = mesh._scene.pick( + mesh._scene.pointerX, + mesh._scene.pointerY + ); + //如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法 + // getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数 + + //判断是否是右键 + if (!(event.buttons === 1 && pickInfo.pickedMesh)) return; + const MeshName = pickInfo.pickedMesh.name; + const MeshNameId = pickInfo.pickedMesh.metadata.tags; + + setSelectedMeshName(MeshName); + setSelectedMeshId(MeshNameId); + }; + }); + } 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 = + modelPath.slice(-1) === "1" + ? 110 + : modelPath.slice(-3) === "5-2" + ? 100 + : modelPath.slice(-3) === "1-2" + ? 90 + : 65; + setShowInfo(true); + setSelectedMeshName(null); + } + // 外部初始位置按钮 + resetRef.current = reset; + + let resetCamera = setTimeout(reset, 15000); + scene.onPointerObservable.add((pointerInfo) => { + switch (pointerInfo.type) { + case BABYLON.PointerEventTypes.POINTERMOVE: + clearTimeout(resetCamera); + resetCamera = setTimeout(reset, 15000); + setShowInfo(false); + } + }); + return scene; + }; + + // call the createScene function + const scene = createScene(); + + // run the render loop + scene.then( + (scene) => { + console.log("createScene被调用了=====", scene); + engine.runRenderLoop(function () { + scene.render(); + }); + }, + (reason) => { + console.log("reason=============", reason); + } + ); + + // Resize + window.addEventListener("resize", function () { + engine.resize(); + }); + // 组件卸载时的清理逻辑 + return () => { + // 清理场景和引擎资源 + engine.dispose(); + }; + }, [modelPath]); + const resetModel = () => { + //模型初始位置 + if (resetRef.current) { + resetRef.current(); + } + }; + return ( +
+ {/*

当前选择: {selectedMeshName}

*/} +
+ + + 第{lineNameNo[Number(modelPath.slice(-3,-2))-1]}产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"} + +
+ {selectedMeshName && ( +
+
+ 设备名称： + {selectedMeshObj.equipmentName} +
+
+ 报警状态： + + {selectedMeshObj.error ? ( + <> + + 报警 + + ) : ( + <> + + 正常 + + )} + +
+
+ 在线状态： + + {selectedMeshObj.run ? ( + <> + + 在线 + + ) : ( + <> + + 离线 + + )} + +
+
+ )} + {showInfo && + EqInfoData[modelPath] && + EqInfoData[modelPath].map((item) => { + return ( +
+
+ {item.name} +
+ {item.data.map((info) => { + return ( +
+ {info.name}：{info.value} +
+ ); + })} +
+ ); + })} + + +
+ ); +} + +export default MybabylonJS; diff --git a/src/page/LinePage1-1/Center/CenterDown.tsx b/src/page/LinePage1-1/Center/CenterDown.tsx index 46c5c72..455b221 100644 --- a/src/page/LinePage1-1/Center/CenterDown.tsx +++ b/src/page/LinePage1-1/Center/CenterDown.tsx @@ -156,7 +156,6 @@ function CenterDown() { dataSource.month.series = [] } let chartData = (dataSource as { [key: string]: any })[activeName]; - console.log('???????????',chartData) const options = getOptions(chartData); return (
diff --git a/src/page/LinePage1-1/Center/CenterUp.tsx b/src/page/LinePage1-1/Center/CenterUp.tsx index 4ae6d57..cb28d84 100644 --- a/src/page/LinePage1-1/Center/CenterUp.tsx +++ b/src/page/LinePage1-1/Center/CenterUp.tsx @@ -1,4 +1,4 @@ -import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +import LinePageBabylon from "../../../babylonjs/LinePageBabylonNew"; function CenterUp() { const lineID = "1-1" return ( diff --git a/src/page/LinePage1-1/Left/LeftUp.tsx b/src/page/LinePage1-1/Left/LeftUp.tsx index 1abff2a..31d2704 100644 --- a/src/page/LinePage1-1/Left/LeftUp.tsx +++ b/src/page/LinePage1-1/Left/LeftUp.tsx @@ -7,7 +7,6 @@ import {useAppSelector} from "./../../../store/hooks" import {selectLine1Before} from "./../../../store/LinePageSlice" function LeftUp() { const data = useAppSelector(selectLine1Before); - console.log('页面数据1-1：',data) // 假数据 const dataSource = { day: { diff --git a/src/page/LinePage1-2/Center/CenterDown.tsx b/src/page/LinePage1-2/Center/CenterDown.tsx index 2d0eae2..515bcc2 100644 --- a/src/page/LinePage1-2/Center/CenterDown.tsx +++ b/src/page/LinePage1-2/Center/CenterDown.tsx @@ -156,7 +156,6 @@ function CenterDown() { dataSource.month.series = [] } let chartData = (dataSource as { [key: string]: any })[activeName]; - console.log('???????????',chartData) const options = getOptions(chartData); return (
diff --git a/src/page/LinePage1-2/Center/CenterUp.tsx b/src/page/LinePage1-2/Center/CenterUp.tsx index 5ddf6e2..a2b8fbf 100644 --- a/src/page/LinePage1-2/Center/CenterUp.tsx +++ b/src/page/LinePage1-2/Center/CenterUp.tsx @@ -1,4 +1,4 @@ -import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +import LinePageBabylon from "../../../babylonjs/LinePageBabylonNew"; function CenterUp() { const lineID = "1-2"; return ( diff --git a/src/page/LinePage1-2/Left/LeftUp.tsx b/src/page/LinePage1-2/Left/LeftUp.tsx index ac007f7..166326d 100644 --- a/src/page/LinePage1-2/Left/LeftUp.tsx +++ b/src/page/LinePage1-2/Left/LeftUp.tsx @@ -7,7 +7,6 @@ import {useAppSelector} from "./../../../store/hooks" import {selectLine1After} from "./../../../store/LinePageSlice" function LeftUp() { const data = useAppSelector(selectLine1After); - console.log('页面数据1-1：',data) // 假数据 const dataSource = { day: { diff --git a/src/page/LinePage2-1/Center/CenterDown.tsx b/src/page/LinePage2-1/Center/CenterDown.tsx index d47c712..dd3d373 100644 --- a/src/page/LinePage2-1/Center/CenterDown.tsx +++ b/src/page/LinePage2-1/Center/CenterDown.tsx @@ -156,7 +156,6 @@ function CenterDown() { dataSource.month.series = [] } let chartData = (dataSource as { [key: string]: any })[activeName]; - console.log('???????????',chartData) const options = getOptions(chartData); return (
diff --git a/src/page/LinePage2-1/Center/CenterUp.tsx b/src/page/LinePage2-1/Center/CenterUp.tsx index 4fe5cdd..584849f 100644 --- a/src/page/LinePage2-1/Center/CenterUp.tsx +++ b/src/page/LinePage2-1/Center/CenterUp.tsx @@ -1,4 +1,4 @@ -import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +import LinePageBabylon from "../../../babylonjs/LinePageBabylonNew"; function CenterUp() { const lineID = "2-1" return ( diff --git a/src/page/LinePage2-2/Center/CenterDown.tsx b/src/page/LinePage2-2/Center/CenterDown.tsx index cf9c180..8aa37e2 100644 --- a/src/page/LinePage2-2/Center/CenterDown.tsx +++ b/src/page/LinePage2-2/Center/CenterDown.tsx @@ -156,7 +156,6 @@ function CenterDown() { dataSource.month.series = [] } let chartData = (dataSource as { [key: string]: any })[activeName]; - console.log('???????????',chartData) const options = getOptions(chartData); return (
diff --git a/src/page/LinePage2-2/Center/CenterUp.tsx b/src/page/LinePage2-2/Center/CenterUp.tsx index 2dd19f2..c9d0539 100644 --- a/src/page/LinePage2-2/Center/CenterUp.tsx +++ b/src/page/LinePage2-2/Center/CenterUp.tsx @@ -1,4 +1,4 @@ -import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +import LinePageBabylon from "../../../babylonjs/LinePageBabylonNew"; function CenterUp() { const lineID = "2-2"; return ( diff --git a/src/page/LinePage3-1/Center/CenterDown.tsx b/src/page/LinePage3-1/Center/CenterDown.tsx index d9d03f7..98d3c93 100644 --- a/src/page/LinePage3-1/Center/CenterDown.tsx +++ b/src/page/LinePage3-1/Center/CenterDown.tsx @@ -156,7 +156,6 @@ function CenterDown() { dataSource.month.series = [] } let chartData = (dataSource as { [key: string]: any })[activeName]; - console.log('???????????',chartData) const options = getOptions(chartData); return (
diff --git a/src/page/LinePage3-1/Center/CenterUp.tsx b/src/page/LinePage3-1/Center/CenterUp.tsx index 933f33d..224ece9 100644 --- a/src/page/LinePage3-1/Center/CenterUp.tsx +++ b/src/page/LinePage3-1/Center/CenterUp.tsx @@ -1,4 +1,4 @@ -import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +import LinePageBabylon from "../../../babylonjs/LinePageBabylonNew"; function CenterUp() { const lineID = "3-1" return ( diff --git a/src/page/LinePage3-1/Left/LeftUp.tsx b/src/page/LinePage3-1/Left/LeftUp.tsx index c7841fb..7e470a2 100644 --- a/src/page/LinePage3-1/Left/LeftUp.tsx +++ b/src/page/LinePage3-1/Left/LeftUp.tsx @@ -7,7 +7,6 @@ import {useAppSelector} from "./../../../store/hooks" import {selectLine3Before} from "./../../../store/LinePageSlice" function LeftUp() { const data = useAppSelector(selectLine3Before); - console.log('页面数据1-1：',data) // 假数据 const dataSource = { day: { diff --git a/src/page/LinePage3-2/Center/CenterDown.tsx b/src/page/LinePage3-2/Center/CenterDown.tsx index 3d6276e..053f3f0 100644 --- a/src/page/LinePage3-2/Center/CenterDown.tsx +++ b/src/page/LinePage3-2/Center/CenterDown.tsx @@ -156,7 +156,6 @@ function CenterDown() { dataSource.month.series = [] } let chartData = (dataSource as { [key: string]: any })[activeName]; - console.log('???????????',chartData) const options = getOptions(chartData); return (
diff --git a/src/page/LinePage3-2/Center/CenterUp.tsx b/src/page/LinePage3-2/Center/CenterUp.tsx index 19a9b5e..92db0de 100644 --- a/src/page/LinePage3-2/Center/CenterUp.tsx +++ b/src/page/LinePage3-2/Center/CenterUp.tsx @@ -1,4 +1,4 @@ -import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +import LinePageBabylon from "../../../babylonjs/LinePageBabylonNew"; function CenterUp() { const lineID = "3-2"; return ( diff --git a/src/page/LinePage3-2/Left/LeftUp.tsx b/src/page/LinePage3-2/Left/LeftUp.tsx index 9090a2d..5737a42 100644 --- a/src/page/LinePage3-2/Left/LeftUp.tsx +++ b/src/page/LinePage3-2/Left/LeftUp.tsx @@ -7,7 +7,6 @@ import {useAppSelector} from "./../../../store/hooks" import {selectLine3After} from "./../../../store/LinePageSlice" function LeftUp() { const data = useAppSelector(selectLine3After); - console.log('页面数据1-1：',data) // 假数据 const dataSource = { day: { diff --git a/src/page/LinePage4-1/Center/CenterDown.tsx b/src/page/LinePage4-1/Center/CenterDown.tsx index d4b3b02..90fd044 100644 --- a/src/page/LinePage4-1/Center/CenterDown.tsx +++ b/src/page/LinePage4-1/Center/CenterDown.tsx @@ -156,7 +156,6 @@ function CenterDown() { dataSource.month.series = [] } let chartData = (dataSource as { [key: string]: any })[activeName]; - console.log('???????????',chartData) const options = getOptions(chartData); return (
diff --git a/src/page/LinePage4-1/Center/CenterUp.tsx b/src/page/LinePage4-1/Center/CenterUp.tsx index 9bc4128..5757ae2 100644 --- a/src/page/LinePage4-1/Center/CenterUp.tsx +++ b/src/page/LinePage4-1/Center/CenterUp.tsx @@ -1,4 +1,4 @@ -import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +import LinePageBabylon from "../../../babylonjs/LinePageBabylonNew"; function CenterUp() { const lineID = "4-1" return ( diff --git a/src/page/LinePage4-2/Center/CenterDown.tsx b/src/page/LinePage4-2/Center/CenterDown.tsx index 6c54410..441db23 100644 --- a/src/page/LinePage4-2/Center/CenterDown.tsx +++ b/src/page/LinePage4-2/Center/CenterDown.tsx @@ -156,7 +156,6 @@ function CenterDown() { dataSource.month.series = [] } let chartData = (dataSource as { [key: string]: any })[activeName]; - console.log('???????????',chartData) const options = getOptions(chartData); return (
diff --git a/src/page/LinePage4-2/Center/CenterUp.tsx b/src/page/LinePage4-2/Center/CenterUp.tsx index eab4e77..c5e5485 100644 --- a/src/page/LinePage4-2/Center/CenterUp.tsx +++ b/src/page/LinePage4-2/Center/CenterUp.tsx @@ -1,4 +1,4 @@ -import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +import LinePageBabylon from "../../../babylonjs/LinePageBabylonNew"; function CenterUp() { const lineID = "4-2"; return ( diff --git a/src/page/LinePage5-1/Center/CenterDown.tsx b/src/page/LinePage5-1/Center/CenterDown.tsx index 0ca2227..aa6ef5e 100644 --- a/src/page/LinePage5-1/Center/CenterDown.tsx +++ b/src/page/LinePage5-1/Center/CenterDown.tsx @@ -156,7 +156,6 @@ function CenterDown() { dataSource.month.series = [] } let chartData = (dataSource as { [key: string]: any })[activeName]; - console.log('???????????',chartData) const options = getOptions(chartData); return (
diff --git a/src/page/LinePage5-1/Center/CenterUp.tsx b/src/page/LinePage5-1/Center/CenterUp.tsx index 08dd7b9..2b5b327 100644 --- a/src/page/LinePage5-1/Center/CenterUp.tsx +++ b/src/page/LinePage5-1/Center/CenterUp.tsx @@ -1,4 +1,4 @@ -import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +import LinePageBabylon from "../../../babylonjs/LinePageBabylonNew"; function CenterUp() { const lineID = "5-1" return ( diff --git a/src/page/LinePage5-2/Center/CenterDown.tsx b/src/page/LinePage5-2/Center/CenterDown.tsx index 919b10f..e333e4f 100644 --- a/src/page/LinePage5-2/Center/CenterDown.tsx +++ b/src/page/LinePage5-2/Center/CenterDown.tsx @@ -156,7 +156,6 @@ function CenterDown() { dataSource.month.series = [] } let chartData = (dataSource as { [key: string]: any })[activeName]; - console.log('???????????',chartData) const options = getOptions(chartData); return (
diff --git a/src/page/LinePage5-2/Center/CenterUp.tsx b/src/page/LinePage5-2/Center/CenterUp.tsx index d800861..bbea1e7 100644 --- a/src/page/LinePage5-2/Center/CenterUp.tsx +++ b/src/page/LinePage5-2/Center/CenterUp.tsx @@ -1,4 +1,4 @@ -import LinePageBabylon from "../../../babylonjs/LinePageBabylon"; +import LinePageBabylon from "../../../babylonjs/LinePageBabylonNew"; function CenterUp() { const lineID = "5-2"; return ( diff --git a/src/page/LinePage5-2/Left/LeftUp.tsx b/src/page/LinePage5-2/Left/LeftUp.tsx index 71df85f..a0a946e 100644 --- a/src/page/LinePage5-2/Left/LeftUp.tsx +++ b/src/page/LinePage5-2/Left/LeftUp.tsx @@ -7,7 +7,6 @@ import {useAppSelector} from "./../../../store/hooks" import {selectLine5After} from "./../../../store/LinePageSlice" function LeftUp() { const data = useAppSelector(selectLine5After); - console.log('页面数据1-1：',data) // 假数据 const dataSource = { day: {