diff --git a/public/png/lp/eq_msg_always.png b/public/png/lp/eq_msg_always.png new file mode 100644 index 0000000..c2e096f Binary files /dev/null and b/public/png/lp/eq_msg_always.png differ diff --git a/public/png/lp/eq_msg_detail.png b/public/png/lp/eq_msg_detail.png new file mode 100644 index 0000000..cd53bcd Binary files /dev/null and b/public/png/lp/eq_msg_detail.png differ diff --git a/public/png/lp/line_part.png b/public/png/lp/line_part.png new file mode 100644 index 0000000..da50aa9 Binary files /dev/null and b/public/png/lp/line_part.png differ diff --git a/src/babylonjs/LinePageBabylon copy.tsx b/src/babylonjs/LinePageBabylon copy.tsx new file mode 100644 index 0000000..30d6cab --- /dev/null +++ b/src/babylonjs/LinePageBabylon copy.tsx @@ -0,0 +1,447 @@ +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(null); + + // 使用 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 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 ( +
+

当前选择: {SelectedMeshName}

+
+ + 第五产线钢化后段 +
+ {/*
+
+ 设备名称： + 下片机械手 +
+
+ 进口数量： + 12,302 +
+
+ 出口数量： + 1,302 +
+
+ 报警状态： + 未报警 +
+
+ 在线状态： + 在线 +
+
*/} + {eqInfoList[modelPath] && + eqInfoList[modelPath].map((item, index) => { + return ( +
+
+ 设备名称： + {item.name} +
+
+ 进口数量： + {item.inputNum} +
+
+ 出口数量： + {item.outPut} +
+
+ ); + })} + + +
+ ); +} + +export default MybabylonJS; diff --git a/src/babylonjs/LinePageBabylon.tsx b/src/babylonjs/LinePageBabylon.tsx index baec296..4da9f8b 100644 --- a/src/babylonjs/LinePageBabylon.tsx +++ b/src/babylonjs/LinePageBabylon.tsx @@ -15,31 +15,282 @@ import { useAppSelector } from "../store/hooks"; import "../page/style/standard.css"; import { EquStatusInterface, selectEquStatus } from "../store/EquStatusEntity"; import EquMap from "./EquMap"; +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 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] }, + ], +}; +interface EqInfoInterface { + name: string; + data: Array<{ name: string; value: number }>; + position: Array; +} +interface EqInfoDataInterface { + [key: string]: Array; +} +const eqInfoData: EqInfoDataInterface = { + "Line5-1": [ + { + name: "磨边进口", + data: [ + { name: "1支线", value: 413 }, + { name: "2支线", value: 435 }, + { name: "3支线", value: 397 }, + ], + position: [154, 266], + }, + { + name: "磨边清洗出口", + data: [ + { name: "1支线", value: 401 }, + { name: "2支线", value: 418 }, + { name: "3支线", value: 389 }, + ], + position: [331, 177], + }, + { + name: "一次镀膜进口", + data: [ + { name: "1支线", value: 400 }, + { name: "2支线", value: 418 }, + { name: "3支线", value: 388 }, + ], + position: [555, 329], + }, + { + name: "二次镀膜进口", + data: [ + { name: "1支线", value: 387 }, + { name: "2支线", value: 399 }, + { name: "3支线", value: 381 }, + ], + position: [550, 85], + }, + { + name: "二次固化出口", + data: [ + { name: "1支线", value: 384 }, + { name: "2支线", value: 398 }, + { name: "3支线", value: 377 }, + ], + position: [857, 184], + }, + { + name: "钢化进口", + data: [{ name: "钢化进口", value: 1157 }], + position: [870, 48], + }, + ], + "Line5-2": [ + { + name: "钢化出口", + data: [{ name: "钢化出口", value: 1124 }], + position: [305, 255], + }, + { + name: "包装清洗机入口", + data: [ + { name: "包装清洗机5_1", value: 515 }, + { name: "包装清洗机5_2", value: 507 }, + ], + position: [508, 319], + }, + { + name: "包装清洗机出口", + data: [ + { name: "包装清洗机5_1", value: 515 }, + { name: "包装清洗机5_2", value: 505 }, + ], + position: [444, 159], + }, + { + name: "铺纸机", + data: [ + { name: "铺纸机5_1", value: 509 }, + { name: "铺纸机5_2", value: 504 }, + ], + position: [696, 272], + }, + { + name: "下片机械手", + data: [ + { name: "下片机械手5_1", value: 347 }, + { name: "下片机械手5_2", value: 334 }, + { name: "下片机械手5_3", value: 316 }, + ], + position: [712, 28], + }, + ], +}; +interface EqStatusListInterface { + [key: string]: Array<{ + equipment: string; + alarm: boolean; + online: boolean; + }>; +} +const eqStatusList: EqStatusListInterface = { + "Line5-1": [ + { equipment: "磨边机5_1", alarm: false, online: true }, + { equipment: "磨边机5_2", alarm: false, online: true }, + { equipment: "磨边机5_3", alarm: false, online: true }, + { equipment: "清洗机5_1", alarm: false, online: true }, + { equipment: "清洗机5_2", alarm: false, online: true }, + { equipment: "清洗机5_3", alarm: false, online: true }, + { equipment: "一次镀膜5_2", alarm: false, online: true }, + { equipment: "一次镀膜5_3", alarm: false, online: true }, + { equipment: "一次固化5_1", alarm: false, online: true }, + { equipment: "一次镀膜5_1", alarm: false, online: true }, + { equipment: "一次固化5_2", alarm: false, online: true }, + { equipment: "一次固化5_3", alarm: false, online: true }, + { equipment: "二次镀膜5_1", alarm: false, online: true }, + { equipment: "二次镀膜5_2", alarm: false, online: true }, + { equipment: "二次镀膜5_3", alarm: false, online: true }, + { equipment: "二次固化5_1", alarm: false, online: true }, + { equipment: "二次固化5_2", alarm: false, online: true }, + { equipment: "二次固化5_3", alarm: false, online: true }, + ], + "Line5-2": [ + { equipment: "钢化炉5", alarm: false, online: true }, + { equipment: "包装清洗机5_1", alarm: false, online: true }, + { equipment: "包装清洗机5_2", alarm: false, online: true }, + { equipment: "在线铺纸机5_1", alarm: false, online: true }, + { equipment: "在线铺纸机5_2", alarm: false, online: true }, + { equipment: "下片机械手5_1", alarm: false, online: true }, + { equipment: "下片机械手5_2", alarm: false, online: true }, + { equipment: "下片机械手5_3", alarm: false, online: true }, + ], +}; function MybabylonJS({ modelPath }: MybabylonJSProps) { - const EquStatus = useAppSelector(selectEquStatus); + console.log("modelPath:;;;;;;", modelPath); + // const EquStatus = useAppSelector(selectEquStatus); const canvasRef = useRef(null); - onEquObservable.notifyObservers(EquStatus); - const [SelectedMeshName, setSelectedMeshName] = useState(null); + const resetRef = useRef<(() => void) | null>(null); + // onEquObservable.notifyObservers(EquStatus); + const [selectedMeshName, setSelectedMeshName] = useState(null); + const [selectedMeshObj, setSelectedMeshObj] = useState({ + equipment: "", + alarm: false, + online: true, + }); + const [showInfo, setShowInfo] = useState(true); // 使用 useRef 来存储当前加载的模型引用 const currentMeshesRef = useRef>([]); + useEffect(() => { + console.log("canvasRef++++++", canvasRef); + console.log("resetRef++++++", resetRef); // 确保 canvas 引用存在 if (!canvasRef.current) return; - const canvas = canvasRef.current; const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, @@ -50,7 +301,6 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { // 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), @@ -70,10 +320,9 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { ? 110 : modelPath.slice(-3) === "5-2" ? 100 - : 80, + : 75, new BABYLON.Vector3(-13, 0, 0) ); - console.log("camera", camera); camera.lowerRadiusLimit = 10; camera.upperRadiusLimit = 600; @@ -106,7 +355,7 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { grid.backFaceCulling = !1; grid.mainColor = new BABYLON.Color3(1, 1, 1); grid.lineColor = new BABYLON.Color3(1, 1, 1); - grid.opacity = 0.8; + grid.opacity = 0; grid.zOffset = 1; grid.opacityTexture = new BABYLON.Texture( "/public/png/backgroundGround.png", @@ -142,25 +391,50 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { 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("铺纸") || + mesh.name.includes("下片机械手") + ) { + // @ts-ignore + hl.addMesh(mesh, BABYLON.Color3.Green()); + } + } + //鼠标移动到物体上亮显 - 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.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( @@ -177,29 +451,34 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { const MeshName1 = pickInfo.pickedMesh.name.split(".")[0]; setSelectedMeshName(MeshName1); + eqStatusList[modelPath].map((item: any) => { + if (item.equipment === MeshName1) { + setSelectedMeshObj(item); + } + }); }; }); - 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()); - } - }); - }); - } - }); - }); + // 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); } @@ -217,8 +496,12 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { ? 110 : modelPath.slice(-3) === "5-2" ? 100 - : 80; + : 75; + setShowInfo(true); + setSelectedMeshName(null); } + // 外部初始位置按钮 + resetRef.current = reset; let resetCamera = setTimeout(reset, 15000); scene.onPointerObservable.add((pointerInfo) => { @@ -226,6 +509,7 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { case BABYLON.PointerEventTypes.POINTERMOVE: clearTimeout(resetCamera); resetCamera = setTimeout(reset, 15000); + setShowInfo(false); } }); return scene; @@ -234,17 +518,16 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { // call the createScene function const scene = createScene(); - scene.then((scene) => {}); - // run the render loop scene.then( (scene) => { + console.log("createScene被调用了=====", scene); engine.runRenderLoop(function () { scene.render(); }); }, (reason) => { - console.log(reason); + console.log("reason=============", reason); } ); @@ -252,16 +535,107 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) { window.addEventListener("resize", function () { engine.resize(); }); - // 组件卸载时的清理逻辑 return () => { // 清理场景和引擎资源 engine.dispose(); }; }, [modelPath]); - + const resetModel = () => { + //模型初始位置 + console.log("回到初始位置"); + if (resetRef.current) { + resetRef.current(); + } + }; return (
+ {/*

当前选择: {selectedMeshName}

*/} +
+ + 第五产线钢化后段 +
+ {selectedMeshName && ( +
+
+ 设备名称： + {selectedMeshObj.equipment} +
+
+ 报警状态： + + {selectedMeshObj.alarm ? ( + <> + + 报警 + + ) : ( + <> + + 正常 + + )} + +
+
+ 在线状态： + + {selectedMeshObj.online ? ( + <> + + 在线 + + ) : ( + <> + + 离线 + + )} + +
+
+ )} + {showInfo && + eqInfoData[modelPath] && + eqInfoData[modelPath].map((item, index) => { + return ( +
+
{item.name}
+ {item.data.map((info, index) => { + return ( +
+ {info.name}：{info.value} +
+ ); + })} +
+ ); + })} +
); diff --git a/src/page/LinePage/Center/CenterDown.tsx b/src/page/LinePage/Center/CenterDown.tsx index d52f884..18dfe48 100644 --- a/src/page/LinePage/Center/CenterDown.tsx +++ b/src/page/LinePage/Center/CenterDown.tsx @@ -1,15 +1,54 @@ +import ReactECharts from "echarts-for-react"; import TitleBox from "../Component/TitleBox"; -import LineChart from "./LineChart"; import ScrollBoard from "./../../Component/ScrollBoard"; import SwitchButton from "../Component/SwitchButton"; import { useState } from "react"; +import getOptions from "./LineChart/chart.config"; +import { useParams } from "react-router-dom"; function CenterDown() { - const nameList = [{ name: "天" }, { name: "周" }, { name: "月" }]; - const [activeName, setActiveName] = useState(nameList[0].name); + const { LineID } = useParams(); + const lineID = LineID?.toString() || "1-1"; + console.log(lineID.slice(-1)); + // 假数据 + const dataSource = { + day: { + yData1: [76.1, 77.4, 75.2, 74.1, 78.5, 81.3, 79.2], + yData2: [77.2, 78.1, 78.2, 77.1, 79.2, 78.3, 79.5], + yData3: [75.1, 74.3, 71.3, 79.8, 82.3, 81.4, 80.3], + yData4: [82.4, 83.1, 88.4, 85.3, 87.1, 82.5, 84.9], + yData5: [82.3, 81.9, 85.8, 81.9, 84.1, 83.5, 82.3], + }, + week: { + yData1: [120, 200, 150, 80, 100, 89, 69], + yData2: [100, 150, 120, 70, 90, 97, 89], + yData3: [80, 120, 90, 60, 80, 79, 98], + yData4: [60, 90, 70, 40, 60, 69, 98], + yData5: [40, 60, 50, 20, 40, 89, 99], + }, + month: { + yData1: [1200, 2000, 1500, 800, 1000, 999, 889], + yData2: [1000, 1500, 1200, 700, 900, 987, 897], + yData3: [800, 1200, 900, 600, 800, 962, 759], + yData4: [600, 900, 700, 400, 600, 896, 987], + yData5: [400, 600, 500, 200, 400, 986, 951], + }, + }; + const nameList = [ + { name: "天", ename: "day" }, + { name: "周", ename: "week" }, + { name: "月", ename: "month" }, + ]; + const [activeName, setActiveName] = useState(nameList[0].ename); + let chartData = (dataSource as { [key: string]: any })[activeName]; + const handleButtonChange = (activeName: string) => { + setActiveName(activeName); + }; + const options = getOptions(chartData); const config = { header: ["序号", "报警时间", "报警编码", "设备状态"], headerHeight: 36, rowNum: 6, + align: ["center", "left", "left", "left"], headerBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)", evenRowBGC: "rgba(76, 97, 123, 0.1)", @@ -32,6 +71,138 @@ function CenterDown() { ], ], }; + const config1 = { + header: ["序号", "报警时间", "报警设备", "报警内容"], + headerHeight: 36, + rowNum: 6, + align: ["center", "left", "left", "left"], + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [80, 137, 137, 137], + data: [ + [ + "1", + "2024/8/28 08:32", + "清洗机5_1", + "故障", + ], + [ + "2", + "2024/8/28 06:12", + "清洗机5_1", + "离线", + ], + [ + "3", + "2024/8/28 06:05", + "磨边机5_2", + "离线", + ], + [ + "4", + "2024/8/28 04:43", + "二次镀膜机5_1", + "离线", + ], + [ + "5", + "2024/8/28 02:14", + "磨边机5_1", + "故障", + ], + [ + "6", + "2024/8/27 22:54", + "磨边机5_2", + "离线", + ], + [ + "7", + "2024/8/27 21:55", + "磨边机5_1", + "离线", + ], + [ + "8", + "2024/8/27 21:42", + "一次镀膜机5_2", + "离线", + ], + [ + "9", + "2024/8/27 21:37", + "磨边机5_1", + "离线", + ], + ], + }; + const config2 = { + header: ["序号", "报警时间", "报警设备", "报警内容"], + headerHeight: 36, + rowNum: 6, + align: ["center", "left", "left", "left"], + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [80, 137, 137, 137], + data: [ + [ + "1", + "2024/8/28 07:44", + "下片机械手5_1", + "故障", + ], + [ + "2", + "2024/8/28 07:35", + "下片机械手5_1", + "故障", + ], + [ + "3", + "2024/8/28 03:23", + "在线铺纸机5_1", + "离线", + ], + [ + "4", + "2024/8/28 01:36", + "下片机械手5_2", + "故障", + ], + [ + "5", + "2024/8/28 00:38", + "钢化炉5", + "离线", + ], + [ + "6", + "2024/8/27 23:58", + "下片机械手5_3", + "离线", + ], + [ + "7", + "2024/8/27 23:45", + "下片机械手5_2", + "离线", + ], + [ + "8", + "2024/8/27 22:34", + "钢化炉5", + "离线", + ], + [ + "9", + "2024/8/27 20:31", + "在线铺纸机5_1", + "故障", + ], + ], + }; return (
@@ -40,7 +211,7 @@ function CenterDown() {
321,343
@@ -48,16 +219,28 @@ function CenterDown() { {/* 产线成品率 */}
-
- -
-
- -
+ {/*
+ +
*/} + + {options && ( +
+ {} +
+ )} + {!options && ( +

+ 暂无数据 +

+ )}
); diff --git a/src/page/LinePage/Center/LineChart/chart.config.ts b/src/page/LinePage/Center/LineChart/chart.config.ts index cb9c8e3..5c75f7d 100644 --- a/src/page/LinePage/Center/LineChart/chart.config.ts +++ b/src/page/LinePage/Center/LineChart/chart.config.ts @@ -1,18 +1,19 @@ -import * as echarts from "echarts"; -export default function getOptions() { +export default function getOptions(chartData: any) { + if (Object.keys(chartData).length === 0) { + return null; + } 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, + itemWidth: 14, itemHeight: 10, - itemGap: 3, + itemGap: 8, height: 10, textStyle: { color: "#DFF1FE", @@ -21,17 +22,18 @@ export default function getOptions() { }, 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(), + data: ["8/22", "8/23", "8/24", "8/25", "8/26", "8/27", "8/28"], + // 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, @@ -73,6 +75,7 @@ export default function getOptions() { tooltip: { trigger: "axis", className: "luoyang-chart-tooltip", + show: false, }, series: [ { @@ -80,35 +83,35 @@ export default function getOptions() { type: "line", symbol: "circle", symbolSize: 4, - data: [20, 32, 10, 34, 90, 30, 20], + data: chartData.yData1, }, { name: "产线2", type: "line", symbol: "circle", symbolSize: 4, - data: [22, 82, 91, 34, 90, 33, 31], + data: chartData.yData2, }, { name: "产线3", type: "line", symbol: "circle", symbolSize: 4, - data: [50, 32, 20, 54, 19, 33, 41], + data: chartData.yData3, }, { name: "产线4", type: "line", symbol: "circle", symbolSize: 4, - data: [30, 32, 30, 34, 90, 33, 32], + data: chartData.yData4, }, { name: "产线5", type: "line", symbol: "circle", symbolSize: 4, - data: [20, 92, 91, 94, 90, 30, 53], + data: chartData.yData5, }, ], }; diff --git a/src/page/LinePage/Center/LineChart/index.tsx b/src/page/LinePage/Center/LineChart/index.tsx deleted file mode 100644 index 5d13da5..0000000 --- a/src/page/LinePage/Center/LineChart/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import ReactECharts from "echarts-for-react"; -import getOptions from "./chart.config"; -function LineChart() { - return ; -} -export default LineChart; diff --git a/src/page/LinePage/Component/SwitchButton/index.css b/src/page/LinePage/Component/SwitchButton/index.css index e885d58..604d81a 100644 --- a/src/page/LinePage/Component/SwitchButton/index.css +++ b/src/page/LinePage/Component/SwitchButton/index.css @@ -4,7 +4,7 @@ .switch-button button { color: #fff; font-size: 18px; - padding: 4px 15px; + padding: 4px 10px; background-color: rgba(49, 135, 140, 0.3); cursor: pointer; } diff --git a/src/page/LinePage/Component/SwitchButton/index.tsx b/src/page/LinePage/Component/SwitchButton/index.tsx index 46fec83..9209c06 100644 --- a/src/page/LinePage/Component/SwitchButton/index.tsx +++ b/src/page/LinePage/Component/SwitchButton/index.tsx @@ -1,23 +1,59 @@ +import { useEffect, useState } from "react"; import "./index.css"; interface Name { name: string; + ename: string; } interface nameListProps { nameList: Name[]; - activeName: string; - setActiveName: (name: string) => void; + onChange: (value: string) => void; +} +function createActiveNameUpdater(nameList: any, activeName: string) { + let activeIndex = nameList.findIndex((obj: any) => obj.name === activeName); + + return function updateActiveName() { + activeIndex = (activeIndex + 1) % nameList.length; + return nameList[activeIndex].ename; + }; } function SwitchButton(props: nameListProps) { + const [activeName, setActiveName] = useState(props.nameList[0].ename); + const [timerId, setTimerId] = useState(null); + let updateActiveName = createActiveNameUpdater(props.nameList, activeName); + useEffect(() => { + const timer = setInterval(() => { + let active = updateActiveName(); + setActiveName(active); + props.onChange(active); + }, 60000); + setTimerId(timer); + return () => { + if (timerId !== null) { + clearInterval(timerId); + } + }; + }, [props.nameList.length]); + const btnClick = (ename: string) => { + if (timerId !== null) { + clearInterval(timerId); + } + setActiveName(ename); + props.onChange(ename); // 通知父组件 + const newTimer = setInterval(() => { + let active = updateActiveName(); + setActiveName(active); + props.onChange(active); + }, 60000); + setTimerId(newTimer); + }; return (
{props.nameList.map((item, index) => { return ( diff --git a/src/page/LinePage/Component/TitleBox/index.tsx b/src/page/LinePage/Component/TitleBox/index.tsx index 9c4c043..dd43a66 100644 --- a/src/page/LinePage/Component/TitleBox/index.tsx +++ b/src/page/LinePage/Component/TitleBox/index.tsx @@ -14,12 +14,12 @@ function TitleBox(props: titleProps) { case "left_up": return { img: Defect, - title: "产线缺陷汇总", + title: "产线报废汇总", }; case "left_down": return { img: Record, - title: "当前产线缺陷", + title: "当前产线报废情况", }; case "center_down_left": return { @@ -39,7 +39,7 @@ function TitleBox(props: titleProps) { default: return { img: InputAndOutput, - title: "各产线投入和产出", + title: "当前产线投入和产出", }; } }; diff --git a/src/page/LinePage/Left/BarChart/chart.config.ts b/src/page/LinePage/Left/BarChart/chart.config.ts index 1ff6774..00a7f4b 100644 --- a/src/page/LinePage/Left/BarChart/chart.config.ts +++ b/src/page/LinePage/Left/BarChart/chart.config.ts @@ -1,15 +1,14 @@ import * as echarts from "echarts"; -export default function getOptions() { - const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"]; +export default function getOptions(dataProps: number[], color: string[]) { + if (dataProps.length === 0) return null; 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"], + data: ["磨边后", "包装1", "包装2"], axisLabel: { color: "#fff", fontSize: 14, @@ -55,10 +54,11 @@ export default function getOptions() { type: "shadow", }, className: "luoyang-chart-tooltip", + show: false, }, series: [ { - data: [120, 200, 150, 80, 70, 110], + data: dataProps, type: "bar", barWidth: 10, label: { @@ -69,8 +69,8 @@ export default function getOptions() { }, itemStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: "#9DD5FF" }, - { offset: 1, color: "#1295FF" }, + { offset: 0, color: color[0] }, + { offset: 1, color: color[1] }, ]), }, }, diff --git a/src/page/LinePage/Left/BarChart/index.tsx b/src/page/LinePage/Left/BarChart/index.tsx deleted file mode 100644 index ff5631c..0000000 --- a/src/page/LinePage/Left/BarChart/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -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 index c3f6193..9ecd183 100644 --- a/src/page/LinePage/Left/LeftDown.tsx +++ b/src/page/LinePage/Left/LeftDown.tsx @@ -1,15 +1,23 @@ +import ReactECharts from "echarts-for-react"; import TitleBox from "../Component/TitleBox"; import SwitchButton from "../Component/SwitchButton"; -import BarChart from "./BarChart"; import ScrollBoard from "./../../Component/ScrollBoard"; import { useState } from "react"; +import getOptions from "./BarChart/chart.config"; function LeftDown() { - const nameList = [{ name: "表单" }, { name: "柱状" }]; - const [activeName, setActiveName] = useState(nameList[0].name); + const nameList = [ + { name: "表单", ename: "table" }, + { name: "柱状", ename: "chart" }, + ]; + const [activeName, setActiveName] = useState(nameList[0].ename); + const handleButtonChange = (activeName: string) => { + setActiveName(activeName); + }; const config = { - header: ["序号", "缺陷种类", "缺陷数量"], + header: ["序号", "工序类型", "报废数量"], headerHeight: 30, rowNum: 4, + align: ["center", "left", "left"], headerBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)", evenRowBGC: "rgba(76, 97, 123, 0.1)", @@ -27,15 +35,64 @@ function LeftDown() { ["行10列1", "行10列2", "行10列3"], ], }; + const config1 = { + header: ["序号", "工序类型", "报废数量"], + headerHeight: 30, + rowNum: 4, + align: ["center", "left", "left"], + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [73, 117, 190], + data: [ + ["1", "磨边后", 224], + ["2", "包装1", 322], + ["3", "包装2", 66], + ], + }; + const config2 = { + header: ["序号", "工序类型", "报废数量"], + headerHeight: 30, + rowNum: 4, + align: ["center", "left", "left"], + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [73, 117, 190], + data: [ + ["1", "磨边后", 1119], + ["2", "包装1", 1798], + ["3", "包装2", 435], + ], + }; + const config3 = { + header: ["序号", "工序类型", "报废数量"], + headerHeight: 30, + rowNum: 4, + align: ["center", "left", "left"], + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [73, 117, 190], + data: [ + ["1", "磨边后", 5004], + ["2", "包装1", 9122], + ["3", "包装2", 1924], + ], + }; + const color1 = ["#9DD5FF", "#1295FF"]; + const color2 = ["#85F6E9", "#2EC6B4"]; + const dataProps1 = [224, 322, 66]; + const dataProps2 = [1119, 1798, 435]; + const dataProps3 = [5004, 9122, 1924]; + const options1 = getOptions(dataProps1, color1); + const options2 = getOptions(dataProps2, color2); + const options3 = getOptions(dataProps3, color1); return (
- +
@@ -44,13 +101,25 @@ function LeftDown() {
- {activeName === "表单" ? ( + {activeName === "table" ? ( + ) : options1 ? ( + ) : ( - +

+ 暂无数据 +

)}
@@ -59,13 +128,25 @@ function LeftDown() {
- {activeName === "表单" ? ( + {activeName === "table" ? ( + ) : options2 ? ( + ) : ( - +

+ 暂无数据 +

)}
@@ -74,13 +155,25 @@ function LeftDown() {
- {activeName === "表单" ? ( + {activeName === "table" ? ( + ) : options3 ? ( + ) : ( - +

+ 暂无数据 +

)}
diff --git a/src/page/LinePage/Left/LeftUp.tsx b/src/page/LinePage/Left/LeftUp.tsx index a2fdde3..0cd8b82 100644 --- a/src/page/LinePage/Left/LeftUp.tsx +++ b/src/page/LinePage/Left/LeftUp.tsx @@ -1,23 +1,68 @@ +import ReactECharts from "echarts-for-react"; import TitleBox from "../Component/TitleBox"; import SwitchButton from "../Component/SwitchButton"; -import SummaryBarChart from "./SummaryBarChart"; +import getOptions from "./SummaryBarChart/chart.config"; import { useState } from "react"; function LeftUp() { - const nameList = [{ name: "天" }, { name: "周" }, { name: "月" }]; - const [activeName, setActiveName] = useState(nameList[0].name); + // 假数据 + const dataSource = { + day: { + xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"], + yData1: [236, 214, 196, 239, 224], + yData2: [346, 296, 327, 311, 322], + yData3: [78, 85, 56, 106, 66], + sumData: [660, 595, 579, 656, 612], + }, + week: { + xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"], + yData1: [1336, 1223, 1313, 1134, 1119], + yData2: [2146, 1996, 2053, 1857, 1798], + yData3: [892, 658, 467, 758, 435], + sumData: [4374, 3877, 3833, 3749, 3352], + }, + month: { + xData: ["钢1线", "钢2线", "钢3线", "钢4线", "钢5线"], + yData1: [5789, 6432, 4679, 5456, 5004], + yData2: [8762, 9732, 8137, 8820, 9122], + yData3: [2468, 3120, 2782, 2395, 1924], + sumData: [17019, 19284, 15598, 16671, 16050], + }, + }; + const nameList = [ + { name: "天", ename: "day" }, + { name: "周", ename: "week" }, + { name: "月", ename: "month" }, + ]; + const [activeName, setActiveName] = useState(nameList[0].ename); + let chartData = (dataSource as { [key: string]: any })[activeName]; + const handleButtonChange = (activeName: string) => { + setActiveName(activeName); + }; + const options = getOptions(chartData); return (
- -
-
- +
+ {options && ( +
+ {} +
+ )} + {!options && ( +

+ 暂无数据 +

+ )}
); } diff --git a/src/page/LinePage/Left/SummaryBarChart/chart.config.ts b/src/page/LinePage/Left/SummaryBarChart/chart.config.ts index 3e093e7..d05d190 100644 --- a/src/page/LinePage/Left/SummaryBarChart/chart.config.ts +++ b/src/page/LinePage/Left/SummaryBarChart/chart.config.ts @@ -1,18 +1,21 @@ -import * as echarts from "echarts"; -export default function getOptions() { - const colors = ["#1A99FF", "#FFB70C", "#C69DFF", "#50F4E3", "#E02094"]; +export default function getOptions(chartData: any) { + if (Object.keys(chartData).length === 0) { + return null; + } + const colors = ["#2760FF", "#8167F6", "#5B9BFF", "#99D66C", "#FFD160"]; + let sum = chartData.sumData; return { color: colors, - grid: { top: 38, right: 12, bottom: 26, left: 48 }, + grid: { top: 48, right: 20, bottom: 5, left: 15, containLabel: true }, legend: { show: true, icon: "roundRect", top: 10, - right: 10, + right: 20, padding: 0, itemWidth: 10, itemHeight: 10, - itemGap: 3, + itemGap: 15, height: 10, textStyle: { color: "#DFF1FE", @@ -21,19 +24,10 @@ export default function getOptions() { }, 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(), + data: chartData.xData, axisLabel: { color: "#fff", - fontSize: 14, + fontSize: 16, }, axisTick: { show: false }, axisLine: { @@ -52,7 +46,7 @@ export default function getOptions() { type: "value", axisLabel: { color: "#fff", - fontSize: 14, + fontSize: 16, formatter: "{value}", }, axisLine: { @@ -70,73 +64,84 @@ export default function getOptions() { }, }, tooltip: { + show: false, trigger: "axis", axisPointer: { type: "shadow", }, className: "luoyang-chart-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: [ { + data: chartData.yData1, type: "bar", - barWidth: 8, - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: "#9DD5FF" }, - { offset: 1, color: "#1295FF" }, - ]), + stack: "a", + name: "磨边后", + barWidth: 14, + label: { + show: true, + position: "right", + color: "inherit", }, }, { + data: chartData.yData2, type: "bar", - barWidth: 8, - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: "#FFC844" }, - { offset: 1, color: "#FFB70C" }, - ]), + stack: "a", + name: "包装1", + label: { + show: true, + position: "right", + color: "inherit", }, }, { + data: chartData.yData3, type: "bar", - barWidth: 8, - itemStyle: { - color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ - { offset: 0, color: "#FF8BC3" }, - { offset: 1, color: "#EB46A1" }, - ]), + stack: "a", + name: "包装2", + label: { + show: true, + position: "right", + color: "inherit", }, }, + // { + // data: chartData.yData4, + // type: "bar", + // stack: "a", + // name: "镀膜", + // label: { + // show: true, + // position: "right", + // color: "inherit", + // }, + // }, + // { + // data: chartData.yData5, + // type: "bar", + // stack: "a", + // name: "包装", + // label: { + // show: true, + // position: "right", + // color: "inherit", + // }, + // }, { + data: [0, 0, 0, 0, 0], 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" }, - ]), + stack: "a", + name: "", + label: { + show: true, + position: "top", + color: "#fff", + formatter: function (params: any) { + return sum[params.dataIndex]; + }, }, }, ], diff --git a/src/page/LinePage/Left/SummaryBarChart/index.tsx b/src/page/LinePage/Left/SummaryBarChart/index.tsx deleted file mode 100644 index d019ede..0000000 --- a/src/page/LinePage/Left/SummaryBarChart/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import ReactECharts from "echarts-for-react"; -import getOptions from "./chart.config"; -function SummaryBarChart() { - return ; -} -export default SummaryBarChart; diff --git a/src/page/LinePage/Right/LineChart/chart.config.ts b/src/page/LinePage/Right/LineChart/chart.config.ts index 723cbe6..18bd639 100644 --- a/src/page/LinePage/Right/LineChart/chart.config.ts +++ b/src/page/LinePage/Right/LineChart/chart.config.ts @@ -1,9 +1,12 @@ import * as echarts from "echarts"; -export default function getOptions() { +export default function getOptions(tempData: any) { + if (Object.keys(tempData).length === 0) { + return null; + } const colors = ["#1A99FF", "#50F4E3"]; return { color: colors, - grid: { top: 38, right: 12, bottom: 26, left: 48 }, + grid: { top: 30, right: 12, bottom: 10, left: 10, containLabel: true }, legend: { show: true, icon: "roundRect", @@ -21,17 +24,18 @@ export default function getOptions() { }, 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(), + data: tempData.time, + // 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, @@ -76,19 +80,20 @@ export default function getOptions() { type: "line", symbol: "circle", symbolSize: 4, - data: [20, 32, 10, 34, 90, 30, 20], + data: tempData.input, }, { name: "产出", type: "line", symbol: "circle", symbolSize: 4, - data: [22, 82, 91, 34, 90, 33, 31], + data: tempData.output, }, ], tooltip: { trigger: "axis", className: "luoyang-chart-tooltip", + show: false, }, }; } diff --git a/src/page/LinePage/Right/LineChart/index.tsx b/src/page/LinePage/Right/LineChart/index.tsx deleted file mode 100644 index ff5631c..0000000 --- a/src/page/LinePage/Right/LineChart/index.tsx +++ /dev/null @@ -1,6 +0,0 @@ -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 index 9e6a3da..b4b3954 100644 --- a/src/page/LinePage/Right/RightDown.tsx +++ b/src/page/LinePage/Right/RightDown.tsx @@ -1,11 +1,122 @@ +import ReactECharts from "echarts-for-react"; import TitleBox from "../Component/TitleBox"; import SwitchButton from "../Component/SwitchButton"; -import LineChart from "./LineChart"; import ScrollBoard from "./../../Component/ScrollBoard"; import { useState } from "react"; +import getOptions from "./LineChart/chart.config"; function RightDown() { - const nameList = [{ name: "表单" }, { name: "折线" }]; - const [activeName, setActiveName] = useState(nameList[0].name); + // 假数据 + let tempData = [ + { + type: "day", + data: { + time: [ + "0:00", + "1:00", + "2:00", + "3:00", + "4:00", + "5:00", + "6:00", + "7:00", + "8:00", + "9:00", + "10:00", + "11:00", + "12:00", + "13:00", + "14:00", + "15:00", + "16:00", + "17:00", + "18:00", + "19:00", + "20:00", + "21:00", + "22:00", + "23:00", + ], + input: [ + 456, 425, 246, 424, 453, 466, 412, 434, 425, 418, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, + ], + output: [ + 432, 401, 232, 398, 421, 439, 378, 411, 400, 394, 0, 0, 0, 0, 0, 0, 0, + 0, 0, 0, 0, 0, 0, 0, + ], + }, + }, + { + type: "week", + data: { + time: [ + "2024/8/22", + "2024/8/23", + "2024/8/24", + "2024/8/25", + "2024/8/26", + "2024/8/27", + "2024/8/28", + ], + input: [9753, 10357, 11246, 10123, 9872, 9985, 10352], + output: [7925, 8216, 9091, 7847, 7589, 8126, 8112], + }, + }, + { + type: "month", + data: { + time: [ + "2024/8/1", + "2024/8/2", + "2024/8/3", + "2024/8/4", + "2024/8/5", + "2024/8/6", + "2024/8/7", + "2024/8/8", + "2024/8/9", + "2024/8/10", + "2024/8/11", + "2024/8/12", + "2024/8/13", + "2024/8/14", + "2024/8/15", + "2024/8/16", + "2024/8/17", + "2024/8/18", + "2024/8/19", + "2024/8/20", + "2024/8/21", + "2024/8/22", + "2024/8/23", + "2024/8/24", + "2024/8/25", + "2024/8/26", + "2024/8/27", + "2024/8/28", + "2024/8/29", + "2024/8/30", + "2024/8/31", + ], + input: [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 9813, 9753, + 10357, 11246, 10123, 9872, 9985, 10352, 4235, 0, 0, 0, + ], + output: [ + 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 7883, 7925, + 8216, 9091, 7847, 7589, 8126, 8112, 3962, 0, 0, 0, + ], + }, + }, + ]; + const nameList = [ + { name: "表单", ename: "table" }, + { name: "折线", ename: "chart" }, + ]; + const [activeName, setActiveName] = useState(nameList[0].ename); + const handleButtonChange = (activeName: string) => { + setActiveName(activeName); + }; const config = { header: ["时间", "投入数量", "产出数量"], headerHeight: 30, @@ -27,15 +138,72 @@ function RightDown() { ["行10列1", "行10列2", "行10列3"], ], }; + const config1 = { + header: ["时间", "投入数量", "产出数量"], + headerHeight: 30, + rowNum: 5, + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [120, 130, 130], + data: [], + }; + const config2 = { + header: ["时间", "投入数量", "产出数量"], + headerHeight: 30, + rowNum: 5, + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [120, 130, 130], + data: [], + }; + const config3 = { + header: ["时间", "投入数量", "产出数量"], + headerHeight: 30, + rowNum: 5, + headerBGC: "rgba(79, 114, 136, 0.3)", + oddRowBGC: "rgba(79, 114, 136, 0.3)", + evenRowBGC: "rgba(76, 97, 123, 0.1)", + columnWidth: [120, 130, 130], + data: [], + }; + let data1Lenght = tempData[0].data.input.length; + for (let i = 0; i < data1Lenght; i++) { + (config1.data as any).push([ + tempData[0].data.time ? tempData[0].data.time[i] : "-", + tempData[0].data.input ? tempData[0].data.input[i] : "-", + tempData[0].data.output ? tempData[0].data.output[i] : "-", + ]); + } + let data2Lenght = tempData[1].data.input.length; + for (let i = 0; i < data2Lenght; i++) { + (config2.data as any).push([ + tempData[1].data.time ? tempData[1].data.time[i] : "-", + tempData[1].data.input ? tempData[1].data.input[i] : "-", + tempData[1].data.output ? tempData[1].data.output[i] : "-", + ]); + } + let data3Lenght = tempData[0].data.input.length; + for (let i = 0; i < data3Lenght; i++) { + (config3.data as any).push([ + tempData[2].data.time ? tempData[2].data.time[i] : "-", + tempData[2].data.input ? tempData[2].data.input[i] : "-", + tempData[2].data.output ? tempData[2].data.output[i] : "-", + ]); + } + + const chartData1 = tempData[0].data; + const chartData2 = tempData[1].data; + const chartData3 = tempData[2].data; + const options1 = getOptions(chartData1); + const options2 = getOptions(chartData2); + const options3 = getOptions(chartData3); return (
- +
@@ -44,13 +212,25 @@ function RightDown() {
- {activeName === "表单" ? ( + {activeName === "table" ? ( + ) : options1 ? ( + ) : ( - +

+ 暂无数据 +

)}
@@ -59,13 +239,25 @@ function RightDown() {
- {activeName === "表单" ? ( + {activeName === "table" ? ( + ) : options2 ? ( + ) : ( - +

+ 暂无数据 +

)}
@@ -74,13 +266,25 @@ function RightDown() {
- {activeName === "表单" ? ( + {activeName === "table" ? ( + ) : options3 ? ( + ) : ( - +

+ 暂无数据 +

)}
diff --git a/src/page/LinePage/Right/RightUp.tsx b/src/page/LinePage/Right/RightUp.tsx index b56b579..9107cbc 100644 --- a/src/page/LinePage/Right/RightUp.tsx +++ b/src/page/LinePage/Right/RightUp.tsx @@ -2,24 +2,20 @@ import TitleBox from "../Component/TitleBox"; import ScrollBoard from "./../../Component/ScrollBoard"; function RightUp() { const config = { - header: ["产线", "上片数据量", "成品下片数量", "成品下片"], + header: ["序号", "产线", "上片数据量", "成品下片数量"], headerHeight: 32, rowNum: 5, + align: ["center", "left", "left", "left"], headerBGC: "rgba(79, 114, 136, 0.3)", oddRowBGC: "rgba(79, 114, 136, 0.3)", evenRowBGC: "rgba(76, 97, 123, 0.1)", - columnWidth: [73, 100, 117, 90], + columnWidth: [70, 90, 106, 114], data: [ - ["1", "行1列1", "行1列2", "行1列3"], - ["2", "行2列1", "行2列2", "行2列3"], - ["3", "行3列1", "行3列2", "行3列3"], - ["4", "行4列1", "行4列2", "行4列3"], - ["5", "行5列1", "行5列2", "行5列3"], - ["6", "行6列1", "行6列2", "行6列3"], - ["7", "行7列1", "行7列2", "行7列3"], - ["8", "行8列1", "行8列2", "行8列3"], - ["9", "行9列1", "行9列2", "行9列3"], - ["10", "行10列1", "行10列2", "行10列3"], + ["1", "钢1线", "82315", "64268"], + ["2", "钢2线", "78246", "61235"], + ["3", "钢3线", "79092", "63562"], + ["4", "钢4线", "84125", "66789"], + ["5", "钢5线", "85223", "68246"], ], }; return ( diff --git a/src/page/LinePage/assets/icon/g.png b/src/page/LinePage/assets/icon/g.png new file mode 100644 index 0000000..bf1b107 Binary files /dev/null and b/src/page/LinePage/assets/icon/g.png differ diff --git a/src/page/LinePage/assets/icon/r.png b/src/page/LinePage/assets/icon/r.png new file mode 100644 index 0000000..d11591e Binary files /dev/null and b/src/page/LinePage/assets/icon/r.png differ diff --git a/src/page/LinePage/assets/icon/y.png b/src/page/LinePage/assets/icon/y.png new file mode 100644 index 0000000..72c796a Binary files /dev/null and b/src/page/LinePage/assets/icon/y.png differ diff --git a/src/page/LinePage/assets/svg/alarmTip.svg b/src/page/LinePage/assets/svg/alarmTip.svg new file mode 100644 index 0000000..265f3f0 --- /dev/null +++ b/src/page/LinePage/assets/svg/alarmTip.svg @@ -0,0 +1,23 @@ + + + 矩形备份 16 + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/page/LinePage/index.css b/src/page/LinePage/index.css index 9a18902..62a62e2 100644 --- a/src/page/LinePage/index.css +++ b/src/page/LinePage/index.css @@ -64,6 +64,7 @@ background: url(../../../public/png/rect/lp_center_up.png) no-repeat; background-size: 100% 100%; background-position: 0 0; + position: relative; } .center_down { width: 1041px; @@ -168,6 +169,7 @@ height: 185px; /* padding-bottom: 5px; */ } +/* 滚动表格部分 */ .dv-scroll-board .header .header-item, .dv-scroll-board .rows .ceil { border-right: 1px solid #0d1728; @@ -177,7 +179,7 @@ border-right: none; border: none; } - +/* chart图部分 */ .luoyang-chart-tooltip { background: #0a2b4f77 !important; border: none !important; @@ -187,3 +189,76 @@ .luoyang-chart-tooltip * { color: #fff !important; } +/* 三维页面部分 */ +.center_up .model_name { + position: absolute; + left: 0px; + top: 0px; + z-index: 1000; +} +.center_up .model_info { + position: absolute; + left: 100px; + bottom: 0px; + z-index: 1000; + width: 841px; + height: 62px; + background: url(/public/png/lp/line_part.png) 100% no-repeat; + background-size: 100% 100%; +} +.center_up .model_info .reset_btn { + position: absolute; + top: 20px; + left: 40px; + width: 140px; + height: 40px; + cursor: pointer; +} +.center_up .model_info .title { + display: inline-block; + width: 361px; + text-align: center; + font-size: 32px; + color: #fff; + letter-spacing: 5px; + position: absolute; + left: 241px; + bottom: 10px; +} +.center_up .eq_detail_info { + position: absolute; + right: 0px; + bottom: 0px; + z-index: 1002; + width: 240px; + height: 110px; + background: url(/public/png/lp/eq_msg_detail.png) 100% no-repeat; + background-size: 100% 100%; + color: #fff; + padding: 15px 0 0 15px; +} +.center_up .eq_detail_info .left_name { + display: inline-block; + width: 95px; + height: 28px; + text-align: right; + font-size: 18px; +} +.center_up .eq_detail_info .right_value { + display: inline-block; + height: 28px; + font-size: 18px; +} +.center_up .eq_info { + position: absolute; + z-index: 1002; + background: url(/public/png/lp/eq_msg_always.png) 100% no-repeat; + background-size: 100% 100%; + color: #fff; + padding: 10px 15px; +} +.center_up .eq_info .eq_info_inner { + height: 20px; + font-size: 18px; + white-space: nowrap; +}