zjl #2
26
package-lock.json
generated
26
package-lock.json
generated
@ -5842,9 +5842,23 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/caniuse-lite": {
|
"node_modules/caniuse-lite": {
|
||||||
"version": "1.0.30001481",
|
"version": "1.0.30001653",
|
||||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
|
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz",
|
||||||
"integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ=="
|
"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": {
|
"node_modules/case-sensitive-paths-webpack-plugin": {
|
||||||
"version": "2.4.0",
|
"version": "2.4.0",
|
||||||
@ -21128,9 +21142,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"caniuse-lite": {
|
"caniuse-lite": {
|
||||||
"version": "1.0.30001481",
|
"version": "1.0.30001653",
|
||||||
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001481.tgz",
|
"resolved": "https://registry.npmmirror.com/caniuse-lite/-/caniuse-lite-1.0.30001653.tgz",
|
||||||
"integrity": "sha512-KCqHwRnaa1InZBtqXzP98LPg0ajCVujMKjqKDhZEthIpAsJl/YEIa3YvXjGXPVqzZVguccuu7ga9KOE1J9rKPQ=="
|
"integrity": "sha512-XGWQVB8wFQ2+9NZwZ10GxTYC5hk0Fa+q8cSkr0tgvMhYhMHP/QC+WTgrePMDBWiWc/pV+1ik82Al20XOK25Gcw=="
|
||||||
},
|
},
|
||||||
"case-sensitive-paths-webpack-plugin": {
|
"case-sensitive-paths-webpack-plugin": {
|
||||||
"version": "2.4.0",
|
"version": "2.4.0",
|
||||||
|
|||||||
Binary file not shown.
Binary file not shown.
@ -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 |
@ -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 |
@ -14,7 +14,7 @@
|
|||||||
manifest.json provides metadata used when your web app is installed on a
|
manifest.json provides metadata used when your web app is installed on a
|
||||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||||
-->
|
-->
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
|
||||||
<!--
|
<!--
|
||||||
Notice the use of %PUBLIC_URL% in the tags above.
|
Notice the use of %PUBLIC_URL% in the tags above.
|
||||||
It will be replaced with the URL of the `public` folder during the build.
|
It will be replaced with the URL of the `public` folder during the build.
|
||||||
@ -24,7 +24,7 @@
|
|||||||
work correctly both with client-side routing and a non-root public URL.
|
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`.
|
Learn how to configure a non-root public URL by running `npm run build`.
|
||||||
-->
|
-->
|
||||||
<title>React App</title>
|
<title>数智工厂生产监控驾驶舱</title>
|
||||||
</head>
|
</head>
|
||||||
<body style="overflow: hidden">
|
<body style="overflow: hidden">
|
||||||
<noscript>You need to enable JavaScript to run this app.</noscript>
|
<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 |
@ -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.
@ -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 |
@ -1,3 +1,3 @@
|
|||||||
{
|
{
|
||||||
"url": "india.mes.picaiba.com/api/"
|
"url": "192.168.1.40:48080"
|
||||||
}
|
}
|
||||||
103
src/App.tsx
103
src/App.tsx
@ -1,23 +1,19 @@
|
|||||||
import React, {useEffect, useState, useContext} from 'react';
|
import React, { useEffect, useState, useContext } from "react";
|
||||||
import intl from 'react-intl-universal';
|
import intl from "react-intl-universal";
|
||||||
import locales from "./locales/locales";
|
import locales from "./locales/locales";
|
||||||
import './App.css';
|
import "./App.css";
|
||||||
import {useAppSelector} from "./store/hooks";
|
import { useAppSelector } from "./store/hooks";
|
||||||
import {selectChangeLangAndCss} from "./store/ChangeLangAndCss";
|
import { selectChangeLangAndCss } from "./store/ChangeLangAndCss";
|
||||||
import {createBrowserRouter, RouterProvider,} from "react-router-dom";
|
// import { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||||
|
import { createHashRouter, RouterProvider } from "react-router-dom";
|
||||||
|
|
||||||
import ErrorPage from "./page/ErrorPage";
|
import ErrorPage from "./page/ErrorPage";
|
||||||
import MainP from "./page/MainP/MainP";
|
import { MyObservable } from "./context/MyObservable";
|
||||||
import MainE from "./page/MainE/MainE";
|
import { Observable } from "@babylonjs/core";
|
||||||
import MainQ from "./page/MainQ/MainQ";
|
import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
|
||||||
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 TestPage from "./page/TestPage";
|
import TestPage from "./page/TestPage";
|
||||||
import LDPage from "./page/LDPage"
|
import LDPage from "./page/LDPage";
|
||||||
import LinePage from './page/LinePage';
|
import LinePage from "./page/LinePage";
|
||||||
|
|
||||||
// const LOCALES_LIST = [
|
// const LOCALES_LIST = [
|
||||||
// {
|
// {
|
||||||
@ -33,70 +29,46 @@ import LinePage from './page/LinePage';
|
|||||||
const onGlassObservable = new Observable();
|
const onGlassObservable = new Observable();
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
const thisLineGlassStatus = useAppSelector(selectGlassStatus)
|
const thisLineGlassStatus = useAppSelector(selectGlassStatus);
|
||||||
onGlassObservable.notifyObservers(thisLineGlassStatus)
|
onGlassObservable.notifyObservers(thisLineGlassStatus);
|
||||||
|
|
||||||
const Locale = useAppSelector(selectChangeLangAndCss).Locale;
|
const Locale = useAppSelector(selectChangeLangAndCss).Locale;
|
||||||
|
|
||||||
const setCurrentLocale = (currentLocale: string) => {
|
const setCurrentLocale = (currentLocale: string) => {
|
||||||
intl.init({
|
intl
|
||||||
currentLocale,
|
.init({
|
||||||
locales: locales,
|
currentLocale,
|
||||||
}).then(() => {
|
locales: locales,
|
||||||
console.log('Language Changed to ' + currentLocale);
|
})
|
||||||
});
|
.then(() => {
|
||||||
|
console.log("Language Changed to " + currentLocale);
|
||||||
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
setCurrentLocale(Locale);
|
setCurrentLocale(Locale);
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
const router = createHashRouter([
|
||||||
{
|
{
|
||||||
path: "/",
|
path: "/:LineID?",
|
||||||
element: <MainP/>,
|
element: <LinePage />,
|
||||||
errorElement: <ErrorPage/>
|
errorElement: <ErrorPage />,
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/P",
|
|
||||||
element: <MainP/>,
|
|
||||||
errorElement: <ErrorPage/>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/Q",
|
|
||||||
element: <MainQ/>,
|
|
||||||
errorElement: <ErrorPage/>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/E/:LineID?",
|
|
||||||
element: <MainE/>,
|
|
||||||
errorElement: <ErrorPage/>
|
|
||||||
},
|
|
||||||
///////////////////////////////////////////////////////////////////////////
|
|
||||||
{
|
|
||||||
path: "/SA",
|
|
||||||
element: <SwitchAll/>,
|
|
||||||
errorElement: <ErrorPage/>
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: "/SL/:LineID?",
|
|
||||||
element: <SwitchLine/>,
|
|
||||||
errorElement: <ErrorPage/>
|
|
||||||
},
|
},
|
||||||
/////////////////////////////////////////////////////////////////////////////
|
/////////////////////////////////////////////////////////////////////////////
|
||||||
{
|
{
|
||||||
path: "/TP/:LineID?",
|
path: "/TP/:LineID?",
|
||||||
element: <TestPage/>,
|
element: <TestPage />,
|
||||||
errorElement: <ErrorPage/>
|
errorElement: <ErrorPage />,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: "/LD",
|
path: "/LD",
|
||||||
element: <LDPage/>,
|
element: <LDPage />,
|
||||||
errorElement: <ErrorPage/>
|
errorElement: <ErrorPage />,
|
||||||
},
|
},
|
||||||
///////////////////////////////////////////////////////////////
|
///////////////////////////////////////////////////////////////
|
||||||
{
|
{
|
||||||
path: "/LP/:LineID?",
|
path: "/LP/:LineID?",
|
||||||
element: <LinePage/>,
|
element: <LinePage />,
|
||||||
errorElement: <ErrorPage/>
|
errorElement: <ErrorPage />,
|
||||||
},
|
},
|
||||||
// {
|
// {
|
||||||
// path: "/TP/:LineID?",
|
// path: "/TP/:LineID?",
|
||||||
@ -104,11 +76,20 @@ function App() {
|
|||||||
// errorElement: <ErrorPage/>
|
// errorElement: <ErrorPage/>
|
||||||
// },
|
// },
|
||||||
]);
|
]);
|
||||||
|
useEffect(() => {
|
||||||
|
const timerId = setInterval(() => {
|
||||||
|
window.location.reload();
|
||||||
|
}, 43200000);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
clearInterval(timerId);
|
||||||
|
};
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<MyObservable.Provider value={onGlassObservable}>
|
<MyObservable.Provider value={onGlassObservable}>
|
||||||
<div className="background">
|
<div className="background">
|
||||||
<RouterProvider router={router}/>
|
<RouterProvider router={router} />
|
||||||
</div>
|
</div>
|
||||||
</MyObservable.Provider>
|
</MyObservable.Provider>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -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">
|
|
||||||
<h1 id="head_1" class="track">Interactive Product Pages</h1>
|
|
||||||
<p>Babylon.js gives you all the power you need to create realistic interactive experiences for your product's
|
|
||||||
audience. Leverage the power of 3D rendering empowered by animation,
|
|
||||||
behaviors, audio, video, and a full GUI layer.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="bg1">
|
|
||||||
<div id="block_2">
|
|
||||||
<h1 id="head_2" class="track">PBR Node Materials</h1>
|
|
||||||
<p>Create custom shaders for your assets using the node materials with full support for physically based
|
|
||||||
rendering materials. This includes support for
|
|
||||||
image-based lighting, real-time environment probes, subsurface translucency, refraction, and more!
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div id="block_3">
|
|
||||||
<h1 id="head_3" class="track">Advanced PBR Features</h1>
|
|
||||||
<p>Node material's physically-based rendering supports advanced features like clearcoat and sheen. Enjoy the
|
|
||||||
flexibility of creating custom shaders to unlock complete creative freedom while retaining the ability
|
|
||||||
to
|
|
||||||
render a wide range of materials accurately.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="bg2">
|
|
||||||
<div id="block_4">
|
|
||||||
<h1 id="head_4" class="track">Procedural Textures</h1>
|
|
||||||
<p>Node materials can now create procedural textures to be used as you wish. A custom procedural texture
|
|
||||||
created in the node material editor is being used to morph between materials on this asset. Notice
|
|
||||||
how the morph is always different due to our custom shader allowing us to change the procedural texture
|
|
||||||
every time we use it.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="bg3">
|
|
||||||
<div id="block_5">
|
|
||||||
<h1 id="head_5" class="track">Animating Material Parameters</h1>
|
|
||||||
<p>Node materials allow us to manipulate parameters directly or through animation. This enables interations
|
|
||||||
such as the animated ring light in the demo asset. We are also able to tie this animation into our post
|
|
||||||
processing like the glow layer you see here. And we still retain the ability to add all of this
|
|
||||||
functionality to PBR materials for the best possible rendering.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div id="block_6">
|
|
||||||
<h1 id="head_6" class="track">GUI Controls in Materials</h1>
|
|
||||||
<p>Babylon.js also allows you to put GUI controls directly into our materials used on a mesh. You can see
|
|
||||||
how we can make a fully function product demo by displaying the actual time and date on the device
|
|
||||||
screen.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
1183
src/Test/Test3.js
1183
src/Test/Test3.js
File diff suppressed because it is too large
Load Diff
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
import intl from 'react-intl-universal';
|
|
||||||
|
|
||||||
const util = {
|
|
||||||
getMessage: () => intl.get('MESSAGE_NOT_IN_COMPONENT'),
|
|
||||||
};
|
|
||||||
|
|
||||||
export default util;
|
|
||||||
@ -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;
|
|
||||||
@ -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
@ -20,6 +20,14 @@ import AlarmTipYellow from "./../page/LinePage/assets/icon/y.png";
|
|||||||
import AlarmTipRed from "./../page/LinePage/assets/icon/r.png";
|
import AlarmTipRed from "./../page/LinePage/assets/icon/r.png";
|
||||||
|
|
||||||
// const onEquObservable = new Observable();
|
// const onEquObservable = new Observable();
|
||||||
|
// const lineNameNo = {
|
||||||
|
// "1":"一",
|
||||||
|
// "2":"二",
|
||||||
|
// "3":"三",
|
||||||
|
// "4":"四",
|
||||||
|
// "5":"五",
|
||||||
|
// }
|
||||||
|
const lineNameNo = ["一","二","三","四","五"]
|
||||||
|
|
||||||
const myStyle = {
|
const myStyle = {
|
||||||
width: "1041px",
|
width: "1041px",
|
||||||
@ -554,7 +562,7 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
|||||||
<div className="model_info">
|
<div className="model_info">
|
||||||
<span className="reset_btn" onClick={resetModel}></span>
|
<span className="reset_btn" onClick={resetModel}></span>
|
||||||
<span className="title">
|
<span className="title">
|
||||||
第五产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"}
|
第{lineNameNo[Number(modelPath.slice(-3,-2))-1]}产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{selectedMeshName && (
|
{selectedMeshName && (
|
||||||
|
|||||||
@ -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
@ -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 |
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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">- {intl.get("alarmsNumber")} -</span>
|
|
||||||
<span className="text_4">{data}</span>
|
|
||||||
<div className="leftUpTableArea">
|
|
||||||
<LeftUpTable/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default LeftUp;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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;
|
|
||||||
@ -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
Loading…
Reference in New Issue
Block a user