feat: 大屏3dpanel优化样式
This commit is contained in:
parent
1bf7d47aba
commit
b6c8cd2259
|
|
@ -117,7 +117,7 @@
|
|||
/>单位产品电耗
|
||||
</div>
|
||||
<div class="pannel_number">
|
||||
<span class="panel_value">{{
|
||||
<span class="panel_value" v-if="sectionData">{{
|
||||
sectionData.elec_consume_unit
|
||||
}}</span>
|
||||
<span class="panel_unit">(kW·h)</span>
|
||||
|
|
@ -131,7 +131,7 @@
|
|||
/>产品产量
|
||||
</div>
|
||||
<div class="pannel_number">
|
||||
<span class="panel_value">{{
|
||||
<span class="panel_value" v-if="sectionData">{{
|
||||
sectionData.total_production
|
||||
}}</span>
|
||||
<span class="panel_unit">(t)</span>
|
||||
|
|
@ -148,13 +148,13 @@
|
|||
运转率
|
||||
</div>
|
||||
<div class="pannel_number">
|
||||
<span class="panel_value">{{
|
||||
<span class="panel_value" v-if="sectionData">{{
|
||||
sectionData.run_rate
|
||||
}}</span>
|
||||
<span class="panel_unit">(%)</span>
|
||||
</div>
|
||||
</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">
|
||||
<img
|
||||
src="img/coal.png"
|
||||
|
|
@ -162,7 +162,7 @@
|
|||
/>单位产品标煤耗
|
||||
</div>
|
||||
<div class="pannel_number">
|
||||
<span class="panel_value">{{
|
||||
<span class="panel_value" v-if="sectionData">{{
|
||||
sectionData.coal_consume_unit
|
||||
}}</span>
|
||||
<span class="panel_unit">(kgce/t)</span>
|
||||
|
|
@ -240,9 +240,10 @@ export default {
|
|||
initialTarget: null,
|
||||
// scene: null,
|
||||
// myui: null,
|
||||
// engine: null,
|
||||
// camera: null,
|
||||
is_mainviewpoint: false,
|
||||
resizeTimeout: null,
|
||||
// engine: null,
|
||||
loadedPercent: 0,
|
||||
sectionNames: {
|
||||
干渣库_primitive0: "电石渣",
|
||||
|
|
@ -906,6 +907,101 @@ export default {
|
|||
} catch (error) {}
|
||||
}, 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() {
|
||||
var that = this;
|
||||
const canvas = document.getElementById("renderCanvas"); // Get the canvas element
|
||||
|
|
@ -945,6 +1041,7 @@ export default {
|
|||
that.initialRadius,
|
||||
new BABYLON.Vector3(0, 0, 1.2)
|
||||
);
|
||||
that.camera = camera;
|
||||
that.initialTarget = camera.getTarget();
|
||||
camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
|
||||
camera.attachControl(canvas, true);
|
||||
|
|
@ -1111,49 +1208,7 @@ export default {
|
|||
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
|
||||
);
|
||||
}
|
||||
that.flyToMesh();
|
||||
});
|
||||
|
||||
// 高亮显示mesh名
|
||||
|
|
@ -1186,213 +1241,14 @@ export default {
|
|||
const mesh = scene.getMeshByName(key);
|
||||
if (mesh) {
|
||||
//建筑标签
|
||||
const rect1 = new BABYLON_GUI.Rectangle(
|
||||
value + "_rect"
|
||||
);
|
||||
rect1.width = "60px";
|
||||
rect1.height = "30px";
|
||||
rect1.cornerRadius = 4;
|
||||
rect1.color = "Orange";
|
||||
rect1.thickness = 2;
|
||||
rect1.background = "green";
|
||||
rect1.isPointerBlocker = true; // 防止点击穿透
|
||||
advancedTexture.addControl(rect1);
|
||||
var label = new BABYLON_GUI.TextBlock(
|
||||
value + "_label"
|
||||
);
|
||||
label.text = value;
|
||||
label.color = "white";
|
||||
label.fontSize = "14px";
|
||||
rect1.addControl(label);
|
||||
rect1.linkWithMesh(mesh);
|
||||
rect1.linkOffsetY = -30;
|
||||
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;
|
||||
}
|
||||
that.createLabelPanel(value, mesh);
|
||||
// 创建一个工段数据展示panel
|
||||
const info = { name: value,
|
||||
rows:[{label: "产品产量(t)", field: "total_production", value: 100},
|
||||
{label: "运转率(%)", field: "run_rate", value: 100},
|
||||
{label: "单位电耗(kwh)", field: "elec_consume_unit", value: 100}
|
||||
] };
|
||||
that.createDetailPanel(info, mesh);
|
||||
}
|
||||
}
|
||||
engine.hideLoadingUI();
|
||||
|
|
@ -1522,104 +1378,284 @@ export default {
|
|||
engine.resize();
|
||||
});
|
||||
},
|
||||
handleSectionClick(val, index) {
|
||||
flyToMesh(mesh = undefined) {
|
||||
// 不传mesh默认回到初始位置
|
||||
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"
|
||||
const camera = that.camera;
|
||||
if (mesh == undefined) {
|
||||
if (
|
||||
camera.alpha != that.initialAlpha ||
|
||||
camera.beta != that.initialBeta ||
|
||||
camera.radius != that.initialRadius
|
||||
) {
|
||||
let 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)
|
||||
);
|
||||
let position = that.initialTarget;
|
||||
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
|
||||
);
|
||||
}
|
||||
} 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", () => {
|
||||
// 移除属性
|
||||
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();
|
||||
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
|
||||
);
|
||||
}
|
||||
},
|
||||
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;
|
||||
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();
|
||||
// })
|
||||
const data_view = new BABYLON_GUI.StackPanel(
|
||||
info.name + "_data_view"
|
||||
);
|
||||
data_view.width = "200px"; // StackPanel的宽度
|
||||
// data_view.height = "140px";
|
||||
data_view.background = "rgba(0, 34, 51, 0.6)"; //暗色
|
||||
|
||||
const header = new BABYLON_GUI.StackPanel(info.name + "_header");
|
||||
header.width = "200px";
|
||||
header.height = "30px";
|
||||
header.background = "rgba(0, 34, 51, 0.7)";
|
||||
header.isVertical = false;
|
||||
|
||||
const mgroupName = new BABYLON_GUI.TextBlock(info.name + "_label");
|
||||
mgroupName.height = "30px";
|
||||
mgroupName.width = "175px";
|
||||
mgroupName.color = "white";
|
||||
mgroupName.text = info.name;
|
||||
mgroupName.textHorizontalAlignment = 0;
|
||||
mgroupName.paddingLeft = "8px";
|
||||
header.addControl(mgroupName);
|
||||
|
||||
const mgroup_close = BABYLON_GUI.Button.CreateSimpleButton(
|
||||
info.name + "_close",
|
||||
"X"
|
||||
);
|
||||
mgroup_close.width = "25px";
|
||||
mgroup_close.height = "25px";
|
||||
mgroup_close.color = "orange";
|
||||
mgroup_close.cornerRadius = 16;
|
||||
mgroup_close.fontSize = "12px";
|
||||
mgroup_close.background = "white";
|
||||
mgroup_close.onPointerClickObservable.add(() => {
|
||||
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() {
|
||||
this.close();
|
||||
window.removeEventListener("resize", ()=>{this.engine.resize()});
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Reference in New Issue