mt-fe-group/luoyang-screen
8
0
フォーク 0
コード イシュー プルリクエスト リリース Wiki アクティビティ

line5

ソースを参照
このコミットが含まれているのは:
朱菊兰 2024-08-27 13:26:25 +08:00
コミット 2bc9908f62
7個のファイルの変更、11行の追加、476行の削除
統計情報を表示 Patchファイルをダウンロード Diffファイルをダウンロード すべてのファイルを展開 すべてのファイルを折り畳む

447
src/babylonjs/LinePageBabylon copy.tsx
ファイルの表示

@ -1,447 +0,0 @@
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 { useAppSelector } from "../store/hooks";
import "../page/style/standard.css";
import { EquStatusInterface, selectEquStatus } from "../store/EquStatusEntity";
import EquMap from "./EquMap";
// const onEquObservable = new Observable();
const myStyle = {
width: "1041px",
height: "562px",
outline: "none",
};
interface MybabylonJSProps {
modelPath: string; // 明确 modelPath 属性的类型为 string
}
interface EqInfoListInterface {
[key: string]: EqInfo[];
}
interface EqInfo {
name: string;
inputNum: number;
outPut: number;
position: [number, number];
}
const eqInfoList: EqInfoListInterface = {
"Line1-1": [
{ name: "磨边机", inputNum: 100, outPut: 100, position: [134, 202] },
{ name: "磨边机", inputNum: 101, outPut: 101, position: [82, 306] },
{ name: "磨边机", inputNum: 105, outPut: 105, position: [342, 400] },
{ name: "打孔机", inputNum: 100, outPut: 100, position: [337, 51] },
{ name: "打孔机", inputNum: 101, outPut: 101, position: [338, 156] },
{ name: "打孔机", inputNum: 105, outPut: 105, position: [510, 310] },
{ name: "丝印机", inputNum: 100, outPut: 100, position: [521, 4] },
{ name: "丝印机", inputNum: 101, outPut: 101, position: [520, 90] },
{ name: "丝印机", inputNum: 105, outPut: 105, position: [672, 226] },
{ name: "一次固化", inputNum: 100, outPut: 100, position: [756, 2] },
{ name: "一次固化", inputNum: 101, outPut: 101, position: [833, 90] },
{ name: "一次固化", inputNum: 105, outPut: 105, position: [835, 186] },
],
"Line1-2": [
{ name: "退火", inputNum: 100, outPut: 100, position: [100, 210] },
{ name: "铺纸机", inputNum: 100, outPut: 100, position: [410, 58] },
{ name: "铺纸机", inputNum: 100, outPut: 100, position: [594, 252] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [610, 5] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [838, 1] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [837, 145] },
],
"Line2-1": [
{ name: "磨边机", inputNum: 100, outPut: 100, position: [134, 202] },
{ name: "磨边机", inputNum: 105, outPut: 105, position: [342, 400] },
{ name: "打孔机", inputNum: 101, outPut: 101, position: [338, 156] },
{ name: "打孔机", inputNum: 105, outPut: 105, position: [510, 310] },
{ name: "丝印机", inputNum: 101, outPut: 101, position: [520, 90] },
{ name: "丝印机", inputNum: 105, outPut: 105, position: [672, 226] },
{ name: "一次固化", inputNum: 100, outPut: 100, position: [724, 38] },
{ name: "一次固化", inputNum: 105, outPut: 105, position: [835, 186] },
],
"Line2-2": [
{ name: "退火", inputNum: 100, outPut: 100, position: [215, 247] },
{ name: "铺纸机", inputNum: 100, outPut: 100, position: [710, 237] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [502, 58] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [733, 3] },
],
"Line3-1": [
{ name: "磨边机", inputNum: 100, outPut: 100, position: [134, 202] },
{ name: "磨边机", inputNum: 105, outPut: 105, position: [342, 400] },
{ name: "打孔机", inputNum: 101, outPut: 101, position: [338, 156] },
{ name: "打孔机", inputNum: 105, outPut: 105, position: [510, 310] },
{ name: "丝印机", inputNum: 101, outPut: 101, position: [520, 90] },
{ name: "丝印机", inputNum: 105, outPut: 105, position: [672, 226] },
{ name: "一次固化", inputNum: 100, outPut: 100, position: [724, 38] },
{ name: "一次固化", inputNum: 105, outPut: 105, position: [835, 186] },
],
"Line3-2": [
{ name: "退火", inputNum: 100, outPut: 100, position: [187, 247] },
{ name: "铺纸机", inputNum: 100, outPut: 100, position: [502, 58] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [733, 3] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [710, 237] },
],
"Line4-1": [
{ name: "磨边机", inputNum: 100, outPut: 100, position: [231, 216] },
{ name: "磨边机", inputNum: 105, outPut: 105, position: [403, 400] },
{ name: "一次固化", inputNum: 101, outPut: 101, position: [520, 90] },
{ name: "一次固化", inputNum: 105, outPut: 105, position: [643, 276] },
{ name: "二次固化", inputNum: 100, outPut: 100, position: [724, 38] },
{ name: "二次固化", inputNum: 105, outPut: 105, position: [835, 186] },
],
"Line4-2": [
{ name: "退火", inputNum: 100, outPut: 100, position: [187, 247] },
{ name: "铺纸机", inputNum: 100, outPut: 100, position: [710, 237] },
{ name: "铺纸机", inputNum: 100, outPut: 100, position: [820, 237] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [553, 7] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [839, 137] },
],
"Line5-1": [
{ name: "磨边机", inputNum: 100, outPut: 100, position: [134, 202] },
{ name: "磨边机", inputNum: 101, outPut: 101, position: [82, 306] },
{ name: "磨边机", inputNum: 105, outPut: 105, position: [342, 400] },
{ name: "一次固化", inputNum: 100, outPut: 100, position: [521, 4] },
{ name: "一次固化", inputNum: 101, outPut: 101, position: [520, 90] },
{ name: "一次固化", inputNum: 105, outPut: 105, position: [672, 287] },
{ name: "二次固化", inputNum: 100, outPut: 100, position: [756, 2] },
{ name: "二次固化", inputNum: 101, outPut: 101, position: [833, 90] },
{ name: "二次固化", inputNum: 105, outPut: 105, position: [835, 186] },
],
"Line5-2": [
{ name: "退火", inputNum: 100, outPut: 100, position: [100, 270] },
{ name: "铺纸机", inputNum: 100, outPut: 100, position: [434, 133] },
{ name: "铺纸机", inputNum: 100, outPut: 100, position: [640, 305] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [645, 54] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [838, 1] },
{ name: "下片机", inputNum: 100, outPut: 100, position: [837, 226] },
],
};
function MybabylonJS({ modelPath }: MybabylonJSProps) {
console.log("modelPath:;;;;;;", modelPath);
// const EquStatus = useAppSelector(selectEquStatus);
const canvasRef = useRef(null);
// onEquObservable.notifyObservers(EquStatus);
const [SelectedMeshName, setSelectedMeshName] = useState<string | null>(null);
// 使用 useRef 来存储当前加载的模型引用
const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]);
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
: 75,
new BABYLON.Vector3(-13, 0, 0)
);
console.log("camera", camera);
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);
// console.log("mesh==========", mesh);
if (modelPath.slice(-1) === "1") {
if (
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("下片机械手")
) {
// @ts-ignore
hl.addMesh(mesh, BABYLON.Color3.Green());
}
}
//鼠标移动到物体上亮显
// mesh.actionManager.registerAction(
// new BABYLON.ExecuteCodeAction(
// BABYLON.ActionManager.OnPointerOverTrigger,
// (a) => {
// console.log("================", a);
// // @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 =
modelPath.slice(-1) === "1"
? 110
: modelPath.slice(-3) === "5-2"
? 100
: 75;
}
let resetCamera = setTimeout(reset, 15000);
scene.onPointerObservable.add((pointerInfo) => {
switch (pointerInfo.type) {
case BABYLON.PointerEventTypes.POINTERMOVE:
clearTimeout(resetCamera);
resetCamera = setTimeout(reset, 15000);
}
});
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 resetModel = () => {
//模型初始位置
console.log("回到初始位置");
};
return (
<div style={myStyle}>
<h2 className="model_name">当前选择: {SelectedMeshName}</h2>
<div className="model_info">
<span className="reset_btn" onClick={resetModel}></span>
<span className="title">第五产线钢化后段</span>
</div>
{/* <div className="eq_detail_info">
<div>
<span className="left_name">设备名称：</span>
<span className="right_value">下片机械手</span>
</div>
<div>
<span className="left_name">进口数量：</span>
<span className="right_value">12,302</span>
</div>
<div>
<span className="left_name">出口数量：</span>
<span className="right_value">1,302</span>
</div>
<div>
<span className="left_name">报警状态：</span>
<span className="right_value">未报警</span>
</div>
<div>
<span className="left_name">在线状态：</span>
<span className="right_value">在线</span>
</div>
</div> */}
{eqInfoList[modelPath] &&
eqInfoList[modelPath].map((item, index) => {
return (
<div
className="eq_info"
key={index}
style={{ left: item.position[0], top: item.position[1] }}
>
<div>
<span className="left_name">设备名称：</span>
<span className="right_value">{item.name}</span>
</div>
<div>
<span className="left_name">进口数量：</span>
<span className="right_value">{item.inputNum}</span>
</div>
<div>
<span className="left_name">出口数量：</span>
<span className="right_value">{item.outPut}</span>
</div>
</div>
);
})}
<canvas ref={canvasRef} style={myStyle} />
</div>
);
}
export default MybabylonJS;

