This commit is contained in:
shijing 2023-08-17 09:36:54 +08:00
commit 9caf5a3690
3 changed files with 101 additions and 75 deletions

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

View File

@ -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": [
{

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;