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

初始化，印度版本7.29

Browse Source
This commit is contained in:
朱菊兰
2024-07-29 14:10:07 +08:00
commit 3c8c7e497b
202 changed files with 52317 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/App.css Normal file
View File

@@ -0,0 +1,45 @@
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.background {
height: 1080px;
width: 1920px;
background: url(/public/png/background.png) 100% no-repeat;
background-size: 100% 100%;
}

92
src/App.tsx Normal file
View File

@@ -0,0 +1,92 @@
import React, {useEffect, useState, useContext} from 'react';
import intl from 'react-intl-universal';
import locales from "./locales/locales";
import './App.css';
import {useAppSelector} from "./store/hooks";
import {selectChangeLangAndCss} from "./store/ChangeLangAndCss";
import {createBrowserRouter, RouterProvider,} from "react-router-dom";
import ErrorPage from "./page/ErrorPage";
import MainP from "./page/MainP/MainP";
import MainE from "./page/MainE/MainE";
import MainQ from "./page/MainQ/MainQ";
import SwitchAll from "./page/AutoSwitch/SwitchAll";
import SwitchLine from "./page/AutoSwitch/SwitchLine";
import {MyObservable} from "./context/MyObservable";
import {Observable} from "@babylonjs/core";
import {selectGlassStatus} from "./store/ProductionMonitoringEntity";
// const LOCALES_LIST = [
// {
// label: "English",
// value: "en-US",
// },
// {
// label: "简体中文",
// value: "zh-CN",
// },
// ];
const onGlassObservable = new Observable();
function App() {
const thisLineGlassStatus = useAppSelector(selectGlassStatus)
onGlassObservable.notifyObservers(thisLineGlassStatus)
const Locale = useAppSelector(selectChangeLangAndCss).Locale;
const setCurrentLocale = (currentLocale: string) => {
intl.init({
currentLocale,
locales: locales,
}).then(() => {
console.log('Language Changed to ' + currentLocale);
});
};
setCurrentLocale(Locale);
const router = createBrowserRouter([
{
path: "/",
element: <MainP/>,
errorElement: <ErrorPage/>
},
{
path: "/P",
element: <MainP/>,
errorElement: <ErrorPage/>
},
{
path: "/Q",
element: <MainQ/>,
errorElement: <ErrorPage/>
},
{
path: "/E/:LineID?",
element: <MainE/>,
errorElement: <ErrorPage/>
},
///////////////////////////////////////////////////////////////////////////
{
path: "/SA",
element: <SwitchAll/>,
errorElement: <ErrorPage/>
},
{
path: "/SL/:LineID?",
element: <SwitchLine/>,
errorElement: <ErrorPage/>
},
]);
return (
<MyObservable.Provider value={onGlassObservable}>
<div className="background">
<RouterProvider router={router}/>
</div>
</MyObservable.Provider>
);
}
export default App;

101
src/Test/Test3.html Normal file
View File

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

1183
src/Test/Test3.js Normal file
View File

File diff suppressed because it is too large Load Diff

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

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

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

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

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

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

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

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

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

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

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

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

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

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

41
src/Test/test.tsx Normal file
View File

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

77
src/Test/test2.tsx Normal file
View File

@@ -0,0 +1,77 @@
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;

59
src/babylonjs/EquMap.ts Normal file
View File

@@ -0,0 +1,59 @@
const EquMap = {
CleanAfterEdge1_1: ['object_1_003'],
CleanAfterEdge1_2: ['object_1_004'],
CleanAfterEdge2_1: ['object_2_003'],
CleanAfterEdge2_2: ['object_2_004'],
CleanAfterEdge3_1: ['object_3_003'],
CleanAfterEdge3_2: ['object_3_004'],
CleanAfterEdge4_1: ['object_4_003'],
CleanAfterEdge4_2: ['object_4_004'],
CleanAfterTemper1_1: ['object_1_026', 'object_1_027'],
CleanAfterTemper2_1: ['object_2_022', 'object_2_023'],
CleanAfterTemper3_1: ['object_3_022', 'object_3_023'],
CleanAfterTemper4_1: ['object_4_026', 'object_4_027'],
CleanBeforCoat1_1: ['object_1_009'],
CleanBeforCoat1_2: ['object_1_010'],
CleanBeforCoat4_1: ['object_4_009'],
CleanBeforCoat4_2: ['object_4_010'],
Edge1_1: ['object_1_001'],
Edge1_2: ['object_1_002'],
Edge2_1: ['object_2_001'],
Edge2_2: ['object_2_002'],
Edge3_1: ['object_3_001'],
Edge3_2: ['object_3_002'],
Edge4_1: ['object_4_001'],
Edge4_2: ['object_4_002'],
FirstCoat1_1: ['object_1_011'],
FirstCoat1_2: ['object_1_012'],
FirstCoat2_1: ['object_2_007'],
FirstCoat2_2: ['object_2_008'],
FirstCoat3_1: ['object_3_007'],
FirstCoat3_2: ['object_3_008'],
FirstCoat4_1: ['object_4_011'],
FirstCoat4_2: ['object_4_012'],
Punch1_1: ['object_1_007'],
Punch1_2: ['object_1_008'],
Punch4_1: ['object_4_007'],
Punch4_2: ['object_4_008'],
SecondCoat1_1: ['object_1_013'],
SecondCoat1_2: ['object_1_014'],
SecondCoat2_1: ['object_2_009'],
SecondCoat2_2: ['object_2_010'],
SecondCoat3_1: ['object_3_009'],
SecondCoat3_2: ['object_3_010'],
SecondCoat4_1: ['object_4_013'],
SecondCoat4_2: ['object_4_014'],
Temper1_1: ['object_1_017', 'object_1_018', 'object_1_019', 'object_1_020', 'object_1_021', 'object_1_022', 'object_1_023', 'object_1_024', 'object_1_025'],
Temper2_1: ['object_2_013', 'object_2_014', 'object_2_015', 'object_2_016', 'object_2_017', 'object_2_018', 'object_2_019', 'object_2_020', 'object_2_021'],
Temper3_1: ['object_3_013', 'object_3_014', 'object_3_015', 'object_3_016', 'object_3_017', 'object_3_018', 'object_3_019', 'object_3_020', 'object_3_021'],
Temper4_1: ['object_4_017', 'object_4_018', 'object_4_019', 'object_4_020', 'object_4_021', 'object_4_022', 'object_4_023', 'object_4_024', 'object_4_025'],
Unload1_1: ['object_1_028'],
Unload1_2: ['object_1_029'],
Unload2_1: ['object_2_024'],
Unload2_2: ['object_2_025'],
Unload3_1: ['object_3_024'],
Unload3_2: ['object_3_025'],
Unload4_1: ['object_4_028'],
Unload4_2: ['object_4_029']
}
export default EquMap;

1054
src/babylonjs/GlassAnimation.ts Normal file
View File

File diff suppressed because it is too large Load Diff

1447
src/babylonjs/LineBabylon.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

363
src/babylonjs/MybabylonJS_1.tsx Normal file
View File

