feat: 大屏优化

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",

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,

src/views/bigScreen/index_enm.vue

@@ -5,7 +5,7 @@
     </header>
 
 
-    <div class="left_main">
+    <div class="left_main animate__animated animate__zoomIn">
       <div class="panel">
         <div class="panel_title">全厂主要数据</div>
         <el-row :gutter="16" style="height: 34px;">
@@ -52,7 +52,7 @@
       </div>
       <canvas id="renderCanvas" ></canvas>
     </div>
-    <div class="right_main">
+    <div class="right_main animate__animated animate__zoomIn">
       <div class="panel">
         <div class="panel_title">工段主要数据</div>
         <el-row :gutter="16" style="height: 34px;">
@@ -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.width = "80px"
-        button_main.height = "40px";
+        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) {
+            // if (mesh.name.indexOf('.') != -1) {
-              mesh.actionManager = new BABYLON.ActionManager(scene);
+            //   mesh.actionManager = new BABYLON.ActionManager(scene);
-              mesh.actionManager.registerAction(
+            //   mesh.actionManager.registerAction(
-                new BABYLON.ExecuteCodeAction(
+            //     new BABYLON.ExecuteCodeAction(
-                  BABYLON.ActionManager.OnPickTrigger,
+            //       BABYLON.ActionManager.OnPointerOverTrigger,
-                  function (evt) {
+            //       function (evt) {
-                    name_text.text = mesh.name;
+            //         // 在选中的 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;