diff --git a/public/index.html b/public/index.html index d16d1c3..ba288db 100644 --- a/public/index.html +++ b/public/index.html @@ -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/ --> - + - - - - - - - - - - - - - - - - - -
-
-
-
-
-
-
-

Loading...

-
-
-
  -

Interactive Product Pages

-

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. -

-
- -
-
-

PBR Node Materials

-

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! -

-
- -
-

Advanced PBR Features

-

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. -

-
-
-
-
-

Procedural Textures

-

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. -

-
-
-
-
-

Animating Material Parameters

-

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. -

-
-
-

GUI Controls in Materials

-

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. -

-
-
-
- - - \ No newline at end of file diff --git a/src/Test/Test3.js b/src/Test/Test3.js deleted file mode 100644 index ba12658..0000000 --- a/src/Test/Test3.js +++ /dev/null @@ -1,1183 +0,0 @@ -var createScene = async function () { - // This creates a basic Babylon Scene object (non-mesh) - var scene = new BABYLON.Scene(engine); - BABYLON.SceneLoader.ShowLoadingScreen = false; - - // create camera and lights for scene - function initScene() { - const camera = new BABYLON.UniversalCamera("camera", new BABYLON.Vector3(0.0, 0.06, -0.25), scene); - camera.minZ = 0.01; - camera.rotation = new BABYLON.Vector3(BABYLON.Tools.ToRadians(8), 0.0, 0.0); - scene.clearColor = new BABYLON.Color4(0, 0, 0, 0); - const env512 = BABYLON.CubeTexture.CreateFromPrefilteredData("assets/light/studio_512.env", scene); - env512.name = "studio"; - env512.gammaSpace = false; - env512.rotationY = BABYLON.Tools.ToRadians(275); - scene.environmentTexture = env512; - } - - const activeAnimations = []; - - /** - * @param {*} target is the target object for the animation - * @param {Object} anim is the animation object containing all animation parameters - */ - function playAnimation(target, anim) { - if (target !== undefined && anim !== undefined) { - let newAnimation = new BABYLON.Animation(anim.name, anim.value, 60, anim.type, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE); - if (anim.easingFunction !== undefined || anim.easingFunction !== null) { - anim.easingFunction.setEasingMode(anim.easingMode); - newAnimation.setEasingFunction(anim.easingFunction); - } - - // create animation - scene.stopAnimation(target, anim.name); - newAnimation.setKeys(anim.keys); - scene.beginDirectAnimation(target, [newAnimation], 0, anim.keys[anim.keys.length - 1].frame, anim.looping, 1); - } - } - - const ui = {}; - // load material textures - let loadTexturesAsync = async function () { - let textures = []; - - staticTextures.morphShader = await BABYLON.NodeMaterial.ParseFromFileAsync("morphTexture", "assets/shaders/morphTextureShader.json", scene); - staticTextures.morphTexture = staticTextures.morphShader.createProceduralTexture({ - width: 2048, - height: 1024 - }, scene); - - return new Promise((resolve, reject) => { - let textureUrls = [ - "assets/textures/device_blackPlastic_baseColor.jpg", - "assets/textures/device_blackPlastic_ORM.png", - "assets/textures/device_blackPlastic_normal.png", - "assets/textures/device_no_clearcoat.png", - "assets/textures/device_whitePlastic_baseColor.jpg", - "assets/textures/device_whitePlastic_ORM.png", - "assets/textures/device_whitePlastic_normal.png", - "assets/textures/device_no_clearcoat.png", - "assets/textures/device_wood_baseColor.jpg", - "assets/textures/device_wood_ORM.png", - "assets/textures/device_wood_normal.png", - "assets/textures/device_wood_clearcoat.png", - "assets/textures/device_light_emissive.png", - "assets/textures/device_tempScreenUI_emissive.png", - "assets/textures/ui_battery_inactive.png", - "assets/textures/ui_calendar_active.png", - "assets/textures/ui_calendar_inactive.png", - "assets/textures/ui_contacts_active.png", - "assets/textures/ui_contacts_inactive.png", - "assets/textures/ui_music_active.png", - "assets/textures/ui_music_inactive.png", - "assets/textures/ui_next_inactive.png", - "assets/textures/ui_pause_inactive.png", - "assets/textures/ui_play_inactive.png", - "assets/textures/ui_previous_inactive.png", - "assets/textures/ui_wifi_inactive.png" - ]; - - for (let url of textureUrls) { - textures.push(new BABYLON.Texture(url, scene, false, false)); - } - - whenAllReady(textures, () => resolve(textures)); - }).then(() => { - populateTextureObjects(textures); - }); - }; - - // test if a texture is loaded - let whenAllReady = function (textures, resolve) { - let numRemaining = textures.length; - if (numRemaining == 0) { - resolve(); - return; - } - - for (let i = 0; i < textures.length; i++) { - let texture = textures[i]; - if (texture.isReady()) { - if (--numRemaining === 0) { - resolve(); - return; - } - } else { - let onLoadObservable = texture.onLoadObservable; - if (onLoadObservable) { - onLoadObservable.addOnce(() => { - if (--numRemaining === 0) { - resolve(); - } - }); - } - } - } - }; - - let retrieveTexture = function (key, channel, textures) { - let texture, defaultClearcoat; - for (let file of textures) { - if (file.name.split("_")[1] === key) { - let component = file.name.split("_")[2]; - if (component.split(".")[0] === channel) { - texture = file; - return texture; - } - } - if (file.name.split("_")[1] == "no") { - let component = file.name.split("_")[2]; - if (component.split(".")[0] === "clearcoat") { - defaultClearcoat = file; - } - } - } - if (channel === "clearcoat" && texture === undefined) { - texture = defaultClearcoat; - return texture; - } - }; - - // create object for textures and distribute the PBR texture sets to an array for material morphing - const variant = { - black: 0, - white: 1, - wood: 2 - }; - const variantTextures = []; - const staticTextures = {}; - - async function populateTextureObjects(textures) { - variantTextures.push({ - baseColor: retrieveTexture("blackPlastic", "baseColor", textures), - orm: retrieveTexture("blackPlastic", "ORM", textures), - normal: retrieveTexture("blackPlastic", "normal", textures), - clearcoat: retrieveTexture("blackPlastic", "clearcoat", textures) - }); - variantTextures.push({ - baseColor: retrieveTexture("whitePlastic", "baseColor", textures), - orm: retrieveTexture("whitePlastic", "ORM", textures), - normal: retrieveTexture("whitePlastic", "normal", textures), - clearcoat: retrieveTexture("whitePlastic", "clearcoat", textures) - }); - variantTextures.push({ - baseColor: retrieveTexture("wood", "baseColor", textures), - orm: retrieveTexture("wood", "ORM", textures), - normal: retrieveTexture("wood", "normal", textures), - clearcoat: retrieveTexture("wood", "clearcoat", textures) - }); - staticTextures.emissive = retrieveTexture("light", "emissive", textures); - staticTextures.tempUI = retrieveTexture("tempScreenUI", "emissive", textures); - staticTextures.batteryInactive = retrieveTexture("battery", "inactive", textures); - staticTextures.calendarActive = retrieveTexture("calendar", "active", textures); - staticTextures.calendarInactive = retrieveTexture("calendar", "inactive", textures); - staticTextures.contactsActive = retrieveTexture("contacts", "active", textures); - staticTextures.contactsInactive = retrieveTexture("contacts", "inactive", textures); - staticTextures.musicActive = retrieveTexture("music", "active", textures); - staticTextures.musicInactive = retrieveTexture("music", "inactive", textures); - staticTextures.nextInactive = retrieveTexture("next", "inactive", textures); - staticTextures.pauseInactive = retrieveTexture("pause", "inactive", textures); - staticTextures.playInactive = retrieveTexture("play", "inactive", textures); - staticTextures.previousInactive = retrieveTexture("previous", "inactive", textures); - staticTextures.wifiInactive = retrieveTexture("wifi", "inactive", textures); - } - - // create, load, and build node materials for scene - const deviceMaterials = {}; - const deviceBodyParameters = {}; - const deviceScreenParameters = {}; - BABYLON.NodeMaterial.IgnoreTexturesAtLoadTime = true; - - async function createMaterials() { - deviceMaterials.body = new BABYLON.NodeMaterial("deviceBodyMat", scene, {emitComments: false}); - await deviceMaterials.body.loadAsync("assets/shaders/deviceBodyShader.json"); - deviceMaterials.body.build(false); - - deviceMaterials.screen = new BABYLON.NodeMaterial("deviceScreenMat", scene, {emitComments: false}); - await deviceMaterials.screen.loadAsync("assets/shaders/deviceScreenShader.json"); - deviceMaterials.screen.build(false); - - deviceMaterials.lens = new BABYLON.NodeMaterial("deviceLensMat", scene, {emitComments: false}); - await deviceMaterials.lens.loadAsync("assets/shaders/deviceLensShader.json"); - deviceMaterials.lens.build(false); - - deviceBodyParameters.currentBaseColor = deviceMaterials.body.getBlockByName("currentBaseColor"); - deviceBodyParameters.newBaseColor = deviceMaterials.body.getBlockByName("newBaseColor"); - deviceBodyParameters.currentORM = deviceMaterials.body.getBlockByName("currentORM"); - deviceBodyParameters.newORM = deviceMaterials.body.getBlockByName("newORM"); - deviceBodyParameters.currentNormal = deviceMaterials.body.getBlockByName("currentNormal"); - deviceBodyParameters.newNormal = deviceMaterials.body.getBlockByName("newNormal"); - deviceBodyParameters.currentClearcoat = deviceMaterials.body.getBlockByName("currentClearcoat"); - deviceBodyParameters.newClearcoat = deviceMaterials.body.getBlockByName("newClearcoat"); - deviceBodyParameters.emissive = deviceMaterials.body.getBlockByName("emissiveTexture"); - deviceBodyParameters.glowMask = deviceMaterials.body.getBlockByName("glowMask"); - deviceBodyParameters.emissiveStrength = deviceMaterials.body.getBlockByName("emissiveStrength"); - deviceBodyParameters.ringLightOffset = deviceMaterials.body.getBlockByName("ringLightOffset"); - deviceBodyParameters.ringLightWipe = deviceMaterials.body.getBlockByName("wipeRange"); - deviceBodyParameters.morphX1 = staticTextures.morphShader.getBlockByName("xOffset1"); - deviceBodyParameters.morphY1 = staticTextures.morphShader.getBlockByName("yOffset1"); - deviceBodyParameters.morphX2 = staticTextures.morphShader.getBlockByName("xOffset2"); - deviceBodyParameters.morphY2 = staticTextures.morphShader.getBlockByName("yOffset2"); - deviceBodyParameters.morphScale1 = staticTextures.morphShader.getBlockByName("noiseScale1"); - deviceBodyParameters.morphScale2 = staticTextures.morphShader.getBlockByName("noiseScale2"); - deviceBodyParameters.morphTexture = deviceMaterials.body.getBlockByName("morphTexture"); - deviceBodyParameters.morphValue = deviceMaterials.body.getBlockByName("morphValue"); - deviceScreenParameters.dynamicTexture = deviceMaterials.screen.getBlockByName("dynamicTexture"); - deviceScreenParameters.alias = deviceMaterials.screen.getBlockByName("alias"); - deviceScreenParameters.radius = deviceMaterials.screen.getBlockByName("radius"); - deviceScreenParameters.uOffset = deviceMaterials.screen.getBlockByName("uOffset"); - deviceScreenParameters.vOffset = deviceMaterials.screen.getBlockByName("vOffset"); - deviceScreenParameters.bgColor = deviceMaterials.screen.getBlockByName("bgColor"); - } - - // assign textures to shaders - const defaultVariant = 0; - let currentVariant = defaultVariant; - - function assignTextures() { - // deviceBodyParameters.morphTextureR.texture = deviceBodyParameters.morphTextureG.texture = deviceBodyParameters.morphTextureB.texture = staticTextures.morphTexture; - deviceBodyParameters.morphTexture.texture = staticTextures.morphTexture; - deviceBodyParameters.currentBaseColor.texture = variantTextures[defaultVariant].baseColor; - deviceBodyParameters.currentORM.texture = variantTextures[defaultVariant].orm; - deviceBodyParameters.currentNormal.texture = variantTextures[defaultVariant].normal; - deviceBodyParameters.currentClearcoat.texture = variantTextures[defaultVariant].clearcoat; - deviceBodyParameters.newBaseColor.texture = variantTextures[nextVariant(defaultVariant)].baseColor; - deviceBodyParameters.newORM.texture = variantTextures[nextVariant(defaultVariant)].orm; - deviceBodyParameters.newNormal.texture = variantTextures[nextVariant(defaultVariant)].normal; - deviceBodyParameters.newClearcoat.texture = variantTextures[nextVariant(defaultVariant)].clearcoat; - deviceBodyParameters.emissive.texture = staticTextures.emissive; - } - - function nextVariant(currentVar) { - let nextVar = currentVar + 1; - if (nextVar >= variantTextures.length) { - nextVar = 0; - } - return nextVar; - } - - function prevVariant(currentVar) { - let prevVar = currentVar - 1; - if (prevVar > 0) { - prevVar = variantTextures.length - 1; - } - return prevVar; - } - - let morphScale1 = 4; - let morphScale2 = 2; - - function morphMaterial(newVariant) { - // reset shader textures for morph animation - deviceBodyParameters.currentBaseColor.texture = variantTextures[currentVariant].baseColor; - deviceBodyParameters.currentORM.texture = variantTextures[currentVariant].orm; - deviceBodyParameters.currentNormal.texture = variantTextures[currentVariant].normal; - deviceBodyParameters.currentClearcoat.texture = variantTextures[currentVariant].clearcoat; - deviceBodyParameters.morphValue.value = 0.0; - - // set up next variant textures and set up morph texture - deviceBodyParameters.newBaseColor.texture = variantTextures[newVariant].baseColor; - deviceBodyParameters.newORM.texture = variantTextures[newVariant].orm; - deviceBodyParameters.newNormal.texture = variantTextures[newVariant].normal; - deviceBodyParameters.newClearcoat.texture = variantTextures[newVariant].clearcoat; - deviceBodyParameters.morphX1.value = Math.random(); - deviceBodyParameters.morphY1.value = Math.random(); - deviceBodyParameters.morphX2.value = Math.random(); - deviceBodyParameters.morphY2.value = Math.random(); - deviceBodyParameters.morphScale1.value = morphScale1; - deviceBodyParameters.morphScale2.value = morphScale2; - - // start morph animation - playAnimation(deviceBodyParameters.morphValue, morphAnimation); - currentVariant = newVariant; - } - - let isMorphing = false; - - // let active = false; - function animateMorph() { - setTimeout(function () { - if (isMorphing) { - morphMaterial(nextVariant(currentVariant)); - } - animateMorph(); - }, 2000); - } - - // set up glow layer for emissive textures in node material - var glowLayer = new BABYLON.GlowLayer("glowLayer", scene); - - function initGlowLayer() { - glowLayer.intensity = 0.8; - glowLayer.referenceMeshToUseItsOwnMaterial(device.body); - glowLayer.onBeforeRenderMeshToEffect.add(() => { - deviceBodyParameters.glowMask.value = 1.0; - }); - glowLayer.onAfterRenderMeshToEffect.add(() => { - deviceBodyParameters.glowMask.value = 0.0; - }); - } - - // load meshes and dispose of embedded materials then assign node materials - const device = {}; - const devicePivot = new BABYLON.AbstractMesh("devicePivot", scene); - - async function loadMeshes() { - device.file = await BABYLON.SceneLoader.AppendAsync("assets/meshes/port_low.glb"); - device.body = scene.getMeshByName("portBody_low"); - device.lensGlass = scene.getMeshByName("portLensGlass_low"); - device.screen = scene.getMeshByName("touchGlass_low"); - device.root = device.body.parent; - for (const key in device) { - if (device[key].material != undefined) { - device[key].material.dispose(); - } - } - - // assign node materials to assets - device.body.material = deviceMaterials.body; - device.lensGlass.material = deviceMaterials.lens; - device.screen.material = deviceMaterials.screen; - } - - // populate the trackElements array and trigger event when each header element passes the trigger position - const trackElements = []; - const eventAnimations = []; - let screenHeight = engine.getRenderHeight(); - let screenWidth = engine.getRenderWidth(); - let isMobile = (screenWidth < 992) ? true : false; - engine.onResizeObservable.add(() => { - screenHeight = engine.getRenderHeight(); - screenWidth = engine.getRenderWidth(); - isMobile = (screenWidth < 992) ? true : false; - }); - - function updateElementPositions() { - if (trackElements.length === 0) { - eventAnimations.push({ - name: "head_1", - motionPosition: 0.5, - hydrationPosition: 0.4, - animations: [ - { - target: devicePivot, - clip: isMobile ? pivotTranslationMobile1 : pivotTranslation1, - animDuration: 45 - }, - { - target: devicePivot, - clip: pivotRotation1, - animDuration: 45 - }, - { - target: device.root, - clip: rootRotation1, - animDuration: 45 - } - ], - morph: variant.black, - }); - eventAnimations.push({ - name: "head_2", - motionPosition: isMobile ? 0.8 : 0.6, - hydrationPosition: isMobile ? 0.4 : 0.3, - animations: [ - { - target: devicePivot, - clip: isMobile ? pivotTranslationMobile2 : pivotTranslation2, - animDuration: 60 - }, - { - target: devicePivot, - clip: pivotRotation2, - animDuration: 60 - }, - { - target: device.root, - clip: rootRotation2, - animDuration: 60 - } - ], - morph: undefined, - }); - eventAnimations.push({ - name: "head_3", - motionPosition: isMobile ? 0.8 : 0.6, - hydrationPosition: isMobile ? 0.4 : 0.2, - animations: [ - { - target: devicePivot, - clip: isMobile ? pivotTranslationMobile3 : pivotTranslation3, - animDuration: 90 - }, - { - target: devicePivot, - clip: pivotRotation3, - animDuration: 90 - }, - { - target: device.root, - clip: rootRotation3, - animDuration: 90 - } - ], - morph: variant.wood, - }); - eventAnimations.push({ - name: "head_4", - motionPosition: isMobile ? 0.8 : 0.9, - hydrationPosition: 0.5, - animations: [ - { - target: devicePivot, - clip: isMobile ? pivotTranslationMobile4 : pivotTranslation4, - animDuration: 45 - }, - { - target: devicePivot, - clip: pivotRotation4, - animDuration: 45 - }, - { - target: device.root, - clip: rootRotation4, - animDuration: 45 - }, - { - target: deviceBodyParameters.ringLightWipe, - clip: dehydrateRingLight, - animDuration: dehydrateRingLight.keys[dehydrateRingLight.keys.length - 1].frame - - } - ], - morph: undefined, - }); - eventAnimations.push({ - name: "head_5", - motionPosition: isMobile ? 0.7 : 0.8, - hydrationPosition: 0.5, - animations: [ - { - target: devicePivot, - clip: isMobile ? pivotTranslationMobile5 : pivotTranslation5, - animDuration: 45 - }, - { - target: devicePivot, - clip: pivotRotation5, - animDuration: 45 - }, - { - target: device.root, - clip: rootRotation5, - animDuration: 45 - }, - { - target: deviceBodyParameters.ringLightWipe, - clip: hydrateRingLight, - animDuration: hydrateRingLight.keys[hydrateRingLight.keys.length - 1].frame - }, - { - target: deviceBodyParameters.ringLightOffset, - clip: spinRingLight, - animDuration: spinRingLight.keys[spinRingLight.keys.length - 1].frame - } - ], - morph: undefined, - }); - eventAnimations.push({ - name: "head_6", - motionPosition: 0.7, - hydrationPosition: 0.2, - animations: [ - { - target: devicePivot, - clip: isMobile ? pivotTranslationMobile6 : pivotTranslation6, - animDuration: 45 - }, - { - target: devicePivot, - clip: pivotRotation6, - animDuration: 45 - }, - { - target: device.root, - clip: rootRotation6, - animDuration: 45 - }, - { - target: deviceBodyParameters.ringLightWipe, - clip: dehydrateRingLight, - animDuration: dehydrateRingLight.keys[dehydrateRingLight.keys.length - 1].frame - } - ], - morph: undefined, - }); - - console.log("clip: " + eventAnimations[0].animations[0].clip.keys[1].value); - - let tags = document.getElementsByClassName("track"); - let index = 0; - setTimeout(function () { - for (let tag of tags) { - let motion, hydration; - for (let event of eventAnimations) { - if (tag.id === event.name) { - motion = event.motionPosition; - hydration = event.hydrationPosition; - } - } - trackElements.push({ - id: tag.id, - index: index, - motionPosition: motion, - hydrationPosition: hydration, - position: tag.getBoundingClientRect().top, - activeTrack: true - }); - index += 1; - } - }, 1); - } - - for (let tag of trackElements) { - tag.position = document.getElementById(tag.id).getBoundingClientRect().top; - if (tag.position < screenHeight * tag.motionPosition && tag.activeTrack === true) { - // console.log(tag.id + " is in the middle of the screen at " + tag.position + " compared to position: " + tag.motionPosition); - for (let hotSpot of eventAnimations) { - if (hotSpot.name === tag.id) { - startEventAnimation(hotSpot.animations); - if (hotSpot.morph !== undefined) { - morphMaterial(hotSpot.morph); - } - isMorphing = (hotSpot.name === "head_4") ? true : false; - } - } - tag.activeTrack = false; - } else if (tag.position > screenHeight * tag.motionPosition && tag.activeTrack === false) { - // console.log(tag.id + " is in the middle of the screen at " + tag.position + " compared to position: " + tag.motionPosition); - for (let hotSpot of eventAnimations) { - if (hotSpot.name === tag.id) { - startEventAnimation(hotSpot.animations); - if (hotSpot.morph !== undefined) { - morphMaterial(hotSpot.morph); - } - isMorphing = (hotSpot.name === "head_4") ? true : false; - } - } - tag.activeTrack = true; - } - if (tag.position < screenHeight * tag.hydrationPosition) { - document.getElementById(tag.id).parentElement.classList.toggle("dehydrate", true); - document.getElementById(tag.id).parentElement.classList.toggle("hydrate", false); - } else if (tag.position > screenHeight * tag.hydrationPosition) { - document.getElementById(tag.id).parentElement.classList.toggle("dehydrate", false); - document.getElementById(tag.id).parentElement.classList.toggle("hydrate", true); - } - } - } - - const defaultDuration = 45; - - function startEventAnimation(animations) { - for (let anim of animations) { - let setDuration = (anim.animDuration !== undefined) ? anim.animDuration : defaultDuration; - if (anim.clip.name === "pivotTranslation") { - anim.clip.keys[0].value = devicePivot.position; - } - if (anim.clip.name === "pivotRotation") { - anim.clip.keys[0].value = devicePivot.rotation.x; - } - if (anim.clip.name === "rootRotation") { - anim.clip.keys[0].value = device.root.rotation.y; - } - if (anim.clip.name === "hydrateRingLight" || anim.clip.name === "dehydrateRingLight") { - anim.clip.keys[0].value = deviceBodyParameters.ringLightWipe.value; - } - anim.clip.keys[anim.clip.keys.length - 1].frame = setDuration; - playAnimation(anim.target, anim.clip); - } - } - - // initial position for device - function initializeDevice() { - device.root.parent = devicePivot; - device.root.rotation = new BABYLON.Vector3(0.0, BABYLON.Tools.ToRadians(20), 0.0); - devicePivot.position = new BABYLON.Vector3(-0.01, 0.2, -0.06); - devicePivot.rotation.x = BABYLON.Tools.ToRadians(359); - deviceBodyParameters.emissiveStrength.value = 1.0; - let initAnimations = [ - { - target: devicePivot, - clip: isMobile ? pivotTranslationMobile1 : pivotTranslation1, - animDuration: 100 - }, - { - target: devicePivot, - clip: pivotRotation1, - animDuration: 100 - }, - { - target: device.root, - clip: rootRotation1, - animDuration: 100 - } - ]; - document.getElementById("loader").classList.toggle("dehydrate", true); - setTimeout(() => { - document.getElementById("loader").classList.toggle("hide", true); - }, 3000); - - startEventAnimation(initAnimations); - } - - // set up animations - let morphAnimation, pivotTranslation1, pivotRotation1, rootRotation1, pivotTranslation2, pivotRotation2, - rootRotation2; - - function defineAnimations() { - morphAnimation = { - name: "morphAnimation", - value: "value", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 120, value: 1} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - hydrateRingLight = { - name: "hydrateRingLight", - value: "value", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: 0}, - {frame: 90, value: 1} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEIN, - looping: false - }; - dehydrateRingLight = { - name: "dehydrateRingLight", - value: "value", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 1}, - {frame: 90, value: 0} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEIN, - looping: false - }; - spinRingLight = { - name: "spinRingLight", - value: "value", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: 0}, - {frame: 180, value: 1}, - {frame: 420, value: -1}, - {frame: 540, value: 0} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: true - }; - stopRingLight = { - name: "stopRingLight", - value: "value", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 1}, - {frame: 60, value: 0}, - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslation1 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(-0.01, 0.045, -0.05)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslationMobile1 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(0.0, 0.04, 0.025)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotRotation1 = { - name: "pivotRotation", - value: "rotation.x", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(336)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - rootRotation1 = { - name: "rootRotation", - value: "rotation.y", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(-30)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslation2 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(-0.07, 0.03, -0.09)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslationMobile2 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(0.0, 0.04, 0.025)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotRotation2 = { - name: "pivotRotation", - value: "rotation.x", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(359)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - rootRotation2 = { - name: "rootRotation", - value: "rotation.y", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(-60)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslation3 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(0.07, 0.02, -0.12)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslationMobile3 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(0.00, 0.04, 0.025)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotRotation3 = { - name: "pivotRotation", - value: "rotation.x", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(350)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - rootRotation3 = { - name: "rootRotation", - value: "rotation.y", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(88)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslation4 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(0.0, 0.04, -0.08)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslationMobile4 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(0.0, 0.04, 0.025)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotRotation4 = { - name: "pivotRotation", - value: "rotation.x", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(340)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - rootRotation4 = { - name: "rootRotation", - value: "rotation.y", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(20)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslation5 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(-0.02, 0.04, -0.06)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslationMobile5 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(0.0, 0.04, 0.025)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotRotation5 = { - name: "pivotRotation", - value: "rotation.x", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(346)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - rootRotation5 = { - name: "rootRotation", - value: "rotation.y", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(-45)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslation6 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(-0.07, 0.03, -0.03)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotTranslationMobile6 = { - name: "pivotTranslation", - value: "position", - type: BABYLON.Animation.ANIMATIONTYPE_VECTOR3, - keys: [ - {frame: 0, value: new BABYLON.Vector3(0, 0, 0)}, - {frame: 60, value: new BABYLON.Vector3(0.0, 0.04, 0.025)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - pivotRotation6 = { - name: "pivotRotation", - value: "rotation.x", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(319)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - rootRotation6 = { - name: "rootRotation", - value: "rotation.y", - type: BABYLON.Animation.ANIMATIONTYPE_FLOAT, - keys: [ - {frame: 0, value: 0}, - {frame: 60, value: BABYLON.Tools.ToRadians(-30)} - ], - easingFunction: new BABYLON.SineEase(), - easingMode: BABYLON.EasingFunction.EASINGMODE_EASEINOUT, - looping: false - }; - } - - // initialize touch screen UI - let screenUI, timeDisplay, timeDisplaySmall, dateDisplay, wifiIcon, batteryIcon, calendarBtn, contactsBtn, musicBtn, - previousBtn, pauseBtn, playBtn, nextBtn; - - async function createUI() { - deviceScreenParameters.alias.value = 0.003; - deviceScreenParameters.bgColor.value = new BABYLON.Color3.FromHexString("#656962"); - deviceScreenParameters.vOffset.value = -1.42; - - screenUI = BABYLON.GUI.AdvancedDynamicTexture.CreateForMeshTexture(device.screen, 2048, 2048, true, false); - screenUI.applyYInversionOnUpdate = false; - const displayGrid = new BABYLON.GUI.Grid("displayGrid"); - displayGrid.addColumnDefinition(1); - displayGrid.addRowDefinition(0.5); - displayGrid.addRowDefinition(0.4); - screenUI.addControl(displayGrid); - - const timeGrid = new BABYLON.GUI.Grid("timeGrid"); - timeGrid.addColumnDefinition(1); - timeGrid.addRowDefinition(0.9); - timeGrid.addRowDefinition(0.1); - displayGrid.addControl(timeGrid, 0, 0); - - const threeIconGrid = new BABYLON.GUI.Grid("threeIconGrid"); - threeIconGrid.addColumnDefinition(1 / 3); - threeIconGrid.addColumnDefinition(1 / 3); - threeIconGrid.addColumnDefinition(1 / 3); - threeIconGrid.addRowDefinition(1); - displayGrid.addControl(threeIconGrid, 0, 0); - - const twoIconGrid = new BABYLON.GUI.Grid("twoIconGrid"); - twoIconGrid.addColumnDefinition(150, true); - twoIconGrid.addColumnDefinition(150, true); - twoIconGrid.addRowDefinition(150, true); - twoIconGrid.widthInPixels = 300; - twoIconGrid.top = "160px"; - displayGrid.addControl(twoIconGrid, 0, 0); - - wifiIcon = new BABYLON.GUI.Image("wifi", staticTextures.wifiInactive.url); - wifiIcon.widthInPixels = 128; - wifiIcon.heightInPixels = 128; - twoIconGrid.addControl(wifiIcon, 0, 0); - - batteryIcon = new BABYLON.GUI.Image("battery", staticTextures.batteryInactive.url); - batteryIcon.widthInPixels = 128; - batteryIcon.heightInPixels = 128; - twoIconGrid.addControl(batteryIcon, 0, 1); - - const mainMenuGrid = new BABYLON.GUI.Grid("mainMenuGrid"); - mainMenuGrid.addColumnDefinition(1 / 3); - mainMenuGrid.addColumnDefinition(1 / 3); - mainMenuGrid.addColumnDefinition(1 / 3); - mainMenuGrid.addRowDefinition(1); - mainMenuGrid.widthInPixels = 1200; - displayGrid.addControl(mainMenuGrid, 1, 0); - - const calendarButton = BABYLON.GUI.Button.CreateImageOnlyButton("calendarButton", staticTextures.calendarInactive.url); - calendarButton.widthInPixels = 256; - calendarButton.heightInPixels = 256; - calendarButton.thickness = 0; - calendarButton.top = "180px"; - calendarButton.verticalAlignment = BABYLON.GUI.VERTICAL_ALIGNMENT_TOP; - mainMenuGrid.addControl(calendarButton, 0, 0); - - const contactsButton = BABYLON.GUI.Button.CreateImageOnlyButton("contactsButton", staticTextures.contactsInactive.url); - contactsButton.widthInPixels = 256; - contactsButton.heightInPixels = 256; - contactsButton.thickness = 0; - contactsButton.top = "120px"; - contactsButton.verticalAlignment = BABYLON.GUI.VERTICAL_ALIGNMENT_TOP; - mainMenuGrid.addControl(contactsButton, 0, 1); - - const musicButton = BABYLON.GUI.Button.CreateImageOnlyButton("musicButton", staticTextures.musicInactive.url); - musicButton.widthInPixels = 256; - musicButton.heightInPixels = 256; - musicButton.thickness = 0; - musicButton.top = "180px"; - musicButton.verticalAlignment = BABYLON.GUI.VERTICAL_ALIGNMENT_TOP; - mainMenuGrid.addControl(musicButton, 0, 2); - - timeDisplay = new BABYLON.GUI.TextBlock("time", ""); - timeDisplay.color = "white"; - timeDisplay.fontSize = 600; - timeDisplay.fontFamily = "noto-sans-condensed"; - timeDisplay.fontWeight = 200; - timeDisplay.top = 100; - timeDisplay.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM; - timeDisplay.textVerticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_BOTTOM; - timeGrid.addControl(timeDisplay, 0, 0); - - dateDisplay = new BABYLON.GUI.TextBlock("date", ""); - dateDisplay.color = "white"; - dateDisplay.fontSize = 80; - dateDisplay.fontFamily = "noto-sans-condensed"; - dateDisplay.fontWeight = 400; - dateDisplay.top = -20; - timeDisplay.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP; - timeGrid.addControl(dateDisplay, 1, 0); - deviceScreenParameters.dynamicTexture.texture = screenUI; - // deviceScreenParameters.dynamicTexture.texture = staticTextures.tempUI; - } - - const day = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; - const month = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; - - function updateDateTime() { - let rawDate = new Date(); - let hour = rawDate.getHours(); - let minute = rawDate.getMinutes(); - let update = (60 - rawDate.getSeconds()) * 1000; - let civTimeHour = (hour === 0) ? hour + 12 : hour; - civTimeHour = (civTimeHour > 12) ? civTimeHour - 12 : civTimeHour; - let twoDigitMinutes = (minute < 10) ? "0" + minute : minute; - - timeDisplay.text = civTimeHour + ":" + twoDigitMinutes; - dateDisplay.text = day[rawDate.getDay()] + ", " + rawDate.getDate() + " " + month[rawDate.getMonth()] + " " + rawDate.getFullYear(); - setTimeout(() => { - updateDateTime(); - }, update); - } - - initScene(); - defineAnimations(); - await loadTexturesAsync(); - await createMaterials(); - assignTextures(); - await loadMeshes(); - await createUI(); - updateDateTime(); - initGlowLayer(); - initializeDevice(); - animateMorph(); - - // show inspector - inspectorActive = false; - - function displayInspector() { - if (event.keyCode === 78) { // n key to open inspector - if (inspectorActive) { - scene.debugLayer.hide(); - inspectorActive = false; - } else { - scene.debugLayer.show({embedMode: true}); - inspectorActive = true; - } - } - if (event.keyCode === 67) { // c for temp morph - morphMaterial(nextVariant(currentVariant)); - } - } - - const scrollTarget = document.getElementById("htmlLayer"); - - function scrollReroute(deltaY) { - scrollTarget.scrollTop += deltaY; - } - - document.addEventListener("wheel", event => scrollReroute(event.deltaY)); - document.getElementById("htmlLayer").addEventListener("scroll", updateElementPositions); - - // add listener for key press - document.addEventListener('keydown', displayInspector); - - // remove listeners when scene disposed - scene.onDisposeObservable.add(function () { - canvas.removeEventListener('keydown', displayInspector); - }); - - return scene; -}; -; -var deviceCanvas = async function () { - var scene = await createScene(); //Call the createScene function - - // Register a render loop to repeatedly render the scene - engine.runRenderLoop(function () { - scene.render(); - }); - - // Watch for browser/canvas resize events - window.addEventListener("resize", function () { - engine.resize(); - }); -}; - -var canvas = document.getElementById("renderCanvas"); // Get the canvas element -var engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine - -deviceCanvas(); -; \ No newline at end of file diff --git a/src/Test/components/basic.tsx b/src/Test/components/basic.tsx deleted file mode 100644 index 6c460b9..0000000 --- a/src/Test/components/basic.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import intl from 'react-intl-universal'; - -const BasicComponent: React.FC = () => { - return ( -
-
Basic Examples:
-
{intl.get('SIMPLE')}
-
{intl.get('HELLO', { name: 'Tony', where: 'Alibaba' })}
-
- ); -} - -export default BasicComponent; \ No newline at end of file diff --git a/src/Test/components/currency.tsx b/src/Test/components/currency.tsx deleted file mode 100644 index f9f5360..0000000 --- a/src/Test/components/currency.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react' -import intl from 'react-intl-universal'; - -const CurrencyComponent: React.FC = () => { - let price = 123456.78; - return ( -
-
Currency Example:
-
{intl.get('SALE_PRICE', { price })}
-
- ) -} - -export default CurrencyComponent; \ No newline at end of file diff --git a/src/Test/components/date.tsx b/src/Test/components/date.tsx deleted file mode 100644 index dc80704..0000000 --- a/src/Test/components/date.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react' -import intl from 'react-intl-universal'; - -const DateComponent: React.FC = () => { - const start = new Date(); - const end = new Date(); - const expires = new Date(); - return ( -
-
Date Examples:
-
{intl.get('SALE_START', { start })}
-
{intl.get('SALE_END', { end })}
-
{intl.get('COUPON', { expires })}
-
- ) -} - -export default DateComponent; \ No newline at end of file diff --git a/src/Test/components/html.tsx b/src/Test/components/html.tsx deleted file mode 100644 index 5f9c55a..0000000 --- a/src/Test/components/html.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import intl from 'react-intl-universal'; - -const HtmlComponent: React.FC = () => { - return ( -
-
Html Examples:
-
{intl.getHTML('TIP')}
-
{intl.getHTML('TIP_VAR', { message: 'HTML with variables' })}
-
{intl.getHTML('TIP_VAR', { message: '' })}
-
- ); -} - -export default HtmlComponent; \ No newline at end of file diff --git a/src/Test/components/message-not-in-component.tsx b/src/Test/components/message-not-in-component.tsx deleted file mode 100644 index 79ddc38..0000000 --- a/src/Test/components/message-not-in-component.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import util from '../core/util'; - -const MessageNotInComponent: React.FC = () => { - return ( -
-
Message Not in Component Example:
-
{util.getMessage()}
-
- ) -} - -export default MessageNotInComponent; diff --git a/src/Test/components/plural.tsx b/src/Test/components/plural.tsx deleted file mode 100644 index 9ffb80b..0000000 --- a/src/Test/components/plural.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react' -import intl from 'react-intl-universal'; - -const PluralComponent: React.FC = () => { - return ( -
-
Plural Examples:
-
{intl.get("PHOTO", { photoNum: 0 })}
-
{intl.get("PHOTO", { photoNum: 1 })}
-
{intl.get("PHOTO", { photoNum: 1000000 })}
-
- ); -} - -export default PluralComponent; \ No newline at end of file diff --git a/src/Test/core/util.ts b/src/Test/core/util.ts deleted file mode 100644 index 1e30b8a..0000000 --- a/src/Test/core/util.ts +++ /dev/null @@ -1,7 +0,0 @@ -import intl from 'react-intl-universal'; - -const util = { - getMessage: () => intl.get('MESSAGE_NOT_IN_COMPONENT'), -}; - -export default util; diff --git a/src/Test/test.tsx b/src/Test/test.tsx deleted file mode 100644 index 17b400b..0000000 --- a/src/Test/test.tsx +++ /dev/null @@ -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) => { - setCurrentLocale(e.target.value) - forceUpdate(); - } - - return ( -
- -
{intl.get('SIMPLE')}
- -
- ) -} - -export default Test; diff --git a/src/Test/test2.tsx b/src/Test/test2.tsx deleted file mode 100644 index 383af85..0000000 --- a/src/Test/test2.tsx +++ /dev/null @@ -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)=>{ - setCurrentLocale(e.target.value); - forceUpdate(); - } - const localeSelector = ( - - ); - return ( -
- {initDone && ( -
- {localeSelector} - -
- )} -
- ); -} - -export default Test2; \ No newline at end of file diff --git a/src/babylonjs/LineBabylon.tsx b/src/babylonjs/LineBabylon.tsx deleted file mode 100644 index dcf640d..0000000 --- a/src/babylonjs/LineBabylon.tsx +++ /dev/null @@ -1,1447 +0,0 @@ -import React, {useEffect, useRef, useContext} 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, Observable, Vector3} from "@babylonjs/core"; -import {useAppSelector} from "../store/hooks"; -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 {GlassStatus, selectGlassStatus} from "../store/ProductionMonitoringEntity"; -import {MyObservable} from "../context/MyObservable"; -import {ThisLineID} from "../context/ThisLineID"; -import '../page/style/standard.css'; -import {Button, ButtonGroup} from "@mui/material"; -import intl from "react-intl-universal"; - -const onCamObservable = new Observable(); - -const myStyle = { - width: '1040px', - height: '420px', - outline: 'none', -} - -const LineCamera = { - Line_1: { - name: "camera", - alpha: BABYLON.Tools.ToRadians(250), - beta: BABYLON.Tools.ToRadians(30), - radius: 145, - target: new BABYLON.Vector3(-12, 0, 21) - }, - Line_2: { - name: "camera", - alpha: BABYLON.Tools.ToRadians(250), - beta: BABYLON.Tools.ToRadians(30), - radius: 145, - target: new BABYLON.Vector3(-12, 0, 8) - }, - Line_3: { - name: "camera", - alpha: BABYLON.Tools.ToRadians(250), - beta: BABYLON.Tools.ToRadians(30), - radius: 145, - target: new BABYLON.Vector3(-12, 0, -8) - }, - Line_4: { - name: "camera", - alpha: BABYLON.Tools.ToRadians(250), - beta: BABYLON.Tools.ToRadians(30), - radius: 145, - target: new BABYLON.Vector3(-12, 0, -21) - } -} -const DetailCamera = { - Line_1: { - Part_1: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(-115, 0, 25) - }, - Part_2: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(-40, 0, 27) - }, - Part_3: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(15, 0, 27) - }, - Part_4: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(120, 0, 27) - }, - }, - Line_2: { - Part_1: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(-100, 0, 10) - }, - Part_2: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(-45, 0, 10) - }, - Part_3: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(0, 0, 10) - }, - Part_4: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(100, 0, 10) - }, - }, - Line_3: { - Part_1: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(-100, 0, -10) - }, - Part_2: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(-45, 0, -10) - }, - Part_3: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(0, 0, -10) - }, - Part_4: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(100, 0, -10) - }, - }, - Line_4: { - Part_1: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(-115, 0, -27) - }, - Part_2: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(-40, 0, -30) - }, - Part_3: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(15, 0, -30) - }, - Part_4: { - alpha: BABYLON.Tools.ToRadians(270), - beta: BABYLON.Tools.ToRadians(25), - radius: 45, - target: new BABYLON.Vector3(120, 0, -30) - }, - } -} - -function LineBabylon() { - const onGlassObservable = useContext(MyObservable); - const contextLineID = useContext(ThisLineID); - const canvasRef = useRef(null); - const LineID = "Line_" + contextLineID; - // const thisLineGlassStatus = useAppSelector(selectGlassStatus) - // onGlassObservable.notifyObservers(thisLineGlassStatus) - - useEffect( - () => { - 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 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 - // @ts-ignore - const camera = new BABYLON.ArcRotateCamera(LineCamera[LineID].name, LineCamera[LineID].alpha, LineCamera[LineID].beta, LineCamera[LineID].radius, LineCamera[LineID].target); - camera.lowerRadiusLimit = 10; - camera.upperRadiusLimit = 600; - - // This attaches the camera to the canvas - camera.attachControl(canvas, true); - - - 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); - - const LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/Line/', LineID + '.babylon', scene); - const LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/Line/', LineID + '_middle.babylon', scene); - const LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/Line/', LineID + '_far.babylon', scene) - LOD2MESH.meshes.map((mesh) => { - mesh.isPickable = true; - }) - LOD1MESH.meshes.map((mesh) => { - mesh.isPickable = true; - }) - LOD0MESH.meshes.map((mesh) => { - mesh.isPickable = true; - mesh.actionManager = new BABYLON.ActionManager(scene); - LOD1MESH.meshes.find((lowMesh) => { - if (mesh.name === lowMesh.name) { - // @ts-ignore - mesh.addLODLevel(30, lowMesh); - } - }) - LOD2MESH.meshes.find((low2Mesh) => { - - if (mesh.name === low2Mesh.name) { - // @ts-ignore - mesh.addLODLevel(100, low2Mesh); - } - }) - mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, () => { - // @ts-ignore - hl.addMesh(mesh, BABYLON.Color3.Green()); - // @ts-ignore - hl.addMesh(mesh.getLODLevelAtDistance(30), BABYLON.Color3.Green()); - // @ts-ignore - hl.addMesh(mesh.getLODLevelAtDistance(100), BABYLON.Color3.Green()); - })); - mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, () => { - // @ts-ignore - hl.removeMesh(mesh) - // @ts-ignore - hl.removeMesh(mesh.getLODLevelAtDistance(30)); - // @ts-ignore - hl.removeMesh(mesh.getLODLevelAtDistance(100)); - })); - }) - - function reset() { - // @ts-ignore - camera.target = LineCamera[LineID].target; - // @ts-ignore - camera.alpha = LineCamera[LineID].alpha; - // @ts-ignore - camera.beta = LineCamera[LineID].beta; - // @ts-ignore - camera.radius = LineCamera[LineID].radius; - } - - let resetCamera = setTimeout(reset, 5000) - 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, 5000); - } - }) - - onCamObservable.add((eventData, eventState) => { - clearTimeout(resetCamera); - resetCamera = setTimeout(reset, 5000); - switch (eventData) { - case 1: - // @ts-ignore - camera.target = DetailCamera[LineID].Part_1.target; - // @ts-ignore - camera.alpha = DetailCamera[LineID].Part_1.alpha; - // @ts-ignore - camera.beta = DetailCamera[LineID].Part_1.beta; - // @ts-ignore - camera.radius = DetailCamera[LineID].Part_1.radius; - break; - case 2: - // @ts-ignore - camera.target = DetailCamera[LineID].Part_2.target; - // @ts-ignore - camera.alpha = DetailCamera[LineID].Part_2.alpha; - // @ts-ignore - camera.beta = DetailCamera[LineID].Part_2.beta; - // @ts-ignore - camera.radius = DetailCamera[LineID].Part_2.radius; - break; - case 3: - // @ts-ignore - camera.target = DetailCamera[LineID].Part_3.target; - // @ts-ignore - camera.alpha = DetailCamera[LineID].Part_3.alpha; - // @ts-ignore - camera.beta = DetailCamera[LineID].Part_3.beta; - // @ts-ignore - camera.radius = DetailCamera[LineID].Part_3.radius; - break; - case 4: - // @ts-ignore - camera.target = DetailCamera[LineID].Part_4.target; - // @ts-ignore - camera.alpha = DetailCamera[LineID].Part_4.alpha; - // @ts-ignore - camera.beta = DetailCamera[LineID].Part_4.beta; - // @ts-ignore - camera.radius = DetailCamera[LineID].Part_4.radius; - break; - } - }) - - return scene; - }; - - // call the createScene function - const scene = createScene(); - - scene.then((scene) => { - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_1 - let Line1_1: NodeJS.Timer; - let AnimationList1_1 = new Set() - - function Begin1_1() { - clearInterval(Line1_1); - AnimationList1_1.forEach((item) => { - item.restart() - }) - Line1_1 = setInterval(() => { - const {glass1_1_1, glass1_1_2,} = GlassAnimation1_1(scene); - let Anima1_1_1: Animatable, Anima1_1_2: Animatable; - - Anima1_1_1 = scene.beginAnimation(glass1_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_1_1); - glass1_1_1.dispose(); - AnimationList1_1.delete(Anima1_1_1) - }) - Anima1_1_2 = scene.beginAnimation(glass1_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_1_2); - glass1_1_2.dispose(); - AnimationList1_1.delete(Anima1_1_2) - }) - AnimationList1_1.add(Anima1_1_1).add(Anima1_1_2) - }, 2500) - } - - function Stop1_1() { - clearInterval(Line1_1) - AnimationList1_1.forEach((item) => { - item.pause() - }) - } - - function Remove1_1() { - clearInterval(Line1_1) - AnimationList1_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_2U - let Line1_2U: NodeJS.Timer; - let AnimationList1_2U = new Set() - - function Begin1_2U() { - clearInterval(Line1_2U); - AnimationList1_2U.forEach((item) => { - item.restart() - }) - Line1_2U = setInterval(() => { - const {glass1_2_1} = GlassAnimation1_2U(scene); - let Anima1_2U: Animatable; - - Anima1_2U = scene.beginAnimation(glass1_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_2_1); - glass1_2_1.dispose(); - AnimationList1_2U.delete(Anima1_2U) - }) - - AnimationList1_2U.add(Anima1_2U) - }, 2500) - } - - function Stop1_2U() { - clearInterval(Line1_2U) - AnimationList1_2U.forEach((item) => { - item.pause() - }) - } - - function Remove1_2U() { - clearInterval(Line1_2U) - AnimationList1_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_2D - let Line1_2D: NodeJS.Timer; - let AnimationList1_2D = new Set() - - function Begin1_2D() { - clearInterval(Line1_2D); - AnimationList1_2D.forEach((item) => { - item.restart() - }) - Line1_2D = setInterval(() => { - const {glass1_2_2} = GlassAnimation1_2D(scene); - let Anima1_2D: Animatable; - - Anima1_2D = scene.beginAnimation(glass1_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_2_2); - glass1_2_2.dispose(); - AnimationList1_2D.delete(Anima1_2D) - }) - - AnimationList1_2D.add(Anima1_2D) - }, 2500) - } - - function Stop1_2D() { - clearInterval(Line1_2D) - AnimationList1_2D.forEach((item) => { - item.pause() - }) - } - - function Remove1_2D() { - clearInterval(Line1_2D) - AnimationList1_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_3 - let Line1_3: NodeJS.Timer; - let AnimationList1_3 = new Set() - - function Begin1_3() { - clearInterval(Line1_3); - AnimationList1_3.forEach((item) => { - item.restart() - }) - Line1_3 = setInterval(() => { - const {glass1_3_1, glass1_3_2} = GlassAnimation1_3(scene); - let Anima1_3_1: Animatable, Anima1_3_2: Animatable; - - Anima1_3_1 = scene.beginAnimation(glass1_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_3_1); - glass1_3_1.dispose(); - AnimationList1_3.delete(Anima1_3_1) - }) - Anima1_3_2 = scene.beginAnimation(glass1_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_3_2); - glass1_3_2.dispose(); - AnimationList1_3.delete(Anima1_3_2) - }) - AnimationList1_3.add(Anima1_3_1).add(Anima1_3_2) - }, 2500) - } - - function Stop1_3() { - clearInterval(Line1_3) - AnimationList1_3.forEach((item) => { - item.pause() - }) - } - - function Remove1_3() { - clearInterval(Line1_3) - AnimationList1_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_4 - let Line1_4: NodeJS.Timer; - let AnimationList1_4 = new Set() - - function Begin1_4() { - clearInterval(Line1_4); - AnimationList1_4.forEach((item) => { - item.restart() - }) - Line1_4 = setInterval(() => { - const {glass1_4_1, glass1_4_2} = GlassAnimation1_4(scene); - let Anima1_4_1: Animatable, Anima1_4_2: Animatable; - - Anima1_4_1 = scene.beginAnimation(glass1_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_4_1); - glass1_4_1.dispose(); - AnimationList1_4.delete(Anima1_4_1) - }) - Anima1_4_2 = scene.beginAnimation(glass1_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_4_2); - glass1_4_2.dispose(); - AnimationList1_4.delete(Anima1_4_2) - }) - AnimationList1_4.add(Anima1_4_1).add(Anima1_4_2) - }, 2500) - } - - function Stop1_4() { - clearInterval(Line1_4) - AnimationList1_4.forEach((item) => { - item.pause() - }) - } - - function Remove1_4() { - clearInterval(Line1_4) - AnimationList1_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_1 - let Line2_1: NodeJS.Timer; - let AnimationList2_1 = new Set() - - function Begin2_1() { - clearInterval(Line2_1); - AnimationList2_1.forEach((item) => { - item.restart() - }) - Line2_1 = setInterval(() => { - const {glass2_1_1, glass2_1_2} = GlassAnimation2_1(scene); - let Anima2_1_1: Animatable, Anima2_1_2: Animatable; - - Anima2_1_1 = scene.beginAnimation(glass2_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_1_1); - glass2_1_1.dispose(); - AnimationList2_1.delete(Anima2_1_1) - }) - Anima2_1_2 = scene.beginAnimation(glass2_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_1_2); - glass2_1_2.dispose(); - AnimationList2_1.delete(Anima2_1_2) - }) - AnimationList2_1.add(Anima2_1_1).add(Anima2_1_2) - }, 2500) - } - - function Stop2_1() { - clearInterval(Line2_1) - AnimationList2_1.forEach((item) => { - item.pause() - }) - } - - function Remove2_1() { - clearInterval(Line2_1) - AnimationList2_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_2U - let Line2_2U: NodeJS.Timer; - let AnimationList2_2U = new Set() - - function Begin2_2U() { - clearInterval(Line2_2U); - AnimationList2_2U.forEach((item) => { - item.restart() - }) - Line2_2U = setInterval(() => { - const {glass2_2_1} = GlassAnimation2_2U(scene); - let Anima2_2U: Animatable; - - Anima2_2U = scene.beginAnimation(glass2_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_2_1); - glass2_2_1.dispose(); - AnimationList2_2U.delete(Anima2_2U) - }) - - AnimationList2_2U.add(Anima2_2U) - }, 2500) - } - - function Stop2_2U() { - clearInterval(Line2_2U) - AnimationList2_2U.forEach((item) => { - item.pause() - }) - } - - function Remove2_2U() { - clearInterval(Line2_2U) - AnimationList2_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_2D - let Line2_2D: NodeJS.Timer; - let AnimationList2_2D = new Set() - - function Begin2_2D() { - clearInterval(Line2_2D); - AnimationList2_2D.forEach((item) => { - item.restart() - }) - Line2_2D = setInterval(() => { - const {glass2_2_2} = GlassAnimation2_2D(scene); - let Anima2_2D: Animatable; - - Anima2_2D = scene.beginAnimation(glass2_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_2_2); - glass2_2_2.dispose(); - AnimationList2_2D.delete(Anima2_2D) - }) - - AnimationList2_2D.add(Anima2_2D) - }, 2500) - } - - function Stop2_2D() { - clearInterval(Line2_2D) - AnimationList2_2D.forEach((item) => { - item.pause() - }) - } - - function Remove2_2D() { - clearInterval(Line2_2D) - AnimationList2_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_3 - let Line2_3: NodeJS.Timer; - let AnimationList2_3 = new Set() - - function Begin2_3() { - clearInterval(Line2_3); - AnimationList2_3.forEach((item) => { - item.restart() - }) - Line2_3 = setInterval(() => { - const {glass2_3_1, glass2_3_2} = GlassAnimation2_3(scene); - let Anima2_3_1: Animatable, Anima2_3_2: Animatable; - - Anima2_3_1 = scene.beginAnimation(glass2_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_3_1); - glass2_3_1.dispose(); - AnimationList2_3.delete(Anima2_3_1) - }) - Anima2_3_2 = scene.beginAnimation(glass2_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_3_2); - glass2_3_2.dispose(); - AnimationList2_3.delete(Anima2_3_2) - }) - AnimationList2_3.add(Anima2_3_1).add(Anima2_3_2) - }, 2500) - } - - function Stop2_3() { - clearInterval(Line2_3) - AnimationList2_3.forEach((item) => { - item.pause() - }) - } - - function Remove2_3() { - clearInterval(Line2_3) - AnimationList2_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_4 - let Line2_4: NodeJS.Timer; - let AnimationList2_4 = new Set() - - function Begin2_4() { - clearInterval(Line2_4); - AnimationList2_4.forEach((item) => { - item.restart() - }) - Line2_4 = setInterval(() => { - const {glass2_4_1, glass2_4_2} = GlassAnimation2_4(scene); - let Anima2_4_1: Animatable, Anima2_4_2: Animatable; - - Anima2_4_1 = scene.beginAnimation(glass2_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_4_1); - glass2_4_1.dispose(); - AnimationList2_4.delete(Anima2_4_1) - }) - Anima2_4_2 = scene.beginAnimation(glass2_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_4_2); - glass2_4_2.dispose(); - AnimationList2_4.delete(Anima2_4_2) - }) - AnimationList2_4.add(Anima2_4_1).add(Anima2_4_2) - }, 2500) - } - - function Stop2_4() { - clearInterval(Line2_4) - AnimationList2_4.forEach((item) => { - item.pause() - }) - } - - function Remove2_4() { - clearInterval(Line2_4) - AnimationList2_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_1 - let Line3_1: NodeJS.Timer; - let AnimationList3_1 = new Set() - - function Begin3_1() { - clearInterval(Line3_1); - AnimationList3_1.forEach((item) => { - item.restart() - }) - Line3_1 = setInterval(() => { - const {glass3_1_1, glass3_1_2} = GlassAnimation3_1(scene); - let Anima3_1_1: Animatable, Anima3_1_2: Animatable; - - Anima3_1_1 = scene.beginAnimation(glass3_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_1_1); - glass3_1_1.dispose(); - AnimationList3_1.delete(Anima3_1_1) - }) - Anima3_1_2 = scene.beginAnimation(glass3_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_1_2); - glass3_1_2.dispose(); - AnimationList3_1.delete(Anima3_1_2) - }) - AnimationList3_1.add(Anima3_1_1).add(Anima3_1_2) - }, 2500) - } - - function Stop3_1() { - clearInterval(Line3_1) - AnimationList3_1.forEach((item) => { - item.pause() - }) - } - - function Remove3_1() { - clearInterval(Line3_1) - AnimationList3_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_2U - let Line3_2U: NodeJS.Timer; - let AnimationList3_2U = new Set() - - function Begin3_2U() { - clearInterval(Line3_2U); - AnimationList3_2U.forEach((item) => { - item.restart() - }) - Line3_2U = setInterval(() => { - const {glass3_2_2} = GlassAnimation3_2U(scene); - let Anima3_2U: Animatable; - - Anima3_2U = scene.beginAnimation(glass3_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_2_2); - glass3_2_2.dispose(); - AnimationList3_2U.delete(Anima3_2U) - }) - - AnimationList3_2U.add(Anima3_2U) - }, 2500) - } - - function Stop3_2U() { - clearInterval(Line3_2U) - AnimationList3_2U.forEach((item) => { - item.pause() - }) - } - - function Remove3_2U() { - clearInterval(Line3_2U) - AnimationList3_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_2D - let Line3_2D: NodeJS.Timer; - let AnimationList3_2D = new Set() - - function Begin3_2D() { - clearInterval(Line3_2D); - AnimationList3_2D.forEach((item) => { - item.restart() - }) - Line3_2D = setInterval(() => { - const {glass3_2_1} = GlassAnimation3_2D(scene); - let Anima3_2D: Animatable; - - Anima3_2D = scene.beginAnimation(glass3_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_2_1); - glass3_2_1.dispose(); - AnimationList3_2D.delete(Anima3_2D) - }) - - AnimationList3_2D.add(Anima3_2D) - }, 2500) - } - - function Stop3_2D() { - clearInterval(Line3_2D) - AnimationList3_2D.forEach((item) => { - item.pause() - }) - } - - function Remove3_2D() { - clearInterval(Line3_2D) - AnimationList3_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_3 - let Line3_3: NodeJS.Timer; - let AnimationList3_3 = new Set() - - function Begin3_3() { - clearInterval(Line3_3); - AnimationList3_3.forEach((item) => { - item.restart() - }) - Line3_3 = setInterval(() => { - const {glass3_3_1, glass3_3_2} = GlassAnimation3_3(scene); - let Anima3_3_1: Animatable, Anima3_3_2: Animatable; - - Anima3_3_1 = scene.beginAnimation(glass3_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_3_1); - glass3_3_1.dispose(); - AnimationList3_3.delete(Anima3_3_1) - }) - Anima3_3_2 = scene.beginAnimation(glass3_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_3_2); - glass3_3_2.dispose(); - AnimationList3_3.delete(Anima3_3_2) - }) - AnimationList3_3.add(Anima3_3_1).add(Anima3_3_2) - }, 2500) - } - - function Stop3_3() { - clearInterval(Line3_3) - AnimationList3_3.forEach((item) => { - item.pause() - }) - } - - function Remove3_3() { - clearInterval(Line3_3) - AnimationList3_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_4 - let Line3_4: NodeJS.Timer; - let AnimationList3_4 = new Set() - - function Begin3_4() { - clearInterval(Line3_4); - AnimationList3_4.forEach((item) => { - item.restart() - }) - Line3_4 = setInterval(() => { - const {glass3_4_1, glass3_4_2} = GlassAnimation3_4(scene); - let Anima3_4_1: Animatable, Anima3_4_2: Animatable; - - Anima3_4_1 = scene.beginAnimation(glass3_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_4_1); - glass3_4_1.dispose(); - AnimationList3_4.delete(Anima3_4_1) - }) - Anima3_4_2 = scene.beginAnimation(glass3_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_4_2); - glass3_4_2.dispose(); - AnimationList3_4.delete(Anima3_4_2) - }) - AnimationList3_4.add(Anima3_4_1).add(Anima3_4_2) - }, 2500) - } - - function Stop3_4() { - clearInterval(Line3_4) - AnimationList3_4.forEach((item) => { - item.pause() - }) - } - - function Remove3_4() { - clearInterval(Line3_4) - AnimationList3_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_1 - let Line4_1: NodeJS.Timer; - let AnimationList4_1 = new Set() - - function Begin4_1() { - clearInterval(Line4_1); - AnimationList4_1.forEach((item) => { - item.restart() - }) - Line4_1 = setInterval(() => { - const {glass4_1_1, glass4_1_2} = GlassAnimation4_1(scene); - let Anima4_1_1: Animatable, Anima4_1_2: Animatable; - - Anima4_1_1 = scene.beginAnimation(glass4_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_1_1); - glass4_1_1.dispose(); - AnimationList4_1.delete(Anima4_1_1) - }) - Anima4_1_2 = scene.beginAnimation(glass4_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_1_2); - glass4_1_2.dispose(); - AnimationList4_1.delete(Anima4_1_2) - }) - AnimationList4_1.add(Anima4_1_1).add(Anima4_1_2) - }, 2500) - } - - function Stop4_1() { - clearInterval(Line4_1) - AnimationList4_1.forEach((item) => { - item.pause() - }) - } - - function Remove4_1() { - clearInterval(Line4_1) - AnimationList4_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_2U - let Line4_2U: NodeJS.Timer; - let AnimationList4_2U = new Set() - - function Begin4_2U() { - clearInterval(Line4_2U); - AnimationList4_2U.forEach((item) => { - item.restart() - }) - Line4_2U = setInterval(() => { - const {glass4_2_2} = GlassAnimation4_2U(scene); - let Anima4_2U: Animatable; - - Anima4_2U = scene.beginAnimation(glass4_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_2_2); - glass4_2_2.dispose(); - AnimationList4_2U.delete(Anima4_2U) - }) - - AnimationList4_2U.add(Anima4_2U) - }, 2500) - } - - function Stop4_2U() { - clearInterval(Line4_2U) - AnimationList4_2U.forEach((item) => { - item.pause() - }) - } - - function Remove4_2U() { - clearInterval(Line4_2U) - AnimationList4_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_2D - let Line4_2D: NodeJS.Timer; - let AnimationList4_2D = new Set() - - function Begin4_2D() { - clearInterval(Line4_2D); - AnimationList4_2D.forEach((item) => { - item.restart() - }) - Line4_2D = setInterval(() => { - const {glass4_2_1} = GlassAnimation4_2D(scene); - let Anima4_2D: Animatable; - - Anima4_2D = scene.beginAnimation(glass4_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_2_1); - glass4_2_1.dispose(); - AnimationList4_2D.delete(Anima4_2D) - }) - - AnimationList4_2D.add(Anima4_2D) - }, 2500) - } - - function Stop4_2D() { - clearInterval(Line4_2D) - AnimationList4_2D.forEach((item) => { - item.pause() - }) - } - - function Remove4_2D() { - clearInterval(Line4_2D) - AnimationList4_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_3 - let Line4_3: NodeJS.Timer; - let AnimationList4_3 = new Set() - - function Begin4_3() { - clearInterval(Line4_3); - AnimationList4_3.forEach((item) => { - item.restart() - }) - Line4_3 = setInterval(() => { - const {glass4_3_1, glass4_3_2} = GlassAnimation4_3(scene); - let Anima4_3_1: Animatable, Anima4_3_2: Animatable; - - Anima4_3_1 = scene.beginAnimation(glass4_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_3_1); - glass4_3_1.dispose(); - AnimationList4_3.delete(Anima4_3_1) - }) - Anima4_3_2 = scene.beginAnimation(glass4_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_3_2); - glass4_3_2.dispose(); - AnimationList4_3.delete(Anima4_3_2) - }) - AnimationList4_3.add(Anima4_3_1).add(Anima4_3_2) - }, 2500) - } - - function Stop4_3() { - clearInterval(Line4_3) - AnimationList4_3.forEach((item) => { - item.pause() - }) - } - - function Remove4_3() { - clearInterval(Line4_3) - AnimationList4_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_4 - let Line4_4: NodeJS.Timer; - let AnimationList4_4 = new Set() - - function Begin4_4() { - clearInterval(Line4_4); - AnimationList4_4.forEach((item) => { - item.restart() - }) - Line4_4 = setInterval(() => { - const {glass4_4_1, glass4_4_2} = GlassAnimation4_4(scene); - let Anima4_4_1: Animatable, Anima4_4_2: Animatable; - - Anima4_4_1 = scene.beginAnimation(glass4_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_4_1); - glass4_4_1.dispose(); - AnimationList4_4.delete(Anima4_4_1) - }) - Anima4_4_2 = scene.beginAnimation(glass4_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_4_2); - glass4_4_2.dispose(); - AnimationList4_4.delete(Anima4_4_2) - }) - AnimationList4_4.add(Anima4_4_1).add(Anima4_4_2) - }, 2500) - } - - function Stop4_4() { - clearInterval(Line4_4) - AnimationList4_4.forEach((item) => { - item.pause() - }) - } - - function Remove4_4() { - clearInterval(Line4_4) - AnimationList4_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - switch (LineID) { - case "Line_1": - onGlassObservable.add((eventData, eventState) => { - console.log('line1') - const ThisGlassStatus = eventData as GlassStatus; - switch (ThisGlassStatus.LINE_1_1) { - case 0: - Stop1_1(); - break; - case 1: - Begin1_1(); - break; - case 2: - Remove1_1() - break; - } - switch (ThisGlassStatus.LINE_1_2U) { - case 0: - Stop1_2U(); - break; - case 1: - Begin1_2U(); - break; - case 2: - Remove1_2U() - break; - } - switch (ThisGlassStatus.LINE_1_2D) { - case 0: - Stop1_2D(); - break; - case 1: - Begin1_2D(); - break; - case 2: - Remove1_2D() - break; - } - switch (ThisGlassStatus.LINE_1_3) { - case 0: - Stop1_3(); - break; - case 1: - Begin1_3(); - break; - case 2: - Remove1_3() - break; - } - switch (ThisGlassStatus.LINE_1_4) { - case 0: - Stop1_4(); - break; - case 1: - Begin1_4(); - break; - case 2: - Remove1_4(); - break; - } - }) - break - case "Line_2": - onGlassObservable.add((eventData, eventState) => { - console.log('line2') - const ThisGlassStatus = eventData as GlassStatus; - switch (ThisGlassStatus.LINE_2_1) { - case 0: - Stop2_1(); - break; - case 1: - Begin2_1(); - break; - case 2: - Remove2_1(); - break; - } - switch (ThisGlassStatus.LINE_2_2U) { - case 0: - Stop2_2U(); - break; - case 1: - Begin2_2U(); - break; - case 2: - Remove2_2U(); - break; - } - switch (ThisGlassStatus.LINE_2_2D) { - case 0: - Stop2_2D(); - break; - case 1: - Begin2_2D(); - break; - case 2: - Remove2_2D(); - break; - } - switch (ThisGlassStatus.LINE_2_3) { - case 0: - Stop2_3(); - break; - case 1: - Begin2_3(); - break; - case 2: - Remove2_3(); - break; - } - switch (ThisGlassStatus.LINE_2_4) { - case 0: - Stop2_4(); - break; - case 1: - Begin2_4(); - break; - case 2: - Remove2_4(); - break; - } - }) - break - case "Line_3": - onGlassObservable.add((eventData, eventState) => { - console.log('line3') - const ThisGlassStatus = eventData as GlassStatus; - switch (ThisGlassStatus.LINE_3_1) { - case 0: - Stop3_1(); - break; - case 1: - Begin3_1(); - break; - case 2: - Remove3_1(); - break; - } - switch (ThisGlassStatus.LINE_3_2U) { - case 0: - Stop3_2U(); - break; - case 1: - Begin3_2U(); - break; - case 2: - Remove3_2U(); - break; - } - switch (ThisGlassStatus.LINE_3_2D) { - case 0: - Stop3_2D(); - break; - case 1: - Begin3_2D(); - break; - case 2: - Remove3_2D(); - break; - } - switch (ThisGlassStatus.LINE_3_3) { - case 0: - Stop3_3(); - break; - case 1: - Begin3_3(); - break; - case 2: - Remove3_3(); - break; - } - switch (ThisGlassStatus.LINE_3_4) { - case 0: - Stop3_4(); - break; - case 1: - Begin3_4(); - break; - case 2: - Remove3_4(); - break; - } - }) - break - case "Line_4": - onGlassObservable.add((eventData, eventState) => { - console.log('line4') - const ThisGlassStatus = eventData as GlassStatus; - switch (ThisGlassStatus.LINE_4_1) { - case 0: - Stop4_1(); - break; - case 1: - Begin4_1(); - break; - case 2: - Remove4_1(); - break; - } - switch (ThisGlassStatus.LINE_4_2U) { - case 0: - Stop4_2U(); - break; - case 1: - Begin4_2U(); - break; - case 2: - Remove4_2U(); - break; - } - switch (ThisGlassStatus.LINE_4_2D) { - case 0: - Stop4_2D(); - break; - case 1: - Begin4_2D(); - break; - case 2: - Remove4_2D(); - break; - } - switch (ThisGlassStatus.LINE_4_3) { - case 0: - Stop4_3(); - break; - case 1: - Begin4_3(); - break; - case 2: - Remove4_3(); - break; - } - switch (ThisGlassStatus.LINE_4_4) { - case 0: - Stop4_4(); - break; - case 1: - Begin4_4(); - break; - case 2: - Remove4_4(); - break; - } - }) - break - } - }) - - // run the render loop - scene.then((scene) => { - engine.runRenderLoop(function () { - scene.render() - }); - }, - (reason) => { - console.log(reason); - } - ); - - // Resize - window.addEventListener("resize", function () { - engine.resize(); - }); - }, - [] - ) - const handleClick1 = () => { - onCamObservable.notifyObservers(1) - } - const handleClick2 = () => { - onCamObservable.notifyObservers(2) - } - const handleClick3 = () => { - onCamObservable.notifyObservers(3) - } - const handleClick4 = () => { - onCamObservable.notifyObservers(4) - } - - return ( -
- - - - - - - -
- ); -} - -export default LineBabylon; \ No newline at end of file diff --git a/src/babylonjs/LinePageBabylon.tsx b/src/babylonjs/LinePageBabylon.tsx index 16767a9..8c96a1d 100644 --- a/src/babylonjs/LinePageBabylon.tsx +++ b/src/babylonjs/LinePageBabylon.tsx @@ -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) {
- 第五产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"} + 第{lineNameNo[Number(modelPath.slice(-3,-2))-1]}产线钢化{modelPath.slice(-1) === "1" ? "前段" : "后段"}
{selectedMeshName && ( diff --git a/src/babylonjs/MybabylonJS_1.tsx b/src/babylonjs/MybabylonJS_1.tsx deleted file mode 100644 index ed6e689..0000000 --- a/src/babylonjs/MybabylonJS_1.tsx +++ /dev/null @@ -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(null); - - - interface MybabylonJSProps { - modelPath: string; - } - - // 使用 useRef 来存储当前加载的模型引用 - const currentMeshesRef = useRef>([]); - - - - - 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 ( -
- - -

当前选择: {SelectedMeshName}

- - - - - - -
- ); -} - -export default MybabylonJS; \ No newline at end of file diff --git a/src/babylonjs/MybabylonJS_2.tsx b/src/babylonjs/MybabylonJS_2.tsx deleted file mode 100644 index 006ab6c..0000000 --- a/src/babylonjs/MybabylonJS_2.tsx +++ /dev/null @@ -1,1389 +0,0 @@ -import React, { useEffect, useRef, useState, useContext } 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) - }, -} - -function MybabylonJS() { - 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(null); - - - - - useEffect( - () => { - 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); - - - - const LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', 'line1.babylon', scene); - const LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', 'line1_middle.babylon', scene); - const LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', 'line1_far.babylon', scene) - - - - - - LOD2MESH.meshes.map((mesh) => { - mesh.isPickable = true; - }) - LOD1MESH.meshes.map((mesh) => { - - mesh.isPickable = true; - }) - LOD0MESH.meshes.map((mesh) => { - mesh.isPickable = true; - mesh.actionManager = new BABYLON.ActionManager(scene); - LOD1MESH.meshes.find((lowMesh) => { - if (mesh.name === lowMesh.name) { - // @ts-ignore - mesh.addLODLevel(30, lowMesh); - } - }) - LOD2MESH.meshes.find((low2Mesh) => { - - if (mesh.name === low2Mesh.name) { - // @ts-ignore - mesh.addLODLevel(100, low2Mesh); - } - }) - - //鼠标移动到物体上亮显 - mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, () => { - // @ts-ignore - hl.addMesh(mesh, BABYLON.Color3.Green()); - // @ts-ignore - hl.addMesh(mesh.getLODLevelAtDistance(30), BABYLON.Color3.Green()); - // @ts-ignore - hl.addMesh(mesh.getLODLevelAtDistance(100), BABYLON.Color3.Green()); - })); - mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, () => { - // @ts-ignore - hl.removeMesh(mesh) - // @ts-ignore - hl.removeMesh(mesh.getLODLevelAtDistance(30)); - // @ts-ignore - hl.removeMesh(mesh.getLODLevelAtDistance(100)); - })); - - // mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, - // () => { - // hl.addMesh(mesh, BABYLON.Color3.Green()); - // } - // )); - 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 - - setSelectedMeshName(pickInfo.pickedMesh.name) - - console.log('模型：', { SelectedMeshName }, '位置：', clickedPosition) - } - - - }) - - - - - - ///////////////////////////////////////////////////////////////////////////////////////////////// - onEquObservable.add((eventData, eventState) => { - LOD0MESH.meshes.find((mesh) => { - // @ts-ignore - hl2.removeMesh(mesh); - // @ts-ignore - hl2.removeMesh(mesh.getLODLevelAtDistance(30)); - // @ts-ignore - hl2.removeMesh(mesh.getLODLevelAtDistance(100)); - }) - 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()); - // @ts-ignore - hl2.addMesh(mesh.getLODLevelAtDistance(30), BABYLON.Color3.Red()); - // @ts-ignore - hl2.addMesh(mesh.getLODLevelAtDistance(100), BABYLON.Color3.Red()); - } - }) - }) - } - }) - }) - - - ///////////////////////////////////////////////////////////////////////////////////////////////// - - 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) => { - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_1 - let Line1_1: NodeJS.Timer; - let AnimationList1_1 = new Set() - - function Begin1_1() { - clearInterval(Line1_1); - AnimationList1_1.forEach((item) => { - item.restart() - }) - Line1_1 = setInterval(() => { - const { glass1_1_1, glass1_1_2, } = GlassAnimation1_1(scene); - let Anima1_1_1: Animatable, Anima1_1_2: Animatable; - - Anima1_1_1 = scene.beginAnimation(glass1_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_1_1); - glass1_1_1.dispose(); - AnimationList1_1.delete(Anima1_1_1) - }) - Anima1_1_2 = scene.beginAnimation(glass1_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_1_2); - glass1_1_2.dispose(); - AnimationList1_1.delete(Anima1_1_2) - }) - AnimationList1_1.add(Anima1_1_1).add(Anima1_1_2) - }, 2500) - } - - function Stop1_1() { - clearInterval(Line1_1) - AnimationList1_1.forEach((item) => { - item.pause() - }) - } - - function Remove1_1() { - clearInterval(Line1_1) - AnimationList1_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_2U - let Line1_2U: NodeJS.Timer; - let AnimationList1_2U = new Set() - - function Begin1_2U() { - clearInterval(Line1_2U); - AnimationList1_2U.forEach((item) => { - item.restart() - }) - Line1_2U = setInterval(() => { - const { glass1_2_1 } = GlassAnimation1_2U(scene); - let Anima1_2U: Animatable; - - Anima1_2U = scene.beginAnimation(glass1_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_2_1); - glass1_2_1.dispose(); - AnimationList1_2U.delete(Anima1_2U) - }) - - AnimationList1_2U.add(Anima1_2U) - }, 2500) - } - - function Stop1_2U() { - clearInterval(Line1_2U) - AnimationList1_2U.forEach((item) => { - item.pause() - }) - } - - function Remove1_2U() { - clearInterval(Line1_2U) - AnimationList1_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_2D - let Line1_2D: NodeJS.Timer; - let AnimationList1_2D = new Set() - - function Begin1_2D() { - clearInterval(Line1_2D); - AnimationList1_2D.forEach((item) => { - item.restart() - }) - Line1_2D = setInterval(() => { - const { glass1_2_2 } = GlassAnimation1_2D(scene); - let Anima1_2D: Animatable; - - Anima1_2D = scene.beginAnimation(glass1_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_2_2); - glass1_2_2.dispose(); - AnimationList1_2D.delete(Anima1_2D) - }) - - AnimationList1_2D.add(Anima1_2D) - }, 2500) - } - - function Stop1_2D() { - clearInterval(Line1_2D) - AnimationList1_2D.forEach((item) => { - item.pause() - }) - } - - function Remove1_2D() { - clearInterval(Line1_2D) - AnimationList1_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_3 - let Line1_3: NodeJS.Timer; - let AnimationList1_3 = new Set() - - function Begin1_3() { - clearInterval(Line1_3); - AnimationList1_3.forEach((item) => { - item.restart() - }) - Line1_3 = setInterval(() => { - const { glass1_3_1, glass1_3_2 } = GlassAnimation1_3(scene); - let Anima1_3_1: Animatable, Anima1_3_2: Animatable; - - Anima1_3_1 = scene.beginAnimation(glass1_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_3_1); - glass1_3_1.dispose(); - AnimationList1_3.delete(Anima1_3_1) - }) - Anima1_3_2 = scene.beginAnimation(glass1_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_3_2); - glass1_3_2.dispose(); - AnimationList1_3.delete(Anima1_3_2) - }) - AnimationList1_3.add(Anima1_3_1).add(Anima1_3_2) - }, 2500) - } - - function Stop1_3() { - clearInterval(Line1_3) - AnimationList1_3.forEach((item) => { - item.pause() - }) - } - - function Remove1_3() { - clearInterval(Line1_3) - AnimationList1_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_4 - let Line1_4: NodeJS.Timer; - let AnimationList1_4 = new Set() - - function Begin1_4() { - clearInterval(Line1_4); - AnimationList1_4.forEach((item) => { - item.restart() - }) - Line1_4 = setInterval(() => { - const { glass1_4_1, glass1_4_2 } = GlassAnimation1_4(scene); - let Anima1_4_1: Animatable, Anima1_4_2: Animatable; - - Anima1_4_1 = scene.beginAnimation(glass1_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_4_1); - glass1_4_1.dispose(); - AnimationList1_4.delete(Anima1_4_1) - }) - Anima1_4_2 = scene.beginAnimation(glass1_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_4_2); - glass1_4_2.dispose(); - AnimationList1_4.delete(Anima1_4_2) - }) - AnimationList1_4.add(Anima1_4_1).add(Anima1_4_2) - }, 2500) - } - - function Stop1_4() { - clearInterval(Line1_4) - AnimationList1_4.forEach((item) => { - item.pause() - }) - } - - function Remove1_4() { - clearInterval(Line1_4) - AnimationList1_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_1 - let Line2_1: NodeJS.Timer; - let AnimationList2_1 = new Set() - - function Begin2_1() { - clearInterval(Line2_1); - AnimationList2_1.forEach((item) => { - item.restart() - }) - Line2_1 = setInterval(() => { - const { glass2_1_1, glass2_1_2 } = GlassAnimation2_1(scene); - let Anima2_1_1: Animatable, Anima2_1_2: Animatable; - - Anima2_1_1 = scene.beginAnimation(glass2_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_1_1); - glass2_1_1.dispose(); - AnimationList2_1.delete(Anima2_1_1) - }) - Anima2_1_2 = scene.beginAnimation(glass2_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_1_2); - glass2_1_2.dispose(); - AnimationList2_1.delete(Anima2_1_2) - }) - AnimationList2_1.add(Anima2_1_1).add(Anima2_1_2) - }, 2500) - } - - function Stop2_1() { - clearInterval(Line2_1) - AnimationList2_1.forEach((item) => { - item.pause() - }) - } - - function Remove2_1() { - clearInterval(Line2_1) - AnimationList2_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_2U - let Line2_2U: NodeJS.Timer; - let AnimationList2_2U = new Set() - - function Begin2_2U() { - clearInterval(Line2_2U); - AnimationList2_2U.forEach((item) => { - item.restart() - }) - Line2_2U = setInterval(() => { - const { glass2_2_1 } = GlassAnimation2_2U(scene); - let Anima2_2U: Animatable; - - Anima2_2U = scene.beginAnimation(glass2_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_2_1); - glass2_2_1.dispose(); - AnimationList2_2U.delete(Anima2_2U) - }) - - AnimationList2_2U.add(Anima2_2U) - }, 2500) - } - - function Stop2_2U() { - clearInterval(Line2_2U) - AnimationList2_2U.forEach((item) => { - item.pause() - }) - } - - function Remove2_2U() { - clearInterval(Line2_2U) - AnimationList2_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_2D - let Line2_2D: NodeJS.Timer; - let AnimationList2_2D = new Set() - - function Begin2_2D() { - clearInterval(Line2_2D); - AnimationList2_2D.forEach((item) => { - item.restart() - }) - Line2_2D = setInterval(() => { - const { glass2_2_2 } = GlassAnimation2_2D(scene); - let Anima2_2D: Animatable; - - Anima2_2D = scene.beginAnimation(glass2_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_2_2); - glass2_2_2.dispose(); - AnimationList2_2D.delete(Anima2_2D) - }) - - AnimationList2_2D.add(Anima2_2D) - }, 2500) - } - - function Stop2_2D() { - clearInterval(Line2_2D) - AnimationList2_2D.forEach((item) => { - item.pause() - }) - } - - function Remove2_2D() { - clearInterval(Line2_2D) - AnimationList2_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_3 - let Line2_3: NodeJS.Timer; - let AnimationList2_3 = new Set() - - function Begin2_3() { - clearInterval(Line2_3); - AnimationList2_3.forEach((item) => { - item.restart() - }) - Line2_3 = setInterval(() => { - const { glass2_3_1, glass2_3_2 } = GlassAnimation2_3(scene); - let Anima2_3_1: Animatable, Anima2_3_2: Animatable; - - Anima2_3_1 = scene.beginAnimation(glass2_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_3_1); - glass2_3_1.dispose(); - AnimationList2_3.delete(Anima2_3_1) - }) - Anima2_3_2 = scene.beginAnimation(glass2_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_3_2); - glass2_3_2.dispose(); - AnimationList2_3.delete(Anima2_3_2) - }) - AnimationList2_3.add(Anima2_3_1).add(Anima2_3_2) - }, 2500) - } - - function Stop2_3() { - clearInterval(Line2_3) - AnimationList2_3.forEach((item) => { - item.pause() - }) - } - - function Remove2_3() { - clearInterval(Line2_3) - AnimationList2_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_4 - let Line2_4: NodeJS.Timer; - let AnimationList2_4 = new Set() - - function Begin2_4() { - clearInterval(Line2_4); - AnimationList2_4.forEach((item) => { - item.restart() - }) - Line2_4 = setInterval(() => { - const { glass2_4_1, glass2_4_2 } = GlassAnimation2_4(scene); - let Anima2_4_1: Animatable, Anima2_4_2: Animatable; - - Anima2_4_1 = scene.beginAnimation(glass2_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_4_1); - glass2_4_1.dispose(); - AnimationList2_4.delete(Anima2_4_1) - }) - Anima2_4_2 = scene.beginAnimation(glass2_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_4_2); - glass2_4_2.dispose(); - AnimationList2_4.delete(Anima2_4_2) - }) - AnimationList2_4.add(Anima2_4_1).add(Anima2_4_2) - }, 2500) - } - - function Stop2_4() { - clearInterval(Line2_4) - AnimationList2_4.forEach((item) => { - item.pause() - }) - } - - function Remove2_4() { - clearInterval(Line2_4) - AnimationList2_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_1 - let Line3_1: NodeJS.Timer; - let AnimationList3_1 = new Set() - - function Begin3_1() { - clearInterval(Line3_1); - AnimationList3_1.forEach((item) => { - item.restart() - }) - Line3_1 = setInterval(() => { - const { glass3_1_1, glass3_1_2 } = GlassAnimation3_1(scene); - let Anima3_1_1: Animatable, Anima3_1_2: Animatable; - - Anima3_1_1 = scene.beginAnimation(glass3_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_1_1); - glass3_1_1.dispose(); - AnimationList3_1.delete(Anima3_1_1) - }) - Anima3_1_2 = scene.beginAnimation(glass3_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_1_2); - glass3_1_2.dispose(); - AnimationList3_1.delete(Anima3_1_2) - }) - AnimationList3_1.add(Anima3_1_1).add(Anima3_1_2) - }, 2500) - } - - function Stop3_1() { - clearInterval(Line3_1) - AnimationList3_1.forEach((item) => { - item.pause() - }) - } - - function Remove3_1() { - clearInterval(Line3_1) - AnimationList3_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_2U - let Line3_2U: NodeJS.Timer; - let AnimationList3_2U = new Set() - - function Begin3_2U() { - clearInterval(Line3_2U); - AnimationList3_2U.forEach((item) => { - item.restart() - }) - Line3_2U = setInterval(() => { - const { glass3_2_2 } = GlassAnimation3_2U(scene); - let Anima3_2U: Animatable; - - Anima3_2U = scene.beginAnimation(glass3_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_2_2); - glass3_2_2.dispose(); - AnimationList3_2U.delete(Anima3_2U) - }) - - AnimationList3_2U.add(Anima3_2U) - }, 2500) - } - - function Stop3_2U() { - clearInterval(Line3_2U) - AnimationList3_2U.forEach((item) => { - item.pause() - }) - } - - function Remove3_2U() { - clearInterval(Line3_2U) - AnimationList3_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_2D - let Line3_2D: NodeJS.Timer; - let AnimationList3_2D = new Set() - - function Begin3_2D() { - clearInterval(Line3_2D); - AnimationList3_2D.forEach((item) => { - item.restart() - }) - Line3_2D = setInterval(() => { - const { glass3_2_1 } = GlassAnimation3_2D(scene); - let Anima3_2D: Animatable; - - Anima3_2D = scene.beginAnimation(glass3_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_2_1); - glass3_2_1.dispose(); - AnimationList3_2D.delete(Anima3_2D) - }) - - AnimationList3_2D.add(Anima3_2D) - }, 2500) - } - - function Stop3_2D() { - clearInterval(Line3_2D) - AnimationList3_2D.forEach((item) => { - item.pause() - }) - } - - function Remove3_2D() { - clearInterval(Line3_2D) - AnimationList3_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_3 - let Line3_3: NodeJS.Timer; - let AnimationList3_3 = new Set() - - function Begin3_3() { - clearInterval(Line3_3); - AnimationList3_3.forEach((item) => { - item.restart() - }) - Line3_3 = setInterval(() => { - const { glass3_3_1, glass3_3_2 } = GlassAnimation3_3(scene); - let Anima3_3_1: Animatable, Anima3_3_2: Animatable; - - Anima3_3_1 = scene.beginAnimation(glass3_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_3_1); - glass3_3_1.dispose(); - AnimationList3_3.delete(Anima3_3_1) - }) - Anima3_3_2 = scene.beginAnimation(glass3_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_3_2); - glass3_3_2.dispose(); - AnimationList3_3.delete(Anima3_3_2) - }) - AnimationList3_3.add(Anima3_3_1).add(Anima3_3_2) - }, 2500) - } - - function Stop3_3() { - clearInterval(Line3_3) - AnimationList3_3.forEach((item) => { - item.pause() - }) - } - - function Remove3_3() { - clearInterval(Line3_3) - AnimationList3_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_4 - let Line3_4: NodeJS.Timer; - let AnimationList3_4 = new Set() - - function Begin3_4() { - clearInterval(Line3_4); - AnimationList3_4.forEach((item) => { - item.restart() - }) - Line3_4 = setInterval(() => { - const { glass3_4_1, glass3_4_2 } = GlassAnimation3_4(scene); - let Anima3_4_1: Animatable, Anima3_4_2: Animatable; - - Anima3_4_1 = scene.beginAnimation(glass3_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_4_1); - glass3_4_1.dispose(); - AnimationList3_4.delete(Anima3_4_1) - }) - Anima3_4_2 = scene.beginAnimation(glass3_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_4_2); - glass3_4_2.dispose(); - AnimationList3_4.delete(Anima3_4_2) - }) - AnimationList3_4.add(Anima3_4_1).add(Anima3_4_2) - }, 2500) - } - - function Stop3_4() { - clearInterval(Line3_4) - AnimationList3_4.forEach((item) => { - item.pause() - }) - } - - function Remove3_4() { - clearInterval(Line3_4) - AnimationList3_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_1 - let Line4_1: NodeJS.Timer; - let AnimationList4_1 = new Set() - - function Begin4_1() { - clearInterval(Line4_1); - AnimationList4_1.forEach((item) => { - item.restart() - }) - Line4_1 = setInterval(() => { - const { glass4_1_1, glass4_1_2 } = GlassAnimation4_1(scene); - let Anima4_1_1: Animatable, Anima4_1_2: Animatable; - - Anima4_1_1 = scene.beginAnimation(glass4_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_1_1); - glass4_1_1.dispose(); - AnimationList4_1.delete(Anima4_1_1) - }) - Anima4_1_2 = scene.beginAnimation(glass4_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_1_2); - glass4_1_2.dispose(); - AnimationList4_1.delete(Anima4_1_2) - }) - AnimationList4_1.add(Anima4_1_1).add(Anima4_1_2) - }, 2500) - } - - function Stop4_1() { - clearInterval(Line4_1) - AnimationList4_1.forEach((item) => { - item.pause() - }) - } - - function Remove4_1() { - clearInterval(Line4_1) - AnimationList4_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_2U - let Line4_2U: NodeJS.Timer; - let AnimationList4_2U = new Set() - - function Begin4_2U() { - clearInterval(Line4_2U); - AnimationList4_2U.forEach((item) => { - item.restart() - }) - Line4_2U = setInterval(() => { - const { glass4_2_2 } = GlassAnimation4_2U(scene); - let Anima4_2U: Animatable; - - Anima4_2U = scene.beginAnimation(glass4_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_2_2); - glass4_2_2.dispose(); - AnimationList4_2U.delete(Anima4_2U) - }) - - AnimationList4_2U.add(Anima4_2U) - }, 2500) - } - - function Stop4_2U() { - clearInterval(Line4_2U) - AnimationList4_2U.forEach((item) => { - item.pause() - }) - } - - function Remove4_2U() { - clearInterval(Line4_2U) - AnimationList4_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_2D - let Line4_2D: NodeJS.Timer; - let AnimationList4_2D = new Set() - - function Begin4_2D() { - clearInterval(Line4_2D); - AnimationList4_2D.forEach((item) => { - item.restart() - }) - Line4_2D = setInterval(() => { - const { glass4_2_1 } = GlassAnimation4_2D(scene); - let Anima4_2D: Animatable; - - Anima4_2D = scene.beginAnimation(glass4_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_2_1); - glass4_2_1.dispose(); - AnimationList4_2D.delete(Anima4_2D) - }) - - AnimationList4_2D.add(Anima4_2D) - }, 2500) - } - - function Stop4_2D() { - clearInterval(Line4_2D) - AnimationList4_2D.forEach((item) => { - item.pause() - }) - } - - function Remove4_2D() { - clearInterval(Line4_2D) - AnimationList4_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_3 - let Line4_3: NodeJS.Timer; - let AnimationList4_3 = new Set() - - function Begin4_3() { - clearInterval(Line4_3); - AnimationList4_3.forEach((item) => { - item.restart() - }) - Line4_3 = setInterval(() => { - const { glass4_3_1, glass4_3_2 } = GlassAnimation4_3(scene); - let Anima4_3_1: Animatable, Anima4_3_2: Animatable; - - Anima4_3_1 = scene.beginAnimation(glass4_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_3_1); - glass4_3_1.dispose(); - AnimationList4_3.delete(Anima4_3_1) - }) - Anima4_3_2 = scene.beginAnimation(glass4_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_3_2); - glass4_3_2.dispose(); - AnimationList4_3.delete(Anima4_3_2) - }) - AnimationList4_3.add(Anima4_3_1).add(Anima4_3_2) - }, 2500) - } - - function Stop4_3() { - clearInterval(Line4_3) - AnimationList4_3.forEach((item) => { - item.pause() - }) - } - - function Remove4_3() { - clearInterval(Line4_3) - AnimationList4_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_4 - let Line4_4: NodeJS.Timer; - let AnimationList4_4 = new Set() - - function Begin4_4() { - clearInterval(Line4_4); - AnimationList4_4.forEach((item) => { - item.restart() - }) - Line4_4 = setInterval(() => { - const { glass4_4_1, glass4_4_2 } = GlassAnimation4_4(scene); - let Anima4_4_1: Animatable, Anima4_4_2: Animatable; - - Anima4_4_1 = scene.beginAnimation(glass4_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_4_1); - glass4_4_1.dispose(); - AnimationList4_4.delete(Anima4_4_1) - }) - Anima4_4_2 = scene.beginAnimation(glass4_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_4_2); - glass4_4_2.dispose(); - AnimationList4_4.delete(Anima4_4_2) - }) - AnimationList4_4.add(Anima4_4_1).add(Anima4_4_2) - }, 2500) - } - - function Stop4_4() { - clearInterval(Line4_4) - AnimationList4_4.forEach((item) => { - item.pause() - }) - } - - function Remove4_4() { - clearInterval(Line4_4) - AnimationList4_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - onGlassObservable.add((eventData, eventState) => { - console.log('all') - const ThisGlassStatus = eventData as GlassStatus; - switch (ThisGlassStatus.LINE_1_1) { - case 0: - Stop1_1(); - break; - case 1: - Begin1_1(); - break; - case 2: - Remove1_1() - break; - } - switch (ThisGlassStatus.LINE_1_2U) { - case 0: - Stop1_2U(); - break; - case 1: - Begin1_2U(); - break; - case 2: - Remove1_2U() - break; - } - switch (ThisGlassStatus.LINE_1_2D) { - case 0: - Stop1_2D(); - break; - case 1: - Begin1_2D(); - break; - case 2: - Remove1_2D() - break; - } - switch (ThisGlassStatus.LINE_1_3) { - case 0: - Stop1_3(); - break; - case 1: - Begin1_3(); - break; - case 2: - Remove1_3() - break; - } - switch (ThisGlassStatus.LINE_1_4) { - case 0: - Stop1_4(); - break; - case 1: - Begin1_4(); - break; - case 2: - Remove1_4(); - break; - } - switch (ThisGlassStatus.LINE_2_1) { - case 0: - Stop2_1(); - break; - case 1: - Begin2_1(); - break; - case 2: - Remove2_1(); - break; - } - switch (ThisGlassStatus.LINE_2_2U) { - case 0: - Stop2_2U(); - break; - case 1: - Begin2_2U(); - break; - case 2: - Remove2_2U(); - break; - } - switch (ThisGlassStatus.LINE_2_2D) { - case 0: - Stop2_2D(); - break; - case 1: - Begin2_2D(); - break; - case 2: - Remove2_2D(); - break; - } - switch (ThisGlassStatus.LINE_2_3) { - case 0: - Stop2_3(); - break; - case 1: - Begin2_3(); - break; - case 2: - Remove2_3(); - break; - } - switch (ThisGlassStatus.LINE_2_4) { - case 0: - Stop2_4(); - break; - case 1: - Begin2_4(); - break; - case 2: - Remove2_4(); - break; - } - switch (ThisGlassStatus.LINE_3_1) { - case 0: - Stop3_1(); - break; - case 1: - Begin3_1(); - break; - case 2: - Remove3_1(); - break; - } - switch (ThisGlassStatus.LINE_3_2U) { - case 0: - Stop3_2U(); - break; - case 1: - Begin3_2U(); - break; - case 2: - Remove3_2U(); - break; - } - switch (ThisGlassStatus.LINE_3_2D) { - case 0: - Stop3_2D(); - break; - case 1: - Begin3_2D(); - break; - case 2: - Remove3_2D(); - break; - } - switch (ThisGlassStatus.LINE_3_3) { - case 0: - Stop3_3(); - break; - case 1: - Begin3_3(); - break; - case 2: - Remove3_3(); - break; - } - switch (ThisGlassStatus.LINE_3_4) { - case 0: - Stop3_4(); - break; - case 1: - Begin3_4(); - break; - case 2: - Remove3_4(); - break; - } - switch (ThisGlassStatus.LINE_4_1) { - case 0: - Stop4_1(); - break; - case 1: - Begin4_1(); - break; - case 2: - Remove4_1(); - break; - } - switch (ThisGlassStatus.LINE_4_2U) { - case 0: - Stop4_2U(); - break; - case 1: - Begin4_2U(); - break; - case 2: - Remove4_2U(); - break; - } - switch (ThisGlassStatus.LINE_4_2D) { - case 0: - Stop4_2D(); - break; - case 1: - Begin4_2D(); - break; - case 2: - Remove4_2D(); - break; - } - switch (ThisGlassStatus.LINE_4_3) { - case 0: - Stop4_3(); - break; - case 1: - Begin4_3(); - break; - case 2: - Remove4_3(); - break; - } - switch (ThisGlassStatus.LINE_4_4) { - case 0: - Stop4_4(); - break; - case 1: - Begin4_4(); - break; - case 2: - Remove4_4(); - break; - } - }) - ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - }) - - // run the render loop - scene.then((scene) => { - engine.runRenderLoop(function () { - scene.render() - }); - }, - (reason) => { - console.log(reason); - } - ); - - // Resize - window.addEventListener("resize", function () { - engine.resize(); - }); - }, - [] - ); - - - const handleClick1 = () => { - onMainCamObservable.notifyObservers(1) - } - const handleClick2 = () => { - onMainCamObservable.notifyObservers(2) - } - const handleClick3 = () => { - onMainCamObservable.notifyObservers(3) - } - const handleClick4 = () => { - onMainCamObservable.notifyObservers(4) - } - - - return ( -
- - -

当前选择: {SelectedMeshName}

- - - - - - -
- ); -} - -export default MybabylonJS; \ No newline at end of file diff --git a/src/babylonjs/MybabylonJS_backup.tsx b/src/babylonjs/MybabylonJS_backup.tsx deleted file mode 100644 index 006ab6c..0000000 --- a/src/babylonjs/MybabylonJS_backup.tsx +++ /dev/null @@ -1,1389 +0,0 @@ -import React, { useEffect, useRef, useState, useContext } 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) - }, -} - -function MybabylonJS() { - 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(null); - - - - - useEffect( - () => { - 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); - - - - const LOD0MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', 'line1.babylon', scene); - const LOD1MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', 'line1_middle.babylon', scene); - const LOD2MESH = await BABYLON.SceneLoader.ImportMeshAsync('', '/test/', 'line1_far.babylon', scene) - - - - - - LOD2MESH.meshes.map((mesh) => { - mesh.isPickable = true; - }) - LOD1MESH.meshes.map((mesh) => { - - mesh.isPickable = true; - }) - LOD0MESH.meshes.map((mesh) => { - mesh.isPickable = true; - mesh.actionManager = new BABYLON.ActionManager(scene); - LOD1MESH.meshes.find((lowMesh) => { - if (mesh.name === lowMesh.name) { - // @ts-ignore - mesh.addLODLevel(30, lowMesh); - } - }) - LOD2MESH.meshes.find((low2Mesh) => { - - if (mesh.name === low2Mesh.name) { - // @ts-ignore - mesh.addLODLevel(100, low2Mesh); - } - }) - - //鼠标移动到物体上亮显 - mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOverTrigger, () => { - // @ts-ignore - hl.addMesh(mesh, BABYLON.Color3.Green()); - // @ts-ignore - hl.addMesh(mesh.getLODLevelAtDistance(30), BABYLON.Color3.Green()); - // @ts-ignore - hl.addMesh(mesh.getLODLevelAtDistance(100), BABYLON.Color3.Green()); - })); - mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPointerOutTrigger, () => { - // @ts-ignore - hl.removeMesh(mesh) - // @ts-ignore - hl.removeMesh(mesh.getLODLevelAtDistance(30)); - // @ts-ignore - hl.removeMesh(mesh.getLODLevelAtDistance(100)); - })); - - // mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(BABYLON.ActionManager.OnPickTrigger, - // () => { - // hl.addMesh(mesh, BABYLON.Color3.Green()); - // } - // )); - 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 - - setSelectedMeshName(pickInfo.pickedMesh.name) - - console.log('模型：', { SelectedMeshName }, '位置：', clickedPosition) - } - - - }) - - - - - - ///////////////////////////////////////////////////////////////////////////////////////////////// - onEquObservable.add((eventData, eventState) => { - LOD0MESH.meshes.find((mesh) => { - // @ts-ignore - hl2.removeMesh(mesh); - // @ts-ignore - hl2.removeMesh(mesh.getLODLevelAtDistance(30)); - // @ts-ignore - hl2.removeMesh(mesh.getLODLevelAtDistance(100)); - }) - 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()); - // @ts-ignore - hl2.addMesh(mesh.getLODLevelAtDistance(30), BABYLON.Color3.Red()); - // @ts-ignore - hl2.addMesh(mesh.getLODLevelAtDistance(100), BABYLON.Color3.Red()); - } - }) - }) - } - }) - }) - - - ///////////////////////////////////////////////////////////////////////////////////////////////// - - 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) => { - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_1 - let Line1_1: NodeJS.Timer; - let AnimationList1_1 = new Set() - - function Begin1_1() { - clearInterval(Line1_1); - AnimationList1_1.forEach((item) => { - item.restart() - }) - Line1_1 = setInterval(() => { - const { glass1_1_1, glass1_1_2, } = GlassAnimation1_1(scene); - let Anima1_1_1: Animatable, Anima1_1_2: Animatable; - - Anima1_1_1 = scene.beginAnimation(glass1_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_1_1); - glass1_1_1.dispose(); - AnimationList1_1.delete(Anima1_1_1) - }) - Anima1_1_2 = scene.beginAnimation(glass1_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_1_2); - glass1_1_2.dispose(); - AnimationList1_1.delete(Anima1_1_2) - }) - AnimationList1_1.add(Anima1_1_1).add(Anima1_1_2) - }, 2500) - } - - function Stop1_1() { - clearInterval(Line1_1) - AnimationList1_1.forEach((item) => { - item.pause() - }) - } - - function Remove1_1() { - clearInterval(Line1_1) - AnimationList1_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_2U - let Line1_2U: NodeJS.Timer; - let AnimationList1_2U = new Set() - - function Begin1_2U() { - clearInterval(Line1_2U); - AnimationList1_2U.forEach((item) => { - item.restart() - }) - Line1_2U = setInterval(() => { - const { glass1_2_1 } = GlassAnimation1_2U(scene); - let Anima1_2U: Animatable; - - Anima1_2U = scene.beginAnimation(glass1_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_2_1); - glass1_2_1.dispose(); - AnimationList1_2U.delete(Anima1_2U) - }) - - AnimationList1_2U.add(Anima1_2U) - }, 2500) - } - - function Stop1_2U() { - clearInterval(Line1_2U) - AnimationList1_2U.forEach((item) => { - item.pause() - }) - } - - function Remove1_2U() { - clearInterval(Line1_2U) - AnimationList1_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_2D - let Line1_2D: NodeJS.Timer; - let AnimationList1_2D = new Set() - - function Begin1_2D() { - clearInterval(Line1_2D); - AnimationList1_2D.forEach((item) => { - item.restart() - }) - Line1_2D = setInterval(() => { - const { glass1_2_2 } = GlassAnimation1_2D(scene); - let Anima1_2D: Animatable; - - Anima1_2D = scene.beginAnimation(glass1_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_2_2); - glass1_2_2.dispose(); - AnimationList1_2D.delete(Anima1_2D) - }) - - AnimationList1_2D.add(Anima1_2D) - }, 2500) - } - - function Stop1_2D() { - clearInterval(Line1_2D) - AnimationList1_2D.forEach((item) => { - item.pause() - }) - } - - function Remove1_2D() { - clearInterval(Line1_2D) - AnimationList1_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_3 - let Line1_3: NodeJS.Timer; - let AnimationList1_3 = new Set() - - function Begin1_3() { - clearInterval(Line1_3); - AnimationList1_3.forEach((item) => { - item.restart() - }) - Line1_3 = setInterval(() => { - const { glass1_3_1, glass1_3_2 } = GlassAnimation1_3(scene); - let Anima1_3_1: Animatable, Anima1_3_2: Animatable; - - Anima1_3_1 = scene.beginAnimation(glass1_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_3_1); - glass1_3_1.dispose(); - AnimationList1_3.delete(Anima1_3_1) - }) - Anima1_3_2 = scene.beginAnimation(glass1_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_3_2); - glass1_3_2.dispose(); - AnimationList1_3.delete(Anima1_3_2) - }) - AnimationList1_3.add(Anima1_3_1).add(Anima1_3_2) - }, 2500) - } - - function Stop1_3() { - clearInterval(Line1_3) - AnimationList1_3.forEach((item) => { - item.pause() - }) - } - - function Remove1_3() { - clearInterval(Line1_3) - AnimationList1_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line1_4 - let Line1_4: NodeJS.Timer; - let AnimationList1_4 = new Set() - - function Begin1_4() { - clearInterval(Line1_4); - AnimationList1_4.forEach((item) => { - item.restart() - }) - Line1_4 = setInterval(() => { - const { glass1_4_1, glass1_4_2 } = GlassAnimation1_4(scene); - let Anima1_4_1: Animatable, Anima1_4_2: Animatable; - - Anima1_4_1 = scene.beginAnimation(glass1_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_4_1); - glass1_4_1.dispose(); - AnimationList1_4.delete(Anima1_4_1) - }) - Anima1_4_2 = scene.beginAnimation(glass1_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass1_4_2); - glass1_4_2.dispose(); - AnimationList1_4.delete(Anima1_4_2) - }) - AnimationList1_4.add(Anima1_4_1).add(Anima1_4_2) - }, 2500) - } - - function Stop1_4() { - clearInterval(Line1_4) - AnimationList1_4.forEach((item) => { - item.pause() - }) - } - - function Remove1_4() { - clearInterval(Line1_4) - AnimationList1_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_1 - let Line2_1: NodeJS.Timer; - let AnimationList2_1 = new Set() - - function Begin2_1() { - clearInterval(Line2_1); - AnimationList2_1.forEach((item) => { - item.restart() - }) - Line2_1 = setInterval(() => { - const { glass2_1_1, glass2_1_2 } = GlassAnimation2_1(scene); - let Anima2_1_1: Animatable, Anima2_1_2: Animatable; - - Anima2_1_1 = scene.beginAnimation(glass2_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_1_1); - glass2_1_1.dispose(); - AnimationList2_1.delete(Anima2_1_1) - }) - Anima2_1_2 = scene.beginAnimation(glass2_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_1_2); - glass2_1_2.dispose(); - AnimationList2_1.delete(Anima2_1_2) - }) - AnimationList2_1.add(Anima2_1_1).add(Anima2_1_2) - }, 2500) - } - - function Stop2_1() { - clearInterval(Line2_1) - AnimationList2_1.forEach((item) => { - item.pause() - }) - } - - function Remove2_1() { - clearInterval(Line2_1) - AnimationList2_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_2U - let Line2_2U: NodeJS.Timer; - let AnimationList2_2U = new Set() - - function Begin2_2U() { - clearInterval(Line2_2U); - AnimationList2_2U.forEach((item) => { - item.restart() - }) - Line2_2U = setInterval(() => { - const { glass2_2_1 } = GlassAnimation2_2U(scene); - let Anima2_2U: Animatable; - - Anima2_2U = scene.beginAnimation(glass2_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_2_1); - glass2_2_1.dispose(); - AnimationList2_2U.delete(Anima2_2U) - }) - - AnimationList2_2U.add(Anima2_2U) - }, 2500) - } - - function Stop2_2U() { - clearInterval(Line2_2U) - AnimationList2_2U.forEach((item) => { - item.pause() - }) - } - - function Remove2_2U() { - clearInterval(Line2_2U) - AnimationList2_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_2D - let Line2_2D: NodeJS.Timer; - let AnimationList2_2D = new Set() - - function Begin2_2D() { - clearInterval(Line2_2D); - AnimationList2_2D.forEach((item) => { - item.restart() - }) - Line2_2D = setInterval(() => { - const { glass2_2_2 } = GlassAnimation2_2D(scene); - let Anima2_2D: Animatable; - - Anima2_2D = scene.beginAnimation(glass2_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_2_2); - glass2_2_2.dispose(); - AnimationList2_2D.delete(Anima2_2D) - }) - - AnimationList2_2D.add(Anima2_2D) - }, 2500) - } - - function Stop2_2D() { - clearInterval(Line2_2D) - AnimationList2_2D.forEach((item) => { - item.pause() - }) - } - - function Remove2_2D() { - clearInterval(Line2_2D) - AnimationList2_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_3 - let Line2_3: NodeJS.Timer; - let AnimationList2_3 = new Set() - - function Begin2_3() { - clearInterval(Line2_3); - AnimationList2_3.forEach((item) => { - item.restart() - }) - Line2_3 = setInterval(() => { - const { glass2_3_1, glass2_3_2 } = GlassAnimation2_3(scene); - let Anima2_3_1: Animatable, Anima2_3_2: Animatable; - - Anima2_3_1 = scene.beginAnimation(glass2_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_3_1); - glass2_3_1.dispose(); - AnimationList2_3.delete(Anima2_3_1) - }) - Anima2_3_2 = scene.beginAnimation(glass2_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_3_2); - glass2_3_2.dispose(); - AnimationList2_3.delete(Anima2_3_2) - }) - AnimationList2_3.add(Anima2_3_1).add(Anima2_3_2) - }, 2500) - } - - function Stop2_3() { - clearInterval(Line2_3) - AnimationList2_3.forEach((item) => { - item.pause() - }) - } - - function Remove2_3() { - clearInterval(Line2_3) - AnimationList2_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line2_4 - let Line2_4: NodeJS.Timer; - let AnimationList2_4 = new Set() - - function Begin2_4() { - clearInterval(Line2_4); - AnimationList2_4.forEach((item) => { - item.restart() - }) - Line2_4 = setInterval(() => { - const { glass2_4_1, glass2_4_2 } = GlassAnimation2_4(scene); - let Anima2_4_1: Animatable, Anima2_4_2: Animatable; - - Anima2_4_1 = scene.beginAnimation(glass2_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_4_1); - glass2_4_1.dispose(); - AnimationList2_4.delete(Anima2_4_1) - }) - Anima2_4_2 = scene.beginAnimation(glass2_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass2_4_2); - glass2_4_2.dispose(); - AnimationList2_4.delete(Anima2_4_2) - }) - AnimationList2_4.add(Anima2_4_1).add(Anima2_4_2) - }, 2500) - } - - function Stop2_4() { - clearInterval(Line2_4) - AnimationList2_4.forEach((item) => { - item.pause() - }) - } - - function Remove2_4() { - clearInterval(Line2_4) - AnimationList2_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_1 - let Line3_1: NodeJS.Timer; - let AnimationList3_1 = new Set() - - function Begin3_1() { - clearInterval(Line3_1); - AnimationList3_1.forEach((item) => { - item.restart() - }) - Line3_1 = setInterval(() => { - const { glass3_1_1, glass3_1_2 } = GlassAnimation3_1(scene); - let Anima3_1_1: Animatable, Anima3_1_2: Animatable; - - Anima3_1_1 = scene.beginAnimation(glass3_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_1_1); - glass3_1_1.dispose(); - AnimationList3_1.delete(Anima3_1_1) - }) - Anima3_1_2 = scene.beginAnimation(glass3_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_1_2); - glass3_1_2.dispose(); - AnimationList3_1.delete(Anima3_1_2) - }) - AnimationList3_1.add(Anima3_1_1).add(Anima3_1_2) - }, 2500) - } - - function Stop3_1() { - clearInterval(Line3_1) - AnimationList3_1.forEach((item) => { - item.pause() - }) - } - - function Remove3_1() { - clearInterval(Line3_1) - AnimationList3_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_2U - let Line3_2U: NodeJS.Timer; - let AnimationList3_2U = new Set() - - function Begin3_2U() { - clearInterval(Line3_2U); - AnimationList3_2U.forEach((item) => { - item.restart() - }) - Line3_2U = setInterval(() => { - const { glass3_2_2 } = GlassAnimation3_2U(scene); - let Anima3_2U: Animatable; - - Anima3_2U = scene.beginAnimation(glass3_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_2_2); - glass3_2_2.dispose(); - AnimationList3_2U.delete(Anima3_2U) - }) - - AnimationList3_2U.add(Anima3_2U) - }, 2500) - } - - function Stop3_2U() { - clearInterval(Line3_2U) - AnimationList3_2U.forEach((item) => { - item.pause() - }) - } - - function Remove3_2U() { - clearInterval(Line3_2U) - AnimationList3_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_2D - let Line3_2D: NodeJS.Timer; - let AnimationList3_2D = new Set() - - function Begin3_2D() { - clearInterval(Line3_2D); - AnimationList3_2D.forEach((item) => { - item.restart() - }) - Line3_2D = setInterval(() => { - const { glass3_2_1 } = GlassAnimation3_2D(scene); - let Anima3_2D: Animatable; - - Anima3_2D = scene.beginAnimation(glass3_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_2_1); - glass3_2_1.dispose(); - AnimationList3_2D.delete(Anima3_2D) - }) - - AnimationList3_2D.add(Anima3_2D) - }, 2500) - } - - function Stop3_2D() { - clearInterval(Line3_2D) - AnimationList3_2D.forEach((item) => { - item.pause() - }) - } - - function Remove3_2D() { - clearInterval(Line3_2D) - AnimationList3_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_3 - let Line3_3: NodeJS.Timer; - let AnimationList3_3 = new Set() - - function Begin3_3() { - clearInterval(Line3_3); - AnimationList3_3.forEach((item) => { - item.restart() - }) - Line3_3 = setInterval(() => { - const { glass3_3_1, glass3_3_2 } = GlassAnimation3_3(scene); - let Anima3_3_1: Animatable, Anima3_3_2: Animatable; - - Anima3_3_1 = scene.beginAnimation(glass3_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_3_1); - glass3_3_1.dispose(); - AnimationList3_3.delete(Anima3_3_1) - }) - Anima3_3_2 = scene.beginAnimation(glass3_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_3_2); - glass3_3_2.dispose(); - AnimationList3_3.delete(Anima3_3_2) - }) - AnimationList3_3.add(Anima3_3_1).add(Anima3_3_2) - }, 2500) - } - - function Stop3_3() { - clearInterval(Line3_3) - AnimationList3_3.forEach((item) => { - item.pause() - }) - } - - function Remove3_3() { - clearInterval(Line3_3) - AnimationList3_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line3_4 - let Line3_4: NodeJS.Timer; - let AnimationList3_4 = new Set() - - function Begin3_4() { - clearInterval(Line3_4); - AnimationList3_4.forEach((item) => { - item.restart() - }) - Line3_4 = setInterval(() => { - const { glass3_4_1, glass3_4_2 } = GlassAnimation3_4(scene); - let Anima3_4_1: Animatable, Anima3_4_2: Animatable; - - Anima3_4_1 = scene.beginAnimation(glass3_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_4_1); - glass3_4_1.dispose(); - AnimationList3_4.delete(Anima3_4_1) - }) - Anima3_4_2 = scene.beginAnimation(glass3_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass3_4_2); - glass3_4_2.dispose(); - AnimationList3_4.delete(Anima3_4_2) - }) - AnimationList3_4.add(Anima3_4_1).add(Anima3_4_2) - }, 2500) - } - - function Stop3_4() { - clearInterval(Line3_4) - AnimationList3_4.forEach((item) => { - item.pause() - }) - } - - function Remove3_4() { - clearInterval(Line3_4) - AnimationList3_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_1 - let Line4_1: NodeJS.Timer; - let AnimationList4_1 = new Set() - - function Begin4_1() { - clearInterval(Line4_1); - AnimationList4_1.forEach((item) => { - item.restart() - }) - Line4_1 = setInterval(() => { - const { glass4_1_1, glass4_1_2 } = GlassAnimation4_1(scene); - let Anima4_1_1: Animatable, Anima4_1_2: Animatable; - - Anima4_1_1 = scene.beginAnimation(glass4_1_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_1_1); - glass4_1_1.dispose(); - AnimationList4_1.delete(Anima4_1_1) - }) - Anima4_1_2 = scene.beginAnimation(glass4_1_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_1_2); - glass4_1_2.dispose(); - AnimationList4_1.delete(Anima4_1_2) - }) - AnimationList4_1.add(Anima4_1_1).add(Anima4_1_2) - }, 2500) - } - - function Stop4_1() { - clearInterval(Line4_1) - AnimationList4_1.forEach((item) => { - item.pause() - }) - } - - function Remove4_1() { - clearInterval(Line4_1) - AnimationList4_1.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_2U - let Line4_2U: NodeJS.Timer; - let AnimationList4_2U = new Set() - - function Begin4_2U() { - clearInterval(Line4_2U); - AnimationList4_2U.forEach((item) => { - item.restart() - }) - Line4_2U = setInterval(() => { - const { glass4_2_2 } = GlassAnimation4_2U(scene); - let Anima4_2U: Animatable; - - Anima4_2U = scene.beginAnimation(glass4_2_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_2_2); - glass4_2_2.dispose(); - AnimationList4_2U.delete(Anima4_2U) - }) - - AnimationList4_2U.add(Anima4_2U) - }, 2500) - } - - function Stop4_2U() { - clearInterval(Line4_2U) - AnimationList4_2U.forEach((item) => { - item.pause() - }) - } - - function Remove4_2U() { - clearInterval(Line4_2U) - AnimationList4_2U.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_2D - let Line4_2D: NodeJS.Timer; - let AnimationList4_2D = new Set() - - function Begin4_2D() { - clearInterval(Line4_2D); - AnimationList4_2D.forEach((item) => { - item.restart() - }) - Line4_2D = setInterval(() => { - const { glass4_2_1 } = GlassAnimation4_2D(scene); - let Anima4_2D: Animatable; - - Anima4_2D = scene.beginAnimation(glass4_2_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_2_1); - glass4_2_1.dispose(); - AnimationList4_2D.delete(Anima4_2D) - }) - - AnimationList4_2D.add(Anima4_2D) - }, 2500) - } - - function Stop4_2D() { - clearInterval(Line4_2D) - AnimationList4_2D.forEach((item) => { - item.pause() - }) - } - - function Remove4_2D() { - clearInterval(Line4_2D) - AnimationList4_2D.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_3 - let Line4_3: NodeJS.Timer; - let AnimationList4_3 = new Set() - - function Begin4_3() { - clearInterval(Line4_3); - AnimationList4_3.forEach((item) => { - item.restart() - }) - Line4_3 = setInterval(() => { - const { glass4_3_1, glass4_3_2 } = GlassAnimation4_3(scene); - let Anima4_3_1: Animatable, Anima4_3_2: Animatable; - - Anima4_3_1 = scene.beginAnimation(glass4_3_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_3_1); - glass4_3_1.dispose(); - AnimationList4_3.delete(Anima4_3_1) - }) - Anima4_3_2 = scene.beginAnimation(glass4_3_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_3_2); - glass4_3_2.dispose(); - AnimationList4_3.delete(Anima4_3_2) - }) - AnimationList4_3.add(Anima4_3_1).add(Anima4_3_2) - }, 2500) - } - - function Stop4_3() { - clearInterval(Line4_3) - AnimationList4_3.forEach((item) => { - item.pause() - }) - } - - function Remove4_3() { - clearInterval(Line4_3) - AnimationList4_3.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - //Line4_4 - let Line4_4: NodeJS.Timer; - let AnimationList4_4 = new Set() - - function Begin4_4() { - clearInterval(Line4_4); - AnimationList4_4.forEach((item) => { - item.restart() - }) - Line4_4 = setInterval(() => { - const { glass4_4_1, glass4_4_2 } = GlassAnimation4_4(scene); - let Anima4_4_1: Animatable, Anima4_4_2: Animatable; - - Anima4_4_1 = scene.beginAnimation(glass4_4_1, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_4_1); - glass4_4_1.dispose(); - AnimationList4_4.delete(Anima4_4_1) - }) - Anima4_4_2 = scene.beginAnimation(glass4_4_2, 0, 1000, false, 1, () => { - scene.stopAnimation(glass4_4_2); - glass4_4_2.dispose(); - AnimationList4_4.delete(Anima4_4_2) - }) - AnimationList4_4.add(Anima4_4_1).add(Anima4_4_2) - }, 2500) - } - - function Stop4_4() { - clearInterval(Line4_4) - AnimationList4_4.forEach((item) => { - item.pause() - }) - } - - function Remove4_4() { - clearInterval(Line4_4) - AnimationList4_4.forEach((item) => { - item.stop() - }) - } - - /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - onGlassObservable.add((eventData, eventState) => { - console.log('all') - const ThisGlassStatus = eventData as GlassStatus; - switch (ThisGlassStatus.LINE_1_1) { - case 0: - Stop1_1(); - break; - case 1: - Begin1_1(); - break; - case 2: - Remove1_1() - break; - } - switch (ThisGlassStatus.LINE_1_2U) { - case 0: - Stop1_2U(); - break; - case 1: - Begin1_2U(); - break; - case 2: - Remove1_2U() - break; - } - switch (ThisGlassStatus.LINE_1_2D) { - case 0: - Stop1_2D(); - break; - case 1: - Begin1_2D(); - break; - case 2: - Remove1_2D() - break; - } - switch (ThisGlassStatus.LINE_1_3) { - case 0: - Stop1_3(); - break; - case 1: - Begin1_3(); - break; - case 2: - Remove1_3() - break; - } - switch (ThisGlassStatus.LINE_1_4) { - case 0: - Stop1_4(); - break; - case 1: - Begin1_4(); - break; - case 2: - Remove1_4(); - break; - } - switch (ThisGlassStatus.LINE_2_1) { - case 0: - Stop2_1(); - break; - case 1: - Begin2_1(); - break; - case 2: - Remove2_1(); - break; - } - switch (ThisGlassStatus.LINE_2_2U) { - case 0: - Stop2_2U(); - break; - case 1: - Begin2_2U(); - break; - case 2: - Remove2_2U(); - break; - } - switch (ThisGlassStatus.LINE_2_2D) { - case 0: - Stop2_2D(); - break; - case 1: - Begin2_2D(); - break; - case 2: - Remove2_2D(); - break; - } - switch (ThisGlassStatus.LINE_2_3) { - case 0: - Stop2_3(); - break; - case 1: - Begin2_3(); - break; - case 2: - Remove2_3(); - break; - } - switch (ThisGlassStatus.LINE_2_4) { - case 0: - Stop2_4(); - break; - case 1: - Begin2_4(); - break; - case 2: - Remove2_4(); - break; - } - switch (ThisGlassStatus.LINE_3_1) { - case 0: - Stop3_1(); - break; - case 1: - Begin3_1(); - break; - case 2: - Remove3_1(); - break; - } - switch (ThisGlassStatus.LINE_3_2U) { - case 0: - Stop3_2U(); - break; - case 1: - Begin3_2U(); - break; - case 2: - Remove3_2U(); - break; - } - switch (ThisGlassStatus.LINE_3_2D) { - case 0: - Stop3_2D(); - break; - case 1: - Begin3_2D(); - break; - case 2: - Remove3_2D(); - break; - } - switch (ThisGlassStatus.LINE_3_3) { - case 0: - Stop3_3(); - break; - case 1: - Begin3_3(); - break; - case 2: - Remove3_3(); - break; - } - switch (ThisGlassStatus.LINE_3_4) { - case 0: - Stop3_4(); - break; - case 1: - Begin3_4(); - break; - case 2: - Remove3_4(); - break; - } - switch (ThisGlassStatus.LINE_4_1) { - case 0: - Stop4_1(); - break; - case 1: - Begin4_1(); - break; - case 2: - Remove4_1(); - break; - } - switch (ThisGlassStatus.LINE_4_2U) { - case 0: - Stop4_2U(); - break; - case 1: - Begin4_2U(); - break; - case 2: - Remove4_2U(); - break; - } - switch (ThisGlassStatus.LINE_4_2D) { - case 0: - Stop4_2D(); - break; - case 1: - Begin4_2D(); - break; - case 2: - Remove4_2D(); - break; - } - switch (ThisGlassStatus.LINE_4_3) { - case 0: - Stop4_3(); - break; - case 1: - Begin4_3(); - break; - case 2: - Remove4_3(); - break; - } - switch (ThisGlassStatus.LINE_4_4) { - case 0: - Stop4_4(); - break; - case 1: - Begin4_4(); - break; - case 2: - Remove4_4(); - break; - } - }) - ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// - }) - - // run the render loop - scene.then((scene) => { - engine.runRenderLoop(function () { - scene.render() - }); - }, - (reason) => { - console.log(reason); - } - ); - - // Resize - window.addEventListener("resize", function () { - engine.resize(); - }); - }, - [] - ); - - - const handleClick1 = () => { - onMainCamObservable.notifyObservers(1) - } - const handleClick2 = () => { - onMainCamObservable.notifyObservers(2) - } - const handleClick3 = () => { - onMainCamObservable.notifyObservers(3) - } - const handleClick4 = () => { - onMainCamObservable.notifyObservers(4) - } - - - return ( -
- - -

当前选择: {SelectedMeshName}

- - - - - - -
- ); -} - -export default MybabylonJS; \ No newline at end of file diff --git a/src/logo.svg b/src/logo.svg deleted file mode 100644 index 9dfc1c0..0000000 --- a/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/page/AutoSwitch/SwitchAll.tsx b/src/page/AutoSwitch/SwitchAll.tsx deleted file mode 100644 index fa6c053..0000000 --- a/src/page/AutoSwitch/SwitchAll.tsx +++ /dev/null @@ -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 ( -
- - - - - - - - - - - - - - - -
- ) -} - -export default SwitchAll; \ No newline at end of file diff --git a/src/page/AutoSwitch/SwitchLine.tsx b/src/page/AutoSwitch/SwitchLine.tsx deleted file mode 100644 index 504bcac..0000000 --- a/src/page/AutoSwitch/SwitchLine.tsx +++ /dev/null @@ -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 ( -
- - - - -
- ) -} - -export default SwitchLine; \ No newline at end of file diff --git a/src/page/MainE/CenterDownE.tsx b/src/page/MainE/CenterDownE.tsx deleted file mode 100644 index 275986f..0000000 --- a/src/page/MainE/CenterDownE.tsx +++ /dev/null @@ -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, 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 = [] - for (let index = 1; index <= PageCount; index++) { - PageIndexArray.push(index) - } - - const timeOut = setTimeout(() => { - if (page < PageCount) { - setPage(page + 1) - } else { - setPage(1) - } - }, 5000) - - return ( -
-
-
-
-
- {intl.get('EquipmentTurnover')} -
- - - -
-
-
- {PageIndexArray.map((index) => ( - - ))} -
-
-
- ) -} - -export default CenterDownE; \ No newline at end of file diff --git a/src/page/MainE/CenterDownE/CenterDownChartE.tsx b/src/page/MainE/CenterDownE/CenterDownChartE.tsx deleted file mode 100644 index d0b40e3..0000000 --- a/src/page/MainE/CenterDownE/CenterDownChartE.tsx +++ /dev/null @@ -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 = []; - 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 = []; - for (let index = startNum; index <= endNum; index++) { - ToShowOees.push(EquipmentOees[index]); - } - - return ( - - - { - ToShowOees.map((item, index) => ( - - - )) - } - - - ) -} - -export default CenterDownChartE; \ No newline at end of file diff --git a/src/page/MainE/CenterDownE/OeeChart.tsx b/src/page/MainE/CenterDownE/OeeChart.tsx deleted file mode 100644 index 79236e2..0000000 --- a/src/page/MainE/CenterDownE/OeeChart.tsx +++ /dev/null @@ -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 ( - -
{data.equName}
-
- - - ); -} - -export default OeeChart; \ No newline at end of file diff --git a/src/page/MainE/CenterE.tsx b/src/page/MainE/CenterE.tsx deleted file mode 100644 index eb61adf..0000000 --- a/src/page/MainE/CenterE.tsx +++ /dev/null @@ -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 ( -
- - -
- ) -} - -export default CenterE; \ No newline at end of file diff --git a/src/page/MainE/CenterUpE.tsx b/src/page/MainE/CenterUpE.tsx deleted file mode 100644 index 66aef0f..0000000 --- a/src/page/MainE/CenterUpE.tsx +++ /dev/null @@ -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 ( -
-
- - {/* */} -
- ) -} - -export default CenterUpE; \ No newline at end of file diff --git a/src/page/MainE/LeftDownE.tsx b/src/page/MainE/LeftDownE.tsx deleted file mode 100644 index 2aff1f7..0000000 --- a/src/page/MainE/LeftDownE.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import intl from "react-intl-universal"; -import LeftDownChartE from "./LeftDownE/LeftDownChartE"; - -function LeftDownE() { - return ( -
-
-
-
- {intl.get('EquipmentOperationMonitoring')} -
-
- -
-
- ) -} - -export default LeftDownE; \ No newline at end of file diff --git a/src/page/MainE/LeftDownE/LeftDownChartE.tsx b/src/page/MainE/LeftDownE/LeftDownChartE.tsx deleted file mode 100644 index 2678d88..0000000 --- a/src/page/MainE/LeftDownE/LeftDownChartE.tsx +++ /dev/null @@ -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 = []; - 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 ( -
- ); -} - -export default LeftDownChartE; \ No newline at end of file diff --git a/src/page/MainE/LeftE.tsx b/src/page/MainE/LeftE.tsx deleted file mode 100644 index 52a43b4..0000000 --- a/src/page/MainE/LeftE.tsx +++ /dev/null @@ -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 ( -
- - -
- ); -} - -export default LeftE; \ No newline at end of file diff --git a/src/page/MainE/LeftUpE.tsx b/src/page/MainE/LeftUpE.tsx deleted file mode 100644 index e88e4fc..0000000 --- a/src/page/MainE/LeftUpE.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import React from "react"; -import intl from "react-intl-universal"; -import LeftUpTableE from "./LeftUpE/LeftUpTableE"; - -function LeftUpE() { - return ( -
-
-
-
- {intl.get('AbnormalEquipmentAlarm')} -
-
- -
-
- ) -} - -export default LeftUpE; \ No newline at end of file diff --git a/src/page/MainE/LeftUpE/LeftUpTableE.tsx b/src/page/MainE/LeftUpE/LeftUpTableE.tsx deleted file mode 100644 index 4ee06dd..0000000 --- a/src/page/MainE/LeftUpE/LeftUpTableE.tsx +++ /dev/null @@ -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 = []; - 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 ( - - - - - {intl.get('serialNo')} - {intl.get('EquipmentName')} - {intl.get('alarmCode')} - {intl.get('AlarmLevel')} - {intl.get('alarmContent')} - - - - {equipmentAlarm.map((alarm, index) => ( - - {index + 1} - {alarm.equName} - {alarm.alarmCode} - {alarm.alarmValue} - {alarm.alarmContent} - - ))} - -
- - ); -} - -export default LeftUpTableE; \ No newline at end of file diff --git a/src/page/MainE/MainE.tsx b/src/page/MainE/MainE.tsx deleted file mode 100644 index 9b886f6..0000000 --- a/src/page/MainE/MainE.tsx +++ /dev/null @@ -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 ( - - -
- - - -
- - ); -} - -export default MainE; \ No newline at end of file diff --git a/src/page/MainE/RightE.tsx b/src/page/MainE/RightE.tsx deleted file mode 100644 index 40f6263..0000000 --- a/src/page/MainE/RightE.tsx +++ /dev/null @@ -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 ( -
-
-
-
-
- {intl.get('EquipmentProcessingQuantity')} -
- -
-
- {intl.get('ThisDay')} -
-
- -
- -
- -
-
- {intl.get('ThisWeek')} -
-
- -
- -
- -
-
- {intl.get('ThisMonth')} -
-
- -
- -
- -
-
- {intl.get('All')} -
-
- -
- -
-
-
- ); -} - -export default RightE; \ No newline at end of file diff --git a/src/page/MainE/RightE/RightTableAllE.tsx b/src/page/MainE/RightE/RightTableAllE.tsx deleted file mode 100644 index eee7381..0000000 --- a/src/page/MainE/RightE/RightTableAllE.tsx +++ /dev/null @@ -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 = []; - 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 ( - - - - - {intl.get('SectionName')} - {intl.get('EquipmentName')} - {intl.get('InputNum')} - {intl.get('OutputNum')} - - - - {ProductData.map((item, index) => ( - - {item.sectionName} - {item.equipmentName} - {item.inputNum} - {item.outputNum} - - ))} - -
- - ) -} - -export default RightTableAllE; \ No newline at end of file diff --git a/src/page/MainE/RightE/RightTableDayE.tsx b/src/page/MainE/RightE/RightTableDayE.tsx deleted file mode 100644 index e7f4dee..0000000 --- a/src/page/MainE/RightE/RightTableDayE.tsx +++ /dev/null @@ -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 = []; - 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 ( - - - - - {intl.get('SectionName')} - {intl.get('EquipmentName')} - {intl.get('InputNum')} - {intl.get('OutputNum')} - - - - {SlicedProductData.map((item, index) => ( - - {item.sectionName} - {item.equipmentName} - {item.inputNum} - {item.outputNum} - - ))} - -
- - ) -} - -export default RightTableDayE; \ No newline at end of file diff --git a/src/page/MainE/RightE/RightTableMonthE.tsx b/src/page/MainE/RightE/RightTableMonthE.tsx deleted file mode 100644 index 1b781a3..0000000 --- a/src/page/MainE/RightE/RightTableMonthE.tsx +++ /dev/null @@ -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 = []; - 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 ( - - - - - {intl.get('SectionName')} - {intl.get('EquipmentName')} - {intl.get('InputNum')} - {intl.get('OutputNum')} - - - - {ProductData.map((item, index) => ( - - {item.sectionName} - {item.equipmentName} - {item.inputNum} - {item.outputNum} - - ))} - -
- - ) -} - -export default RightTableMonthE; \ No newline at end of file diff --git a/src/page/MainE/RightE/RightTableWeekE.tsx b/src/page/MainE/RightE/RightTableWeekE.tsx deleted file mode 100644 index 91a1dcc..0000000 --- a/src/page/MainE/RightE/RightTableWeekE.tsx +++ /dev/null @@ -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 = []; - 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 ( - - - - - {intl.get('SectionName')} - {intl.get('EquipmentName')} - {intl.get('InputNum')} - {intl.get('OutputNum')} - - - - {ProductData.map((item, index) => ( - - {item.sectionName} - {item.equipmentName} - {item.inputNum} - {item.outputNum} - - ))} - -
- - ) -} - -export default RightTableWeekE; \ No newline at end of file diff --git a/src/page/MainE/TopE.tsx b/src/page/MainE/TopE.tsx deleted file mode 100644 index d05b2d7..0000000 --- a/src/page/MainE/TopE.tsx +++ /dev/null @@ -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 ( -
-
-
-
- {/*
*/} -
- {intl.get('TITLE_E') + "(" + intl.get('ProductLine') + LineID + ")"} -
- - -
- ); -} - -export default TopE; \ No newline at end of file diff --git a/src/page/MainP/Center.tsx b/src/page/MainP/Center.tsx deleted file mode 100644 index b502481..0000000 --- a/src/page/MainP/Center.tsx +++ /dev/null @@ -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 ( -
- - -
- ); -} - -export default Center; \ No newline at end of file diff --git a/src/page/MainP/CenterDown.tsx b/src/page/MainP/CenterDown.tsx deleted file mode 100644 index e739738..0000000 --- a/src/page/MainP/CenterDown.tsx +++ /dev/null @@ -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, newTime: number | null,) => { - if (newTime !== null) { - setTime(newTime); - clearTimeout(timeout) - } - }; - const timeout = setTimeout(() => { - if (time < 3) { - setTime(time + 1) - } else { - setTime(1) - } - }, 5000) - - return ( -
-
-
-
-
- {intl.get('YieldLineChart')} - - - {intl.get('ThisDay')} - - - {intl.get('ThisWeek')} - - - {intl.get('ThisMonth')} - - -
-
- - - -
- -
-
- ); -} - -export default CenterDown; \ No newline at end of file diff --git a/src/page/MainP/CenterDown/CenterDownChartDay.tsx b/src/page/MainP/CenterDown/CenterDownChartDay.tsx deleted file mode 100644 index 2b5c7c9..0000000 --- a/src/page/MainP/CenterDown/CenterDownChartDay.tsx +++ /dev/null @@ -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 = []; - // @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 = [] - // @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 ( -
- ); -} - -export default CenterDownChartDay; \ No newline at end of file diff --git a/src/page/MainP/CenterDown/CenterDownChartMonth.tsx b/src/page/MainP/CenterDown/CenterDownChartMonth.tsx deleted file mode 100644 index 1f4717a..0000000 --- a/src/page/MainP/CenterDown/CenterDownChartMonth.tsx +++ /dev/null @@ -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 = []; - // @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 = [] - - // @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 ( -
- ); -} - -export default CenterDownChartMonth; \ No newline at end of file diff --git a/src/page/MainP/CenterDown/CenterDownChartWeek.tsx b/src/page/MainP/CenterDown/CenterDownChartWeek.tsx deleted file mode 100644 index d42e433..0000000 --- a/src/page/MainP/CenterDown/CenterDownChartWeek.tsx +++ /dev/null @@ -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 = []; - // @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 = [] - // @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 ( -
- ); -} - -export default CenterDownChartWeek; \ No newline at end of file diff --git a/src/page/MainP/CenterUp.tsx b/src/page/MainP/CenterUp.tsx deleted file mode 100644 index 1388c2d..0000000 --- a/src/page/MainP/CenterUp.tsx +++ /dev/null @@ -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 ( -
-
- - {/* 添加按钮来切换组件 */} - - -
{modelIndex}
-
- ); -} - -export default CenterUp; \ No newline at end of file diff --git a/src/page/MainP/CenterUp_Backup.tsx b/src/page/MainP/CenterUp_Backup.tsx deleted file mode 100644 index b40f966..0000000 --- a/src/page/MainP/CenterUp_Backup.tsx +++ /dev/null @@ -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) => ( -
- {/* */} -
- )); - }; - - - - return ( -
-
- {/* 渲染当前组件 */} - {renderComponents()} - {/* 添加按钮来切换组件 */} - - -
- ); -} - -export default CenterUp; \ No newline at end of file diff --git a/src/page/MainP/Left.tsx b/src/page/MainP/Left.tsx deleted file mode 100644 index ecf06c6..0000000 --- a/src/page/MainP/Left.tsx +++ /dev/null @@ -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 ( -
- - -
- ); -} - -export default Left; \ No newline at end of file diff --git a/src/page/MainP/LeftDown.tsx b/src/page/MainP/LeftDown.tsx deleted file mode 100644 index 79fcdaa..0000000 --- a/src/page/MainP/LeftDown.tsx +++ /dev/null @@ -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 ( -
-
-
-
- {intl.get('eachLineInputAndOutput')} -
- -
-
- {intl.get('ThisDay')} -
-
- - -
-
- {intl.get('ThisWeek')} -
-
- - - -
-
- {intl.get('ThisMonth')} -
-
- - -
- ); -} - -export default LeftDown; \ No newline at end of file diff --git a/src/page/MainP/LeftDown/ChartDay.tsx b/src/page/MainP/LeftDown/ChartDay.tsx deleted file mode 100644 index c95d6e8..0000000 --- a/src/page/MainP/LeftDown/ChartDay.tsx +++ /dev/null @@ -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 = []; - const outputNumList: Array = []; - 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 ( -
- ); -} - -export default ChartDay; \ No newline at end of file diff --git a/src/page/MainP/LeftDown/ChartMonth.tsx b/src/page/MainP/LeftDown/ChartMonth.tsx deleted file mode 100644 index c725510..0000000 --- a/src/page/MainP/LeftDown/ChartMonth.tsx +++ /dev/null @@ -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 = []; - const outputNumList: Array = []; - 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 ( -
- ); -} - -export default ChartMonth; \ No newline at end of file diff --git a/src/page/MainP/LeftDown/ChartWeek.tsx b/src/page/MainP/LeftDown/ChartWeek.tsx deleted file mode 100644 index bfb00ee..0000000 --- a/src/page/MainP/LeftDown/ChartWeek.tsx +++ /dev/null @@ -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 = []; - const outputNumList: Array = []; - 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 ( -
- ); -} - -export default ChartWeek; \ No newline at end of file diff --git a/src/page/MainP/LeftUp.tsx b/src/page/MainP/LeftUp.tsx deleted file mode 100644 index 0009b7e..0000000 --- a/src/page/MainP/LeftUp.tsx +++ /dev/null @@ -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 ( -
-
-
-
- {intl.get('alarmInfo')} -
- - {intl.get("alarmsNumber")} - - {data} -
- -
-
- ); -} - -export default LeftUp; \ No newline at end of file diff --git a/src/page/MainP/LeftUp/LeftUpTable.tsx b/src/page/MainP/LeftUp/LeftUpTable.tsx deleted file mode 100644 index ae11cad..0000000 --- a/src/page/MainP/LeftUp/LeftUpTable.tsx +++ /dev/null @@ -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 ( - - - - - {intl.get('serialNo')} - {intl.get('alarmTime')} - {intl.get('alarmCode')} - {intl.get('alarmContent')} - - - - {alarms.map((alarm, index) => ( - - {index + 1} - {alarm.alarmTime} - {alarm.alarmCode} - {alarm.alarmContent} - - ))} - -
- - ); -} - -export default LeftUpTable; \ No newline at end of file diff --git a/src/page/MainP/MainP.tsx b/src/page/MainP/MainP.tsx deleted file mode 100644 index 351f8e3..0000000 --- a/src/page/MainP/MainP.tsx +++ /dev/null @@ -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 ( - - -
- -
- -
- - ); -} - -export default MainP; \ No newline at end of file diff --git a/src/page/MainP/Right.tsx b/src/page/MainP/Right.tsx deleted file mode 100644 index e0354fd..0000000 --- a/src/page/MainP/Right.tsx +++ /dev/null @@ -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 ( -
- - -
- ); -} - -export default Right; - diff --git a/src/page/MainP/RightDown.tsx b/src/page/MainP/RightDown.tsx deleted file mode 100644 index d9c0dac..0000000 --- a/src/page/MainP/RightDown.tsx +++ /dev/null @@ -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 ( -
-
- -
-
- {intl.get('InputAndOutputTable')} -
- -
-
- {intl.get('ThisDay')} -
-
- -
- -
- -
-
- {intl.get('ThisWeek')} -
-
- -
- -
- -
-
- {intl.get('ThisMonth')} -
-
- -
- -
- -
- ); -} - -export default RightDown; \ No newline at end of file diff --git a/src/page/MainP/RightDown/RightDownTableDay.tsx b/src/page/MainP/RightDown/RightDownTableDay.tsx deleted file mode 100644 index e9dbfcb..0000000 --- a/src/page/MainP/RightDown/RightDownTableDay.tsx +++ /dev/null @@ -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 ( - - - - - {intl.get('ProductionLineName')} - {intl.get('InputNum')} - {intl.get('OutputNum')} - {intl.get('PassRate')} - - - - {todayProductionDets.map((todayProductionDet) => ( - - {todayProductionDet.lineName} - {todayProductionDet.inputNum} - {todayProductionDet.outputNum} - {todayProductionDet.passRate} - - ))} - -
- - ); -} - -export default RightDownTableDay; \ No newline at end of file diff --git a/src/page/MainP/RightDown/RightDownTableMonth.tsx b/src/page/MainP/RightDown/RightDownTableMonth.tsx deleted file mode 100644 index 2e5c6d9..0000000 --- a/src/page/MainP/RightDown/RightDownTableMonth.tsx +++ /dev/null @@ -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 ( - - - - - {intl.get('ProductionLineName')} - {intl.get('InputNum')} - {intl.get('OutputNum')} - {intl.get('PassRate')} - - - - {monthProductionRates.map((monthProductionRate) => ( - - {monthProductionRate.lineName} - {monthProductionRate.inputNum} - {monthProductionRate.outputNum} - {monthProductionRate.passRate} - - ))} - -
- - ); -} - -export default RightDownTableMonth; \ No newline at end of file diff --git a/src/page/MainP/RightDown/RightDownTableWeek.tsx b/src/page/MainP/RightDown/RightDownTableWeek.tsx deleted file mode 100644 index f6e4d8f..0000000 --- a/src/page/MainP/RightDown/RightDownTableWeek.tsx +++ /dev/null @@ -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 ( - - - - - {intl.get('ProductionLineName')} - {intl.get('InputNum')} - {intl.get('OutputNum')} - {intl.get('PassRate')} - - - - {weekProductionDets.map((weekProductionDet) => ( - - {weekProductionDet.lineName} - {weekProductionDet.inputNum} - {weekProductionDet.outputNum} - {weekProductionDet.passRate} - - ))} - -
- - ); -} - -export default RightDownTableWeek; \ No newline at end of file diff --git a/src/page/MainP/RightUp.tsx b/src/page/MainP/RightUp.tsx deleted file mode 100644 index 4dc1553..0000000 --- a/src/page/MainP/RightUp.tsx +++ /dev/null @@ -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 ( -
-
-
-
-
- {intl.get('InputAndOutputSummaryTable')} -
-
- -
-
-
- ); -} - -export default RightUp; \ No newline at end of file diff --git a/src/page/MainP/RightUp/RightUpTable.tsx b/src/page/MainP/RightUp/RightUpTable.tsx deleted file mode 100644 index bce9424..0000000 --- a/src/page/MainP/RightUp/RightUpTable.tsx +++ /dev/null @@ -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 ( - - - - - {intl.get('ProductionLineName')} - {intl.get('InputNum')} - {intl.get('OutputNum')} - {intl.get('PassRate')} - - - - {sumProductionDets.map((sumProductionDets) => ( - - {sumProductionDets.lineName} - {sumProductionDets.inputNum} - {sumProductionDets.outputNum} - {sumProductionDets.passRate} - - ))} - -
- - ); -} - -export default RightUpTable; \ No newline at end of file diff --git a/src/page/MainP/TopP.tsx b/src/page/MainP/TopP.tsx deleted file mode 100644 index ff0d3f1..0000000 --- a/src/page/MainP/TopP.tsx +++ /dev/null @@ -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 ( -
-
-
-
- {/*
*/} -
- {intl.get('TITLE')} -
- - -
- ); -} - -export default TopP; \ No newline at end of file diff --git a/src/page/MainQ/LeftQ.tsx b/src/page/MainQ/LeftQ.tsx deleted file mode 100644 index ac2716a..0000000 --- a/src/page/MainQ/LeftQ.tsx +++ /dev/null @@ -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 ( -
-
-
-
-
- {intl.get('DefectSummary')} -
- -
-
- {intl.get('ThisDay')} -
-
- -
- -
- -
-
- {intl.get('ThisWeek')} -
-
- -
- -
- -
-
- {intl.get('ThisMonth')} -
-
- -
- -
- -
-
- ) -} - -export default LeftQ; \ No newline at end of file diff --git a/src/page/MainQ/LeftQ/LeftTableDayQ.tsx b/src/page/MainQ/LeftQ/LeftTableDayQ.tsx deleted file mode 100644 index e1d6776..0000000 --- a/src/page/MainQ/LeftQ/LeftTableDayQ.tsx +++ /dev/null @@ -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 ( - - - - - {intl.get('serialNo')} - {intl.get('DefectType')} - {intl.get('DefectNumber')} - - - - {SlicedQualityAll.map((item, index) => ( - - {item.sort} - {item.content} - {item.num} - - ))} - -
- - ) -} - -export default LeftTableDayQ; \ No newline at end of file diff --git a/src/page/MainQ/LeftQ/LeftTableMonthQ.tsx b/src/page/MainQ/LeftQ/LeftTableMonthQ.tsx deleted file mode 100644 index f6adc81..0000000 --- a/src/page/MainQ/LeftQ/LeftTableMonthQ.tsx +++ /dev/null @@ -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 ( - - - - - {intl.get('serialNo')} - {intl.get('DefectType')} - {intl.get('DefectNumber')} - - - - {SlicedQualityAll.map((item, index) => ( - - {item.sort} - {item.content} - {item.num} - - ))} - -
- - ) -} - -export default LeftTableMonthQ; \ No newline at end of file diff --git a/src/page/MainQ/LeftQ/LeftTableWeekQ.tsx b/src/page/MainQ/LeftQ/LeftTableWeekQ.tsx deleted file mode 100644 index 3e8094d..0000000 --- a/src/page/MainQ/LeftQ/LeftTableWeekQ.tsx +++ /dev/null @@ -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 ( - - - - - {intl.get('serialNo')} - {intl.get('DefectType')} - {intl.get('DefectNumber')} - - - - {SlicedQualityAll.map((item, index) => ( - - {item.sort} - {item.content} - {item.num} - - ))} - -
- - ) -} - -export default LeftTableWeekQ; \ No newline at end of file diff --git a/src/page/MainQ/MainQ.tsx b/src/page/MainQ/MainQ.tsx deleted file mode 100644 index 1137ebd..0000000 --- a/src/page/MainQ/MainQ.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from "react"; -import TopQ from "./TopQ"; -import LeftQ from "./LeftQ"; -import RightQ from "./RightQ"; - -function MainQ() { - return ( - - -
- - -
- - ) -} - -export default MainQ; \ No newline at end of file diff --git a/src/page/MainQ/RightQ.tsx b/src/page/MainQ/RightQ.tsx deleted file mode 100644 index cba131a..0000000 --- a/src/page/MainQ/RightQ.tsx +++ /dev/null @@ -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 ( -
- -
- - -
-
- - -
-
- ); -} - -export default RightQ; \ No newline at end of file diff --git a/src/page/MainQ/RightQ/RightDownLeftQ.tsx b/src/page/MainQ/RightQ/RightDownLeftQ.tsx deleted file mode 100644 index 28fefef..0000000 --- a/src/page/MainQ/RightQ/RightDownLeftQ.tsx +++ /dev/null @@ -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, newTime: number | null,) => { - if (newTime !== null) { - setTime(newTime); - clearTimeout(timeout) - } - }; - const timeout = setTimeout(() => { - if (time < 3) { - setTime(time + 1) - } else { - setTime(1) - } - }, 5000) - - return ( -
-
-
-
- {intl.get('DefectSummaryLine3')} - - - {intl.get('ThisDayShort')} - - - {intl.get('ThisWeekShort')} - - - {intl.get('ThisMonthShort')} - - -
-
- - - -
-
- ) -} - -export default RightDownLeftQ; \ No newline at end of file diff --git a/src/page/MainQ/RightQ/RightDownRightQ.tsx b/src/page/MainQ/RightQ/RightDownRightQ.tsx deleted file mode 100644 index 5daed9e..0000000 --- a/src/page/MainQ/RightQ/RightDownRightQ.tsx +++ /dev/null @@ -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, newTime: number | null,) => { - if (newTime !== null) { - setTime(newTime); - clearTimeout(timeout) - } - }; - const timeout = setTimeout(() => { - if (time < 3) { - setTime(time + 1) - } else { - setTime(1) - } - }, 5000) - return ( -
-
-
-
- {intl.get('DefectSummaryLine4')} - - - {intl.get('ThisDayShort')} - - - {intl.get('ThisWeekShort')} - - - {intl.get('ThisMonthShort')} - - -
-
- - - -
-
- ) -} - -export default RightDownRightQ; \ No newline at end of file diff --git a/src/page/MainQ/RightQ/RightMiddleLeftQ.tsx b/src/page/MainQ/RightQ/RightMiddleLeftQ.tsx deleted file mode 100644 index d67a17b..0000000 --- a/src/page/MainQ/RightQ/RightMiddleLeftQ.tsx +++ /dev/null @@ -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, newTime: number | null,) => { - if (newTime !== null) { - setTime(newTime); - clearTimeout(timeout) - } - }; - const timeout = setTimeout(() => { - if (time < 3) { - setTime(time + 1) - } else { - setTime(1) - } - }, 5000) - - return ( -
-
-
-
- {intl.get('DefectSummaryLine1')} - - - {intl.get('ThisDayShort')} - - - {intl.get('ThisWeekShort')} - - - {intl.get('ThisMonthShort')} - - -
-
- - - -
-
- ) -} - -export default RightMiddleLeftQ; \ No newline at end of file diff --git a/src/page/MainQ/RightQ/RightMiddleRightQ.tsx b/src/page/MainQ/RightQ/RightMiddleRightQ.tsx deleted file mode 100644 index 054d972..0000000 --- a/src/page/MainQ/RightQ/RightMiddleRightQ.tsx +++ /dev/null @@ -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, newTime: number | null,) => { - if (newTime !== null) { - setTime(newTime); - clearTimeout(timeout) - } - }; - const timeout = setTimeout(() => { - if (time < 3) { - setTime(time + 1) - } else { - setTime(1) - } - }, 5000) - - return ( -
-
-
-
- {intl.get('DefectSummaryLine2')} - - - {intl.get('ThisDayShort')} - - - {intl.get('ThisWeekShort')} - - - {intl.get('ThisMonthShort')} - - -
-
- - - -
-
- ) -} - -export default RightMiddleRightQ; \ No newline at end of file diff --git a/src/page/MainQ/RightQ/RightTopQ.tsx b/src/page/MainQ/RightQ/RightTopQ.tsx deleted file mode 100644 index a97e6c6..0000000 --- a/src/page/MainQ/RightQ/RightTopQ.tsx +++ /dev/null @@ -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, newTime: number | null,) => { - if (newTime !== null) { - setTime(newTime); - clearTimeout(timeout) - } - }; - const timeout = setTimeout(() => { - if (time < 3) { - setTime(time + 1) - } else { - setTime(1) - } - }, 5000) - - return ( -
-
-
-
- {intl.get('LineDefectSummary')} - - - {intl.get('ThisDay')} - - - {intl.get('ThisWeek')} - - - {intl.get('ThisMonth')} - - -
-
- - - -
-
- ) -} - -export default RightTopQ; \ No newline at end of file diff --git a/src/page/MainQ/RightTopQ/RightTopChartDayQ.tsx b/src/page/MainQ/RightTopQ/RightTopChartDayQ.tsx deleted file mode 100644 index ba6bba6..0000000 --- a/src/page/MainQ/RightTopQ/RightTopChartDayQ.tsx +++ /dev/null @@ -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 = []; - - 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 = [] - 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 ( -
- ) -} - -export default RightTopChartDayQ; \ No newline at end of file diff --git a/src/page/MainQ/RightTopQ/RightTopChartMonthQ.tsx b/src/page/MainQ/RightTopQ/RightTopChartMonthQ.tsx deleted file mode 100644 index ed5b6ba..0000000 --- a/src/page/MainQ/RightTopQ/RightTopChartMonthQ.tsx +++ /dev/null @@ -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 = []; - - 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 = [] - 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 ( -
- ) -} - -export default RightTopChartMonthQ; \ No newline at end of file diff --git a/src/page/MainQ/RightTopQ/RightTopChartWeekQ.tsx b/src/page/MainQ/RightTopQ/RightTopChartWeekQ.tsx deleted file mode 100644 index adcefe1..0000000 --- a/src/page/MainQ/RightTopQ/RightTopChartWeekQ.tsx +++ /dev/null @@ -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 = []; - - 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 = [] - 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 ( -
- ) -} - -export default RightTopChartWeekQ; \ No newline at end of file diff --git a/src/page/MainQ/TopQ.tsx b/src/page/MainQ/TopQ.tsx deleted file mode 100644 index 24f0bc5..0000000 --- a/src/page/MainQ/TopQ.tsx +++ /dev/null @@ -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 ( -
-
-
-
- {/*
*/} -
- {intl.get('TITLE_Q')} -
- - -
- ); -} - -export default TopE; \ No newline at end of file diff --git a/src/page/TestPage/CenterUp.tsx b/src/page/TestPage/CenterUp.tsx index 1388c2d..ea62ec1 100644 --- a/src/page/TestPage/CenterUp.tsx +++ b/src/page/TestPage/CenterUp.tsx @@ -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 (
- + {/* */} {/* 添加按钮来切换组件 */} diff --git a/src/page/TestPage/index.tsx b/src/page/TestPage/index.tsx index 8e28e48..c615bd4 100644 --- a/src/page/TestPage/index.tsx +++ b/src/page/TestPage/index.tsx @@ -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(() => { <>
TestPage Line{LineID}
3434
- + ); } diff --git a/src/store/LinePageSlice.ts b/src/store/LinePageSlice.ts new file mode 100644 index 0000000..39ac7a1 --- /dev/null +++ b/src/store/LinePageSlice.ts @@ -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; \ No newline at end of file diff --git a/src/store/UpdateData.tsx b/src/store/UpdateData.tsx index 2d44157..eb8e28b 100644 --- a/src/store/UpdateData.tsx +++ b/src/store/UpdateData.tsx @@ -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 = []; - let values: Array = [] - 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 = []; +// let values: Array = [] +// 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(); diff --git a/src/store/store.ts b/src/store/store.ts index 72bb07c..6c9986d 100644 --- a/src/store/store.ts +++ b/src/store/store.ts @@ -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, }, }) ;