@@ -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 {