删除多余代码
This commit is contained in:
parent
1812afd680
commit
84b34d7b79
@ -1,12 +1,10 @@
|
||||
import React, { useEffect } from "react";
|
||||
import { useEffect } from "react";
|
||||
import "./App.css";
|
||||
import { useAppSelector } from "./store/hooks";
|
||||
import { createHashRouter, RouterProvider } from "react-router-dom";
|
||||
|
||||
import ErrorPage from "./page/ErrorPage";
|
||||
import { MyObservable } from "./context/MyObservable";
|
||||
import { Observable } from "@babylonjs/core";
|
||||
import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
|
||||
import LDPage from "./page/LDPage";
|
||||
import LinePageOneOne from "./page/LinePage1-1";
|
||||
import LinePageOneTwo from "./page/LinePage1-2";
|
||||
@ -22,8 +20,6 @@ import LinePageFiveTwo from "./page/LinePage5-2";
|
||||
const onGlassObservable = new Observable();
|
||||
|
||||
function App() {
|
||||
const thisLineGlassStatus = useAppSelector(selectGlassStatus);
|
||||
onGlassObservable.notifyObservers(thisLineGlassStatus);
|
||||
|
||||
const router = createHashRouter([
|
||||
{
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,627 +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 EqInfoData from "./EqInfoData";
|
||||
import AlarmTipGreen from "./../page/LinePage/assets/icon/g.png";
|
||||
import AlarmTipYellow from "./../page/LinePage/assets/icon/y.png";
|
||||
import AlarmTipRed from "./../page/LinePage/assets/icon/r.png";
|
||||
const lineNameNo = ["一","二","三","四","五"]
|
||||
|
||||
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<number>;
|
||||
}
|
||||
interface EqInfoDataInterface {
|
||||
[key: string]: Array<EqInfoInterface>;
|
||||
}
|
||||
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) {
|
||||
console.log("modelPath:;;;;;;", modelPath);
|
||||
// const EquStatus = useAppSelector(selectEquStatus);
|
||||
const canvasRef = useRef(null);
|
||||
const resetRef = useRef<(() => void) | null>(null);
|
||||
// onEquObservable.notifyObservers(EquStatus);
|
||||
const [selectedMeshName, setSelectedMeshName] = useState<string | null>(null);
|
||||
const [selectedMeshObj, setSelectedMeshObj] = useState({
|
||||
equipment: "",
|
||||
alarm: false,
|
||||
online: true,
|
||||
});
|
||||
const [showInfo, setShowInfo] = useState(true);
|
||||
|
||||
// 使用 useRef 来存储当前加载的模型引用
|
||||
const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]);
|
||||
|
||||
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,
|
||||
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)
|
||||
);
|
||||
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("铺纸") ||
|
||||
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) => {
|
||||
console.log('_pickResult=====',_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);
|
||||
eqStatusList[modelPath].map((item: any) => {
|
||||
if (item.equipment === MeshName1) {
|
||||
setSelectedMeshObj(item);
|
||||
}
|
||||
});
|
||||
};
|
||||
});
|
||||
} 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;
|
||||
setShowInfo(true);
|
||||
setSelectedMeshName(null);
|
||||
}
|
||||
// 外部初始位置按钮
|
||||
resetRef.current = reset;
|
||||
|
||||
let resetCamera = setTimeout(reset, 15000);
|
||||
scene.onPointerObservable.add((pointerInfo) => {
|
||||
switch (pointerInfo.type) {
|
||||
case BABYLON.PointerEventTypes.POINTERMOVE:
|
||||
clearTimeout(resetCamera);
|
||||
resetCamera = setTimeout(reset, 15000);
|
||||
setShowInfo(false);
|
||||
}
|
||||
});
|
||||
return scene;
|
||||
};
|
||||
|
||||
// call the createScene function
|
||||
const scene = createScene();
|
||||
|
||||
// run the render loop
|
||||
scene.then(
|
||||
(scene) => {
|
||||
console.log("createScene被调用了=====", scene);
|
||||
engine.runRenderLoop(function () {
|
||||
scene.render();
|
||||
});
|
||||
},
|
||||
(reason) => {
|
||||
console.log("reason=============", reason);
|
||||
}
|
||||
);
|
||||
|
||||
// Resize
|
||||
window.addEventListener("resize", function () {
|
||||
engine.resize();
|
||||
});
|
||||
// 组件卸载时的清理逻辑
|
||||
return () => {
|
||||
// 清理场景和引擎资源
|
||||
engine.dispose();
|
||||
};
|
||||
}, [modelPath]);
|
||||
const resetModel = () => {
|
||||
//模型初始位置
|
||||
console.log("回到初始位置");
|
||||
if (resetRef.current) {
|
||||
resetRef.current();
|
||||
}
|
||||
};
|
||||
return (
|
||||
<div style={myStyle}>
|
||||
{/* <h2 className="model_name">当前选择: {selectedMeshName}</h2> */}
|
||||
<div className="model_info">
|
||||
<span className="reset_btn" onClick={resetModel}></span>
|
||||
<span className="title">
|
||||
第{lineNameNo[Number(modelPath.slice(-3,-2))-1]}产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"}
|
||||
</span>
|
||||
</div>
|
||||
{selectedMeshName && (
|
||||
<div className="eq_detail_info">
|
||||
<div>
|
||||
<span className="left_name">设备名称：</span>
|
||||
<span className="right_value">{selectedMeshObj.equipment}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="left_name">报警状态：</span>
|
||||
<span className="right_value">
|
||||
{selectedMeshObj.alarm ? (
|
||||
<>
|
||||
<img
|
||||
src={AlarmTipRed}
|
||||
alt=""
|
||||
width={17}
|
||||
style={{ position: "relative", top: "2px", marginRight: 5 }}
|
||||
/>
|
||||
<span>报警</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<img
|
||||
src={AlarmTipGreen}
|
||||
alt=""
|
||||
width={17}
|
||||
style={{ position: "relative", top: "2px", marginRight: 5 }}
|
||||
/>
|
||||
<span>正常</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<span className="left_name">在线状态：</span>
|
||||
<span className="right_value">
|
||||
{selectedMeshObj.online ? (
|
||||
<>
|
||||
<img
|
||||
src={AlarmTipGreen}
|
||||
alt=""
|
||||
width={17}
|
||||
style={{ position: "relative", top: "2px", marginRight: 5 }}
|
||||
/>
|
||||
<span>在线</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<img
|
||||
src={AlarmTipYellow}
|
||||
alt=""
|
||||
width={17}
|
||||
style={{ position: "relative", top: "2px", marginRight: 5 }}
|
||||
/>
|
||||
<span>离线</span>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{showInfo &&
|
||||
eqInfoData[modelPath] &&
|
||||
eqInfoData[modelPath].map((item, index) => {
|
||||
return (
|
||||
<div
|
||||
className="eq_info"
|
||||
key={index}
|
||||
style={{ left: item.position[0], top: item.position[1] }}
|
||||
>
|
||||
<div className="eq_info_inner" style={{ color: "#00FFF0" }}>
|
||||
{item.name}
|
||||
</div>
|
||||
{item.data.map((info, index) => {
|
||||
return (
|
||||
<div className="eq_info_inner">
|
||||
{info.name}：{info.value}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
|
||||
<canvas ref={canvasRef} style={myStyle} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MybabylonJS;
|
||||
@ -5,7 +5,7 @@ import {selectLine1Before} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine1Before);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
header: ["序号", "工段名", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
|
||||
@ -5,7 +5,7 @@ import {selectLine1After} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine1After);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
header: ["序号", "工段名", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
|
||||
@ -5,7 +5,7 @@ import {selectLine2Before} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine2Before);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
header: ["序号", "工段名", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
|
||||
@ -5,7 +5,7 @@ import {selectLine2After} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine2After);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
header: ["序号", "工段名", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
|
||||
@ -5,7 +5,7 @@ import {selectLine3Before} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine3Before);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
header: ["序号", "工段名", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
|
||||
@ -5,7 +5,7 @@ import {selectLine3After} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine3After);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
header: ["序号", "工段名", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
|
||||
@ -5,7 +5,7 @@ import {selectLine4Before} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine4Before);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
header: ["序号", "工段名", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
|
||||
@ -5,7 +5,7 @@ import {selectLine4After} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine4After);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
header: ["序号", "工段名", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
|
||||
@ -5,7 +5,7 @@ import {selectLine5Before} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine5Before);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
header: ["序号", "工段名", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
|
||||
@ -5,7 +5,7 @@ import {selectLine5After} from "./../../../store/LinePageSlice"
|
||||
function RightUp() {
|
||||
const data = useAppSelector(selectLine5After);
|
||||
const config = {
|
||||
header: ["序号", "产线", "上片数据量", "成品下片数量"],
|
||||
header: ["序号", "工段名", "上片数据量", "成品下片数量"],
|
||||
headerHeight: 32,
|
||||
rowNum: 5,
|
||||
align: ["center", "left", "left", "left"],
|
||||
|
||||
@ -1,31 +0,0 @@
|
||||
import {createSlice} from "@reduxjs/toolkit";
|
||||
import type {RootState} from "./store";
|
||||
|
||||
const initialState = {
|
||||
Locale: "zh-CN",
|
||||
text_1: "text_1",
|
||||
text_34: "text_34"
|
||||
}
|
||||
|
||||
export const ChangeLangAndCss = createSlice({
|
||||
name: 'ChangeCss',
|
||||
initialState,
|
||||
reducers: {
|
||||
UpdateChangeLangAndCss: (state) => {
|
||||
if (state.Locale == "zh-CN") {
|
||||
state.Locale = "en-US";
|
||||
state.text_1 = "text_1_EN";
|
||||
state.text_34 = "text_34_EN"
|
||||
} else {
|
||||
state.Locale = "zh-CN";
|
||||
state.text_1 = "text_1";
|
||||
state.text_34 = "text_34"
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const {UpdateChangeLangAndCss} = ChangeLangAndCss.actions;
|
||||
export const selectChangeLangAndCss = (state: RootState) => state.ChangeCss;
|
||||
|
||||
export default ChangeLangAndCss.reducer;
|
||||
@ -1,25 +0,0 @@
|
||||
import {createSlice} from "@reduxjs/toolkit";
|
||||
import type {RootState} from "./store";
|
||||
|
||||
const initialState = {
|
||||
switchState: true,
|
||||
}
|
||||
export const ChangeSwitchState = createSlice({
|
||||
name: 'ChangeSwitchState',
|
||||
initialState,
|
||||
reducers: {
|
||||
ChangeSwitch: (state) => {
|
||||
if (state.switchState) {
|
||||
state.switchState = false;
|
||||
} else {
|
||||
state.switchState = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const {ChangeSwitch} = ChangeSwitchState.actions;
|
||||
|
||||
export const selectSwitchState = (state: RootState) => state.ChangeSwitchState.switchState;
|
||||
|
||||
export default ChangeSwitchState.reducer;
|
||||
@ -1,191 +0,0 @@
|
||||
import {createSlice} from "@reduxjs/toolkit";
|
||||
import type {RootState} from "./store";
|
||||
|
||||
export interface EquStatusInterface {
|
||||
CleanAfterEdge1_1: number
|
||||
CleanAfterEdge1_2: number
|
||||
CleanAfterEdge2_1: number
|
||||
CleanAfterEdge2_2: number
|
||||
CleanAfterEdge3_1: number
|
||||
CleanAfterEdge3_2: number
|
||||
CleanAfterEdge4_1: number
|
||||
CleanAfterEdge4_2: number
|
||||
CleanAfterTemper1_1: number
|
||||
CleanAfterTemper2_1: number
|
||||
CleanAfterTemper3_1: number
|
||||
CleanAfterTemper4_1: number
|
||||
CleanBeforCoat1_1: number
|
||||
CleanBeforCoat1_2: number
|
||||
CleanBeforCoat4_1: number
|
||||
CleanBeforCoat4_2: number
|
||||
Edge1_1: number
|
||||
Edge1_2: number
|
||||
Edge2_1: number
|
||||
Edge2_2: number
|
||||
Edge3_1: number
|
||||
Edge3_2: number
|
||||
Edge4_1: number
|
||||
Edge4_2: number
|
||||
FirstCoat1_1: number
|
||||
FirstCoat1_2: number
|
||||
FirstCoat2_1: number
|
||||
FirstCoat2_2: number
|
||||
FirstCoat3_1: number
|
||||
FirstCoat3_2: number
|
||||
FirstCoat4_1: number
|
||||
FirstCoat4_2: number
|
||||
Punch1_1: number
|
||||
Punch1_2: number
|
||||
Punch4_1: number
|
||||
Punch4_2: number
|
||||
SecondCoat1_1: number
|
||||
SecondCoat1_2: number
|
||||
SecondCoat2_1: number
|
||||
SecondCoat2_2: number
|
||||
SecondCoat3_1: number
|
||||
SecondCoat3_2: number
|
||||
SecondCoat4_1: number
|
||||
SecondCoat4_2: number
|
||||
Temper1_1: number
|
||||
Temper2_1: number
|
||||
Temper3_1: number
|
||||
Temper4_1: number
|
||||
Unload1_1: number
|
||||
Unload1_2: number
|
||||
Unload2_1: number
|
||||
Unload2_2: number
|
||||
Unload3_1: number
|
||||
Unload3_2: number
|
||||
Unload4_1: number
|
||||
Unload4_2: number
|
||||
}
|
||||
|
||||
const initialState: EquStatusInterface = {
|
||||
CleanAfterEdge1_1: 0,
|
||||
CleanAfterEdge1_2: 0,
|
||||
CleanAfterEdge2_1: 0,
|
||||
CleanAfterEdge2_2: 0,
|
||||
CleanAfterEdge3_1: 0,
|
||||
CleanAfterEdge3_2: 0,
|
||||
CleanAfterEdge4_1: 0,
|
||||
CleanAfterEdge4_2: 0,
|
||||
CleanAfterTemper1_1: 0,
|
||||
CleanAfterTemper2_1: 0,
|
||||
CleanAfterTemper3_1: 0,
|
||||
CleanAfterTemper4_1: 0,
|
||||
CleanBeforCoat1_1: 0,
|
||||
CleanBeforCoat1_2: 0,
|
||||
CleanBeforCoat4_1: 0,
|
||||
CleanBeforCoat4_2: 0,
|
||||
Edge1_1: 0,
|
||||
Edge1_2: 0,
|
||||
Edge2_1: 0,
|
||||
Edge2_2: 0,
|
||||
Edge3_1: 0,
|
||||
Edge3_2: 0,
|
||||
Edge4_1: 0,
|
||||
Edge4_2: 0,
|
||||
FirstCoat1_1: 0,
|
||||
FirstCoat1_2: 0,
|
||||
FirstCoat2_1: 0,
|
||||
FirstCoat2_2: 0,
|
||||
FirstCoat3_1: 0,
|
||||
FirstCoat3_2: 0,
|
||||
FirstCoat4_1: 0,
|
||||
FirstCoat4_2: 0,
|
||||
Punch1_1: 0,
|
||||
Punch1_2: 0,
|
||||
Punch4_1: 0,
|
||||
Punch4_2: 0,
|
||||
SecondCoat1_1: 0,
|
||||
SecondCoat1_2: 0,
|
||||
SecondCoat2_1: 0,
|
||||
SecondCoat2_2: 0,
|
||||
SecondCoat3_1: 0,
|
||||
SecondCoat3_2: 0,
|
||||
SecondCoat4_1: 0,
|
||||
SecondCoat4_2: 0,
|
||||
Temper1_1: 0,
|
||||
Temper2_1: 0,
|
||||
Temper3_1: 0,
|
||||
Temper4_1: 0,
|
||||
Unload1_1: 0,
|
||||
Unload1_2: 0,
|
||||
Unload2_1: 0,
|
||||
Unload2_2: 0,
|
||||
Unload3_1: 0,
|
||||
Unload3_2: 0,
|
||||
Unload4_1: 0,
|
||||
Unload4_2: 0
|
||||
}
|
||||
export const EquStatusEntity = createSlice({
|
||||
name: 'EquStatusEntity',
|
||||
initialState,
|
||||
reducers: {
|
||||
UpdateEquStatus: (state, action) => {
|
||||
const JsonData = action.payload;
|
||||
state.CleanAfterEdge1_1 = JsonData['CleanAfterEdge1-1'].status;
|
||||
state.CleanAfterEdge1_2 = JsonData['CleanAfterEdge1-2'].status;
|
||||
state.CleanAfterEdge2_1 = JsonData['CleanAfterEdge2-1'].status;
|
||||
state.CleanAfterEdge2_2 = JsonData['CleanAfterEdge2-2'].status;
|
||||
state.CleanAfterEdge3_1 = JsonData['CleanAfterEdge3-1'].status;
|
||||
state.CleanAfterEdge3_2 = JsonData['CleanAfterEdge3-2'].status;
|
||||
state.CleanAfterEdge4_1 = JsonData['CleanAfterEdge4-1'].status;
|
||||
state.CleanAfterEdge4_2 = JsonData['CleanAfterEdge4-2'].status;
|
||||
state.CleanAfterTemper1_1 = JsonData['CleanAfterTemper1-1'].status;
|
||||
state.CleanAfterTemper2_1 = JsonData['CleanAfterTemper2-1'].status;
|
||||
state.CleanAfterTemper3_1 = JsonData['CleanAfterTemper3-1'].status;
|
||||
state.CleanAfterTemper4_1 = JsonData['CleanAfterTemper4-1'].status;
|
||||
state.CleanBeforCoat1_1 = JsonData['CleanBeforCoat1-1'].status;
|
||||
state.CleanBeforCoat1_2 = JsonData['CleanBeforCoat1-2'].status;
|
||||
state.CleanBeforCoat4_1 = JsonData['CleanBeforCoat4-1'].status;
|
||||
state.CleanBeforCoat4_2 = JsonData['CleanBeforCoat4-2'].status;
|
||||
state.Edge1_1 = JsonData['Edge1-1'].status;
|
||||
state.Edge1_2 = JsonData['Edge1-2'].status;
|
||||
state.Edge2_1 = JsonData['Edge2-1'].status;
|
||||
state.Edge2_2 = JsonData['Edge2-2'].status;
|
||||
state.Edge3_1 = JsonData['Edge3-1'].status;
|
||||
state.Edge3_2 = JsonData['Edge3-2'].status;
|
||||
state.Edge4_1 = JsonData['Edge4-1'].status;
|
||||
state.Edge4_2 = JsonData['Edge4-2'].status;
|
||||
state.FirstCoat1_1 = JsonData['FirstCoat1-1'].status;
|
||||
state.FirstCoat1_2 = JsonData['FirstCoat1-2'].status;
|
||||
state.FirstCoat2_1 = JsonData['FirstCoat2-1'].status;
|
||||
state.FirstCoat2_2 = JsonData['FirstCoat2-2'].status;
|
||||
state.FirstCoat3_1 = JsonData['FirstCoat3-1'].status;
|
||||
state.FirstCoat3_2 = JsonData['FirstCoat3-2'].status;
|
||||
state.FirstCoat4_1 = JsonData['FirstCoat4-1'].status;
|
||||
state.FirstCoat4_2 = JsonData['FirstCoat4-2'].status;
|
||||
state.Punch1_1 = JsonData['Punch1-1'].status;
|
||||
state.Punch1_2 = JsonData['Punch1-2'].status;
|
||||
state.Punch4_1 = JsonData['Punch4-1'].status;
|
||||
state.Punch4_2 = JsonData['Punch4-2'].status;
|
||||
state.SecondCoat1_1 = JsonData['SecondCoat1-1'].status;
|
||||
state.SecondCoat1_2 = JsonData['SecondCoat1-2'].status;
|
||||
state.SecondCoat2_1 = JsonData['SecondCoat2-1'].status;
|
||||
state.SecondCoat2_2 = JsonData['SecondCoat2-2'].status;
|
||||
state.SecondCoat3_1 = JsonData['SecondCoat3-1'].status;
|
||||
state.SecondCoat3_2 = JsonData['SecondCoat3-2'].status;
|
||||
state.SecondCoat4_1 = JsonData['SecondCoat4-1'].status;
|
||||
state.SecondCoat4_2 = JsonData['SecondCoat4-2'].status;
|
||||
state.Temper1_1 = JsonData['Temper1-1'].status;
|
||||
state.Temper2_1 = JsonData['Temper2-1'].status;
|
||||
state.Temper3_1 = JsonData['Temper3-1'].status;
|
||||
state.Temper4_1 = JsonData['Temper4-1'].status;
|
||||
state.Unload1_1 = JsonData['Unload1-1'].status;
|
||||
state.Unload1_2 = JsonData['Unload1-2'].status;
|
||||
state.Unload2_1 = JsonData['Unload2-1'].status;
|
||||
state.Unload2_2 = JsonData['Unload2-2'].status;
|
||||
state.Unload3_1 = JsonData['Unload3-1'].status;
|
||||
state.Unload3_2 = JsonData['Unload3-2'].status;
|
||||
state.Unload4_1 = JsonData['Unload4-1'].status;
|
||||
state.Unload4_2 = JsonData['Unload4-2'].status;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const {UpdateEquStatus} = EquStatusEntity.actions;
|
||||
|
||||
export const selectEquStatus = (state: RootState) => state.EquStatusEntity;
|
||||
|
||||
export default EquStatusEntity.reducer;
|
||||
@ -1,93 +0,0 @@
|
||||
import {createSlice} from "@reduxjs/toolkit";
|
||||
import type {RootState} from "./store";
|
||||
|
||||
export interface Alarm {
|
||||
alarmContent: string;
|
||||
equName: string;
|
||||
alarmCode: any;
|
||||
alarmEquipmentId: number;
|
||||
alarmValue: string;
|
||||
alarmId: number;
|
||||
alarmSource: string;
|
||||
}
|
||||
|
||||
export interface TickCount {
|
||||
equName: string;
|
||||
tickCount: number;
|
||||
}
|
||||
|
||||
export interface Product {
|
||||
externalCode: number,
|
||||
equipmentCode: number,
|
||||
outputNum: number,
|
||||
lineName: string,
|
||||
equipmentId: number,
|
||||
sectionName: string,
|
||||
inputNum: number,
|
||||
recordTime: number,
|
||||
equipmentName: string
|
||||
}
|
||||
|
||||
export interface Oee {
|
||||
workRate: number;
|
||||
equName: string;
|
||||
downRate: number;
|
||||
stopRate: number;
|
||||
}
|
||||
|
||||
export interface EquipmentLine {
|
||||
equipmentAlarm: Array<Alarm>,
|
||||
equipmentTickCounts: Array<TickCount>,
|
||||
equipmentOees: Array<Oee>,
|
||||
equipmentProductDays: Array<Product>,
|
||||
equipmentProductWeeks: Array<Product>,
|
||||
equipmentProductMonths: Array<Product>,
|
||||
equipmentProductAll: Array<Product>,
|
||||
}
|
||||
|
||||
export interface EquipmentMonitorEntityInterface {
|
||||
Line_1: EquipmentLine,
|
||||
Line_2: EquipmentLine,
|
||||
Line_3: EquipmentLine,
|
||||
Line_4: EquipmentLine
|
||||
}
|
||||
|
||||
const emptyEquipmentLine: EquipmentLine = {
|
||||
equipmentAlarm: [],
|
||||
equipmentTickCounts: [],
|
||||
equipmentOees: [],
|
||||
equipmentProductDays: [],
|
||||
equipmentProductWeeks: [],
|
||||
equipmentProductMonths: [],
|
||||
equipmentProductAll: [],
|
||||
}
|
||||
|
||||
const initialState: EquipmentMonitorEntityInterface = {
|
||||
Line_1: emptyEquipmentLine,
|
||||
Line_2: emptyEquipmentLine,
|
||||
Line_3: emptyEquipmentLine,
|
||||
Line_4: emptyEquipmentLine
|
||||
}
|
||||
|
||||
export const EquipmentMonitorEntity = createSlice({
|
||||
name: 'EquipmentMonitorEntity',
|
||||
initialState,
|
||||
reducers: {
|
||||
UpdateEquipmentMonitorEntity: (state, action) => {
|
||||
if (action.payload.toString().includes('客户端')) {
|
||||
} else {
|
||||
const BasicEquipmentMonitorEntity = JSON.parse(action.payload);
|
||||
state.Line_1 = BasicEquipmentMonitorEntity.Line_1;
|
||||
state.Line_2 = BasicEquipmentMonitorEntity.Line_2;
|
||||
state.Line_3 = BasicEquipmentMonitorEntity.Line_3;
|
||||
state.Line_4 = BasicEquipmentMonitorEntity.Line_4;
|
||||
}
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
export const {UpdateEquipmentMonitorEntity} = EquipmentMonitorEntity.actions;
|
||||
|
||||
export const selectAllLineEquipmentData = (state: RootState) => state.EquipmentMonitorEntity;
|
||||
|
||||
export default EquipmentMonitorEntity.reducer;
|
||||
@ -1,214 +0,0 @@
|
||||
import {createSlice} from "@reduxjs/toolkit";
|
||||
import type {RootState} from "./store";
|
||||
|
||||
export interface alarm {
|
||||
alarmContent: string;
|
||||
alarmTime: string;
|
||||
alarmCode: string;
|
||||
}
|
||||
|
||||
export interface ProductionDet {
|
||||
lineName: string;
|
||||
inputNum: number;
|
||||
outputNum: number;
|
||||
passRate: number;
|
||||
}
|
||||
|
||||
export interface ProductionRate {
|
||||
lineName: string;
|
||||
lineId: number;
|
||||
lineExCode: string;
|
||||
passRate: number;
|
||||
time: number;
|
||||
}
|
||||
|
||||
export interface RateLine {
|
||||
Line_1: Array<ProductionRate>,
|
||||
Line_2: Array<ProductionRate>,
|
||||
Line_3: Array<ProductionRate>,
|
||||
Line_4: Array<ProductionRate>,
|
||||
}
|
||||
|
||||
export interface SingleGlassStatus {
|
||||
lineViewCode: string,
|
||||
status: number
|
||||
}
|
||||
|
||||
export interface GlassStatus {
|
||||
LINE_1_1: number,
|
||||
LINE_1_2U: number,
|
||||
LINE_1_2D: number,
|
||||
LINE_1_3: number,
|
||||
LINE_1_4: number,
|
||||
LINE_2_1: number,
|
||||
LINE_2_2U: number,
|
||||
LINE_2_2D: number,
|
||||
LINE_2_3: number,
|
||||
LINE_2_4: number,
|
||||
LINE_3_1: number,
|
||||
LINE_3_2U: number,
|
||||
LINE_3_2D: number,
|
||||
LINE_3_3: number,
|
||||
LINE_3_4: number,
|
||||
LINE_4_1: number,
|
||||
LINE_4_2U: number,
|
||||
LINE_4_2D: number,
|
||||
LINE_4_3: number,
|
||||
LINE_4_4: number,
|
||||
}
|
||||
|
||||
const initLineGlassStatus: GlassStatus = {
|
||||
LINE_1_1: 1,
|
||||
LINE_1_2U: 1,
|
||||
LINE_1_2D: 1,
|
||||
LINE_1_3: 1,
|
||||
LINE_1_4: 1,
|
||||
LINE_2_1: 1,
|
||||
LINE_2_2U: 1,
|
||||
LINE_2_2D: 1,
|
||||
LINE_2_3: 1,
|
||||
LINE_2_4: 1,
|
||||
LINE_3_1: 1,
|
||||
LINE_3_2U: 1,
|
||||
LINE_3_2D: 1,
|
||||
LINE_3_3: 1,
|
||||
LINE_3_4: 1,
|
||||
LINE_4_1: 1,
|
||||
LINE_4_2U: 1,
|
||||
LINE_4_2D: 1,
|
||||
LINE_4_3: 1,
|
||||
LINE_4_4: 1,
|
||||
}
|
||||
|
||||
export interface ProductionMonitoringEntityInterface {
|
||||
sumNumber: number;
|
||||
alarms: Array<alarm>;
|
||||
sumProductionDets: Array<ProductionDet>;
|
||||
todayProductionDets: Array<ProductionDet>;
|
||||
weekProductionDets: Array<ProductionDet>;
|
||||
monthProductionDets: Array<ProductionDet>;
|
||||
todayProductionRates: RateLine,
|
||||
weekProductionRates: RateLine,
|
||||
monthProductionRates: RateLine,
|
||||
lineGlassStatus: GlassStatus,
|
||||
}
|
||||
|
||||
const emptyProductionRates: RateLine = {
|
||||
Line_4: [
|
||||
{
|
||||
"lineId": 1,
|
||||
"lineName": "产线1",
|
||||
"lineExCode": "Line_1",
|
||||
"passRate": 101.88,
|
||||
"time": 1676840400000
|
||||
},
|
||||
],
|
||||
Line_3: [
|
||||
{
|
||||
"lineId": 1619974755856867329,
|
||||
"lineName": "产线3",
|
||||
"lineExCode": "Line_3",
|
||||
"passRate": 32.04,
|
||||
"time": 1676822400000
|
||||
}
|
||||
],
|
||||
Line_2: [
|
||||
{
|
||||
"lineId": 1619974755856867329,
|
||||
"lineName": "产线3",
|
||||
"lineExCode": "Line_3",
|
||||
"passRate": 32.04,
|
||||
"time": 1676822400000
|
||||
}
|
||||
],
|
||||
Line_1: [
|
||||
{
|
||||
"lineId": 1619974755856867329,
|
||||
"lineName": "产线3",
|
||||
"lineExCode": "Line_3",
|
||||
"passRate": 32.04,
|
||||
"time": 1676822400000
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
const initialState: ProductionMonitoringEntityInterface = {
|
||||
sumNumber: 0,
|
||||
alarms: [],
|
||||
sumProductionDets: [],
|
||||
todayProductionDets: [],
|
||||
weekProductionDets: [],
|
||||
monthProductionDets: [],
|
||||
todayProductionRates: emptyProductionRates,
|
||||
weekProductionRates: emptyProductionRates,
|
||||
monthProductionRates: emptyProductionRates,
|
||||
lineGlassStatus: initLineGlassStatus,
|
||||
}
|
||||
|
||||
export const ProductionMonitoringEntity = createSlice({
|
||||
name: 'ProductionMonitoringEntity',
|
||||
initialState,
|
||||
reducers: {
|
||||
UpdateProductionMonitoringEntity: (state, action) => {
|
||||
if (action.payload.toString().includes('客户端')) {
|
||||
} else {
|
||||
const ProductionMonitoringEntityData = JSON.parse(action.payload);
|
||||
|
||||
//sumNumber
|
||||
state.sumNumber = ProductionMonitoringEntityData.alarms.length;
|
||||
|
||||
//alarms
|
||||
state.alarms = [];
|
||||
for (let i = 0; i < 6; i++) {
|
||||
state.alarms.push({
|
||||
alarmContent: ProductionMonitoringEntityData.alarms[i].alarmContent,
|
||||
alarmCode: ProductionMonitoringEntityData.alarms[i].alarmCode,
|
||||
alarmTime: new Date(ProductionMonitoringEntityData.alarms[i].alarmTime).toLocaleDateString(),
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
//sumProductionDets
|
||||
state.sumProductionDets = ProductionMonitoringEntityData.sumProductionDets;
|
||||
|
||||
//todayProductionDets
|
||||
state.todayProductionDets = ProductionMonitoringEntityData.todayProductionDets;
|
||||
|
||||
|
||||
//weekProductionDets
|
||||
state.weekProductionDets = ProductionMonitoringEntityData.weekProductionDets;
|
||||
|
||||
//monthProductionDets
|
||||
state.monthProductionDets = ProductionMonitoringEntityData.monthProductionDets;
|
||||
|
||||
//todayProductionRates
|
||||
state.todayProductionRates = ProductionMonitoringEntityData.todayProductionRates;
|
||||
|
||||
//weekProductionRates
|
||||
state.weekProductionRates = ProductionMonitoringEntityData.weekProductionRates;
|
||||
|
||||
//monthProductionRates
|
||||
state.monthProductionRates = ProductionMonitoringEntityData.monthProductionRates;
|
||||
|
||||
}
|
||||
},
|
||||
UpdateGlassStatus: (state, action) => {
|
||||
//lineGlassStatus
|
||||
state.lineGlassStatus = action.payload;
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const {UpdateProductionMonitoringEntity, UpdateGlassStatus} = ProductionMonitoringEntity.actions;
|
||||
|
||||
export const selectAlarms = (state: RootState) => state.ProductionMonitoringEntity.alarms;
|
||||
export const selectSumNumber = (state: RootState) => state.ProductionMonitoringEntity.sumNumber;
|
||||
export const selectSumProductionDets = (state: RootState) => state.ProductionMonitoringEntity.sumProductionDets;
|
||||
export const selectTodayProductionDets = (state: RootState) => state.ProductionMonitoringEntity.todayProductionDets;
|
||||
export const selectWeekProductionDets = (state: RootState) => state.ProductionMonitoringEntity.weekProductionDets;
|
||||
export const selectMonthProductionDets = (state: RootState) => state.ProductionMonitoringEntity.monthProductionDets;
|
||||
export const selectTodayProductionRates = (state: RootState) => state.ProductionMonitoringEntity.todayProductionRates;
|
||||
export const selectWeekProductionRates = (state: RootState) => state.ProductionMonitoringEntity.weekProductionRates;
|
||||
export const selectMonthProductionRates = (state: RootState) => state.ProductionMonitoringEntity.monthProductionRates;
|
||||
export const selectGlassStatus = (state: RootState) => state.ProductionMonitoringEntity.lineGlassStatus;
|
||||
export default ProductionMonitoringEntity.reducer;
|
||||
@ -1,64 +0,0 @@
|
||||
import {createSlice} from "@reduxjs/toolkit";
|
||||
import type {RootState} from "./store";
|
||||
|
||||
export interface Quality {
|
||||
num: number;
|
||||
sort: number;
|
||||
content: string;
|
||||
}
|
||||
|
||||
export interface QualityLineAll {
|
||||
Line_1: Array<Quality>;
|
||||
Line_2: Array<Quality>;
|
||||
Line_3: Array<Quality>;
|
||||
Line_4: Array<Quality>;
|
||||
}
|
||||
|
||||
export interface QualityMonitorEntityInterface {
|
||||
todayQualityAll: Array<Quality>;
|
||||
weekQualityAll: Array<Quality>;
|
||||
monthQualityAll: Array<Quality>;
|
||||
todayQualityLineAll: QualityLineAll;
|
||||
weekQualityLineAll: QualityLineAll;
|
||||
monthQualityLineAll: QualityLineAll;
|
||||
}
|
||||
|
||||
const emptyQualityLineAll: QualityLineAll = {
|
||||
Line_1: [],
|
||||
Line_2: [],
|
||||
Line_3: [],
|
||||
Line_4: []
|
||||
}
|
||||
|
||||
const initialState: QualityMonitorEntityInterface = {
|
||||
todayQualityAll: [],
|
||||
weekQualityAll: [],
|
||||
monthQualityAll: [],
|
||||
todayQualityLineAll: emptyQualityLineAll,
|
||||
weekQualityLineAll: emptyQualityLineAll,
|
||||
monthQualityLineAll: emptyQualityLineAll
|
||||
}
|
||||
|
||||
export const QualityMonitorEntity = createSlice({
|
||||
name: 'QualityMonitorEntity',
|
||||
initialState,
|
||||
reducers: {
|
||||
UpdateQualityMonitorEntity: (state, action) => {
|
||||
if (action.payload.toString().includes('客户端')) {
|
||||
} else {
|
||||
const QualityMonitorEntityData = JSON.parse(action.payload);
|
||||
state.todayQualityAll = QualityMonitorEntityData.todayQualityAll;
|
||||
state.weekQualityAll = QualityMonitorEntityData.weekQualityAll;
|
||||
state.monthQualityAll = QualityMonitorEntityData.monthQualityAll;
|
||||
state.todayQualityLineAll = QualityMonitorEntityData.todayQualityLineAll;
|
||||
state.weekQualityLineAll = QualityMonitorEntityData.weekQualityLineAll;
|
||||
state.monthQualityLineAll = QualityMonitorEntityData.monthQualityLineAll;
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
export const {UpdateQualityMonitorEntity} = QualityMonitorEntity.actions
|
||||
|
||||
export const selectQualityMonitorEntity = (state: RootState) => state.QualityMonitorEntity;
|
||||
export default QualityMonitorEntity.reducer;
|
||||
@ -1,27 +0,0 @@
|
||||
import {createSlice} from "@reduxjs/toolkit";
|
||||
import type {RootState} from "./store";
|
||||
|
||||
export interface MyDataSlice {
|
||||
value: number;
|
||||
}
|
||||
|
||||
const initialState: MyDataSlice = {
|
||||
value: 0,
|
||||
}
|
||||
|
||||
export const myDataSlice = createSlice({
|
||||
name: 'myData',
|
||||
initialState,
|
||||
reducers: {
|
||||
addMyData: (state) => {
|
||||
state.value += 1
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
export const {addMyData} = myDataSlice.actions;
|
||||
|
||||
export const selectMyData = (state: RootState) => state.myData.value;
|
||||
|
||||
export default myDataSlice.reducer;
|
||||
|
||||
@ -1,26 +1,12 @@
|
||||
import {configureStore} from '@reduxjs/toolkit';
|
||||
import myDataReducer from "./myDataSlice";
|
||||
import ProductionMonitoringEntityReducer from "./ProductionMonitoringEntity";
|
||||
import ChangeCssReducer from "./ChangeLangAndCss";
|
||||
import ChangeLineIDReducer from "./ChangeLineID";
|
||||
import EquipmentMonitorEntityReducer from "./EquipmentMonitorEntity";
|
||||
import QualityMonitorEntityReducer from "./QualityMonitorEntity"
|
||||
import ChangeSwitchStateReducer from "./ChangeSwitchState"
|
||||
import EquStatusEntityReducer, {EquStatusEntity} from "./EquStatusEntity"
|
||||
|
||||
import LinePageReducer from "./LinePageSlice"
|
||||
import LeaderPageReducer from './LeaderPageSlice';
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
myData: myDataReducer,
|
||||
ProductionMonitoringEntity: ProductionMonitoringEntityReducer,
|
||||
ChangeCss: ChangeCssReducer,
|
||||
ChangeLineID: ChangeLineIDReducer,
|
||||
EquipmentMonitorEntity: EquipmentMonitorEntityReducer,
|
||||
QualityMonitorEntity: QualityMonitorEntityReducer,
|
||||
ChangeSwitchState: ChangeSwitchStateReducer,
|
||||
EquStatusEntity: EquStatusEntityReducer,
|
||||
LinePageSlice: LinePageReducer,
|
||||
LeaderPageSlice: LeaderPageReducer
|
||||
},
|
||||
|
||||
Loading…
Reference in New Issue
Block a user