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..cf453a78 100644 --- a/src/config/route.js +++ b/src/config/route.js @@ -55,7 +55,7 @@ const routes = [ "title": "控制台", "icon": "el-icon-monitor", "affix": true, - "perms": ["bi"] + "perms": ["enm"] }, "component": "home/enm_home" }, @@ -74,7 +74,7 @@ const routes = [ "path": "/bigScreen2", "name": "bigScreen2", "meta": { - "title": "驾驶舱2", + "title": "能管大屏", "icon": "el-icon-position", "perms": ["bigScreen2"], "fullpage": true, @@ -143,7 +143,7 @@ const routes = [ "title": "电石渣", "icon": "el-icon-opportunity", "type": "menu", - "perms": ["bi"] + "perms": ["enm"] }, "children": [ { @@ -152,7 +152,7 @@ const routes = [ "meta": { "title": "生产报告", "icon": "el-icon-document", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_slag/report" }, @@ -162,7 +162,7 @@ const routes = [ "meta": { "title": "单位产品电耗", "icon": "el-icon-odometer", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_slag/power" }, @@ -172,7 +172,7 @@ const routes = [ "meta": { "title": "班组月度对比", "icon": "el-icon-operation", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_slag/teamAnalysis" }, @@ -182,7 +182,7 @@ const routes = [ "meta": { "title": "车间单耗分析", "icon": "el-icon-data-line", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_slag/workshopAnalysis" }, @@ -192,7 +192,7 @@ const routes = [ "meta": { "title": "交接班日志", "icon": "el-icon-document-copy", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_slag/handoverLog" }, @@ -205,7 +205,7 @@ const routes = [ "title": "原料磨", "icon": "el-icon-list", "type": "menu", - "perms": ["bi"] + "perms": ["enm"] }, "children": [ { @@ -214,7 +214,7 @@ const routes = [ "meta": { "title": "生产报告", "icon": "el-icon-document", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_rm/report" }, @@ -224,7 +224,7 @@ const routes = [ "meta": { "title": "单位产品电耗", "icon": "el-icon-odometer", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_rm/power" }, @@ -234,7 +234,7 @@ const routes = [ "meta": { "title": "班组月度对比", "icon": "el-icon-operation", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_rm/teamAnalysis" }, @@ -244,7 +244,7 @@ const routes = [ "meta": { "title": "车间单耗分析", "icon": "el-icon-data-line", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_rm/workshopAnalysis" }, @@ -254,7 +254,7 @@ const routes = [ "meta": { "title": "交接班日志", "icon": "el-icon-document-copy", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_rm/handoverLog" }, @@ -267,7 +267,7 @@ const routes = [ "title": "回转窑", "icon": "el-icon-menu", "type": "menu", - "perms": ["bi"] + "perms": ["enm"] }, "children": [ { @@ -276,7 +276,7 @@ const routes = [ "meta": { "title": "生产报告", "icon": "el-icon-document", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_kiln/report" }, @@ -286,7 +286,7 @@ const routes = [ "meta": { "title": "单位产品电耗", "icon": "el-icon-odometer", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_kiln/power" }, @@ -296,7 +296,7 @@ const routes = [ "meta": { "title": "班组月度对比", "icon": "el-icon-operation", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_kiln/teamAnalysis" }, @@ -306,7 +306,7 @@ const routes = [ "meta": { "title": "车间单耗分析", "icon": "el-icon-data-line", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_kiln/workshopAnalysis" }, @@ -316,7 +316,7 @@ const routes = [ "meta": { "title": "交接班日志", "icon": "el-icon-document-copy", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_kiln/handoverLog" }, @@ -329,7 +329,7 @@ const routes = [ "title": "煤磨", "icon": "el-icon-brush-filled", "type": "menu", - "perms": ["bi"] + "perms": ["enm"] }, "children": [ { @@ -338,7 +338,7 @@ const routes = [ "meta": { "title": "生产报告", "icon": "el-icon-document", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_coal/report" }, @@ -348,7 +348,7 @@ const routes = [ "meta": { "title": "单位产品电耗", "icon": "el-icon-odometer", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_coal/power" }, @@ -358,7 +358,7 @@ const routes = [ "meta": { "title": "班组月度对比", "icon": "el-icon-operation", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_coal/teamAnalysis" }, @@ -368,7 +368,7 @@ const routes = [ "meta": { "title": "车间单耗分析", "icon": "el-icon-data-line", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_coal/workshopAnalysis" }, @@ -378,7 +378,7 @@ const routes = [ "meta": { "title": "交接班日志", "icon": "el-icon-document-copy", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_coal/handoverLog" }, @@ -391,7 +391,7 @@ const routes = [ "title": "水泥磨", "icon": "el-icon-help-filled", "type": "menu", - "perms": ["bi"] + "perms": ["enm"] }, "children": [ { @@ -400,7 +400,7 @@ const routes = [ "meta": { "title": "生产报告", "icon": "el-icon-document", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_mill/report" }, @@ -410,7 +410,7 @@ const routes = [ "meta": { "title": "单位产品电耗", "icon": "el-icon-odometer", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_mill/power" }, @@ -420,7 +420,7 @@ const routes = [ "meta": { "title": "班组月度对比", "icon": "el-icon-operation", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_mill/teamAnalysis" }, @@ -430,7 +430,7 @@ const routes = [ "meta": { "title": "车间单耗分析", "icon": "el-icon-data-line", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_mill/workshopAnalysis" }, @@ -440,7 +440,7 @@ const routes = [ "meta": { "title": "交接班日志", "icon": "el-icon-document-copy", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_mill/handoverLog" }, @@ -453,7 +453,7 @@ const routes = [ "title": "水泥包装", "icon": "el-icon-goods-filled", "type": "menu", - "perms": ["bi"] + "perms": ["enm"] }, "children": [ { @@ -462,7 +462,7 @@ const routes = [ "meta": { "title": "生产报告", "icon": "el-icon-document", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_pack/report" }, @@ -472,7 +472,7 @@ const routes = [ // "meta": { // "title": "单位产品电耗", // "icon": "el-icon-grid", - // "perms": ["bi"] + // "perms": ["enm"] // }, // "component": "enm_pack/power" // }, @@ -482,7 +482,7 @@ const routes = [ "meta": { "title": "班组月度对比", "icon": "el-icon-operation", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_pack/teamAnalysis" }, @@ -492,7 +492,7 @@ const routes = [ "meta": { "title": "车间单耗分析", "icon": "el-icon-data-line", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_pack/workshopAnalysis" }, @@ -502,7 +502,7 @@ const routes = [ "meta": { "title": "交接班日志", "icon": "el-icon-document-copy", - "perms": ["bi"] + "perms": ["enm"] }, "component": "enm_pack/handoverLog" }, @@ -1120,7 +1120,7 @@ const routes = [ "title": "基础配置", "icon": "el-icon-management", "type": "menu", - "perms": ["bi"] + "perms": ["enm"] }, "children": [ { @@ -1173,7 +1173,7 @@ const routes = [ "title": "每月配置", "icon": "el-icon-checked", "type": "menu", - "perms": ["bi"] + "perms": ["enm"] }, "children": [ { @@ -1215,7 +1215,7 @@ const routes = [ "title": "全厂能源", "icon": "el-icon-share", "type": "menu", - "perms": ["bi"] + "perms": ["enm"] }, "children": [ @@ -1258,7 +1258,7 @@ const routes = [ "title": "全厂报表", "icon": "el-icon-histogram", "type": "menu", - "perms": ["bi"] + "perms": ["enm"] }, "children": [ { 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;