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": { "dependencies": {
"@element-plus/icons-vue": "2.0.10", "@element-plus/icons-vue": "2.0.10",
"@tinymce/tinymce-vue": "5.0.0", "@tinymce/tinymce-vue": "5.0.0",
"animate.css": "^4.1.1",
"axios": "1.3.4", "axios": "1.3.4",
"babylon": "^6.18.0", "babylon": "^6.18.0",
"babylonjs": "^6.16.0", "babylonjs": "^6.16.0",

View File

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

View File

@ -5,7 +5,7 @@
</header> </header>
<div class="left_main"> <div class="left_main animate__animated animate__zoomIn">
<div class="panel"> <div class="panel">
<div class="panel_title">全厂主要数据</div> <div class="panel_title">全厂主要数据</div>
<el-row :gutter="16" style="height: 34px;"> <el-row :gutter="16" style="height: 34px;">
@ -52,7 +52,7 @@
</div> </div>
<canvas id="renderCanvas" ></canvas> <canvas id="renderCanvas" ></canvas>
</div> </div>
<div class="right_main"> <div class="right_main animate__animated animate__zoomIn">
<div class="panel"> <div class="panel">
<div class="panel_title">工段主要数据</div> <div class="panel_title">工段主要数据</div>
<el-row :gutter="16" style="height: 34px;"> <el-row :gutter="16" style="height: 34px;">
@ -129,6 +129,7 @@ import * as echarts from "echarts";
import * as BABYLON from "babylonjs" import * as BABYLON from "babylonjs"
import * as BABYLON_GUI from "babylonjs-gui" import * as BABYLON_GUI from "babylonjs-gui"
import 'babylonjs-loaders'; import 'babylonjs-loaders';
import 'animate.css';
export default { export default {
data() { data() {
return { return {
@ -180,12 +181,14 @@ export default {
var windowHeight = window.innerHeight; var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth; var windowWidth = window.innerWidth;
// //
var dashboard = document.getElementsByClassName('dashboard')[0];
var left_main = document.getElementsByClassName('left_main')[0]; var left_main = document.getElementsByClassName('left_main')[0];
var left_other = document.getElementsByClassName('left_other')[0]; var left_other = document.getElementsByClassName('left_other')[0];
var right_main = document.getElementsByClassName('right_main')[0]; var right_main = document.getElementsByClassName('right_main')[0];
var right_other = document.getElementsByClassName('right_other')[0]; var right_other = document.getElementsByClassName('right_other')[0];
var model = document.getElementsByClassName('model')[0]; var model = document.getElementsByClassName('model')[0];
if (windowWidth > 960) { if (windowWidth > 960) {
dashboard.style.overflow = 'hidden';
// //
left_main.style.position = 'absolute'; left_main.style.position = 'absolute';
left_main.style.width = '20%'; left_main.style.width = '20%';
@ -205,6 +208,7 @@ export default {
} }
else { else {
dashboard.style.overflow = 'auto';
var chartHeight = windowWidth*0.6; var chartHeight = windowWidth*0.6;
left_main.style.position = 'static'; left_main.style.position = 'static';
left_main.style.width = '100%'; left_main.style.width = '100%';
@ -293,6 +297,7 @@ export default {
that.initialTarget = camera.getTarget(); that.initialTarget = camera.getTarget();
camera.upperBetaLimit = Math.PI / 2.2; // camera.upperBetaLimit = Math.PI / 2.2; //
camera.attachControl(canvas, true); camera.attachControl(canvas, true);
camera.maxZ = 1000; //
// //
camera.lowerRadiusLimit = 6; camera.lowerRadiusLimit = 6;
camera.upperRadiusLimit = 26; camera.upperRadiusLimit = 26;
@ -303,37 +308,24 @@ export default {
// GUI // GUI
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI"); const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
//
const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
var name_panel = new BABYLON_GUI.StackPanel(); var name_panel = new BABYLON_GUI.StackPanel();
name_panel.isVertical = false name_panel.isVertical = false
name_panel.top = '-30%'; name_panel.top = '-40%';
name_panel.left = '-20%'; name_panel.left = '-20%';
advancedTexture.addControl(name_panel); 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", "主视角"); 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.color = "white";
button_main.cornerRadius = 20; button_main.cornerRadius = 20;
button_main.background = "green"; button_main.background = "green";
name_panel.addControl(button_main) name_panel.addControl(button_main)
button_main.onPointerClickObservable.add(() => { button_main.onPointerClickObservable.add(() => {
if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) { if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
name_rect.text = '托克逊建材厂';
var cameraPosition = new BABYLON.Vector3( var cameraPosition = new BABYLON.Vector3(
0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha), 0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha),
0 + that.initialRadius * Math.cos(that.initialBeta), 0 + that.initialRadius * Math.cos(that.initialBeta),
@ -350,17 +342,25 @@ export default {
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) { BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
scene.meshes.forEach(function (mesh) { 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') { if (mesh.name == '柱体.023') {
const rect1 = new BABYLON_GUI.Rectangle(); const rect1 = new BABYLON_GUI.Rectangle();
rect1.width = 0.06; rect1.width = 0.06;
@ -432,11 +432,36 @@ export default {
that.loadedPercent = loadedPercent; 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; return scene;
}; };
const scene = createScene(); //Call the createScene function const scene = createScene(); //Call the createScene function
// Register a render loop to repeatedly render the scene // Register a render loop to repeatedly render the scene
engine.runRenderLoop(function () { engine.runRenderLoop(function () {
scene.render(); scene.render();
@ -487,7 +512,7 @@ header {
#loadingScreen { #loadingScreen {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; top: 260px;
color: white; color: white;
display:flex; display:flex;
align-items:center; align-items:center;