假数据版本
This commit is contained in:
@@ -14,7 +14,7 @@
|
||||
manifest.json provides metadata used when your web app is installed on a
|
||||
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
||||
-->
|
||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
||||
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> -->
|
||||
<!--
|
||||
Notice the use of %PUBLIC_URL% in the tags above.
|
||||
It will be replaced with the URL of the `public` folder during the build.
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
{
|
||||
"url": "india.mes.picaiba.com/api/"
|
||||
"url": "192.168.1.40:48080"
|
||||
}
|
||||
36
src/App.tsx
36
src/App.tsx
@@ -4,14 +4,10 @@ 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 { createBrowserRouter, RouterProvider } from "react-router-dom";
|
||||
import { createHashRouter, RouterProvider } from "react-router-dom";
|
||||
|
||||
import ErrorPage from "./page/ErrorPage";
|
||||
import MainP from "./page/MainP/MainP";
|
||||
import MainE from "./page/MainE/MainE";
|
||||
import MainQ from "./page/MainQ/MainQ";
|
||||
import SwitchAll from "./page/AutoSwitch/SwitchAll";
|
||||
import SwitchLine from "./page/AutoSwitch/SwitchLine";
|
||||
import { MyObservable } from "./context/MyObservable";
|
||||
import { Observable } from "@babylonjs/core";
|
||||
import { selectGlassStatus } from "./store/ProductionMonitoringEntity";
|
||||
@@ -51,38 +47,12 @@ function App() {
|
||||
|
||||
setCurrentLocale(Locale);
|
||||
|
||||
const router = createBrowserRouter([
|
||||
const router = createHashRouter([
|
||||
{
|
||||
path: "/:LineID?",
|
||||
element: <LinePage />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/P",
|
||||
element: <MainP />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/Q",
|
||||
element: <MainQ />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/E/:LineID?",
|
||||
element: <MainE />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
///////////////////////////////////////////////////////////////////////////
|
||||
{
|
||||
path: "/SA",
|
||||
element: <SwitchAll />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
{
|
||||
path: "/SL/:LineID?",
|
||||
element: <SwitchLine />,
|
||||
errorElement: <ErrorPage />,
|
||||
},
|
||||
/////////////////////////////////////////////////////////////////////////////
|
||||
{
|
||||
path: "/TP/:LineID?",
|
||||
|
||||
@@ -1,101 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Babylon.js Product Page Demo</title>
|
||||
|
||||
<!-- <link rel="stylesheet" href="https://use.typekit.net/pyp7dhw.css"> -->
|
||||
<link href='https://d33wubrfki0l68.cloudfront.net/css/c204e345dce3e9e660ec5e23ae93696b9c5b9d42/demos/productpage/styles.css'
|
||||
rel='stylesheet' type='text/css'/>
|
||||
|
||||
<script src="https://use.typekit.net/pyp7dhw.js"></script>
|
||||
<script>try {
|
||||
Typekit.load({async: false});
|
||||
} catch (e) {
|
||||
}</script>
|
||||
|
||||
<script src="https://preview.babylonjs.com/babylon.js"></script>
|
||||
<script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
|
||||
<script src="https://preview.babylonjs.com/nodeEditor/babylon.nodeEditor.js"></script>
|
||||
<script src="https://preview.babylonjs.com/gui/babylon.gui.js"></script>
|
||||
<script src="https://code.jquery.com/pep/0.4.3/pep.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<canvas id="renderCanvas" touch-action="none"></canvas> <!-- touch-action="none" for best results from PEP -->
|
||||
|
||||
<script src='https://d33wubrfki0l68.cloudfront.net/bundles/67cad91c66fe8e5633757e23e16f4220bf108fb5.js'></script>
|
||||
<div id="header">
|
||||
<div class="headerContent">
|
||||
<a href="https://www.babylonjs.com/"><img src="assets/textures/babylonLogo_48px.svg"/></a><span id="headerType">eCommerce Product Demo</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="htmlLayer">
|
||||
<div id="loader">
|
||||
<div class="lds-ripple">
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
<div id="loadingText">
|
||||
<h1>Loading...</h1>
|
||||
</div>
|
||||
</div>
|
||||
<div id="block_1">
|
||||
<h1 id="head_1" class="track">Interactive Product Pages</h1>
|
||||
<p>Babylon.js gives you all the power you need to create realistic interactive experiences for your product's
|
||||
audience. Leverage the power of 3D rendering empowered by animation,
|
||||
behaviors, audio, video, and a full GUI layer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="bg1">
|
||||
<div id="block_2">
|
||||
<h1 id="head_2" class="track">PBR Node Materials</h1>
|
||||
<p>Create custom shaders for your assets using the node materials with full support for physically based
|
||||
rendering materials. This includes support for
|
||||
image-based lighting, real-time environment probes, subsurface translucency, refraction, and more!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div id="block_3">
|
||||
<h1 id="head_3" class="track">Advanced PBR Features</h1>
|
||||
<p>Node material's physically-based rendering supports advanced features like clearcoat and sheen. Enjoy the
|
||||
flexibility of creating custom shaders to unlock complete creative freedom while retaining the ability
|
||||
to
|
||||
render a wide range of materials accurately.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bg2">
|
||||
<div id="block_4">
|
||||
<h1 id="head_4" class="track">Procedural Textures</h1>
|
||||
<p>Node materials can now create procedural textures to be used as you wish. A custom procedural texture
|
||||
created in the node material editor is being used to morph between materials on this asset. Notice
|
||||
how the morph is always different due to our custom shader allowing us to change the procedural texture
|
||||
every time we use it.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div id="bg3">
|
||||
<div id="block_5">
|
||||
<h1 id="head_5" class="track">Animating Material Parameters</h1>
|
||||
<p>Node materials allow us to manipulate parameters directly or through animation. This enables interations
|
||||
such as the animated ring light in the demo asset. We are also able to tie this animation into our post
|
||||
processing like the glow layer you see here. And we still retain the ability to add all of this
|
||||
functionality to PBR materials for the best possible rendering.
|
||||
</p>
|
||||
</div>
|
||||
<div id="block_6">
|
||||
<h1 id="head_6" class="track">GUI Controls in Materials</h1>
|
||||
<p>Babylon.js also allows you to put GUI controls directly into our materials used on a mesh. You can see
|
||||
how we can make a fully function product demo by displaying the actual time and date on the device
|
||||
screen.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
1183
src/Test/Test3.js
1183
src/Test/Test3.js
Filskillnaden har hållits tillbaka eftersom den är för stor
Load Diff
@@ -1,14 +0,0 @@
|
||||
import React from 'react'
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
const BasicComponent: React.FC<any> = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="title">Basic Examples:</div>
|
||||
<div>{intl.get('SIMPLE')}</div>
|
||||
<div>{intl.get('HELLO', { name: 'Tony', where: 'Alibaba' })}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default BasicComponent;
|
||||
@@ -1,14 +0,0 @@
|
||||
import React from 'react'
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
const CurrencyComponent: React.FC<any> = () => {
|
||||
let price = 123456.78;
|
||||
return (
|
||||
<div>
|
||||
<div className="title">Currency Example:</div>
|
||||
<div>{intl.get('SALE_PRICE', { price })}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CurrencyComponent;
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from 'react'
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
const DateComponent: React.FC<any> = () => {
|
||||
const start = new Date();
|
||||
const end = new Date();
|
||||
const expires = new Date();
|
||||
return (
|
||||
<div>
|
||||
<div className="title">Date Examples:</div>
|
||||
<div>{intl.get('SALE_START', { start })}</div>
|
||||
<div>{intl.get('SALE_END', { end })}</div>
|
||||
<div>{intl.get('COUPON', { expires })}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default DateComponent;
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react'
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
const HtmlComponent: React.FC<any> = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="title">Html Examples:</div>
|
||||
<div>{intl.getHTML('TIP')}</div>
|
||||
<div>{intl.getHTML('TIP_VAR', { message: 'HTML with variables' })}</div>
|
||||
<div>{intl.getHTML('TIP_VAR', { message: '<script>alert("ReactIntlUniversal prevents from xss attack")</script>' })}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default HtmlComponent;
|
||||
@@ -1,13 +0,0 @@
|
||||
import React from 'react';
|
||||
import util from '../core/util';
|
||||
|
||||
const MessageNotInComponent: React.FC<any> = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="title">Message Not in Component Example:</div>
|
||||
<div>{util.getMessage()}</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default MessageNotInComponent;
|
||||
@@ -1,15 +0,0 @@
|
||||
import React from 'react'
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
const PluralComponent: React.FC<any> = () => {
|
||||
return (
|
||||
<div>
|
||||
<div className="title">Plural Examples:</div>
|
||||
<div>{intl.get("PHOTO", { photoNum: 0 })}</div>
|
||||
<div>{intl.get("PHOTO", { photoNum: 1 })}</div>
|
||||
<div>{intl.get("PHOTO", { photoNum: 1000000 })}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default PluralComponent;
|
||||
@@ -1,7 +0,0 @@
|
||||
import intl from 'react-intl-universal';
|
||||
|
||||
const util = {
|
||||
getMessage: () => intl.get('MESSAGE_NOT_IN_COMPONENT'),
|
||||
};
|
||||
|
||||
export default util;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import intl from 'react-intl-universal';
|
||||
import locales from "../locales/locales";
|
||||
import useForceUpdate from 'use-force-update';
|
||||
import BasicComponent from "./components/basic";
|
||||
|
||||
function Test() {
|
||||
const forceUpdate = useForceUpdate();
|
||||
useEffect(() => {
|
||||
setthetext();
|
||||
})
|
||||
const setthetext = ()=>{
|
||||
let currenttext = "zh-CN";
|
||||
setCurrentLocale(currenttext);
|
||||
};
|
||||
|
||||
const setCurrentLocale = (currentLocale: string) => {
|
||||
intl.init({
|
||||
currentLocale,
|
||||
locales: locales,
|
||||
});
|
||||
};
|
||||
|
||||
const OnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
|
||||
setCurrentLocale(e.target.value)
|
||||
forceUpdate();
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<select onChange={OnChange}>
|
||||
<option value={"zh-CN"}>中文</option>
|
||||
<option value={"en-US"}>英文</option>
|
||||
</select>
|
||||
<div id='name'>{intl.get('SIMPLE')}</div>
|
||||
<BasicComponent/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Test;
|
||||
@@ -1,77 +0,0 @@
|
||||
import React, {useEffect, useState} from "react";
|
||||
import intl from 'react-intl-universal';
|
||||
import useForceUpdate from 'use-force-update';
|
||||
import locales from "../locales/locales";
|
||||
|
||||
import BasicComponent from "./components/basic";
|
||||
|
||||
const LOCALES_LIST = [
|
||||
{
|
||||
label: "English",
|
||||
value: "en-US",
|
||||
},
|
||||
{
|
||||
label: "简体中文",
|
||||
value: "zh-CN",
|
||||
},
|
||||
];
|
||||
|
||||
function Test2() {
|
||||
const forceUpdate = useForceUpdate();
|
||||
const [initDone, setInitDone] = React.useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
initializeIntl();
|
||||
})
|
||||
|
||||
const initializeIntl = () => {
|
||||
// 1. Get the currentLocale from url, cookie, or browser setting
|
||||
let currentLocale = intl.determineLocale({
|
||||
urlLocaleKey: 'lang', // Example: https://fe-tool.com/react-intl-universal?lang=en-US
|
||||
cookieLocaleKey: 'lang', // Example: "lang=en-US" in cookie
|
||||
});
|
||||
|
||||
// 2. Fallback to "en-US" if the currentLocale isn't supported in LOCALES_LIST
|
||||
if (!LOCALES_LIST.some(item => item.value === currentLocale)) {
|
||||
currentLocale = "en-US"
|
||||
}
|
||||
|
||||
// 3. Set currentLocale and load locale data
|
||||
setCurrentLocale(currentLocale);
|
||||
|
||||
// 4. After loading locale data, start to render
|
||||
setInitDone(true);
|
||||
}
|
||||
|
||||
const setCurrentLocale = (currentLocale: string) => {
|
||||
intl.init({
|
||||
currentLocale,
|
||||
locales: locales,
|
||||
});
|
||||
};
|
||||
|
||||
const onLocaleChange = (e: React.ChangeEvent<HTMLSelectElement>)=>{
|
||||
setCurrentLocale(e.target.value);
|
||||
forceUpdate();
|
||||
}
|
||||
const localeSelector = (
|
||||
<select onChange={onLocaleChange} defaultValue="">
|
||||
<option value="" disabled>Change Language</option>
|
||||
{LOCALES_LIST.map(locale=>(
|
||||
<option key={locale.value} value={locale.value}>{locale.label}</option>
|
||||
))}
|
||||
</select>
|
||||
);
|
||||
return (
|
||||
<div>
|
||||
{initDone && (
|
||||
<div className="react-intl-universal-example">
|
||||
{localeSelector}
|
||||
<BasicComponent/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Test2;
|
||||
Filskillnaden har hållits tillbaka eftersom den är för stor
Load Diff
@@ -20,6 +20,14 @@ import AlarmTipYellow from "./../page/LinePage/assets/icon/y.png";
|
||||
import AlarmTipRed from "./../page/LinePage/assets/icon/r.png";
|
||||
|
||||
// const onEquObservable = new Observable();
|
||||
// const lineNameNo = {
|
||||
// "1":"一",
|
||||
// "2":"二",
|
||||
// "3":"三",
|
||||
// "4":"四",
|
||||
// "5":"五",
|
||||
// }
|
||||
const lineNameNo = ["一","二","三","四","五"]
|
||||
|
||||
const myStyle = {
|
||||
width: "1041px",
|
||||
@@ -554,7 +562,7 @@ function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
<div className="model_info">
|
||||
<span className="reset_btn" onClick={resetModel}></span>
|
||||
<span className="title">
|
||||
第五产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"}
|
||||
第{lineNameNo[Number(modelPath.slice(-3,-2))-1]}产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"}
|
||||
</span>
|
||||
</div>
|
||||
{selectedMeshName && (
|
||||
|
||||
@@ -1,363 +0,0 @@
|
||||
import React, { useEffect, useRef, useState, useContext, useMemo } from "react";
|
||||
import * as BABYLON from '@babylonjs/core';
|
||||
import "@babylonjs/core/Debug/debugLayer";
|
||||
import "@babylonjs/inspector";
|
||||
import "@babylonjs/loaders/glTF";
|
||||
import { GridMaterial } from '@babylonjs/materials/';
|
||||
import { Animatable, HemisphericLight, Mesh, Observable, Vector3 } from "@babylonjs/core";
|
||||
import {
|
||||
GlassAnimation1_1, GlassAnimation1_2D, GlassAnimation1_2U, GlassAnimation1_3, GlassAnimation1_4,
|
||||
GlassAnimation2_1, GlassAnimation2_2D, GlassAnimation2_2U, GlassAnimation2_3, GlassAnimation2_4,
|
||||
GlassAnimation3_1, GlassAnimation3_2D, GlassAnimation3_2U, GlassAnimation3_3, GlassAnimation3_4,
|
||||
GlassAnimation4_1, GlassAnimation4_2D, GlassAnimation4_2U, GlassAnimation4_3, GlassAnimation4_4
|
||||
} from "./GlassAnimation";
|
||||
import { useAppSelector } from "../store/hooks";
|
||||
import { GlassStatus, selectGlassStatus } from "../store/ProductionMonitoringEntity";
|
||||
import '../page/style/standard.css';
|
||||
import { MyObservable } from "../context/MyObservable";
|
||||
import { Button, ButtonGroup } from "@mui/material";
|
||||
import intl from "react-intl-universal";
|
||||
import { EquStatusInterface, selectEquStatus } from "../store/EquStatusEntity";
|
||||
import EquMap from "./EquMap";
|
||||
|
||||
const onMainCamObservable = new Observable();
|
||||
const onEquObservable = new Observable();
|
||||
|
||||
|
||||
|
||||
const myStyle = {
|
||||
width: '1036px',
|
||||
height: '666px',
|
||||
outline: 'none',
|
||||
}
|
||||
|
||||
|
||||
|
||||
const DetailCamera = {
|
||||
Part_1: {
|
||||
alpha: BABYLON.Tools.ToRadians(270),
|
||||
beta: BABYLON.Tools.ToRadians(25),
|
||||
radius: 85,
|
||||
target: new BABYLON.Vector3(-110, 0, -8)
|
||||
},
|
||||
Part_2: {
|
||||
alpha: BABYLON.Tools.ToRadians(270),
|
||||
beta: BABYLON.Tools.ToRadians(25),
|
||||
radius: 85,
|
||||
target: new BABYLON.Vector3(-40, 0, -8)
|
||||
},
|
||||
Part_3: {
|
||||
alpha: BABYLON.Tools.ToRadians(270),
|
||||
beta: BABYLON.Tools.ToRadians(25),
|
||||
radius: 85,
|
||||
target: new BABYLON.Vector3(0, 0, -8)
|
||||
},
|
||||
Part_4: {
|
||||
alpha: BABYLON.Tools.ToRadians(270),
|
||||
beta: BABYLON.Tools.ToRadians(25),
|
||||
radius: 85,
|
||||
target: new BABYLON.Vector3(110, 0, -8)
|
||||
},
|
||||
}
|
||||
|
||||
interface MybabylonJSProps {
|
||||
modelPath: string; // 明确 modelPath 属性的类型为 string
|
||||
}
|
||||
|
||||
|
||||
function MybabylonJS({ modelPath }: MybabylonJSProps) {
|
||||
const onGlassObservable = useContext(MyObservable);
|
||||
const EquStatus = useAppSelector(selectEquStatus);
|
||||
const canvasRef = useRef(null);
|
||||
onEquObservable.notifyObservers(EquStatus);
|
||||
// const thisLineGlassStatus = useAppSelector(selectGlassStatus)
|
||||
// onGlassObservable.notifyObservers(thisLineGlassStatus)
|
||||
const [SelectedMeshName, setSelectedMeshName] = useState<string | null>(null);
|
||||
|
||||
|
||||
interface MybabylonJSProps {
|
||||
modelPath: string;
|
||||
}
|
||||
|
||||
// 使用 useRef 来存储当前加载的模型引用
|
||||
const currentMeshesRef = useRef<Array<BABYLON.AbstractMesh>>([]);
|
||||
|
||||
|
||||
|
||||
|
||||
useEffect(
|
||||
() => {
|
||||
// 确保 canvas 引用存在
|
||||
if (!canvasRef.current) return;
|
||||
|
||||
const canvas = canvasRef.current;
|
||||
const engine = new BABYLON.Engine(canvas, true, { preserveDrawingBuffer: true, stencil: true })
|
||||
|
||||
const createScene = async function () {
|
||||
// This creates a basic Babylon Scene object (non-mesh)
|
||||
const scene = new BABYLON.Scene(engine);
|
||||
scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
|
||||
|
||||
const light = new BABYLON.DirectionalLight('light', new BABYLON.Vector3(20, 20, 100), scene);
|
||||
const light2 = new BABYLON.PointLight('light2', new BABYLON.Vector3(20, 20, 100), scene);
|
||||
|
||||
const Glass1_1 = new BABYLON.TransformNode('Glass1_1')
|
||||
|
||||
const baseLight = new HemisphericLight('hemiLight', new Vector3(-1, 1, 0), scene);
|
||||
baseLight.intensity = 1;
|
||||
baseLight.diffuse = new BABYLON.Color3(1, 1, 1);
|
||||
baseLight.specular = new BABYLON.Color3(0.25, 0.25, 0.25);
|
||||
baseLight.groundColor = new BABYLON.Color3(0.5, 0.5, 0.5);
|
||||
|
||||
//add an arcRotateCamera to the scene
|
||||
const camera = new BABYLON.ArcRotateCamera("camera", BABYLON.Tools.ToRadians(245), BABYLON.Tools.ToRadians(25), 215, new BABYLON.Vector3(-2, 0, -8));
|
||||
camera.lowerRadiusLimit = 10;
|
||||
camera.upperRadiusLimit = 600;
|
||||
|
||||
// This attaches the camera to the canvas
|
||||
camera.attachControl(canvas, true);
|
||||
|
||||
//创建一个材质
|
||||
const newMt = new BABYLON.StandardMaterial("newMt");
|
||||
newMt.diffuseColor = BABYLON.Color3.Blue();
|
||||
|
||||
|
||||
const ground = BABYLON.MeshBuilder.CreateGround('ground', {
|
||||
width: 1000,
|
||||
height: 1000,
|
||||
subdivisions: 1
|
||||
}, scene);
|
||||
|
||||
|
||||
ground.scaling.x = 100;
|
||||
ground.scaling.z = ground.scaling.x;
|
||||
ground.isPickable = false;
|
||||
|
||||
let grid = new GridMaterial("grid", scene);
|
||||
|
||||
grid.majorUnitFrequency = 10
|
||||
grid.minorUnitVisibility = .3
|
||||
grid.gridRatio = .04
|
||||
grid.backFaceCulling = !1
|
||||
grid.mainColor = new BABYLON.Color3(1, 1, 1)
|
||||
grid.lineColor = new BABYLON.Color3(1, 1, 1)
|
||||
grid.opacity = .8
|
||||
grid.zOffset = 1
|
||||
grid.opacityTexture = new BABYLON.Texture("/public/png/backgroundGround.png", scene)
|
||||
ground.material = grid;
|
||||
|
||||
|
||||
let hl = new BABYLON.HighlightLayer('hl1', scene);
|
||||
let hl2 = new BABYLON.HighlightLayer('hl2', scene);
|
||||
|
||||
|
||||
// var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, scene);
|
||||
|
||||
// 定义一个函数来加载或重新加载模型
|
||||
const loadOrReloadModel = async () => {
|
||||
// 在加载新模型之前卸载已加载的模型
|
||||
currentMeshesRef.current.forEach(mesh => {
|
||||
if (mesh && mesh.parent) {
|
||||
scene.removeMesh(mesh, true);
|
||||
}
|
||||
});
|
||||
currentMeshesRef.current = []; // 重置模型数组
|
||||
try { // 使用 ImportMeshAsync 加载新模型
|
||||
var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `${modelPath}.babylon`, scene);
|
||||
// var LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line1.babylon`, scene);
|
||||
// var LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line2.babylon`, scene);
|
||||
// var LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line3.babylon`, scene);
|
||||
// var LOD3MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line4.babylon`, scene);
|
||||
// var LOD4MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', `line5.babylon`, scene);
|
||||
// 将新加载的模型添加到 currentMeshesRef 中
|
||||
currentMeshesRef.current.push(...LOD0MESH.meshes);
|
||||
|
||||
|
||||
// ...为新加载的模型设置交互逻辑
|
||||
|
||||
LOD0MESH.meshes.map((mesh) => {
|
||||
mesh.isPickable = true;
|
||||
mesh.actionManager = new BABYLON.ActionManager(scene);
|
||||
//鼠标移动到物体上亮显
|
||||
mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, () => {
|
||||
// @ts-ignore
|
||||
hl.addMesh(mesh, BABYLON.Color3.Green());
|
||||
|
||||
}));
|
||||
mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, () => {
|
||||
// @ts-ignore
|
||||
hl.removeMesh(mesh)
|
||||
|
||||
}));
|
||||
|
||||
|
||||
mesh._scene.onPointerDown = async (event, _pickResult) => {
|
||||
const pickInfo = mesh._scene.pick(mesh._scene.pointerX, mesh._scene.pointerY)
|
||||
|
||||
const clickedPosition = _pickResult.pickedPoint
|
||||
//如果需要获取吗模型根节点，而不是模型中某个组件，请用一下方法
|
||||
// getRootNode(pickInfo.pickedMesh as BABYLON.Node) 如上篇文章getRootNode函数
|
||||
|
||||
//判断是否是右键
|
||||
if (!(event.buttons === 1 && pickInfo.pickedMesh)) return
|
||||
const MeshName1 = pickInfo.pickedMesh.name.split(".")[0]
|
||||
|
||||
setSelectedMeshName(MeshName1)
|
||||
|
||||
|
||||
} })
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
onEquObservable.add((eventData, eventState) => {
|
||||
LOD0MESH.meshes.find((mesh) => {
|
||||
// @ts-ignore
|
||||
hl2.removeMesh(mesh);
|
||||
|
||||
})
|
||||
Object.keys(eventData as EquStatusInterface).map((key) => {
|
||||
// @ts-ignore
|
||||
if (eventData[key] == 2) {
|
||||
// @ts-ignore
|
||||
EquMap[key].map((name) => {
|
||||
LOD0MESH.meshes.find((mesh) => {
|
||||
if (mesh.name == name) {
|
||||
// @ts-ignore
|
||||
hl2.addMesh(mesh, BABYLON.Color3.Red());
|
||||
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
/////////////////////////////////////////////////////////////////////////////////////////////////
|
||||
|
||||
} catch (error) {
|
||||
console.error('加载模型失败:', error);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// 调用函数以加载或重新加载模型
|
||||
loadOrReloadModel();
|
||||
|
||||
function reset() {
|
||||
camera.target = new BABYLON.Vector3(-2, 0, -8);
|
||||
camera.alpha = BABYLON.Tools.ToRadians(245);
|
||||
camera.beta = BABYLON.Tools.ToRadians(25);
|
||||
camera.radius = 215;
|
||||
}
|
||||
|
||||
let resetCamera = setTimeout(reset, 15000)
|
||||
scene.onPointerObservable.add((pointerInfo) => {
|
||||
// console.log(camera.target, camera.alpha * 180 / 3.14, camera.beta * 180 / 3.14, camera.radius)
|
||||
switch (pointerInfo.type) {
|
||||
case BABYLON.PointerEventTypes.POINTERMOVE:
|
||||
clearTimeout(resetCamera);
|
||||
resetCamera = setTimeout(reset, 15000)
|
||||
}
|
||||
})
|
||||
|
||||
onMainCamObservable.add((eventData, eventState) => {
|
||||
clearTimeout(resetCamera);
|
||||
resetCamera = setTimeout(reset, 5000);
|
||||
switch (eventData) {
|
||||
case 1:
|
||||
camera.target = DetailCamera.Part_1.target;
|
||||
camera.alpha = DetailCamera.Part_1.alpha;
|
||||
camera.beta = DetailCamera.Part_1.beta;
|
||||
camera.radius = DetailCamera.Part_1.radius;
|
||||
break;
|
||||
case 2:
|
||||
camera.target = DetailCamera.Part_2.target;
|
||||
camera.alpha = DetailCamera.Part_2.alpha;
|
||||
camera.beta = DetailCamera.Part_2.beta;
|
||||
camera.radius = DetailCamera.Part_2.radius;
|
||||
break;
|
||||
case 3:
|
||||
camera.target = DetailCamera.Part_3.target;
|
||||
camera.alpha = DetailCamera.Part_3.alpha;
|
||||
camera.beta = DetailCamera.Part_3.beta;
|
||||
camera.radius = DetailCamera.Part_3.radius;
|
||||
break;
|
||||
case 4:
|
||||
camera.target = DetailCamera.Part_4.target;
|
||||
camera.alpha = DetailCamera.Part_4.alpha;
|
||||
camera.beta = DetailCamera.Part_4.beta;
|
||||
camera.radius = DetailCamera.Part_4.radius;
|
||||
break;
|
||||
}
|
||||
})
|
||||
|
||||
return scene;
|
||||
};
|
||||
|
||||
// call the createScene function
|
||||
const scene = createScene();
|
||||
|
||||
scene.then((scene) => {
|
||||
|
||||
|
||||
})
|
||||
|
||||
// run the render loop
|
||||
scene.then((scene) => {
|
||||
engine.runRenderLoop(function () {
|
||||
scene.render()
|
||||
});
|
||||
},
|
||||
(reason) => {
|
||||
console.log(reason);
|
||||
}
|
||||
);
|
||||
|
||||
// Resize
|
||||
window.addEventListener("resize", function () {
|
||||
engine.resize();
|
||||
});
|
||||
|
||||
// 组件卸载时的清理逻辑
|
||||
return () => {
|
||||
// 清理场景和引擎资源
|
||||
engine.dispose();
|
||||
};
|
||||
},
|
||||
[modelPath]
|
||||
);
|
||||
|
||||
|
||||
const handleClick1 = () => {
|
||||
onMainCamObservable.notifyObservers(1)
|
||||
}
|
||||
const handleClick2 = () => {
|
||||
onMainCamObservable.notifyObservers(2)
|
||||
}
|
||||
const handleClick3 = () => {
|
||||
onMainCamObservable.notifyObservers(3)
|
||||
}
|
||||
const handleClick4 = () => {
|
||||
onMainCamObservable.notifyObservers(4)
|
||||
}
|
||||
|
||||
|
||||
return (
|
||||
<div style={myStyle}>
|
||||
|
||||
<ButtonGroup variant="contained" aria-label="outlined button group" className={'btnArea'}>
|
||||
<h2>当前选择: {SelectedMeshName}</h2>
|
||||
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick1}>{intl.get('Part1')}</Button>
|
||||
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick2}>{intl.get('Part2')}</Button>
|
||||
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick3}>{intl.get('Part3')}</Button>
|
||||
<Button sx={{ backgroundColor: 'rgba(86, 244, 231, 0.69)' }} onClick={handleClick4}>{intl.get('Part4')}</Button>
|
||||
</ButtonGroup>
|
||||
<canvas ref={canvasRef} style={myStyle} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default MybabylonJS;
|
||||
Filskillnaden har hållits tillbaka eftersom den är för stor
Load Diff
Filskillnaden har hållits tillbaka eftersom den är för stor
Load Diff
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
|
||||
|
Före Bredd: | Höjd: | Storlek: 2.6 KiB |
@@ -1,65 +0,0 @@
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import MainP from "../MainP/MainP";
|
||||
import MainE from "../MainE/MainE";
|
||||
import MainQ from "../MainQ/MainQ";
|
||||
import TabPanel from "../Component/TabPanel";
|
||||
import SwitchOnOff from "../Component/SwitchOnOff";
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectSwitchState} from "../../store/ChangeSwitchState";
|
||||
import {ThisLineID} from "../../context/ThisLineID";
|
||||
|
||||
function SwitchAll() {
|
||||
const [PageIndex, setPageIndex] = useState(1)
|
||||
const state = useAppSelector(selectSwitchState)
|
||||
useEffect(() => {
|
||||
let timerId: NodeJS.Timer;
|
||||
|
||||
function StartSwitch() {
|
||||
timerId = setTimeout(() => {
|
||||
if (PageIndex < 6) {
|
||||
setPageIndex(PageIndex + 1)
|
||||
} else {
|
||||
setPageIndex(1)
|
||||
}
|
||||
}, 30000)
|
||||
}
|
||||
|
||||
function StopSwitch() {
|
||||
clearInterval(timerId)
|
||||
}
|
||||
|
||||
if (state) {
|
||||
StartSwitch()
|
||||
} else {
|
||||
StopSwitch()
|
||||
}
|
||||
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
return () => {
|
||||
clearInterval(timerId)
|
||||
}
|
||||
}, [PageIndex, state]
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<SwitchOnOff/>
|
||||
<TabPanel index={1} value={PageIndex}><MainP/></TabPanel>
|
||||
<TabPanel index={2} value={PageIndex}><MainQ/></TabPanel>
|
||||
<ThisLineID.Provider value={'1'}>
|
||||
<TabPanel index={3} value={PageIndex}><MainE/></TabPanel>
|
||||
</ThisLineID.Provider>
|
||||
<ThisLineID.Provider value={'2'}>
|
||||
<TabPanel index={4} value={PageIndex}><MainE/></TabPanel>
|
||||
</ThisLineID.Provider>
|
||||
<ThisLineID.Provider value={'3'}>
|
||||
<TabPanel index={5} value={PageIndex}><MainE/></TabPanel>
|
||||
</ThisLineID.Provider>
|
||||
<ThisLineID.Provider value={'4'}>
|
||||
<TabPanel index={6} value={PageIndex}><MainE/></TabPanel>
|
||||
</ThisLineID.Provider>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SwitchAll;
|
||||
@@ -1,53 +0,0 @@
|
||||
import React, {useContext, useEffect, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import MainP from "../MainP/MainP";
|
||||
import MainE from "../MainE/MainE";
|
||||
import MainQ from "../MainQ/MainQ";
|
||||
import TabPanel from "../Component/TabPanel";
|
||||
import SwitchOnOff from "../Component/SwitchOnOff";
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectSwitchState} from "../../store/ChangeSwitchState";
|
||||
|
||||
function SwitchLine() {
|
||||
const [PageIndex, setPageIndex] = useState(1)
|
||||
const state = useAppSelector(selectSwitchState)
|
||||
useEffect(() => {
|
||||
let timerId: NodeJS.Timer;
|
||||
|
||||
function StartSwitch() {
|
||||
timerId = setInterval(() => {
|
||||
if (PageIndex < 3) {
|
||||
setPageIndex(PageIndex + 1)
|
||||
} else {
|
||||
setPageIndex(1)
|
||||
}
|
||||
}, 30000)
|
||||
}
|
||||
|
||||
function StopSwitch() {
|
||||
clearInterval(timerId)
|
||||
}
|
||||
|
||||
if (state) {
|
||||
StartSwitch()
|
||||
} else {
|
||||
StopSwitch()
|
||||
}
|
||||
|
||||
window.dispatchEvent(new Event('resize'))
|
||||
return () => {
|
||||
clearInterval(timerId)
|
||||
}
|
||||
}, [PageIndex, state]
|
||||
)
|
||||
return (
|
||||
<div>
|
||||
<SwitchOnOff/>
|
||||
<TabPanel index={1} value={PageIndex}><MainP/></TabPanel>
|
||||
<TabPanel index={2} value={PageIndex}><MainQ/></TabPanel>
|
||||
<TabPanel index={3} value={PageIndex}><MainE/></TabPanel>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default SwitchLine;
|
||||
@@ -1,94 +0,0 @@
|
||||
import React, {useContext, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import "../style/standard.css"
|
||||
import Pagination from '@mui/material/Pagination';
|
||||
import {createTheme, ThemeProvider} from "@mui/material";
|
||||
import CenterDownChartE from "./CenterDownE/CenterDownChartE";
|
||||
import TabPanel from "../Component/TabPanel";
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectAllLineEquipmentData} from "../../store/EquipmentMonitorEntity";
|
||||
import {selectChangeLineID} from "../../store/ChangeLineID";
|
||||
import {ThisLineID} from "../../context/ThisLineID";
|
||||
|
||||
const theme = createTheme({
|
||||
palette: {
|
||||
primary: {
|
||||
main: 'rgba(82, 255, 241,0.8)'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function CenterDownE() {
|
||||
const contextLineID = useContext(ThisLineID);
|
||||
const [page, setPage] = useState(1);
|
||||
const handleChange = (event: React.ChangeEvent<unknown>, page: number | null) => {
|
||||
if (page !== null) {
|
||||
setPage(page);
|
||||
clearTimeout(timeOut)
|
||||
}
|
||||
}
|
||||
const AllData = useAppSelector(selectAllLineEquipmentData);
|
||||
const LineID = "Line_" + contextLineID;
|
||||
let EquipmentOeesCount: number = 0;
|
||||
switch (LineID) {
|
||||
case 'Line_1':
|
||||
EquipmentOeesCount = AllData.Line_1.equipmentOees.length;
|
||||
break;
|
||||
case 'Line_2':
|
||||
EquipmentOeesCount = AllData.Line_2.equipmentOees.length;
|
||||
break;
|
||||
case 'Line_3':
|
||||
EquipmentOeesCount = AllData.Line_3.equipmentOees.length;
|
||||
break;
|
||||
case 'Line_4':
|
||||
EquipmentOeesCount = AllData.Line_4.equipmentOees.length;
|
||||
break;
|
||||
}
|
||||
const OnePageCount = 8;
|
||||
const PageCount = Math.ceil(EquipmentOeesCount / OnePageCount);
|
||||
const PageIndexArray: Array<number> = []
|
||||
for (let index = 1; index <= PageCount; index++) {
|
||||
PageIndexArray.push(index)
|
||||
}
|
||||
|
||||
const timeOut = setTimeout(() => {
|
||||
if (page < PageCount) {
|
||||
setPage(page + 1)
|
||||
} else {
|
||||
setPage(1)
|
||||
}
|
||||
}, 5000)
|
||||
|
||||
return (
|
||||
<div className="block_18_E fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="group_74 flex-col">
|
||||
<div className="group_75 flex-row">
|
||||
<div className="box_24 flex-col"/>
|
||||
<span className="text_97">{intl.get('EquipmentTurnover')}</span>
|
||||
<div className='area1'>
|
||||
<ThemeProvider theme={theme}>
|
||||
<Pagination page={page} count={PageCount} onChange={handleChange} variant="outlined" color={"primary"}
|
||||
size={"small"}
|
||||
sx={{
|
||||
'& .MuiPaginationItem-root': {
|
||||
color: 'white',
|
||||
border: '1px solid rgb(82 255 241 / 24%)'
|
||||
}
|
||||
}}/>
|
||||
</ThemeProvider>
|
||||
</div>
|
||||
</div>
|
||||
<div className='area2'>
|
||||
{PageIndexArray.map((index) => (
|
||||
<TabPanel key={index} index={index} value={page}><CenterDownChartE startNum={(index - 1) * OnePageCount}
|
||||
endNum={Math.min(index * OnePageCount - 1, EquipmentOeesCount - 1)}
|
||||
pageIndex={index - 1}/></TabPanel>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CenterDownE;
|
||||
@@ -1,53 +0,0 @@
|
||||
import React from "react";
|
||||
import Grid from '@mui/material/Grid';
|
||||
import OeeChart from "./OeeChart";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {Oee, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
|
||||
import {selectChangeLineID} from "../../../store/ChangeLineID";
|
||||
|
||||
interface param {
|
||||
startNum: number;
|
||||
endNum: number;
|
||||
pageIndex: number;
|
||||
}
|
||||
|
||||
function CenterDownChartE(props: param) {
|
||||
const {startNum, endNum, pageIndex} = props;
|
||||
const AllData = useAppSelector(selectAllLineEquipmentData);
|
||||
const LineID = "Line_" + useAppSelector(selectChangeLineID);
|
||||
let EquipmentOees: Array<Oee> = [];
|
||||
switch (LineID) {
|
||||
case 'Line_1':
|
||||
EquipmentOees = AllData.Line_1.equipmentOees;
|
||||
break;
|
||||
case 'Line_2':
|
||||
EquipmentOees = AllData.Line_2.equipmentOees;
|
||||
break;
|
||||
case 'Line_3':
|
||||
EquipmentOees = AllData.Line_3.equipmentOees;
|
||||
break;
|
||||
case 'Line_4':
|
||||
EquipmentOees = AllData.Line_4.equipmentOees;
|
||||
break;
|
||||
}
|
||||
let ToShowOees: Array<Oee> = [];
|
||||
for (let index = startNum; index <= endNum; index++) {
|
||||
ToShowOees.push(EquipmentOees[index]);
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
<Grid container spacing={3}>
|
||||
{
|
||||
ToShowOees.map((item, index) => (
|
||||
<Grid item xs={3} key={pageIndex * 8 + index}>
|
||||
<OeeChart downRate={item.downRate} equName={item.equName} stopRate={item.stopRate}
|
||||
workRate={item.workRate}/>
|
||||
</Grid>))
|
||||
}
|
||||
</Grid>
|
||||
|
||||
)
|
||||
}
|
||||
|
||||
export default CenterDownChartE;
|
||||
@@ -1,127 +0,0 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
import {Oee} from "../../../store/EquipmentMonitorEntity";
|
||||
|
||||
function OeeChart(data: Oee) {
|
||||
const CenterDownChartRef = useRef(null)
|
||||
const gaugeData = [
|
||||
{
|
||||
value: (data.downRate * 100).toFixed(2),
|
||||
name: intl.get("DownRate"),
|
||||
title: {
|
||||
offsetCenter: ['-170%', '-110%'],
|
||||
color: 'white'
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['-170%', '-80%'],
|
||||
}
|
||||
},
|
||||
{
|
||||
value: (data.workRate * 100).toFixed(2),
|
||||
name: intl.get("WorkRate"),
|
||||
title: {
|
||||
offsetCenter: ['-170%', '-30%'],
|
||||
color: 'white'
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['-170%', '0%']
|
||||
}
|
||||
},
|
||||
{
|
||||
value: (data.stopRate * 100).toFixed(2),
|
||||
name: intl.get("StopRate"),
|
||||
title: {
|
||||
offsetCenter: ['-170%', '50%'],
|
||||
color: 'white'
|
||||
},
|
||||
detail: {
|
||||
valueAnimation: true,
|
||||
offsetCenter: ['-170%', '80%'],
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(CenterDownChartRef.current, theme);
|
||||
|
||||
const option = {
|
||||
series: [
|
||||
{
|
||||
type: 'gauge',
|
||||
color: ['#66FFFF', '#F78C54', '#0BA267'],
|
||||
startAngle: 90,
|
||||
endAngle: -270,
|
||||
center: ['60%', '50%'],
|
||||
radius: "60%",
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
progress: {
|
||||
show: true,
|
||||
overlap: false,
|
||||
roundCap: true,
|
||||
clip: false,
|
||||
itemStyle: {
|
||||
borderWidth: 0.5,
|
||||
borderColor: 'white'
|
||||
}
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
width: 40,
|
||||
color: [[1, 'rgba(19, 42, 79, 0.7)']]
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
distance: 0,
|
||||
length: 10
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false,
|
||||
distance: 50
|
||||
},
|
||||
data: gaugeData,
|
||||
title: {
|
||||
fontSize: 12
|
||||
},
|
||||
detail: {
|
||||
width: 30,
|
||||
height: 10,
|
||||
fontSize: 12,
|
||||
color: 'inherit',
|
||||
borderColor: 'inherit',
|
||||
borderWidth: 1,
|
||||
borderRadius: 40,
|
||||
formatter: '{value}%'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
}
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
})
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<div className={"myText1"}>{data.equName}</div>
|
||||
<div ref={CenterDownChartRef} className="chart4"/>
|
||||
</React.Fragment>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
export default OeeChart;
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import "../style/standard.css"
|
||||
import CenterUpE from "./CenterUpE";
|
||||
import CenterDownE from "./CenterDownE";
|
||||
|
||||
function CenterE() {
|
||||
return (
|
||||
<div className={"group_72 flex-col"}>
|
||||
<CenterUpE/>
|
||||
<CenterDownE/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CenterE;
|
||||
@@ -1,17 +0,0 @@
|
||||
import React from "react";
|
||||
import LineBabylon from "../../babylonjs/LineBabylon";
|
||||
import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
|
||||
import {Observable} from "@babylonjs/core";
|
||||
// import LineID from "../../store/ChangeLineID";
|
||||
|
||||
function CenterUpE() {
|
||||
return (
|
||||
<div className="block_16_E flex-col fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
<LineBabylon />
|
||||
{/* <MybabylonJS_1 modelPath={`line${LineID}`} /> */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default CenterUpE;
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import LeftDownChartE from "./LeftDownE/LeftDownChartE";
|
||||
|
||||
function LeftDownE() {
|
||||
return (
|
||||
<div className="block_3_E3 flex-col fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_77 flex-row justify-between">
|
||||
<div className="box_36 flex-col"/>
|
||||
<span className="text_2">{intl.get('EquipmentOperationMonitoring')}</span>
|
||||
</div>
|
||||
<div style={{marginTop: 15}}>
|
||||
<LeftDownChartE/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LeftDownE;
|
||||
@@ -1,108 +0,0 @@
|
||||
import React, {useContext, useEffect, useRef, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectAllLineEquipmentData, TickCount} from "../../../store/EquipmentMonitorEntity";
|
||||
import {selectChangeLineID} from "../../../store/ChangeLineID";
|
||||
import {ThisLineID} from "../../../context/ThisLineID";
|
||||
|
||||
|
||||
function LeftDownChartE() {
|
||||
const contextLineID = useContext(ThisLineID);
|
||||
const chartRef = useRef(null)
|
||||
|
||||
const AllData = useAppSelector(selectAllLineEquipmentData);
|
||||
const LineID = "Line_" + contextLineID;
|
||||
let equipmentTickCounts: Array<TickCount> = [];
|
||||
switch (LineID) {
|
||||
case 'Line_1':
|
||||
equipmentTickCounts = AllData.Line_1.equipmentTickCounts;
|
||||
break;
|
||||
case 'Line_2':
|
||||
equipmentTickCounts = AllData.Line_2.equipmentTickCounts;
|
||||
break;
|
||||
case 'Line_3':
|
||||
equipmentTickCounts = AllData.Line_3.equipmentTickCounts;
|
||||
break;
|
||||
case 'Line_4':
|
||||
equipmentTickCounts = AllData.Line_4.equipmentTickCounts;
|
||||
break;
|
||||
}
|
||||
|
||||
const nameset: string[] = [];
|
||||
const numset: number[] = [];
|
||||
|
||||
equipmentTickCounts.map((item) => {
|
||||
nameset.push(item.equName);
|
||||
numset.push(item.tickCount)
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(chartRef.current);
|
||||
const option = {
|
||||
grid: {
|
||||
top: "0%",
|
||||
bottom: "0%",
|
||||
left: "0%",
|
||||
right: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
itemHeight: 8,
|
||||
itemWidth: 13,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'category',
|
||||
data: nameset,
|
||||
color: "#eeeeee",
|
||||
axisLabel: {
|
||||
color: "#eeeeee"
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'value',
|
||||
axisLabel: {
|
||||
color: "#eeeeee"
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: numset,
|
||||
type: 'bar',
|
||||
barMaxWidth: 35,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'right',
|
||||
color: "#eeeeee"
|
||||
},
|
||||
showBackground: true,
|
||||
backgroundStyle: {
|
||||
color: 'rgba(180, 180, 180, 0.2)'
|
||||
},
|
||||
color: 'rgba(82, 255, 241, 0.6)'
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
})
|
||||
|
||||
return (
|
||||
<div ref={chartRef} className="chart3"/>
|
||||
);
|
||||
}
|
||||
|
||||
export default LeftDownChartE;
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import LeftUpE from "./LeftUpE";
|
||||
import LeftDownE from "./LeftDownE";
|
||||
|
||||
function LeftE() {
|
||||
return (
|
||||
<div className="group_61 flex-col">
|
||||
<LeftUpE/>
|
||||
<LeftDownE/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LeftE;
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import LeftUpTableE from "./LeftUpE/LeftUpTableE";
|
||||
|
||||
function LeftUpE() {
|
||||
return (
|
||||
<div className="block_3_E2 flex-col fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_77 flex-row justify-between">
|
||||
<div className="block_4 flex-col"/>
|
||||
<span className="text_2">{intl.get('AbnormalEquipmentAlarm')}</span>
|
||||
</div>
|
||||
<div style={{marginTop: 15, marginLeft: 25, marginRight: 25}}>
|
||||
<LeftUpTableE/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LeftUpE;
|
||||
@@ -1,61 +0,0 @@
|
||||
import React, {useContext} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import {Table, TableBody, TableHead,} from "@mui/material";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {Alarm, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
|
||||
import {ThisLineID} from "../../../context/ThisLineID";
|
||||
|
||||
function LeftUpTableE() {
|
||||
const contextLineID = useContext(ThisLineID);
|
||||
const AllData = useAppSelector(selectAllLineEquipmentData);
|
||||
const LineID = "Line_" + contextLineID;
|
||||
let equipmentAlarm: Array<Alarm> = [];
|
||||
switch (LineID) {
|
||||
case 'Line_1':
|
||||
equipmentAlarm = AllData.Line_1.equipmentAlarm;
|
||||
break;
|
||||
case 'Line_2':
|
||||
equipmentAlarm = AllData.Line_2.equipmentAlarm;
|
||||
break;
|
||||
case 'Line_3':
|
||||
equipmentAlarm = AllData.Line_3.equipmentAlarm;
|
||||
break;
|
||||
case 'Line_4':
|
||||
equipmentAlarm = AllData.Line_4.equipmentAlarm;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center" sx={{minWidth: 30}}>{intl.get('serialNo')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('EquipmentName')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('alarmCode')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{minWidth: 65}}>{intl.get('AlarmLevel')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('alarmContent')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{equipmentAlarm.map((alarm, index) => (
|
||||
<StyledTableRow key={index + 1}>
|
||||
<StyledTableCell align="center">{index + 1}</StyledTableCell>
|
||||
<StyledTableCell align="center">{alarm.equName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{alarm.alarmCode}</StyledTableCell>
|
||||
<StyledTableCell align="center">{alarm.alarmValue}</StyledTableCell>
|
||||
<StyledTableCell align="center">{alarm.alarmContent}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default LeftUpTableE;
|
||||
@@ -1,42 +0,0 @@
|
||||
import React, {useContext} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import {useParams} from "react-router-dom";
|
||||
import {useAppDispatch} from "../../store/hooks";
|
||||
import {UpdateChangeLineID} from "../../store/ChangeLineID";
|
||||
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import TopE from "./TopE";
|
||||
import LeftE from "./LeftE";
|
||||
import CenterE from "./CenterE";
|
||||
import RightE from "./RightE";
|
||||
import {Observable} from "@babylonjs/core";
|
||||
import {MyObservable} from "../../context/MyObservable";
|
||||
import {ThisLineID} from "../../context/ThisLineID";
|
||||
|
||||
|
||||
|
||||
function MainE() {
|
||||
const contextLineID = useContext(ThisLineID);
|
||||
const {LineID} = useParams()
|
||||
let NowThisLineID: string | undefined;
|
||||
if (contextLineID) {
|
||||
NowThisLineID = contextLineID
|
||||
} else {
|
||||
NowThisLineID = LineID;
|
||||
}
|
||||
const dispatch = useAppDispatch();
|
||||
dispatch(UpdateChangeLineID(NowThisLineID));
|
||||
return (
|
||||
<ThisLineID.Provider value={NowThisLineID}>
|
||||
<TopE/>
|
||||
<div className="block_32 flex-row">
|
||||
<LeftE/>
|
||||
<CenterE/>
|
||||
<RightE/>
|
||||
</div>
|
||||
</ThisLineID.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
export default MainE;
|
||||
@@ -1,72 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import RightDownTableDay from "../MainP/RightDown/RightDownTableDay";
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
|
||||
import RightTableDayE from "./RightE/RightTableDayE";
|
||||
import RightTableWeekE from "./RightE/RightTableWeekE";
|
||||
import RightTableMonthE from "./RightE/RightTableMonthE";
|
||||
import RightTableAllE from "./RightE/RightTableAllE";
|
||||
|
||||
|
||||
|
||||
function RightE() {
|
||||
|
||||
const Css = useAppSelector(selectChangeLangAndCss);
|
||||
return (
|
||||
<div className="box_34">
|
||||
<div className="block_3_E fineWin flex-col">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_77 flex-row justify-between">
|
||||
<div className="group_27 flex-col"/>
|
||||
<span className="text_2">{intl.get('EquipmentProcessingQuantity')}</span>
|
||||
</div>
|
||||
|
||||
<div className="group_63_2 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisDay')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
|
||||
<div className="rightDownTableArea">
|
||||
<RightTableDayE/>
|
||||
</div>
|
||||
|
||||
<div className="group_63_2 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisWeek')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
|
||||
<div className="rightDownTableArea">
|
||||
<RightTableWeekE/>
|
||||
</div>
|
||||
|
||||
<div className="group_63_2 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisMonth')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
|
||||
<div className="rightDownTableArea">
|
||||
<RightTableMonthE/>
|
||||
</div>
|
||||
|
||||
<div className="group_63_2 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('All')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
|
||||
<div className="rightDownTableArea">
|
||||
<RightTableAllE/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RightE;
|
||||
@@ -1,61 +0,0 @@
|
||||
import React, {useContext} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
|
||||
import {Table, TableBody, TableHead} from "@mui/material";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {selectChangeLineID} from "../../../store/ChangeLineID";
|
||||
import {ThisLineID} from "../../../context/ThisLineID";
|
||||
|
||||
function RightTableAllE() {
|
||||
const contextLineID = useContext(ThisLineID);
|
||||
const AllData = useAppSelector(selectAllLineEquipmentData);
|
||||
const LineID = "Line_" + contextLineID;
|
||||
let ProductData: Array<Product> = [];
|
||||
switch (LineID) {
|
||||
case 'Line_1':
|
||||
ProductData = AllData.Line_1.equipmentProductAll;
|
||||
break;
|
||||
case 'Line_2':
|
||||
ProductData = AllData.Line_2.equipmentProductAll;
|
||||
break;
|
||||
case 'Line_3':
|
||||
ProductData = AllData.Line_3.equipmentProductAll;
|
||||
break;
|
||||
case 'Line_4':
|
||||
ProductData = AllData.Line_4.equipmentProductAll;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{ProductData.map((item, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<StyledTableCell align="center">{item.sectionName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.inputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.outputNum}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightTableAllE;
|
||||
@@ -1,63 +0,0 @@
|
||||
import React, {useContext} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
|
||||
import {Table, TableBody, TableHead} from "@mui/material";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {selectChangeLineID} from "../../../store/ChangeLineID";
|
||||
import {ThisLineID} from "../../../context/ThisLineID";
|
||||
|
||||
function RightTableDayE() {
|
||||
const contextLineID = useContext(ThisLineID);
|
||||
const AllData = useAppSelector(selectAllLineEquipmentData);
|
||||
const LineID = "Line_" + contextLineID;
|
||||
let ProductData: Array<Product> = [];
|
||||
switch (LineID) {
|
||||
case 'Line_1':
|
||||
ProductData = AllData.Line_1.equipmentProductDays;
|
||||
break;
|
||||
case 'Line_2':
|
||||
ProductData = AllData.Line_2.equipmentProductDays;
|
||||
break;
|
||||
case 'Line_3':
|
||||
ProductData = AllData.Line_3.equipmentProductDays;
|
||||
break;
|
||||
case 'Line_4':
|
||||
ProductData = AllData.Line_4.equipmentProductDays;
|
||||
break;
|
||||
}
|
||||
|
||||
const SlicedProductData = ProductData.slice(0, 5)
|
||||
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{SlicedProductData.map((item, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<StyledTableCell align="center">{item.sectionName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.inputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.outputNum}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightTableDayE;
|
||||
@@ -1,61 +0,0 @@
|
||||
import React, {useContext} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
|
||||
import {Table, TableBody, TableHead} from "@mui/material";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {selectChangeLineID} from "../../../store/ChangeLineID";
|
||||
import {ThisLineID} from "../../../context/ThisLineID";
|
||||
|
||||
function RightTableMonthE() {
|
||||
const contextLineID = useContext(ThisLineID);
|
||||
const AllData = useAppSelector(selectAllLineEquipmentData);
|
||||
const LineID = "Line_" + contextLineID;
|
||||
let ProductData: Array<Product> = [];
|
||||
switch (LineID) {
|
||||
case 'Line_1':
|
||||
ProductData = AllData.Line_1.equipmentProductMonths;
|
||||
break;
|
||||
case 'Line_2':
|
||||
ProductData = AllData.Line_2.equipmentProductMonths;
|
||||
break;
|
||||
case 'Line_3':
|
||||
ProductData = AllData.Line_3.equipmentProductMonths;
|
||||
break;
|
||||
case 'Line_4':
|
||||
ProductData = AllData.Line_4.equipmentProductMonths;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{ProductData.map((item, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<StyledTableCell align="center">{item.sectionName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.inputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.outputNum}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightTableMonthE;
|
||||
@@ -1,61 +0,0 @@
|
||||
import React, {useContext} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {Product, selectAllLineEquipmentData} from "../../../store/EquipmentMonitorEntity";
|
||||
import {Table, TableBody, TableHead} from "@mui/material";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {selectChangeLineID} from "../../../store/ChangeLineID";
|
||||
import {ThisLineID} from "../../../context/ThisLineID";
|
||||
|
||||
function RightTableWeekE() {
|
||||
const contextLineID = useContext(ThisLineID);
|
||||
const AllData = useAppSelector(selectAllLineEquipmentData);
|
||||
const LineID = "Line_" + contextLineID;
|
||||
let ProductData: Array<Product> = [];
|
||||
switch (LineID) {
|
||||
case 'Line_1':
|
||||
ProductData = AllData.Line_1.equipmentProductWeeks;
|
||||
break;
|
||||
case 'Line_2':
|
||||
ProductData = AllData.Line_2.equipmentProductWeeks;
|
||||
break;
|
||||
case 'Line_3':
|
||||
ProductData = AllData.Line_3.equipmentProductWeeks;
|
||||
break;
|
||||
case 'Line_4':
|
||||
ProductData = AllData.Line_4.equipmentProductWeeks;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center">{intl.get('SectionName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('EquipmentName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{ProductData.map((item, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<StyledTableCell align="center">{item.sectionName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.equipmentName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.inputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.outputNum}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightTableWeekE;
|
||||
@@ -1,31 +0,0 @@
|
||||
import React, {useContext, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
|
||||
import {selectChangeLineID} from "../../store/ChangeLineID";
|
||||
import ChangeLangButton from "../Component/ChangeLangButton";
|
||||
import ChangeFullButton from "../Component/ChangeFullButton";
|
||||
import {ThisLineID} from "../../context/ThisLineID";
|
||||
|
||||
function TopE() {
|
||||
const contextLineID = useContext(ThisLineID);
|
||||
const Css = useAppSelector(selectChangeLangAndCss);
|
||||
const LineID = contextLineID;
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<div className="block_28 flex-row">
|
||||
<div className="image-wrapper_3 flex-col justify-between">
|
||||
<div className="label_1"/>
|
||||
{/*<div className="image_1"/>*/}
|
||||
</div>
|
||||
<span className={Css.text_1}>{intl.get('TITLE_E') + "(" + intl.get('ProductLine') + LineID + ")"}</span>
|
||||
</div>
|
||||
<ChangeLangButton/>
|
||||
<ChangeFullButton/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopE;
|
||||
@@ -1,17 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import CenterUp from "./CenterUp";
|
||||
import CenterDown from "./CenterDown";
|
||||
|
||||
function Center() {
|
||||
return (
|
||||
<div className="group_72 flex-col">
|
||||
<CenterUp/>
|
||||
<CenterDown/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Center;
|
||||
@@ -1,59 +0,0 @@
|
||||
import React, {useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import "../style/standard.css"
|
||||
import CenterDownChartDay from "./CenterDown/CenterDownChartDay";
|
||||
import {ToggleButtonGroup} from "@mui/material";
|
||||
import {StyledToggleButton} from "../Component/StyledTable";
|
||||
import TabPanel from "../Component/TabPanel";
|
||||
import CenterDownChartWeek from "./CenterDown/CenterDownChartWeek";
|
||||
import CenterDownChartMonth from "./CenterDown/CenterDownChartMonth";
|
||||
|
||||
function CenterDown() {
|
||||
const [time, setTime] = useState(1);
|
||||
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
|
||||
if (newTime !== null) {
|
||||
setTime(newTime);
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
};
|
||||
const timeout = setTimeout(() => {
|
||||
if (time < 3) {
|
||||
setTime(time + 1)
|
||||
} else {
|
||||
setTime(1)
|
||||
}
|
||||
}, 5000)
|
||||
|
||||
return (
|
||||
<div className="block_18 fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="group_74 flex-col">
|
||||
<div className="group_75 flex-row">
|
||||
<div className="box_24 flex-col"/>
|
||||
<span className="text_97">{intl.get('YieldLineChart')}</span>
|
||||
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "480px"}}>
|
||||
<StyledToggleButton value={1}>
|
||||
{intl.get('ThisDay')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={2}>
|
||||
{intl.get('ThisWeek')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={3}>
|
||||
{intl.get('ThisMonth')}
|
||||
</StyledToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</div>
|
||||
<div className={"CenterDownAreaWidthAndHeight"}>
|
||||
<TabPanel index={1} value={time}><CenterDownChartDay/></TabPanel>
|
||||
<TabPanel index={2} value={time}><CenterDownChartWeek/></TabPanel>
|
||||
<TabPanel index={3} value={time}><CenterDownChartMonth/></TabPanel>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CenterDown;
|
||||
@@ -1,95 +0,0 @@
|
||||
import React, {useEffect, useRef} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectTodayProductionRates} from "../../../store/ProductionMonitoringEntity";
|
||||
|
||||
|
||||
function CenterDownChartDay() {
|
||||
const CenterDownChartRef = useRef(null)
|
||||
const todayProductionRates = useAppSelector(selectTodayProductionRates);
|
||||
let ValueSeries: any[] = [];
|
||||
let xAxisData: Array<string> = [];
|
||||
// @ts-ignore
|
||||
todayProductionRates[Object.keys(todayProductionRates)[0]].map((item) => {
|
||||
xAxisData.push(new Date(item.time).toLocaleTimeString('en-GB', {hour: '2-digit', minute: '2-digit'}))
|
||||
})
|
||||
|
||||
for (let item in todayProductionRates) {
|
||||
let dataValue: Array<number> = []
|
||||
// @ts-ignore
|
||||
todayProductionRates[item].map((item) => {
|
||||
dataValue.push(item.passRate);
|
||||
})
|
||||
ValueSeries.push({
|
||||
name: item,
|
||||
data: dataValue,
|
||||
lineStyle: {width: 1},
|
||||
symbol: "roundRect",
|
||||
type: "line",
|
||||
label: {show: true, color: 'white'}
|
||||
})
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(CenterDownChartRef.current, theme);
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: "15%",
|
||||
bottom: "0%",
|
||||
left: "1.5%",
|
||||
right: "0",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
itemHeight: 8,
|
||||
itemWidth: 13,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: intl.get('Output'),
|
||||
scale: true,
|
||||
nameTextStyle: {
|
||||
align: "right",
|
||||
fontSize: 11,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
verticalAlign: "middle",
|
||||
padding: [0, 5, 0, 0]
|
||||
}
|
||||
},
|
||||
series: ValueSeries
|
||||
}
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
return () => {
|
||||
chartInstance.dispose()
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div ref={CenterDownChartRef} className="chart2"/>
|
||||
);
|
||||
}
|
||||
|
||||
export default CenterDownChartDay;
|
||||
@@ -1,102 +0,0 @@
|
||||
import React, {useEffect, useRef} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectMonthProductionRates} from "../../../store/ProductionMonitoringEntity";
|
||||
|
||||
|
||||
function CenterDownChartMonth() {
|
||||
const CenterDownChartRef = useRef(null)
|
||||
const ProductionRates = useAppSelector(selectMonthProductionRates);
|
||||
let ValueSeries: any[] = [];
|
||||
let xAxisData: Array<string> = [];
|
||||
// @ts-ignore
|
||||
ProductionRates[Object.keys(ProductionRates)[0]].map((item) => {
|
||||
xAxisData.push(new Date(item.time).toLocaleDateString('en-US', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
}))
|
||||
})
|
||||
|
||||
for (let item in ProductionRates) {
|
||||
let dataValue: Array<number> = []
|
||||
|
||||
// @ts-ignore
|
||||
ProductionRates[item].map((item) => {
|
||||
dataValue.push(item.passRate);
|
||||
})
|
||||
|
||||
ValueSeries.push({
|
||||
name: item,
|
||||
data: dataValue,
|
||||
lineStyle: {width: 2},
|
||||
symbol: "roundRect",
|
||||
type: "line",
|
||||
label: {show: true, color: 'white'}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(CenterDownChartRef.current, theme);
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: "15%",
|
||||
bottom: "0%",
|
||||
left: "1.5%",
|
||||
right: "0",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
itemHeight: 8,
|
||||
itemWidth: 13,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: intl.get('Output'),
|
||||
scale: true,
|
||||
nameTextStyle: {
|
||||
align: "right",
|
||||
fontSize: 11,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
verticalAlign: "middle",
|
||||
padding: [0, 5, 0, 0]
|
||||
}
|
||||
},
|
||||
series: ValueSeries
|
||||
}
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
|
||||
return () => {
|
||||
chartInstance.dispose()
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div ref={CenterDownChartRef} className="chart2"/>
|
||||
);
|
||||
}
|
||||
|
||||
export default CenterDownChartMonth;
|
||||
@@ -1,101 +0,0 @@
|
||||
import React, {useEffect, useRef} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectWeekProductionRates} from "../../../store/ProductionMonitoringEntity";
|
||||
|
||||
|
||||
function CenterDownChartWeek() {
|
||||
const CenterDownChartRef = useRef(null)
|
||||
const ProductionRates = useAppSelector(selectWeekProductionRates);
|
||||
let ValueSeries: any[] = [];
|
||||
let xAxisData: Array<string> = [];
|
||||
// @ts-ignore
|
||||
ProductionRates[Object.keys(ProductionRates)[0]].map((item) => {
|
||||
xAxisData.push(new Date(item.time).toLocaleDateString('en-US', {
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
weekday: 'short',
|
||||
}))
|
||||
})
|
||||
|
||||
for (let item in ProductionRates) {
|
||||
let dataValue: Array<number> = []
|
||||
// @ts-ignore
|
||||
ProductionRates[item].map((item) => {
|
||||
dataValue.push(item.passRate);
|
||||
})
|
||||
ValueSeries.push({
|
||||
name: item,
|
||||
data: dataValue,
|
||||
lineStyle: {width: 2},
|
||||
symbol: "roundRect",
|
||||
type: "line",
|
||||
label: {show: true, color: 'white'}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(CenterDownChartRef.current, theme);
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: "15%",
|
||||
bottom: "0%",
|
||||
left: "1.5%",
|
||||
right: "0",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
itemHeight: 8,
|
||||
itemWidth: 13,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: intl.get('Output'),
|
||||
scale: true,
|
||||
nameTextStyle: {
|
||||
align: "right",
|
||||
fontSize: 11,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
verticalAlign: "middle",
|
||||
padding: [0, 5, 0, 0]
|
||||
}
|
||||
},
|
||||
series: ValueSeries
|
||||
}
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
|
||||
return () => {
|
||||
chartInstance.dispose()
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div ref={CenterDownChartRef} className="chart2"/>
|
||||
);
|
||||
}
|
||||
|
||||
export default CenterDownChartWeek;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React, { useState } from "react"; // 使用useState钩子来管理状态
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import "../style/standard.css"
|
||||
import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
|
||||
import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
|
||||
import { number } from "echarts";
|
||||
import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
|
||||
|
||||
function CenterUp() {
|
||||
|
||||
// 使用 useState 钩子来管理当前的序号状态
|
||||
const [modelIndex, setModelIndex] = useState(1); // 默认序号为 1
|
||||
|
||||
// 定义切换模型序号的函数
|
||||
const prevModelIndex = () => {
|
||||
// 当前序号减 1，如果小于 1，则变为 5
|
||||
setModelIndex((currentModelIndex) => (currentModelIndex - 1 + 5) % 5);
|
||||
};
|
||||
|
||||
const nextModelIndex = () => {
|
||||
// 当前序号加 1，如果大于 5，则变为 1
|
||||
setModelIndex((currentModelIndex) => (currentModelIndex + 1) % 5);
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="block_16 flex-col fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
<MybabylonJS_1 modelPath={`line${modelIndex+1}`} />
|
||||
{/* 添加按钮来切换组件 */}
|
||||
<button className="centerButton_1" onClick={prevModelIndex}>上一个组件</button>
|
||||
<button className="centerButton_2" onClick={nextModelIndex}>下一个组件</button>
|
||||
<h5 className="centerButton_2" >{modelIndex}</h5>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CenterUp;
|
||||
@@ -1,46 +0,0 @@
|
||||
import React, { useState } from "react"; // 使用useState钩子来管理状态
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import "../style/standard.css"
|
||||
import MybabylonJS_1 from "../../babylonjs/MybabylonJS_1";
|
||||
import MybabylonJS_2 from "../../babylonjs/MybabylonJS_2";
|
||||
import { number } from "echarts";
|
||||
import { firePixelShader } from "@babylonjs/materials/fire/fire.fragment";
|
||||
|
||||
function CenterUp() {
|
||||
// 使用useState来初始化当前显示的组件
|
||||
const [components, setComponents] = useState([MybabylonJS_1, MybabylonJS_2]);
|
||||
const [currentComponentIndex, setCurrentComponentIndex] = useState(0);
|
||||
// 切换组件的函数
|
||||
// 切换组件的函数
|
||||
const switchComponent = (direction: number) => {
|
||||
const nextIndex = currentComponentIndex + direction;
|
||||
if (nextIndex >= 0 && nextIndex < components.length) {
|
||||
setCurrentComponentIndex(nextIndex);
|
||||
}
|
||||
};
|
||||
// 渲染组件列表
|
||||
const renderComponents = () => {
|
||||
return components.map((Component, index) => (
|
||||
<div key={index} style={{ display: index === currentComponentIndex ? 'block' : 'none' }}>
|
||||
{/* <Component /> */}
|
||||
</div>
|
||||
));
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<div className="block_16 flex-col fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
{/* 渲染当前组件 */}
|
||||
{renderComponents()}
|
||||
{/* 添加按钮来切换组件 */}
|
||||
<button className="centerButton_1" onClick={() => switchComponent(-1)}>上一个组件</button>
|
||||
<button className="centerButton_2" onClick={() => switchComponent(1)}>下一个组件</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default CenterUp;
|
||||
@@ -1,19 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import LeftUp from "./LeftUp";
|
||||
import LeftDown from "./LeftDown";
|
||||
|
||||
function Left() {
|
||||
|
||||
return (
|
||||
<div className="group_61 flex-col">
|
||||
<LeftUp/>
|
||||
<LeftDown/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Left;
|
||||
@@ -1,49 +0,0 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import "../style/standard.css"
|
||||
import ChartDay from "./LeftDown/ChartDay";
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
|
||||
import ChartWeek from "./LeftDown/ChartWeek";
|
||||
import ChartMonth from "./LeftDown/ChartMonth";
|
||||
|
||||
function LeftDown() {
|
||||
const Css = useAppSelector(selectChangeLangAndCss);
|
||||
return (
|
||||
<div className="block_5 flex-col fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="group_62 flex-row justify-between">
|
||||
<div className="block_6 flex-col"/>
|
||||
<span className="text_33">{intl.get('eachLineInputAndOutput')}</span>
|
||||
</div>
|
||||
|
||||
<div className="group_63 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisDay')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
<ChartDay/>
|
||||
|
||||
<div className="group_63 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisWeek')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
<ChartWeek/>
|
||||
|
||||
|
||||
<div className="group_63 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisMonth')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
<ChartMonth/>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LeftDown;
|
||||
@@ -1,91 +0,0 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectTodayProductionDets} from "../../../store/ProductionMonitoringEntity";
|
||||
|
||||
const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]
|
||||
|
||||
interface barValue {
|
||||
value: number,
|
||||
itemStyle: {
|
||||
color: string
|
||||
}
|
||||
}
|
||||
|
||||
function ChartDay() {
|
||||
const chartRef = useRef(null)
|
||||
const ProductionDets = useAppSelector(selectTodayProductionDets);
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(chartRef.current, theme);
|
||||
const lineNameList: Array<string> = [];
|
||||
const outputNumList: Array<barValue> = [];
|
||||
ProductionDets.map((item, index) => {
|
||||
lineNameList.push(item.lineName);
|
||||
outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
|
||||
})
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: "15%",
|
||||
bottom: "0%",
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: lineNameList,
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: intl.get('Output'),
|
||||
scale: false,
|
||||
nameTextStyle: {
|
||||
align: "right",
|
||||
fontSize: 10,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
verticalAlign: "middle",
|
||||
padding: [0, 8, 0, 0]
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: outputNumList,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
symbol: "none",
|
||||
label: {
|
||||
show: true,
|
||||
rotate: 90,
|
||||
fontSize: 16,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
offset:[0,22]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
return () => {
|
||||
chartInstance.dispose()
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div ref={chartRef} className="chart1"/>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChartDay;
|
||||
@@ -1,91 +0,0 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectMonthProductionDets} from "../../../store/ProductionMonitoringEntity";
|
||||
|
||||
const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]
|
||||
|
||||
interface barValue {
|
||||
value: number,
|
||||
itemStyle: {
|
||||
color: string
|
||||
}
|
||||
}
|
||||
|
||||
function ChartMonth() {
|
||||
const chartRef = useRef(null)
|
||||
const ProductionDets = useAppSelector(selectMonthProductionDets);
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(chartRef.current, theme);
|
||||
const lineNameList: Array<string> = [];
|
||||
const outputNumList: Array<barValue> = [];
|
||||
ProductionDets.map((item, index) => {
|
||||
lineNameList.push(item.lineName);
|
||||
outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
|
||||
})
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: "15%",
|
||||
bottom: "0%",
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: lineNameList,
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: intl.get('Output'),
|
||||
scale: false,
|
||||
nameTextStyle: {
|
||||
align: "right",
|
||||
fontSize: 10,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
verticalAlign: "middle",
|
||||
padding: [0, 8, 0, 0]
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: outputNumList,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
symbol: "none",
|
||||
label: {
|
||||
show: true,
|
||||
rotate: 90,
|
||||
fontSize: 16,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
offset:[0,22]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
return () => {
|
||||
chartInstance.dispose()
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div ref={chartRef} className="chart1"/>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChartMonth;
|
||||
@@ -1,91 +0,0 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectWeekProductionDets} from "../../../store/ProductionMonitoringEntity";
|
||||
|
||||
const color = ["#50f4e3", "#c69dff", "#ffb70c", "#1a99ff",]
|
||||
|
||||
interface barValue {
|
||||
value: number,
|
||||
itemStyle: {
|
||||
color: string
|
||||
}
|
||||
}
|
||||
|
||||
function ChartWeek() {
|
||||
const chartRef = useRef(null)
|
||||
const ProductionDets = useAppSelector(selectWeekProductionDets);
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(chartRef.current, theme);
|
||||
const lineNameList: Array<string> = [];
|
||||
const outputNumList: Array<barValue> = [];
|
||||
ProductionDets.map((item, index) => {
|
||||
lineNameList.push(item.lineName);
|
||||
outputNumList.push({value: item.outputNum, itemStyle: {color: color[index]}});
|
||||
})
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: "15%",
|
||||
bottom: "0%",
|
||||
left: "5%",
|
||||
right: "5%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: lineNameList,
|
||||
splitLine: {
|
||||
show: false,
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: intl.get('Output'),
|
||||
scale: false,
|
||||
nameTextStyle: {
|
||||
align: "right",
|
||||
fontSize: 10,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
verticalAlign: "middle",
|
||||
padding: [0, 8, 0, 0]
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: outputNumList,
|
||||
type: 'bar',
|
||||
barWidth: 20,
|
||||
symbol: "none",
|
||||
label: {
|
||||
show: true,
|
||||
rotate: 90,
|
||||
fontSize: 16,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
offset:[0,22]
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
return () => {
|
||||
chartInstance.dispose()
|
||||
}
|
||||
})
|
||||
|
||||
return (
|
||||
<div ref={chartRef} className="chart1"/>
|
||||
);
|
||||
}
|
||||
|
||||
export default ChartWeek;
|
||||
@@ -1,31 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import "../style/standard.css"
|
||||
import LeftUpTable from "./LeftUp/LeftUpTable";
|
||||
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectSumNumber} from "../../store/ProductionMonitoringEntity";
|
||||
|
||||
function LeftUp() {
|
||||
const data = useAppSelector(selectSumNumber);
|
||||
|
||||
return (
|
||||
<div className="block_3 flex-col fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_77 flex-row justify-between">
|
||||
<div className="block_4 flex-col"/>
|
||||
<span className="text_2">{intl.get('alarmInfo')}</span>
|
||||
</div>
|
||||
<span className="text_3">- {intl.get("alarmsNumber")} -</span>
|
||||
<span className="text_4">{data}</span>
|
||||
<div className="leftUpTableArea">
|
||||
<LeftUpTable/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default LeftUp;
|
||||
@@ -1,50 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import {Table, TableBody, TableHead,} from "@mui/material";
|
||||
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectAlarms} from "../../../store/ProductionMonitoringEntity";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
|
||||
function LeftUpTable() {
|
||||
const alarms = useAppSelector(selectAlarms);
|
||||
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center" sx={{minWidth: 35}}>{intl.get('serialNo')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{minWidth: 70}}>{intl.get('alarmTime')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{minWidth: 110}}>{intl.get('alarmCode')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis'
|
||||
}}>{intl.get('alarmContent')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{alarms.map((alarm, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<StyledTableCell align="center">{index + 1}</StyledTableCell>
|
||||
<StyledTableCell align="center">{alarm.alarmTime}</StyledTableCell>
|
||||
<StyledTableCell align="center">{alarm.alarmCode}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis'
|
||||
}}>{alarm.alarmContent}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default LeftUpTable;
|
||||
@@ -1,28 +0,0 @@
|
||||
import React, {useContext} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import Left from "./Left";
|
||||
import Right from "./Right";
|
||||
import Center from "./Center";
|
||||
import TopP from "./TopP";
|
||||
import {Observable} from "@babylonjs/core";
|
||||
import {MyObservable} from "../../context/MyObservable";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
function MainP() {
|
||||
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopP/>
|
||||
<div className="block_32 flex-row">
|
||||
<Left/>
|
||||
<Center/>
|
||||
<Right/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
}
|
||||
|
||||
export default MainP;
|
||||
@@ -1,20 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import RightUp from "./RightUp";
|
||||
import RightDown from "./RightDown";
|
||||
|
||||
|
||||
function Right() {
|
||||
return (
|
||||
<div className="box_34 flex-col">
|
||||
<RightUp/>
|
||||
<RightDown/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default Right;
|
||||
|
||||
@@ -1,58 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import "../style/standard.css"
|
||||
import RightDownTableDay from "./RightDown/RightDownTableDay";
|
||||
import RightDownTableWeek from "./RightDown/RightDownTableWeek";
|
||||
import RightDownTableMonth from "./RightDown/RightDownTableMonth";
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
|
||||
|
||||
function RightDown() {
|
||||
const Css = useAppSelector(selectChangeLangAndCss);
|
||||
return (
|
||||
<div className="box_40 flex-col fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
|
||||
<div className="image-text_16 flex-row justify-between">
|
||||
<div className="group_27 flex-col"/>
|
||||
<span className="text-group_2">{intl.get('InputAndOutputTable')}</span>
|
||||
</div>
|
||||
|
||||
<div className="group_63_2 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisDay')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
|
||||
<div className="rightDownTableArea">
|
||||
<RightDownTableDay/>
|
||||
</div>
|
||||
|
||||
<div className="group_63_2 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisWeek')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
|
||||
<div className="rightDownTableArea">
|
||||
<RightDownTableWeek/>
|
||||
</div>
|
||||
|
||||
<div className="group_63_2 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisMonth')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
|
||||
<div className="rightDownTableArea">
|
||||
<RightDownTableMonth/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RightDown;
|
||||
@@ -1,40 +0,0 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import {Table, TableBody, TableHead,} from "@mui/material";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectTodayProductionDets} from "../../../store/ProductionMonitoringEntity";
|
||||
|
||||
function RightDownTableDay() {
|
||||
const todayProductionDets = useAppSelector(selectTodayProductionDets);
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{todayProductionDets.map((todayProductionDet) => (
|
||||
<StyledTableRow key={todayProductionDet.lineName}>
|
||||
<StyledTableCell align="center">{todayProductionDet.lineName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{todayProductionDet.inputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{todayProductionDet.outputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{todayProductionDet.passRate}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default RightDownTableDay;
|
||||
@@ -1,40 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import {Table, TableBody, TableHead,} from "@mui/material";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectMonthProductionDets} from "../../../store/ProductionMonitoringEntity";
|
||||
|
||||
function RightDownTableMonth() {
|
||||
const monthProductionRates = useAppSelector(selectMonthProductionDets);
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{monthProductionRates.map((monthProductionRate) => (
|
||||
<StyledTableRow key={monthProductionRate.lineName}>
|
||||
<StyledTableCell align="center">{monthProductionRate.lineName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{monthProductionRate.inputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{monthProductionRate.outputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{monthProductionRate.passRate}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default RightDownTableMonth;
|
||||
@@ -1,40 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import {Table, TableBody, TableHead,} from "@mui/material";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectWeekProductionDets} from "../../../store/ProductionMonitoringEntity";
|
||||
|
||||
function RightDownTableWeek() {
|
||||
const weekProductionDets = useAppSelector(selectWeekProductionDets);
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{weekProductionDets.map((weekProductionDet) => (
|
||||
<StyledTableRow key={weekProductionDet.lineName}>
|
||||
<StyledTableCell align="center">{weekProductionDet.lineName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{weekProductionDet.inputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{weekProductionDet.outputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{weekProductionDet.passRate}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default RightDownTableWeek;
|
||||
@@ -1,26 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import "../style/standard.css"
|
||||
import RightUpTable from "./RightUp/RightUpTable";
|
||||
|
||||
function RightUp() {
|
||||
return (
|
||||
<div className="box_35 flex-row fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_78 flex-col">
|
||||
<div className="group_78 flex-row justify-between">
|
||||
<div className="box_36 flex-col"/>
|
||||
<span className="text_123">{intl.get('InputAndOutputSummaryTable')}</span>
|
||||
</div>
|
||||
<div style={{marginTop: 13, marginLeft: 7, marginRight: 7,}}>
|
||||
<RightUpTable/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RightUp;
|
||||
@@ -1,39 +0,0 @@
|
||||
import React, {useEffect, useRef, useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import {Table, TableBody, TableHead} from "@mui/material";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectSumProductionDets} from "../../../store/ProductionMonitoringEntity";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
|
||||
function RightUpTable() {
|
||||
const sumProductionDets = useAppSelector(selectSumProductionDets);
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center">{intl.get('ProductionLineName')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('InputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('OutputNum')}</StyledTableCell>
|
||||
<StyledTableCell align="center">{intl.get('PassRate')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{sumProductionDets.map((sumProductionDets) => (
|
||||
<StyledTableRow key={sumProductionDets.lineName}>
|
||||
<StyledTableCell align="center">{sumProductionDets.lineName}</StyledTableCell>
|
||||
<StyledTableCell align="center">{sumProductionDets.inputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{sumProductionDets.outputNum}</StyledTableCell>
|
||||
<StyledTableCell align="center">{sumProductionDets.passRate}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
);
|
||||
}
|
||||
|
||||
export default RightUpTable;
|
||||
@@ -1,27 +0,0 @@
|
||||
import React, {useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
|
||||
import ChangeLangButton from "../Component/ChangeLangButton";
|
||||
import ChangeFullButton from "../Component/ChangeFullButton";
|
||||
|
||||
function TopP() {
|
||||
const Css = useAppSelector(selectChangeLangAndCss);
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<div className="block_28 flex-row">
|
||||
<div className="image-wrapper_3 flex-col justify-between">
|
||||
<div className="label_1"/>
|
||||
{/*<div className="image_1"/>*/}
|
||||
</div>
|
||||
<span className={Css.text_1}>{intl.get('TITLE')}</span>
|
||||
</div>
|
||||
<ChangeLangButton/>
|
||||
<ChangeFullButton/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopP;
|
||||
@@ -1,57 +0,0 @@
|
||||
import React from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import '../../lanhuapp/index.css';
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
|
||||
import LeftTableDayQ from "./LeftQ/LeftTableDayQ";
|
||||
import LeftTableWeekQ from "./LeftQ/LeftTableWeekQ";
|
||||
import LeftTableMonthQ from "./LeftQ/LeftTableMonthQ";
|
||||
|
||||
function LeftQ() {
|
||||
const Css = useAppSelector(selectChangeLangAndCss);
|
||||
return (
|
||||
<div className="group_Q_left">
|
||||
<div className="leftQ fineWin flex-col">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_77 flex-row justify-between">
|
||||
<div className="block_6 flex-col"/>
|
||||
<span className="text_2">{intl.get('DefectSummary')}</span>
|
||||
</div>
|
||||
|
||||
<div className="group_63_3 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisDay')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
|
||||
<div className="leftTableDayQ">
|
||||
<LeftTableDayQ/>
|
||||
</div>
|
||||
|
||||
<div className="group_63_3 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisWeek')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
|
||||
<div className="leftTableWeekQ">
|
||||
<LeftTableWeekQ/>
|
||||
</div>
|
||||
|
||||
<div className="group_63_3 flex-row">
|
||||
<div className="box_4 flex-col"/>
|
||||
<span className={Css.text_34}>{intl.get('ThisMonth')}</span>
|
||||
<div className="box_5 flex-col"/>
|
||||
</div>
|
||||
|
||||
<div className="leftTableMonthQ">
|
||||
<LeftTableMonthQ/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default LeftQ;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React from "react";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {Table, TableBody, TableHead} from "@mui/material";
|
||||
import intl from "react-intl-universal";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
|
||||
|
||||
function LeftTableDayQ() {
|
||||
const AllData = useAppSelector(selectQualityMonitorEntity);
|
||||
const QualityAll = AllData.todayQualityAll;
|
||||
const SlicedQualityAll = QualityAll.slice(0, 6)
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center" sx={{width: 100}}>{intl.get('serialNo')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{width: 250}}>{intl.get('DefectType')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{width: 120}}>{intl.get('DefectNumber')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{SlicedQualityAll.map((item, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<StyledTableCell align="center">{item.sort}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{
|
||||
maxWidth: 250,
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis'
|
||||
}}>{item.content}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.num}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default LeftTableDayQ;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React from "react";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {Table, TableBody, TableHead} from "@mui/material";
|
||||
import intl from "react-intl-universal";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
|
||||
|
||||
function LeftTableMonthQ() {
|
||||
const AllData = useAppSelector(selectQualityMonitorEntity);
|
||||
const QualityAll = AllData.monthQualityAll;
|
||||
const SlicedQualityAll = QualityAll.slice(0, 10)
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center" sx={{width: 100}}>{intl.get('serialNo')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{width: 250}}>{intl.get('DefectType')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{width: 120}}>{intl.get('DefectNumber')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{SlicedQualityAll.map((item, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<StyledTableCell align="center">{item.sort}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{
|
||||
maxWidth: 250,
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis'
|
||||
}}>{item.content}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.num}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default LeftTableMonthQ;
|
||||
@@ -1,41 +0,0 @@
|
||||
import React from "react";
|
||||
import {StyledTableCell, StyledTableContainer, StyledTableRow} from "../../Component/StyledTable";
|
||||
import {Table, TableBody, TableHead} from "@mui/material";
|
||||
import intl from "react-intl-universal";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
|
||||
|
||||
function LeftTableWeekQ() {
|
||||
const AllData = useAppSelector(selectQualityMonitorEntity);
|
||||
const QualityAll = AllData.weekQualityAll;
|
||||
const SlicedQualityAll = QualityAll.slice(0, 9)
|
||||
return (
|
||||
<StyledTableContainer>
|
||||
<Table>
|
||||
<TableHead>
|
||||
<StyledTableRow>
|
||||
<StyledTableCell align="center" sx={{width: 100}}>{intl.get('serialNo')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{width: 250}}>{intl.get('DefectType')}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{width: 120}}>{intl.get('DefectNumber')}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{SlicedQualityAll.map((item, index) => (
|
||||
<StyledTableRow key={index}>
|
||||
<StyledTableCell align="center">{item.sort}</StyledTableCell>
|
||||
<StyledTableCell align="center" sx={{
|
||||
maxWidth: 250,
|
||||
overflow: 'hidden',
|
||||
whiteSpace: 'nowrap',
|
||||
textOverflow: 'ellipsis'
|
||||
}}>{item.content}</StyledTableCell>
|
||||
<StyledTableCell align="center">{item.num}</StyledTableCell>
|
||||
</StyledTableRow>
|
||||
))}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</StyledTableContainer>
|
||||
)
|
||||
}
|
||||
|
||||
export default LeftTableWeekQ;
|
||||
@@ -1,18 +0,0 @@
|
||||
import React from "react";
|
||||
import TopQ from "./TopQ";
|
||||
import LeftQ from "./LeftQ";
|
||||
import RightQ from "./RightQ";
|
||||
|
||||
function MainQ() {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<TopQ/>
|
||||
<div className="block_32 flex-row">
|
||||
<LeftQ/>
|
||||
<RightQ/>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
export default MainQ;
|
||||
@@ -1,26 +0,0 @@
|
||||
import React from "react";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import RightTopQ from "./RightQ/RightTopQ";
|
||||
import RightMiddleLeftQ from "./RightQ/RightMiddleLeftQ";
|
||||
import RightMiddleRightQ from "./RightQ/RightMiddleRightQ";
|
||||
import RightDownLeftQ from "./RightQ/RightDownLeftQ";
|
||||
import RightDownRightQ from "./RightQ/RightDownRightQ";
|
||||
|
||||
function RightQ() {
|
||||
return (
|
||||
<div className="group_Q_Right flex-col">
|
||||
<RightTopQ/>
|
||||
<div className="flex-row RightMiddle">
|
||||
<RightMiddleLeftQ/>
|
||||
<RightMiddleRightQ/>
|
||||
</div>
|
||||
<div className="flex-row RightMiddle">
|
||||
<RightDownLeftQ/>
|
||||
<RightDownRightQ/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default RightQ;
|
||||
@@ -1,56 +0,0 @@
|
||||
import React, {useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import {StyledToggleButton} from "../../Component/StyledTable";
|
||||
import {ToggleButtonGroup} from "@mui/material";
|
||||
import TabPanel from "../../Component/TabPanel";
|
||||
import QualityRightTable from "../../Component/QualityRightTable";
|
||||
|
||||
function RightDownLeftQ() {
|
||||
const [time, setTime] = useState(1);
|
||||
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
|
||||
if (newTime !== null) {
|
||||
setTime(newTime);
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
};
|
||||
const timeout = setTimeout(() => {
|
||||
if (time < 3) {
|
||||
setTime(time + 1)
|
||||
} else {
|
||||
setTime(1)
|
||||
}
|
||||
}, 5000)
|
||||
|
||||
return (
|
||||
<div className="fineWin flex-col RightMiddleLeftQ">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_77 flex-row justify-between">
|
||||
<div className="box_36 flex-col"/>
|
||||
<span className="text_2">{intl.get('DefectSummaryLine3')}</span>
|
||||
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "270px"}}>
|
||||
<StyledToggleButton value={1} sx={{width: "64px"}}>
|
||||
{intl.get('ThisDayShort')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={2} sx={{width: "64px"}}>
|
||||
{intl.get('ThisWeekShort')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={3} sx={{width: "64px"}}>
|
||||
{intl.get('ThisMonthShort')}
|
||||
</StyledToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</div>
|
||||
<div>
|
||||
<TabPanel index={1} value={time}><QualityRightTable lineName={"Line_3"}
|
||||
timeName={"todayQualityLineAll"}/></TabPanel>
|
||||
<TabPanel index={2} value={time}><QualityRightTable lineName={"Line_3"}
|
||||
timeName={"weekQualityLineAll"}/></TabPanel>
|
||||
<TabPanel index={3} value={time}><QualityRightTable lineName={"Line_3"}
|
||||
timeName={"monthQualityLineAll"}/></TabPanel>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightDownLeftQ;
|
||||
@@ -1,55 +0,0 @@
|
||||
import React, {useState} from "react";
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import intl from "react-intl-universal";
|
||||
import {StyledToggleButton} from "../../Component/StyledTable";
|
||||
import {ToggleButtonGroup} from "@mui/material";
|
||||
import TabPanel from "../../Component/TabPanel";
|
||||
import QualityRightTable from "../../Component/QualityRightTable";
|
||||
|
||||
function RightDownRightQ() {
|
||||
const [time, setTime] = useState(1);
|
||||
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
|
||||
if (newTime !== null) {
|
||||
setTime(newTime);
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
};
|
||||
const timeout = setTimeout(() => {
|
||||
if (time < 3) {
|
||||
setTime(time + 1)
|
||||
} else {
|
||||
setTime(1)
|
||||
}
|
||||
}, 5000)
|
||||
return (
|
||||
<div className="fineWin flex-col RightMiddleRightQ">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_77 flex-row justify-between">
|
||||
<div className="box_36 flex-col"/>
|
||||
<span className="text_2">{intl.get('DefectSummaryLine4')}</span>
|
||||
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "270px"}}>
|
||||
<StyledToggleButton value={1} sx={{width: "64px"}}>
|
||||
{intl.get('ThisDayShort')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={2} sx={{width: "64px"}}>
|
||||
{intl.get('ThisWeekShort')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={3} sx={{width: "64px"}}>
|
||||
{intl.get('ThisMonthShort')}
|
||||
</StyledToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</div>
|
||||
<div>
|
||||
<TabPanel index={1} value={time}><QualityRightTable lineName={"Line_4"}
|
||||
timeName={"todayQualityLineAll"}/></TabPanel>
|
||||
<TabPanel index={2} value={time}><QualityRightTable lineName={"Line_4"}
|
||||
timeName={"weekQualityLineAll"}/></TabPanel>
|
||||
<TabPanel index={3} value={time}><QualityRightTable lineName={"Line_4"}
|
||||
timeName={"monthQualityLineAll"}/></TabPanel>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightDownRightQ;
|
||||
@@ -1,56 +0,0 @@
|
||||
import React, {useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import {StyledToggleButton} from "../../Component/StyledTable";
|
||||
import {ToggleButtonGroup} from "@mui/material";
|
||||
import TabPanel from "../../Component/TabPanel";
|
||||
import QualityRightTable from "../../Component/QualityRightTable";
|
||||
|
||||
function RightMiddleLeftQ() {
|
||||
const [time, setTime] = useState(1);
|
||||
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
|
||||
if (newTime !== null) {
|
||||
setTime(newTime);
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
};
|
||||
const timeout = setTimeout(() => {
|
||||
if (time < 3) {
|
||||
setTime(time + 1)
|
||||
} else {
|
||||
setTime(1)
|
||||
}
|
||||
}, 5000)
|
||||
|
||||
return (
|
||||
<div className="fineWin flex-col RightMiddleLeftQ">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_77 flex-row justify-between">
|
||||
<div className="box_36 flex-col"/>
|
||||
<span className="text_2">{intl.get('DefectSummaryLine1')}</span>
|
||||
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "270px"}}>
|
||||
<StyledToggleButton value={1} sx={{width: "64px"}}>
|
||||
{intl.get('ThisDayShort')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={2} sx={{width: "64px"}}>
|
||||
{intl.get('ThisWeekShort')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={3} sx={{width: "64px"}}>
|
||||
{intl.get('ThisMonthShort')}
|
||||
</StyledToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</div>
|
||||
<div>
|
||||
<TabPanel index={1} value={time}><QualityRightTable lineName={"Line_1"}
|
||||
timeName={"todayQualityLineAll"}/></TabPanel>
|
||||
<TabPanel index={2} value={time}><QualityRightTable lineName={"Line_1"}
|
||||
timeName={"weekQualityLineAll"}/></TabPanel>
|
||||
<TabPanel index={3} value={time}><QualityRightTable lineName={"Line_1"}
|
||||
timeName={"monthQualityLineAll"}/></TabPanel>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightMiddleLeftQ;
|
||||
@@ -1,56 +0,0 @@
|
||||
import React, {useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import {ToggleButtonGroup} from "@mui/material";
|
||||
import {StyledToggleButton} from "../../Component/StyledTable";
|
||||
import TabPanel from "../../Component/TabPanel";
|
||||
import QualityRightTable from "../../Component/QualityRightTable";
|
||||
|
||||
function RightMiddleRightQ() {
|
||||
const [time, setTime] = useState(1);
|
||||
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
|
||||
if (newTime !== null) {
|
||||
setTime(newTime);
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
};
|
||||
const timeout = setTimeout(() => {
|
||||
if (time < 3) {
|
||||
setTime(time + 1)
|
||||
} else {
|
||||
setTime(1)
|
||||
}
|
||||
}, 5000)
|
||||
|
||||
return (
|
||||
<div className="fineWin flex-col RightMiddleRightQ">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_77 flex-row justify-between">
|
||||
<div className="box_36 flex-col"/>
|
||||
<span className="text_2">{intl.get('DefectSummaryLine2')}</span>
|
||||
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "270px"}}>
|
||||
<StyledToggleButton value={1} sx={{width: "64px"}}>
|
||||
{intl.get('ThisDayShort')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={2} sx={{width: "64px"}}>
|
||||
{intl.get('ThisWeekShort')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={3} sx={{width: "64px"}}>
|
||||
{intl.get('ThisMonthShort')}
|
||||
</StyledToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</div>
|
||||
<div>
|
||||
<TabPanel index={1} value={time}><QualityRightTable lineName={"Line_2"}
|
||||
timeName={"todayQualityLineAll"}/></TabPanel>
|
||||
<TabPanel index={2} value={time}><QualityRightTable lineName={"Line_2"}
|
||||
timeName={"weekQualityLineAll"}/></TabPanel>
|
||||
<TabPanel index={3} value={time}><QualityRightTable lineName={"Line_2"}
|
||||
timeName={"monthQualityLineAll"}/></TabPanel>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightMiddleRightQ;
|
||||
@@ -1,55 +0,0 @@
|
||||
import React, {useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import {ToggleButtonGroup} from "@mui/material";
|
||||
import {StyledToggleButton} from "../../Component/StyledTable";
|
||||
import TabPanel from "../../Component/TabPanel";
|
||||
import RightTopChartDayQ from "../RightTopQ/RightTopChartDayQ";
|
||||
import RightTopChartMonthQ from "../RightTopQ/RightTopChartMonthQ";
|
||||
import RightTopChartWeekQ from "../RightTopQ/RightTopChartWeekQ";
|
||||
|
||||
function RightTopQ() {
|
||||
const [time, setTime] = useState(1);
|
||||
const handleAlignment = (event: React.MouseEvent<HTMLElement>, newTime: number | null,) => {
|
||||
if (newTime !== null) {
|
||||
setTime(newTime);
|
||||
clearTimeout(timeout)
|
||||
}
|
||||
};
|
||||
const timeout = setTimeout(() => {
|
||||
if (time < 3) {
|
||||
setTime(time + 1)
|
||||
} else {
|
||||
setTime(1)
|
||||
}
|
||||
}, 5000)
|
||||
|
||||
return (
|
||||
<div className="fineWin flex-col RightTopQ">
|
||||
<div className="fineWin-footer"/>
|
||||
<div className="box_77 flex-row justify-between">
|
||||
<div className="block_7 flex-col"/>
|
||||
<span className="text_2">{intl.get('LineDefectSummary')}</span>
|
||||
<ToggleButtonGroup value={time} onChange={handleAlignment} exclusive={true} sx={{marginLeft: "770px"}}>
|
||||
<StyledToggleButton value={1} sx={{width: "120px"}}>
|
||||
{intl.get('ThisDay')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={2} sx={{width: "120px"}}>
|
||||
{intl.get('ThisWeek')}
|
||||
</StyledToggleButton>
|
||||
<StyledToggleButton value={3} sx={{width: "120px"}}>
|
||||
{intl.get('ThisMonth')}
|
||||
</StyledToggleButton>
|
||||
</ToggleButtonGroup>
|
||||
</div>
|
||||
<div>
|
||||
<TabPanel index={1} value={time}><RightTopChartDayQ/></TabPanel>
|
||||
<TabPanel index={2} value={time}><RightTopChartWeekQ/></TabPanel>
|
||||
<TabPanel index={3} value={time}><RightTopChartMonthQ/></TabPanel>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightTopQ;
|
||||
@@ -1,113 +0,0 @@
|
||||
import React, {useEffect, useRef} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
|
||||
|
||||
function RightTopChartDayQ() {
|
||||
const ChartRef = useRef(null)
|
||||
const AllData = useAppSelector(selectQualityMonitorEntity);
|
||||
const LineQualityAll = AllData.todayQualityLineAll;
|
||||
|
||||
let ValueSeries: any[] = [];
|
||||
let xAxisData: Array<string> = [];
|
||||
|
||||
for (let item in LineQualityAll) {
|
||||
// @ts-ignore
|
||||
LineQualityAll[item].map((item) => {
|
||||
if (!xAxisData.includes(item.content)) {
|
||||
xAxisData.push(item.content)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
for (let LineItem in LineQualityAll) {
|
||||
let dataValue: Array<number> = []
|
||||
xAxisData.map((TypeItem) => {
|
||||
let thisdata = 0
|
||||
// @ts-ignore
|
||||
LineQualityAll[LineItem].map((item) => {
|
||||
if (item.content == TypeItem) {
|
||||
thisdata = thisdata + item.num;
|
||||
}
|
||||
})
|
||||
dataValue.push(thisdata)
|
||||
})
|
||||
ValueSeries.push({
|
||||
name: LineItem,
|
||||
data: dataValue,
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
borderRadius: [100, 100, 0, 0]
|
||||
}
|
||||
})
|
||||
}
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(ChartRef.current, theme);
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: "15%",
|
||||
bottom: "0%",
|
||||
left: "0%",
|
||||
right: "0",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
itemHeight: 8,
|
||||
itemWidth: 13,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
width: 1200 / xAxisData.length,
|
||||
interval: 0,
|
||||
overflow: "truncate",
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: intl.get('DefectNumber'),
|
||||
scale: false,
|
||||
nameTextStyle: {
|
||||
align: "left",
|
||||
fontSize: 12,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
verticalAlign: "middle",
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: ValueSeries
|
||||
}
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
})
|
||||
return (
|
||||
<div ref={ChartRef} className="chart5"/>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightTopChartDayQ;
|
||||
@@ -1,115 +0,0 @@
|
||||
import React, {useEffect, useRef} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
|
||||
|
||||
function RightTopChartMonthQ() {
|
||||
const ChartRef = useRef(null)
|
||||
const AllData = useAppSelector(selectQualityMonitorEntity);
|
||||
const LineQualityAll = AllData.monthQualityLineAll;
|
||||
|
||||
let ValueSeries: any[] = [];
|
||||
let xAxisData: Array<string> = [];
|
||||
|
||||
for (let item in LineQualityAll) {
|
||||
// @ts-ignore
|
||||
LineQualityAll[item].map((item) => {
|
||||
if (!xAxisData.includes(item.content)) {
|
||||
xAxisData.push(item.content)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
for (let LineItem in LineQualityAll) {
|
||||
let dataValue: Array<number> = []
|
||||
xAxisData.map((TypeItem) => {
|
||||
let thisdata = 0
|
||||
// @ts-ignore
|
||||
LineQualityAll[LineItem].map((item) => {
|
||||
if (item.content == TypeItem) {
|
||||
thisdata = thisdata + item.num;
|
||||
}
|
||||
})
|
||||
dataValue.push(thisdata)
|
||||
})
|
||||
ValueSeries.push({
|
||||
name: LineItem,
|
||||
data: dataValue,
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
borderRadius: [100, 100, 0, 0]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(ChartRef.current, theme);
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: "15%",
|
||||
bottom: "0%",
|
||||
left: "0%",
|
||||
right: "0",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
itemHeight: 8,
|
||||
itemWidth: 13,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
width: 1200 / xAxisData.length,
|
||||
interval: 0,
|
||||
overflow: "truncate",
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: intl.get('DefectNumber'),
|
||||
scale: false,
|
||||
nameTextStyle: {
|
||||
align: "left",
|
||||
fontSize: 12,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
verticalAlign: "middle",
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: ValueSeries
|
||||
}
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
})
|
||||
return (
|
||||
<div ref={ChartRef} className="chart5"/>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightTopChartMonthQ;
|
||||
@@ -1,115 +0,0 @@
|
||||
import React, {useEffect, useRef} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import * as echarts from 'echarts';
|
||||
import '../../../lanhuapp/common.css';
|
||||
import "../../../lanhuapp/index.css";
|
||||
import "../../style/standard.css"
|
||||
import theme from "../../style/theme";
|
||||
import {useAppSelector} from "../../../store/hooks";
|
||||
import {selectQualityMonitorEntity} from "../../../store/QualityMonitorEntity";
|
||||
|
||||
function RightTopChartWeekQ() {
|
||||
const ChartRef = useRef(null)
|
||||
const AllData = useAppSelector(selectQualityMonitorEntity);
|
||||
const LineQualityAll = AllData.weekQualityLineAll;
|
||||
|
||||
let ValueSeries: any[] = [];
|
||||
let xAxisData: Array<string> = [];
|
||||
|
||||
for (let item in LineQualityAll) {
|
||||
// @ts-ignore
|
||||
LineQualityAll[item].map((item) => {
|
||||
if (!xAxisData.includes(item.content)) {
|
||||
xAxisData.push(item.content)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
for (let LineItem in LineQualityAll) {
|
||||
let dataValue: Array<number> = []
|
||||
xAxisData.map((TypeItem) => {
|
||||
let thisdata = 0
|
||||
// @ts-ignore
|
||||
LineQualityAll[LineItem].map((item) => {
|
||||
if (item.content == TypeItem) {
|
||||
thisdata = thisdata + item.num;
|
||||
}
|
||||
})
|
||||
dataValue.push(thisdata)
|
||||
})
|
||||
ValueSeries.push({
|
||||
name: LineItem,
|
||||
data: dataValue,
|
||||
type: "bar",
|
||||
itemStyle: {
|
||||
borderRadius: [100, 100, 0, 0]
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
// @ts-ignore
|
||||
let chartInstance = echarts.init(ChartRef.current, theme);
|
||||
|
||||
const option = {
|
||||
grid: {
|
||||
top: "15%",
|
||||
bottom: "0%",
|
||||
left: "0%",
|
||||
right: "0",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
show: true,
|
||||
selectedMode: false,
|
||||
itemHeight: 8,
|
||||
itemWidth: 13,
|
||||
textStyle: {
|
||||
fontSize: 10,
|
||||
}
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: xAxisData,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
width: 1200 / xAxisData.length,
|
||||
interval: 0,
|
||||
overflow: "truncate",
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
name: intl.get('DefectNumber'),
|
||||
scale: false,
|
||||
nameTextStyle: {
|
||||
align: "left",
|
||||
fontSize: 12,
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
verticalAlign: "middle",
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
borderWidth: 0,
|
||||
textStyle: {
|
||||
color: "rgba(255, 255, 255, 1)",
|
||||
fontSize: 12
|
||||
}
|
||||
},
|
||||
series: ValueSeries
|
||||
}
|
||||
|
||||
chartInstance.setOption(option);
|
||||
chartInstance.resize();
|
||||
})
|
||||
return (
|
||||
<div ref={ChartRef} className="chart5"/>
|
||||
)
|
||||
}
|
||||
|
||||
export default RightTopChartWeekQ;
|
||||
@@ -1,27 +0,0 @@
|
||||
import React, {useState} from "react";
|
||||
import intl from "react-intl-universal";
|
||||
import '../../lanhuapp/common.css';
|
||||
import "../../lanhuapp/index.css";
|
||||
import {useAppSelector} from "../../store/hooks";
|
||||
import {selectChangeLangAndCss} from "../../store/ChangeLangAndCss";
|
||||
import ChangeLangButton from "../Component/ChangeLangButton";
|
||||
import ChangeFullButton from "../Component/ChangeFullButton";
|
||||
|
||||
function TopE() {
|
||||
const Css = useAppSelector(selectChangeLangAndCss);
|
||||
return (
|
||||
<div className="flex-row">
|
||||
<div className="block_28 flex-row">
|
||||
<div className="image-wrapper_3 flex-col justify-between">
|
||||
<div className="label_1"/>
|
||||
{/*<div className="image_1"/>*/}
|
||||
</div>
|
||||
<span className={Css.text_1}>{intl.get('TITLE_Q')}</span>
|
||||
</div>
|
||||
<ChangeLangButton/>
|
||||
<ChangeFullButton/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default TopE;
|
||||
@@ -3,8 +3,8 @@ 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 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";
|
||||
|
||||
@@ -29,7 +29,7 @@ const nextModelIndex = () => {
|
||||
return (
|
||||
<div className="block_16 flex-col fineWin">
|
||||
<div className="fineWin-footer"/>
|
||||
<MybabylonJS_1 modelPath={`line${modelIndex+1}`} />
|
||||
{/* <MybabylonJS_1 modelPath={`line${modelIndex+1}`} /> */}
|
||||
{/* 添加按钮来切换组件 */}
|
||||
<button className="centerButton_1" onClick={prevModelIndex}>上一个组件</button>
|
||||
<button className="centerButton_2" onClick={nextModelIndex}>下一个组件</button>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import "./index.css"
|
||||
import MainE from "../MainE/MainE";
|
||||
import LinePage from "../LinePage";
|
||||
import {useParams,useNavigate} from "react-router-dom";
|
||||
import {useEffect} from 'react';
|
||||
function TestPage() {
|
||||
@@ -30,7 +30,7 @@ useEffect(() => {
|
||||
<>
|
||||
<div className="main-box">TestPage Line{LineID}</div>
|
||||
<div className="main-box" style={{display:'none'}}>3434</div>
|
||||
<MainE/>
|
||||
<LinePage/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
29
src/store/LinePageSlice.ts
Normal file
29
src/store/LinePageSlice.ts
Normal file
@@ -0,0 +1,29 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
import type { RootState } from "./store";
|
||||
const initialState = {
|
||||
"line1_1":{},
|
||||
"line1After":{},
|
||||
"line2Before":{},
|
||||
"line2After":{},
|
||||
"line3Before":{},
|
||||
"line3After":{},
|
||||
"line4Before":{},
|
||||
"line4After":{},
|
||||
"line5Before":{},
|
||||
"line5After":{}
|
||||
};
|
||||
export const LinePageSlice = createSlice({
|
||||
name: "LinePageSlice",
|
||||
initialState,
|
||||
reducers: {
|
||||
UpdateLine1Before: (state, action) => {
|
||||
state.line1_1 = action.payload;
|
||||
},
|
||||
}
|
||||
})
|
||||
export const {
|
||||
UpdateLine1Before
|
||||
} = LinePageSlice.actions;
|
||||
export const selectLine1Before = (state: RootState) =>
|
||||
state.LinePageSlice.line1_1;
|
||||
export default LinePageSlice.reducer;
|
||||
@@ -1,16 +1,8 @@
|
||||
import React, {useState} from "react";
|
||||
import {useAppDispatch, useAppSelector} from "./hooks";
|
||||
import {
|
||||
GlassStatus,
|
||||
SingleGlassStatus,
|
||||
UpdateGlassStatus,
|
||||
UpdateProductionMonitoringEntity
|
||||
} from "./ProductionMonitoringEntity";
|
||||
import {UpdateEquipmentMonitorEntity} from "./EquipmentMonitorEntity";
|
||||
import {UpdateQualityMonitorEntity} from "./QualityMonitorEntity";
|
||||
import axios from "axios";
|
||||
import {UpdateEquStatus} from "./EquStatusEntity";
|
||||
|
||||
import {UpdateLine1Before} from "./LinePageSlice"
|
||||
|
||||
//将消息显示在网页上
|
||||
// @ts-ignore
|
||||
@@ -18,55 +10,55 @@ function setMessageInnerHTML(innerHTML) {
|
||||
console.log(innerHTML)
|
||||
}
|
||||
|
||||
let initLineGlassStatus: Object = {
|
||||
LINE_1_1: 1,
|
||||
LINE_1_2U: 1,
|
||||
LINE_1_2D: 1,
|
||||
LINE_1_3: 1,
|
||||
LINE_1_4: 1,
|
||||
LINE_2_1: 1,
|
||||
LINE_2_2U: 1,
|
||||
LINE_2_2D: 1,
|
||||
LINE_2_3: 1,
|
||||
LINE_2_4: 1,
|
||||
LINE_3_1: 1,
|
||||
LINE_3_2U: 1,
|
||||
LINE_3_2D: 1,
|
||||
LINE_3_3: 1,
|
||||
LINE_3_4: 1,
|
||||
LINE_4_1: 1,
|
||||
LINE_4_2U: 1,
|
||||
LINE_4_2D: 1,
|
||||
LINE_4_3: 1,
|
||||
LINE_4_4: 1,
|
||||
}
|
||||
// let initLineGlassStatus: Object = {
|
||||
// LINE_1_1: 1,
|
||||
// LINE_1_2U: 1,
|
||||
// LINE_1_2D: 1,
|
||||
// LINE_1_3: 1,
|
||||
// LINE_1_4: 1,
|
||||
// LINE_2_1: 1,
|
||||
// LINE_2_2U: 1,
|
||||
// LINE_2_2D: 1,
|
||||
// LINE_2_3: 1,
|
||||
// LINE_2_4: 1,
|
||||
// LINE_3_1: 1,
|
||||
// LINE_3_2U: 1,
|
||||
// LINE_3_2D: 1,
|
||||
// LINE_3_3: 1,
|
||||
// LINE_3_4: 1,
|
||||
// LINE_4_1: 1,
|
||||
// LINE_4_2U: 1,
|
||||
// LINE_4_2D: 1,
|
||||
// LINE_4_3: 1,
|
||||
// LINE_4_4: 1,
|
||||
// }
|
||||
|
||||
function PrepareGlassStatus(action: string) {
|
||||
let FinalGlassStatus = initLineGlassStatus;
|
||||
if (action.includes('客户端')) {
|
||||
return FinalGlassStatus;
|
||||
} else {
|
||||
const ProductionMonitoringEntityData = JSON.parse(action);
|
||||
let JsonData = ProductionMonitoringEntityData.lineGlassStatus;
|
||||
// console.log(JsonData)
|
||||
// function PrepareGlassStatus(action: string) {
|
||||
// let FinalGlassStatus = initLineGlassStatus;
|
||||
// if (action.includes('客户端')) {
|
||||
// return FinalGlassStatus;
|
||||
// } else {
|
||||
// const ProductionMonitoringEntityData = JSON.parse(action);
|
||||
// let JsonData = ProductionMonitoringEntityData.lineGlassStatus;
|
||||
// // console.log(JsonData)
|
||||
|
||||
let keys: Array<string> = [];
|
||||
let values: Array<number> = []
|
||||
let newJson = new Object();
|
||||
JsonData.map((item: SingleGlassStatus) => {
|
||||
keys.push(item.lineViewCode);
|
||||
values.push(item.status);
|
||||
})
|
||||
for (let i = 0; i < keys.length; i++) {
|
||||
let keyName = keys[i];
|
||||
// @ts-ignore
|
||||
newJson[keyName] = values[i];
|
||||
}
|
||||
FinalGlassStatus = newJson;
|
||||
// console.log(FinalGlassStatus)
|
||||
return FinalGlassStatus;
|
||||
}
|
||||
}
|
||||
// let keys: Array<string> = [];
|
||||
// let values: Array<number> = []
|
||||
// let newJson = new Object();
|
||||
// JsonData.map((item: SingleGlassStatus) => {
|
||||
// keys.push(item.lineViewCode);
|
||||
// values.push(item.status);
|
||||
// })
|
||||
// for (let i = 0; i < keys.length; i++) {
|
||||
// let keyName = keys[i];
|
||||
// // @ts-ignore
|
||||
// newJson[keyName] = values[i];
|
||||
// }
|
||||
// FinalGlassStatus = newJson;
|
||||
// // console.log(FinalGlassStatus)
|
||||
// return FinalGlassStatus;
|
||||
// }
|
||||
// }
|
||||
|
||||
function UpdateData() {
|
||||
const [myUrl, setUrl] = useState('')
|
||||
@@ -74,50 +66,31 @@ function UpdateData() {
|
||||
.then((r) => {
|
||||
setUrl(r.data.url)
|
||||
})
|
||||
let websocketP = null;
|
||||
let websocketE = null;
|
||||
let websocketQ = null;
|
||||
let websocketB1 = null;
|
||||
let websocketA1 = null;
|
||||
if ('WebSocket' in window) {
|
||||
websocketP = new WebSocket("ws://" + myUrl + "websocket/P" + Math.random() * 10000000);
|
||||
websocketE = new WebSocket("ws://" + myUrl + "websocket/E" + Math.random() * 10000000);
|
||||
websocketQ = new WebSocket("ws://" + myUrl + "websocket/Q" + Math.random() * 10000000);
|
||||
websocketB1 = new WebSocket("ws://" + myUrl + "/websocket/message?userId=1-1");
|
||||
//连接成功建立的回调方法
|
||||
} else {
|
||||
alert('Not support websocket');
|
||||
}
|
||||
// @ts-ignore
|
||||
websocketP.onopen = function (event) {
|
||||
setMessageInnerHTML("websocketP-open");
|
||||
websocketB1.onopen = function (event) {
|
||||
setMessageInnerHTML("websocketB1-open");
|
||||
}
|
||||
// @ts-ignore
|
||||
websocketE.onopen = function (event) {
|
||||
setMessageInnerHTML("websocketE-open");
|
||||
}
|
||||
// @ts-ignore
|
||||
websocketQ.onopen = function (event) {
|
||||
setMessageInnerHTML("websocketQ-open");
|
||||
}
|
||||
|
||||
//接收到消息的回调方法
|
||||
// @ts-ignore
|
||||
websocketP.onmessage = function (event) {
|
||||
dispatch(UpdateProductionMonitoringEntity(event.data));
|
||||
dispatch(UpdateGlassStatus(PrepareGlassStatus(event.data)))
|
||||
if (event.data.toString().includes('客户端')) {
|
||||
} else {
|
||||
const PJson = JSON.parse(event.data)
|
||||
dispatch(UpdateEquStatus(PJson.equStatus))
|
||||
websocketB1.onmessage = function (event) {
|
||||
console.log('接收到消息：',event.data)
|
||||
let msgData = event.data
|
||||
try {
|
||||
msgData = JSON.parse(event.data);
|
||||
} catch (error) {
|
||||
console.log("websocket: [unable to msgData] : ", event.data);
|
||||
}
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
websocketE.onmessage = function (event) {
|
||||
dispatch(UpdateEquipmentMonitorEntity(event.data));
|
||||
}
|
||||
|
||||
// @ts-ignore
|
||||
websocketQ.onmessage = function (event) {
|
||||
dispatch(UpdateQualityMonitorEntity(event.data))
|
||||
if (!Object.prototype.toString.call(msgData).includes('Object')) return;
|
||||
console.log(msgData)
|
||||
dispatch(UpdateLine1Before(msgData.data));
|
||||
}
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
|
||||
@@ -8,6 +8,8 @@ import QualityMonitorEntityReducer from "./QualityMonitorEntity"
|
||||
import ChangeSwitchStateReducer from "./ChangeSwitchState"
|
||||
import EquStatusEntityReducer, {EquStatusEntity} from "./EquStatusEntity"
|
||||
|
||||
import LinePageReducer from "./LinePageSlice"
|
||||
|
||||
export const store = configureStore({
|
||||
reducer: {
|
||||
myData: myDataReducer,
|
||||
@@ -17,7 +19,8 @@ export const store = configureStore({
|
||||
EquipmentMonitorEntity: EquipmentMonitorEntityReducer,
|
||||
QualityMonitorEntity: QualityMonitorEntityReducer,
|
||||
ChangeSwitchState: ChangeSwitchStateReducer,
|
||||
EquStatusEntity: EquStatusEntityReducer
|
||||
EquStatusEntity: EquStatusEntityReducer,
|
||||
LinePageSlice: LinePageReducer,
|
||||
},
|
||||
})
|
||||
;
|
||||
|
||||
Referens i nytt ärende
Block a user