zjl #4

Merged
juzi merged 2 commits from zjl into master 2024-09-11 10:18:50 +08:00
111 changed files with 175 additions and 12245 deletions

26
package-lock.json generated
View File

@ -5842,9 +5842,23 @@
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001481",
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
"integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ=="
"version": "1.0.30001653",
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz",
"integrity": "sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw==",
"funding": [
{
"type": "opencollective",
"url": "https://opencollective.com/browserslist"
},
{
"type": "tidelift",
"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
},
{
"type": "github",
"url": "https://github.com/sponsors/ai"
}
]
},
"node_modules/case-sensitive-paths-webpack-plugin": {
"version": "2.4.0",
@ -21128,9 +21142,9 @@
}
},
"caniuse-lite": {
"version": "1.0.30001481",
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
"integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ=="
"version": "1.0.30001653",
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz",
"integrity": "sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw=="
},
"case-sensitive-paths-webpack-plugin": {
"version": "2.4.0",

Binary file not shown.

Binary file not shown.

View File

@ -1,177 +0,0 @@
{
"accessors": [
{
"bufferView": 0,
"componentType": 5126,
"count": 3575,
"type": "VEC2"
},
{
"bufferView": 1,
"componentType": 5126,
"count": 3575,
"type": "VEC3"
},
{
"bufferView": 2,
"componentType": 5126,
"count": 3575,
"type": "VEC4"
},
{
"bufferView": 3,
"componentType": 5126,
"count": 3575,
"type": "VEC3",
"max": [
0.009921154,
0.00977163,
0.0100762453
],
"min": [
-0.009921154,
-0.00977163,
-0.0100762453
]
},
{
"bufferView": 4,
"componentType": 5123,
"count": 18108,
"type": "SCALAR"
}
],
"asset": {
"generator": "glTF Tools for Unity",
"version": "2.0"
},
"bufferViews": [
{
"buffer": 0,
"byteLength": 28600
},
{
"buffer": 0,
"byteOffset": 28600,
"byteLength": 42900
},
{
"buffer": 0,
"byteOffset": 71500,
"byteLength": 57200
},
{
"buffer": 0,
"byteOffset": 128700,
"byteLength": 42900
},
{
"buffer": 0,
"byteOffset": 171600,
"byteLength": 36216
}
],
"buffers": [
{
"uri": "BoomBox.bin",
"byteLength": 207816
}
],
"images": [
{
"uri": "BoomBox_baseColor.png"
},
{
"uri": "BoomBox_occlusionRoughnessMetallic.png"
},
{
"uri": "BoomBox_normal.png"
},
{
"uri": "BoomBox_emissive.png"
}
],
"meshes": [
{
"primitives": [
{
"attributes": {
"TEXCOORD_0": 0,
"NORMAL": 1,
"TANGENT": 2,
"POSITION": 3
},
"indices": 4,
"material": 0
}
],
"name": "BoomBox"
}
],
"materials": [
{
"pbrMetallicRoughness": {
"baseColorTexture": {
"index": 0
},
"metallicRoughnessTexture": {
"index": 1
}
},
"normalTexture": {
"index": 2
},
"occlusionTexture": {
"index": 1
},
"emissiveFactor": [
1.0,
1.0,
1.0
],
"emissiveTexture": {
"index": 3
},
"name": "BoomBox_Mat"
}
],
"nodes": [
{
"mesh": 0,
"rotation": [
0.0,
1.0,
0.0,
0.0
],
"scale": [ 1, 1, 1 ],
"name": "BoomBox"
}
],
"scene": 0,
"scenes": [
{
"nodes": [
0
]
}
],
"textures": [
{
"name": "baseColor",
"source": 0
},
{
"name": "occlusionRoughnessMetallic",
"source": 1
},
{
"name": "normal",
"source": 2
},
{
"name": "emissive",
"source": 3
}
]
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 130 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.7 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 MiB

View File

@ -1,183 +0,0 @@
{
"accessors": [
{
"bufferView": 0,
"componentType": 5126,
"count": 3575,
"type": "VEC2"
},
{
"bufferView": 1,
"componentType": 5126,
"count": 3575,
"type": "VEC3"
},
{
"bufferView": 2,
"componentType": 5126,
"count": 3575,
"type": "VEC4"
},
{
"bufferView": 3,
"componentType": 5126,
"count": 3575,
"type": "VEC3",
"max": [
0.009921154,
0.00977163,
0.0100762453
],
"min": [
-0.009921154,
-0.00977163,
-0.0100762453
]
},
{
"bufferView": 4,
"componentType": 5123,
"count": 18108,
"type": "SCALAR"
}
],
"asset": {
"generator": "glTF Tools for Unity",
"version": "2.0"
},
"bufferViews": [
{
"buffer": 0,
"byteLength": 28600
},
{
"buffer": 0,
"byteOffset": 28600,
"byteLength": 42900
},
{
"buffer": 0,
"byteOffset": 71500,
"byteLength": 57200
},
{
"buffer": 0,
"byteOffset": 128700,
"byteLength": 42900
},
{
"buffer": 0,
"byteOffset": 171600,
"byteLength": 36216
}
],
"buffers": [
{
"uri": "BoomBox.bin",
"byteLength": 207816
}
],
"extensionsUsed": [
"KHR_materials_unlit"
],
"images": [
{
"uri": "BoomBox_baseColor.png"
},
{
"uri": "BoomBox_occlusionRoughnessMetallic.png"
},
{
"uri": "BoomBox_normal.png"
},
{
"uri": "BoomBox_emissive.png"
}
],
"meshes": [
{
"primitives": [
{
"attributes": {
"TEXCOORD_0": 0,
"NORMAL": 1,
"TANGENT": 2,
"POSITION": 3
},
"indices": 4,
"material": 0
}
],
"name": "BoomBox"
}
],
"materials": [
{
"pbrMetallicRoughness": {
"baseColorTexture": {
"index": 0
},
"metallicRoughnessTexture": {
"index": 1
}
},
"normalTexture": {
"index": 2
},
"occlusionTexture": {
"index": 1
},
"emissiveFactor": [
1.0,
1.0,
1.0
],
"emissiveTexture": {
"index": 3
},
"name": "BoomBox_Mat",
"extensions": {
"KHR_materials_unlit": {}
}
}
],
"nodes": [
{
"mesh": 0,
"rotation": [
0.0,
1.0,
0.0,
0.0
],
"scale": [ 1, 1, 1 ],
"name": "BoomBox"
}
],
"scene": 0,
"scenes": [
{
"nodes": [
0
]
}
],
"textures": [
{
"name": "baseColor",
"source": 0
},
{
"name": "occlusionRoughnessMetallic",
"source": 1
},
{
"name": "normal",
"source": 2
},
{
"name": "emissive",
"source": 3
}
]
}

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -14,7 +14,7 @@
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/
-->
<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.
It will be replaced with the URL of the `public` folder during the build.
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>数智工厂生产监控驾驶舱</title>
</head>
<body style="overflow: hidden">
<noscript>You need to enable JavaScript to run this app.</noscript>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

View File

@ -1,25 +0,0 @@
{
"short_name": "React App",
"name": "Create React App Sample",
"icons": [
{
"src": "favicon.ico",
"sizes": "64x64 32x32 24x24 16x16",
"type": "image/x-icon"
},
{
"src": "logo192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "logo512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": ".",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

Binary file not shown.

Binary file not shown.

View File

@ -1,3 +0,0 @@
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

Binary file not shown.

Binary file not shown.

File diff suppressed because one or more lines are too long

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 971 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 644 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 90 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 401 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 79 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 942 KiB

View File

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

View File

@ -1,23 +1,19 @@
import React, {useEffect, useState, useContext} from 'react';
import intl from 'react-intl-universal';
import React, { useEffect, useState, useContext } from "react";
import intl from "react-intl-universal";
import locales from "./locales/locales";
import './App.css';
import {useAppSelector} from "./store/hooks";
import {selectChangeLangAndCss} from "./store/ChangeLangAndCss";
import {createBrowserRouter, RouterProvider,} from "react-router-dom";
import "./App.css";
import { useAppSelector } from "./store/hooks";
import { selectChangeLangAndCss } from "./store/ChangeLangAndCss";
// import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { createHashRouter, RouterProvider } from "react-router-dom";
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 {Observable} from "@babylonjs/core";
import {selectGlassStatus} from "./store/ProductionMonitoringEntity";
import { MyObservable } from "./context/MyObservable";
import { Observable } from "@babylonjs/core";
import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
import TestPage from "./page/TestPage";
import LDPage from "./page/LDPage"
import LinePage from './page/LinePage';
import LDPage from "./page/LDPage";
import LinePage from "./page/LinePage";
// const LOCALES_LIST = [
// {
@ -33,70 +29,46 @@ import LinePage from './page/LinePage';
const onGlassObservable = new Observable();
function App() {
const thisLineGlassStatus = useAppSelector(selectGlassStatus)
onGlassObservable.notifyObservers(thisLineGlassStatus)
const thisLineGlassStatus = useAppSelector(selectGlassStatus);
onGlassObservable.notifyObservers(thisLineGlassStatus);
const Locale = useAppSelector(selectChangeLangAndCss).Locale;
const setCurrentLocale = (currentLocale: string) => {
intl.init({
currentLocale,
locales: locales,
}).then(() => {
console.log('Language Changed to ' + currentLocale);
});
intl
.init({
currentLocale,
locales: locales,
})
.then(() => {
console.log("Language Changed to " + currentLocale);
});
};
setCurrentLocale(Locale);
const router = createBrowserRouter([
const router = createHashRouter([
{
path: "/",
element: <MainP/>,
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: "/:LineID?",
element: <LinePage />,
errorElement: <ErrorPage />,
},
/////////////////////////////////////////////////////////////////////////////
{
path: "/TP/:LineID?",
element: <TestPage/>,
errorElement: <ErrorPage/>
element: <TestPage />,
errorElement: <ErrorPage />,
},
{
path: "/LD",
element: <LDPage/>,
errorElement: <ErrorPage/>
element: <LDPage />,
errorElement: <ErrorPage />,
},
///////////////////////////////////////////////////////////////
{
path: "/LP/:LineID?",
element: <LinePage/>,
errorElement: <ErrorPage/>
element: <LinePage />,
errorElement: <ErrorPage />,
},
// {
// path: "/TP/:LineID?",
@ -104,11 +76,20 @@ function App() {
// errorElement: <ErrorPage/>
// },
]);
useEffect(() => {
const timerId = setInterval(() => {
window.location.reload();
}, 43200000);
return () => {
clearInterval(timerId);
};
}, []);
return (
<MyObservable.Provider value={onGlassObservable}>
<div className="background">
<RouterProvider router={router}/>
<RouterProvider router={router} />
</div>
</MyObservable.Provider>
);

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>

File diff suppressed because it is too large Load Diff

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;

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;

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;

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;

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;

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;

View File

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

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;

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;

File diff suppressed because it is too large Load Diff

View File

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

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;

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

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>

Before

Width:  |  Height:  |  Size: 2.6 KiB

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

Some files were not shown because too many files have changed in this diff Show More