feat: 大屏3dpanel优化样式
This commit is contained in:
parent
1bf7d47aba
commit
b6c8cd2259
|
|
@ -117,7 +117,7 @@
|
||||||
/>单位产品电耗
|
/>单位产品电耗
|
||||||
</div>
|
</div>
|
||||||
<div class="pannel_number">
|
<div class="pannel_number">
|
||||||
<span class="panel_value">{{
|
<span class="panel_value" v-if="sectionData">{{
|
||||||
sectionData.elec_consume_unit
|
sectionData.elec_consume_unit
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="panel_unit">(kW·h)</span>
|
<span class="panel_unit">(kW·h)</span>
|
||||||
|
|
@ -131,7 +131,7 @@
|
||||||
/>产品产量
|
/>产品产量
|
||||||
</div>
|
</div>
|
||||||
<div class="pannel_number">
|
<div class="pannel_number">
|
||||||
<span class="panel_value">{{
|
<span class="panel_value" v-if="sectionData">{{
|
||||||
sectionData.total_production
|
sectionData.total_production
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="panel_unit">(t)</span>
|
<span class="panel_unit">(t)</span>
|
||||||
|
|
@ -148,13 +148,13 @@
|
||||||
运转率
|
运转率
|
||||||
</div>
|
</div>
|
||||||
<div class="pannel_number">
|
<div class="pannel_number">
|
||||||
<span class="panel_value">{{
|
<span class="panel_value" v-if="sectionData">{{
|
||||||
sectionData.run_rate
|
sectionData.run_rate
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="panel_unit">(%)</span>
|
<span class="panel_unit">(%)</span>
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12" class="panel_item" v-if="showKgcet">
|
<el-col :span="12" class="panel_item" v-show="showKgcet">
|
||||||
<div class="panel_label">
|
<div class="panel_label">
|
||||||
<img
|
<img
|
||||||
src="img/coal.png"
|
src="img/coal.png"
|
||||||
|
|
@ -162,7 +162,7 @@
|
||||||
/>单位产品标煤耗
|
/>单位产品标煤耗
|
||||||
</div>
|
</div>
|
||||||
<div class="pannel_number">
|
<div class="pannel_number">
|
||||||
<span class="panel_value">{{
|
<span class="panel_value" v-if="sectionData">{{
|
||||||
sectionData.coal_consume_unit
|
sectionData.coal_consume_unit
|
||||||
}}</span>
|
}}</span>
|
||||||
<span class="panel_unit">(kgce/t)</span>
|
<span class="panel_unit">(kgce/t)</span>
|
||||||
|
|
@ -240,9 +240,10 @@ export default {
|
||||||
initialTarget: null,
|
initialTarget: null,
|
||||||
// scene: null,
|
// scene: null,
|
||||||
// myui: null,
|
// myui: null,
|
||||||
|
// engine: null,
|
||||||
|
// camera: null,
|
||||||
is_mainviewpoint: false,
|
is_mainviewpoint: false,
|
||||||
resizeTimeout: null,
|
resizeTimeout: null,
|
||||||
// engine: null,
|
|
||||||
loadedPercent: 0,
|
loadedPercent: 0,
|
||||||
sectionNames: {
|
sectionNames: {
|
||||||
干渣库_primitive0: "电石渣",
|
干渣库_primitive0: "电石渣",
|
||||||
|
|
@ -906,6 +907,101 @@ export default {
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
}, 500);
|
}, 500);
|
||||||
},
|
},
|
||||||
|
handleSectionClick(val, index) {
|
||||||
|
let that = this;
|
||||||
|
this.activeSectionName = val;
|
||||||
|
this.activeSection = index;
|
||||||
|
if (val == "回转窑") {
|
||||||
|
this.showKgcet = true;
|
||||||
|
} else {
|
||||||
|
this.showKgcet = false;
|
||||||
|
}
|
||||||
|
let obj = {};
|
||||||
|
obj.type = "month_s";
|
||||||
|
obj.start_time = that.start_time;
|
||||||
|
obj.end_time = that.end_time;
|
||||||
|
obj.mgroup__name = val;
|
||||||
|
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.seriesData4 =
|
||||||
|
this.sectionDatas[this.activeSectionName].charts_ele;
|
||||||
|
that.seriesData5 =
|
||||||
|
this.sectionDatas[this.activeSectionName].charts_prod;
|
||||||
|
that.seriesData6 =
|
||||||
|
this.sectionDatas[this.activeSectionName].charts_rate;
|
||||||
|
that.initCharts1();
|
||||||
|
const element_main = document.querySelector(".right_main");
|
||||||
|
element_main.classList.add(
|
||||||
|
"animate__animated",
|
||||||
|
"animate__fadeIn"
|
||||||
|
);
|
||||||
|
element_main.addEventListener("animationend", () => {
|
||||||
|
// 移除属性
|
||||||
|
element_main.classList.remove("animate__fadeIn");
|
||||||
|
});
|
||||||
|
const element = document.querySelector(".right_other");
|
||||||
|
element.classList.add("animate__animated", "animate__fadeIn");
|
||||||
|
element.addEventListener("animationend", () => {
|
||||||
|
// 移除属性
|
||||||
|
element.classList.remove("animate__fadeIn");
|
||||||
|
});
|
||||||
|
const sectionUI = this.myui.getControlByName(val + "_rect");
|
||||||
|
sectionUI.onPointerDownObservable.notifyObservers();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getMgroupChartData(name) {
|
||||||
|
let that = this;
|
||||||
|
this.sectionData = this.sectionDatas[this.activeSectionName];
|
||||||
|
//模拟数据
|
||||||
|
that.seriesData4 =
|
||||||
|
this.sectionDatas[this.activeSectionName].charts_ele;
|
||||||
|
that.seriesData5 =
|
||||||
|
this.sectionDatas[this.activeSectionName].charts_prod;
|
||||||
|
that.seriesData6 =
|
||||||
|
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();
|
||||||
|
// })
|
||||||
|
},
|
||||||
initFactory() {
|
initFactory() {
|
||||||
var that = this;
|
var that = this;
|
||||||
const canvas = document.getElementById("renderCanvas"); // Get the canvas element
|
const canvas = document.getElementById("renderCanvas"); // Get the canvas element
|
||||||
|
|
@ -945,6 +1041,7 @@ export default {
|
||||||
that.initialRadius,
|
that.initialRadius,
|
||||||
new BABYLON.Vector3(0, 0, 1.2)
|
new BABYLON.Vector3(0, 0, 1.2)
|
||||||
);
|
);
|
||||||
|
that.camera = camera;
|
||||||
that.initialTarget = camera.getTarget();
|
that.initialTarget = camera.getTarget();
|
||||||
camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
|
camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
|
||||||
camera.attachControl(canvas, true);
|
camera.attachControl(canvas, true);
|
||||||
|
|
@ -1111,49 +1208,7 @@ export default {
|
||||||
button_main.background = "green";
|
button_main.background = "green";
|
||||||
control_main.addControl(button_main);
|
control_main.addControl(button_main);
|
||||||
button_main.onPointerClickObservable.add(() => {
|
button_main.onPointerClickObservable.add(() => {
|
||||||
if (
|
that.flyToMesh();
|
||||||
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名
|
// 高亮显示mesh名
|
||||||
|
|
@ -1186,213 +1241,14 @@ export default {
|
||||||
const mesh = scene.getMeshByName(key);
|
const mesh = scene.getMeshByName(key);
|
||||||
if (mesh) {
|
if (mesh) {
|
||||||
//建筑标签
|
//建筑标签
|
||||||
const rect1 = new BABYLON_GUI.Rectangle(
|
that.createLabelPanel(value, mesh);
|
||||||
value + "_rect"
|
// 创建一个工段数据展示panel
|
||||||
);
|
const info = { name: value,
|
||||||
rect1.width = "60px";
|
rows:[{label: "产品产量(t)", field: "total_production", value: 100},
|
||||||
rect1.height = "30px";
|
{label: "运转率(%)", field: "run_rate", value: 100},
|
||||||
rect1.cornerRadius = 4;
|
{label: "单位电耗(kwh)", field: "elec_consume_unit", value: 100}
|
||||||
rect1.color = "Orange";
|
] };
|
||||||
rect1.thickness = 2;
|
that.createDetailPanel(info, mesh);
|
||||||
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;
|
|
||||||
if (value == "电石渣") {
|
|
||||||
rect1.linkOffsetY = -200;
|
|
||||||
var line = new BABYLON_GUI.Line();
|
|
||||||
line.lineWidth = 4;
|
|
||||||
line.color = "Orange";
|
|
||||||
line.y1 = 10;
|
|
||||||
line.y2 = 15;
|
|
||||||
line.linkOffsetY = -15;
|
|
||||||
line.dash = [3, 3];
|
|
||||||
advancedTexture.addControl(line);
|
|
||||||
line.linkWithMesh(mesh);
|
|
||||||
let connectedControl =
|
|
||||||
advancedTexture.getControlByName(
|
|
||||||
"电石渣_rect"
|
|
||||||
);
|
|
||||||
line.connectedControl = connectedControl;
|
|
||||||
// line.connectedControl = rect1;
|
|
||||||
// line.connectedControl = data_view;
|
|
||||||
}
|
|
||||||
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);
|
|
||||||
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();
|
engine.hideLoadingUI();
|
||||||
|
|
@ -1522,104 +1378,284 @@ export default {
|
||||||
engine.resize();
|
engine.resize();
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
handleSectionClick(val, index) {
|
flyToMesh(mesh = undefined) {
|
||||||
|
// 不传mesh默认回到初始位置
|
||||||
let that = this;
|
let that = this;
|
||||||
this.activeSectionName = val;
|
const camera = that.camera;
|
||||||
this.activeSection = index;
|
if (mesh == undefined) {
|
||||||
if (val == "回转窑") {
|
if (
|
||||||
this.showKgcet = true;
|
camera.alpha != that.initialAlpha ||
|
||||||
} else {
|
camera.beta != that.initialBeta ||
|
||||||
this.showKgcet = false;
|
camera.radius != that.initialRadius
|
||||||
}
|
) {
|
||||||
let obj = {};
|
let cameraPosition = new BABYLON.Vector3(
|
||||||
obj.type = "month_s";
|
0 +
|
||||||
obj.start_time = that.start_time;
|
that.initialRadius *
|
||||||
obj.end_time = that.end_time;
|
Math.sin(that.initialBeta) *
|
||||||
obj.mgroup__name = val;
|
Math.cos(that.initialAlpha),
|
||||||
obj.page = 0;
|
0 + that.initialRadius * Math.cos(that.initialBeta),
|
||||||
this.$API.enm.enstat.req(obj).then((res) => {
|
0 +
|
||||||
let list0 = res.sort(this.compare("month_s"));
|
that.initialRadius *
|
||||||
let list = list0.sort(this.compare("year_s"));
|
Math.sin(that.initialBeta) *
|
||||||
let seriesData4 = [0, 0, 0, 0, 0, 0],
|
Math.sin(that.initialAlpha)
|
||||||
seriesData5 = [0, 0, 0, 0, 0, 0],
|
);
|
||||||
seriesData6 = [0, 0, 0, 0, 0, 0];
|
let position = that.initialTarget;
|
||||||
list.forEach((item) => {
|
var ease = new BABYLON.CubicEase();
|
||||||
let index = that.arrMonth.indexOf(item.month_s);
|
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
|
||||||
seriesData4[index] = Number(item.elec_consume_unit);
|
BABYLON.Animation.CreateAndStartAnimation(
|
||||||
seriesData5[index] = Number(item.total_production);
|
"at5",
|
||||||
seriesData6[index] = Number(item.run_rate);
|
camera,
|
||||||
});
|
"position",
|
||||||
that.seriesData4 = seriesData4;
|
45,
|
||||||
that.seriesData5 = seriesData5;
|
200,
|
||||||
that.seriesData6 = seriesData6;
|
camera.position,
|
||||||
//模拟数据
|
cameraPosition,
|
||||||
that.seriesData4 =
|
0,
|
||||||
this.sectionDatas[this.activeSectionName].charts_ele;
|
ease
|
||||||
that.seriesData5 =
|
);
|
||||||
this.sectionDatas[this.activeSectionName].charts_prod;
|
BABYLON.Animation.CreateAndStartAnimation(
|
||||||
that.seriesData6 =
|
"at51",
|
||||||
this.sectionDatas[this.activeSectionName].charts_rate;
|
camera,
|
||||||
that.initCharts1();
|
"target",
|
||||||
const element_main = document.querySelector(".right_main");
|
45,
|
||||||
element_main.classList.add(
|
200,
|
||||||
"animate__animated",
|
camera.target,
|
||||||
"animate__fadeIn"
|
position,
|
||||||
|
0,
|
||||||
|
ease
|
||||||
|
);
|
||||||
|
}
|
||||||
|
} else if (camera.target != mesh.position) {
|
||||||
|
console.log('fly to')
|
||||||
|
// 计算新的相机位置
|
||||||
|
let position = mesh._parentNode._position;
|
||||||
|
if (mesh._parentNode.id == "__root__") {
|
||||||
|
position = mesh.position;
|
||||||
|
}
|
||||||
|
let 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)
|
||||||
);
|
);
|
||||||
element_main.addEventListener("animationend", () => {
|
var ease = new BABYLON.CubicEase();
|
||||||
// 移除属性
|
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
|
||||||
element_main.classList.remove("animate__fadeIn");
|
BABYLON.Animation.CreateAndStartAnimation(
|
||||||
});
|
"at5",
|
||||||
const element = document.querySelector(".right_other");
|
camera,
|
||||||
element.classList.add("animate__animated", "animate__fadeIn");
|
"position",
|
||||||
element.addEventListener("animationend", () => {
|
45,
|
||||||
// 移除属性
|
200,
|
||||||
element.classList.remove("animate__fadeIn");
|
camera.position,
|
||||||
});
|
cameraPosition,
|
||||||
const sectionUI = this.myui.getControlByName(val + "_rect");
|
0,
|
||||||
sectionUI.onPointerDownObservable.notifyObservers();
|
ease
|
||||||
|
);
|
||||||
|
BABYLON.Animation.CreateAndStartAnimation(
|
||||||
|
"at51",
|
||||||
|
camera,
|
||||||
|
"target",
|
||||||
|
45,
|
||||||
|
200,
|
||||||
|
camera.target,
|
||||||
|
position,
|
||||||
|
0,
|
||||||
|
ease
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
createLabelPanel(value, mesh) {
|
||||||
|
let that = this;
|
||||||
|
let advancedTexture = that.myui;
|
||||||
|
const rect1 = new BABYLON_GUI.Rectangle(value + "_rect");
|
||||||
|
rect1.width = "64px";
|
||||||
|
rect1.height = "30px";
|
||||||
|
rect1.cornerRadius = 1;
|
||||||
|
rect1.thickness = 0;
|
||||||
|
rect1.background = "rgba(0, 128, 0, 0.8)";
|
||||||
|
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;
|
||||||
|
if (value == "电石渣") {
|
||||||
|
rect1.linkOffsetY = -200;
|
||||||
|
var line = new BABYLON_GUI.Line();
|
||||||
|
line.lineWidth = 4;
|
||||||
|
line.color = "Orange";
|
||||||
|
line.y1 = 10;
|
||||||
|
line.y2 = 15;
|
||||||
|
line.linkOffsetY = -15;
|
||||||
|
line.dash = [3, 3];
|
||||||
|
advancedTexture.addControl(line);
|
||||||
|
line.linkWithMesh(mesh);
|
||||||
|
let connectedControl =
|
||||||
|
advancedTexture.getControlByName("电石渣_rect");
|
||||||
|
line.connectedControl = connectedControl;
|
||||||
|
}
|
||||||
|
rect1.onPointerDownObservable.add(() => {
|
||||||
|
const mesh = rect1.linkedMesh;
|
||||||
|
that.flyToMesh(mesh);
|
||||||
|
// 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 = that.myui.getControlByName(
|
||||||
|
dataViewName + "_data_view"
|
||||||
|
);
|
||||||
|
if (dataView) {
|
||||||
|
// // 在这里进行矩形的操作
|
||||||
|
dataView.isVisible = true;
|
||||||
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
getMgroupChartData(name) {
|
// 创建3D数据展示层GUI
|
||||||
|
createDetailPanel(info, mesh) {
|
||||||
|
// info格式{"name": "xxx",
|
||||||
|
//"rows": ["label": "xxx1", "field": "ccc", "value": 123, "type": "primary"]}
|
||||||
let that = this;
|
let that = this;
|
||||||
this.sectionData = this.sectionDatas[this.activeSectionName];
|
const data_view = new BABYLON_GUI.StackPanel(
|
||||||
//模拟数据
|
info.name + "_data_view"
|
||||||
that.seriesData4 =
|
);
|
||||||
this.sectionDatas[this.activeSectionName].charts_ele;
|
data_view.width = "200px"; // StackPanel的宽度
|
||||||
that.seriesData5 =
|
// data_view.height = "140px";
|
||||||
this.sectionDatas[this.activeSectionName].charts_prod;
|
data_view.background = "rgba(0, 34, 51, 0.6)"; //暗色
|
||||||
that.seriesData6 =
|
|
||||||
this.sectionDatas[this.activeSectionName].charts_rate;
|
const header = new BABYLON_GUI.StackPanel(info.name + "_header");
|
||||||
that.initCharts1();
|
header.width = "200px";
|
||||||
console.log(this.sectionData, this.activeSectionName);
|
header.height = "30px";
|
||||||
// 模拟数据
|
header.background = "rgba(0, 34, 51, 0.7)";
|
||||||
// var that = this;
|
header.isVertical = false;
|
||||||
// let obj = {};
|
|
||||||
// obj.type = 'month_s';
|
const mgroupName = new BABYLON_GUI.TextBlock(info.name + "_label");
|
||||||
// obj.start_time = that.start_time;
|
mgroupName.height = "30px";
|
||||||
// obj.end_time = that.end_time;
|
mgroupName.width = "175px";
|
||||||
// obj.mgroup__name = name;
|
mgroupName.color = "white";
|
||||||
// obj.page = 0;
|
mgroupName.text = info.name;
|
||||||
// this.$API.enm.enstat.req(obj).then((res) => {
|
mgroupName.textHorizontalAlignment = 0;
|
||||||
// let list0 = res.sort(this.compare('month_s'));
|
mgroupName.paddingLeft = "8px";
|
||||||
// let list = list0.sort(this.compare('year_s'));
|
header.addControl(mgroupName);
|
||||||
// let seriesData4 = [0, 0, 0, 0, 0, 0],
|
|
||||||
// seriesData5 = [0, 0, 0, 0, 0, 0],
|
const mgroup_close = BABYLON_GUI.Button.CreateSimpleButton(
|
||||||
// seriesData6 = [0, 0, 0, 0, 0, 0];
|
info.name + "_close",
|
||||||
// list.forEach(item => {
|
"X"
|
||||||
// let index = that.arrMonth.indexOf(item.month_s);
|
);
|
||||||
// seriesData4[index] = Number(item.elec_consume_unit)
|
mgroup_close.width = "25px";
|
||||||
// seriesData5[index] = Number(item.total_production)
|
mgroup_close.height = "25px";
|
||||||
// seriesData6[index] = Number(item.run_rate)
|
mgroup_close.color = "orange";
|
||||||
// })
|
mgroup_close.cornerRadius = 16;
|
||||||
// that.seriesData4 = seriesData4;
|
mgroup_close.fontSize = "12px";
|
||||||
// that.seriesData5 = seriesData5;
|
mgroup_close.background = "white";
|
||||||
// that.seriesData6 = seriesData6;
|
mgroup_close.onPointerClickObservable.add(() => {
|
||||||
// that.initCharts1();
|
data_view.isVisible = false;
|
||||||
// })
|
});
|
||||||
|
header.addControl(mgroup_close);
|
||||||
|
data_view.addControl(header);
|
||||||
|
|
||||||
|
const mgroup_line = new BABYLON_GUI.Rectangle(info.name + "_line");
|
||||||
|
mgroup_line.height = "3px";
|
||||||
|
mgroup_line.width = "200px";
|
||||||
|
mgroup_line.thickness = 0;
|
||||||
|
mgroup_line.background = "rgba(44, 237, 255, 0.45)";
|
||||||
|
data_view.addControl(mgroup_line);
|
||||||
|
|
||||||
|
info.rows.forEach((item, index)=>{
|
||||||
|
const row = new BABYLON_GUI.StackPanel(info.name + `_${item.field}` + "_row");
|
||||||
|
row.width = "200px";
|
||||||
|
row.height = "30px";
|
||||||
|
row.isVertical = false;
|
||||||
|
|
||||||
|
const field = new BABYLON_GUI.TextBlock(info.name + `_${item.field}` + "_label");
|
||||||
|
field.width = "120px";
|
||||||
|
field.height = "30px";
|
||||||
|
field.color = "white";
|
||||||
|
field.fontSize = 14;
|
||||||
|
field.text = item.label;
|
||||||
|
field.textHorizontalAlignment = 0;
|
||||||
|
field.paddingLeft = "8px";
|
||||||
|
row.addControl(field);
|
||||||
|
|
||||||
|
const valx = new BABYLON_GUI.TextBlock(info.name + `_${item.field}` + "_value");
|
||||||
|
valx.width = "80px";
|
||||||
|
valx.height = "30px";
|
||||||
|
valx.color = "white";
|
||||||
|
valx.fontSize = 14;
|
||||||
|
valx.text = item.value;
|
||||||
|
valx.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
|
||||||
|
valx.paddingRight = "8px";
|
||||||
|
row.addControl(valx);
|
||||||
|
data_view.addControl(row);
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
// 将StackPanel添加到GUI系统中
|
||||||
|
that.myui.addControl(data_view);
|
||||||
|
data_view.linkWithMesh(mesh);
|
||||||
|
data_view.linkOffsetY = -120;
|
||||||
|
if (info.name == "电石渣") {
|
||||||
|
data_view.linkOffsetY = -290;
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
unmounted() {
|
unmounted() {
|
||||||
this.close();
|
this.close();
|
||||||
|
window.removeEventListener("resize", ()=>{this.engine.resize()});
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue