picture
This commit is contained in:
parent
2b148dbd91
commit
5e1990c1a0
|
|
@ -1,5 +1,6 @@
|
||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules
|
node_modules
|
||||||
|
/ignore/
|
||||||
/dist
|
/dist
|
||||||
.VSCodeCounter/
|
.VSCodeCounter/
|
||||||
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 185 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 236 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 409 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 261 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 148 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 256 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 563 B |
Binary file not shown.
|
After Width: | Height: | Size: 422 B |
Binary file not shown.
|
After Width: | Height: | Size: 575 B |
Binary file not shown.
|
After Width: | Height: | Size: 488 B |
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 114 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 145 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 146 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 291 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 200 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 290 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB |
35
src/App.vue
35
src/App.vue
|
|
@ -130,4 +130,37 @@ export default {
|
||||||
|
|
||||||
.el-calendar>.el-calendar__body {
|
.el-calendar>.el-calendar__body {
|
||||||
padding: 0 20px 20px;
|
padding: 0 20px 20px;
|
||||||
}</style>
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
// 排放系统
|
||||||
|
.el-popper{
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.el-popper[data-popper-placement^=bottom]>.el-popper__arrow {
|
||||||
|
top: -5px;
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
.el-popper.is-light{
|
||||||
|
// display: block !important;;
|
||||||
|
background: linear-gradient(to right, #116a7c, #92f2ff);
|
||||||
|
border-image-source: linear-gradient(to right, #92f2ff, #116a7c);
|
||||||
|
// background: linear-gradient(to right, #053949, #107b90);
|
||||||
|
}
|
||||||
|
.el-dropdown-menu{
|
||||||
|
padding: 0.7vh 0.7vh 0.2vh;
|
||||||
|
background: linear-gradient(to right, #053949, #107b90);
|
||||||
|
}
|
||||||
|
.el-dropdown-menu__item{
|
||||||
|
margin-bottom: 0.5vh;
|
||||||
|
background: linear-gradient(to right, #1b8fa4, #107b90 );
|
||||||
|
}
|
||||||
|
.el-dropdown-menu__item:not(.is-disabled):focus{
|
||||||
|
background: linear-gradient(to right, #053949, #107b90);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
.el-dropdown-menu__item{
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,76 @@
|
||||||
|
import config from "@/config"
|
||||||
|
import http from "@/utils/request"
|
||||||
|
/*排口/污染源接口*/
|
||||||
|
export default {
|
||||||
|
// 排口/污染源
|
||||||
|
drain: {
|
||||||
|
list: {
|
||||||
|
name: "列表",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.get(
|
||||||
|
`${config.API_URL}/enp/drain/`,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
create: {
|
||||||
|
name: "创建",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.post(
|
||||||
|
`${config.API_URL}/enp/drain/`,
|
||||||
|
data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
name: "详情",
|
||||||
|
req: async function(id){
|
||||||
|
return await http.get(
|
||||||
|
`${config.API_URL}/enp/drain/${id}/`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
update: {
|
||||||
|
name: "更新",
|
||||||
|
req: async function(id, data){
|
||||||
|
return await http.put(
|
||||||
|
`${config.API_URL}/enp/drain/${id}/`,
|
||||||
|
data);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
delete: {
|
||||||
|
name: "删除",
|
||||||
|
req: async function(id){
|
||||||
|
return await http.delete(
|
||||||
|
`${config.API_URL}/enp/drain/${id}/`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 排口/设备关系
|
||||||
|
drain_equip: {
|
||||||
|
list: {
|
||||||
|
name: "排口/设备关系",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.get(
|
||||||
|
`${config.API_URL}/enp/drain_equips/`,
|
||||||
|
data
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
create: {
|
||||||
|
name: "创建",
|
||||||
|
req: async function(data){
|
||||||
|
return await http.post(
|
||||||
|
`${config.API_URL}/enp/drain_equips/`,
|
||||||
|
data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
,
|
||||||
|
delete: {
|
||||||
|
name: "删除",
|
||||||
|
req: async function(id){
|
||||||
|
return await http.delete(
|
||||||
|
`${config.API_URL}/enp/drain_equips/${id}/`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
@ -2134,6 +2134,18 @@ const routes = [
|
||||||
},
|
},
|
||||||
"component": "bigScreen/index_photon"
|
"component": "bigScreen/index_photon"
|
||||||
},
|
},
|
||||||
|
//排放——数据大屏
|
||||||
|
{
|
||||||
|
"path": "/bigScreenEnp",
|
||||||
|
"name": "bigScreenEnp",
|
||||||
|
"meta": {
|
||||||
|
"title": "数据大屏Enp",
|
||||||
|
"icon": "el-icon-platform",
|
||||||
|
"perms": ["bigScreenP"],
|
||||||
|
"fullpage": true,
|
||||||
|
},
|
||||||
|
"component": "bigScreen/index_enp"
|
||||||
|
},
|
||||||
//车间看板
|
//车间看板
|
||||||
{
|
{
|
||||||
"path": "/bigS",
|
"path": "/bigS",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,951 @@
|
||||||
|
<template>
|
||||||
|
<div class="dashboard">
|
||||||
|
<header>
|
||||||
|
<div class="headerImg">水泥有限公司</div>
|
||||||
|
<div style="position: absolute;top:0.9vh;left: 8px;height: 6.5vh;">
|
||||||
|
<div style="display: flex;padding-top: 1.4vh;margin-left: 1vw;">
|
||||||
|
<div :class="bindClass(0)" @click="menuClick(0)">
|
||||||
|
<div class="menuItem">首页</div>
|
||||||
|
</div>
|
||||||
|
<div :class="bindClass(1)" @click="menuClick(1)">
|
||||||
|
<div class="menuItem">
|
||||||
|
<el-dropdown class="dropdown" trigger="click" @command="handleClick">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
有组织排放管理
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="paikou">排放口清单</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="CEMS">CEMS监测清单</el-dropdown-item>
|
||||||
|
<el-dropdown-item>CEMS监测预警</el-dropdown-item>
|
||||||
|
<el-dropdown-item>CEMS报表导出</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div :class="bindClass(2)" @click="menuClick(2)">
|
||||||
|
<div class="menuItem">
|
||||||
|
<el-dropdown class="dropdown" trigger="click" @command="handleClick2">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
无组织排放管理
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="wuran">污染源管控制</el-dropdown-item>
|
||||||
|
<el-dropdown-item>智能治理</el-dropdown-item>
|
||||||
|
<el-dropdown-item>设备清单</el-dropdown-item>
|
||||||
|
<el-dropdown-item>环境质量</el-dropdown-item>
|
||||||
|
<el-dropdown-item>台账管理</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="position: absolute;top:0.9vh;right: 8px;height: 65px;">
|
||||||
|
<div style="display: flex;padding-top: 1.4vh;padding-right: 1vw;justify-content: flex-end;">
|
||||||
|
<div :class="bindClass(3)" @click="menuClick(3)">
|
||||||
|
<div class="menuItem">
|
||||||
|
<el-dropdown class="dropdown" trigger="click" @command="handleClick3">
|
||||||
|
<span class="el-dropdown-link">
|
||||||
|
运输清洁
|
||||||
|
</span>
|
||||||
|
<template #dropdown>
|
||||||
|
<el-dropdown-menu>
|
||||||
|
<el-dropdown-item command="changwai">场外运输</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="inner">场内清洁</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
<div class="menuItem">运输清洁</div>
|
||||||
|
</div>
|
||||||
|
<div :class="bindClass(4)" @click="menuClick(4)">
|
||||||
|
<div class="menuItem">环保管理</div>
|
||||||
|
</div>
|
||||||
|
<div :class="bindClass(5)" @click="menuClick(5)">
|
||||||
|
<div class="menuItem">台账管理</div>
|
||||||
|
</div>
|
||||||
|
<div class="wraning_icon"></div>
|
||||||
|
<div class="user_icon"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<el-main style="padding:0;overflow: hidden;">
|
||||||
|
<div v-show="activeIndex==0" class="model">
|
||||||
|
<div id="loadingScreen">
|
||||||
|
<el-progress type="circle" :percentage="loadedPercent" :width=220 status="warning">
|
||||||
|
<template #default="{ percentage }">
|
||||||
|
<div style="font-size: 30px; color: white; font-weight: bold">{{ percentage }}%</div>
|
||||||
|
<div style="font-size: 18px; color: white; margin-top: 10px">工厂模型加载中</div>
|
||||||
|
</template>
|
||||||
|
</el-progress>
|
||||||
|
</div>
|
||||||
|
<canvas id="renderCanvas"></canvas>
|
||||||
|
</div>
|
||||||
|
<div v-show="activeIndex==0" class="left_other animate__animated animate__backInLeft">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="chart" id="chart1">
|
||||||
|
<img src="/img/ignore/left1.png" style="width: 100%;height: 100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<div class="chart" id="chart2">
|
||||||
|
<img src="/img/ignore/left2.png" style="width: 100%;height: 100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<div class="chart" id="chart3">
|
||||||
|
<img src="/img/ignore/left3.png" style="width: 100%;height: 100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="activeIndex==0" class="right_other animate__animated animate__backInRight">
|
||||||
|
<div class="panel">
|
||||||
|
<div class="chart" id="chart4">
|
||||||
|
<img src="/img/ignore/right1.png" style="width: 100%;height: 100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="panel">
|
||||||
|
<div class="chart" id="chart5">
|
||||||
|
<img src="/img/ignore/right2.png" style="width: 100%;height: 100%;">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-show="activeIndex==0" class="left_border"></div>
|
||||||
|
<div v-show="activeIndex==0" class="right_border"></div>
|
||||||
|
<div v-show="activeIndex==0" class="btns_enp"></div>
|
||||||
|
<div v-show="activeIndex==0" class="bottom_enp"></div>
|
||||||
|
<!-- -->
|
||||||
|
<div v-if="activeIndex!=0" class="container">
|
||||||
|
<div class="sysName">智能环保一体化管控平台</div>
|
||||||
|
<img v-show="activePage==1" src="img/ignore/emission.jpg" @click="pageClick(101)" class="pageClass">
|
||||||
|
<img v-show="activePage==2" src="img/ignore/CEMS.jpg" @click="pageClick(201)" class="pageClass">
|
||||||
|
<img v-show="activePage==3" src="img/ignore/wuran.jpg" @click="pageClick(301)" class="pageClass">
|
||||||
|
<img v-show="activePage==4" src="img/ignore/car.jpg" class="pageClass">
|
||||||
|
<img v-show="activePage==5" src="img/ignore/transportation.jpg" class="pageClass">
|
||||||
|
<img v-show="activePage==101" src="img/ignore/emission_detail.jpg" @click="pageClick(1)" class="pageClass">
|
||||||
|
<img v-show="activePage==201" src="img/ignore/CEMS_detail.jpg" @click="pageClick(2)" class="pageClass">
|
||||||
|
<img v-show="activePage==301" src="img/ignore/wuran_detail.jpg" @click="pageClick(3)" class="pageClass">
|
||||||
|
</div>
|
||||||
|
</el-main>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import * as echarts from "echarts";
|
||||||
|
import * as BABYLON from "babylonjs"
|
||||||
|
import * as BABYLON_GUI from "babylonjs-gui"
|
||||||
|
import * as BABYLON_GRID from "@/utils/gridMaterial"
|
||||||
|
import * as BABYLON_MATERIAL from "@/utils/babylonMaterial"
|
||||||
|
import 'babylonjs-loaders';
|
||||||
|
import 'animate.css';
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isCollapse:false,
|
||||||
|
nowDay: 1,
|
||||||
|
initialAlpha: -Math.PI / 0.89,
|
||||||
|
initialBeta: Math.PI / 3.3,
|
||||||
|
initialRadius: 18,
|
||||||
|
initialTarget: null,
|
||||||
|
scene: null,
|
||||||
|
myui: null,
|
||||||
|
is_mainviewpoint: false,
|
||||||
|
resizeTimeout: null,
|
||||||
|
engine: null,
|
||||||
|
loadedPercent: 0,
|
||||||
|
sectionNames: {
|
||||||
|
"干渣库_primitive0": "电石渣",
|
||||||
|
"原料磨及废气处理_primitive0": "原料磨",
|
||||||
|
"窑": "回转窑",
|
||||||
|
"煤粉制备_primitive1": "煤磨",
|
||||||
|
"水泥磨房_primitive0": "水泥磨",
|
||||||
|
"水泥储存及散装库_primitive2": "水泥包装",
|
||||||
|
// "停车场": "停车场"
|
||||||
|
},
|
||||||
|
showKgcet: true,
|
||||||
|
currentLightMesh: null,
|
||||||
|
activePage:0,
|
||||||
|
activeIndex: 0,
|
||||||
|
activeSection: 2,
|
||||||
|
activeSectionName: '回转窑',
|
||||||
|
updateTime: '2023-08-17 16:00:00',
|
||||||
|
basicOption: {
|
||||||
|
backgroundColor: '',
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
barwidth: 10,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#83bff6' },
|
||||||
|
{ offset: 0.5, color: '#188df0' },
|
||||||
|
{ offset: 1, color: '#188df0' }
|
||||||
|
])
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{ offset: 0, color: '#2378f7' },
|
||||||
|
{ offset: 0.7, color: '#2378f7' },
|
||||||
|
{ offset: 1, color: '#83bff6' }
|
||||||
|
])
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: []
|
||||||
|
}
|
||||||
|
],
|
||||||
|
grid: { // 让图表占满容器
|
||||||
|
top: "10%",
|
||||||
|
left: "12%",
|
||||||
|
right: "0px",
|
||||||
|
bottom: "15%"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chart1Option: {},
|
||||||
|
seriesData1: [0, 0, 0, 0, 0, 0],
|
||||||
|
ws: null,
|
||||||
|
mgroupValues: {
|
||||||
|
电石渣: { total: '0', elec: '0' },
|
||||||
|
原料磨: { total: '0', elec: '0' },
|
||||||
|
煤磨: { total: '0', elec: '0' },
|
||||||
|
回转窑: { total: '0', elec: '0' },
|
||||||
|
水泥磨: { total: '0', elec: '0' },
|
||||||
|
水泥包装: { total: '0', elec: '0' }
|
||||||
|
},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
let that= this;
|
||||||
|
this.addListener();
|
||||||
|
this.initDomStyle();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
setTimeout(function () {
|
||||||
|
that.initFactory();
|
||||||
|
}, 1000);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
// 性能优化
|
||||||
|
const canvas = document.getElementById('renderCanvas');
|
||||||
|
if (canvas) {
|
||||||
|
canvas.parentNode.removeChild(canvas);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initDomStyle() {
|
||||||
|
// 获取窗口的总高度
|
||||||
|
var windowHeight = window.innerHeight;
|
||||||
|
var windowWidth = window.innerWidth;
|
||||||
|
// 获取目标元素
|
||||||
|
var dashboard = document.getElementsByClassName('dashboard')[0];
|
||||||
|
var left_other = document.getElementsByClassName('left_other')[0];
|
||||||
|
var right_other = document.getElementsByClassName('right_other')[0];
|
||||||
|
var model = document.getElementsByClassName('model')[0];
|
||||||
|
if (windowWidth > 960) {
|
||||||
|
dashboard.style.overflow = 'hidden';
|
||||||
|
// 设置目标元素的高度
|
||||||
|
left_other.style.position = 'absolute';
|
||||||
|
left_other.style.width = '20%';
|
||||||
|
right_other.style.position = 'absolute';
|
||||||
|
right_other.style.width = '20%';
|
||||||
|
model.style.position = 'absolute';
|
||||||
|
model.style.height = (windowHeight - 4) + 'px';
|
||||||
|
model.style.top = 0;
|
||||||
|
|
||||||
|
var chartHeight1 = (100-18) *0.31 + 'vh';
|
||||||
|
var chartHeight2 = (100-18) *0.37 + 'vh';
|
||||||
|
var chartHeight3 = (100-17) *0.28 + 'vh';
|
||||||
|
var chartHeight4 = (100-17) *0.715 + 'vh';
|
||||||
|
var charts = document.getElementsByClassName('chart')
|
||||||
|
for (var i = 0; i < charts.length; i++) {
|
||||||
|
var chart = charts[i]
|
||||||
|
switch (i) {
|
||||||
|
case 0:
|
||||||
|
chart.style.height = chartHeight1;
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
chart.style.height = chartHeight1;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
chart.style.height = chartHeight2;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
chart.style.height = chartHeight3;
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
chart.style.height = chartHeight4;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
chart.style.height = chartHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
dashboard.style.overflow = 'auto';
|
||||||
|
var chartHeight = windowWidth * 0.6;
|
||||||
|
left_other.style.position = 'static';
|
||||||
|
left_other.style.width = '100%';
|
||||||
|
right_other.style.position = 'static';
|
||||||
|
right_other.style.width = '100%';
|
||||||
|
model.style.position = 'relative';
|
||||||
|
model.style.height = chartHeight;
|
||||||
|
var charts = document.getElementsByClassName('chart')
|
||||||
|
for (var i = 0; i < charts.length; i++) {
|
||||||
|
var chart = charts[i]
|
||||||
|
chart.style.height = chartHeight;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (this.engine != null) {
|
||||||
|
this.engine.resize();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 动态绑定Class
|
||||||
|
bindClass(index) {
|
||||||
|
let that = this;
|
||||||
|
let classInfo = {menuWrap: true, menuWrap1: false, menuWrap2: false,menuWrapActive: false};
|
||||||
|
if(index==that.activeIndex){
|
||||||
|
classInfo.menuWrapActive = true;
|
||||||
|
}
|
||||||
|
if (index == 1 ||index == 2) {
|
||||||
|
classInfo.menuWrap2 = true;
|
||||||
|
}else{
|
||||||
|
classInfo.menuWrap1 = true;
|
||||||
|
}
|
||||||
|
return classInfo
|
||||||
|
},
|
||||||
|
menuClick(index){
|
||||||
|
// this.activeIndex = index;
|
||||||
|
},
|
||||||
|
handleClick(command){
|
||||||
|
this.activeIndex = 1;
|
||||||
|
if(command == "paikou"){
|
||||||
|
this.activePage = 1;
|
||||||
|
}else if(command == "CEMS"){
|
||||||
|
this.activePage = 2;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleClick2(command){
|
||||||
|
this.activeIndex = 2;
|
||||||
|
if(command == "wuran"){
|
||||||
|
this.activePage = 3;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleClick3(command){
|
||||||
|
this.activeIndex = 3;
|
||||||
|
if(command == "changwai"){
|
||||||
|
this.activePage = 5;
|
||||||
|
}else if(command=='inner'){
|
||||||
|
this.activePage = 4;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pageClick(page){
|
||||||
|
this.activePage = page;
|
||||||
|
},
|
||||||
|
getMessage(msg) {
|
||||||
|
console.log(msg);
|
||||||
|
},
|
||||||
|
close() {
|
||||||
|
if (this.ws) {
|
||||||
|
this.ws.close();
|
||||||
|
this.ws = null;
|
||||||
|
console.log("socket已经关闭");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
compare(property) {
|
||||||
|
return function (a, b) {
|
||||||
|
return a[property] - b[property];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initCharts() {
|
||||||
|
let that = this;
|
||||||
|
function deepCopy(obj) {
|
||||||
|
return JSON.parse(JSON.stringify(obj));
|
||||||
|
}
|
||||||
|
// 初始化所有表格
|
||||||
|
that.basicOption.xAxis.data = that.xAxisData;
|
||||||
|
that.chart1Option = deepCopy(that.basicOption)
|
||||||
|
that.chart1Option.series = [
|
||||||
|
{
|
||||||
|
name: '电耗',
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: 15,
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: that.seriesData1
|
||||||
|
}]
|
||||||
|
that.setChart('chart1', that.chart1Option);
|
||||||
|
},
|
||||||
|
addListener() {
|
||||||
|
var that = this;
|
||||||
|
window.addEventListener('resize', function () {
|
||||||
|
// 如果已经有 resizeTimeout，清除它
|
||||||
|
if (this.resizeTimeout) {
|
||||||
|
clearTimeout(this.resizeTimeout);
|
||||||
|
}
|
||||||
|
// 设置一个新的 resizeTimeout，延迟调整样式
|
||||||
|
this.resizeTimeout = setTimeout(function () {
|
||||||
|
that.initDomStyle()
|
||||||
|
}, 300); // 延迟 300 毫秒，可以根据需要调整
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
resizeChart(name) {
|
||||||
|
// 根据name resize chart
|
||||||
|
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
||||||
|
if (myChart != undefined) {
|
||||||
|
// console.log(name + ' :resize')
|
||||||
|
myChart.resize();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
setChart(name, option = null) {
|
||||||
|
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||||||
|
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
||||||
|
if (myChart == undefined) {
|
||||||
|
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
|
||||||
|
}
|
||||||
|
if (option == null) {
|
||||||
|
option = Object.assign({}, this.basicOption)
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
try {
|
||||||
|
myChart.setOption(option);
|
||||||
|
} catch (error) { }
|
||||||
|
}, 500)
|
||||||
|
},
|
||||||
|
initFactory() {
|
||||||
|
var that = this;
|
||||||
|
const canvas = document.getElementById("renderCanvas"); // Get the canvas element
|
||||||
|
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
|
||||||
|
BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
|
||||||
|
}
|
||||||
|
BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {
|
||||||
|
document.getElementById("loadingScreen").style.display = "none";
|
||||||
|
}
|
||||||
|
engine.displayLoadingUI();
|
||||||
|
// Add your code here matching the playground format
|
||||||
|
const createScene = function () {
|
||||||
|
const scene = new BABYLON.Scene(engine);
|
||||||
|
scene.clearColor = BABYLON.Color3.Black(); //BABYLON.Color3(1, 0, 1);
|
||||||
|
const ground = BABYLON.MeshBuilder.CreateGround("ground", { width: 100, height: 100 });
|
||||||
|
const groundMaterial = new BABYLON_GRID.GridMaterial("groundMaterial", scene);
|
||||||
|
groundMaterial.majorUnitFrequency = 5;
|
||||||
|
groundMaterial.minorUnitVisibility = 0.5;
|
||||||
|
groundMaterial.gridRatio = 2;
|
||||||
|
// groundMaterial.opacity = 0.99;
|
||||||
|
ground.material = groundMaterial;
|
||||||
|
ground.position.y = -0.1
|
||||||
|
// 加载背景图片
|
||||||
|
const backgroundImage = new BABYLON.Layer('', 'img/backgroundEnp.jpg', scene, true);
|
||||||
|
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 1.2));
|
||||||
|
that.initialTarget = camera.getTarget();
|
||||||
|
camera.upperBetaLimit = Math.PI / 2.3; //无法移动到地面以下
|
||||||
|
camera.attachControl(canvas, true);
|
||||||
|
camera.maxZ = 1000; // 调整适当的值
|
||||||
|
// 相机限制
|
||||||
|
camera.lowerRadiusLimit = 6;
|
||||||
|
camera.upperRadiusLimit = 18;
|
||||||
|
// 灯光
|
||||||
|
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
|
||||||
|
light.intensity = 1.6;
|
||||||
|
// 全屏GUI
|
||||||
|
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
|
||||||
|
that.myui = advancedTexture;
|
||||||
|
// 创建一个高亮层
|
||||||
|
const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
|
||||||
|
// 主控制区
|
||||||
|
var control_main = new BABYLON_GUI.StackPanel();
|
||||||
|
control_main.isVertical = false
|
||||||
|
control_main.top = '-40%';
|
||||||
|
control_main.left = '-20%';
|
||||||
|
advancedTexture.addControl(control_main);
|
||||||
|
|
||||||
|
var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
|
||||||
|
button_main.width = "80px"
|
||||||
|
button_main.height = "30px";
|
||||||
|
button_main.color = "white";
|
||||||
|
button_main.cornerRadius = 20;
|
||||||
|
button_main.background = "green";
|
||||||
|
control_main.addControl(button_main)
|
||||||
|
button_main.onPointerClickObservable.add(() => {
|
||||||
|
if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
|
||||||
|
var cameraPosition = new BABYLON.Vector3(
|
||||||
|
0 + that.initialRadius * Math.sin(that.initialBeta) * Math.cos(that.initialAlpha),
|
||||||
|
0 + that.initialRadius * Math.cos(that.initialBeta),
|
||||||
|
0 + that.initialRadius * Math.sin(that.initialBeta) * Math.sin(that.initialAlpha)
|
||||||
|
);
|
||||||
|
var ease = new BABYLON.CubicEase();
|
||||||
|
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
|
||||||
|
BABYLON.Animation.CreateAndStartAnimation('at6', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
|
||||||
|
BABYLON.Animation.CreateAndStartAnimation('at61', camera, 'target', 45, 200, camera.target, that.initialTarget, 0, ease);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 高亮显示mesh名
|
||||||
|
const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
|
||||||
|
mesh_rect.width = "100px";
|
||||||
|
mesh_rect.height = "25px";
|
||||||
|
mesh_rect.background = 'orange';
|
||||||
|
mesh_rect.alpha = 0.6;
|
||||||
|
mesh_rect.isVisible = false;
|
||||||
|
advancedTexture.addControl(mesh_rect);
|
||||||
|
|
||||||
|
var mesh_name = new BABYLON_GUI.TextBlock('mesh_name');
|
||||||
|
mesh_name.text = "";
|
||||||
|
mesh_name.color = 'white';
|
||||||
|
mesh_name.fontSize = '14px';
|
||||||
|
mesh_rect.addControl(mesh_name);
|
||||||
|
var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/factory.glb";
|
||||||
|
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
|
||||||
|
// debugger;
|
||||||
|
// console.log(scene)
|
||||||
|
// console.table(scene.meshes)
|
||||||
|
// 判断字符串是否包含中文------ /[\u4E00-\u9FA5]+/g.test(str)
|
||||||
|
for (let key in that.sectionNames) {
|
||||||
|
const value = that.sectionNames[key];
|
||||||
|
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';
|
||||||
|
that.activeSectionName = dataViewName;
|
||||||
|
that.activeSection = 2;
|
||||||
|
let dataView = advancedTexture.getControlByName(dataViewName);
|
||||||
|
if (dataView) {
|
||||||
|
// // 在这里进行矩形的操作
|
||||||
|
dataView.isVisible = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// 创建一个数据展示层,创建一个StackPanel，用于容纳多个文本控件
|
||||||
|
const data_view = new BABYLON_GUI.StackPanel(value + '_data_view');
|
||||||
|
data_view.width = '200px'; // StackPanel的宽度
|
||||||
|
data_view.height = '140px';
|
||||||
|
data_view.thickness = 1;
|
||||||
|
data_view.background = 'rgba(0, 34, 51, 0.5)';//暗色
|
||||||
|
let mgroupName = new BABYLON_GUI.TextBlock(value + '_label');
|
||||||
|
mgroupName.height = "30px";
|
||||||
|
mgroupName.width = "120px";
|
||||||
|
mgroupName.color = "white";
|
||||||
|
mgroupName.text = value;
|
||||||
|
mgroupName.shadowColor = '#66b1ff';
|
||||||
|
mgroupName.shadowBlur = 5;
|
||||||
|
mgroupName.shadowOffsetX = -2;
|
||||||
|
mgroupName.shadowOffsetY = 2;
|
||||||
|
data_view.addControl(mgroupName);
|
||||||
|
const mgroup = new BABYLON_GUI.Rectangle('mgroup');
|
||||||
|
mgroup.height = "3px";
|
||||||
|
mgroup.width = "160px";
|
||||||
|
mgroup.thickness = 0;
|
||||||
|
mgroup.background = 'rgba(44, 237, 255, 0.45)';
|
||||||
|
data_view.addControl(mgroup);
|
||||||
|
var grid = new BABYLON_GUI.Grid("grid");
|
||||||
|
grid.width = '200px';
|
||||||
|
grid.height = '70px';
|
||||||
|
grid.paddingLeft = 1;
|
||||||
|
var wd = 2;
|
||||||
|
var hd = 2;
|
||||||
|
for (let i = 0; i < wd; i++) {
|
||||||
|
grid.addRowDefinition(1 / wd);
|
||||||
|
}
|
||||||
|
for (let j = 0; j < hd; j++) {
|
||||||
|
grid.addColumnDefinition(1 / hd);
|
||||||
|
}
|
||||||
|
for (let i = 0; i < wd; i++) {
|
||||||
|
for (let j = 0; j < hd; j++) {
|
||||||
|
var rc = new BABYLON_GUI.TextBlock("rc" + i + j);
|
||||||
|
rc.width = "100%";
|
||||||
|
// rc.height = "100%";
|
||||||
|
rc.thickness = 0;
|
||||||
|
if (j == 0 && i == 0) {
|
||||||
|
rc.width = "120px";
|
||||||
|
rc.text = "产品产量：";
|
||||||
|
rc.color = "white";
|
||||||
|
rc.fontSize = '16px';
|
||||||
|
} else if (j == 0 && i == 1) {
|
||||||
|
rc.width = "120px";
|
||||||
|
rc.color = "white";
|
||||||
|
rc.fontSize = '16px';
|
||||||
|
rc.text = "单位产品电耗：";
|
||||||
|
} else if (j == 1 && i == 0) {
|
||||||
|
// rc.text = that.mgroupValues[value].total;
|
||||||
|
rc.text = "123";
|
||||||
|
rc.width = "80px";
|
||||||
|
rc.fontSize = '18px';
|
||||||
|
rc.color = "rgb(44,237,255)";
|
||||||
|
} else if (j == 1 && i == 1) {
|
||||||
|
// rc.text = that.mgroupValues[value].total;
|
||||||
|
rc.text = "456";
|
||||||
|
rc.width = "80px";
|
||||||
|
rc.fontSize = '18px';
|
||||||
|
rc.color = "rgb(44,237,255)";
|
||||||
|
}
|
||||||
|
grid.addControl(rc, i, j);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
data_view.addControl(grid);
|
||||||
|
var mgroup_close = BABYLON_GUI.Button.CreateSimpleButton("mgroup_close" + value, '关闭');
|
||||||
|
mgroup_close.width = "70px"
|
||||||
|
mgroup_close.height = "25px";
|
||||||
|
mgroup_close.color = "white";
|
||||||
|
mgroup_close.cornerRadius = 15;
|
||||||
|
mgroup_close.fontSize = '12px';
|
||||||
|
mgroup_close.background = 'rgb(44,237,255,.5)';
|
||||||
|
mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5;
|
||||||
|
mgroup_close.onPointerClickObservable.add(() => {
|
||||||
|
console.log('data_view', data_view)
|
||||||
|
data_view.isVisible = false;
|
||||||
|
})
|
||||||
|
data_view.addControl(mgroup_close);
|
||||||
|
// 将StackPanel添加到GUI系统中
|
||||||
|
advancedTexture.addControl(data_view);
|
||||||
|
data_view.linkWithMesh(mesh);
|
||||||
|
data_view.linkOffsetY = -120;
|
||||||
|
if (value == '电石渣') {
|
||||||
|
data_view.linkOffsetY = -290;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
engine.hideLoadingUI()
|
||||||
|
},
|
||||||
|
function (evt) {
|
||||||
|
var loadedPercent = 0;
|
||||||
|
if (evt.lengthComputable) {
|
||||||
|
loadedPercent = parseInt(evt.loaded * 100 / evt.total);
|
||||||
|
} else {
|
||||||
|
var dlCount = evt.loaded / (1024 * 1024);
|
||||||
|
loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
|
||||||
|
}
|
||||||
|
that.loadedPercent = loadedPercent;
|
||||||
|
})
|
||||||
|
// 自动旋转checkbox
|
||||||
|
var checkbox = new BABYLON_GUI.Checkbox();
|
||||||
|
checkbox.width = "20px";
|
||||||
|
checkbox.height = "20px";
|
||||||
|
checkbox.isChecked = false;
|
||||||
|
checkbox.marginLeft = '16px'
|
||||||
|
checkbox.color = "green";
|
||||||
|
checkbox.onIsCheckedChangedObservable.add(function (value) {
|
||||||
|
if (value) {
|
||||||
|
camera.useAutoRotationBehavior = true;
|
||||||
|
} else {
|
||||||
|
camera.useAutoRotationBehavior = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
control_main.addControl(checkbox);
|
||||||
|
var header = new BABYLON_GUI.TextBlock();
|
||||||
|
header.text = "自动旋转";
|
||||||
|
header.width = "80px";
|
||||||
|
header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
||||||
|
header.color = "white";
|
||||||
|
control_main.addControl(header);
|
||||||
|
// 工段数据checkbox
|
||||||
|
var checkbox1 = new BABYLON_GUI.Checkbox();
|
||||||
|
checkbox1.width = "20px";
|
||||||
|
checkbox1.height = "20px";
|
||||||
|
checkbox1.isChecked = true;
|
||||||
|
checkbox1.marginLeft = '16px'
|
||||||
|
checkbox1.color = "green";
|
||||||
|
checkbox1.onIsCheckedChangedObservable.add(function (value) {
|
||||||
|
if (value) {
|
||||||
|
for (let key in that.sectionNames) {
|
||||||
|
let name = that.sectionNames[key] + '_data_view';
|
||||||
|
console.log(name)
|
||||||
|
let dataView = advancedTexture.getControlByName(name);
|
||||||
|
dataView.isVisible = true;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
for (let key in that.sectionNames) {
|
||||||
|
let name = that.sectionNames[key] + '_data_view';
|
||||||
|
console.log(name)
|
||||||
|
let dataView = advancedTexture.getControlByName(name);
|
||||||
|
dataView.isVisible = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
control_main.addControl(checkbox1);
|
||||||
|
var header1 = new BABYLON_GUI.TextBlock();
|
||||||
|
header1.text = "工段数据";
|
||||||
|
header1.width = "80px";
|
||||||
|
header1.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
||||||
|
header1.color = "white";
|
||||||
|
control_main.addControl(header1);
|
||||||
|
// 添加抓取事件
|
||||||
|
canvas.addEventListener('mousemove', (event) => {
|
||||||
|
// 使用 scene.pick 检测鼠标拾取
|
||||||
|
const pickResult = scene.pick(scene.pointerX, scene.pointerY);
|
||||||
|
if (that.currentLightMesh) {
|
||||||
|
mesh_rect.isVisible = false;
|
||||||
|
highlightLayer.removeAllMeshes();
|
||||||
|
}
|
||||||
|
if (pickResult.hit) {
|
||||||
|
const mesh = pickResult.pickedMesh;
|
||||||
|
highlightLayer.removeAllMeshes();
|
||||||
|
if (/.*[\u4e00-\u9fa5]+.*$/.test(mesh.name) && mesh.name !== '地面1' && mesh.name !== '绿地' && mesh.name !== '停车场') {
|
||||||
|
// 在选中的 mesh 上添加高亮效果
|
||||||
|
highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
|
||||||
|
that.currentLightMesh = mesh;
|
||||||
|
mesh_rect.linkWithMesh(mesh);
|
||||||
|
let name = mesh.name.split('_')[0];
|
||||||
|
mesh_name.text = name;
|
||||||
|
mesh_rect.isVisible = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// checkbox.isChecked = true; //默认开启自动旋转
|
||||||
|
return scene;
|
||||||
|
};
|
||||||
|
|
||||||
|
const scene = createScene();
|
||||||
|
// scene.debugLayer.show()
|
||||||
|
engine.runRenderLoop(function () {
|
||||||
|
scene.render();
|
||||||
|
});
|
||||||
|
this.engine = engine;
|
||||||
|
this.scene = scene;
|
||||||
|
window.addEventListener("resize", function () {
|
||||||
|
engine.resize();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
unmounted() {
|
||||||
|
this.close();
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.container{
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
height: 100vh;
|
||||||
|
top: 0vh;
|
||||||
|
z-index: 0;
|
||||||
|
padding-top: 8vh;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-image: url('/public/img/ignore/backgroundEnp.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.dashboard {
|
||||||
|
background-color: black;
|
||||||
|
font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
|
}
|
||||||
|
header {
|
||||||
|
z-index: 10;
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
align-items: center;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 1.3vh 0.4vw 0 0.4vw;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.headerImg{
|
||||||
|
width: 100%;
|
||||||
|
height: 6vh;
|
||||||
|
line-height: 6vh;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 1.8vw;
|
||||||
|
text-align: center;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-image: url('/public/img/ignore/header_enp.png');
|
||||||
|
}
|
||||||
|
.sysName{
|
||||||
|
color: #ffffff;
|
||||||
|
padding-left: 1vw;
|
||||||
|
font-size: 2vh;
|
||||||
|
}
|
||||||
|
.btns_enp{
|
||||||
|
bottom: 7vh;
|
||||||
|
left:28.7vw;
|
||||||
|
width: 42.6vw;
|
||||||
|
height: 4.3vh;
|
||||||
|
position: absolute;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-image: url('/public/img/ignore/btns_enp.png');
|
||||||
|
}
|
||||||
|
.bottom_enp{
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 5vh;
|
||||||
|
position: absolute;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
background-position: center;
|
||||||
|
background-image: url('/public/img/ignore/bottom_enp.png');
|
||||||
|
}
|
||||||
|
.menuWrap{
|
||||||
|
height: 4vh;
|
||||||
|
margin-right: 1vw;
|
||||||
|
}
|
||||||
|
.menuWrap1{
|
||||||
|
width: 4.4vw;
|
||||||
|
background-image: url('/public/img/ignore/enp_menu_img1.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.menuWrap1:hover,.menuWrapActive.menuWrap1{
|
||||||
|
background-image: url('/public/img/ignore/enp_menu_img_active1.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.menuWrap2{
|
||||||
|
width: 7vw;
|
||||||
|
background-image: url('/public/img/ignore/enp_menu_img2.png');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
.menuWrap2:hover,.menuWrapActive.menuWrap2{
|
||||||
|
color: #ffffff;
|
||||||
|
background-image: url('/public/img/ignore/enp_menu_img_active2.png');
|
||||||
|
}
|
||||||
|
.menuItem{
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 4vh;
|
||||||
|
font-size: 1.5vh;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.dropdown{
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 4vh;
|
||||||
|
font-size: 1.4vh;
|
||||||
|
}
|
||||||
|
.wraning_icon{
|
||||||
|
width: 2vh;
|
||||||
|
height: 2.3vh;
|
||||||
|
margin-top: 0.9vh;
|
||||||
|
background-size: cover;
|
||||||
|
background-image: url('/public/img/ignore/warning_enp.png');
|
||||||
|
}
|
||||||
|
.user_icon{
|
||||||
|
width: 2.3vh;
|
||||||
|
height: 2.3vh;
|
||||||
|
margin-top: 0.9vh;
|
||||||
|
margin-left: 2vh;
|
||||||
|
background-size: cover;
|
||||||
|
background-image: url('/public/img/ignore/user_enp.png');
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.model {
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
background-image: url('/public/img/ignore/backgroundEnp.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
#renderCanvas {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%
|
||||||
|
}
|
||||||
|
#loadingScreen {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
top: 260px;
|
||||||
|
color: white;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
.left_other,
|
||||||
|
.right_other {
|
||||||
|
position: absolute;
|
||||||
|
top: 8vh;
|
||||||
|
width: 20%;
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
.right_other {
|
||||||
|
right: 0
|
||||||
|
}
|
||||||
|
.panel {
|
||||||
|
margin-top: 1.5vh;
|
||||||
|
}
|
||||||
|
.chart {
|
||||||
|
width: 100%;
|
||||||
|
height: 220px;
|
||||||
|
}
|
||||||
|
.left_border{
|
||||||
|
width: 1vh;
|
||||||
|
height: 70vh;
|
||||||
|
position: absolute;
|
||||||
|
left: 21%;
|
||||||
|
top: 15vh;
|
||||||
|
background-size: cover;
|
||||||
|
background-image: url('/public/img/ignore/left_border.png');
|
||||||
|
}
|
||||||
|
.right_border{
|
||||||
|
width: 1vh;
|
||||||
|
height: 70vh;
|
||||||
|
position: absolute;
|
||||||
|
right: 21%;
|
||||||
|
top: 15vh;
|
||||||
|
background-size: cover;
|
||||||
|
background-image: url('/public/img/ignore/right_border.png');
|
||||||
|
}
|
||||||
|
.pageClass{
|
||||||
|
width: 100%;
|
||||||
|
height: 89vh;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue