fix:去除多余的大屏页面

This commit is contained in:
shijing 2024-07-24 13:45:08 +08:00
parent 88aee21df9
commit 7a9e193dc6
3 changed files with 0 additions and 5158 deletions

View File

@ -1,173 +0,0 @@
<template>
<div id="mars3dContainer" class="mars3d-container"></div>
</template>
<script>
// import * as mars3d from "mars3d";
const Cesium = mars3d.Cesium;
const point1 = [117.083458,31.655321,42]
const point2 = [116.027392, 36.413562, 42]
const point3 = mars3d.PointUtil.getOnLinePointByLen(
mars3d.LngLatPoint.toCartesian(point1),
mars3d.LngLatPoint.toCartesian(point2),
40
)
export default {
name: 'cesium',
data() {
return {
viewer: null
}
},
created() {
const scriptInfo = document.createElement("script");
scriptInfo.setAttribute("data-callType", "callScript");
scriptInfo.src = "http://mars3d.cn/lib/Cesium/Cesium.js";
document.head.appendChild(scriptInfo);
},
mounted() {
const map = new mars3d.Map("mars3dContainer", {
scene: {
center: { lat: 30.054604, lng: 108.885436, alt: 100, heading: 316, pitch: 10},
},
})
map.fixedLight = true // gltf
let tilesetLayer = new mars3d.layer.TilesetLayer({
type: "3dtiles",
name:'超低排放',
url: "/3dtiles/tileset.json",
popup: "all",
scale: 1,
// rotation: {x:0, y:1,z: 0 }, // Z沿Z45
highlight: { type: "click", color: "#00ffff" },
flyTo: true, //
heading: 0, // Z
pitch: -5, //
roll: 10 // Y
});
map.addLayer(tilesetLayer);
map.on(mars3d.EventType.click, function (event) {
let feature = event.pickedObject;
//event.graphic.attr
console.log("feature", feature);
console.log("Cesium.Cesium3DTileFeature", Cesium.Cesium3DTileFeature);
console.log(feature instanceof Cesium.Cesium3DTileFeature)
if (feature instanceof Cesium.Cesium3DTileFeature) {
// let propertyNames = feature.getPropertyNames();
// let length = propertyNames.length;
// for (var i = 0; i < length; ++i) {
// let propertyName = propertyNames[i];
// console.log(propertyName + ': ' + feature.getProperty(propertyName));
// }
}
})
//
let GraphicLayer = new mars3d.layer.GraphicLayer({
name: "墙",
show: true,
//
strokestyle: "#3388ff",
strokewidth: 2,
fill: true,
fillcolor: "#00ffff",
opacity: 0.5,
//
style: {
//
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 200000),
//
},
semicolon: true
})
map.addLayer(GraphicLayer);
//
let wallGraphic = new mars3d.graphic.WallEntity({
positions: [point1, point2],
// @param [options.allowDrillPick] - 穿
allowDrillPick: true,
style: {
//
distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0.0, 20000),
//
diffHeight:15 ,
materialType: mars3d.MaterialType.Text,
materialOptions: {
text: "显示文本",
font_family: "楷体",
color: "#00ffff"
}
},
flyTo:true,
attr: { remark: "test" }
})
GraphicLayer.addGraphic(wallGraphic);
// [idattridid]
const graphic = new mars3d.graphic.FontBillboardEntity({
position: new mars3d.LngLatPoint(117.084699, 31.65172, 6),
style: {
image: "img/enp_blue/ball.png",
color: "#00ffff",
cale: 0.5,
horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
label: {
text: "设备名称",
font_size: 20,
color: "#ff0000",
pixelOffsetY: -120,
distanceDisplayCondition: true,
distanceDisplayCondition_far: 50000,
distanceDisplayCondition_near: 0
}
},
attr: { remark: "设备id" }
})
// Popup
// const inthtml = `<table style="width: auto;">
// <tr>
// <th scope="col" colspan="2" style="text-align:center;font-size:15px;">graphicPopup </th>
// </tr>
// <tr>
// <td></td>
// <td>html</td>
// </tr>
// </table>`
// graphic.bindPopup(inthtml).openPopup()
GraphicLayer.addGraphic(graphic);
// GraphicLayer.on(mars3d.EventType.click, function (event) {
// console.log("layer", event)
// })
function bindLayerPopup() {
GraphicLayer.bindPopup(function (event) {
console.log("监听layer绑定popup", event)
const attr = event.graphic.attr || {}
attr["类型"] = event.graphic.type
attr["来源"] = "我是layer上绑定的Popup"
attr["备注"] = "我支持鼠标交互"
return mars3d.Util.getTemplateHtml({ title: "矢量图层", template: "all", attr })
})
}
bindLayerPopup();
// const graphic2 = new mars3d.graphic.BillboardEntity({
// position: [117.084699, 31.65172, 6],
// style: {
// image: "img/enp_blue/ball.png",
// scale: 1.0,
// horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
// verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
// clampToGround: true
// },
// attr: { remark: "1" }
// })
// GraphicLayer.addGraphic(graphic2);
},
mothods: {
},
onUnload() {
map.destroy()
}
}
</script>
<style></style>

