mt-fe-group/luoyang-screen
8
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

zjl #3

Manually merged
juzi merged 2 commits from zjl into master 2024-09-11 10:18:50 +08:00
Conversation 0 Commits 2 Files Changed 111 +115 -9337
82 changed files with 115 additions and 9337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 0dcff0c256 - Show all commits

2
public/index.html
View File

@ -14,7 +14,7 @@
manifest.json provides metadata used when your web app is installed on a manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
--> -->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
<!-- <!--
Notice the use of %PUBLIC_URL% in the tags above. Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build. It will be replaced with the URL of the `public` folder during the build.

2
public/wsconfig.json
View File

@ -1,3 +1,3 @@
{ {
"url": "india.mes.picaiba.com/api/" "url": "192.168.1.40:48080"
} }

36
src/App.tsx
View File

@ -4,14 +4,10 @@ import locales from "./locales/locales";
import "./App.css"; import "./App.css";
import { useAppSelector } from "./store/hooks"; import { useAppSelector } from "./store/hooks";
import { selectChangeLangAndCss } from "./store/ChangeLangAndCss"; import { selectChangeLangAndCss } from "./store/ChangeLangAndCss";
import { createBrowserRouter, RouterProvider } from "react-router-dom"; // import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { createHashRouter, RouterProvider } from "react-router-dom";
import ErrorPage from "./page/ErrorPage"; import ErrorPage from "./page/ErrorPage";
import MainP from "./page/MainP/MainP";
import MainE from "./page/MainE/MainE";
import MainQ from "./page/MainQ/MainQ";
import SwitchAll from "./page/AutoSwitch/SwitchAll";
import SwitchLine from "./page/AutoSwitch/SwitchLine";
import { MyObservable } from "./context/MyObservable"; import { MyObservable } from "./context/MyObservable";
import { Observable } from "@babylonjs/core"; import { Observable } from "@babylonjs/core";
import { selectGlassStatus } from "./store/ProductionMonitoringEntity"; import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
@ -51,38 +47,12 @@ function App() {
setCurrentLocale(Locale); setCurrentLocale(Locale);
const router = createBrowserRouter([ const router = createHashRouter([
{ {
path: "/:LineID?", path: "/:LineID?",
element: <LinePage />, element: <LinePage />,
errorElement: <ErrorPage />, errorElement: <ErrorPage />,
}, },
{
path: "/P",
element: <MainP />,
errorElement: <ErrorPage />,
},
{
path: "/Q",
element: <MainQ />,
errorElement: <ErrorPage />,
},
{
path: "/E/:LineID?",
element: <MainE />,
errorElement: <ErrorPage />,
},
///////////////////////////////////////////////////////////////////////////
{
path: "/SA",
element: <SwitchAll />,
errorElement: <ErrorPage />,
},
{
path: "/SL/:LineID?",
element: <SwitchLine />,
errorElement: <ErrorPage />,
},
///////////////////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////////////////
{ {
path: "/TP/:LineID?", path: "/TP/:LineID?",

101
src/Test/Test3.html
View File

@ -1,101 +0,0 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Babylon.js Product Page Demo</title>
<!-- <link rel="stylesheet" href="https://use.typekit.net/pyp7dhw.css"> -->
<link href='https://d33wubrfki0l68.cloudfront.net/css/c204e345dce3e9e660ec5e23ae93696b9c5b9d42/demos/productpage/styles.css'
rel='stylesheet' type='text/css'/>
<script src="https://use.typekit.net/pyp7dhw.js"></script>
<script>try {
Typekit.load({async: false});
} catch (e) {
}</script>
<script src="https://preview.babylonjs.com/babylon.js"></script>
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
<script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
<script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
</head>
<body>
<canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
<script src='https://d33wubrfki0l68.cloudfront.net/bundles/67cad91c66fe8e5633757e23e16f4220bf108fb5.js'></script>
<div id="header">
<div class="headerContent">
<a href="https://www.babylonjs.com/"><img src="assets/textures/babylonLogo_48px.svg"/></a><span id="headerType">eCommerce Product Demo</span>
</div>
</div>
<div id="htmlLayer">
<div id="loader">
<div class="lds-ripple">
<div></div>
<div></div>
</div>
<div id="loadingText">
<h1>Loading...</h1>
</div>
</div>
<div id="block_1">&nbsp;
<h1 id="head_1" class="track">Interactive Product Pages</h1>
<p>Babylon.js gives you all the power you need to create realistic interactive experiences for your product's
audience. Leverage the power of 3D rendering empowered by animation,
behaviors, audio, video, and a full GUI layer.
</p>
</div>
<div id="bg1">
<div id="block_2">
<h1 id="head_2" class="track">PBR Node Materials</h1>
<p>Create custom shaders for your assets using the node materials with full support for physically based
rendering materials. This includes support for
image-based lighting, real-time environment probes, subsurface translucency, refraction, and more!
</p>
</div>
<div id="block_3">
<h1 id="head_3" class="track">Advanced PBR Features</h1>
<p>Node material's physically-based rendering supports advanced features like clearcoat and sheen. Enjoy the
flexibility of creating custom shaders to unlock complete creative freedom while retaining the ability
to
render a wide range of materials accurately.
</p>
</div>
</div>
<div id="bg2">
<div id="block_4">
<h1 id="head_4" class="track">Procedural Textures</h1>
<p>Node materials can now create procedural textures to be used as you wish. A custom procedural texture
created in the node material editor is being used to morph between materials on this asset. Notice
how the morph is always different due to our custom shader allowing us to change the procedural texture
every time we use it.
</p>
</div>
</div>
<div id="bg3">
<div id="block_5">
<h1 id="head_5" class="track">Animating Material Parameters</h1>
<p>Node materials allow us to manipulate parameters directly or through animation. This enables interations
such as the animated ring light in the demo asset. We are also able to tie this animation into our post
processing like the glow layer you see here. And we still retain the ability to add all of this
functionality to PBR materials for the best possible rendering.
</p>
</div>
<div id="block_6">
<h1 id="head_6" class="track">GUI Controls in Materials</h1>
<p>Babylon.js also allows you to put GUI controls directly into our materials used on a mesh. You can see
how we can make a fully function product demo by displaying the actual time and date on the device
screen.
</p>
</div>
</div>
</div>
</body>
</html>

1183
src/Test/Test3.js
View File

File diff suppressed because it is too large Load Diff

14
src/Test/components/basic.tsx
View File

@ -1,14 +0,0 @@
import React from 'react'
import intl from 'react-intl-universal';
const BasicComponent: React.FC<any> = () => {
return (
<div>
<div className="title">Basic Examples:</div>
<div>{intl.get('SIMPLE')}</div>
<div>{intl.get('HELLO', { name: 'Tony', where: 'Alibaba' })}</div>
</div>
);
}
export default BasicComponent;

14
src/Test/components/currency.tsx
View File

@ -1,14 +0,0 @@
import React from 'react'
import intl from 'react-intl-universal';
const CurrencyComponent: React.FC<any> = () => {
let price = 123456.78;
return (
<div>
<div className="title">Currency Example:</div>
<div>{intl.get('SALE_PRICE', { price })}</div>
</div>
)
}
export default CurrencyComponent;

18
src/Test/components/date.tsx
View File

@ -1,18 +0,0 @@
import React from 'react'
import intl from 'react-intl-universal';
const DateComponent: React.FC<any> = () => {
const start = new Date();
const end = new Date();
const expires = new Date();
return (
<div>
<div className="title">Date Examples:</div>
<div>{intl.get('SALE_START', { start })}</div>
<div>{intl.get('SALE_END', { end })}</div>
<div>{intl.get('COUPON', { expires })}</div>
</div>
)
}
export default DateComponent;

15
src/Test/components/html.tsx
View File

@ -1,15 +0,0 @@
import React from 'react'
import intl from 'react-intl-universal';
const HtmlComponent: React.FC<any> = () => {
return (
<div>
<div className="title">Html Examples:</div>
<div>{intl.getHTML('TIP')}</div>
<div>{intl.getHTML('TIP_VAR', { message: 'HTML with variables' })}</div>
<div>{intl.getHTML('TIP_VAR', { message: '<script>alert("ReactIntlUniversal prevents from xss attack")</script>' })}</div>
</div>
);
}
export default HtmlComponent;

13
src/Test/components/message-not-in-component.tsx
View File

@ -1,13 +0,0 @@
import React from 'react';
import util from '../core/util';
const MessageNotInComponent: React.FC<any> = () => {
return (
<div>
<div className="title">Message Not in Component Example:</div>
<div>{util.getMessage()}</div>
</div>
)
}
export default MessageNotInComponent;

15
src/Test/components/plural.tsx
View File

@ -1,15 +0,0 @@
import React from 'react'
import intl from 'react-intl-universal';
const PluralComponent: React.FC<any> = () => {
return (
<div>
<div className="title">Plural Examples:</div>
<div>{intl.get("PHOTO", { photoNum: 0 })}</div>
<div>{intl.get("PHOTO", { photoNum: 1 })}</div>
<div>{intl.get("PHOTO", { photoNum: 1000000 })}</div>
</div>
);
}
export default PluralComponent;

7
src/Test/core/util.ts
View File

@ -1,7 +0,0 @@
import intl from 'react-intl-universal';
const util = {
getMessage: () => intl.get('MESSAGE_NOT_IN_COMPONENT'),
};
export default util;

41
src/Test/test.tsx
View File

@ -1,41 +0,0 @@
import React, {useEffect, useState} from "react";
import intl from 'react-intl-universal';
import locales from "../locales/locales";
import useForceUpdate from 'use-force-update';
import BasicComponent from "./components/basic";
function Test() {
const forceUpdate = useForceUpdate();
useEffect(() => {
setthetext();
})
const setthetext = ()=>{
let currenttext = "zh-CN";
setCurrentLocale(currenttext);
};
const setCurrentLocale = (currentLocale: string) => {
intl.init({
currentLocale,
locales: locales,
});
};
const OnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
setCurrentLocale(e.target.value)
forceUpdate();
}
return (
<div>
<select onChange={OnChange}>
<option value={"zh-CN"}>中文</option>
<option value={"en-US"}>英文</option>
</select>
<div id='name'>{intl.get('SIMPLE')}</div>
<BasicComponent/>
</div>
)
}
export default Test;

77
src/Test/test2.tsx
View File

@ -1,77 +0,0 @@
import React, {useEffect, useState} from "react";
import intl from 'react-intl-universal';
import useForceUpdate from 'use-force-update';
import locales from "../locales/locales";
import BasicComponent from "./components/basic";
const LOCALES_LIST = [
{
label: "English",
value: "en-US",
},
{
label: "简体中文",
value: "zh-CN",
},
];
function Test2() {
const forceUpdate = useForceUpdate();
const [initDone, setInitDone] = React.useState(false);
useEffect(() => {
initializeIntl();
})
const initializeIntl = () => {
// 1. Get the currentLocale from url, cookie, or browser setting
let currentLocale = intl.determineLocale({
urlLocaleKey: 'lang', // Example: https://fe-tool.com/react-intl-universal?lang=en-US
cookieLocaleKey: 'lang', // Example: "lang=en-US" in cookie
});
// 2. Fallback to "en-US" if the currentLocale isn't supported in LOCALES_LIST
if (!LOCALES_LIST.some(item => item.value === currentLocale)) {
currentLocale = "en-US"
}
// 3. Set currentLocale and load locale data
setCurrentLocale(currentLocale);
// 4. After loading locale data, start to render
setInitDone(true);
}
const setCurrentLocale = (currentLocale: string) => {
intl.init({
currentLocale,
locales: locales,
});
};
const onLocaleChange = (e: React.ChangeEvent<HTMLSelectElement>)=>{
setCurrentLocale(e.target.value);
forceUpdate();
}
const localeSelector = (
<select onChange={onLocaleChange} defaultValue="">
<option value="" disabled>Change Language</option>
{LOCALES_LIST.map(locale=>(
<option key={locale.value} value={locale.value}>{locale.label}</option>
))}
</select>
);
return (
<div>
{initDone && (
<div className="react-intl-universal-example">
{localeSelector}
<BasicComponent/>
</div>
)}
</div>
);
}
export default Test2;

1447
src/babylonjs/LineBabylon.tsx
View File

File diff suppressed because it is too large Load Diff

10
src/babylonjs/LinePageBabylon.tsx
View File

@ -20,6 +20,14 @@ import AlarmTipYellow from "./../page/LinePage/assets/icon/y.png";
import AlarmTipRed from "./../page/LinePage/assets/icon/r.png"; import AlarmTipRed from "./../page/LinePage/assets/icon/r.png";
// const onEquObservable = new Observable(); // const onEquObservable = new Observable();
// const lineNameNo = {
// "1":"一",
// "2":"二",
// "3":"三",
// "4":"四",
// "5":"五",
// }
const lineNameNo = ["一","二","三","四","五"]
const myStyle = { const myStyle = {
width: "1041px", width: "1041px",
@ -554,7 +562,7 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
<div className="model_info"> <div className="model_info">
<span className="reset_btn" onClick={resetModel}></span> <span className="reset_btn" onClick={resetModel}></span>
<span className="title"> <span className="title">
第五产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"} 第{lineNameNo[Number(modelPath.slice(-3,-2))-1]}产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"}
</span> </span>
</div> </div>
{selectedMeshName && ( {selectedMeshName && (

363
src/babylonjs/MybabylonJS_1.tsx
View File

@ -1,363 +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 {
GlassAnimation1_1, GlassAnimation1_2D, GlassAnimation1_2U, GlassAnimation1_3, GlassAnimation1_4,
GlassAnimation2_1, GlassAnimation2_2D, GlassAnimation2_2U, GlassAnimation2_3, GlassAnimation2_4,
GlassAnimation3_1, GlassAnimation3_2D, GlassAnimation3_2U, GlassAnimation3_3, GlassAnimation3_4,
GlassAnimation4_1, GlassAnimation4_2D, GlassAnimation4_2U, GlassAnimation4_3, GlassAnimation4_4
} from "./GlassAnimation";
import { useAppSelector } from "../store/hooks";
import { GlassStatus, selectGlassStatus } from "../store/ProductionMonitoringEntity";
import '../page/style/standard.css';
import { MyObservable } from "../context/MyObservable";
import { Button, ButtonGroup } from "@mui/material";
import intl from "react-intl-universal";
import { EquStatusInterface, selectEquStatus } from "../store/EquStatusEntity";
import EquMap from "./EquMap";
const onMainCamObservable = new Observable();
const onEquObservable = new Observable();
const myStyle = {
width: '1036px',
height: '666px',
outline: 'none',
}
const DetailCamera = {
Part_1: {
alpha: BABYLON.Tools.ToRadians(270),
beta: BABYLON.Tools.ToRadians(25),
radius: 85,
target: new BABYLON.Vector3(-110, 0, -8)
},
Part_2: {
alpha: BABYLON.Tools.ToRadians(270),
beta: BABYLON.Tools.ToRadians(25),
radius: 85,
target: new BABYLON.Vector3(-40, 0, -8)
},
Part_3: {
alpha: BABYLON.Tools.ToRadians(270),
beta: BABYLON.Tools.ToRadians(25),
radius: 85,
target: new BABYLON.Vector3(0, 0, -8)
},
Part_4: {
alpha: BABYLON.Tools.ToRadians(270),
beta: BABYLON.Tools.ToRadians(25),
radius: 85,
target: new BABYLON.Vector3(110, 0, -8)
},
}
interface MybabylonJSProps {
modelPath: string; // 明确 modelPath 属性的类型为 string
}
function MybabylonJS({ modelPath }: MybabylonJSProps) {
const onGlassObservable = useContext(MyObservable);
const EquStatus = useAppSelector(selectEquStatus);
const canvasRef = useRef(null);
onEquObservable.notifyObservers(EquStatus);
// const thisLineGlassStatus = useAppSelector(selectGlassStatus)
// onGlassObservable.notifyObservers(thisLineGlassStatus)
const [SelectedMeshName, setSelectedMeshName] = useState<string | null>(null);
interface MybabylonJSProps {
modelPath: string;
}
// 使用 useRef 来存储当前加载的模型引用
const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]);
useEffect(
() => {
// 确保 canvas 引用存在
if (!canvasRef.current) return;
const canvas = canvasRef.current;
const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })
const createScene = async function () {
// This creates a basic Babylon Scene object (non-mesh)
const scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
const light = new BABYLON.DirectionalLight('light', new BABYLON.Vector3(20, 20, 100), scene);
const light2 = new BABYLON.PointLight('light2', new BABYLON.Vector3(20, 20, 100), scene);
const Glass1_1 = new BABYLON.TransformNode('Glass1_1')
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), 215, new BABYLON.Vector3(-2, 0, -8));
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 = .3
grid.gridRatio = .04
grid.backFaceCulling = !1
grid.mainColor = new BABYLON.Color3(1, 1, 1)
grid.lineColor = new BABYLON.Color3(1, 1, 1)
grid.opacity = .8
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);
// var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, 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('', '/test/', `${modelPath}.babylon`, scene);
// var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line1.babylon`, scene);
// var LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line2.babylon`, scene);
// var LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line3.babylon`, scene);
// var LOD3MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line4.babylon`, scene);
// var LOD4MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line5.babylon`, scene);
// 将新加载的模型添加到 currentMeshesRef 中
currentMeshesRef.current.push(...LOD0MESH.meshes);
// ...为新加载的模型设置交互逻辑
LOD0MESH.meshes.map((mesh) => {
mesh.isPickable = true;
mesh.actionManager = new BABYLON.ActionManager(scene);
//鼠标移动到物体上亮显
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._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(-2, 0, -8);
camera.alpha = BABYLON.Tools.ToRadians(245);
camera.beta = BABYLON.Tools.ToRadians(25);
camera.radius = 215;
}
let resetCamera = setTimeout(reset, 15000)
scene.onPointerObservable.add((pointerInfo) => {
// console.log(camera.target, camera.alpha * 180 / 3.14, camera.beta * 180 / 3.14, camera.radius)
switch (pointerInfo.type) {
case BABYLON.PointerEventTypes.POINTERMOVE:
clearTimeout(resetCamera);
resetCamera = setTimeout(reset, 15000)
}
})
onMainCamObservable.add((eventData, eventState) => {
clearTimeout(resetCamera);
resetCamera = setTimeout(reset, 5000);
switch (eventData) {
case 1:
camera.target = DetailCamera.Part_1.target;
camera.alpha = DetailCamera.Part_1.alpha;
camera.beta = DetailCamera.Part_1.beta;
camera.radius = DetailCamera.Part_1.radius;
break;
case 2:
camera.target = DetailCamera.Part_2.target;
camera.alpha = DetailCamera.Part_2.alpha;
camera.beta = DetailCamera.Part_2.beta;
camera.radius = DetailCamera.Part_2.radius;
break;
case 3:
camera.target = DetailCamera.Part_3.target;
camera.alpha = DetailCamera.Part_3.alpha;
camera.beta = DetailCamera.Part_3.beta;
camera.radius = DetailCamera.Part_3.radius;
break;
case 4:
camera.target = DetailCamera.Part_4.target;
camera.alpha = DetailCamera.Part_4.alpha;
camera.beta = DetailCamera.Part_4.beta;
camera.radius = DetailCamera.Part_4.radius;
break;
}
})
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 handleClick1 = () => {
onMainCamObservable.notifyObservers(1)
}
const handleClick2 = () => {
onMainCamObservable.notifyObservers(2)
}
const handleClick3 = () => {
onMainCamObservable.notifyObservers(3)
}
const handleClick4 = () => {
onMainCamObservable.notifyObservers(4)
}
return (
<div style={myStyle}>
<ButtonGroup variant="contained" aria-label="outlined button group" className={'btnArea'}>
<h2>当前选择: {SelectedMeshName}</h2>
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick1}>{intl.get('Part1')}</Button>
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick2}>{intl.get('Part2')}</Button>
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick3}>{intl.get('Part3')}</Button>
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick4}>{intl.get('Part4')}</Button>
</ButtonGroup>
<canvas ref={canvasRef} style={myStyle} />
</div>
);
}
export default MybabylonJS;

1389
src/babylonjs/MybabylonJS_2.tsx
View File

File diff suppressed because it is too large Load Diff

1389
src/babylonjs/MybabylonJS_backup.tsx
View File

File diff suppressed because it is too large Load Diff

1
src/logo.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.6 KiB

65
src/page/AutoSwitch/SwitchAll.tsx
View File

@ -1,65 +0,0 @@
import React, {useContext, useEffect, useState} from "react";
import intl from "react-intl-universal";
import MainP from "../MainP/MainP";
import MainE from "../MainE/MainE";
import MainQ from "../MainQ/MainQ";
import TabPanel from "../Component/TabPanel";
import SwitchOnOff from "../Component/SwitchOnOff";
import {useAppSelector} from "../../store/hooks";
import {selectSwitchState} from "../../store/ChangeSwitchState";
import {ThisLineID} from "../../context/ThisLineID";
function SwitchAll() {
const [PageIndex, setPageIndex] = useState(1)
const state = useAppSelector(selectSwitchState)
useEffect(() => {
let timerId: NodeJS.Timer;
function StartSwitch() {
timerId = setTimeout(() => {
if (PageIndex < 6) {
setPageIndex(PageIndex + 1)
} else {
setPageIndex(1)
}
}, 30000)
}
function StopSwitch() {
clearInterval(timerId)
}
if (state) {
StartSwitch()
} else {
StopSwitch()
}
window.dispatchEvent(new Event('resize'))
return () => {
clearInterval(timerId)
}
}, [PageIndex, state]
)
return (
<div>
<SwitchOnOff/>
<TabPanel index={1} value={PageIndex}><MainP/></TabPanel>
<TabPanel index={2} value={PageIndex}><MainQ/></TabPanel>
<ThisLineID.Provider value={'1'}>
<TabPanel index={3} value={PageIndex}><MainE/></TabPanel>
</ThisLineID.Provider>
<ThisLineID.Provider value={'2'}>
<TabPanel index={4} value={PageIndex}><MainE/></TabPanel>
</ThisLineID.Provider>
<ThisLineID.Provider value={'3'}>
<TabPanel index={5} value={PageIndex}><MainE/></TabPanel>
</ThisLineID.Provider>
<ThisLineID.Provider value={'4'}>
<TabPanel index={6} value={PageIndex}><MainE/></TabPanel>
</ThisLineID.Provider>
</div>
)
}
export default SwitchAll;

53
src/page/AutoSwitch/SwitchLine.tsx
View File

@ -1,53 +0,0 @@
import React, {useContext, useEffect, useState} from "react";
import intl from "react-intl-universal";
import MainP from "../MainP/MainP";
import MainE from "../MainE/MainE";
import MainQ from "../MainQ/MainQ";
import TabPanel from "../Component/TabPanel";
import SwitchOnOff from "../Component/SwitchOnOff";
import {useAppSelector} from "../../store/hooks";
import {selectSwitchState} from "../../store/ChangeSwitchState";
function SwitchLine() {
const [PageIndex, setPageIndex] = useState(1)
const state = useAppSelector(selectSwitchState)
useEffect(() => {
let timerId: NodeJS.Timer;
function StartSwitch() {
timerId = setInterval(() => {
if (PageIndex < 3) {
setPageIndex(PageIndex + 1)
} else {
setPageIndex(1)
}
}, 30000)
}
function StopSwitch() {
clearInterval(timerId)
}
if (state) {
StartSwitch()
} else {
StopSwitch()
}
window.dispatchEvent(new Event('resize'))
return () => {
clearInterval(timerId)
}
}, [PageIndex, state]
)
return (
<div>
<SwitchOnOff/>
<TabPanel index={1} value={PageIndex}><MainP/></TabPanel>
<TabPanel index={2} value={PageIndex}><MainQ/></TabPanel>
<TabPanel index={3} value={PageIndex}><MainE/></TabPanel>
</div>
)
}
export default SwitchLine;

94
src/page/MainE/CenterDownE.tsx
View File

@ -1,94 +0,0 @@
import React, {useContext, useState} from "react";
import intl from "react-intl-universal";
import "../style/standard.css"
import Pagination from '@mui/material/Pagination';
import {createTheme, ThemeProvider} from "@mui/material";
import CenterDownChartE from "./CenterDownE/CenterDownChartE";
import TabPanel from "../Component/TabPanel";
import {useAppSelector} from "../../store/hooks";
import {selectAllLineEquipmentData} from "../../store/EquipmentMonitorEntity";
import {selectChangeLineID} from "../../store/ChangeLineID";
import {ThisLineID} from "../../context/ThisLineID";
const theme = createTheme({
palette: {
primary: {
main: 'rgba(82, 255, 241,0.8)'
}
}
})
function CenterDownE() {
const contextLineID = useContext(ThisLineID);
const [page, setPage] = useState(1);
const handleChange = (event: React.ChangeEvent<unknown>, page: number | null) => {
if (page !== null) {
setPage(page);
clearTimeout(timeOut)
}
}
const AllData = useAppSelector(selectAllLineEquipmentData);
const LineID = "Line_" + contextLineID;
let EquipmentOeesCount: number = 0;
switch (LineID) {
case 'Line_1':
EquipmentOeesCount = AllData.Line_1.equipmentOees.length;
break;
case 'Line_2':
EquipmentOeesCount = AllData.Line_2.equipmentOees.length;
break;
case 'Line_3':
EquipmentOeesCount = AllData.Line_3.equipmentOees.length;
break;
case 'Line_4':
EquipmentOeesCount = AllData.Line_4.equipmentOees.length;
break;
}
const OnePageCount = 8;
const PageCount = Math.ceil(EquipmentOeesCount / OnePageCount);
const PageIndexArray: Array<number> = []
for (let index = 1; index <= PageCount; index++) {
PageIndexArray.push(index)
}
const timeOut = setTimeout(() => {
if (page < PageCount) {
setPage(page + 1)
} else {
setPage(1)
}
}, 5000)
return (
<div className="block_18_E fineWin">
<div className="fineWin-footer"/>
<div className="group_74 flex-col">
<div className="group_75 flex-row">
<div className="box_24 flex-col"/>
<span className="text_97">{intl.get('EquipmentTurnover')}</span>
<div className='area1'>
<ThemeProvider theme={theme}>
<Pagination page={page} count={PageCount} onChange={handleChange} variant="outlined" color={"primary"}
size={"small"}
sx={{
'& .MuiPaginationItem-root': {
color: 'white',
border: '1px solid rgb(82 255 241 / 24%)'
}
}}/>
</ThemeProvider>
</div>
</div>
<div className='area2'>
{PageIndexArray.map((index) => (
<TabPanel key={index} index={index} value={page}><CenterDownChartE startNum={(index - 1) * OnePageCount}
endNum={Math.min(index * OnePageCount - 1, EquipmentOeesCount - 1)}
pageIndex={index - 1}/></TabPanel>
))}
</div>
</div>
</div>
)
}
export default CenterDownE;

53
src/page/MainE/CenterDownE/CenterDownChartE.tsx
View File

@ -1,53 +0,0 @@
import React from "react";
import Grid from '@mui/material/Grid';
import OeeChart from "./OeeChart";
import {useAppSelector} from "../../../store/hooks";
import {Oee, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
import {selectChangeLineID} from "../../../store/ChangeLineID";
interface param {
startNum: number;
endNum: number;
pageIndex: number;
}
function CenterDownChartE(props: param) {
const {startNum, endNum, pageIndex} = props;
const AllData = useAppSelector(selectAllLineEquipmentData);
const LineID = "Line_" + useAppSelector(selectChangeLineID);
let EquipmentOees: Array<Oee> = [];
switch (LineID) {
case 'Line_1':
EquipmentOees = AllData.Line_1.equipmentOees;
break;
case 'Line_2':
EquipmentOees = AllData.Line_2.equipmentOees;
break;
case 'Line_3':
EquipmentOees = AllData.Line_3.equipmentOees;
break;
case 'Line_4':
EquipmentOees = AllData.Line_4.equipmentOees;
break;
}
let ToShowOees: Array<Oee> = [];
for (let index = startNum; index <= endNum; index++) {
ToShowOees.push(EquipmentOees[index]);
}
return (
<Grid container spacing={3}>
{
ToShowOees.map((item, index) => (
<Grid item xs={3} key={pageIndex * 8 + index}>
<OeeChart downRate={item.downRate} equName={item.equName} stopRate={item.stopRate}
workRate={item.workRate}/>
</Grid>))
}
</Grid>
)
}
export default CenterDownChartE;

127
src/page/MainE/CenterDownE/OeeChart.tsx
View File

@ -1,127 +0,0 @@
import React, {useEffect, useRef, useState} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {Oee} from "../../../store/EquipmentMonitorEntity";
function OeeChart(data: Oee) {
const CenterDownChartRef = useRef(null)
const gaugeData = [
{
value: (data.downRate * 100).toFixed(2),
name: intl.get("DownRate"),
title: {
offsetCenter: ['-170%', '-110%'],
color: 'white'
},
detail: {
valueAnimation: true,
offsetCenter: ['-170%', '-80%'],
}
},
{
value: (data.workRate * 100).toFixed(2),
name: intl.get("WorkRate"),
title: {
offsetCenter: ['-170%', '-30%'],
color: 'white'
},
detail: {
valueAnimation: true,
offsetCenter: ['-170%', '0%']
}
},
{
value: (data.stopRate * 100).toFixed(2),
name: intl.get("StopRate"),
title: {
offsetCenter: ['-170%', '50%'],
color: 'white'
},
detail: {
valueAnimation: true,
offsetCenter: ['-170%', '80%'],
}
}
];
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(CenterDownChartRef.current, theme);
const option = {
series: [
{
type: 'gauge',
color: ['#66FFFF', '#F78C54', '#0BA267'],
startAngle: 90,
endAngle: -270,
center: ['60%', '50%'],
radius: "60%",
pointer: {
show: false
},
progress: {
show: true,
overlap: false,
roundCap: true,
clip: false,
itemStyle: {
borderWidth: 0.5,
borderColor: 'white'
}
},
axisLine: {
lineStyle: {
width: 40,
color: [[1, 'rgba(19, 42, 79, 0.7)']]
}
},
splitLine: {
show: false,
distance: 0,
length: 10
},
axisTick: {
show: false
},
axisLabel: {
show: false,
distance: 50
},
data: gaugeData,
title: {
fontSize: 12
},
detail: {
width: 30,
height: 10,
fontSize: 12,
color: 'inherit',
borderColor: 'inherit',
borderWidth: 1,
borderRadius: 40,
formatter: '{value}%'
}
}
]
}
chartInstance.setOption(option);
chartInstance.resize();
})
return (
<React.Fragment>
<div className={"myText1"}>{data.equName}</div>
<div ref={CenterDownChartRef} className="chart4"/>
</React.Fragment>
);
}
export default OeeChart;

18
src/page/MainE/CenterE.tsx
View File

@ -1,18 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import "../style/standard.css"
import CenterUpE from "./CenterUpE";
import CenterDownE from "./CenterDownE";
function CenterE() {
return (
<div className={"group_72 flex-col"}>
<CenterUpE/>
<CenterDownE/>
</div>
)
}
export default CenterE;

17
src/page/MainE/CenterUpE.tsx
View File

@ -1,17 +0,0 @@
import React from "react";
import LineBabylon from "../../babylonjs/LineBabylon";
import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
import {Observable} from "@babylonjs/core";
// import LineID from "../../store/ChangeLineID";
function CenterUpE() {
return (
<div className="block_16_E flex-col fineWin">
<div className="fineWin-footer"/>
<LineBabylon />
{/* <MybabylonJS_1 modelPath={`line${LineID}`} /> */}
</div>
)
}
export default CenterUpE;

20
src/page/MainE/LeftDownE.tsx
View File

@ -1,20 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import LeftDownChartE from "./LeftDownE/LeftDownChartE";
function LeftDownE() {
return (
<div className="block_3_E3 flex-col fineWin">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="box_36 flex-col"/>
<span className="text_2">{intl.get('EquipmentOperationMonitoring')}</span>
</div>
<div style={{marginTop: 15}}>
<LeftDownChartE/>
</div>
</div>
)
}
export default LeftDownE;

108
src/page/MainE/LeftDownE/LeftDownChartE.tsx
View File

@ -1,108 +0,0 @@
import React, {useContext, useEffect, useRef, useState} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectAllLineEquipmentData, TickCount} from "../../../store/EquipmentMonitorEntity";
import {selectChangeLineID} from "../../../store/ChangeLineID";
import {ThisLineID} from "../../../context/ThisLineID";
function LeftDownChartE() {
const contextLineID = useContext(ThisLineID);
const chartRef = useRef(null)
const AllData = useAppSelector(selectAllLineEquipmentData);
const LineID = "Line_" + contextLineID;
let equipmentTickCounts: Array<TickCount> = [];
switch (LineID) {
case 'Line_1':
equipmentTickCounts = AllData.Line_1.equipmentTickCounts;
break;
case 'Line_2':
equipmentTickCounts = AllData.Line_2.equipmentTickCounts;
break;
case 'Line_3':
equipmentTickCounts = AllData.Line_3.equipmentTickCounts;
break;
case 'Line_4':
equipmentTickCounts = AllData.Line_4.equipmentTickCounts;
break;
}
const nameset: string[] = [];
const numset: number[] = [];
equipmentTickCounts.map((item) => {
nameset.push(item.equName);
numset.push(item.tickCount)
})
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(chartRef.current);
const option = {
grid: {
top: "0%",
bottom: "0%",
left: "0%",
right: "5%",
containLabel: true,
},
legend: {
show: true,
selectedMode: false,
itemHeight: 8,
itemWidth: 13,
textStyle: {
fontSize: 10,
}
},
yAxis: {
type: 'category',
data: nameset,
color: "#eeeeee",
axisLabel: {
color: "#eeeeee"
}
},
xAxis: {
type: 'value',
axisLabel: {
color: "#eeeeee"
}
},
series: [
{
data: numset,
type: 'bar',
barMaxWidth: 35,
label: {
show: true,
position: 'right',
color: "#eeeeee"
},
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
},
color: 'rgba(82, 255, 241, 0.6)'
}
]
}
chartInstance.setOption(option);
chartInstance.resize();
})
return (
<div ref={chartRef} className="chart3"/>
);
}
export default LeftDownChartE;

18
src/page/MainE/LeftE.tsx
View File

@ -1,18 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import LeftUpE from "./LeftUpE";
import LeftDownE from "./LeftDownE";
function LeftE() {
return (
<div className="group_61 flex-col">
<LeftUpE/>
<LeftDownE/>
</div>
);
}
export default LeftE;

20
src/page/MainE/LeftUpE.tsx
View File

@ -1,20 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import LeftUpTableE from "./LeftUpE/LeftUpTableE";
function LeftUpE() {
return (
<div className="block_3_E2 flex-col fineWin">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="block_4 flex-col"/>
<span className="text_2">{intl.get('AbnormalEquipmentAlarm')}</span>
</div>
<div style={{marginTop: 15, marginLeft: 25, marginRight: 25}}>
<LeftUpTableE/>
</div>
</div>
)
}
export default LeftUpE;

61
src/page/MainE/LeftUpE/LeftUpTableE.tsx
View File

@ -1,61 +0,0 @@
import React, {useContext} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {Table, TableBody, TableHead,} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {useAppSelector} from "../../../store/hooks";
import {Alarm, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
import {ThisLineID} from "../../../context/ThisLineID";
function LeftUpTableE() {
const contextLineID = useContext(ThisLineID);
const AllData = useAppSelector(selectAllLineEquipmentData);
const LineID = "Line_" + contextLineID;
let equipmentAlarm: Array<Alarm> = [];
switch (LineID) {
case 'Line_1':
equipmentAlarm = AllData.Line_1.equipmentAlarm;
break;
case 'Line_2':
equipmentAlarm = AllData.Line_2.equipmentAlarm;
break;
case 'Line_3':
equipmentAlarm = AllData.Line_3.equipmentAlarm;
break;
case 'Line_4':
equipmentAlarm = AllData.Line_4.equipmentAlarm;
break;
}
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center" sx={{minWidth: 30}}>{intl.get('serialNo')}</StyledTableCell>
<StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('EquipmentName')}</StyledTableCell>
<StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('alarmCode')}</StyledTableCell>
<StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('AlarmLevel')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('alarmContent')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{equipmentAlarm.map((alarm, index) => (
<StyledTableRow key={index + 1}>
<StyledTableCell align="center">{index + 1}</StyledTableCell>
<StyledTableCell align="center">{alarm.equName}</StyledTableCell>
<StyledTableCell align="center">{alarm.alarmCode}</StyledTableCell>
<StyledTableCell align="center">{alarm.alarmValue}</StyledTableCell>
<StyledTableCell align="center">{alarm.alarmContent}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
);
}
export default LeftUpTableE;

42
src/page/MainE/MainE.tsx
View File

@ -1,42 +0,0 @@
import React, {useContext} from "react";
import intl from "react-intl-universal";
import {useParams} from "react-router-dom";
import {useAppDispatch} from "../../store/hooks";
import {UpdateChangeLineID} from "../../store/ChangeLineID";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import TopE from "./TopE";
import LeftE from "./LeftE";
import CenterE from "./CenterE";
import RightE from "./RightE";
import {Observable} from "@babylonjs/core";
import {MyObservable} from "../../context/MyObservable";
import {ThisLineID} from "../../context/ThisLineID";
function MainE() {
const contextLineID = useContext(ThisLineID);
const {LineID} = useParams()
let NowThisLineID: string | undefined;
if (contextLineID) {
NowThisLineID = contextLineID
} else {
NowThisLineID = LineID;
}
const dispatch = useAppDispatch();
dispatch(UpdateChangeLineID(NowThisLineID));
return (
<ThisLineID.Provider value={NowThisLineID}>
<TopE/>
<div className="block_32 flex-row">
<LeftE/>
<CenterE/>
<RightE/>
</div>
</ThisLineID.Provider>
);
}
export default MainE;

72
src/page/MainE/RightE.tsx
View File

@ -1,72 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import RightDownTableDay from "../MainP/RightDown/RightDownTableDay";
import {useAppSelector} from "../../store/hooks";
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
import RightTableDayE from "./RightE/RightTableDayE";
import RightTableWeekE from "./RightE/RightTableWeekE";
import RightTableMonthE from "./RightE/RightTableMonthE";
import RightTableAllE from "./RightE/RightTableAllE";
function RightE() {
const Css = useAppSelector(selectChangeLangAndCss);
return (
<div className="box_34">
<div className="block_3_E fineWin flex-col">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="group_27 flex-col"/>
<span className="text_2">{intl.get('EquipmentProcessingQuantity')}</span>
</div>
<div className="group_63_2 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisDay')}</span>
<div className="box_5 flex-col"/>
</div>
<div className="rightDownTableArea">
<RightTableDayE/>
</div>
<div className="group_63_2 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisWeek')}</span>
<div className="box_5 flex-col"/>
</div>
<div className="rightDownTableArea">
<RightTableWeekE/>
</div>
<div className="group_63_2 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisMonth')}</span>
<div className="box_5 flex-col"/>
</div>
<div className="rightDownTableArea">
<RightTableMonthE/>
</div>
<div className="group_63_2 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('All')}</span>
<div className="box_5 flex-col"/>
</div>
<div className="rightDownTableArea">
<RightTableAllE/>
</div>
</div>
</div>
);
}
export default RightE;

61
src/page/MainE/RightE/RightTableAllE.tsx
View File

@ -1,61 +0,0 @@
import React, {useContext} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {useAppSelector} from "../../../store/hooks";
import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
import {Table, TableBody, TableHead} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {selectChangeLineID} from "../../../store/ChangeLineID";
import {ThisLineID} from "../../../context/ThisLineID";
function RightTableAllE() {
const contextLineID = useContext(ThisLineID);
const AllData = useAppSelector(selectAllLineEquipmentData);
const LineID = "Line_" + contextLineID;
let ProductData: Array<Product> = [];
switch (LineID) {
case 'Line_1':
ProductData = AllData.Line_1.equipmentProductAll;
break;
case 'Line_2':
ProductData = AllData.Line_2.equipmentProductAll;
break;
case 'Line_3':
ProductData = AllData.Line_3.equipmentProductAll;
break;
case 'Line_4':
ProductData = AllData.Line_4.equipmentProductAll;
break;
}
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{ProductData.map((item, index) => (
<StyledTableRow key={index}>
<StyledTableCell align="center">{item.sectionName}</StyledTableCell>
<StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
<StyledTableCell align="center">{item.inputNum}</StyledTableCell>
<StyledTableCell align="center">{item.outputNum}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
)
}
export default RightTableAllE;

63
src/page/MainE/RightE/RightTableDayE.tsx
View File

@ -1,63 +0,0 @@
import React, {useContext} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {useAppSelector} from "../../../store/hooks";
import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
import {Table, TableBody, TableHead} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {selectChangeLineID} from "../../../store/ChangeLineID";
import {ThisLineID} from "../../../context/ThisLineID";
function RightTableDayE() {
const contextLineID = useContext(ThisLineID);
const AllData = useAppSelector(selectAllLineEquipmentData);
const LineID = "Line_" + contextLineID;
let ProductData: Array<Product> = [];
switch (LineID) {
case 'Line_1':
ProductData = AllData.Line_1.equipmentProductDays;
break;
case 'Line_2':
ProductData = AllData.Line_2.equipmentProductDays;
break;
case 'Line_3':
ProductData = AllData.Line_3.equipmentProductDays;
break;
case 'Line_4':
ProductData = AllData.Line_4.equipmentProductDays;
break;
}
const SlicedProductData = ProductData.slice(0, 5)
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{SlicedProductData.map((item, index) => (
<StyledTableRow key={index}>
<StyledTableCell align="center">{item.sectionName}</StyledTableCell>
<StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
<StyledTableCell align="center">{item.inputNum}</StyledTableCell>
<StyledTableCell align="center">{item.outputNum}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
)
}
export default RightTableDayE;

61
src/page/MainE/RightE/RightTableMonthE.tsx
View File

@ -1,61 +0,0 @@
import React, {useContext} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {useAppSelector} from "../../../store/hooks";
import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
import {Table, TableBody, TableHead} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {selectChangeLineID} from "../../../store/ChangeLineID";
import {ThisLineID} from "../../../context/ThisLineID";
function RightTableMonthE() {
const contextLineID = useContext(ThisLineID);
const AllData = useAppSelector(selectAllLineEquipmentData);
const LineID = "Line_" + contextLineID;
let ProductData: Array<Product> = [];
switch (LineID) {
case 'Line_1':
ProductData = AllData.Line_1.equipmentProductMonths;
break;
case 'Line_2':
ProductData = AllData.Line_2.equipmentProductMonths;
break;
case 'Line_3':
ProductData = AllData.Line_3.equipmentProductMonths;
break;
case 'Line_4':
ProductData = AllData.Line_4.equipmentProductMonths;
break;
}
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{ProductData.map((item, index) => (
<StyledTableRow key={index}>
<StyledTableCell align="center">{item.sectionName}</StyledTableCell>
<StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
<StyledTableCell align="center">{item.inputNum}</StyledTableCell>
<StyledTableCell align="center">{item.outputNum}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
)
}
export default RightTableMonthE;

61
src/page/MainE/RightE/RightTableWeekE.tsx
View File

@ -1,61 +0,0 @@
import React, {useContext} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {useAppSelector} from "../../../store/hooks";
import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
import {Table, TableBody, TableHead} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {selectChangeLineID} from "../../../store/ChangeLineID";
import {ThisLineID} from "../../../context/ThisLineID";
function RightTableWeekE() {
const contextLineID = useContext(ThisLineID);
const AllData = useAppSelector(selectAllLineEquipmentData);
const LineID = "Line_" + contextLineID;
let ProductData: Array<Product> = [];
switch (LineID) {
case 'Line_1':
ProductData = AllData.Line_1.equipmentProductWeeks;
break;
case 'Line_2':
ProductData = AllData.Line_2.equipmentProductWeeks;
break;
case 'Line_3':
ProductData = AllData.Line_3.equipmentProductWeeks;
break;
case 'Line_4':
ProductData = AllData.Line_4.equipmentProductWeeks;
break;
}
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{ProductData.map((item, index) => (
<StyledTableRow key={index}>
<StyledTableCell align="center">{item.sectionName}</StyledTableCell>
<StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
<StyledTableCell align="center">{item.inputNum}</StyledTableCell>
<StyledTableCell align="center">{item.outputNum}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
)
}
export default RightTableWeekE;

31
src/page/MainE/TopE.tsx
View File

@ -1,31 +0,0 @@
import React, {useContext, useState} from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import {useAppSelector} from "../../store/hooks";
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
import {selectChangeLineID} from "../../store/ChangeLineID";
import ChangeLangButton from "../Component/ChangeLangButton";
import ChangeFullButton from "../Component/ChangeFullButton";
import {ThisLineID} from "../../context/ThisLineID";
function TopE() {
const contextLineID = useContext(ThisLineID);
const Css = useAppSelector(selectChangeLangAndCss);
const LineID = contextLineID;
return (
<div className="flex-row">
<div className="block_28 flex-row">
<div className="image-wrapper_3 flex-col justify-between">
<div className="label_1"/>
{/*<div className="image_1"/>*/}
</div>
<span className={Css.text_1}>{intl.get('TITLE_E') + "(" + intl.get('ProductLine') + LineID + ")"}</span>
</div>
<ChangeLangButton/>
<ChangeFullButton/>
</div>
);
}
export default TopE;

17
src/page/MainP/Center.tsx
View File

@ -1,17 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import CenterUp from "./CenterUp";
import CenterDown from "./CenterDown";
function Center() {
return (
<div className="group_72 flex-col">
<CenterUp/>
<CenterDown/>
</div>
);
}
export default Center;

59
src/page/MainP/CenterDown.tsx
View File

@ -1,59 +0,0 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import "../style/standard.css"
import CenterDownChartDay from "./CenterDown/CenterDownChartDay";
import {ToggleButtonGroup} from "@mui/material";
import {StyledToggleButton} from "../Component/StyledTable";
import TabPanel from "../Component/TabPanel";
import CenterDownChartWeek from "./CenterDown/CenterDownChartWeek";
import CenterDownChartMonth from "./CenterDown/CenterDownChartMonth";
function CenterDown() {
const [time, setTime] = useState(1);
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
if (newTime !== null) {
setTime(newTime);
clearTimeout(timeout)
}
};
const timeout = setTimeout(() => {
if (time < 3) {
setTime(time + 1)
} else {
setTime(1)
}
}, 5000)
return (
<div className="block_18 fineWin">
<div className="fineWin-footer"/>
<div className="group_74 flex-col">
<div className="group_75 flex-row">
<div className="box_24 flex-col"/>
<span className="text_97">{intl.get('YieldLineChart')}</span>
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "480px"}}>
<StyledToggleButton value={1}>
{intl.get('ThisDay')}
</StyledToggleButton>
<StyledToggleButton value={2}>
{intl.get('ThisWeek')}
</StyledToggleButton>
<StyledToggleButton value={3}>
{intl.get('ThisMonth')}
</StyledToggleButton>
</ToggleButtonGroup>
</div>
<div className={"CenterDownAreaWidthAndHeight"}>
<TabPanel index={1} value={time}><CenterDownChartDay/></TabPanel>
<TabPanel index={2} value={time}><CenterDownChartWeek/></TabPanel>
<TabPanel index={3} value={time}><CenterDownChartMonth/></TabPanel>
</div>
</div>
</div>
);
}
export default CenterDown;

95
src/page/MainP/CenterDown/CenterDownChartDay.tsx
View File

@ -1,95 +0,0 @@
import React, {useEffect, useRef} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectTodayProductionRates} from "../../../store/ProductionMonitoringEntity";
function CenterDownChartDay() {
const CenterDownChartRef = useRef(null)
const todayProductionRates = useAppSelector(selectTodayProductionRates);
let ValueSeries: any[] = [];
let xAxisData: Array<string> = [];
// @ts-ignore
todayProductionRates[Object.keys(todayProductionRates)[0]].map((item) => {
xAxisData.push(new Date(item.time).toLocaleTimeString('en-GB', {hour: '2-digit', minute: '2-digit'}))
})
for (let item in todayProductionRates) {
let dataValue: Array<number> = []
// @ts-ignore
todayProductionRates[item].map((item) => {
dataValue.push(item.passRate);
})
ValueSeries.push({
name: item,
data: dataValue,
lineStyle: {width: 1},
symbol: "roundRect",
type: "line",
label: {show: true, color: 'white'}
})
}
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(CenterDownChartRef.current, theme);
const option = {
grid: {
top: "15%",
bottom: "0%",
left: "1.5%",
right: "0",
containLabel: true,
},
legend: {
show: true,
selectedMode: false,
itemHeight: 8,
itemWidth: 13,
textStyle: {
fontSize: 10,
}
},
xAxis: {
type: 'category',
data: xAxisData,
splitLine: {
show: false,
}
},
yAxis: {
type: 'value',
name: intl.get('Output'),
scale: true,
nameTextStyle: {
align: "right",
fontSize: 11,
color: "rgba(255, 255, 255, 1)",
verticalAlign: "middle",
padding: [0, 5, 0, 0]
}
},
series: ValueSeries
}
chartInstance.setOption(option);
chartInstance.resize();
return () => {
chartInstance.dispose()
}
})
return (
<div ref={CenterDownChartRef} className="chart2"/>
);
}
export default CenterDownChartDay;

102
src/page/MainP/CenterDown/CenterDownChartMonth.tsx
View File

@ -1,102 +0,0 @@
import React, {useEffect, useRef} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectMonthProductionRates} from "../../../store/ProductionMonitoringEntity";
function CenterDownChartMonth() {
const CenterDownChartRef = useRef(null)
const ProductionRates = useAppSelector(selectMonthProductionRates);
let ValueSeries: any[] = [];
let xAxisData: Array<string> = [];
// @ts-ignore
ProductionRates[Object.keys(ProductionRates)[0]].map((item) => {
xAxisData.push(new Date(item.time).toLocaleDateString('en-US', {
month: '2-digit',
day: '2-digit',
}))
})
for (let item in ProductionRates) {
let dataValue: Array<number> = []
// @ts-ignore
ProductionRates[item].map((item) => {
dataValue.push(item.passRate);
})
ValueSeries.push({
name: item,
data: dataValue,
lineStyle: {width: 2},
symbol: "roundRect",
type: "line",
label: {show: true, color: 'white'}
})
}
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(CenterDownChartRef.current, theme);
const option = {
grid: {
top: "15%",
bottom: "0%",
left: "1.5%",
right: "0",
containLabel: true,
},
legend: {
show: true,
selectedMode: false,
itemHeight: 8,
itemWidth: 13,
textStyle: {
fontSize: 10,
}
},
xAxis: {
type: 'category',
data: xAxisData,
splitLine: {
show: false,
}
},
yAxis: {
type: 'value',
name: intl.get('Output'),
scale: true,
nameTextStyle: {
align: "right",
fontSize: 11,
color: "rgba(255, 255, 255, 1)",
verticalAlign: "middle",
padding: [0, 5, 0, 0]
}
},
series: ValueSeries
}
chartInstance.setOption(option);
chartInstance.resize();
return () => {
chartInstance.dispose()
}
})
return (
<div ref={CenterDownChartRef} className="chart2"/>
);
}
export default CenterDownChartMonth;

101
src/page/MainP/CenterDown/CenterDownChartWeek.tsx
View File

@ -1,101 +0,0 @@
import React, {useEffect, useRef} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectWeekProductionRates} from "../../../store/ProductionMonitoringEntity";
function CenterDownChartWeek() {
const CenterDownChartRef = useRef(null)
const ProductionRates = useAppSelector(selectWeekProductionRates);
let ValueSeries: any[] = [];
let xAxisData: Array<string> = [];
// @ts-ignore
ProductionRates[Object.keys(ProductionRates)[0]].map((item) => {
xAxisData.push(new Date(item.time).toLocaleDateString('en-US', {
month: '2-digit',
day: '2-digit',
weekday: 'short',
}))
})
for (let item in ProductionRates) {
let dataValue: Array<number> = []
// @ts-ignore
ProductionRates[item].map((item) => {
dataValue.push(item.passRate);
})
ValueSeries.push({
name: item,
data: dataValue,
lineStyle: {width: 2},
symbol: "roundRect",
type: "line",
label: {show: true, color: 'white'}
})
}
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(CenterDownChartRef.current, theme);
const option = {
grid: {
top: "15%",
bottom: "0%",
left: "1.5%",
right: "0",
containLabel: true,
},
legend: {
show: true,
selectedMode: false,
itemHeight: 8,
itemWidth: 13,
textStyle: {
fontSize: 10,
}
},
xAxis: {
type: 'category',
data: xAxisData,
splitLine: {
show: false,
}
},
yAxis: {
type: 'value',
name: intl.get('Output'),
scale: true,
nameTextStyle: {
align: "right",
fontSize: 11,
color: "rgba(255, 255, 255, 1)",
verticalAlign: "middle",
padding: [0, 5, 0, 0]
}
},
series: ValueSeries
}
chartInstance.setOption(option);
chartInstance.resize();
return () => {
chartInstance.dispose()
}
})
return (
<div ref={CenterDownChartRef} className="chart2"/>
);
}
export default CenterDownChartWeek;

41
src/page/MainP/CenterUp.tsx
View File

@ -1,41 +0,0 @@
import React, { useState } from "react"; // 使用useState钩子来管理状态
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import "../style/standard.css"
import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
import { number } from "echarts";
import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
function CenterUp() {
// 使用 useState 钩子来管理当前的序号状态
const [modelIndex, setModelIndex] = useState(1); // 默认序号为 1
// 定义切换模型序号的函数
const prevModelIndex = () => {
// 当前序号减 1，如果小于 1，则变为 5
setModelIndex((currentModelIndex) => (currentModelIndex - 1 + 5) % 5);
};
const nextModelIndex = () => {
// 当前序号加 1，如果大于 5，则变为 1
setModelIndex((currentModelIndex) => (currentModelIndex + 1) % 5);
};
return (
<div className="block_16 flex-col fineWin">
<div className="fineWin-footer"/>
<MybabylonJS_1 modelPath={`line${modelIndex+1}`} />
{/* 添加按钮来切换组件 */}
<button className="centerButton_1" onClick={prevModelIndex}>上一个组件</button>
<button className="centerButton_2" onClick={nextModelIndex}>下一个组件</button>
<h5 className="centerButton_2" >{modelIndex}</h5>
</div>
);
}
export default CenterUp;

46
src/page/MainP/CenterUp_Backup.tsx
View File

@ -1,46 +0,0 @@
import React, { useState } from "react"; // 使用useState钩子来管理状态
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import "../style/standard.css"
import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
import { number } from "echarts";
import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
function CenterUp() {
// 使用useState来初始化当前显示的组件
const [components, setComponents] = useState([MybabylonJS_1, MybabylonJS_2]);
const [currentComponentIndex, setCurrentComponentIndex] = useState(0);
// 切换组件的函数
// 切换组件的函数
const switchComponent = (direction: number) => {
const nextIndex = currentComponentIndex + direction;
if (nextIndex >= 0 && nextIndex < components.length) {
setCurrentComponentIndex(nextIndex);
}
};
// 渲染组件列表
const renderComponents = () => {
return components.map((Component, index) => (
<div key={index} style={{ display: index === currentComponentIndex ? 'block' : 'none' }}>
{/* <Component /> */}
</div>
));
};
return (
<div className="block_16 flex-col fineWin">
<div className="fineWin-footer"/>
{/* 渲染当前组件 */}
{renderComponents()}
{/* 添加按钮来切换组件 */}
<button className="centerButton_1" onClick={() => switchComponent(-1)}>上一个组件</button>
<button className="centerButton_2" onClick={() => switchComponent(1)}>下一个组件</button>
</div>
);
}
export default CenterUp;

19
src/page/MainP/Left.tsx
View File

@ -1,19 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import LeftUp from "./LeftUp";
import LeftDown from "./LeftDown";
function Left() {
return (
<div className="group_61 flex-col">
<LeftUp/>
<LeftDown/>
</div>
);
}
export default Left;

49
src/page/MainP/LeftDown.tsx
View File

@ -1,49 +0,0 @@
import React, {useEffect, useRef, useState} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import "../style/standard.css"
import ChartDay from "./LeftDown/ChartDay";
import {useAppSelector} from "../../store/hooks";
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
import ChartWeek from "./LeftDown/ChartWeek";
import ChartMonth from "./LeftDown/ChartMonth";
function LeftDown() {
const Css = useAppSelector(selectChangeLangAndCss);
return (
<div className="block_5 flex-col fineWin">
<div className="fineWin-footer"/>
<div className="group_62 flex-row justify-between">
<div className="block_6 flex-col"/>
<span className="text_33">{intl.get('eachLineInputAndOutput')}</span>
</div>
<div className="group_63 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisDay')}</span>
<div className="box_5 flex-col"/>
</div>
<ChartDay/>
<div className="group_63 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisWeek')}</span>
<div className="box_5 flex-col"/>
</div>
<ChartWeek/>
<div className="group_63 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisMonth')}</span>
<div className="box_5 flex-col"/>
</div>
<ChartMonth/>
</div>
);
}
export default LeftDown;

91
src/page/MainP/LeftDown/ChartDay.tsx
View File

@ -1,91 +0,0 @@
import React, {useEffect, useRef, useState} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectTodayProductionDets} from "../../../store/ProductionMonitoringEntity";
const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]
interface barValue {
value: number,
itemStyle: {
color: string
}
}
function ChartDay() {
const chartRef = useRef(null)
const ProductionDets = useAppSelector(selectTodayProductionDets);
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(chartRef.current, theme);
const lineNameList: Array<string> = [];
const outputNumList: Array<barValue> = [];
ProductionDets.map((item, index) => {
lineNameList.push(item.lineName);
outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
})
const option = {
grid: {
top: "15%",
bottom: "0%",
left: "5%",
right: "5%",
containLabel: true,
},
xAxis: {
type: 'category',
data: lineNameList,
splitLine: {
show: false,
}
},
yAxis: {
type: 'value',
name: intl.get('Output'),
scale: false,
nameTextStyle: {
align: "right",
fontSize: 10,
color: "rgba(255, 255, 255, 1)",
verticalAlign: "middle",
padding: [0, 8, 0, 0]
}
},
series: [
{
data: outputNumList,
type: 'bar',
barWidth: 20,
symbol: "none",
label: {
show: true,
rotate: 90,
fontSize: 16,
color: "rgba(255, 255, 255, 1)",
offset:[0,22]
}
}
]
}
chartInstance.setOption(option);
chartInstance.resize();
return () => {
chartInstance.dispose()
}
})
return (
<div ref={chartRef} className="chart1"/>
);
}
export default ChartDay;

91
src/page/MainP/LeftDown/ChartMonth.tsx
View File

@ -1,91 +0,0 @@
import React, {useEffect, useRef, useState} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectMonthProductionDets} from "../../../store/ProductionMonitoringEntity";
const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]
interface barValue {
value: number,
itemStyle: {
color: string
}
}
function ChartMonth() {
const chartRef = useRef(null)
const ProductionDets = useAppSelector(selectMonthProductionDets);
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(chartRef.current, theme);
const lineNameList: Array<string> = [];
const outputNumList: Array<barValue> = [];
ProductionDets.map((item, index) => {
lineNameList.push(item.lineName);
outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
})
const option = {
grid: {
top: "15%",
bottom: "0%",
left: "5%",
right: "5%",
containLabel: true,
},
xAxis: {
type: 'category',
data: lineNameList,
splitLine: {
show: false,
}
},
yAxis: {
type: 'value',
name: intl.get('Output'),
scale: false,
nameTextStyle: {
align: "right",
fontSize: 10,
color: "rgba(255, 255, 255, 1)",
verticalAlign: "middle",
padding: [0, 8, 0, 0]
}
},
series: [
{
data: outputNumList,
type: 'bar',
barWidth: 20,
symbol: "none",
label: {
show: true,
rotate: 90,
fontSize: 16,
color: "rgba(255, 255, 255, 1)",
offset:[0,22]
}
}
]
}
chartInstance.setOption(option);
chartInstance.resize();
return () => {
chartInstance.dispose()
}
})
return (
<div ref={chartRef} className="chart1"/>
);
}
export default ChartMonth;

91
src/page/MainP/LeftDown/ChartWeek.tsx
View File

@ -1,91 +0,0 @@
import React, {useEffect, useRef, useState} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectWeekProductionDets} from "../../../store/ProductionMonitoringEntity";
const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]
interface barValue {
value: number,
itemStyle: {
color: string
}
}
function ChartWeek() {
const chartRef = useRef(null)
const ProductionDets = useAppSelector(selectWeekProductionDets);
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(chartRef.current, theme);
const lineNameList: Array<string> = [];
const outputNumList: Array<barValue> = [];
ProductionDets.map((item, index) => {
lineNameList.push(item.lineName);
outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
})
const option = {
grid: {
top: "15%",
bottom: "0%",
left: "5%",
right: "5%",
containLabel: true,
},
xAxis: {
type: 'category',
data: lineNameList,
splitLine: {
show: false,
}
},
yAxis: {
type: 'value',
name: intl.get('Output'),
scale: false,
nameTextStyle: {
align: "right",
fontSize: 10,
color: "rgba(255, 255, 255, 1)",
verticalAlign: "middle",
padding: [0, 8, 0, 0]
}
},
series: [
{
data: outputNumList,
type: 'bar',
barWidth: 20,
symbol: "none",
label: {
show: true,
rotate: 90,
fontSize: 16,
color: "rgba(255, 255, 255, 1)",
offset:[0,22]
}
}
]
}
chartInstance.setOption(option);
chartInstance.resize();
return () => {
chartInstance.dispose()
}
})
return (
<div ref={chartRef} className="chart1"/>
);
}
export default ChartWeek;

31
src/page/MainP/LeftUp.tsx
View File

@ -1,31 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import "../style/standard.css"
import LeftUpTable from "./LeftUp/LeftUpTable";
import {useAppSelector} from "../../store/hooks";
import {selectSumNumber} from "../../store/ProductionMonitoringEntity";
function LeftUp() {
const data = useAppSelector(selectSumNumber);
return (
<div className="block_3 flex-col fineWin">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="block_4 flex-col"/>
<span className="text_2">{intl.get('alarmInfo')}</span>
</div>
<span className="text_3">-&nbsp;{intl.get("alarmsNumber")}&nbsp;-</span>
<span className="text_4">{data}</span>
<div className="leftUpTableArea">
<LeftUpTable/>
</div>
</div>
);
}
export default LeftUp;

50
src/page/MainP/LeftUp/LeftUpTable.tsx
View File

@ -1,50 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {Table, TableBody, TableHead,} from "@mui/material";
import {useAppSelector} from "../../../store/hooks";
import {selectAlarms} from "../../../store/ProductionMonitoringEntity";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
function LeftUpTable() {
const alarms = useAppSelector(selectAlarms);
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center" sx={{minWidth: 35}}>{intl.get('serialNo')}</StyledTableCell>
<StyledTableCell align="center" sx={{minWidth: 70}}>{intl.get('alarmTime')}</StyledTableCell>
<StyledTableCell align="center" sx={{minWidth: 110}}>{intl.get('alarmCode')}</StyledTableCell>
<StyledTableCell align="center" sx={{
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}}>{intl.get('alarmContent')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{alarms.map((alarm, index) => (
<StyledTableRow key={index}>
<StyledTableCell align="center">{index + 1}</StyledTableCell>
<StyledTableCell align="center">{alarm.alarmTime}</StyledTableCell>
<StyledTableCell align="center">{alarm.alarmCode}</StyledTableCell>
<StyledTableCell align="center" sx={{
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}}>{alarm.alarmContent}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
);
}
export default LeftUpTable;

28
src/page/MainP/MainP.tsx
View File

@ -1,28 +0,0 @@
import React, {useContext} from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import Left from "./Left";
import Right from "./Right";
import Center from "./Center";
import TopP from "./TopP";
import {Observable} from "@babylonjs/core";
import {MyObservable} from "../../context/MyObservable";
import ReactDOM from "react-dom/client";
function MainP() {
return (
<React.Fragment>
<TopP/>
<div className="block_32 flex-row">
<Left/>
<Center/>
<Right/>
</div>
</React.Fragment>
);
}
export default MainP;

20
src/page/MainP/Right.tsx
View File

@ -1,20 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import RightUp from "./RightUp";
import RightDown from "./RightDown";
function Right() {
return (
<div className="box_34 flex-col">
<RightUp/>
<RightDown/>
</div>
);
}
export default Right;

58
src/page/MainP/RightDown.tsx
View File

@ -1,58 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import "../style/standard.css"
import RightDownTableDay from "./RightDown/RightDownTableDay";
import RightDownTableWeek from "./RightDown/RightDownTableWeek";
import RightDownTableMonth from "./RightDown/RightDownTableMonth";
import {useAppSelector} from "../../store/hooks";
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
function RightDown() {
const Css = useAppSelector(selectChangeLangAndCss);
return (
<div className="box_40 flex-col fineWin">
<div className="fineWin-footer"/>
<div className="image-text_16 flex-row justify-between">
<div className="group_27 flex-col"/>
<span className="text-group_2">{intl.get('InputAndOutputTable')}</span>
</div>
<div className="group_63_2 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisDay')}</span>
<div className="box_5 flex-col"/>
</div>
<div className="rightDownTableArea">
<RightDownTableDay/>
</div>
<div className="group_63_2 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisWeek')}</span>
<div className="box_5 flex-col"/>
</div>
<div className="rightDownTableArea">
<RightDownTableWeek/>
</div>
<div className="group_63_2 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisMonth')}</span>
<div className="box_5 flex-col"/>
</div>
<div className="rightDownTableArea">
<RightDownTableMonth/>
</div>
</div>
);
}
export default RightDown;

40
src/page/MainP/RightDown/RightDownTableDay.tsx
View File

@ -1,40 +0,0 @@
import React, {useEffect, useRef, useState} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {Table, TableBody, TableHead,} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {useAppSelector} from "../../../store/hooks";
import {selectTodayProductionDets} from "../../../store/ProductionMonitoringEntity";
function RightDownTableDay() {
const todayProductionDets = useAppSelector(selectTodayProductionDets);
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{todayProductionDets.map((todayProductionDet) => (
<StyledTableRow key={todayProductionDet.lineName}>
<StyledTableCell align="center">{todayProductionDet.lineName}</StyledTableCell>
<StyledTableCell align="center">{todayProductionDet.inputNum}</StyledTableCell>
<StyledTableCell align="center">{todayProductionDet.outputNum}</StyledTableCell>
<StyledTableCell align="center">{todayProductionDet.passRate}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
);
}
export default RightDownTableDay;

40
src/page/MainP/RightDown/RightDownTableMonth.tsx
View File

@ -1,40 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {Table, TableBody, TableHead,} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {useAppSelector} from "../../../store/hooks";
import {selectMonthProductionDets} from "../../../store/ProductionMonitoringEntity";
function RightDownTableMonth() {
const monthProductionRates = useAppSelector(selectMonthProductionDets);
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{monthProductionRates.map((monthProductionRate) => (
<StyledTableRow key={monthProductionRate.lineName}>
<StyledTableCell align="center">{monthProductionRate.lineName}</StyledTableCell>
<StyledTableCell align="center">{monthProductionRate.inputNum}</StyledTableCell>
<StyledTableCell align="center">{monthProductionRate.outputNum}</StyledTableCell>
<StyledTableCell align="center">{monthProductionRate.passRate}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
);
}
export default RightDownTableMonth;

40
src/page/MainP/RightDown/RightDownTableWeek.tsx
View File

@ -1,40 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {Table, TableBody, TableHead,} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {useAppSelector} from "../../../store/hooks";
import {selectWeekProductionDets} from "../../../store/ProductionMonitoringEntity";
function RightDownTableWeek() {
const weekProductionDets = useAppSelector(selectWeekProductionDets);
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{weekProductionDets.map((weekProductionDet) => (
<StyledTableRow key={weekProductionDet.lineName}>
<StyledTableCell align="center">{weekProductionDet.lineName}</StyledTableCell>
<StyledTableCell align="center">{weekProductionDet.inputNum}</StyledTableCell>
<StyledTableCell align="center">{weekProductionDet.outputNum}</StyledTableCell>
<StyledTableCell align="center">{weekProductionDet.passRate}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
);
}
export default RightDownTableWeek;

26
src/page/MainP/RightUp.tsx
View File

@ -1,26 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import "../style/standard.css"
import RightUpTable from "./RightUp/RightUpTable";
function RightUp() {
return (
<div className="box_35 flex-row fineWin">
<div className="fineWin-footer"/>
<div className="box_78 flex-col">
<div className="group_78 flex-row justify-between">
<div className="box_36 flex-col"/>
<span className="text_123">{intl.get('InputAndOutputSummaryTable')}</span>
</div>
<div style={{marginTop: 13, marginLeft: 7, marginRight: 7,}}>
<RightUpTable/>
</div>
</div>
</div>
);
}
export default RightUp;

39
src/page/MainP/RightUp/RightUpTable.tsx
View File

@ -1,39 +0,0 @@
import React, {useEffect, useRef, useState} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import {Table, TableBody, TableHead} from "@mui/material";
import {useAppSelector} from "../../../store/hooks";
import {selectSumProductionDets} from "../../../store/ProductionMonitoringEntity";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
function RightUpTable() {
const sumProductionDets = useAppSelector(selectSumProductionDets);
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
<StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{sumProductionDets.map((sumProductionDets) => (
<StyledTableRow key={sumProductionDets.lineName}>
<StyledTableCell align="center">{sumProductionDets.lineName}</StyledTableCell>
<StyledTableCell align="center">{sumProductionDets.inputNum}</StyledTableCell>
<StyledTableCell align="center">{sumProductionDets.outputNum}</StyledTableCell>
<StyledTableCell align="center">{sumProductionDets.passRate}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
);
}
export default RightUpTable;

27
src/page/MainP/TopP.tsx
View File

@ -1,27 +0,0 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import {useAppSelector} from "../../store/hooks";
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
import ChangeLangButton from "../Component/ChangeLangButton";
import ChangeFullButton from "../Component/ChangeFullButton";
function TopP() {
const Css = useAppSelector(selectChangeLangAndCss);
return (
<div className="flex-row">
<div className="block_28 flex-row">
<div className="image-wrapper_3 flex-col justify-between">
<div className="label_1"/>
{/*<div className="image_1"/>*/}
</div>
<span className={Css.text_1}>{intl.get('TITLE')}</span>
</div>
<ChangeLangButton/>
<ChangeFullButton/>
</div>
);
}
export default TopP;

57
src/page/MainQ/LeftQ.tsx
View File

@ -1,57 +0,0 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import '../../lanhuapp/index.css';
import {useAppSelector} from "../../store/hooks";
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
import LeftTableDayQ from "./LeftQ/LeftTableDayQ";
import LeftTableWeekQ from "./LeftQ/LeftTableWeekQ";
import LeftTableMonthQ from "./LeftQ/LeftTableMonthQ";
function LeftQ() {
const Css = useAppSelector(selectChangeLangAndCss);
return (
<div className="group_Q_left">
<div className="leftQ fineWin flex-col">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="block_6 flex-col"/>
<span className="text_2">{intl.get('DefectSummary')}</span>
</div>
<div className="group_63_3 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisDay')}</span>
<div className="box_5 flex-col"/>
</div>
<div className="leftTableDayQ">
<LeftTableDayQ/>
</div>
<div className="group_63_3 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisWeek')}</span>
<div className="box_5 flex-col"/>
</div>
<div className="leftTableWeekQ">
<LeftTableWeekQ/>
</div>
<div className="group_63_3 flex-row">
<div className="box_4 flex-col"/>
<span className={Css.text_34}>{intl.get('ThisMonth')}</span>
<div className="box_5 flex-col"/>
</div>
<div className="leftTableMonthQ">
<LeftTableMonthQ/>
</div>
</div>
</div>
)
}
export default LeftQ;

41
src/page/MainQ/LeftQ/LeftTableDayQ.tsx
View File

@ -1,41 +0,0 @@
import React from "react";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {Table, TableBody, TableHead} from "@mui/material";
import intl from "react-intl-universal";
import {useAppSelector} from "../../../store/hooks";
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
function LeftTableDayQ() {
const AllData = useAppSelector(selectQualityMonitorEntity);
const QualityAll = AllData.todayQualityAll;
const SlicedQualityAll = QualityAll.slice(0, 6)
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center" sx={{width: 100}}>{intl.get('serialNo')}</StyledTableCell>
<StyledTableCell align="center" sx={{width: 250}}>{intl.get('DefectType')}</StyledTableCell>
<StyledTableCell align="center" sx={{width: 120}}>{intl.get('DefectNumber')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{SlicedQualityAll.map((item, index) => (
<StyledTableRow key={index}>
<StyledTableCell align="center">{item.sort}</StyledTableCell>
<StyledTableCell align="center" sx={{
maxWidth: 250,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}}>{item.content}</StyledTableCell>
<StyledTableCell align="center">{item.num}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
)
}
export default LeftTableDayQ;

41
src/page/MainQ/LeftQ/LeftTableMonthQ.tsx
View File

@ -1,41 +0,0 @@
import React from "react";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {Table, TableBody, TableHead} from "@mui/material";
import intl from "react-intl-universal";
import {useAppSelector} from "../../../store/hooks";
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
function LeftTableMonthQ() {
const AllData = useAppSelector(selectQualityMonitorEntity);
const QualityAll = AllData.monthQualityAll;
const SlicedQualityAll = QualityAll.slice(0, 10)
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center" sx={{width: 100}}>{intl.get('serialNo')}</StyledTableCell>
<StyledTableCell align="center" sx={{width: 250}}>{intl.get('DefectType')}</StyledTableCell>
<StyledTableCell align="center" sx={{width: 120}}>{intl.get('DefectNumber')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{SlicedQualityAll.map((item, index) => (
<StyledTableRow key={index}>
<StyledTableCell align="center">{item.sort}</StyledTableCell>
<StyledTableCell align="center" sx={{
maxWidth: 250,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}}>{item.content}</StyledTableCell>
<StyledTableCell align="center">{item.num}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
)
}
export default LeftTableMonthQ;

41
src/page/MainQ/LeftQ/LeftTableWeekQ.tsx
View File

@ -1,41 +0,0 @@
import React from "react";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
import {Table, TableBody, TableHead} from "@mui/material";
import intl from "react-intl-universal";
import {useAppSelector} from "../../../store/hooks";
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
function LeftTableWeekQ() {
const AllData = useAppSelector(selectQualityMonitorEntity);
const QualityAll = AllData.weekQualityAll;
const SlicedQualityAll = QualityAll.slice(0, 9)
return (
<StyledTableContainer>
<Table>
<TableHead>
<StyledTableRow>
<StyledTableCell align="center" sx={{width: 100}}>{intl.get('serialNo')}</StyledTableCell>
<StyledTableCell align="center" sx={{width: 250}}>{intl.get('DefectType')}</StyledTableCell>
<StyledTableCell align="center" sx={{width: 120}}>{intl.get('DefectNumber')}</StyledTableCell>
</StyledTableRow>
</TableHead>
<TableBody>
{SlicedQualityAll.map((item, index) => (
<StyledTableRow key={index}>
<StyledTableCell align="center">{item.sort}</StyledTableCell>
<StyledTableCell align="center" sx={{
maxWidth: 250,
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
}}>{item.content}</StyledTableCell>
<StyledTableCell align="center">{item.num}</StyledTableCell>
</StyledTableRow>
))}
</TableBody>
</Table>
</StyledTableContainer>
)
}
export default LeftTableWeekQ;

18
src/page/MainQ/MainQ.tsx
View File

@ -1,18 +0,0 @@
import React from "react";
import TopQ from "./TopQ";
import LeftQ from "./LeftQ";
import RightQ from "./RightQ";
function MainQ() {
return (
<React.Fragment>
<TopQ/>
<div className="block_32 flex-row">
<LeftQ/>
<RightQ/>
</div>
</React.Fragment>
)
}
export default MainQ;

26
src/page/MainQ/RightQ.tsx
View File

@ -1,26 +0,0 @@
import React from "react";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import RightTopQ from "./RightQ/RightTopQ";
import RightMiddleLeftQ from "./RightQ/RightMiddleLeftQ";
import RightMiddleRightQ from "./RightQ/RightMiddleRightQ";
import RightDownLeftQ from "./RightQ/RightDownLeftQ";
import RightDownRightQ from "./RightQ/RightDownRightQ";
function RightQ() {
return (
<div className="group_Q_Right flex-col">
<RightTopQ/>
<div className="flex-row RightMiddle">
<RightMiddleLeftQ/>
<RightMiddleRightQ/>
</div>
<div className="flex-row RightMiddle">
<RightDownLeftQ/>
<RightDownRightQ/>
</div>
</div>
);
}
export default RightQ;

56
src/page/MainQ/RightQ/RightDownLeftQ.tsx
View File

@ -1,56 +0,0 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import {StyledToggleButton} from "../../Component/StyledTable";
import {ToggleButtonGroup} from "@mui/material";
import TabPanel from "../../Component/TabPanel";
import QualityRightTable from "../../Component/QualityRightTable";
function RightDownLeftQ() {
const [time, setTime] = useState(1);
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
if (newTime !== null) {
setTime(newTime);
clearTimeout(timeout)
}
};
const timeout = setTimeout(() => {
if (time < 3) {
setTime(time + 1)
} else {
setTime(1)
}
}, 5000)
return (
<div className="fineWin flex-col RightMiddleLeftQ">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="box_36 flex-col"/>
<span className="text_2">{intl.get('DefectSummaryLine3')}</span>
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "270px"}}>
<StyledToggleButton value={1} sx={{width: "64px"}}>
{intl.get('ThisDayShort')}
</StyledToggleButton>
<StyledToggleButton value={2} sx={{width: "64px"}}>
{intl.get('ThisWeekShort')}
</StyledToggleButton>
<StyledToggleButton value={3} sx={{width: "64px"}}>
{intl.get('ThisMonthShort')}
</StyledToggleButton>
</ToggleButtonGroup>
</div>
<div>
<TabPanel index={1} value={time}><QualityRightTable lineName={"Line_3"}
timeName={"todayQualityLineAll"}/></TabPanel>
<TabPanel index={2} value={time}><QualityRightTable lineName={"Line_3"}
timeName={"weekQualityLineAll"}/></TabPanel>
<TabPanel index={3} value={time}><QualityRightTable lineName={"Line_3"}
timeName={"monthQualityLineAll"}/></TabPanel>
</div>
</div>
)
}
export default RightDownLeftQ;

55
src/page/MainQ/RightQ/RightDownRightQ.tsx
View File

@ -1,55 +0,0 @@
import React, {useState} from "react";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import intl from "react-intl-universal";
import {StyledToggleButton} from "../../Component/StyledTable";
import {ToggleButtonGroup} from "@mui/material";
import TabPanel from "../../Component/TabPanel";
import QualityRightTable from "../../Component/QualityRightTable";
function RightDownRightQ() {
const [time, setTime] = useState(1);
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
if (newTime !== null) {
setTime(newTime);
clearTimeout(timeout)
}
};
const timeout = setTimeout(() => {
if (time < 3) {
setTime(time + 1)
} else {
setTime(1)
}
}, 5000)
return (
<div className="fineWin flex-col RightMiddleRightQ">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="box_36 flex-col"/>
<span className="text_2">{intl.get('DefectSummaryLine4')}</span>
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "270px"}}>
<StyledToggleButton value={1} sx={{width: "64px"}}>
{intl.get('ThisDayShort')}
</StyledToggleButton>
<StyledToggleButton value={2} sx={{width: "64px"}}>
{intl.get('ThisWeekShort')}
</StyledToggleButton>
<StyledToggleButton value={3} sx={{width: "64px"}}>
{intl.get('ThisMonthShort')}
</StyledToggleButton>
</ToggleButtonGroup>
</div>
<div>
<TabPanel index={1} value={time}><QualityRightTable lineName={"Line_4"}
timeName={"todayQualityLineAll"}/></TabPanel>
<TabPanel index={2} value={time}><QualityRightTable lineName={"Line_4"}
timeName={"weekQualityLineAll"}/></TabPanel>
<TabPanel index={3} value={time}><QualityRightTable lineName={"Line_4"}
timeName={"monthQualityLineAll"}/></TabPanel>
</div>
</div>
)
}
export default RightDownRightQ;

56
src/page/MainQ/RightQ/RightMiddleLeftQ.tsx
View File

@ -1,56 +0,0 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import {StyledToggleButton} from "../../Component/StyledTable";
import {ToggleButtonGroup} from "@mui/material";
import TabPanel from "../../Component/TabPanel";
import QualityRightTable from "../../Component/QualityRightTable";
function RightMiddleLeftQ() {
const [time, setTime] = useState(1);
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
if (newTime !== null) {
setTime(newTime);
clearTimeout(timeout)
}
};
const timeout = setTimeout(() => {
if (time < 3) {
setTime(time + 1)
} else {
setTime(1)
}
}, 5000)
return (
<div className="fineWin flex-col RightMiddleLeftQ">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="box_36 flex-col"/>
<span className="text_2">{intl.get('DefectSummaryLine1')}</span>
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "270px"}}>
<StyledToggleButton value={1} sx={{width: "64px"}}>
{intl.get('ThisDayShort')}
</StyledToggleButton>
<StyledToggleButton value={2} sx={{width: "64px"}}>
{intl.get('ThisWeekShort')}
</StyledToggleButton>
<StyledToggleButton value={3} sx={{width: "64px"}}>
{intl.get('ThisMonthShort')}
</StyledToggleButton>
</ToggleButtonGroup>
</div>
<div>
<TabPanel index={1} value={time}><QualityRightTable lineName={"Line_1"}
timeName={"todayQualityLineAll"}/></TabPanel>
<TabPanel index={2} value={time}><QualityRightTable lineName={"Line_1"}
timeName={"weekQualityLineAll"}/></TabPanel>
<TabPanel index={3} value={time}><QualityRightTable lineName={"Line_1"}
timeName={"monthQualityLineAll"}/></TabPanel>
</div>
</div>
)
}
export default RightMiddleLeftQ;

56
src/page/MainQ/RightQ/RightMiddleRightQ.tsx
View File

@ -1,56 +0,0 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import {ToggleButtonGroup} from "@mui/material";
import {StyledToggleButton} from "../../Component/StyledTable";
import TabPanel from "../../Component/TabPanel";
import QualityRightTable from "../../Component/QualityRightTable";
function RightMiddleRightQ() {
const [time, setTime] = useState(1);
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
if (newTime !== null) {
setTime(newTime);
clearTimeout(timeout)
}
};
const timeout = setTimeout(() => {
if (time < 3) {
setTime(time + 1)
} else {
setTime(1)
}
}, 5000)
return (
<div className="fineWin flex-col RightMiddleRightQ">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="box_36 flex-col"/>
<span className="text_2">{intl.get('DefectSummaryLine2')}</span>
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "270px"}}>
<StyledToggleButton value={1} sx={{width: "64px"}}>
{intl.get('ThisDayShort')}
</StyledToggleButton>
<StyledToggleButton value={2} sx={{width: "64px"}}>
{intl.get('ThisWeekShort')}
</StyledToggleButton>
<StyledToggleButton value={3} sx={{width: "64px"}}>
{intl.get('ThisMonthShort')}
</StyledToggleButton>
</ToggleButtonGroup>
</div>
<div>
<TabPanel index={1} value={time}><QualityRightTable lineName={"Line_2"}
timeName={"todayQualityLineAll"}/></TabPanel>
<TabPanel index={2} value={time}><QualityRightTable lineName={"Line_2"}
timeName={"weekQualityLineAll"}/></TabPanel>
<TabPanel index={3} value={time}><QualityRightTable lineName={"Line_2"}
timeName={"monthQualityLineAll"}/></TabPanel>
</div>
</div>
)
}
export default RightMiddleRightQ;

55
src/page/MainQ/RightQ/RightTopQ.tsx
View File

@ -1,55 +0,0 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import {ToggleButtonGroup} from "@mui/material";
import {StyledToggleButton} from "../../Component/StyledTable";
import TabPanel from "../../Component/TabPanel";
import RightTopChartDayQ from "../RightTopQ/RightTopChartDayQ";
import RightTopChartMonthQ from "../RightTopQ/RightTopChartMonthQ";
import RightTopChartWeekQ from "../RightTopQ/RightTopChartWeekQ";
function RightTopQ() {
const [time, setTime] = useState(1);
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
if (newTime !== null) {
setTime(newTime);
clearTimeout(timeout)
}
};
const timeout = setTimeout(() => {
if (time < 3) {
setTime(time + 1)
} else {
setTime(1)
}
}, 5000)
return (
<div className="fineWin flex-col RightTopQ">
<div className="fineWin-footer"/>
<div className="box_77 flex-row justify-between">
<div className="block_7 flex-col"/>
<span className="text_2">{intl.get('LineDefectSummary')}</span>
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "770px"}}>
<StyledToggleButton value={1} sx={{width: "120px"}}>
{intl.get('ThisDay')}
</StyledToggleButton>
<StyledToggleButton value={2} sx={{width: "120px"}}>
{intl.get('ThisWeek')}
</StyledToggleButton>
<StyledToggleButton value={3} sx={{width: "120px"}}>
{intl.get('ThisMonth')}
</StyledToggleButton>
</ToggleButtonGroup>
</div>
<div>
<TabPanel index={1} value={time}><RightTopChartDayQ/></TabPanel>
<TabPanel index={2} value={time}><RightTopChartWeekQ/></TabPanel>
<TabPanel index={3} value={time}><RightTopChartMonthQ/></TabPanel>
</div>
</div>
)
}
export default RightTopQ;

113
src/page/MainQ/RightTopQ/RightTopChartDayQ.tsx
View File

@ -1,113 +0,0 @@
import React, {useEffect, useRef} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
function RightTopChartDayQ() {
const ChartRef = useRef(null)
const AllData = useAppSelector(selectQualityMonitorEntity);
const LineQualityAll = AllData.todayQualityLineAll;
let ValueSeries: any[] = [];
let xAxisData: Array<string> = [];
for (let item in LineQualityAll) {
// @ts-ignore
LineQualityAll[item].map((item) => {
if (!xAxisData.includes(item.content)) {
xAxisData.push(item.content)
}
})
}
for (let LineItem in LineQualityAll) {
let dataValue: Array<number> = []
xAxisData.map((TypeItem) => {
let thisdata = 0
// @ts-ignore
LineQualityAll[LineItem].map((item) => {
if (item.content == TypeItem) {
thisdata = thisdata + item.num;
}
})
dataValue.push(thisdata)
})
ValueSeries.push({
name: LineItem,
data: dataValue,
type: "bar",
itemStyle: {
borderRadius: [100, 100, 0, 0]
}
})
}
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(ChartRef.current, theme);
const option = {
grid: {
top: "15%",
bottom: "0%",
left: "0%",
right: "0",
containLabel: true,
},
legend: {
show: true,
selectedMode: false,
itemHeight: 8,
itemWidth: 13,
textStyle: {
fontSize: 10,
}
},
xAxis: {
type: 'category',
data: xAxisData,
splitLine: {
show: false,
},
axisLabel: {
width: 1200 / xAxisData.length,
interval: 0,
overflow: "truncate",
}
},
yAxis: {
type: 'value',
name: intl.get('DefectNumber'),
scale: false,
nameTextStyle: {
align: "left",
fontSize: 12,
color: "rgba(255, 255, 255, 1)",
verticalAlign: "middle",
}
},
tooltip: {
trigger: 'axis',
backgroundColor: "rgba(0, 0, 0, 0.5)",
borderWidth: 0,
textStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12
}
},
series: ValueSeries
}
chartInstance.setOption(option);
chartInstance.resize();
})
return (
<div ref={ChartRef} className="chart5"/>
)
}
export default RightTopChartDayQ;

115
src/page/MainQ/RightTopQ/RightTopChartMonthQ.tsx
View File

@ -1,115 +0,0 @@
import React, {useEffect, useRef} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
function RightTopChartMonthQ() {
const ChartRef = useRef(null)
const AllData = useAppSelector(selectQualityMonitorEntity);
const LineQualityAll = AllData.monthQualityLineAll;
let ValueSeries: any[] = [];
let xAxisData: Array<string> = [];
for (let item in LineQualityAll) {
// @ts-ignore
LineQualityAll[item].map((item) => {
if (!xAxisData.includes(item.content)) {
xAxisData.push(item.content)
}
})
}
for (let LineItem in LineQualityAll) {
let dataValue: Array<number> = []
xAxisData.map((TypeItem) => {
let thisdata = 0
// @ts-ignore
LineQualityAll[LineItem].map((item) => {
if (item.content == TypeItem) {
thisdata = thisdata + item.num;
}
})
dataValue.push(thisdata)
})
ValueSeries.push({
name: LineItem,
data: dataValue,
type: "bar",
itemStyle: {
borderRadius: [100, 100, 0, 0]
}
})
}
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(ChartRef.current, theme);
const option = {
grid: {
top: "15%",
bottom: "0%",
left: "0%",
right: "0",
containLabel: true,
},
legend: {
show: true,
selectedMode: false,
itemHeight: 8,
itemWidth: 13,
textStyle: {
fontSize: 10,
}
},
xAxis: {
type: 'category',
data: xAxisData,
splitLine: {
show: false,
},
axisLabel: {
width: 1200 / xAxisData.length,
interval: 0,
overflow: "truncate",
}
},
yAxis: {
type: 'value',
name: intl.get('DefectNumber'),
scale: false,
nameTextStyle: {
align: "left",
fontSize: 12,
color: "rgba(255, 255, 255, 1)",
verticalAlign: "middle",
}
},
tooltip: {
trigger: 'axis',
backgroundColor: "rgba(0, 0, 0, 0.5)",
borderWidth: 0,
textStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12
}
},
series: ValueSeries
}
chartInstance.setOption(option);
chartInstance.resize();
})
return (
<div ref={ChartRef} className="chart5"/>
)
}
export default RightTopChartMonthQ;

115
src/page/MainQ/RightTopQ/RightTopChartWeekQ.tsx
View File

@ -1,115 +0,0 @@
import React, {useEffect, useRef} from "react";
import intl from "react-intl-universal";
import * as echarts from 'echarts';
import '../../../lanhuapp/common.css';
import "../../../lanhuapp/index.css";
import "../../style/standard.css"
import theme from "../../style/theme";
import {useAppSelector} from "../../../store/hooks";
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
function RightTopChartWeekQ() {
const ChartRef = useRef(null)
const AllData = useAppSelector(selectQualityMonitorEntity);
const LineQualityAll = AllData.weekQualityLineAll;
let ValueSeries: any[] = [];
let xAxisData: Array<string> = [];
for (let item in LineQualityAll) {
// @ts-ignore
LineQualityAll[item].map((item) => {
if (!xAxisData.includes(item.content)) {
xAxisData.push(item.content)
}
})
}
for (let LineItem in LineQualityAll) {
let dataValue: Array<number> = []
xAxisData.map((TypeItem) => {
let thisdata = 0
// @ts-ignore
LineQualityAll[LineItem].map((item) => {
if (item.content == TypeItem) {
thisdata = thisdata + item.num;
}
})
dataValue.push(thisdata)
})
ValueSeries.push({
name: LineItem,
data: dataValue,
type: "bar",
itemStyle: {
borderRadius: [100, 100, 0, 0]
}
})
}
useEffect(() => {
// @ts-ignore
let chartInstance = echarts.init(ChartRef.current, theme);
const option = {
grid: {
top: "15%",
bottom: "0%",
left: "0%",
right: "0",
containLabel: true,
},
legend: {
show: true,
selectedMode: false,
itemHeight: 8,
itemWidth: 13,
textStyle: {
fontSize: 10,
}
},
xAxis: {
type: 'category',
data: xAxisData,
splitLine: {
show: false,
},
axisLabel: {
width: 1200 / xAxisData.length,
interval: 0,
overflow: "truncate",
}
},
yAxis: {
type: 'value',
name: intl.get('DefectNumber'),
scale: false,
nameTextStyle: {
align: "left",
fontSize: 12,
color: "rgba(255, 255, 255, 1)",
verticalAlign: "middle",
}
},
tooltip: {
trigger: 'axis',
backgroundColor: "rgba(0, 0, 0, 0.5)",
borderWidth: 0,
textStyle: {
color: "rgba(255, 255, 255, 1)",
fontSize: 12
}
},
series: ValueSeries
}
chartInstance.setOption(option);
chartInstance.resize();
})
return (
<div ref={ChartRef} className="chart5"/>
)
}
export default RightTopChartWeekQ;

27
src/page/MainQ/TopQ.tsx
View File

@ -1,27 +0,0 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import {useAppSelector} from "../../store/hooks";
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
import ChangeLangButton from "../Component/ChangeLangButton";
import ChangeFullButton from "../Component/ChangeFullButton";
function TopE() {
const Css = useAppSelector(selectChangeLangAndCss);
return (
<div className="flex-row">
<div className="block_28 flex-row">
<div className="image-wrapper_3 flex-col justify-between">
<div className="label_1"/>
{/*<div className="image_1"/>*/}
</div>
<span className={Css.text_1}>{intl.get('TITLE_Q')}</span>
</div>
<ChangeLangButton/>
<ChangeFullButton/>
</div>
);
}
export default TopE;

6
src/page/TestPage/CenterUp.tsx
View File

@ -3,8 +3,8 @@ import intl from "react-intl-universal";
import '../../lanhuapp/common.css'; import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css"; import "../../lanhuapp/index.css";
import "../style/standard.css" import "../style/standard.css"
import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1"; // import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2"; // import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
import { number } from "echarts"; import { number } from "echarts";
import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment"; import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
@ -29,7 +29,7 @@ const nextModelIndex = () => {
return ( return (
<div className="block_16 flex-col fineWin"> <div className="block_16 flex-col fineWin">
<div className="fineWin-footer"/> <div className="fineWin-footer"/>
<MybabylonJS_1 modelPath={`line${modelIndex+1}`} /> {/* <MybabylonJS_1 modelPath={`line${modelIndex+1}`} /> */}
{/* 添加按钮来切换组件 */} {/* 添加按钮来切换组件 */}
<button className="centerButton_1" onClick={prevModelIndex}>上一个组件</button> <button className="centerButton_1" onClick={prevModelIndex}>上一个组件</button>
<button className="centerButton_2" onClick={nextModelIndex}>下一个组件</button> <button className="centerButton_2" onClick={nextModelIndex}>下一个组件</button>

4
src/page/TestPage/index.tsx
View File

@ -1,5 +1,5 @@
import "./index.css" import "./index.css"
import MainE from "../MainE/MainE"; import LinePage from "../LinePage";
import {useParams,useNavigate} from "react-router-dom"; import {useParams,useNavigate} from "react-router-dom";
import {useEffect} from 'react'; import {useEffect} from 'react';
function TestPage() { function TestPage() {
@ -30,7 +30,7 @@ useEffect(() => {
<> <>
<div className="main-box">TestPage Line{LineID}</div> <div className="main-box">TestPage Line{LineID}</div>
<div className="main-box" style={{display:'none'}}>3434</div> <div className="main-box" style={{display:'none'}}>3434</div>
<MainE/> <LinePage/>
</> </>
); );
} }

29
src/store/LinePageSlice.ts Normal file
View File

@ -0,0 +1,29 @@
import { createSlice } from "@reduxjs/toolkit";
import type { RootState } from "./store";
const initialState = {
"line1_1":{},
"line1After":{},
"line2Before":{},
"line2After":{},
"line3Before":{},
"line3After":{},
"line4Before":{},
"line4After":{},
"line5Before":{},
"line5After":{}
};
export const LinePageSlice = createSlice({
name: "LinePageSlice",
initialState,
reducers: {
UpdateLine1Before: (state, action) => {
state.line1_1 = action.payload;
},
}
})
export const {
UpdateLine1Before
} = LinePageSlice.actions;
export const selectLine1Before = (state: RootState) =>
state.LinePageSlice.line1_1;
export default LinePageSlice.reducer;

153
src/store/UpdateData.tsx
View File

@ -1,16 +1,8 @@
import React, {useState} from "react"; import React, {useState} from "react";
import {useAppDispatch, useAppSelector} from "./hooks"; import {useAppDispatch, useAppSelector} from "./hooks";
import {
GlassStatus,
SingleGlassStatus,
UpdateGlassStatus,
UpdateProductionMonitoringEntity
} from "./ProductionMonitoringEntity";
import {UpdateEquipmentMonitorEntity} from "./EquipmentMonitorEntity";
import {UpdateQualityMonitorEntity} from "./QualityMonitorEntity";
import axios from "axios"; import axios from "axios";
import {UpdateEquStatus} from "./EquStatusEntity";
import {UpdateLine1Before} from "./LinePageSlice"
//将消息显示在网页上 //将消息显示在网页上
// @ts-ignore // @ts-ignore
@ -18,55 +10,55 @@ function setMessageInnerHTML(innerHTML) {
console.log(innerHTML) console.log(innerHTML)
} }
let initLineGlassStatus: Object = { // let initLineGlassStatus: Object = {
LINE_1_1: 1, // LINE_1_1: 1,
LINE_1_2U: 1, // LINE_1_2U: 1,
LINE_1_2D: 1, // LINE_1_2D: 1,
LINE_1_3: 1, // LINE_1_3: 1,
LINE_1_4: 1, // LINE_1_4: 1,
LINE_2_1: 1, // LINE_2_1: 1,
LINE_2_2U: 1, // LINE_2_2U: 1,
LINE_2_2D: 1, // LINE_2_2D: 1,
LINE_2_3: 1, // LINE_2_3: 1,
LINE_2_4: 1, // LINE_2_4: 1,
LINE_3_1: 1, // LINE_3_1: 1,
LINE_3_2U: 1, // LINE_3_2U: 1,
LINE_3_2D: 1, // LINE_3_2D: 1,
LINE_3_3: 1, // LINE_3_3: 1,
LINE_3_4: 1, // LINE_3_4: 1,
LINE_4_1: 1, // LINE_4_1: 1,
LINE_4_2U: 1, // LINE_4_2U: 1,
LINE_4_2D: 1, // LINE_4_2D: 1,
LINE_4_3: 1, // LINE_4_3: 1,
LINE_4_4: 1, // LINE_4_4: 1,
} // }
function PrepareGlassStatus(action: string) { // function PrepareGlassStatus(action: string) {
let FinalGlassStatus = initLineGlassStatus; // let FinalGlassStatus = initLineGlassStatus;
if (action.includes('客户端')) { // if (action.includes('客户端')) {
return FinalGlassStatus; // return FinalGlassStatus;
} else { // } else {
const ProductionMonitoringEntityData = JSON.parse(action); // const ProductionMonitoringEntityData = JSON.parse(action);
let JsonData = ProductionMonitoringEntityData.lineGlassStatus; // let JsonData = ProductionMonitoringEntityData.lineGlassStatus;
// console.log(JsonData) // // console.log(JsonData)
let keys: Array<string> = []; // let keys: Array<string> = [];
let values: Array<number> = [] // let values: Array<number> = []
let newJson = new Object(); // let newJson = new Object();
JsonData.map((item: SingleGlassStatus) => { // JsonData.map((item: SingleGlassStatus) => {
keys.push(item.lineViewCode); // keys.push(item.lineViewCode);
values.push(item.status); // values.push(item.status);
}) // })
for (let i = 0; i < keys.length; i++) { // for (let i = 0; i < keys.length; i++) {
let keyName = keys[i]; // let keyName = keys[i];
// @ts-ignore // // @ts-ignore
newJson[keyName] = values[i]; // newJson[keyName] = values[i];
} // }
FinalGlassStatus = newJson; // FinalGlassStatus = newJson;
// console.log(FinalGlassStatus) // // console.log(FinalGlassStatus)
return FinalGlassStatus; // return FinalGlassStatus;
} // }
} // }
function UpdateData() { function UpdateData() {
const [myUrl, setUrl] = useState('') const [myUrl, setUrl] = useState('')
@ -74,50 +66,31 @@ function UpdateData() {
.then((r) => { .then((r) => {
setUrl(r.data.url) setUrl(r.data.url)
}) })
let websocketP = null; let websocketB1 = null;
let websocketE = null; let websocketA1 = null;
let websocketQ = null;
if ('WebSocket' in window) { if ('WebSocket' in window) {
websocketP = new WebSocket("ws://" + myUrl + "websocket/P" + Math.random() * 10000000); websocketB1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-1");
websocketE = new WebSocket("ws://" + myUrl + "websocket/E" + Math.random() * 10000000);
websocketQ = new WebSocket("ws://" + myUrl + "websocket/Q" + Math.random() * 10000000);
//连接成功建立的回调方法 //连接成功建立的回调方法
} else { } else {
alert('Not support websocket'); alert('Not support websocket');
} }
// @ts-ignore // @ts-ignore
websocketP.onopen = function (event) { websocketB1.onopen = function (event) {
setMessageInnerHTML("websocketP-open"); setMessageInnerHTML("websocketB1-open");
} }
// @ts-ignore
websocketE.onopen = function (event) {
setMessageInnerHTML("websocketE-open");
}
// @ts-ignore
websocketQ.onopen = function (event) {
setMessageInnerHTML("websocketQ-open");
}
//接收到消息的回调方法 //接收到消息的回调方法
// @ts-ignore // @ts-ignore
websocketP.onmessage = function (event) { websocketB1.onmessage = function (event) {
dispatch(UpdateProductionMonitoringEntity(event.data)); console.log('接收到消息：',event.data)
dispatch(UpdateGlassStatus(PrepareGlassStatus(event.data))) let msgData = event.data
if (event.data.toString().includes('客户端')) { try {
} else { msgData = JSON.parse(event.data);
const PJson = JSON.parse(event.data) } catch (error) {
dispatch(UpdateEquStatus(PJson.equStatus)) console.log("websocket: [unable to msgData] : ", event.data);
} }
} if (!Object.prototype.toString.call(msgData).includes('Object')) return;
console.log(msgData)
// @ts-ignore dispatch(UpdateLine1Before(msgData.data));
websocketE.onmessage = function (event) {
dispatch(UpdateEquipmentMonitorEntity(event.data));
}
// @ts-ignore
websocketQ.onmessage = function (event) {
dispatch(UpdateQualityMonitorEntity(event.data))
} }
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();

5
src/store/store.ts
View File

@ -8,6 +8,8 @@ import QualityMonitorEntityReducer from "./QualityMonitorEntity"
import ChangeSwitchStateReducer from "./ChangeSwitchState" import ChangeSwitchStateReducer from "./ChangeSwitchState"
import EquStatusEntityReducer, {EquStatusEntity} from "./EquStatusEntity" import EquStatusEntityReducer, {EquStatusEntity} from "./EquStatusEntity"
import LinePageReducer from "./LinePageSlice"
export const store = configureStore({ export const store = configureStore({
reducer: { reducer: {
myData: myDataReducer, myData: myDataReducer,
@ -17,7 +19,8 @@ export const store = configureStore({
EquipmentMonitorEntity: EquipmentMonitorEntityReducer, EquipmentMonitorEntity: EquipmentMonitorEntityReducer,
QualityMonitorEntity: QualityMonitorEntityReducer, QualityMonitorEntity: QualityMonitorEntityReducer,
ChangeSwitchState: ChangeSwitchStateReducer, ChangeSwitchState: ChangeSwitchStateReducer,
EquStatusEntity: EquStatusEntityReducer EquStatusEntity: EquStatusEntityReducer,
LinePageSlice: LinePageReducer,
}, },
}) })
; ;