@@ -0,0 +1,363 @@
import React, { useEffect, useRef, useState, useContext, useMemo } from "react";
import * as BABYLON from '@babylonjs/core';
import "@babylonjs/core/Debug/debugLayer";
import "@babylonjs/inspector";
import "@babylonjs/loaders/glTF";
import { GridMaterial } from '@babylonjs/materials/';
import { Animatable, HemisphericLight, Mesh, Observable, Vector3 } from "@babylonjs/core";
import {
GlassAnimation1_1, GlassAnimation1_2D, GlassAnimation1_2U, GlassAnimation1_3, GlassAnimation1_4,
GlassAnimation2_1, GlassAnimation2_2D, GlassAnimation2_2U, GlassAnimation2_3, GlassAnimation2_4,
GlassAnimation3_1, GlassAnimation3_2D, GlassAnimation3_2U, GlassAnimation3_3, GlassAnimation3_4,
GlassAnimation4_1, GlassAnimation4_2D, GlassAnimation4_2U, GlassAnimation4_3, GlassAnimation4_4
} from "./GlassAnimation";
import { useAppSelector } from "../store/hooks";
import { GlassStatus, selectGlassStatus } from "../store/ProductionMonitoringEntity";
import '../page/style/standard.css';
import { MyObservable } from "../context/MyObservable";
import { Button, ButtonGroup } from "@mui/material";
import intl from "react-intl-universal";
import { EquStatusInterface, selectEquStatus } from "../store/EquStatusEntity";
import EquMap from "./EquMap";
const onMainCamObservable = new Observable();
const onEquObservable = new Observable();
const myStyle = {
width: '1036px',
height: '666px',
outline: 'none',
}
const DetailCamera = {
Part_1: {
alpha: BABYLON.Tools.ToRadians(270),
beta: BABYLON.Tools.ToRadians(25),
radius: 85,
target: new BABYLON.Vector3(-110, 0, -8)
},
Part_2: {
alpha: BABYLON.Tools.ToRadians(270),
beta: BABYLON.Tools.ToRadians(25),
radius: 85,
target: new BABYLON.Vector3(-40, 0, -8)
},
Part_3: {
alpha: BABYLON.Tools.ToRadians(270),
beta: BABYLON.Tools.ToRadians(25),
radius: 85,
target: new BABYLON.Vector3(0, 0, -8)
},
Part_4: {
alpha: BABYLON.Tools.ToRadians(270),
beta: BABYLON.Tools.ToRadians(25),
radius: 85,
target: new BABYLON.Vector3(110, 0, -8)
},
}
interface MybabylonJSProps {
modelPath: string; // 明确 modelPath 属性的类型为 string
}
function MybabylonJS({ modelPath }: MybabylonJSProps) {
const onGlassObservable = useContext(MyObservable);
const EquStatus = useAppSelector(selectEquStatus);
const canvasRef = useRef(null);
onEquObservable.notifyObservers(EquStatus);
// const thisLineGlassStatus = useAppSelector(selectGlassStatus)
// onGlassObservable.notifyObservers(thisLineGlassStatus)
const [SelectedMeshName, setSelectedMeshName] = useState<string | null>(null);
interface MybabylonJSProps {
modelPath: string;
}
// 使用 useRef 来存储当前加载的模型引用
const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]);
useEffect(
() => {
// 确保 canvas 引用存在
if (!canvasRef.current) return;
const canvas = canvasRef.current;
const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })
const createScene = async function () {
// This creates a basic Babylon Scene object (non-mesh)
const scene = new BABYLON.Scene(engine);
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
const light = new BABYLON.DirectionalLight('light', new BABYLON.Vector3(20, 20, 100), scene);
const light2 = new BABYLON.PointLight('light2', new BABYLON.Vector3(20, 20, 100), scene);
const Glass1_1 = new BABYLON.TransformNode('Glass1_1')
const baseLight = new HemisphericLight('hemiLight', new Vector3(-1, 1, 0), scene);
baseLight.intensity = 1;
baseLight.diffuse = new BABYLON.Color3(1, 1, 1);
baseLight.specular = new BABYLON.Color3(0.25, 0.25, 0.25);
baseLight.groundColor = new BABYLON.Color3(0.5, 0.5, 0.5);
//add an arcRotateCamera to the scene
const camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(245), BABYLON.Tools.ToRadians(25), 215, new BABYLON.Vector3(-2, 0, -8));
camera.lowerRadiusLimit = 10;
camera.upperRadiusLimit = 600;
// This attaches the camera to the canvas
camera.attachControl(canvas, true);
//创建一个材质
const newMt = new BABYLON.StandardMaterial("newMt");
newMt.diffuseColor = BABYLON.Color3.Blue();
const ground = BABYLON.MeshBuilder.CreateGround('ground', {
width: 1000,
height: 1000,
subdivisions: 1
}, scene);
ground.scaling.x = 100;
ground.scaling.z = ground.scaling.x;
ground.isPickable = false;
let grid = new GridMaterial("grid", scene);
grid.majorUnitFrequency = 10
grid.minorUnitVisibility = .3
grid.gridRatio = .04
grid.backFaceCulling = !1
grid.mainColor = new BABYLON.Color3(1, 1, 1)
grid.lineColor = new BABYLON.Color3(1, 1, 1)
grid.opacity = .8
grid.zOffset = 1
grid.opacityTexture = new BABYLON.Texture("/public/png/backgroundGround.png", scene)
ground.material = grid;
let hl = new BABYLON.HighlightLayer('hl1', scene);
let hl2 = new BABYLON.HighlightLayer('hl2', scene);
// var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, scene);
// 定义一个函数来加载或重新加载模型
const loadOrReloadModel = async () => {
// 在加载新模型之前卸载已加载的模型
currentMeshesRef.current.forEach(mesh => {
if (mesh && mesh.parent) {
scene.removeMesh(mesh, true);
}
});
currentMeshesRef.current = []; // 重置模型数组
try { // 使用 ImportMeshAsync 加载新模型
// var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, scene);
var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line1.babylon`, scene);
// var LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line2.babylon`, scene);
// var LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line3.babylon`, scene);
// var LOD3MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line4.babylon`, scene);
// var LOD4MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line5.babylon`, scene);
// 将新加载的模型添加到 currentMeshesRef 中
currentMeshesRef.current.push(...LOD0MESH.meshes);
// ...为新加载的模型设置交互逻辑
LOD0MESH.meshes.map((mesh) => {
mesh.isPickable = true;
mesh.actionManager = new BABYLON.ActionManager(scene);
//鼠标移动到物体上亮显
mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, () => {
// @ts-ignore
hl.addMesh(mesh, BABYLON.Color3.Green());
}));
mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, () => {
// @ts-ignore
hl.removeMesh(mesh)
}));
mesh._scene.onPointerDown = async (event, _pickResult) => {
const pickInfo = mesh._scene.pick(mesh._scene.pointerX, mesh._scene.pointerY)
const clickedPosition = _pickResult.pickedPoint
//如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法
// getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数
//判断是否是右键
if (!(event.buttons === 1 && pickInfo.pickedMesh)) return
const MeshName1 = pickInfo.pickedMesh.name.split(".")[0]
setSelectedMeshName(MeshName1)
} })
/////////////////////////////////////////////////////////////////////////////////////////////////
onEquObservable.add((eventData, eventState) => {
LOD0MESH.meshes.find((mesh) => {
// @ts-ignore
hl2.removeMesh(mesh);
})
Object.keys(eventData as EquStatusInterface).map((key) => {
// @ts-ignore
if (eventData[key] == 2) {
// @ts-ignore
EquMap[key].map((name) => {
LOD0MESH.meshes.find((mesh) => {
if (mesh.name == name) {
// @ts-ignore
hl2.addMesh(mesh, BABYLON.Color3.Red());
}
})
})
}
})
})
/////////////////////////////////////////////////////////////////////////////////////////////////
} catch (error) {
console.error('加载模型失败:', error);
}
};
// 调用函数以加载或重新加载模型
loadOrReloadModel();
function reset() {
camera.target = new BABYLON.Vector3(-2, 0, -8);
camera.alpha = BABYLON.Tools.ToRadians(245);
camera.beta = BABYLON.Tools.ToRadians(25);
camera.radius = 215;
}
let resetCamera = setTimeout(reset, 15000)
scene.onPointerObservable.add((pointerInfo) => {
// console.log(camera.target, camera.alpha * 180 / 3.14, camera.beta * 180 / 3.14, camera.radius)
switch (pointerInfo.type) {
case BABYLON.PointerEventTypes.POINTERMOVE:
clearTimeout(resetCamera);
resetCamera = setTimeout(reset, 15000)
}
})
onMainCamObservable.add((eventData, eventState) => {
clearTimeout(resetCamera);
resetCamera = setTimeout(reset, 5000);
switch (eventData) {
case 1:
camera.target = DetailCamera.Part_1.target;
camera.alpha = DetailCamera.Part_1.alpha;
camera.beta = DetailCamera.Part_1.beta;
camera.radius = DetailCamera.Part_1.radius;
break;
case 2:
camera.target = DetailCamera.Part_2.target;
camera.alpha = DetailCamera.Part_2.alpha;
camera.beta = DetailCamera.Part_2.beta;
camera.radius = DetailCamera.Part_2.radius;
break;
case 3:
camera.target = DetailCamera.Part_3.target;
camera.alpha = DetailCamera.Part_3.alpha;
camera.beta = DetailCamera.Part_3.beta;
camera.radius = DetailCamera.Part_3.radius;
break;
case 4:
camera.target = DetailCamera.Part_4.target;
camera.alpha = DetailCamera.Part_4.alpha;
camera.beta = DetailCamera.Part_4.beta;
camera.radius = DetailCamera.Part_4.radius;
break;
}
})
return scene;
};
// call the createScene function
const scene = createScene();
scene.then((scene) => {
})
// run the render loop
scene.then((scene) => {
engine.runRenderLoop(function () {
scene.render()
});
},
(reason) => {
console.log(reason);
}
);
// Resize
window.addEventListener("resize", function () {
engine.resize();
});
// 组件卸载时的清理逻辑
return () => {
// 清理场景和引擎资源
engine.dispose();
};
},
[modelPath]
);
const handleClick1 = () => {
onMainCamObservable.notifyObservers(1)
}
const handleClick2 = () => {
onMainCamObservable.notifyObservers(2)
}
const handleClick3 = () => {
onMainCamObservable.notifyObservers(3)
}
const handleClick4 = () => {
onMainCamObservable.notifyObservers(4)
}
return (
<div style={myStyle}>
<ButtonGroup variant="contained" aria-label="outlined button group" className={'btnArea'}>
<h2>当前选择: {SelectedMeshName}</h2>
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick1}>{intl.get('Part1')}</Button>
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick2}>{intl.get('Part2')}</Button>
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick3}>{intl.get('Part3')}</Button>
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick4}>{intl.get('Part4')}</Button>
</ButtonGroup>
<canvas ref={canvasRef} style={myStyle} />
</div>
);
}
export default MybabylonJS;

1389
src/babylonjs/MybabylonJS_2.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

1389
src/babylonjs/MybabylonJS_backup.tsx Normal file
View File

File diff suppressed because it is too large Load Diff

5
src/context/MyObservable.ts Normal file
View File

@@ -0,0 +1,5 @@
import { createContext } from 'react';
import {Observable} from "@babylonjs/core";
const onGlassObservable = new Observable();
export const MyObservable = createContext(onGlassObservable);

4
src/context/ThisLineID.ts Normal file
View File

@@ -0,0 +1,4 @@
import {createContext} from 'react';
let LineID: string | undefined;
export const ThisLineID = createContext(LineID);

14
src/index.css Normal file
View File

@@ -0,0 +1,14 @@
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
monospace;
}

27
src/index.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {store} from "./store/store";
import {Provider} from "react-redux";
import UpdateData from "./store/UpdateData";
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
// <React.StrictMode>
<Provider store={store}>
<App/>
<UpdateData/>
</Provider>
// </React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

93
src/lanhuapp/common.css Normal file
View File

@@ -0,0 +1,93 @@
body * {
box-sizing: border-box;
flex-shrink: 0;
}
body {
font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, PingFang SC-Light, Microsoft YaHei;
}
button {
margin: 0;
padding: 0;
border: 1px solid transparent;
outline: none;
background-color: transparent;
}
button:active {
opacity: 0.6;
}
.flex-col {
display: flex;
flex-direction: column;
}
.flex-row {
display: flex;
flex-direction: row;
}
.justify-start {
display: flex;
justify-content: flex-start;
}
.justify-center {
display: flex;
justify-content: center;
}
.justify-end {
display: flex;
justify-content: flex-end;
}
.justify-evenly {
display: flex;
justify-content: space-evenly;
}
.justify-around {
display: flex;
justify-content: space-around;
}
.justify-between {
display: flex;
justify-content: space-between;
}
.align-start {
display: flex;
align-items: flex-start;
}
.align-center {
display: flex;
align-items: center;
}
.align-end {
display: flex;
align-items: flex-end;
}
.standWin {
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
border: 2px solid;
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.5), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.5)) 2 2;
backdrop-filter: blur(2px);
-webkit-filter: drop-shadow(0px 2px 16px rgba(7, 20, 36, 1));
position: relative;
}
.switchBtn{
position: absolute;
margin-left: 10px;
margin-top: -3px;
color: white;
}

4367
src/lanhuapp/index.css Normal file
View File

File diff suppressed because it is too large Load Diff

651
src/lanhuapp/index.tsx Normal file
View File