8
src/babylonjs/LinePageBabylon.tsx
ファイルの表示

@ -553,7 +553,9 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
{/* <h2 className="model_name">当前选择: {selectedMeshName}</h2> */}
<div className="model_info">
<span className="reset_btn" onClick={resetModel}></span>
<span className="title">第五产线钢化后段</span>
<span className="title">
第五产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"}
</span>
</div>
{selectedMeshName && (
<div className="eq_detail_info">
@ -624,7 +626,9 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
key={index}
style={{ left: item.position[0], top: item.position[1] }}
>
<div className="eq_info_inner">{item.name}</div>
<div className="eq_info_inner" style={{ color: "#00FFF0" }}>
{item.name}
</div>
{item.data.map((info, index) => {
return (
<div className="eq_info_inner">

1
src/page/LinePage/Center/LineChart/chart.config.ts
ファイルの表示

@ -48,6 +48,7 @@ export default function getOptions(chartData: any) {
},
yAxis: {
name: "单位/%",
min: 50,
nameTextStyle: {
color: "#fff",
fontSize: 14,

2
src/page/LinePage/Left/BarChart/chart.config.ts
ファイルの表示

@ -23,7 +23,7 @@ export default function getOptions(dataProps: number[], color: string[]) {
},
},
yAxis: {
name: "单位/千片",
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 14,

2
src/page/LinePage/Left/SummaryBarChart/chart.config.ts
ファイルの表示

@ -38,7 +38,7 @@ export default function getOptions(chartData: any) {
},
},
yAxis: {
name: "单位/千片",
name: "单位/片",
nameTextStyle: {
color: "#fff",
fontSize: 14,

23
src/page/LinePage/assets/svg/alarmTip.svg
ファイルの表示

@ -1,23 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>矩形备份 16</title>
<defs>
<rect id="path-1" x="107.233171" y="10.535516" width="8" height="8" rx="4"></rect>
<filter x="-75.0%" y="-75.0%" width="250.0%" height="250.0%" filterUnits="objectBoundingBox" id="filter-2">
<feMorphology radius="1" operator="dilate" in="SourceAlpha" result="shadowSpreadOuter1"></feMorphology>
<feOffset dx="0" dy="0" in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
<feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
<feColorMatrix values="0 0 0 0 0.278431373 0 0 0 0 1 0 0 0 0 0.152941176 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
</filter>
</defs>
<g id="洛阳" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="洛阳现场看板tc" transform="translate(-1374.233171, -640.985634)">
<g id="编组-13" transform="translate(1255.024831, 507.964484)">
<g id="矩形备份-16" transform="translate(15.975169, 126.485634)">
<use fill="black" fill-opacity="1" filter="url(#filter-2)" xlink:href="#path-1"></use>
<use fill="#47FF27" fill-rule="evenodd" xlink:href="#path-1"></use>
</g>
</g>
</g>
</g>
</svg>
並べて表示

変更前

幅:  |  高さ:  |  サイズ: 1.5 KiB

4
src/page/LinePage/index.css
ファイルの表示

@ -258,7 +258,7 @@
padding: 10px 15px;
}
.center_up .eq_info .eq_info_inner {
height: 20px;
font-size: 18px;
height: 24px;
font-size: 17px;
white-space: nowrap;
}