zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 添加天空和地面

This commit is contained in:
caoqianming 2023-08-30 10:29:57 +08:00
parent 2b98daca58
commit ae7cf80c64
4 changed files with 258 additions and 175 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -1,6 +1,7 @@
.DS_Store .DS_Store
node_modules node_modules
/dist /dist
.VSCodeCounter/
# local env files # local env files
.env.local .env.local

2
src/utils/babylonMaterial.js Normal file
View File

File diff suppressed because one or more lines are too long

2
src/utils/gridMaterial.js Normal file
View File

File diff suppressed because one or more lines are too long

428
src/views/bigScreen/index_enm.vue
View File

@ -13,7 +13,7 @@
<el-row :gutter="16" style="height: 34px;margin-top: 4px"> <el-row :gutter="16" style="height: 34px;margin-top: 4px">
<el-col :span="24" class="panel_item"> <el-col :span="24" class="panel_item">
<span class="panel_label"> <span class="panel_label">
<img src="/img/elec.png" style="height: 24px"/> <img src="/img/elec.png" style="height: 24px" />
动力电消耗</span> 动力电消耗</span>
<span class="panel_value">{{ factoryData.elec_consume }}</span> <span class="panel_value">{{ factoryData.elec_consume }}</span>
<span class="panel_unit">KWH</span> <span class="panel_unit">KWH</span>
@ -22,7 +22,7 @@
<el-row :gutter="16" style="height: 34px;margin-top: 4px"> <el-row :gutter="16" style="height: 34px;margin-top: 4px">
<el-col :span="24" class="panel_item"> <el-col :span="24" class="panel_item">
<span class="panel_label"> <span class="panel_label">
<img src="/img/coal.png" style="height: 24px"/> <img src="/img/coal.png" style="height: 24px" />
原煤消耗 原煤消耗
</span> </span>
<span class="panel_value">{{ factoryData.coal_consume }}</span> <span class="panel_value">{{ factoryData.coal_consume }}</span>
@ -32,7 +32,7 @@
<el-row :gutter="16" style="height: 34px;margin-top: 4px"> <el-row :gutter="16" style="height: 34px;margin-top: 4px">
<el-col :span="24" class="panel_item"> <el-col :span="24" class="panel_item">
<span class="panel_label"> <span class="panel_label">
<img src="/img/water.png" style="height: 24px"/> <img src="/img/water.png" style="height: 24px" />
工业水消耗</span> 工业水消耗</span>
<span class="panel_value">{{ factoryData.water_consume }}</span> <span class="panel_value">{{ factoryData.water_consume }}</span>
<span class="panel_unit">T</span> <span class="panel_unit">T</span>
@ -46,7 +46,7 @@
<el-row :gutter="16" style="height: 34px;margin-top: 4px"> <el-row :gutter="16" style="height: 34px;margin-top: 4px">
<el-col :span="24" class="panel_item"> <el-col :span="24" class="panel_item">
<span class="panel_label"> <span class="panel_label">
<img src="/img/cair.png" style="height: 24px"/> <img src="/img/cair.png" style="height: 24px" />
压缩空气消耗</span> 压缩空气消耗</span>
<span class="panel_value">{{ factoryData.cair_consume }}</span> <span class="panel_value">{{ factoryData.cair_consume }}</span>
<span class="panel_unit">T</span> <span class="panel_unit">T</span>
@ -57,11 +57,11 @@
<div class="model"> <div class="model">
<div id="loadingScreen"> <div id="loadingScreen">
<el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning"> <el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
<template #default="{ percentage }"> <template #default="{ percentage }">
<div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div> <div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div>
<div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div> <div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div>
</template> </template>
</el-progress> </el-progress>
<!-- 工厂模型加载中.....{{ loadedPercent }}% --> <!-- 工厂模型加载中.....{{ loadedPercent }}% -->
</div> </div>
<canvas id="renderCanvas"></canvas> <canvas id="renderCanvas"></canvas>
@ -72,7 +72,7 @@
<el-row :gutter="16" style="height: 34px;margin-top: 4px"> <el-row :gutter="16" style="height: 34px;margin-top: 4px">
<el-col :span="24" class="panel_item"> <el-col :span="24" class="panel_item">
<span class="panel_label"> <span class="panel_label">
<img src="/img/elec.png" style="height: 24px"/> <img src="/img/elec.png" style="height: 24px" />
单位产品电耗</span> 单位产品电耗</span>
<span class="panel_value">{{ sectionData.elec_consume_unit }}</span> <span class="panel_value">{{ sectionData.elec_consume_unit }}</span>
<span class="panel_unit">KWH/T</span> <span class="panel_unit">KWH/T</span>
@ -81,7 +81,7 @@
<el-row :gutter="16" style="height: 34px;margin-top: 4px"> <el-row :gutter="16" style="height: 34px;margin-top: 4px">
<el-col :span="24" class="panel_item"> <el-col :span="24" class="panel_item">
<span class="panel_label"> <span class="panel_label">
<img src="/img/total_production.png" style="height: 24px"/> <img src="/img/total_production.png" style="height: 24px" />
产品产量</span> 产品产量</span>
<span class="panel_value">{{ sectionData.total_production }}</span> <span class="panel_value">{{ sectionData.total_production }}</span>
<span class="panel_unit">T</span> <span class="panel_unit">T</span>
@ -95,7 +95,7 @@
<el-row :gutter="16" style="height: 34px;margin-top: 4px"> <el-row :gutter="16" style="height: 34px;margin-top: 4px">
<el-col :span="24" class="panel_item"> <el-col :span="24" class="panel_item">
<span class="panel_label"> <span class="panel_label">
<img src="/img/run_rate.png" style="height: 24px"/> <img src="/img/run_rate.png" style="height: 24px" />
运转率</span> 运转率</span>
<span class="panel_value">{{ sectionData.run_rate }}</span> <span class="panel_value">{{ sectionData.run_rate }}</span>
<span class="panel_unit">%</span> <span class="panel_unit">%</span>
@ -104,7 +104,7 @@
<el-row :gutter="16" style="height: 34px;margin-top: 4px"> <el-row :gutter="16" style="height: 34px;margin-top: 4px">
<el-col :span="24" class="panel_item" v-if="showKgcet"> <el-col :span="24" class="panel_item" v-if="showKgcet">
<span class="panel_label"> <span class="panel_label">
<img src="/img/coal.png" style="height: 24px"/> <img src="/img/coal.png" style="height: 24px" />
单位产品标煤耗 单位产品标煤耗
</span> </span>
<span class="panel_value">{{ sectionData.coal_consume_unit }}</span> <span class="panel_value">{{ sectionData.coal_consume_unit }}</span>
@ -114,9 +114,8 @@
</div> </div>
</div> </div>
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-item" v-for="(val, index) in sectionNames" :key="val" @click="handleSectionClick(val, index)" <div class="dropdown-item" v-for="(val, index) in sectionNames" :key="val" @click="handleSectionClick(val, index)"
:class="{ active: activeSection === index }" :class="{ active: activeSection === index }">{{ val }}</div>
>{{ val }}</div>
</div> </div>
<div class="left_other animate__animated animate__backInLeft"> <div class="left_other animate__animated animate__backInLeft">
<div class="panel"> <div class="panel">
@ -153,13 +152,15 @@
import * as echarts from "echarts"; import * as echarts from "echarts";
import * as BABYLON from "babylonjs" import * as BABYLON from "babylonjs"
import * as BABYLON_GUI from "babylonjs-gui" import * as BABYLON_GUI from "babylonjs-gui"
import * as BABYLON_GRID from "@/utils/gridMaterial"
import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"
import 'babylonjs-loaders'; import 'babylonjs-loaders';
import 'animate.css'; import 'animate.css';
export default { export default {
data() { data() {
return { return {
factoryData: {'coal_consume': 100, 'elec_consume': 100, 'water_consume': 100, 'cair_consume': 100}, factoryData: { 'coal_consume': 100, 'elec_consume': 100, 'water_consume': 100, 'cair_consume': 100 },
sectionData: {'elec_consume_unit': 0, 'total_production': 0, 'run_rate': 100, 'coal_consume_unit': 0}, sectionData: { 'elec_consume_unit': 0, 'total_production': 0, 'run_rate': 100, 'coal_consume_unit': 0 },
initialAlpha: -Math.PI / 0.89, initialAlpha: -Math.PI / 0.89,
initialBeta: Math.PI / 3.3, initialBeta: Math.PI / 3.3,
initialRadius: 18, initialRadius: 18,
@ -183,57 +184,57 @@ export default {
activeSectionName: '回转窑', activeSectionName: '回转窑',
updateTime: '2023-08-17 16:00:00', updateTime: '2023-08-17 16:00:00',
basicOption: { basicOption: {
backgroundColor: '', backgroundColor: '',
tooltip: {}, tooltip: {},
// legend: { // legend: {
// data: ['销量'], // data: ['销量'],
// top: 0, // top: 0,
// }, // },
xAxis: { xAxis: {
data: ['一月', '二月', '三月', '四月', '五月', '六月'], data: ['一月', '二月', '三月', '四月', '五月', '六月'],
}, },
yAxis: {}, yAxis: {},
series: [ series: [
{ {
name: '销量', name: '销量',
type: 'bar', type: 'bar',
label: { label: {
show: true, show: true,
position: 'top' 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: { itemStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
{ offset: 0, color: '#83bff6' }, { offset: 0, color: '#2378f7' },
{ offset: 0.5, color: '#188df0' }, { offset: 0.7, color: '#2378f7' },
{ offset: 1, color: '#188df0' } { offset: 1, color: '#83bff6' }
]) ])
}, }
emphasis: { },
itemStyle: { data: [5, 20, 36, 10, 10, 20]
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ }
{ offset: 0, color: '#2378f7' }, ],
{ offset: 0.7, color: '#2378f7' }, grid: { // 让图表占满容器
{ offset: 1, color: '#83bff6' } top: "5%",
]) left: "12%",
right: "0px",
bottom: "15%"
} }
}, },
data: [5, 20, 36, 10, 10, 20]
}
],
grid: { // 让图表占满容器
top: "5%",
left: "12%",
right: "0px",
bottom: "15%"
}
},
chart1Option: {}, chart1Option: {},
chart2Option: {}, chart2Option: {},
chart3Option: {}, chart3Option: {},
chart4Option: {}, chart4Option: {},
chart5Option: {}, chart5Option: {},
chart6Option: {} chart6Option: {}
} }
}, },
mounted() { mounted() {
var that = this; var that = this;
@ -248,48 +249,48 @@ export default {
}); });
}, },
beforeUnmount(){ beforeUnmount() {
// 性能优化 // 性能优化
const canvas = document.getElementById('renderCanvas'); const canvas = document.getElementById('renderCanvas');
if (canvas) { if (canvas) {
canvas.parentNode.removeChild(canvas); canvas.parentNode.removeChild(canvas);
} }
}, },
methods: { methods: {
getFactoryData(){ getFactoryData() {
}, },
getSectionData(){ getSectionData() {
}, },
initCharts(){ initCharts() {
// 初始化所有表格 // 初始化所有表格
this.setChart('chart1'); this.setChart('chart1');
this.chart2Option = Object.assign({}, this.basicOption) this.chart2Option = Object.assign({}, this.basicOption)
this.chart2Option.series[0].type = 'line' this.chart2Option.series[0].type = 'line'
this.setChart('chart2', this.chart2Option); this.setChart('chart2', this.chart2Option);
this.chart3Option = Object.assign({}, this.basicOption) this.chart3Option = Object.assign({}, this.basicOption)
this.chart3Option.series = [ this.chart3Option.series = [
{ {
name: 'Forest', name: 'Forest',
type: 'bar', type: 'bar',
label: { label: {
show: true, show: true,
position: 'top' position: 'top'
}, },
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [320, 332, 301, 334, 390, 380] data: [320, 332, 301, 334, 390, 380]
}, },
{ {
name: 'Steppe', name: 'Steppe',
type: 'bar', type: 'bar',
emphasis: { emphasis: {
focus: 'series' focus: 'series'
}, },
data: [220, 182, 191, 234, 290, 280] data: [220, 182, 191, 234, 290, 280]
}] }]
this.setChart('chart3', this.chart3Option); this.setChart('chart3', this.chart3Option);
this.chart4Option = Object.assign({}, this.basicOption) this.chart4Option = Object.assign({}, this.basicOption)
this.chart4Option.series[0].smooth = true this.chart4Option.series[0].smooth = true
@ -333,7 +334,9 @@ export default {
left_other.style.width = '22%'; left_other.style.width = '22%';
right_other.style.position = 'absolute'; right_other.style.position = 'absolute';
right_other.style.width = '22%'; right_other.style.width = '22%';
model.style.height = (windowHeight - 50) + 'px'; model.style.position = 'absolute';
model.style.height = (windowHeight - 3) + 'px';
model.style.top = 0
var chartHeight = (windowHeight - 400) / 3 + 'px'; var chartHeight = (windowHeight - 400) / 3 + 'px';
var charts = document.getElementsByClassName('chart') var charts = document.getElementsByClassName('chart')
for (var i = 0; i < charts.length; i++) { for (var i = 0; i < charts.length; i++) {
@ -353,6 +356,7 @@ export default {
left_other.style.width = '100%'; left_other.style.width = '100%';
right_other.style.position = 'static'; right_other.style.position = 'static';
right_other.style.width = '100%'; right_other.style.width = '100%';
model.style.position = 'relative';
model.style.height = chartHeight; model.style.height = chartHeight;
var charts = document.getElementsByClassName('chart') var charts = document.getElementsByClassName('chart')
for (var i = 0; i < charts.length; i++) { for (var i = 0; i < charts.length; i++) {
@ -405,29 +409,95 @@ export default {
// Add your code here matching the playground format // Add your code here matching the playground format
const createScene = function () { const createScene = function () {
const scene = new BABYLON.Scene(engine); const scene = new BABYLON.Scene(engine);
scene.clearColor = BABYLON.Color3(1, 0, 1); scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1);
// const groundMat = new BABYLON.StandardMaterial("groundMat"); const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 });
// groundMat.diffuseTexture = new BABYLON.Texture("img/ground_big.jpg"); const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
// groundMat.diffuseTexture.hasAlpha = false; groundMaterial.majorUnitFrequency = 5;
// const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:40, height:40}); groundMaterial.minorUnitVisibility = 0.5;
// ground.material = groundMat; groundMaterial.gridRatio = 2;
// ground.position.y = - 0.1 // groundMaterial.opacity = 0.99;
ground.material = groundMaterial;
ground.position.y = -0.1
// const groundMat = new BABYLON.StandardMaterial("groundMat");
// groundMat.diffuseTexture = new BABYLON.Texture("img/ground_big.jpg");
// groundMat.diffuseTexture.hasAlpha = false;
// groundMat.diffuseTexture.uScale = 15.0;//Repeat 5 times on the Vertical Axes
// groundMat.diffuseTexture.vScale = 15.0;
// groundMat.shadowLevel = 0.4;
// const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:40, height:40});
// ground.material = groundMat;
// ground.position.y = - 0.1
// 加载背景图片 // 加载背景图片
// const backgroundImage = new BABYLON.Layer('', 'img/bj.png', scene, true); // const backgroundImage = new BABYLON.Layer('', 'img/bj.png', scene, true);
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 1.2)); const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 1.2));
that.initialTarget = camera.getTarget(); that.initialTarget = camera.getTarget();
camera.upperBetaLimit = Math.PI / 2.2; //无法移动到地面以下 camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
camera.attachControl(canvas, true); camera.attachControl(canvas, true);
camera.maxZ = 1000; // 调整适当的值 camera.maxZ = 1000; // 调整适当的值
// 相机限制 // 相机限制
camera.lowerRadiusLimit = 6; camera.lowerRadiusLimit = 6;
camera.upperRadiusLimit = 26; camera.upperRadiusLimit = 18;
// 灯光 // 灯光
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0)); const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
light.intensity = 1.6; 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;
// const skyboxMaterial = new BABYLON.StandardMaterial("skyBox", scene);
// skyboxMaterial.backFaceCulling = false;
// skyboxMaterial.disableLighting = true;
// skyboxMaterial.reflectionTexture = new BABYLON.CubeTexture("img/skybox", scene);
// skyboxMaterial.reflectionTexture.coordinatesMode = BABYLON.Texture.SKYBOX_MODE;
// skyboxMaterial.diffuseColor = new BABYLON.Color3(0, 0, 0);
// skyboxMaterial.specularColor = new BABYLON.Color3(0, 0, 0);
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 // 全屏GUI
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI"); const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
@ -462,12 +532,12 @@ export default {
} }
}) })
// 高亮显示mesh名区 // 高亮显示mesh名
const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect'); const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
mesh_rect.width = "80px"; mesh_rect.width = "80px";
mesh_rect.height = "20px"; mesh_rect.height = "20px";
mesh_rect.backgroundColor = 'black' mesh_rect.background = 'orange'
mesh_rect.alpha = 0.8 mesh_rect.alpha = 0.6
mesh_rect.isVisible = false; mesh_rect.isVisible = false;
advancedTexture.addControl(mesh_rect); advancedTexture.addControl(mesh_rect);
@ -484,7 +554,7 @@ export default {
var value = that.sectionNames[key]; var value = that.sectionNames[key];
var mesh = scene.getMeshByName(key); var mesh = scene.getMeshByName(key);
if(mesh){ if (mesh) {
var rect1 = new BABYLON_GUI.Rectangle(value + '_rect'); var rect1 = new BABYLON_GUI.Rectangle(value + '_rect');
rect1.width = "60px"; rect1.width = "60px";
rect1.height = "30px"; rect1.height = "30px";
@ -502,11 +572,12 @@ export default {
rect1.linkWithMesh(mesh); rect1.linkWithMesh(mesh);
rect1.linkOffsetY = -30; rect1.linkOffsetY = -30;
console.log(rect1)
rect1.onPointerDownObservable.add(() => { rect1.onPointerDownObservable.add(() => {
var mesh = rect1.linkedMesh; var mesh = rect1.linkedMesh;
if(camera.target != mesh.position){ if (camera.target != mesh.position) {
console.log('fly to') console.log('fly to')
// 计算新的相机位置 // 计算新的相机位置
var cameraPosition = new BABYLON.Vector3( var cameraPosition = new BABYLON.Vector3(
mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI), mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
mesh.position.y + 9 * Math.cos(camera.beta), mesh.position.y + 9 * Math.cos(camera.beta),
@ -514,39 +585,38 @@ export default {
); );
var ease = new BABYLON.CubicEase(); var ease = new BABYLON.CubicEase();
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT); ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease); BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, mesh.position, 0, ease); BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, mesh.position, 0, ease);
} }
}); });
}
// 创建一个数据展示层 // 创建一个数据展示层
// 创建一个StackPanel，用于容纳多个文本控件 // 创建一个StackPanel，用于容纳多个文本控件
// const data_view = new BABYLON_GUI.StackPanel(value + '_data_view'); const data_view = new BABYLON_GUI.StackPanel(value + '_data_view');
// data_view.width = '100px'; // StackPanel的宽度 data_view.width = '100px'; // StackPanel的宽度
// data_view.bottom = rect1.bottom + 50 + 'px'; data_view.bottom = rect1.bottom + 50 + 'px';
// data_view.background = 'darkblue' data_view.background = 'darkblue'
// data_view.cornerRadius = 4; data_view.cornerRadius = 4;
// // 创建多个文本控件，每个控件表示一行文本 // 创建多个文本控件，每个控件表示一行文本
// const textLines = ["电耗: 123", "产量: 123"]; const textLines = ["电耗: 123", "产量: 123"];
// for (let i = 0; i < textLines.length; i++) { for (let i = 0; i < textLines.length; i++) {
// let textLine = textLines[i]; let textLine = textLines[i];
// const textA = new BABYLON_GUI.TextBlock(); const textA = new BABYLON_GUI.TextBlock();
// textA.height = "20px" textA.height = "20px"
// textA.color = "white" textA.color = "white"
// textA.text = textLine; textA.text = textLine;
// // text.fontSize = textLines[i].fontSize; // text.fontSize = textLines[i].fontSize;
// data_view.addControl(textA); data_view.addControl(textA);
// } }
// // 将StackPanel添加到GUI系统中 // 将StackPanel添加到GUI系统中
// advancedTexture.addControl(data_view); advancedTexture.addControl(data_view);
// data_view.linkWithMesh(mesh); data_view.linkWithMesh(mesh);
// data_view.linkOffsetY = -80; data_view.linkOffsetY = -80;
}
} }
engine.hideLoadingUI() engine.hideLoadingUI()
@ -624,26 +694,26 @@ export default {
engine.resize(); engine.resize();
}); });
}, },
handleSectionClick(val, index){ handleSectionClick(val, index) {
this.activeSectionName = val; this.activeSectionName = val;
this.activeSection = index; this.activeSection = index;
if (val == '回转窑'){ if (val == '回转窑') {
this.showKgcet = true; this.showKgcet = true;
}else{ } else {
this.showKgcet = false; this.showKgcet = false;
} }
const element_main = document.querySelector('.right_main'); const element_main = document.querySelector('.right_main');
element_main.classList.add('animate__animated', 'animate__fadeIn'); element_main.classList.add('animate__animated', 'animate__fadeIn');
element_main.addEventListener('animationend', () => { element_main.addEventListener('animationend', () => {
// 移除属性 // 移除属性
element_main.classList.remove('animate__fadeIn'); element_main.classList.remove('animate__fadeIn');
}); });
const element = document.querySelector('.right_other'); const element = document.querySelector('.right_other');
element.classList.add('animate__animated', 'animate__fadeIn'); element.classList.add('animate__animated', 'animate__fadeIn');
element.addEventListener('animationend', () => { element.addEventListener('animationend', () => {
// 移除属性 // 移除属性
element.classList.remove('animate__fadeIn'); element.classList.remove('animate__fadeIn');
}); });
}, },
} }
@ -657,6 +727,8 @@ export default {
} }
header { header {
position: relative;
z-index: 10;
height: 50px; height: 50px;
/* 调整头部高度 */ /* 调整头部高度 */
background-image: url('/public/img/header.png'); background-image: url('/public/img/header.png');
@ -667,9 +739,11 @@ header {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
.title_left { .title_left {
flex: 1; flex: 1;
} }
.title { .title {
flex: 1; flex: 1;
text-align: center; text-align: center;
@ -677,6 +751,7 @@ header {
font-size: 24px; font-size: 24px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
} }
.title_right { .title_right {
flex: 1; flex: 1;
font-size: 20px; font-size: 20px;
@ -685,6 +760,7 @@ header {
} }
.model { .model {
top: 0;
width: 100%; width: 100%;
background-image: url('/public/img/bj.png'); background-image: url('/public/img/bj.png');
background-size: cover; background-size: cover;
@ -708,6 +784,7 @@ header {
.left_main, .left_main,
.right_main { .right_main {
z-index: 10;
position: absolute; position: absolute;
top: 40px; top: 40px;
width: 20%; width: 20%;
@ -780,19 +857,20 @@ header {
width: 100%; width: 100%;
height: 220px; height: 220px;
} }
.dropdown { .dropdown {
/* top: 20%; /* top: 20%;
font-size: 18px; font-size: 18px;
right: 22%; right: 22%;
position: absolute; */ position: absolute; */
bottom: 3%; bottom: 3%;
font-size: 18px; font-size: 18px;
left: 50%; left: 50%;
position: absolute; position: absolute;
transform: translateX(-50%); transform: translateX(-50%);
} }
/* .dropdown-item { /* .dropdown-item {
padding: 12px 16px; padding: 12px 16px;
text-decoration: none; text-decoration: none;
display: block; display: block;
@ -803,32 +881,32 @@ header {
border: 1px solid #99fffe; border: 1px solid #99fffe;
} }
*/ */
.dropdown-item { .dropdown-item {
text-decoration: none; text-decoration: none;
display: inline-block; display: inline-block;
color: white; color: white;
width:8vw; width: 8vw;
height:3.4vw; height: 3.4vw;
font-size: 1vw; font-size: 1vw;
text-align:center; text-align: center;
background:url(./../../../public/img/menu.png) no-repeat; background: url(./../../../public/img/menu.png) no-repeat;
background-size:100%; background-size: 100%;
line-height:3.7vw; line-height: 3.7vw;
margin: 0 0.1vw 0.1vw 0.1vw; margin: 0 0.1vw 0.1vw 0.1vw;
} }
.dropdown-item:hover, .dropdown-item.active{ .dropdown-item:hover,
/* background-color: #ddd; */ .dropdown-item.active {
width:8.2vw; /* background-color: #ddd; */
height:3.5vw; width: 8.2vw;
font-size: 1vw; height: 3.5vw;
line-height:3.7vw; font-size: 1vw;
margin:0; line-height: 3.7vw;
text-decoration: none; margin: 0;
display: inline-block; text-decoration: none;
color: white; display: inline-block;
text-align:center; color: white;
background:url(./../../../public/img/menu_active.png) no-repeat; text-align: center;
background-size:100%; background: url(./../../../public/img/menu_active.png) no-repeat;
} background-size: 100%;
</style> }</style>