@@ -0,0 +1,651 @@
"use strict";
import React, { Component } from "react";
import "./common.css";
import "./index.css";
// const print = function (e) {};
class DDS_lanhupage_0 extends Component {
state = {};
// setValue(val) {}
render() {
return (
<div className="page flex-col">
<div className="box_1 flex-col">
<div className="block_28 flex-row">
<div className="image-wrapper_3 flex-col justify-between">
<img
className="label_1"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngc2a3aa912447c777492a620a0e530d513b6aa60f3268d24842b1df28d702d3e6"
}
/>
<img
className="image_1"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPng9a1d1e9210cdd42c7a3e515fe62e218b2649527fa44c0fd04097eb415b95a09a"
}
/>
</div>
<span className="text_1">数智工厂生产监控驾驶舱</span>
<div className="box_76 flex-col" />
<div className="section_1 flex-col" />
</div>
<div className="block_32 flex-col">
<div className="box_2 flex-col">
<div className="group_1 flex-row justify-end">
<div className="group_61 flex-col">
<div className="block_3 flex-col">
<div className="box_77 flex-row justify-between">
<div className="block_4 flex-col" />
<span className="text_2">成产异常报警</span>
</div>
<span className="text_3">-&nbsp;报警总数&nbsp;-</span>
<span className="text_4">1343</span>
<div className="text-wrapper_1 flex-row">
<span className="text_5">序号</span>
<span className="text_6">报警时间</span>
<span className="text_7">报警编码</span>
<span className="text_8">报警内容</span>
</div>
<div className="text-wrapper_2 flex-row">
<span className="text_9">01</span>
<span className="text_10">2020/01/14</span>
<span className="text_11">3928498293</span>
<span className="text_12">故障</span>
</div>
<div className="text-wrapper_3 flex-row">
<span className="text_13">01</span>
<span className="text_14">2020/01/14</span>
<span className="text_15">3928498293</span>
<span className="text_16">故障</span>
</div>
<div className="text-wrapper_4 flex-row">
<span className="text_17">01</span>
<span className="text_18">2020/01/14</span>
<span className="text_19">3928498293</span>
<span className="text_20">故障</span>
</div>
<div className="text-wrapper_5 flex-row">
<span className="text_21">01</span>
<span className="text_22">2020/01/14</span>
<span className="text_23">3928498293</span>
<span className="text_24">故障</span>
</div>
<div className="text-wrapper_6 flex-row">
<span className="text_25">01</span>
<span className="text_26">2020/01/14</span>
<span className="text_27">3928498293</span>
<span className="text_28">故障</span>
</div>
<div className="text-wrapper_7 flex-row">
<span className="text_29">01</span>
<span className="text_30">2020/01/14</span>
<span className="text_31">3928498293</span>
<span className="text_32">故障</span>
</div>
<img
className="image_3"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb2e7ba29fb9cc0f8198375990e84c45d7ba803e3cdc57234bd13a0b1884e56bf"
}
/>
<img
className="image_4"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb2e7ba29fb9cc0f8198375990e84c45d7ba803e3cdc57234bd13a0b1884e56bf"
}
/>
<img
className="image_5"
src={
"https://lanhu.oss-cn-beijing.aliyuncs.com/SketchPngb2e7ba29fb9cc0f8198375990e84c45d7ba803e3cdc57234bd13a0b1884e56bf"
}
/>
</div>
<div className="block_5 flex-col">
<div className="group_62 flex-row justify-between">
<div className="block_6 flex-col" />
<span className="text_33">各产线投入数量和产出数量</span>
</div>
<div className="group_63 flex-row">
<div className="box_4 flex-col" />
<span className="text_34">当天</span>
<div className="box_5 flex-col" />
</div>
<div className="group_64 flex-row">
<span className="text_35">成品率</span>
<div className="group_3 flex-col" />
<span className="text_36">产线1</span>
<div className="group_4 flex-col" />
<span className="text_37">产线2</span>
<div className="group_5 flex-col" />
<span className="text_38">产线3</span>
<div className="group_6 flex-col" />
<span className="text_39">产线2</span>
<div className="group_7 flex-col" />
<span className="text_40">产线3</span>
</div>
<div className="group_65 flex-row justify-between">
<div className="text-wrapper_47 flex-col">
<span className="text_41">100</span>
<span className="text_42">90</span>
<span className="text_43">80</span>
<span className="text_44">70</span>
<span className="text_45">60</span>
</div>
<div className="group_8 flex-col">
<div className="group_9 flex-col">
<div className="group_10 flex-col">
<div className="group_11 flex-col" />
</div>
</div>
<div className="group_12 flex-col" />
<div className="group_13 flex-col">
<div className="box_6 flex-col" />
</div>
</div>
</div>
<div className="text-wrapper_48 flex-row justify-between">
<span className="text_46">1:00</span>
<span className="text_47">2:00</span>
<span className="text_48">3:00</span>
<span className="text_49">4:00</span>
<span className="text_50">5:00</span>
<span className="text_51">6:00</span>
<span className="text_52">7:00</span>
<span className="text_53">8:00</span>
<span className="text_54">9:00</span>
</div>
<div className="group_66 flex-row">
<div className="block_7 flex-col" />
<span className="text_55">本周</span>
<div className="block_8 flex-col" />
</div>
<div className="group_67 flex-row">
<span className="text_56">成品率</span>
<div className="block_9 flex-col" />
<span className="text_57">产线1</span>
<div className="block_10 flex-col" />
<span className="text_58">产线2</span>
<div className="block_11 flex-col" />
<span className="text_59">产线3</span>
<div className="block_12 flex-col" />
<span className="text_60">产线2</span>
<div className="block_13 flex-col" />
<span className="text_61">产线3</span>
</div>
<div className="group_68 flex-row justify-between">
<div className="text-wrapper_49 flex-col">
<span className="text_62">100</span>
<span className="text_63">90</span>
<span className="text_64">80</span>
<span className="text_65">70</span>
<span className="text_66">60</span>
</div>
<div className="section_9 flex-col">
<div className="box_7 flex-col">
<div className="group_14 flex-col">
<div className="group_15 flex-col" />
</div>
</div>
<div className="box_8 flex-col" />
<div className="box_9 flex-col">
<div className="group_16 flex-col" />
</div>
</div>
</div>
<div className="text-wrapper_50 flex-row justify-between">
<span className="text_67">1:00</span>
<span className="text_68">2:00</span>
<span className="text_69">3:00</span>
<span className="text_70">4:00</span>
<span className="text_71">5:00</span>
<span className="text_72">6:00</span>
<span className="text_73">7:00</span>
<span className="text_74">8:00</span>
<span className="text_75">9:00</span>
</div>
<div className="group_69 flex-row">
<div className="block_14 flex-col" />
<span className="text_76">本月</span>
<div className="block_15 flex-col" />
</div>
<div className="group_70 flex-row">
<span className="text_77">成品率</span>
<div className="box_10 flex-col" />
<span className="text_78">产线1</span>
<div className="box_11 flex-col" />
<span className="text_79">产线2</span>
<div className="box_12 flex-col" />
<span className="text_80">产线3</span>
<div className="box_13 flex-col" />
<span className="text_81">产线2</span>
<div className="box_14 flex-col" />
<span className="text_82">产线3</span>
</div>
<div className="group_71 flex-row justify-between">
<div className="text-wrapper_51 flex-col">
<span className="text_83">100</span>
<span className="text_84">90</span>
<span className="text_85">80</span>
<span className="text_86">70</span>
<span className="text_87">60</span>
</div>
<div className="box_15 flex-col">
<div className="box_16 flex-col">
<div className="group_17 flex-col">
<div className="box_17 flex-col" />
</div>
</div>
<div className="box_18 flex-col" />
<div className="box_19 flex-col">
<div className="group_18 flex-col" />
</div>
</div>
</div>
<div className="text-wrapper_52 flex-row justify-between">
<span className="text_88">1:00</span>
<span className="text_89">2:00</span>
<span className="text_90">3:00</span>
<span className="text_91">4:00</span>
<span className="text_92">5:00</span>
<span className="text_93">6:00</span>
<span className="text_94">7:00</span>
<span className="text_95">8:00</span>
<span className="text_96">9:00</span>
</div>
<div className="section_13 flex-col" />
</div>
</div>
<div className="group_72 flex-col">
<div className="block_16 flex-col">
<div className="block_17 flex-col" />
</div>
<div className="block_18 flex-row">
<div className="group_73 flex-col justify-between">
<div className="box_21 flex-col" />
<div className="box_22 flex-col" />
</div>
<div className="image-text_15 flex-row justify-between">
<span className="text-group_1">30</span>
<div className="box_23 flex-col" />
</div>
<div className="group_74 flex-col">
<div className="group_75 flex-row">
<div className="box_24 flex-col" />
<span className="text_97">成品率折线展示</span>
<div className="text-wrapper_14 flex-col">
<span className="text_98">当天</span>
</div>
<div className="box_25 flex-row">
<div className="text-wrapper_15 flex-col">
<span className="text_99">本周</span>
</div>
<span className="text_100">本月</span>
</div>
</div>
<div className="group_76 flex-row">
<span className="text_101">单位</span>
<div className="box_26 flex-col" />
<span className="text_102">产线1</span>
<div className="box_27 flex-col" />
<span className="text_103">产线2</span>
<div className="box_28 flex-col" />
<span className="text_104">产线3</span>
<div className="box_29 flex-col" />
<span className="text_105">产线2</span>
<div className="box_30 flex-col" />
<span className="text_106">产线3</span>
</div>
<div className="group_77 flex-row justify-between">
<div className="text-wrapper_53 flex-col">
<span className="text_107">350</span>
<span className="text_108">300</span>
<span className="text_109">250</span>
<span className="text_110">200</span>
<span className="text_111">150</span>
<span className="text_112">100</span>
<span className="text_113">50</span>
<span className="text_114">0</span>
</div>
<div className="group_22 flex-col">
<div className="section_16 flex-col">
<div className="box_31 flex-col" />
</div>
<div className="section_17 flex-col" />
<div className="section_18 flex-col align-center">
<div className="box_32 flex-col justify-center">
<div className="box_33 flex-col" />
</div>
</div>
</div>
</div>
<div className="text-wrapper_54 flex-row justify-between">
<span className="text_115">1</span>
<span className="text_116">5</span>
<span className="text_117">15</span>
<span className="text_118">20</span>
<span className="text_119">25</span>
<span className="text_120">30</span>
<span className="text_121">25</span>
<span className="text_122">25</span>
</div>
</div>
</div>
</div>
<div className="box_34 flex-col">
<div className="box_35 flex-row">
<div className="block_19 flex-col" />
<div className="box_78 flex-col">
<div className="group_78 flex-row justify-between">
<div className="box_36 flex-col" />
<span className="text_123">每产线总投入数量和产出数量</span>
</div>
<div className="group_24 flex-row justify-end">
<span className="text_124">产线名</span>
<span className="text_125">上片数据量</span>
<span className="text_126">成品下片数量</span>
<div className="text-wrapper_18 flex-col">
<span className="text_127">成品下片总面积</span>
</div>
</div>
<div className="text-wrapper_19 flex-row">
<span className="text_128">产线1</span>
<span className="text_129">3928498293</span>
<span className="text_130">3928498293</span>
<span className="text_131">392849</span>
</div>
<div className="text-wrapper_20 flex-row">
<span className="text_132">产线2</span>
<span className="text_133">3928498293</span>
<span className="text_134">3928498293</span>
<span className="text_135">392849</span>
</div>
<div className="text-wrapper_21 flex-row">
<span className="text_136">产线3</span>
<span className="text_137">3928498293</span>
<span className="text_138">3928498293</span>
<span className="text_139">392849</span>
</div>
<div className="text-wrapper_22 flex-row">
<span className="text_140">产线4</span>
<span className="text_141">3928498293</span>
<span className="text_142">3928498293</span>
<span className="text_143">39284</span>
</div>
<div className="group_25 flex-row">
<span className="text_144">产线5</span>
<span className="text_145">3928498293</span>
<span className="text_146">3928498293</span>
<span className="text_147">392849</span>
<div className="box_37 flex-col" />
<div className="box_38 flex-col" />
<div className="box_39 flex-col" />
</div>
<div className="group_26 flex-col" />
</div>
<div className="block_21 flex-col" />
</div>
<div className="box_40 flex-col">
<div className="image-text_16 flex-row justify-between">
<div className="group_27 flex-col" />
<span className="text-group_2">各产线投入数量和产出</span>
</div>
<div className="section_28 flex-row">
<div className="box_41 flex-col" />
<span className="text_148">当天</span>
<div className="box_42 flex-col" />
</div>
<div className="group_29 flex-row justify-end">
<span className="text_149">产线名</span>
<span className="text_150">上片数据量</span>
<span className="text_151">成品下片数量</span>
<div className="text-wrapper_23 flex-col">
<span className="text_152">成品下片总面积</span>
</div>
</div>
<div className="text-wrapper_24 flex-row">
<span className="text_153">产线1</span>
<span className="text_154">3928498293</span>
<span className="text_155">3928498293</span>
<span className="text_156">392849</span>
</div>
<div className="text-wrapper_25 flex-row">
<span className="text_157">产线2</span>
<span className="text_158">3928498293</span>
<span className="text_159">3928498293</span>
<span className="text_160">392849</span>
</div>
<div className="text-wrapper_26 flex-row">
<span className="text_161">产线3</span>
<span className="text_162">3928498293</span>
<span className="text_163">3928498293</span>
<span className="text_164">392849</span>
</div>
<div className="text-wrapper_27 flex-row">
<span className="text_165">产线4</span>
<span className="text_166">3928498293</span>
<span className="text_167">3928498293</span>
<span className="text_168">39284</span>
</div>
<div className="group_30 flex-row">
<span className="text_169">产线5</span>
<span className="text_170">3928498293</span>
<span className="text_171">3928498293</span>
<span className="text_172">392849</span>
<div className="block_22 flex-col" />
<div className="block_23 flex-col" />
<div className="block_24 flex-col" />
</div>
<div className="group_31 flex-col" />
<div className="section_29 flex-row">
<div className="group_33 flex-col" />
<span className="text_173">本周</span>
<div className="group_34 flex-col" />
</div>
<div className="group_35 flex-col justify-between">
<div className="section_30 flex-row">
<div className="text-wrapper_28 flex-col">
<span className="text_174">产线名</span>
</div>
<span className="text_175">上片数据量</span>
<span className="text_176">成品下片数量</span>
</div>
<div className="section_31 flex-row">
<div className="grid_3 flex-row">
<div className="text-wrapper_29 flex-col">
<span className="text_177">产线1</span>
</div>
<div className="text-wrapper_30 flex-col">
<span className="text_178">产线2</span>
</div>
<div className="text-wrapper_31 flex-col">
<span className="text_179">产线3</span>
</div>
<div className="text-wrapper_32 flex-col">
<span className="text_180">产线4</span>
</div>
<div className="box_43 flex-col">
<span className="text_181">产线5</span>
<div className="section_21 flex-col" />
</div>
</div>
<div className="box_79 flex-col">
<div className="text-group_28 flex-col justify-between">
<span className="text_182">3928498293</span>
<span className="text_183">3928498293</span>
</div>
<div className="text-group_29 flex-col justify-between">
<span className="text_184">3928498293</span>
<span className="text_185">3928498293</span>
</div>
<span className="text_186">3928498293</span>
</div>
<div className="box_80 flex-col">
<div className="text-group_30 flex-col justify-between">
<span className="text_187">3928498293</span>
<span className="text_188">3928498293</span>
</div>
<div className="text-group_31 flex-col justify-between">
<span className="text_189">3928498293</span>
<span className="text_190">3928498293</span>
</div>
<span className="text_191">3928498293</span>
</div>
<div className="box_81 flex-col">
<div className="text-group_32 flex-col justify-between">
<span className="text_192">392849</span>
<span className="text_193">392849</span>
</div>
<div className="text-group_33 flex-col justify-between">
<span className="text_194">392849</span>
<span className="text_195">39284</span>
</div>
<span className="text_196">392849</span>
</div>
</div>
</div>
<div className="group_36 flex-col" />
<div className="section_32 flex-row">
<div className="group_38 flex-col" />
<span className="text_197">本月</span>
<div className="group_39 flex-col" />
</div>
<div className="group_40 flex-row justify-end">
<span className="text_198">产线名</span>
<span className="text_199">上片数据量</span>
<span className="text_200">成品下片数量</span>
<div className="text-wrapper_33 flex-col">
<span className="text_201">成品下片总面积</span>
</div>
</div>
<div className="text-wrapper_34 flex-row">
<span className="text_202">产线1</span>
<span className="text_203">3928498293</span>
<span className="text_204">3928498293</span>
<span className="text_205">392849</span>
</div>
<div className="text-wrapper_35 flex-row">
<span className="text_206">产线2</span>
<span className="text_207">3928498293</span>
<span className="text_208">3928498293</span>
<span className="text_209">392849</span>
</div>
<div className="text-wrapper_36 flex-row">
<span className="text_210">产线3</span>
<span className="text_211">3928498293</span>
<span className="text_212">3928498293</span>
<span className="text_213">392849</span>
</div>
<div className="text-wrapper_37 flex-row">
<span className="text_214">产线4</span>
<span className="text_215">3928498293</span>
<span className="text_216">3928498293</span>
<span className="text_217">39284</span>
</div>
<div className="group_41 flex-row">
<span className="text_218">产线5</span>
<span className="text_219">3928498293</span>
<span className="text_220">3928498293</span>
<span className="text_221">392849</span>
<div className="group_42 flex-col" />
<div className="group_43 flex-col" />
<div className="group_44 flex-col" />
</div>
<div className="group_45 flex-col" />
<div className="group_46 flex-col" />
<div className="group_47 flex-col justify-between">
<div className="group_79 flex-row">
<span className="text_222">产线名</span>
<span className="text_223">上片数据量</span>
<div className="text-wrapper_38 flex-row">
<span className="text_224">成品下片数量</span>
<span className="text_225">成品下片总面积</span>
<span className="text_226">合格率</span>
</div>
</div>
<div className="group_80 flex-row justify-between">
<div className="text-group_34 flex-col justify-between">
<span className="text_227">产线1</span>
<span className="text_228">产线2</span>
</div>
<div className="text-group_35 flex-col justify-between">
<span className="text_229">3928498293</span>
<span className="text_230">3928498293</span>
</div>
<div className="section_33 flex-col justify-between">
<div className="group_48 flex-row">
<span className="text_231">3928498293</span>
<span className="text_232">392849</span>
<div className="image-text_17 flex-row justify-between">
<span className="text-group_11">50%</span>
<div className="group_49 flex-col" />
</div>
</div>
<div className="group_50 flex-row">
<span className="text_233">3928498293</span>
<span className="text_234">392849</span>
<div className="image-text_18 flex-row justify-between">
<span className="text-group_12">50%</span>
<div className="block_25 flex-col" />
</div>
</div>
</div>
</div>
<div className="group_81 flex-row justify-between">
<div className="text-group_36 flex-col justify-between">
<span className="text_235">产线3</span>
<span className="text_236">产线4</span>
</div>
<div className="text-group_37 flex-col justify-between">
<span className="text_237">3928498293</span>
<span className="text_238">3928498293</span>
</div>
<div className="section_34 flex-col justify-between">
<div className="group_51 flex-row">
<span className="text_239">3928498293</span>
<span className="text_240">392849</span>
<div className="image-text_19 flex-row justify-between">
<span className="text-group_15">50%</span>
<div className="block_26 flex-col" />
</div>
</div>
<div className="group_52 flex-row">
<span className="text_241">3928498293</span>
<span className="text_242">39284</span>
<div className="image-text_20 flex-row justify-between">
<span className="text-group_16">50%</span>
<div className="block_27 flex-col" />
</div>
</div>
</div>
</div>
<div className="group_82 flex-row justify-between">
<span className="text_243">产线5</span>
<span className="text_244">3928498293</span>
<div className="group_53 flex-row">
<span className="text_245">3928498293</span>
<span className="text_246">392849</span>
<div className="image-text_21 flex-row justify-between">
<span className="text-group_17">50%</span>
<div className="box_53 flex-col" />
</div>
<div className="box_54 flex-col" />
<div className="box_55 flex-col" />
</div>
</div>
</div>
</div>
</div>
<div className="box_56 flex-col" />
</div>
</div>
</div>
</div>
</div>
);
}
}
export default DDS_lanhupage_0;

