diff --git a/package.json b/package.json index df4122c5..44015da5 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "dependencies": { "@element-plus/icons-vue": "2.0.10", "@tinymce/tinymce-vue": "5.0.0", + "animate.css": "^4.1.1", "axios": "1.3.4", "babylon": "^6.18.0", "babylonjs": "^6.16.0", diff --git a/src/config/route.js b/src/config/route.js index 5ebee0ad..fbc002a7 100644 --- a/src/config/route.js +++ b/src/config/route.js @@ -74,7 +74,7 @@ const routes = [ "path": "/bigScreen2", "name": "bigScreen2", "meta": { - "title": "驾驶舱2", + "title": "能管大屏", "icon": "el-icon-position", "perms": ["bigScreen2"], "fullpage": true, diff --git a/src/views/bigScreen/index_enm.vue b/src/views/bigScreen/index_enm.vue index 760dc487..f651e6f4 100644 --- a/src/views/bigScreen/index_enm.vue +++ b/src/views/bigScreen/index_enm.vue @@ -5,7 +5,7 @@ -
+
全厂主要数据
@@ -52,7 +52,7 @@
-
+
工段主要数据
@@ -129,6 +129,7 @@ import * as echarts from "echarts"; import * as BABYLON from "babylonjs" import * as BABYLON_GUI from "babylonjs-gui" import 'babylonjs-loaders'; +import 'animate.css'; export default { data() { return { @@ -180,12 +181,14 @@ export default { var windowHeight = window.innerHeight; var windowWidth = window.innerWidth; // 获取目标元素 + var dashboard = document.getElementsByClassName('dashboard')[0]; var left_main = document.getElementsByClassName('left_main')[0]; var left_other = document.getElementsByClassName('left_other')[0]; var right_main = document.getElementsByClassName('right_main')[0]; var right_other = document.getElementsByClassName('right_other')[0]; var model = document.getElementsByClassName('model')[0]; if (windowWidth > 960) { + dashboard.style.overflow = 'hidden'; // 设置目标元素的高度 left_main.style.position = 'absolute'; left_main.style.width = '20%'; @@ -205,6 +208,7 @@ export default { } else { + dashboard.style.overflow = 'auto'; var chartHeight = windowWidth*0.6; left_main.style.position = 'static'; left_main.style.width = '100%'; @@ -293,6 +297,7 @@ export default { that.initialTarget = camera.getTarget(); camera.upperBetaLimit = Math.PI / 2.2; //无法移动到地面以下 camera.attachControl(canvas, true); + camera.maxZ = 1000; // 调整适当的值 // 相机限制 camera.lowerRadiusLimit = 6; camera.upperRadiusLimit = 26; @@ -303,37 +308,24 @@ export default { // 全屏GUI const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI"); - + // 创建一个高亮层 + const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene); var name_panel = new BABYLON_GUI.StackPanel(); name_panel.isVertical = false - name_panel.top = '-30%'; + name_panel.top = '-40%'; name_panel.left = '-20%'; advancedTexture.addControl(name_panel); - var name_rect = new BABYLON_GUI.Rectangle(); - name_rect.width = "150px"; - name_rect.height = "40px"; - name_rect.cornerRadius = 10; - name_rect.color = "white"; - name_rect.thickness = 4; - name_rect.background = "gray"; - name_panel.addControl(name_rect); - - var name_text = new BABYLON_GUI.TextBlock(); - name_text.text = "托克逊建材厂"; - name_text.color = "white" - name_rect.addControl(name_text); - var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角"); - button_main.width = "100px" - button_main.height = "40px"; + button_main.width = "80px" + button_main.height = "30px"; button_main.color = "white"; button_main.cornerRadius = 20; button_main.background = "green"; name_panel.addControl(button_main) button_main.onPointerClickObservable.add(() => { + if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) { - name_rect.text = '托克逊建材厂'; var cameraPosition = new BABYLON.Vector3( 0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha), 0 + that.initialRadius * Math.cos(that.initialBeta), @@ -350,17 +342,25 @@ export default { BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) { scene.meshes.forEach(function (mesh) { - if (mesh.name.indexOf('.') != -1) { - mesh.actionManager = new BABYLON.ActionManager(scene); - mesh.actionManager.registerAction( - new BABYLON.ExecuteCodeAction( - BABYLON.ActionManager.OnPickTrigger, - function (evt) { - name_text.text = mesh.name; - } - ) - ); - } + // if (mesh.name.indexOf('.') != -1) { + // mesh.actionManager = new BABYLON.ActionManager(scene); + // mesh.actionManager.registerAction( + // new BABYLON.ExecuteCodeAction( + // BABYLON.ActionManager.OnPointerOverTrigger, + // function (evt) { + // // 在选中的 mesh 上添加高亮效果 + // highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5)); + // } + // ), + // new BABYLON.ExecuteCodeAction( + // BABYLON.ActionManager.OnPointerOutTrigger, + // function (evt) { + // // 移除效果 + // highlightLayer.removeMesh() + // } + // ) + // ); + // } if (mesh.name == '柱体.023') { const rect1 = new BABYLON_GUI.Rectangle(); rect1.width = 0.06; @@ -432,11 +432,36 @@ export default { that.loadedPercent = loadedPercent; }) + var checkbox = new BABYLON_GUI.Checkbox(); + checkbox.width = "20px"; + checkbox.height = "20px"; + checkbox.isChecked = false; + checkbox.marginLeft = '16px' + checkbox.color = "green"; + checkbox.onIsCheckedChangedObservable.add(function(value) { + if(value){ + camera.useAutoRotationBehavior = true; + }else{ + camera.useAutoRotationBehavior = false; + } + }); + name_panel.addControl(checkbox); + + var header = new BABYLON_GUI.TextBlock(); + + header.text = "自动旋转"; + header.width = "80px"; + header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT; + header.color = "white"; + name_panel.addControl(header); + + // checkbox.isChecked = true; //默认开启自动旋转 return scene; }; const scene = createScene(); //Call the createScene function + // Register a render loop to repeatedly render the scene engine.runRenderLoop(function () { scene.render(); @@ -487,7 +512,7 @@ header { #loadingScreen { position: absolute; width: 100%; - height: 100%; + top: 260px; color: white; display:flex; align-items:center;