View File

@ -1,937 +0,0 @@
<template>
<div class="dashboard">
<header>
<div class="headerImg">水泥有限公司</div>
<div style="position: absolute;top:0.9vh;left: 8px;height: 6.5vh;">
<div style="display: flex;padding-top: 1.4vh;margin-left: 1vw;">
<div :class="bindClass(0)" @click="menuClick(0)">
<div class="menuItem">首页</div>
</div>
<div :class="bindClass(1)">
<div class="menuItem">
<el-dropdown class="dropdown" trigger="click" @command="handleClick">
<span class="el-dropdown-link">
有组织排放管理
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="paikou">排放口清单</el-dropdown-item>
<el-dropdown-item command="CEMS">CEMS监测清单</el-dropdown-item>
<el-dropdown-item>CEMS监测预警</el-dropdown-item>
<el-dropdown-item>CEMS报表导出</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
<div :class="bindClass(2)">
<div class="menuItem">
<el-dropdown class="dropdown" trigger="click" @command="handleClick2">
<span class="el-dropdown-link">
无组织排放管理
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="wuran">污染源管控制</el-dropdown-item>
<el-dropdown-item>智能治理</el-dropdown-item>
<el-dropdown-item>设备清单</el-dropdown-item>
<el-dropdown-item>环境质量</el-dropdown-item>
<el-dropdown-item>台账管理</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</div>
</div>
<div style="position: absolute;top:0.9vh;right: 8px;height: 65px;">
<div style="display: flex;padding-top: 1.4vh;padding-right: 1vw;justify-content: flex-end;">
<div :class="bindClass(3)">
<div class="menuItem">
<el-dropdown class="dropdown" trigger="click" @command="handleClick3">
<span class="el-dropdown-link">
运输清洁
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item command="changwai">场外运输</el-dropdown-item>
<el-dropdown-item command="inner">场内清洁</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
<div class="menuItem">运输清洁</div>
</div>
<div :class="bindClass(4)">
<div class="menuItem">环保管理</div>
</div>
<div :class="bindClass(5)">
<div class="menuItem">台账管理</div>
</div>
<div class="wraning_icon"></div>
<div class="user_icon"></div>
</div>
</div>
</header>
<el-main style="padding:0;overflow: hidden;">
<div v-show="activeIndex==0" class="model">
<div id="loadingScreen">
<el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
<template #default="{ percentage }">
<div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div>
<div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div>
</template>
</el-progress>
</div>
<canvas id="renderCanvas"></canvas>
</div>
<div v-show="activeIndex==0" class="left_other animate__animated animate__backInLeft">
<div class="panel">
<div class="chart" id="chart1">
<img src="img/ignore/left1.png" style="width: 100%;height: 100%;">
</div>
</div>
<div class="panel">
<div class="chart" id="chart2">
<img src="img/ignore/left2.png" style="width: 100%;height: 100%;">
</div>
</div>
<div class="panel">
<div class="chart" id="chart3">
<img src="img/ignore/left3.png" style="width: 100%;height: 100%;">
</div>
</div>
</div>
<div v-show="activeIndex==0" class="right_other animate__animated animate__backInRight">
<div class="panel">
<div class="chart" id="chart4">
<img src="img/ignore/right1.png" style="width: 100%;height: 100%;">
</div>
</div>
<div class="panel">
<div class="chart" id="chart5">
<img src="img/ignore/right2.png" style="width: 100%;height: 100%;">
</div>
</div>
</div>
<div v-show="activeIndex==0" class="left_border"></div>
<div v-show="activeIndex==0" class="right_border"></div>
<div v-show="activeIndex==0" class="btns_enp"></div>
<div v-show="activeIndex==0" class="bottom_enp"></div>
<!-- -->
<div v-if="activeIndex!=0" class="container">
<div class="sysName">智能环保一体化管控平台</div>
<img v-show="activePage==1" src="img/ignore/emission.jpg" @click="pageClick(101)" class="pageClass">
<img v-show="activePage==2" src="img/ignore/CEMS.jpg" @click="pageClick(201)" class="pageClass">
<img v-show="activePage==3" src="img/ignore/wuran.jpg" @click="pageClick(301)" class="pageClass">
<img v-show="activePage==4" src="img/ignore/car.jpg" class="pageClass">
<img v-show="activePage==5" src="img/ignore/transportation.jpg" class="pageClass">
<img v-show="activePage==101" src="img/ignore/emission_detail.jpg" @click="pageClick(1)" class="pageClass">
<img v-show="activePage==201" src="img/ignore/CEMS_detail.jpg" @click="pageClick(2)" class="pageClass">
<img v-show="activePage==301" src="img/ignore/wuran_detail.jpg" @click="pageClick(3)" class="pageClass">
</div>
</el-main>
</div>
</template>
<script>
import * as echarts from "echarts";
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"
import 'babylonjs-loaders';
import 'animate.css';
export default {
data() {
return {
isCollapse:false,
nowDay: 1,
initialAlpha: -Math.PI / 0.89,
initialBeta: Math.PI / 3.3,
initialRadius: 18,
initialTarget: null,
scene: null,
myui: null,
is_mainviewpoint: false,
resizeTimeout: null,
engine: null,
loadedPercent: 0,
sectionNames: {
"干渣库_primitive0": "电石渣",
"原料磨及废气处理_primitive0": "原料磨",
"窑": "回转窑",
"煤粉制备_primitive1": "煤磨",
"水泥磨房_primitive0": "水泥磨",
"水泥储存及散装库_primitive2": "水泥包装",
// "": ""
},
showKgcet: true,
currentLightMesh: null,
activePage:0,
activeIndex: 0,
activeSection: 2,
activeSectionName: '回转窑',
updateTime: '2023-08-17 16:00:00',
basicOption: {
backgroundColor: '',
series: [
{
name: '销量',
type: 'bar',
barwidth: 10,
label: {
show: true,
position: 'top'
},
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' },
{ offset: 0.5, color: '#188df0' },
{ offset: 1, color: '#188df0' }
])
},
emphasis: {
itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#2378f7' },
{ offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#83bff6' }
])
}
},
data: []
}
],
grid: { //
top: "10%",
left: "12%",
right: "0px",
bottom: "15%"
}
},
chart1Option: {},
seriesData1: [0, 0, 0, 0, 0, 0],
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' }
},
}
},
mounted() {
let that= this;
this.addListener();
this.initDomStyle();
this.$nextTick(() => {
setTimeout(function () {
that.initFactory();
}, 1000);
});
},
beforeUnmount() {
//
const canvas = document.getElementById('renderCanvas');
if (canvas) {
canvas.parentNode.removeChild(canvas);
}
},
methods: {
initDomStyle() {
//
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
//
var dashboard = document.getElementsByClassName('dashboard')[0];
var left_other = document.getElementsByClassName('left_other')[0];
var right_other = document.getElementsByClassName('right_other')[0];
var model = document.getElementsByClassName('model')[0];
if (windowWidth > 960) {
dashboard.style.overflow = 'hidden';
//
left_other.style.position = 'absolute';
left_other.style.width = '20%';
right_other.style.position = 'absolute';
right_other.style.width = '20%';
model.style.position = 'absolute';
model.style.height = (windowHeight - 4) + 'px';
model.style.top = 0;
var chartHeight1 = (100-18) *0.31 + 'vh';
var chartHeight2 = (100-18) *0.37 + 'vh';
var chartHeight3 = (100-17) *0.28 + 'vh';
var chartHeight4 = (100-17) *0.715 + 'vh';
var charts = document.getElementsByClassName('chart')
for (var i = 0; i < charts.length; i++) {
var chart = charts[i]
switch (i) {
case 0:
chart.style.height = chartHeight1;
break;
case 1:
chart.style.height = chartHeight1;
break;
case 2:
chart.style.height = chartHeight2;
break;
case 3:
chart.style.height = chartHeight3;
break;
case 4:
chart.style.height = chartHeight4;
break;
}
chart.style.height = chartHeight;
}
}
else {
dashboard.style.overflow = 'auto';
var chartHeight = windowWidth * 0.6;
left_other.style.position = 'static';
left_other.style.width = '100%';
right_other.style.position = 'static';
right_other.style.width = '100%';
model.style.position = 'relative';
model.style.height = chartHeight;
var charts = document.getElementsByClassName('chart')
for (var i = 0; i < charts.length; i++) {
var chart = charts[i]
chart.style.height = chartHeight;
}
}
if (this.engine != null) {
this.engine.resize();
}
},
// Class
bindClass(index) {
let that = this;
let classInfo = {menuWrap: true, menuWrap1: false, menuWrap2: false,menuWrapActive: false};
if(index==that.activeIndex){
classInfo.menuWrapActive = true;
}
if (index == 1 ||index == 2) {
classInfo.menuWrap2 = true;
}else{
classInfo.menuWrap1 = true;
}
return classInfo
},
menuClick(){
this.activeIndex = 0;
},
handleClick(command){
this.activeIndex = 1;
if(command == "paikou"){
this.activePage = 1;
}else if(command == "CEMS"){
this.activePage = 2;
}
},
handleClick2(command){
this.activeIndex = 2;
if(command == "wuran"){
this.activePage = 3;
}
},
handleClick3(command){
this.activeIndex = 3;
if(command == "changwai"){
this.activePage = 5;
}else if(command=='inner'){
this.activePage = 4;
}
},
pageClick(page){
this.activePage = page;
},
getMessage(msg) {
console.log(msg);
},
close() {
if (this.ws) {
this.ws.close();
this.ws = null;
console.log("socket已经关闭");
}
},
compare(property) {
return function (a, b) {
return a[property] - b[property];
}
},
initCharts() {
let that = this;
function deepCopy(obj) {
return JSON.parse(JSON.stringify(obj));
}
//
that.basicOption.xAxis.data = that.xAxisData;
that.chart1Option = deepCopy(that.basicOption)
that.chart1Option.series = [
{
name: '电耗',
type: 'bar',
barWidth: 15,
label: {
show: true,
position: 'top'
},
emphasis: {
focus: 'series'
},
data: that.seriesData1
}]
that.setChart('chart1', that.chart1Option);
},
addListener() {
var that = this;
window.addEventListener('resize', function () {
// resizeTimeout
if (this.resizeTimeout) {
clearTimeout(this.resizeTimeout);
}
// resizeTimeout
this.resizeTimeout = setTimeout(function () {
that.initDomStyle()
}, 300); // 300
});
},
resizeChart(name) {
// name resize chart
var myChart = echarts.getInstanceByDom(document.getElementById(name));
if (myChart != undefined) {
// console.log(name + ' :resize')
myChart.resize();
}
},
setChart(name, option = null) {
// name , optionoption
var myChart = echarts.getInstanceByDom(document.getElementById(name));
if (myChart == undefined) {
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
}
if (option == null) {
option = Object.assign({}, this.basicOption)
}
setTimeout(() => {
try {
myChart.setOption(option);
} 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();
// 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/ignore/backgroundEnp.jpg', 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;
// 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 = config.HOST_URL + "/media/model/factory.glb";
// 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);
// StackPanelGUI
// 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() {
this.close();
},
}
</script>
<style scoped>
.container{
width: 100%;
position: absolute;
height: 100vh;
top: 0vh;
z-index: 0;
padding-top: 8vh;
box-sizing: border-box;
background-image: url('/public/img/ignore/backgroundEnp.jpg');
background-size: cover;
}
.dashboard {
background-color: black;
font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
header {
z-index: 10;
display: flex;
position: relative;
align-items: center;
box-sizing: border-box;
padding: 1.3vh 0.4vw 0 0.4vw;
justify-content: space-between;
}
.headerImg{
width: 100%;
height: 6vh;
line-height: 6vh;
color: #ffffff;
font-size: 1.8vw;
text-align: center;
background-size: 100% 100%;
background-position: center;
background-image: url('/public/img/ignore/header_enp.png');
}
.sysName{
color: #ffffff;
padding-left: 1vw;
font-size: 2vh;
}
.btns_enp{
bottom: 7vh;
left:28.7vw;
width: 42.6vw;
height: 4.3vh;
position: absolute;
background-size: 100% 100%;
background-position: center;
background-image: url('/public/img/ignore/btns_enp.png');
}
.bottom_enp{
left: 0;
bottom: 0;
width: 100%;
height: 5vh;
position: absolute;
background-size: 100% 100%;
background-position: center;
background-image: url('/public/img/ignore/bottom_enp.png');
}
.menuWrap{
height: 4vh;
margin-right: 1vw;
}
.menuWrap1{
width: 4.4vw;
background-image: url('/public/img/ignore/enp_menu_img1.png');
background-size: cover;
}
.menuWrap1:hover,.menuWrapActive.menuWrap1{
background-image: url('/public/img/ignore/enp_menu_img_active1.png');
background-size: cover;
}
.menuWrap2{
width: 7vw;
background-image: url('/public/img/ignore/enp_menu_img2.png');
background-size: cover;
}
.menuWrap2:hover,.menuWrapActive.menuWrap2{
color: #ffffff;
background-image: url('/public/img/ignore/enp_menu_img_active2.png');
}
.menuItem{
color: #ffffff;
line-height: 4vh;
font-size: 1.5vh;
text-align: center;
}
.dropdown{
color: #ffffff;
line-height: 4vh;
font-size: 1.4vh;
}
.wraning_icon{
width: 2vh;
height: 2.3vh;
margin-top: 0.9vh;
background-size: cover;
background-image: url('/public/img/ignore/warning_enp.png');
}
.user_icon{
width: 2.3vh;
height: 2.3vh;
margin-top: 0.9vh;
margin-left: 2vh;
background-size: cover;
background-image: url('/public/img/ignore/user_enp.png');
}
.model {
top: 0;
left: 0;
width: 100%;
background-image: url('/public/img/ignore/backgroundEnp.jpg');
background-size: cover;
}
#renderCanvas {
width: 100%;
height: 100%
}
#loadingScreen {
position: absolute;
width: 100%;
top: 260px;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 30px;
}
.left_other,
.right_other {
position: absolute;
top: 8vh;
width: 20%;
padding: 10px;
}
.right_other {
right: 0
}
.panel {
margin-top: 1.5vh;
}
.chart {
width: 100%;
height: 220px;
}
.left_border{
width: 1vh;
height: 70vh;
position: absolute;
left: 21%;
top: 15vh;
background-size: cover;
background-image: url('/public/img/ignore/left_border.png');
}
.right_border{
width: 1vh;
height: 70vh;
position: absolute;
right: 21%;
top: 15vh;
background-size: cover;
background-image: url('/public/img/ignore/right_border.png');
}
.pageClass{
width: 100%;
height: 89vh;
position: absolute;
bottom: 0;
left: 0;
}
</style>

File diff suppressed because it is too large Load Diff