大屏改动
This commit is contained in:
parent
6ca6565791
commit
69570c44f3
|
|
@ -279,8 +279,9 @@
|
||||||
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
<img class="blockTitleImg" src="img/enp_blue/block_title.png">
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div class="tableHear" style="margin-top:1vh;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh">
|
<div class="tableHear"
|
||||||
<div style="flex:2">项目</div>
|
style="margin:1vh 0;height:2.6vh;line-height:2.6vh;display:flex;padding:1vh;font-size:1.3vh">
|
||||||
|
<div style="flex:2">监测设备名称</div>
|
||||||
<div style="flex:1">PM10(μg/m³)</div>
|
<div style="flex:1">PM10(μg/m³)</div>
|
||||||
<div style="flex:1">PM2.5(μg/m³)</div>
|
<div style="flex:1">PM2.5(μg/m³)</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -400,15 +401,6 @@ export default {
|
||||||
resizeTimeout: null,
|
resizeTimeout: null,
|
||||||
engine: null,
|
engine: null,
|
||||||
loadedPercent: 0,
|
loadedPercent: 0,
|
||||||
sectionNames: {
|
|
||||||
"干渣库_primitive0": "电石渣",
|
|
||||||
"原料磨及废气处理_primitive0": "原料磨",
|
|
||||||
"窑": "回转窑",
|
|
||||||
"煤粉制备_primitive1": "煤磨",
|
|
||||||
"水泥磨房_primitive0": "水泥磨",
|
|
||||||
"水泥储存及散装库_primitive2": "水泥包装",
|
|
||||||
// "停车场": "停车场"
|
|
||||||
},
|
|
||||||
showKgcet: true,
|
showKgcet: true,
|
||||||
currentLightMesh: null,
|
currentLightMesh: null,
|
||||||
activeBtns: 0,
|
activeBtns: 0,
|
||||||
|
|
@ -449,7 +441,6 @@ export default {
|
||||||
data: [],
|
data: [],
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
ws: null,
|
|
||||||
pieData: [
|
pieData: [
|
||||||
{ value: 0, name: '物料输送' },
|
{ value: 0, name: '物料输送' },
|
||||||
{ value: 0, name: '生产工艺过程' },
|
{ value: 0, name: '生产工艺过程' },
|
||||||
|
|
@ -497,21 +488,7 @@ export default {
|
||||||
],
|
],
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
// watch: {
|
|
||||||
// 'config.dark'(val) {
|
|
||||||
// if (val) {
|
|
||||||
// document.documentElement.classList.add("dark")
|
|
||||||
// this.$TOOL.data.set("APP_DARK", val)
|
|
||||||
// } else {
|
|
||||||
// document.documentElement.classList.remove("dark")
|
|
||||||
// this.$TOOL.data.remove("APP_DARK")
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
// 'config.lang'(val) {
|
|
||||||
// this.$i18n.locale = val
|
|
||||||
// this.$TOOL.data.set("APP_LANG", val)
|
|
||||||
// }
|
|
||||||
// },
|
|
||||||
created() {
|
created() {
|
||||||
document.documentElement.classList.add("dark")
|
document.documentElement.classList.add("dark")
|
||||||
this.$TOOL.data.set("APP_DARK", true)
|
this.$TOOL.data.set("APP_DARK", true)
|
||||||
|
|
@ -542,6 +519,7 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
//无组织污染源一览数据
|
||||||
getleft1Data() {
|
getleft1Data() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.$API.enp.drain.countcate.req({ type: 20 }).then((res) => {
|
that.$API.enp.drain.countcate.req({ type: 20 }).then((res) => {
|
||||||
|
|
@ -552,6 +530,7 @@ export default {
|
||||||
that.pieData[2].value = res.count_mstore;
|
that.pieData[2].value = res.count_mstore;
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
//接入设备数量
|
||||||
getleft2Data() {
|
getleft2Data() {
|
||||||
this.$API.em.equipment.list.req({ type: 10, query: {} }).then((res1) => {
|
this.$API.em.equipment.list.req({ type: 10, query: {} }).then((res1) => {
|
||||||
console.log(res1)
|
console.log(res1)
|
||||||
|
|
@ -570,6 +549,7 @@ export default {
|
||||||
this.eqNumData.jk = res4.count;
|
this.eqNumData.jk = res4.count;
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
//有组织排放口实时监测清单数据（ CEMS）
|
||||||
getleft3Data() {
|
getleft3Data() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.$API.enp.drain_equip.list.req({ drain__type: 10, equipment__type: 20, has_envdata: 'yes' }).then(res => {
|
that.$API.enp.drain_equip.list.req({ drain__type: 10, equipment__type: 20, has_envdata: 'yes' }).then(res => {
|
||||||
|
|
@ -577,17 +557,20 @@ export default {
|
||||||
that.cemsData = res.results[0];
|
that.cemsData = res.results[0];
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
//无组织排放口实时监测数据（TSP）
|
||||||
getright1Data() {
|
getright1Data() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.$API.enp.drain_equip.list.req({ drain__type: 10, equipment__type: 20, has_envdata: 'yes' }).then(res => {
|
that.$API.enp.drain_equip.list.req({ drain__type: 20, equipment__type: 20, has_envdata: 'yes' }).then(res => {
|
||||||
// that.cemsDataList = res.results;
|
// that.cemsDataList = res.results;
|
||||||
// that.cemsData = res.results[0];
|
// that.cemsData = res.results[0];
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
//环境质量实时监测清单---（小微站）
|
||||||
getright2Data() {
|
getright2Data() {
|
||||||
let that = this;
|
let that = this;
|
||||||
that.$API.enp.drain_equip.list.req({ equipment__type: 40, has_envdata: 'yes' }).then(res => {
|
that.$API.em.equipment.list.req({ type: 20, cate__code: 'aqms', has_envdata: 'yes' }).then(res => {
|
||||||
that.wData = res.results;
|
that.wData = res.results;
|
||||||
|
console.log('wData', this.wData)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
configDark() {
|
configDark() {
|
||||||
|
|
@ -713,9 +696,6 @@ export default {
|
||||||
this.activeIndex = 4;
|
this.activeIndex = 4;
|
||||||
this.elDrawer = true;
|
this.elDrawer = true;
|
||||||
this.activeDrawerName = command;
|
this.activeDrawerName = command;
|
||||||
// if (command == 'video') {
|
|
||||||
// window.open('/demo/index.html', '_self')
|
|
||||||
// }
|
|
||||||
},
|
},
|
||||||
handleClick5(command) {
|
handleClick5(command) {
|
||||||
this.activeIndex = 5;
|
this.activeIndex = 5;
|
||||||
|
|
@ -725,13 +705,7 @@ export default {
|
||||||
getMessage(msg) {
|
getMessage(msg) {
|
||||||
console.log(msg);
|
console.log(msg);
|
||||||
},
|
},
|
||||||
close() {
|
|
||||||
if (this.ws) {
|
|
||||||
this.ws.close();
|
|
||||||
this.ws = null;
|
|
||||||
console.log("socket已经关闭");
|
|
||||||
}
|
|
||||||
},
|
|
||||||
compare(property) {
|
compare(property) {
|
||||||
return function (a, b) {
|
return function (a, b) {
|
||||||
return a[property] - b[property];
|
return a[property] - b[property];
|
||||||
|
|
@ -780,387 +754,8 @@ export default {
|
||||||
} catch (error) { }
|
} catch (error) { }
|
||||||
}, 500)
|
}, 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();
|
|
||||||
// Add your code here matching the playground format
|
|
||||||
const createScene = function () {
|
|
||||||
const scene = new BABYLON.Scene(engine);
|
|
||||||
scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1);
|
|
||||||
const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 });
|
|
||||||
const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
|
|
||||||
groundMaterial.majorUnitFrequency = 5;
|
|
||||||
groundMaterial.minorUnitVisibility = 0.5;
|
|
||||||
groundMaterial.gridRatio = 2;
|
|
||||||
// groundMaterial.opacity = 0.99;
|
|
||||||
ground.material = groundMaterial;
|
|
||||||
ground.position.y = -0.1
|
|
||||||
// 加载背景图片
|
|
||||||
const backgroundImage = new BABYLON.Layer('', 'img/enp_blue/bg_enp.png', scene, true);
|
|
||||||
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 1.2));
|
|
||||||
that.initialTarget = camera.getTarget();
|
|
||||||
camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
|
|
||||||
camera.attachControl(canvas, true);
|
|
||||||
camera.maxZ = 1000; // 调整适当的值
|
|
||||||
// 相机限制
|
|
||||||
camera.lowerRadiusLimit = 6;
|
|
||||||
camera.upperRadiusLimit = 18;
|
|
||||||
// 灯光
|
|
||||||
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
|
|
||||||
light.intensity = 1.6;
|
|
||||||
// skybox
|
|
||||||
const skybox = BABYLON.MeshBuilder.CreateBox("skyBox", { size: 150 }, scene);
|
|
||||||
var skyboxMaterial = new BABYLON_MATERIAL.SkyMaterial("skyMaterial", scene);
|
|
||||||
skyboxMaterial.backFaceCulling = false;
|
|
||||||
skybox.material = skyboxMaterial;
|
|
||||||
/*
|
|
||||||
* Keys:
|
|
||||||
* - 1: Day
|
|
||||||
* - 2: Evening
|
|
||||||
* - 3: Increase Luminance
|
|
||||||
* - 4: Decrease Luminance
|
|
||||||
* - 5: Increase Turbidity
|
|
||||||
* - 6: Decrease Turbidity
|
|
||||||
* - 7: Move horizon to -50
|
|
||||||
* - 8: Restore horizon to 0
|
|
||||||
*/
|
|
||||||
var setSkyConfig = function (property, from, to) {
|
|
||||||
var keys = [
|
|
||||||
{ frame: 0, value: from },
|
|
||||||
{ frame: 100, value: to }
|
|
||||||
];
|
|
||||||
|
|
||||||
var animation = new BABYLON.Animation("animation", property, 100, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CONSTANT);
|
|
||||||
animation.setKeys(keys);
|
|
||||||
|
|
||||||
scene.stopAnimation(skybox);
|
|
||||||
scene.beginDirectAnimation(skybox, [animation], 0, 100, false, 1);
|
|
||||||
};
|
|
||||||
|
|
||||||
window.addEventListener("keydown", function (evt) {
|
|
||||||
switch (evt.keyCode) {
|
|
||||||
case 49: setSkyConfig("material.inclination", skyboxMaterial.inclination, 0); break; // 1
|
|
||||||
case 50: setSkyConfig("material.inclination", skyboxMaterial.inclination, -0.5); break; // 2
|
|
||||||
|
|
||||||
case 51: setSkyConfig("material.luminance", skyboxMaterial.luminance, 0.1); break; // 3
|
|
||||||
case 52: setSkyConfig("material.luminance", skyboxMaterial.luminance, 1.0); break; // 4
|
|
||||||
|
|
||||||
case 53: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 40); break; // 5
|
|
||||||
case 54: setSkyConfig("material.turbidity", skyboxMaterial.turbidity, 5); break; // 6
|
|
||||||
|
|
||||||
case 55: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 50); break; // 7
|
|
||||||
case 56: setSkyConfig("material.cameraOffset.y", skyboxMaterial.cameraOffset.y, 0); break; // 8
|
|
||||||
default: break;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set to Day
|
|
||||||
setSkyConfig("material.inclination", skyboxMaterial.inclination, 0);
|
|
||||||
|
|
||||||
// 全屏GUI
|
|
||||||
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
|
|
||||||
that.myui = advancedTexture;
|
|
||||||
// 创建一个高亮层
|
|
||||||
const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
|
|
||||||
// 主控制区
|
|
||||||
var control_main = new BABYLON_GUI.StackPanel();
|
|
||||||
control_main.isVertical = false
|
|
||||||
control_main.top = '-40%';
|
|
||||||
control_main.left = '-20%';
|
|
||||||
advancedTexture.addControl(control_main);
|
|
||||||
|
|
||||||
// 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";
|
|
||||||
// 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);
|
|
||||||
// }
|
|
||||||
// })
|
|
||||||
|
|
||||||
// 高亮显示mesh名
|
|
||||||
const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
|
|
||||||
mesh_rect.width = "100px";
|
|
||||||
mesh_rect.height = "25px";
|
|
||||||
mesh_rect.background = 'orange';
|
|
||||||
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 = process.env.VUE_APP_BASEURL + "/media/model/factory.glb";
|
|
||||||
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
|
|
||||||
for (let key in that.sectionNames) {
|
|
||||||
const value = that.sectionNames[key];
|
|
||||||
const mesh = scene.getMeshByName(key);
|
|
||||||
if (mesh) {
|
|
||||||
const img = new BABYLON_GUI.Image('img', 'img/ignore/qm_enp.png');
|
|
||||||
img.width = '50px';
|
|
||||||
img.height = '50px';
|
|
||||||
img.top = '50%';
|
|
||||||
img.left = '50%';
|
|
||||||
img.horizontalAlignment = 10;
|
|
||||||
img.verticalAlignment = 10;
|
|
||||||
//建筑标签
|
|
||||||
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(img);
|
|
||||||
var label = new BABYLON_GUI.TextBlock(value + '_label');
|
|
||||||
label.text = value;
|
|
||||||
label.color = 'white';
|
|
||||||
label.fontSize = '14px';
|
|
||||||
img.linkWithMesh(mesh);
|
|
||||||
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';
|
|
||||||
that.activeSectionName = dataViewName;
|
|
||||||
that.activeSection = 2;
|
|
||||||
let dataView = advancedTexture.getControlByName(dataViewName);
|
|
||||||
if (dataView) {
|
|
||||||
// // 在这里进行矩形的操作
|
|
||||||
dataView.isVisible = false;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// 创建一个数据展示层,创建一个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 = "123";
|
|
||||||
// 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 = "456";
|
|
||||||
// rc.width = "80px";
|
|
||||||
// rc.fontSize = '18px';
|
|
||||||
// rc.color = "rgb(44,237,255)";
|
|
||||||
// }
|
|
||||||
// grid.addControl(rc, i, j);
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
data_view.addControl(grid);
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
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.floor(dlCount * 100.0) / 100.0;
|
|
||||||
}
|
|
||||||
that.loadedPercent = loadedPercent;
|
|
||||||
})
|
|
||||||
// 自动旋转checkbox
|
|
||||||
// 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;
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// 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";
|
|
||||||
// control_main.addControl(header);
|
|
||||||
// 工段数据checkbox
|
|
||||||
// var checkbox1 = new BABYLON_GUI.Checkbox();
|
|
||||||
// checkbox1.width = "20px";
|
|
||||||
// checkbox1.height = "20px";
|
|
||||||
// checkbox1.isChecked = true;
|
|
||||||
// checkbox1.marginLeft = '16px'
|
|
||||||
// checkbox1.color = "green";
|
|
||||||
// checkbox1.onIsCheckedChangedObservable.add(function (value) {
|
|
||||||
// if (value) {
|
|
||||||
// for (let key in that.sectionNames) {
|
|
||||||
// let name = that.sectionNames[key] + '_data_view';
|
|
||||||
// console.log(name)
|
|
||||||
// let dataView = advancedTexture.getControlByName(name);
|
|
||||||
// dataView.isVisible = true;
|
|
||||||
// }
|
|
||||||
// } else {
|
|
||||||
// for (let key in that.sectionNames) {
|
|
||||||
// let name = that.sectionNames[key] + '_data_view';
|
|
||||||
// console.log(name)
|
|
||||||
// let dataView = advancedTexture.getControlByName(name);
|
|
||||||
// dataView.isVisible = false;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// control_main.addControl(checkbox1);
|
|
||||||
// var header1 = new BABYLON_GUI.TextBlock();
|
|
||||||
// header1.text = "工段数据";
|
|
||||||
// header1.width = "80px";
|
|
||||||
// header1.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
|
||||||
// header1.color = "white";
|
|
||||||
// control_main.addControl(header1);
|
|
||||||
// 添加抓取事件
|
|
||||||
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 !== '地面1' && 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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
// checkbox.isChecked = true; //默认开启自动旋转
|
|
||||||
return scene;
|
|
||||||
};
|
|
||||||
|
|
||||||
const scene = createScene();
|
|
||||||
// scene.debugLayer.show()
|
|
||||||
engine.runRenderLoop(function () {
|
|
||||||
scene.render();
|
|
||||||
});
|
|
||||||
this.engine = engine;
|
|
||||||
this.scene = scene;
|
|
||||||
window.addEventListener("resize", function () {
|
|
||||||
engine.resize();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
unmounted() {
|
unmounted() {
|
||||||
this.close();
|
|
||||||
document.documentElement.classList.remove("dark");
|
document.documentElement.classList.remove("dark");
|
||||||
this.$TOOL.data.remove("APP_DARK")
|
this.$TOOL.data.remove("APP_DARK")
|
||||||
},
|
},
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue