line5
This commit is contained in:
parent
2cb5c7fcd2
commit
2bc9908f62
@ -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;
|
|
||||||
@ -553,7 +553,9 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
|||||||
{/* <h2 className="model_name">当前选择: {selectedMeshName}</h2> */}
|
{/* <h2 className="model_name">当前选择: {selectedMeshName}</h2> */}
|
||||||
<div className="model_info">
|
<div className="model_info">
|
||||||
<span className="reset_btn" onClick={resetModel}></span>
|
<span className="reset_btn" onClick={resetModel}></span>
|
||||||
<span className="title">第五产线钢化后段</span>
|
<span className="title">
|
||||||
|
第五产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{selectedMeshName && (
|
{selectedMeshName && (
|
||||||
<div className="eq_detail_info">
|
<div className="eq_detail_info">
|
||||||
@ -624,7 +626,9 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
|||||||
key={index}
|
key={index}
|
||||||
style={{ left: item.position[0], top: item.position[1] }}
|
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) => {
|
{item.data.map((info, index) => {
|
||||||
return (
|
return (
|
||||||
<div className="eq_info_inner">
|
<div className="eq_info_inner">
|
||||||
|
|||||||
@ -48,6 +48,7 @@ export default function getOptions(chartData: any) {
|
|||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: "单位/%",
|
name: "单位/%",
|
||||||
|
min: 50,
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
|
|||||||
@ -23,7 +23,7 @@ export default function getOptions(dataProps: number[], color: string[]) {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: "单位/千片",
|
name: "单位/片",
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
|
|||||||
@ -38,7 +38,7 @@ export default function getOptions(chartData: any) {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
yAxis: {
|
yAxis: {
|
||||||
name: "单位/千片",
|
name: "单位/片",
|
||||||
nameTextStyle: {
|
nameTextStyle: {
|
||||||
color: "#fff",
|
color: "#fff",
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
|
|||||||
@ -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>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
@ -258,7 +258,7 @@
|
|||||||
padding: 10px 15px;
|
padding: 10px 15px;
|
||||||
}
|
}
|
||||||
.center_up .eq_info .eq_info_inner {
|
.center_up .eq_info .eq_info_inner {
|
||||||
height: 20px;
|
height: 24px;
|
||||||
font-size: 18px;
|
font-size: 17px;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user