feat: 光子大屏页面调整
This commit is contained in:
parent
b85c654591
commit
155a4c7b7e
|
|
@ -7,45 +7,98 @@
|
|||
</el-header>
|
||||
<el-main style="padding:0" id="mainBlock">
|
||||
<el-row style="height:100%">
|
||||
<el-col :span="6">
|
||||
<!-- <div style="position: absolute;left: 0;width:20%;z-index:10">
|
||||
<div style="display:flex;flex-direction: column;height:100%;padding:20px">
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle"><div class="blockTitleIcon"></div>模块一</div>
|
||||
<div id="line1" style="width:100%;height:92%"></div>
|
||||
<div id="line1" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
|
||||
</div>
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle"><div class="blockTitleIcon"></div>模块二</div>
|
||||
<div id="bar1" style="width:100%;height:92%"></div>
|
||||
<div id="bar1" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
|
||||
</div>
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle"><div class="blockTitleIcon"></div>模块三</div>
|
||||
<div id="line2" style="width:100%;height:92%"></div>
|
||||
<div id="line2" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
<el-col :span="24">
|
||||
<div 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>
|
||||
</el-col>
|
||||
<el-col :span="12"></el-col>
|
||||
<el-col :span="6">
|
||||
<!-- <div style="position: absolute;right: 0;width:20%;z-index:10">
|
||||
<div style="display:flex;flex-direction: column;height:100%;padding:20px">
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle"><div class="blockTitleIcon"></div>模块四</div>
|
||||
<div id="pie" style="width:100%;height:92%"></div>
|
||||
<div id="pie" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
|
||||
</div>
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle"><div class="blockTitleIcon"></div>模块五</div>
|
||||
<div id="line3" style="width:100%;height:92%"></div>
|
||||
<div id="line3" style="width:100%;height:92%;background:rgba(50,144,118,.1)"></div>
|
||||
</div>
|
||||
<div class="flexItem" style="flex:1">
|
||||
<div class="blockTitle"><div class="blockTitleIcon"></div>模块六</div>
|
||||
<dv-scroll-board id="scrollTable" :config="taskBoard" :style="{'width':'100%','height':blockHeight}"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</div> -->
|
||||
</el-row>
|
||||
</el-main>
|
||||
<div id="inforBlock" class="inforBlock" v-show="infoVisibel">
|
||||
<div class="border_corner border_left_top"></div>
|
||||
<div class="border_corner border_right_top"></div>
|
||||
<div class="border_corner border_left_bottom"></div>
|
||||
<div class="border_corner border_right_bottom"></div>
|
||||
<p class="title">10车间</p>
|
||||
<div class="infoCantier">
|
||||
<div class="leftBlock">
|
||||
<el-progress width="50" type="circle" color="rgba(54, 217, 187, 1)" :percentage="25" id="dashbordProcess"/>
|
||||
<span>完成进度</span>
|
||||
</div>
|
||||
<div class="rightBlock">
|
||||
<div>
|
||||
<p>总量</p>
|
||||
<p> <span class="numberFont">390</span><span class="numberUnit">件</span></p>
|
||||
</div>
|
||||
<div class="countWrap">
|
||||
<div>
|
||||
<p>总量</p>
|
||||
<p> <span class="numberFont">120</span><span class="numberUnit">件</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p>总量</p>
|
||||
<p> <span class="numberFont">130</span><span class="numberUnit">件</span></p>
|
||||
</div>
|
||||
<div>
|
||||
<p>总量</p>
|
||||
<p> <span class="numberFont">140</span><span class="numberUnit">件</span></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</el-container>
|
||||
</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 {
|
||||
|
|
@ -67,6 +120,28 @@ export default {
|
|||
index: true,
|
||||
columnWidth: [50],
|
||||
align: ['center'],
|
||||
loadedPercent:0,
|
||||
percentage:0,
|
||||
percentage:0
|
||||
},
|
||||
initialAlpha: -Math.PI / 1.2,
|
||||
initialBeta: Math.PI / 2.5,
|
||||
initialRadius: 15,
|
||||
initialTarget: null,
|
||||
scene: null,
|
||||
myui: null,
|
||||
resizeTimeout: null,
|
||||
engine: null,
|
||||
loadedPercent: 0,
|
||||
currentLightMesh: null,
|
||||
infoVisibel:false,
|
||||
updateTime: '2023-08-17 16:00:00',
|
||||
nodesLists:{
|
||||
'单身宿舍.005_primitive3':{total:'0',elec:'0',name:'办公楼'},
|
||||
'立方体.015_primitive1':{total:'0',elec:'0',name:'加工车间'},
|
||||
'立方体.004_primitive1':{total:'0',elec:'0',name:'配料车间'},
|
||||
'立方体.003_primitive1':{total:'0',elec:'0',name:'成型车间'},
|
||||
'立立方体.002_primitive1':{total:'0',elec:'0',name:'成型车间'},
|
||||
},
|
||||
}
|
||||
},
|
||||
|
|
@ -74,9 +149,340 @@ export default {
|
|||
let height = document.getElementById('mainBlock').clientHeight;
|
||||
let height0 = height/3-50;
|
||||
this.blockHeight = height0+'px'
|
||||
this.$nextTick(() => {
|
||||
// this.initChart();
|
||||
this.initDomStyle();
|
||||
this.initFactory();
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
initDomStyle() {
|
||||
// 获取窗口的总高度
|
||||
var windowHeight = window.innerHeight;
|
||||
var windowWidth = window.innerWidth;
|
||||
var dashboard = document.getElementsByClassName('container')[0];
|
||||
var model = document.getElementsByClassName('model')[0];
|
||||
if (windowWidth > 960) {
|
||||
dashboard.style.overflow = 'hidden';
|
||||
model.style.position = 'absolute';
|
||||
model.style.height = (windowHeight - 3) + 'px';
|
||||
model.style.top = 0
|
||||
}else {
|
||||
dashboard.style.overflow = 'auto';
|
||||
var chartHeight = windowWidth * 0.6;
|
||||
model.style.position = 'relative';
|
||||
model.style.height = chartHeight;
|
||||
}
|
||||
if (this.engine != null) {
|
||||
this.engine.resize();
|
||||
}
|
||||
|
||||
},
|
||||
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();
|
||||
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: 10, height: 10 });
|
||||
const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
|
||||
groundMaterial.majorUnitFrequency = 5;
|
||||
groundMaterial.minorUnitVisibility = 0.1;
|
||||
groundMaterial.gridRatio = 0.1;
|
||||
ground.material = groundMaterial;
|
||||
ground.position.y = -0.1
|
||||
|
||||
// 加载背景图片
|
||||
const backgroundImage = new BABYLON.Layer('', 'img/photon_bg.png', scene, true);
|
||||
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0.5, 0.2));
|
||||
that.initialTarget = camera.getTarget();
|
||||
// camera.lowerBetaLimit = Math.PI / 2.6;
|
||||
camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
|
||||
camera.attachControl(canvas, true);
|
||||
camera.maxZ = 1000; // 调整适当的值
|
||||
// 相机限制
|
||||
camera.lowerRadiusLimit = 3;
|
||||
camera.upperRadiusLimit = 3;
|
||||
// 灯光
|
||||
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
|
||||
light.intensity =0.1;
|
||||
// 全屏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 = "200px";
|
||||
mesh_rect.height = "45px";
|
||||
mesh_rect.background = 'rgb(75,240,234)';
|
||||
mesh_rect.alpha = 0.6;
|
||||
mesh_rect.isVisible = false;
|
||||
advancedTexture.addControl(mesh_rect);
|
||||
|
||||
var mesh_name = new BABYLON_GUI.TextBlock('mesh_name');
|
||||
mesh_name.text = "";
|
||||
mesh_name.color = 'white';
|
||||
mesh_name.fontSize = '14px';
|
||||
mesh_rect.addControl(mesh_name);
|
||||
var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/photon3.glb";
|
||||
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
|
||||
//关闭灯光
|
||||
// scene.lights[1].setEnabled(false);
|
||||
// setEnable
|
||||
engine.hideLoadingUI()
|
||||
// for (let key in that.nodesLists) {
|
||||
// // const value = that.nodesLists[key];
|
||||
// const mesh = scene.getMeshByName(key);
|
||||
// if (mesh) {
|
||||
// console.log('000000000000');
|
||||
// console.log(mesh);
|
||||
|
||||
// mesh.actionManager.registerAction(
|
||||
// // new BABYLON.ExecuteCodeAction(trigger, func, condition)
|
||||
// )
|
||||
// mesh.onPointerDownObservable.add(() => {
|
||||
// console.log('111111111111');
|
||||
// console.log(camera.target);
|
||||
// console.log(mesh.position);
|
||||
// debugger;
|
||||
// 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);
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
},
|
||||
//进度条
|
||||
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);
|
||||
// 添加抓取事件
|
||||
const hl1 = new BABYLON.HighlightLayer("hl1", scene);
|
||||
canvas.addEventListener('mousemove', (event) => {
|
||||
// 使用 scene.pick 检测鼠标拾取
|
||||
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
|
||||
if (that.currentLightMesh) {
|
||||
that.infoVisibel = false;
|
||||
mesh_rect.isVisible = false;
|
||||
hl1.removeAllMeshes();
|
||||
highlightLayer.removeAllMeshes();
|
||||
}
|
||||
if (pickResult.hit) {
|
||||
// console.log('pickResult',pickResult);
|
||||
const mesh = pickResult.pickedMesh;
|
||||
// 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);
|
||||
// }
|
||||
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;
|
||||
// that.infoVisibel = true;
|
||||
// }
|
||||
if(mesh.name=='单身宿舍.005_primitive3') {
|
||||
//单身宿舍.003_primitive3
|
||||
// 在选中的 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;
|
||||
that.infoVisibel = true;
|
||||
|
||||
hl1.addMesh(mesh, new BABYLON.Color3(12/255, 250/255, 252/255), true);
|
||||
hl1.blurVerticalSize = 5;
|
||||
hl1.blurHorizontalSize = 5;
|
||||
function worldToScreen(point, camera, scene,engine) {
|
||||
return BABYLON.Vector3.Project(point,
|
||||
BABYLON.Matrix.Identity(),
|
||||
scene.getTransformMatrix(),
|
||||
camera.viewport.toGlobal(engine.getRenderWidth(), engine.getRenderHeight()));
|
||||
}
|
||||
var pos = worldToScreen(mesh.absolutePosition,camera,scene,engine);
|
||||
let infoBlock = document.getElementById('inforBlock');
|
||||
infoBlock.style.left = (Math.floor(pos.x)+250)+'px';
|
||||
infoBlock.style.top = (Math.floor(pos.y)-250)+'px';
|
||||
}
|
||||
}else{
|
||||
that.infoVisibel = false;
|
||||
}
|
||||
});
|
||||
canvas.addEventListener('mousedown', (event) => {
|
||||
debugger;
|
||||
// 使用 scene.pick 检测鼠标拾取
|
||||
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
|
||||
if (pickResult.hit) {
|
||||
console.log('000000000000');
|
||||
console.log('pickResult',pickResult);
|
||||
const mesh = pickResult.pickedMesh;
|
||||
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);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// checkbox.isChecked = true; //默认开启自动旋转
|
||||
return scene;
|
||||
};
|
||||
|
||||
const scene = createScene(); //Call the createScene function
|
||||
scene.debugLayer.show()
|
||||
engine.runRenderLoop(function () {
|
||||
scene.render();
|
||||
scene.onPointerObservable.add((pointerInfo) => {
|
||||
switch (pointerInfo.type) {
|
||||
case BABYLON.PointerEventTypes.POINTERDOWN:
|
||||
console.log(scene.pointerX, scene.pointerY);
|
||||
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
|
||||
if (pickResult.hit) {
|
||||
console.log('000000000000');
|
||||
console.log('pickResult',pickResult);
|
||||
const mesh = pickResult.pickedMesh;
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
});
|
||||
this.engine = engine;
|
||||
this.scene = scene;
|
||||
window.addEventListener("resize", function () {
|
||||
engine.resize();
|
||||
});
|
||||
},
|
||||
initChart(){
|
||||
//左1
|
||||
let chartDom = document.getElementById('line1');
|
||||
chartDom.style.height = height0+'px';
|
||||
chartDom.style.height = this.blockHeight;
|
||||
let myChart = echarts.init(chartDom);
|
||||
let option = {
|
||||
tooltip: {
|
||||
|
|
@ -235,7 +641,7 @@ export default {
|
|||
myChart.setOption(option);
|
||||
//左边2
|
||||
let bar1 = document.getElementById('bar1');
|
||||
bar1.style.height = height0+'px';
|
||||
bar1.style.height = this.blockHeight;
|
||||
let bar1Chart = echarts.init(bar1);
|
||||
let bar1option = {
|
||||
tooltip: {
|
||||
|
|
@ -372,7 +778,7 @@ export default {
|
|||
bar1Chart.setOption(bar1option);
|
||||
//左3
|
||||
let line2Dom = document.getElementById('line2');
|
||||
line2Dom.style.height = height0+'px';
|
||||
line2Dom.style.height = this.blockHeight;
|
||||
let line2Chart = echarts.init(line2Dom);
|
||||
let line2option = {
|
||||
tooltip: {
|
||||
|
|
@ -484,7 +890,7 @@ export default {
|
|||
line2Chart.setOption(line2option);
|
||||
//柱状图折线
|
||||
let line3Dom = document.getElementById('line3');
|
||||
line3Dom.style.height = height0+'px';
|
||||
line3Dom.style.height = this.blockHeight;
|
||||
let line3Chart = echarts.init(line3Dom);
|
||||
let line3option = {
|
||||
tooltip: {
|
||||
|
|
@ -620,7 +1026,7 @@ export default {
|
|||
line3Chart.setOption(line3option);
|
||||
//饼状图
|
||||
let pieDom = document.getElementById('pie');
|
||||
pieDom.style.height = height0+'px';
|
||||
pieDom.style.height = this.blockHeight;
|
||||
let pieChart = echarts.init(pieDom);
|
||||
let pieoption = {
|
||||
color:['rgb(155,248,249)','rgb(248,189,118)','rgb(110,181,249)'],
|
||||
|
|
@ -665,7 +1071,7 @@ export default {
|
|||
};
|
||||
pieChart.setOption(pieoption);
|
||||
},
|
||||
methods:{},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
|
@ -737,4 +1143,121 @@ export default {
|
|||
background:rgb(10,63,68)!important;
|
||||
background-color:#0a3f44!important;
|
||||
}
|
||||
|
||||
.model {
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height:100%;
|
||||
}
|
||||
#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;
|
||||
}
|
||||
|
||||
.inforBlock {
|
||||
left:60%;
|
||||
top:30%;
|
||||
width:420px;
|
||||
height:150px;
|
||||
position:absolute;
|
||||
font-weight:500;
|
||||
color:#fff;
|
||||
padding:20px;
|
||||
font-size:14px;
|
||||
box-sizing:border-box;
|
||||
background: linear-gradient(to bottom left,rgba(25,154,118,.5),rgba(31,44,50,.5));
|
||||
/* border:1px solid rgba(1,235,239,.2); */
|
||||
.border_corner {
|
||||
z-index: 2500;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: rgba(0, 0, 0, 0);
|
||||
border: 2px solid rgba(54, 217, 187, 1);
|
||||
}
|
||||
.border_left_top {
|
||||
top: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
.border_right_top {
|
||||
top: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
.border_left_bottom {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
}
|
||||
.border_right_bottom {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
border-left: none;
|
||||
border-top: none;
|
||||
}
|
||||
.title{
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
position: absolute;
|
||||
top: -45px;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
/* margin-bottom:20px;
|
||||
display: inline-block;
|
||||
border-bottom: 3px solid green;
|
||||
padding: 0 5px 5px; */
|
||||
}
|
||||
.infoCantier{
|
||||
display:flex;
|
||||
.leftBlock{
|
||||
width:80px;
|
||||
margin-right:30px;
|
||||
}
|
||||
.rightBlock{
|
||||
display:flex;
|
||||
flex-direction:column;
|
||||
justify-content: space-between;
|
||||
.countWrap{
|
||||
display:flex;
|
||||
justify-content:space-between;
|
||||
width:280px;
|
||||
margin-top:10px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.numberFont{
|
||||
font-size:22px;font-weight:bold;
|
||||
}
|
||||
.numberUnit{
|
||||
font-size:12px;
|
||||
}
|
||||
#dashbordProcess .el-progress-circle{
|
||||
height: 60px!important;
|
||||
width: 60px!important;
|
||||
}
|
||||
.el-progress--circle .el-progress__text {
|
||||
display: block;
|
||||
margin-top: 1px;
|
||||
color:#fff;
|
||||
font-size: 20px!important;
|
||||
font-weight: bold!important;
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue