zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 大屏优化

This commit is contained in:
caoqianming 2023-08-17 09:16:26 +08:00
parent 10656c643a
commit be7bd541fd
3 changed files with 60 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

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

2
src/config/route.js
View File

@ -74,7 +74,7 @@ const routes = [
"path": "/bigScreen2",
"name": "bigScreen2",
"meta": {
"title": "驾驶舱2",
"title": "能管大屏",
"icon": "el-icon-position",
"perms": ["bigScreen2"],
"fullpage": true,

91
src/views/bigScreen/index_enm.vue
View File

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