From 99ac0298c789e4321bd65a85bbc1ba2dc55ba0c4 Mon Sep 17 00:00:00 2001 From: shijing Date: Wed, 12 Jun 2024 10:14:01 +0800 Subject: [PATCH] =?UTF-8?q?index=5Fenm=5Fly=E6=94=B9=E5=8A=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/bigScreen/index_enm_ly.vue | 919 ++++++++++++++++++++++++--- 1 file changed, 831 insertions(+), 88 deletions(-) diff --git a/src/views/bigScreen/index_enm_ly.vue b/src/views/bigScreen/index_enm_ly.vue index ee993b56..9ccbf0ce 100644 --- a/src/views/bigScreen/index_enm_ly.vue +++ b/src/views/bigScreen/index_enm_ly.vue @@ -101,9 +101,7 @@ - -
- +
@@ -218,12 +216,19 @@ import tool from "@/utils/tool"; import config from "@/config"; import * as echarts from "echarts"; -import Cesium from "./cesiumtest.vue"; +import * as BABYLON from "babylonjs"; +import * as BABYLON_GUI from "babylonjs-gui"; +import * as BABYLON_GRID from "@/utils/gridMaterial"; +import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"; +BABYLON.DracoCompression.Configuration.decoder.wasmUrl = + "./draco_wasm_wrapper_gltf.js"; +BABYLON.DracoCompression.Configuration.decoder.wasmBinaryUrl = + "./draco_decoder_gltf.wasm"; +BABYLON.DracoCompression.Configuration.decoder.fallbackUrl = + "./draco_decoder_gltf.js"; +import "babylonjs-loaders"; import "animate.css"; export default { - components: { - Cesium, - }, data() { return { query: { @@ -235,7 +240,6 @@ export default { factoryData: {}, sectionData: {}, nowDay: 1, - factoryName: "0", initialAlpha: -Math.PI / 0.89, initialBeta: Math.PI / 3.3, initialRadius: 18, @@ -247,12 +251,13 @@ export default { // engine: null, loadedPercent: 0, sectionNames: { - 0: "石灰石破碎", - 1: "原料磨", - 2: "回转窑", - 3: "余热发电", - 4: "煤磨", + 堆取料库_primitive0: "石灰石破碎", + 柱体_primitive0: "原料磨", + 熟料库_primitive0: "回转窑", + 主体结构: "余热发电", + 煤均化库_primitive1: "煤磨", }, + factoryName: "", showKgcet: true, currentLightMesh: null, activeSection: 2, @@ -261,46 +266,74 @@ export default { basicOption: { color: "rgb(1,235,239)", backgroundColor: "", + tooltip: { + show: true, + trigger: "axis", + axisPointer: { + type: "cross", // 'line' 直线指示器 'shadow' 阴影指示器 'none' 无指示器 'cross' 十字准星指示器。 + // axis: "auto", // 指示器的坐标轴。 + snap: true, // 坐标轴指示器是否自动吸附到点上 + }, + showContent: true, + }, xAxis: { + boundaryGap: false, + axisTick: { + show: false, + }, data: ["一月", "二月", "三月", "四月", "五月", "六月"], }, - yAxis: { type: "value" }, + yAxis: { + show: false, + type: "value", + axisLine: false, + splitLine: false, + axisLable: { show: false }, + }, + series: [ { name: "销量", type: "bar", - barwidth: 10, + barWidth: 15, label: { show: true, position: "top", }, itemStyle: { + borderRadius: [7, 7, 0, 0], color: new echarts.graphic.LinearGradient( 0, 0, 0, 1, [ - { offset: 0, color: "#83bff6" }, - { offset: 0.5, color: "#188df0" }, - { offset: 1, color: "#188df0" }, + { offset: 0, color: "#42cbd4" }, + { offset: 0.3, color: "#129fb2" }, + { offset: 1, color: "rgb(4, 100, 121)" }, ] ), }, - emphasis: { - itemStyle: { - color: new echarts.graphic.LinearGradient( - 0, - 0, - 0, - 1, - [ - { offset: 0, color: "#2378f7" }, - { offset: 0.7, color: "#2378f7" }, - { offset: 1, color: "#83bff6" }, - ] - ), - }, + smooth: true, + lineStyle: { width: 2, color: "rgb(4, 100, 121)" }, + areaStyle: { + opacity: 0.5, + color: new echarts.graphic.LinearGradient( + 0, + 0, + 0, + 1, + [ + { + offset: 0, + color: "rgb(4, 100, 121)", + }, + { + offset: 1, + color: "rgb(8, 50, 65)", + }, + ] + ), }, data: [], }, @@ -308,8 +341,8 @@ export default { grid: { // 让图表占满容器 top: "10%", - left: "12%", - right: "0px", + left: "5%", + right: "5%", bottom: "15%", }, }, @@ -335,11 +368,12 @@ export default { path: "ws://49.232.14.174:2226/ws/my/?token=", ws: null, mgroupValues: { - 石灰石破碎: { total: "0", elec: "0" }, + 电石渣: { total: "0", elec: "0" }, 原料磨: { total: "0", elec: "0" }, 煤磨: { total: "0", elec: "0" }, 回转窑: { total: "0", elec: "0" }, - 余热发电: { total: "0", elec: "0" }, + 水泥磨: { total: "0", elec: "0" }, + 水泥包装: { total: "0", elec: "0" }, }, sectionDatas: { 回转窑: { @@ -351,7 +385,7 @@ export default { charts_prod: [2530, 2698, 2600, 2550, 2610, 2000], charts_rate: [100, 100, 100, 100, 100, 100], }, - 石灰石破碎: { + 电石渣: { elec_consume_unit: 4, total_production: 1523, coal_consume_unit: "", @@ -369,7 +403,16 @@ export default { charts_prod: [3204, 3500, 3385, 3461, 3359, 2000], charts_rate: [100, 100, 100, 100, 100, 100], }, - 余热发电: { + 煤磨: { + elec_consume_unit: 36, + total_production: 420, + coal_consume_unit: "", + run_rate: 100, + charts_ele: [35, 37, 36, 37, 36, 20], + charts_prod: [426, 445, 425, 449, 438, 265], + charts_rate: [100, 100, 100, 100, 100, 100], + }, + 水泥磨: { elec_consume_unit: 35, total_production: 3063, coal_consume_unit: "", @@ -378,7 +421,7 @@ export default { charts_prod: [3204, 3500, 3385, 3461, 3359, 2000], charts_rate: [100, 100, 100, 100, 100, 100], }, - 煤磨: { + 水泥包装: { elec_consume_unit: 2, total_production: 1000, coal_consume_unit: "", @@ -413,18 +456,20 @@ export default { myDate.getMinutes() + ":" + myDate.getSeconds(); - this.initDomStyle(); this.factoryName = that.$TOOL.data.get("BASE_INFO").base.base_name; + this.initDomStyle(); this.$nextTick(() => { + //获取本月全厂主要数据 this.$API.enm.enstat .req({ type: "month_s", month_s: month, year_s: year, page: 0 }) .then((res1) => { console.log("工段数据：", res1); + // debugger res1.forEach((item) => { - if (item.mgroup_name == "石灰石破碎") { - that.mgroupValues.石灰石破碎.total = + if (item.mgroup_name == "电石渣") { + that.mgroupValues.电石渣.total = item.total_production + ""; - that.mgroupValues.石灰石破碎.elec = + that.mgroupValues.电石渣.elec = item.elec_consume_unit + ""; } else if (item.mgroup_name == "原料磨") { that.mgroupValues.原料磨.total = @@ -441,16 +486,21 @@ export default { item.total_production + ""; that.mgroupValues.回转窑.elec = item.elec_consume_unit + ""; - } else if (item.mgroup_name == "余热发电") { - that.mgroupValues.余热发电.total = + } else if (item.mgroup_name == "水泥磨") { + that.mgroupValues.水泥磨.total = item.total_production + ""; - that.mgroupValues.余热发电.elec = + that.mgroupValues.水泥磨.elec = + item.elec_consume_unit + ""; + } else if (item.mgroup_name == "水泥包装") { + that.mgroupValues.水泥包装.total = + item.total_production + ""; + that.mgroupValues.水泥包装.elec = item.elec_consume_unit + ""; } }); }); setTimeout(function () { - // that.initFactory(); + that.initFactory(); }, 1000); }); let month1 = month > 9 ? month : "0" + month; @@ -574,12 +624,11 @@ export default { cair_consume: 676534, }; this.mgroupValues = { - 电石渣: { total: 1523, elec: 4 }, + 石灰石破碎: { total: 1523, elec: 4 }, 原料磨: { total: 3230, elec: 15 }, - 煤磨: { total: 420, elec: 36 }, 回转窑: { total: 2541, elec: 29 }, - 水泥磨: { total: 3063, elec: 35 }, - 水泥包装: { total: 1000, elec: 2 }, + 余热发电: { total: 1000, elec: 2 }, + 煤磨: { total: 420, elec: 36 }, }; this.sectionData = this.sectionDatas[this.activeSectionName]; setInterval(() => { @@ -614,7 +663,7 @@ export default { data.getSeconds(); }, 10000); }, - + //获取全厂 getFactoryData() { var that = this; that.$API.enm.enstat2.req(that.query).then((res) => { @@ -722,6 +771,9 @@ export default { name: "电耗", type: "bar", barWidth: 15, + itemStyle: { + borderRadius: [7, 7, 0, 0], + }, label: { show: true, position: "top", @@ -729,26 +781,63 @@ export default { emphasis: { focus: "series", }, + color: "#129fb2", data: that.seriesData1, }, ]; that.setChart("chart1", that.chart1Option); this.chart2Option = deepCopy(that.basicOption); this.chart2Option.series[0].type = "line"; - (this.chart2Option.series[1] = { + this.chart2Option.series[0].smooth = true; + // this.chart2Option.series[0].showSymbol = false; + this.chart2Option.series[0].lineStyle = { + width: 2, + color: "rgb(255, 191, 0)", + }; + this.chart2Option.series[0].areaStyle = { + opacity: 0.5, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgb(255, 191, 0)", + }, + { + offset: 1, + color: "rgb(224, 62, 76)", + }, + ]), + }; + this.chart2Option.series[1] = { name: "工业水", type: "line", - barWidth: 15, + smooth: true, label: { show: true, position: "top", }, + // showSymbol: false, + lineStyle: { + width: 2, + }, + areaStyle: { + opacity: 0.5, + color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ + { + offset: 0, + color: "rgb(35, 223, 245)", + }, + { + offset: 1, + color: "rgb(128, 255, 254)", + }, + ]), + }, emphasis: { focus: "series", }, data: that.seriesData2_2, - }), - (this.chart2Option.series[0].data = that.seriesData2); + }; + this.chart2Option.series[0].data = that.seriesData2; this.setChart("chart2", this.chart2Option); this.chart3Option = deepCopy(that.basicOption); this.chart3Option.series = [ @@ -756,6 +845,14 @@ export default { name: "压缩空气", type: "bar", barWidth: 15, + itemStyle: { + borderRadius: [7, 7, 0, 0], + }, + color: "#42cbd4", + label: { + show: true, + position: "top", + }, emphasis: { focus: "series", }, @@ -773,6 +870,9 @@ export default { this.chart4Option = deepCopy(that.basicOption); this.chart4Option.series[0].type = "bar"; this.chart4Option.series[0].barWidth = 20; + // this.chart4Option.series[0].itemStyle = { + // borderRadius: [2, 2, 0, 0], + // }; this.chart4Option.series[0].data = that.seriesData4; this.setChart("chart4", this.chart4Option); this.chart5Option = deepCopy(that.basicOption); @@ -809,6 +909,7 @@ export default { var right_main = document.getElementsByClassName("right_main")[0]; var right_other = document.getElementsByClassName("right_other")[0]; var model = document.getElementsByClassName("model")[0]; + // var renderCanvas = document.getElementById('renderCanvas'); if (windowWidth > 960) { dashboard.style.overflow = "hidden"; // 设置目标元素的高度 @@ -888,6 +989,669 @@ export default { } catch (error) {} }, 500); }, + //加载模型 + initFactory() { + var that = this; + const canvas = document.getElementById("renderCanvas"); // Get the canvas element + const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine + BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = + function () {}; + BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () { + document.getElementById("loadingScreen").style.display = "none"; + }; + engine.displayLoadingUI(); + const createScene = function () { + const scene = new BABYLON.Scene(engine); + // 加载背景图片 + const backgroundImage = new BABYLON.Layer( + "", + "img/photon_bg.png", + scene, + true + ); + const camera = new BABYLON.ArcRotateCamera( + "camera", + that.initialAlpha, + that.initialBeta, + that.initialRadius, + new BABYLON.Vector3(0, 0.1, 0.3) + ); + that.initialTarget = camera.getTarget(); + camera.lowerBetaLimit = Math.PI / 2.3; + camera.upperBetaLimit = Math.PI / 2.6; //无法移动到地面以下 + camera.attachControl(canvas, true); + camera.maxZ = 800; // 调整适当的值 + camera.wheelDeltaPercentage = 0.02; + // 相机限制 + camera.lowerRadiusLimit = 2; + camera.upperRadiusLimit = 10; + // 灯光 + const light = new BABYLON.HemisphericLight( + "light", + new BABYLON.Vector3(1, 1, 1) + ); + //光照强度 + light.intensity = 2; + // 启用阴影 + // light.shadowEnabled = true; + // 全屏GUI + const advancedTexture = + BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI( + "myUI" + ); + that.myui = advancedTexture; + // 创建一个高亮层 + const highlightLayer = new BABYLON.HighlightLayer( + "highlightLayer", + scene + ); + // 创建一个高亮材质 + var highlightMaterial = new BABYLON.StandardMaterial( + "highlightMaterial", + scene + ); + highlightMaterial.diffuseColor = new BABYLON.Color3(0, 1, 0); // 设置高亮颜色 + // 主控制区 + var control_main = new BABYLON_GUI.StackPanel(); + control_main.isVertical = false; + control_main.top = "-40%"; + control_main.left = "-20%"; + advancedTexture.addControl(control_main); + // 主视角按钮-start + var button_main = BABYLON_GUI.Button.CreateSimpleButton( + "button_main", + "主视角" + ); + button_main.width = "80px"; + button_main.height = "30px"; + button_main.color = "white"; + button_main.cornerRadius = 20; + button_main.background = "green"; + button_main.top = "100px"; + button_main.left = "0px"; + control_main.addControl(button_main); + button_main.onPointerClickObservable.add(() => { + if ( + camera.alpha != that.initialAlpha || + camera.beta != that.initialBeta || + camera.radius != that.initialRadius + ) { + var cameraPosition = new BABYLON.Vector3( + 0 + + that.initialRadius * + Math.sin(that.initialBeta) * + Math.cos(that.initialAlpha), + 0 + that.initialRadius * Math.cos(that.initialBeta), + 0 + + that.initialRadius * + Math.sin(that.initialBeta) * + Math.sin(that.initialAlpha) + ); + var ease = new BABYLON.CubicEase(); + ease.setEasingMode( + BABYLON.EasingFunction.EASINGMODE_EASEINOUT + ); + BABYLON.Animation.CreateAndStartAnimation( + "at6", + camera, + "position", + 45, + 200, + camera.position, + cameraPosition, + 0, + ease + ); + BABYLON.Animation.CreateAndStartAnimation( + "at61", + camera, + "target", + 45, + 200, + camera.target, + that.initialTarget, + 0, + ease + ); + } + }); + // 主视角按钮-end + + // 高亮显示mesh名 + const mesh_rect = new BABYLON_GUI.Rectangle("mesh_rect"); + mesh_rect.width = "200px"; + mesh_rect.height = "45px"; + mesh_rect.background = "rgb(75,240,234)"; + mesh_rect.alpha = 0.6; + mesh_rect.isVisible = false; + advancedTexture.addControl(mesh_rect); + var mesh_name = new BABYLON_GUI.TextBlock("mesh_name"); + mesh_name.text = ""; + mesh_name.color = "white"; + mesh_name.fontSize = "14px"; + mesh_rect.addControl(mesh_name); + var remoteGlbUrl = "/ly.glb"; + // var remoteGlbUrl = "/photon_tree.glb"; + BABYLON.SceneLoader.Append( + remoteGlbUrl, + "", + scene, + function (scene) { + var meshes = scene.meshes; + let ztsz = []; + let rmbabelbuild = []; + console.log("scene.meshes", scene.meshes); + function clickModel(index, model, name, code) { + if (index > -1) { + model.actionManager = new BABYLON.ActionManager( + scene + ); + model.actionManager.registerAction( + new BABYLON.ExecuteCodeAction( + BABYLON.ActionManager.OnLeftPickTrigger, + function (event) { + const sourceBox = + event.meshUnderPointer; + console.log( + "current click model %o", + sourceBox + ); + // Set camera + camera.lockedTarget = sourceBox; + // let rightContent = + // document.getElementById( + // "right" + // ); + // let leftContent = + // document.getElementById("left"); + // rightContent.style.display = "flex"; + // leftContent.style.display = "flex"; + var coords = { x: 0, y: 0 }; + + // setCurrentTitle(name); + // Show vertebral body + for ( + let i = 0; + i < ztsz.length; + i++ + ) { + ztsz[i].visibility = false; + } + ztsz[code].visibility = true; + ztsz[code + 1].visibility = true; + ztsz[code + 2].visibility = true; + // Vertebrum beat animation + const frameRate = 1; + const xSlide = + new BABYLON.Animation( + "xSlide", + "position.y", + frameRate, + BABYLON.Animation.ANIMATIONTYPE_FLOAT, + BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE + ); + const keyFrames = []; + // Keyframes + keyFrames.push({ + frame: 0, + value: 1, + }); + keyFrames.push({ + frame: frameRate, + value: 0, + }); + keyFrames.push({ + frame: 2 * frameRate, + value: 1, + }); + xSlide.setKeys(keyFrames); + // Play animation + ztsz[code].animations.push(xSlide); + scene.beginAnimation( + ztsz[code], + 0, + 2 * frameRate, + true + ); + removeLabel(rmbabelbuild); + createLabel(ztsz[code], name); + } + ) + ); + } + } + // Add click event + for (let i = 0; i < scene.meshes.length; i++) { + // Hide initial flag + if (scene.meshes[i].id.indexOf("锥体") !== -1) { + scene.meshes[i].visibility = false; + ztsz.push(meshes[i]); + } + // 石灰石破碎 + let bdz = + scene.meshes[i].id.indexOf( + "堆取料库_primitive0" + ); + clickModel(bdz, scene.meshes[i], "石灰石破碎", 15); + // 原料磨 + let ldcn = + scene.meshes[i].id.indexOf("柱体_primitive0"); + clickModel(ldcn, scene.meshes[i], "原料磨", 12); + // 回转窑 + let fbsgf = + scene.meshes[i].id.indexOf("熟料库_primitive0"); + clickModel(fbsgf, scene.meshes[i], "回转窑", 3); + // 余热发电 + let fbsnyz = scene.meshes[i].id.indexOf("主体结构"); + clickModel(fbsnyz, scene.meshes[i], "余热发电", 0); + // 煤磨 + let sjzx = + scene.meshes[i].id.indexOf( + "煤均化库_primitive1" + ); + clickModel(sjzx, scene.meshes[i], "煤磨", 9); + } + for (let key in that.sectionNames) { + const value = that.sectionNames[key]; + const mesh = scene.getMeshByName(key); + if (mesh) { + //建筑标签 + const rect1 = new BABYLON_GUI.Rectangle( + value + "_rect" + ); + rect1.width = "60px"; + rect1.height = "30px"; + rect1.cornerRadius = 4; + rect1.color = "Orange"; + rect1.thickness = 2; + rect1.background = "green"; + rect1.isPointerBlocker = true; // 防止点击穿透 + advancedTexture.addControl(rect1); + var label = new BABYLON_GUI.TextBlock( + value + "_label" + ); + label.text = value; + label.color = "white"; + label.fontSize = "14px"; + rect1.addControl(label); + rect1.linkWithMesh(mesh); + rect1.linkOffsetY = -30; + + rect1.onPointerDownObservable.add(() => { + const mesh = rect1.linkedMesh; + if (camera.target != mesh.position) { + // console.log('fly to') + // 计算新的相机位置 + let position = + mesh._parentNode._position; + if (mesh._parentNode.id == "__root__") { + position = mesh.position; + } + const cameraPosition = + new BABYLON.Vector3( + mesh.position.x + + 9 * + Math.sin(camera.beta) * + Math.cos(Math.PI), + mesh.position.y + + 9 * Math.cos(camera.beta), + mesh.position.z + + 9 * + Math.sin(camera.beta) * + Math.sin(Math.PI) + ); + var ease = new BABYLON.CubicEase(); + ease.setEasingMode( + BABYLON.EasingFunction + .EASINGMODE_EASEINOUT + ); + BABYLON.Animation.CreateAndStartAnimation( + "at5", + camera, + "position", + 45, + 200, + camera.position, + cameraPosition, + 0, + ease + ); + BABYLON.Animation.CreateAndStartAnimation( + "at51", + camera, + "target", + 45, + 200, + camera.target, + position, + 0, + ease + ); + } + // let dataViewName = rect1.name.split('_')[0] + '_data_view'; + let dataViewName = rect1.name.split("_")[0]; + that.activeSectionName = dataViewName; + that.activeSection = 2; + that.getMgroupChartData(dataViewName); + let dataView = + advancedTexture.getControlByName( + dataViewName + ); + if (dataView) { + // // 在这里进行矩形的操作 + // dataView.isVisible = true; + } + }); + // 创建一个数据展示层,创建一个StackPanel，用于容纳多个文本控件 + const data_view = new BABYLON_GUI.StackPanel( + value + "_data_view" + ); + data_view.width = "200px"; // StackPanel的宽度 + data_view.height = "140px"; + data_view.thickness = 1; + data_view.background = "rgba(0, 34, 51, 0.5)"; //暗色 + let mgroupName = new BABYLON_GUI.TextBlock( + value + "_label" + ); + mgroupName.height = "30px"; + mgroupName.width = "120px"; + mgroupName.color = "white"; + mgroupName.text = value; + mgroupName.shadowColor = "#66b1ff"; + mgroupName.shadowBlur = 5; + mgroupName.shadowOffsetX = -2; + mgroupName.shadowOffsetY = 2; + data_view.addControl(mgroupName); + const mgroup = new BABYLON_GUI.Rectangle( + "mgroup" + ); + mgroup.height = "3px"; + mgroup.width = "160px"; + mgroup.thickness = 0; + mgroup.background = "rgba(44, 237, 255, 0.45)"; + data_view.addControl(mgroup); + var grid = new BABYLON_GUI.Grid("grid"); + grid.width = "200px"; + grid.height = "70px"; + grid.paddingLeft = 1; + var wd = 2; + var hd = 2; + for (let i = 0; i < wd; i++) { + grid.addRowDefinition(1 / wd); + } + for (let j = 0; j < hd; j++) { + grid.addColumnDefinition(1 / hd); + } + for (let i = 0; i < wd; i++) { + for (let j = 0; j < hd; j++) { + var rc = new BABYLON_GUI.TextBlock( + "rc" + i + j + ); + rc.width = "100%"; + // rc.height = "100%"; + rc.thickness = 0; + if (j == 0 && i == 0) { + rc.width = "120px"; + rc.text = "产品产量："; + rc.color = "white"; + rc.fontSize = "16px"; + } else if (j == 0 && i == 1) { + rc.width = "120px"; + rc.color = "white"; + rc.fontSize = "16px"; + rc.text = "单位产品电耗："; + } else if (j == 1 && i == 0) { + // rc.text = that.mgroupValues[value].total; + rc.text = + that.mgroupValues[value].total; + rc.width = "80px"; + rc.fontSize = "18px"; + rc.color = "rgb(44,237,255)"; + } else if (j == 1 && i == 1) { + // rc.text = that.mgroupValues[value].total; + rc.text = + that.mgroupValues[value].elec; + rc.width = "80px"; + rc.fontSize = "18px"; + rc.color = "rgb(44,237,255)"; + } + grid.addControl(rc, i, j); + } + } + data_view.addControl(grid); + data_view.isVisible = false; + var mgroup_close = + BABYLON_GUI.Button.CreateSimpleButton( + "mgroup_close" + value, + "关闭" + ); + mgroup_close.width = "70px"; + mgroup_close.height = "25px"; + mgroup_close.color = "white"; + mgroup_close.cornerRadius = 15; + mgroup_close.fontSize = "12px"; + mgroup_close.background = "rgb(44,237,255,.5)"; + mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5; + mgroup_close.onPointerClickObservable.add( + () => { + console.log("data_view", data_view); + data_view.isVisible = false; + } + ); + data_view.addControl(mgroup_close); + // 将StackPanel添加到GUI系统中 + advancedTexture.addControl(data_view); + data_view.linkWithMesh(mesh); + data_view.linkOffsetY = -120; + if (value == "电石渣") { + data_view.linkOffsetY = -290; + } + } + } + //关闭灯光 + // scene.lights[1].setEnabled(false); + engine.hideLoadingUI(); + }, + //进度条 + function (evt) { + var loadedPercent = 0; + if (evt.lengthComputable) { + loadedPercent = parseInt( + (evt.loaded * 100) / evt.total + ); + } else { + var dlCount = evt.loaded / (1024 * 1024); + loadedPercent = Math.round(dlCount * 100.0) / 100.0; + } + that.loadedPercent = loadedPercent; + } + ); + // 自动旋转checkbox-start + var checkbox = new BABYLON_GUI.Checkbox(); + checkbox.width = "20px"; + checkbox.height = "20px"; + checkbox.isChecked = false; + checkbox.marginLeft = "16px"; + checkbox.color = "green"; + checkbox.top = "100px"; + checkbox.onIsCheckedChangedObservable.add(function (value) { + if (value) { + camera.useAutoRotationBehavior = true; + } else { + camera.useAutoRotationBehavior = false; + } + }); + control_main.addControl(checkbox); + var header = new BABYLON_GUI.TextBlock(); + header.text = "自动旋转"; + header.width = "80px"; + header.textHorizontalAlignment = + BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT; + header.color = "white"; + header.top = "100px"; + control_main.addControl(header); + // 自动旋转checkbox-end + // 添加抓取事件 + const hl1 = new BABYLON.HighlightLayer("hl1", scene); + const hl1Click = new BABYLON.HighlightLayer("hl1Click", scene); + canvas.addEventListener("mousemove", (event) => { + // 使用 scene.pick 检测鼠标拾取 + const pickResult = scene.pick( + scene.pointerX, + scene.pointerY + ); + if (that.currentLightMesh) { + mesh_rect.isVisible = false; + + highlightLayer.removeAllMeshes(); + } + if (pickResult.hit) { + const mesh = pickResult.pickedMesh; + highlightLayer.removeAllMeshes(); + if ( + /.*[\u4e00-\u9fa5]+.*$/.test(mesh.name) && + mesh.name !== "立方体.041" && + mesh.name !== "立方体.028" && + mesh.name !== "平面" && + mesh.name !== "停车场" + ) { + // 在选中的 mesh 上添加高亮效果 + highlightLayer.addMesh( + mesh, + new BABYLON.Color3(1, 1, 0.5) + ); + that.currentLightMesh = mesh; + mesh_rect.linkWithMesh(mesh); + let name = mesh.name.split(".")[0]; + mesh_name.text = name; + mesh_rect.isVisible = true; + } + } else { + that.infoVisibel = false; + } + }); + canvas.addEventListener("click", (event) => { + // 使用 scene.pick 检测鼠标拾取 + const pickResult = scene.pick( + scene.pointerX, + scene.pointerY + ); + if (pickResult.hit) { + const mesh = pickResult.pickedMesh; + // console.log('mesh', mesh) + if (that.nodesLists[mesh.name]) { + that.getDeptClickData(that.nodesLists[mesh.name]); + hl1Click.removeAllMeshes(); + highlightLayer.removeAllMeshes(); + highlightLayer.addMesh( + mesh, + new BABYLON.Color3(0.1, 0.9, 0.9) + ); + hl1Click.addMesh( + mesh, + new BABYLON.Color3( + 12 / 255, + 250 / 255, + 252 / 255 + ), + true + ); + hl1Click.blurVerticalSize = 5; + hl1Click.blurHorizontalSize = 5; + that.currentData.deptName = + that.nodesLists[mesh.name]; + if (camera.target != mesh.position) { + that.clickVisible = true; + var img = "public/img/user.png"; + var text = "这里是你的文本"; + var billboard = new BABYLON.Billboard( + "billboard", + img, + scene + ); + billboard.position = mesh.position.add( + new BABYLON.Vector3( + position.x + + 1.8 * Math.sin(camera.beta), + position.y + 4 * Math.cos(camera.beta), + position.z - 0.2 * Math.sin(camera.beta) + ) + ); + billboard.size = 2; + billboard.text = text; + // 设置文本的样式（可选） + billboard.fontSize = 12; // 设置文字大小 + billboard.color = BABYLON.Color3.White(); // 设置文字颜色 + billboard.textHorizontalAlignment = + BABYLON.TextHorizontalAlignment.CENTER; // 设置文字水平对齐方式 + billboard.textVerticalAlignment = + BABYLON.TextVerticalAlignment.TOP; // 设置文字垂直对齐方式 + scene.registerBeforeRender(function () { + billboard.position = mesh.position.add( + new BABYLON.Vector3( + position.x + + 1.8 * Math.sin(camera.beta), + position.y + + 4 * Math.cos(camera.beta), + position.z - + 0.2 * Math.sin(camera.beta) + ) + ); // 确保Billboard随着模型移动 + }); + + // 计算新的相机位置 + let position = mesh._parentNode._position; + if (mesh._parentNode.id == "__root__") { + position = mesh.position; + } + const cameraPosition = new BABYLON.Vector3( + position.x + 1.8 * Math.sin(camera.beta), + position.y + 4 * Math.cos(camera.beta), + position.z - 0.2 * Math.sin(camera.beta) + ); + var ease = new BABYLON.CubicEase(); + ease.setEasingMode( + BABYLON.EasingFunction.EASINGMODE_EASEINOUT + ); + BABYLON.Animation.CreateAndStartAnimation( + "meshclick", + camera, + "position", + 45, + 200, + camera.position, + cameraPosition, + 0, + ease + ); + BABYLON.Animation.CreateAndStartAnimation( + "at51", + camera, + "target", + 45, + 200, + camera.target, + position, + 0, + ease + ); + } + } + } + }); + return scene; + }; + const scene = createScene(); //Call the createScene function + // scene.debugLayer.show(); + engine.runRenderLoop(function () { + scene.render(); + }); + this.engine = engine; + this.scene = scene; + window.addEventListener("resize", function () { + engine.resize(); + }); + }, handleSectionClick(val, index) { let that = this; this.activeSectionName = val; @@ -941,8 +1705,8 @@ export default { // 移除属性 element.classList.remove("animate__fadeIn"); }); - // const sectionUI = this.myui.getControlByName(val + "_rect"); - // sectionUI.onPointerDownObservable.notifyObservers(); + const sectionUI = this.myui.getControlByName(val + "_rect"); + sectionUI.onPointerDownObservable.notifyObservers(); }); }, getMgroupChartData(name) { @@ -957,31 +1721,6 @@ export default { this.sectionDatas[this.activeSectionName].charts_rate; that.initCharts1(); console.log(this.sectionData, this.activeSectionName); - // 模拟数据 - // var that = this; - // let obj = {}; - // obj.type = 'month_s'; - // obj.start_time = that.start_time; - // obj.end_time = that.end_time; - // obj.mgroup__name = name; - // obj.page = 0; - // this.$API.enm.enstat.req(obj).then((res) => { - // let list0 = res.sort(this.compare('month_s')); - // let list = list0.sort(this.compare('year_s')); - // let seriesData4 = [0, 0, 0, 0, 0, 0], - // seriesData5 = [0, 0, 0, 0, 0, 0], - // seriesData6 = [0, 0, 0, 0, 0, 0]; - // list.forEach(item => { - // let index = that.arrMonth.indexOf(item.month_s); - // seriesData4[index] = Number(item.elec_consume_unit) - // seriesData5[index] = Number(item.total_production) - // seriesData6[index] = Number(item.run_rate) - // }) - // that.seriesData4 = seriesData4; - // that.seriesData5 = seriesData5; - // that.seriesData6 = seriesData6; - // that.initCharts1(); - // }) }, }, unmounted() { @@ -1001,15 +1740,15 @@ export default { header { position: relative; z-index: 10; - height: 50px; + height: 100px; /* 调整头部高度 */ background-image: url("/public/img/header.png"); /* 替换为实际的背景图片路径 */ - background-size: cover; + background-size: 100% 100%; background-position: center; display: flex; justify-content: space-between; - align-items: center; + align-items: flex-start; } .title_left { @@ -1020,15 +1759,17 @@ header { flex: 1; text-align: center; color: white; - font-size: 24px; + font-size: 30px; + line-height: 65px; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .title_right { flex: 1; - font-size: 20px; + font-size: 18px; color: white; text-align: right; + line-height: 42px; } .model { @@ -1094,6 +1835,8 @@ header { background-size: 3px 16px, 16px 3px; border: 1px solid transparent; margin: 6px 6px; + /* background-color: rgba(4, 96, 116, 0.2); + border-radius: 25px; */ } .panel_title {