13
src/lanhuapp/linshi.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
</html>

54
src/locales/en-US.json Normal file
View File

@@ -0,0 +1,54 @@
{
"ProductLine": "Line",
"CLICK": "Click",
"TITLE": "Digital Factory Production Monitor",
"alarmInfo": "Abnormal Alarm Info",
"alarmsNumber": "Number of Alarms",
"serialNo": "No.",
"alarmTime": "Time",
"alarmCode": "Code",
"alarmContent": "Content",
"eachLineInputAndOutput": "Input And Output Line Chart",
"ThisDay": "This Day",
"ThisWeek": "This Week",
"ThisMonth": "This Month",
"ThisDayShort": "Day",
"ThisWeekShort": "Week",
"ThisMonthShort": "Month",
"All": "All",
"YieldLineChart": "Yield Line Chart",
"ProductionLine": "Line",
"Output": "Output",
"InputAndOutputSummaryTable": "Input And Output Summary Table",
"InputAndOutputTable": "Input And Output Table",
"ProductionLineName": "Name",
"InputNum": "InputNum",
"OutputNum": "OutputNum",
"OutputArea": "OutputArea",
"PassRate": "PassRate",
"TITLE_E": "Digital Factory Equipment Monitor",
"AbnormalEquipmentAlarm": "Abnormal Equipment Alarm",
"EquipmentOperationMonitoring": "Equipment Operation Monitoring",
"EquipmentTurnover": "Equipment Turnover(Weekly)",
"EquipmentProcessingQuantity": "Equipment Processing Quantity",
"TITLE_Q": "Digital Factory Quality Monitor",
"EquipmentName": "Name",
"AlarmLevel": "Level",
"WorkRate": "WorkRate",
"StopRate": "StopRate",
"DownRate": "DownRate",
"SectionName": "Section",
"DefectSummary": "Defects Summary",
"LineDefectSummary": "Line Defects Summary",
"DefectType": "Defect Type",
"DefectNumber": "Defect Number",
"DefectSummaryLine1": "Line 1 Defects Summary",
"DefectSummaryLine2": "Line 2 Defects Summary",
"DefectSummaryLine3": "Line 3 Defects Summary",
"DefectSummaryLine4": "Line 4 Defects Summary",
"AutoSwitch": "ATS",
"Part1": "Part1",
"Part2": "Part2",
"Part3": "Part3",
"Part4": "Part4"
}

8
src/locales/locales.tsx Normal file
View File

@@ -0,0 +1,8 @@
import en_US from './en-US.json'
import zh_CN from './zh-CN.json'
const locales = {
'en-US': en_US,
'zh-CN': zh_CN,
};
export default locales;

54
src/locales/zh-CN.json Normal file
View File

@@ -0,0 +1,54 @@
{
"ProductLine": "产线",
"CLICK": "点击",
"TITLE": "数智工厂生产监控驾驶舱",
"alarmInfo": "成产异常报警",
"alarmsNumber": "报警总数",
"serialNo": "序号",
"alarmTime": "报警时间",
"alarmCode": "报警编码",
"alarmContent": "报警内容",
"eachLineInputAndOutput": "各产线投入数量和产出数量",
"ThisDay": "当天",
"ThisWeek": "本周",
"ThisMonth": "本月",
"ThisDayShort": "当天",
"ThisWeekShort": "本周",
"ThisMonthShort": "本月",
"All": "全部",
"YieldLineChart": "成品率折线展示",
"ProductionLine": "产线",
"Output": "产出量",
"InputAndOutputSummaryTable": "每产线总投入数量和产出数量",
"InputAndOutputTable": "各产线投入数量和产出数量",
"ProductionLineName": "产线名",
"InputNum": "上片数据量",
"OutputNum": "下片数据量",
"OutputArea": "成品下片总面积",
"PassRate": "合格率",
"TITLE_E": "数智工厂设备运行智能驾驶舱",
"AbnormalEquipmentAlarm": "设备报警异常",
"EquipmentOperationMonitoring": "设备运行监控",
"EquipmentTurnover": "设备稼动率(周)",
"EquipmentProcessingQuantity": "设备加工数量",
"TITLE_Q": "数智工厂质量管理驾驶舱",
"EquipmentName": "设备名称",
"AlarmLevel": "报警级别",
"WorkRate": "工作比率",
"StopRate": "停机比率",
"DownRate": "故障比率",
"SectionName": "工段",
"DefectSummary": "缺陷汇总",
"LineDefectSummary": "产线缺陷汇总",
"DefectType": "缺陷种类",
"DefectNumber": "缺陷数量",
"DefectSummaryLine1": "产线一缺陷汇总",
"DefectSummaryLine2": "产线二缺陷汇总",
"DefectSummaryLine3": "产线三缺陷汇总",
"DefectSummaryLine4": "产线四缺陷汇总",
"AutoSwitch": "自动",
"Part1": "第一部分",
"Part2": "第二部分",
"Part3": "第三部分",
"Part4": "第四部分"
}

1
src/logo.svg Normal file
View File

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

After

Width:  |  Height:  |  Size: 2.6 KiB

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

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

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

@@ -0,0 +1,53 @@
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;

36
src/page/Component/ChangeFullButton.tsx Normal file
View File

@@ -0,0 +1,36 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
function ChangeFullButton() {
const [isFull, setIsFull] = useState(false);
function fullExit() {
let element = document.documentElement;
//HTML5 W3C 提议
document.exitFullscreen();
setIsFull(false)
}
function fullScreen() {
let element = document.documentElement;
//HTML W3C 提议
element.requestFullscreen();
setIsFull(true)
}
const click = () => {
isFull ? fullExit() : fullScreen();
}
return (
<button className="section_1 flex-col" onClick={click}/>
)
}
export default ChangeFullButton;

19
src/page/Component/ChangeLangButton.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import {useAppDispatch} from "../../store/hooks";
import {UpdateChangeLangAndCss} from "../../store/ChangeLangAndCss";
function ChangeLangButton() {
const dispatch = useAppDispatch();
const changeTitle = () => {
dispatch(UpdateChangeLangAndCss())
}
return (
<button className="box_76 flex-col" onClick={changeTitle}/>
)
}
export default ChangeLangButton;

51
src/page/Component/QualityRightTable.tsx Normal file
View File

@@ -0,0 +1,51 @@
import React from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import {useAppSelector} from "../../store/hooks";
import {Quality, selectQualityMonitorEntity} from "../../store/QualityMonitorEntity";
import {Table, TableBody, TableHead} from "@mui/material";
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "./StyledTable";
interface param {
timeName: "todayQualityLineAll" | "weekQualityLineAll" | "monthQualityLineAll";
lineName: "Line_1" | "Line_2" | "Line_3" | "Line_4";
}
function QualityRightTable(props: param) {
const AllData = useAppSelector(selectQualityMonitorEntity);
const TimeData = AllData[props.timeName];
const LineData = TimeData[props.lineName];
const SlicedLineData = LineData.slice(0, 6);
return (
<div className="rightTableAreaQ">
<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>
{SlicedLineData.map((item: Quality, index: number) => (
<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>
</div>
)
}
export default QualityRightTable;

71
src/page/Component/StyledTable.tsx Normal file
View File

@@ -0,0 +1,71 @@
import React from "react";
import {styled, TableCell, tableCellClasses, TableContainer, TableRow, ToggleButton} from "@mui/material";
export const StyledTableCell = styled(TableCell)(({theme}) => ({
[`&.${tableCellClasses.head}`]: {
backgroundColor: 'rgba(32, 55, 96, 0.7)',
color: theme.palette.common.white,
fontSize: 14,
padding: 0,
border: 0,
height: 28,
},
[`&.${tableCellClasses.body}`]: {
fontSize: 12,
color: theme.palette.common.white,
padding: 0,
border: 0,
height: 26
},
}));
export const StyledTableRow = styled(TableRow)(({theme}) => ({
'&:nth-of-type(odd)': {
backgroundColor: 'rgba(14, 32, 62, 0.7)',
},
backgroundColor: 'rgba(32, 55, 96, 0.7)',
}));
export const StyledTableContainer = styled(TableContainer)(({theme}) => ({
overflow: 'auto hidden',
'&::-webkit-scrollbar': {
height: 8,
WebkitAppearance: 'none'
},
'&::-webkit-scrollbar-thumb': {
borderRadius: 2,
backgroundColor: 'rgba(91, 196, 190, 0.5)',
},
'&::-webkit-scrollbar-button': {
width: 8,
borderBottomLeftRadius: 2,
borderBottomRightRadius: 2,
backgroundColor: 'rgba(91, 196, 190, 1)',
},
'&::-webkit-scrollbar-track': {
backgroundColor: 'rgba(12, 32, 67, 1)',
}
}));
export const StyledToggleButton = styled(ToggleButton)({
width: 120,
height: 24,
backgroundColor: 'rgba(49, 135, 140, 0.29)',
color: "white",
'&.Mui-selected': {
backgroundColor: 'rgba(86, 244, 231, 0.69)',
color: "white",
'&:hover': {
backgroundColor: 'rgba(86, 244, 231, 0.5)',
color: "white",
},
},
'&:hover': {
backgroundColor: 'rgba(86, 244, 231, 0.5)',
color: "white",
},
'&:active': {
backgroundColor: 'rgba(86, 244, 231, 0.69)',
color: "white",
},
});

26
src/page/Component/SwitchOnOff.tsx Normal file
View File

@@ -0,0 +1,26 @@
import React, {useState} from "react";
import intl from "react-intl-universal";
import '../../lanhuapp/common.css';
import "../../lanhuapp/index.css";
import {FormControlLabel, Switch} from "@mui/material";
import {useAppSelector, useAppDispatch} from "../../store/hooks";
import {selectSwitchState,ChangeSwitch} from "../../store/ChangeSwitchState";
function SwitchOnOff() {
const dispatch = useAppDispatch();
const [isSwitch, setIsSwitch] = useState(useAppSelector(selectSwitchState));
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
dispatch(ChangeSwitch())
setIsSwitch(event.target.checked);
}
return (
<div className={'switchBtn'}>
<FormControlLabel control={<Switch color={'warning'} checked={isSwitch} onChange={handleChange}/>}
label={intl.get('AutoSwitch')}/>
</div>
)
}
export default SwitchOnOff;

19
src/page/Component/TabPanel.tsx Normal file
View File

@@ -0,0 +1,19 @@
import React from "react";
import "../style/standard.css"
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
function TabPanel(props: TabPanelProps) {
const {children, value, index, ...other} = props;
return (
<div hidden={value !== index}>
{children}
</div>
)
}
export default TabPanel;

15
src/page/ErrorPage.tsx Normal file
View File

@@ -0,0 +1,15 @@
import React from "react";
import "./style/standard.css"
import intl from "react-intl-universal";
function ErrorPage() {
return (
<div className="error-page">
<h1>Oops!</h1>
<p>Sorry, an unexpected error has occurred.</p>
</div>
)
}
export default ErrorPage;

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
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;

14
src/page/MainE/CenterUpE.tsx Normal file
View File

@@ -0,0 +1,14 @@
import React from "react";
import LineBabylon from "../../babylonjs/LineBabylon";
import {Observable} from "@babylonjs/core";
function CenterUpE() {
return (
<div className="block_16_E flex-col fineWin">
<div className="fineWin-footer"/>
<LineBabylon/>
</div>
)
}
export default CenterUpE;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

110
src/page/style/standard.css Normal file
View File

@@ -0,0 +1,110 @@
.fineWin {
position: relative;
border: 2px solid;
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
backdrop-filter: blur(2px);
background: rgba(6, 16, 39, 0.3);
}
.fineWin::before {
position: absolute;
top: -2px;
left: -2px;
content: "";
width: 22px;
height: 22px;
border-top: 4px solid #52FFF1;
border-left: 4px solid #52FFF1;
}
.fineWin::after {
position: absolute;
top: -2px;
right: -2px;
content: "";
width: 22px;
height: 22px;
border-top: 4px solid #52FFF1;
border-right: 4px solid #52FFF1;
}
.fineWin .fineWin-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.fineWin .fineWin-footer::before {
position: absolute;
bottom: -2px;
left: -2px;
content: "";
width: 22px;
height: 22px;
border-bottom: 4px solid #52FFF1;
border-left: 4px solid #52FFF1;
}
.fineWin .fineWin-footer::after {
position: absolute;
bottom: -2px;
right: -2px;
content: "";
width: 22px;
height: 22px;
border-bottom: 4px solid #52FFF1;
border-right: 4px solid #52FFF1;
}
.error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: white;
}
.area1 {
margin-left: 700px;
}
.area2 {
margin-top: 15px;
}
.myText1 {
text-align: center;
font-size: medium;
color: white;
font-weight: bold;
}
.CenterDownAreaWidthAndHeight {
width: 992px;
height: 196px;
}
.btnArea {
position: absolute;
bottom: 1%;
right: 0.5%;
}
/*# sourceMappingURL=standard.css.map */
.centerButton_1{
position: fixed;
top: 20px; /* 根据需要调整距离顶部的距离 */
left: 20px; /* 根据需要调整距离左侧的距离 */
z-index: 1000; /* 确保按钮在其他内容的上方 */
padding: 10px 20px; /* 根据需要调整按钮大小 */
border: none;
background-color: #007bff; /* 按钮的背景颜色 */
color: white; /* 按钮的文字颜色 */
cursor: pointer;
border-radius: 5px; /* 按钮的圆角 */
}
.centerButton_2{
position: fixed;
top: 60px; /* 根据需要调整距离顶部的距离 */
left: 20px; /* 根据需要调整距离左侧的距离 */
z-index: 1000; /* 确保按钮在其他内容的上方 */
padding: 10px 20px; /* 根据需要调整按钮大小 */
border: none;
background-color: #007bff; /* 按钮的背景颜色 */
color: white; /* 按钮的文字颜色 */
cursor: pointer;
border-radius: 5px; /* 按钮的圆角 */
}

1
src/page/style/standard.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["standard.less"],"names":[],"mappings":"AAAA;EACE,kBAAA;EACA,iBAAA;EACA,4DAAA;EACA,cAAc,mGAAd;EACA,iBAAiB,SAAjB;EACA,gCAAA;;AAGA,QAAC;EACC,kBAAA;EACA,SAAA;EACA,UAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,6BAAA;EACA,8BAAA;;AAGF,QAAC;EACC,kBAAA;EACA,SAAA;EACA,WAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,6BAAA;EACA,+BAAA;;AA5BJ,QA+BE;EACE,kBAAA;EACA,OAAA;EACA,SAAA;EACA,WAAA;;AAEA,QANF,gBAMG;EACC,kBAAA;EACA,YAAA;EACA,UAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,gCAAA;EACA,8BAAA;;AAGF,QAjBF,gBAiBG;EACC,kBAAA;EACA,YAAA;EACA,WAAA;EACA,SAAS,EAAT;EACA,WAAA;EACA,YAAA;EACA,gCAAA;EACA,+BAAA;;AAKN;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,uBAAA;EACA,WAAA;EACA,YAAA;EACA,uBAAA;;AAGF;EACE,kBAAA;;AAGF;EACE,gBAAA;;AAGF;EACE,kBAAA;EACA,iBAAA;EACA,YAAA;EACA,iBAAA;;AAGF;EACE,YAAA;EACA,aAAA;;AAGF;EACE,kBAAA;EACA,UAAA;EACA,WAAA","file":"standard.css"}

96
src/page/style/standard.less Normal file
View File

@@ -0,0 +1,96 @@
.fineWin {
position: relative;
border: 2px solid;
box-shadow: inset 0px 0px 20px 0px rgba(255, 255, 255, 0.15);
border-image: linear-gradient(90deg, rgba(82, 255, 241, 0.6), rgba(95, 190, 249, 0), rgba(82, 255, 241, 0.6)) 2 2;
backdrop-filter: blur(2px);
background: rgba(6, 16, 39, 0.3);
//-webkit-filter: drop-shadow(0px 2px 16px rgba(7, 20, 36, 1));
&::before {
position: absolute;
top: -2px;
left: -2px;
content: "";
width: 22px;
height: 22px;
border-top: 4px solid #52FFF1;
border-left: 4px solid #52FFF1;
}
&::after {
position: absolute;
top: -2px;
right: -2px;
content: "";
width: 22px;
height: 22px;
border-top: 4px solid #52FFF1;
border-right: 4px solid #52FFF1;
}
.fineWin-footer {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
&::before {
position: absolute;
bottom: -2px;
left: -2px;
content: "";
width: 22px;
height: 22px;
border-bottom: 4px solid #52FFF1;
border-left: 4px solid #52FFF1;
}
&::after {
position: absolute;
bottom: -2px;
right: -2px;
content: "";
width: 22px;
height: 22px;
border-bottom: 4px solid #52FFF1;
border-right: 4px solid #52FFF1;
}
}
}
.error-page {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: white;
}
.area1 {
margin-left: 700px;
}
.area2 {
margin-top: 15px;
}
.myText1 {
text-align: center;
font-size: medium;
color: white;
font-weight: bold;
}
.CenterDownAreaWidthAndHeight {
width: 992px;
height: 196px
}
.btnArea {
position: absolute;
bottom: 1%;
right: 0.5%;
}

398
src/page/style/theme.json Normal file
View File

@@ -0,0 +1,398 @@
{
"color": [
"#e02094",
"#50f4e3",
"#c69dff",
"#ffb70c",
"#1a99ff",
"#eedd78",
"#73a373",
"#73b9bc",
"#7289ab",
"#91ca8c",
"#f49f42"
],
"backgroundColor": "rgba(0,0,0,0)",
"textStyle": {},
"title": {
"textStyle": {
"color": "#eeeeee"
},
"subtextStyle": {
"color": "#aaaaaa"
}
},
"line": {
"itemStyle": {
"borderWidth": 1
},
"lineStyle": {
"width": 2
},
"symbolSize": 4,
"symbol": "circle",
"smooth": false
},
"radar": {
"itemStyle": {
"borderWidth": 1
},
"lineStyle": {
"width": 2
},
"symbolSize": 4,
"symbol": "circle",
"smooth": false
},
"bar": {
"itemStyle": {
"barBorderWidth": 0,
"barBorderColor": "#ccc"
}
},
"pie": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"scatter": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"boxplot": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"parallel": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"sankey": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"funnel": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"gauge": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
}
},
"candlestick": {
"itemStyle": {
"color": "#fd1050",
"color0": "#0cf49b",
"borderColor": "#fd1050",
"borderColor0": "#0cf49b",
"borderWidth": 1
}
},
"graph": {
"itemStyle": {
"borderWidth": 0,
"borderColor": "#ccc"
},
"lineStyle": {
"width": 1,
"color": "#aaaaaa"
},
"symbolSize": 4,
"symbol": "circle",
"smooth": false,
"color": [
"#e02094",
"#50f4e3",
"#c69dff",
"#ffb70c",
"#1a99ff",
"#eedd78",
"#73a373",
"#73b9bc",
"#7289ab",
"#91ca8c",
"#f49f42"
],
"label": {
"color": "#eeeeee"
}
},
"map": {
"itemStyle": {
"areaColor": "#eee",
"borderColor": "#444",
"borderWidth": 0.5
},
"label": {
"color": "#000"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(255,215,0,0.8)",
"borderColor": "#444",
"borderWidth": 1
},
"label": {
"color": "rgb(100,0,0)"
}
}
},
"geo": {
"itemStyle": {
"areaColor": "#eee",
"borderColor": "#444",
"borderWidth": 0.5
},
"label": {
"color": "#000"
},
"emphasis": {
"itemStyle": {
"areaColor": "rgba(255,215,0,0.8)",
"borderColor": "#444",
"borderWidth": 1
},
"label": {
"color": "rgb(100,0,0)"
}
}
},
"categoryAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#5982b2"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#eeeeee"
}
},
"axisLabel": {
"show": true,
"color": "#eeeeee"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#5982b2"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"#eeeeee"
]
}
}
},
"valueAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#5982b2"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#eeeeee"
}
},
"axisLabel": {
"show": true,
"color": "#eeeeee"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#5982b2"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"#eeeeee"
]
}
}
},
"logAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#5982b2"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#eeeeee"
}
},
"axisLabel": {
"show": true,
"color": "#eeeeee"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#5982b2"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"#eeeeee"
]
}
}
},
"timeAxis": {
"axisLine": {
"show": true,
"lineStyle": {
"color": "#5982b2"
}
},
"axisTick": {
"show": false,
"lineStyle": {
"color": "#eeeeee"
}
},
"axisLabel": {
"show": true,
"color": "#eeeeee"
},
"splitLine": {
"show": true,
"lineStyle": {
"color": [
"#5982b2"
]
}
},
"splitArea": {
"show": false,
"areaStyle": {
"color": [
"#eeeeee"
]
}
}
},
"toolbox": {
"iconStyle": {
"borderColor": "#999999"
},
"emphasis": {
"iconStyle": {
"borderColor": "#666666"
}
}
},
"legend": {
"textStyle": {
"color": "#eeeeee"
}
},
"tooltip": {
"axisPointer": {
"lineStyle": {
"color": "#eeeeee",
"width": "1"
},
"crossStyle": {
"color": "#eeeeee",
"width": "1"
}
}
},
"timeline": {
"lineStyle": {
"color": "#eeeeee",
"width": 1
},
"itemStyle": {
"color": "#dd6b66",
"borderWidth": 1
},
"controlStyle": {
"color": "#eeeeee",
"borderColor": "#eeeeee",
"borderWidth": 0.5
},
"checkpointStyle": {
"color": "#e43c59",
"borderColor": "#c23531"
},
"label": {
"color": "#eeeeee"
},
"emphasis": {
"itemStyle": {
"color": "#a9334c"
},
"controlStyle": {
"color": "#eeeeee",
"borderColor": "#eeeeee",
"borderWidth": 0.5
},
"label": {
"color": "#eeeeee"
}
}
},
"visualMap": {
"color": [
"#bf444c",
"#d88273",
"#f6efa6"
]
},
"dataZoom": {
"backgroundColor": "rgba(47,69,84,0)",
"dataBackgroundColor": "rgba(255,255,255,0.3)",
"fillerColor": "rgba(167,183,204,0.4)",
"handleColor": "#a7b7cc",
"handleSize": "100%",
"textStyle": {
"color": "#eeeeee"
}
},
"markPoint": {
"label": {
"color": "#eeeeee"
},
"emphasis": {
"label": {
"color": "#eeeeee"
}
}
}
}

3
src/page/style/theme.tsx Normal file
View File

@@ -0,0 +1,3 @@
import theme from "./theme.json"
export default theme;

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