Merge branch 'v2' of https://e.coding.net/ctcdevteam/ehs/ehs_web into v2
This commit is contained in:
commit
62631a2490
Binary file not shown.
|
After Width: | Height: | Size: 4.4 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 372 KiB After Width: | Height: | Size: 7.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 372 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
|
|
@ -1,124 +1,149 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="dashboard">
|
<div class="dashboard">
|
||||||
<header>
|
<header>
|
||||||
|
<div class="title_left"></div>
|
||||||
<h1 class="title">托克逊建材厂能管系统</h1>
|
<h1 class="title">托克逊建材厂能管系统</h1>
|
||||||
|
<h2 class="title_right">数据更新: {{ updateTime }}</h2>
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
|
|
||||||
<div class="left_main animate__animated animate__zoomIn">
|
<div class="left_main animate__animated animate__zoomIn">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel_title">全厂主要数据</div>
|
<div class="panel_title">本月全厂主要数据</div>
|
||||||
<el-row :gutter="16" style="height: 34px;">
|
<el-row :gutter="16" style="height: 34px;margin-top: 4px">
|
||||||
<el-col :span="12" class="panel_item">
|
<el-col :span="24" class="panel_item">
|
||||||
<span class="panel_label">用电量</span>
|
<span class="panel_label">
|
||||||
<span class="panel_value">1000</span>
|
<img src="/img/elec.png" style="height: 24px"/>
|
||||||
<span class="panel_unit">KWH</span>
|
动力电消耗</span>
|
||||||
</el-col>
|
<span class="panel_value">{{ factoryData.elec_consume }}</span>
|
||||||
<el-col :span="12" class="panel_item">
|
|
||||||
<span class="panel_label">用电量</span>
|
|
||||||
<span class="panel_value">1000</span>
|
|
||||||
<span class="panel_unit">KWH</span>
|
<span class="panel_unit">KWH</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="16" style="height: 34px;">
|
<el-row :gutter="16" style="height: 34px;margin-top: 4px">
|
||||||
<el-col :span="12" class="panel_item">
|
<el-col :span="24" class="panel_item">
|
||||||
<span class="panel_label">用电量</span>
|
<span class="panel_label">
|
||||||
<span class="panel_value">1000</span>
|
<img src="/img/coal.png" style="height: 24px"/>
|
||||||
<span class="panel_unit">KWH</span>
|
原煤消耗
|
||||||
</el-col>
|
</span>
|
||||||
<el-col :span="12" class="panel_item">
|
<span class="panel_value">{{ factoryData.coal_consume }}</span>
|
||||||
<span class="panel_label">用电量</span>
|
<span class="panel_unit">T</span>
|
||||||
<span class="panel_value">1000</span>
|
|
||||||
<span class="panel_unit">KWH</span>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="16" style="height: 34px;">
|
<el-row :gutter="16" style="height: 34px;margin-top: 4px">
|
||||||
<el-col :span="12" class="panel_item">
|
<el-col :span="24" class="panel_item">
|
||||||
<span class="panel_label">用电量</span>
|
<span class="panel_label">
|
||||||
<span class="panel_value">1000</span>
|
<img src="/img/water.png" style="height: 24px"/>
|
||||||
<span class="panel_unit">KWH</span>
|
工业水消耗</span>
|
||||||
|
<span class="panel_value">{{ factoryData.water_consume }}</span>
|
||||||
|
<span class="panel_unit">T</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12" class="panel_item">
|
<!-- <el-col :span="12" class="panel_item">
|
||||||
<span class="panel_label">用电量</span>
|
<span class="panel_label">用电量</span>
|
||||||
<span class="panel_value">1000</span>
|
<span class="panel_value">1000</span>
|
||||||
<span class="panel_unit">KWH</span>
|
<span class="panel_unit">KWH</span>
|
||||||
|
</el-col> -->
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="16" style="height: 34px;margin-top: 4px">
|
||||||
|
<el-col :span="24" class="panel_item">
|
||||||
|
<span class="panel_label">
|
||||||
|
<img src="/img/cair.png" style="height: 24px"/>
|
||||||
|
压缩空气消耗</span>
|
||||||
|
<span class="panel_value">{{ factoryData.cair_consume }}</span>
|
||||||
|
<span class="panel_unit">T</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="model">
|
<div class="model">
|
||||||
<div id="loadingScreen">
|
<div id="loadingScreen">
|
||||||
工厂模型加载中.....{{loadedPercent}}%
|
<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>
|
||||||
|
<!-- 工厂模型加载中.....{{ loadedPercent }}% -->
|
||||||
</div>
|
</div>
|
||||||
<canvas id="renderCanvas" ></canvas>
|
<canvas id="renderCanvas"></canvas>
|
||||||
</div>
|
</div>
|
||||||
<div class="right_main animate__animated animate__zoomIn">
|
<div class="right_main">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel_title">工段主要数据</div>
|
<div class="panel_title">今日工段主要数据-{{ activeSectionName }}</div>
|
||||||
<el-row :gutter="16" style="height: 34px;">
|
<el-row :gutter="16" style="height: 34px;margin-top: 4px">
|
||||||
<el-col :span="12" class="panel_item">
|
<el-col :span="24" class="panel_item">
|
||||||
<span class="panel_label">用电量</span>
|
<span class="panel_label">
|
||||||
<span class="panel_value">1000</span>
|
<img src="/img/elec.png" style="height: 24px"/>
|
||||||
<span class="panel_unit">KWH</span>
|
单位产品电耗</span>
|
||||||
</el-col>
|
<span class="panel_value">{{ sectionData.elec_consume_unit }}</span>
|
||||||
<el-col :span="12" class="panel_item">
|
<span class="panel_unit">KWH/T</span>
|
||||||
<span class="panel_label">用电量</span>
|
|
||||||
<span class="panel_value">1000</span>
|
|
||||||
<span class="panel_unit">KWH</span>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="16" style="height: 34px;">
|
<el-row :gutter="16" style="height: 34px;margin-top: 4px">
|
||||||
<el-col :span="12" class="panel_item">
|
<el-col :span="24" class="panel_item">
|
||||||
<span class="panel_label">用电量</span>
|
<span class="panel_label">
|
||||||
<span class="panel_value">1000</span>
|
<img src="/img/total_production.png" style="height: 24px"/>
|
||||||
<span class="panel_unit">KWH</span>
|
产品产量</span>
|
||||||
|
<span class="panel_value">{{ sectionData.total_production }}</span>
|
||||||
|
<span class="panel_unit">T</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12" class="panel_item">
|
<!-- <el-col :span="12" class="panel_item">
|
||||||
<span class="panel_label">用电量</span>
|
<span class="panel_label">用电量</span>
|
||||||
<span class="panel_value">1000</span>
|
<span class="panel_value">1000</span>
|
||||||
<span class="panel_unit">KWH</span>
|
<span class="panel_unit">KWH</span>
|
||||||
|
</el-col> -->
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="16" style="height: 34px;margin-top: 4px">
|
||||||
|
<el-col :span="24" class="panel_item">
|
||||||
|
<span class="panel_label">
|
||||||
|
<img src="/img/run_rate.png" style="height: 24px"/>
|
||||||
|
运转率</span>
|
||||||
|
<span class="panel_value">{{ sectionData.run_rate }}</span>
|
||||||
|
<span class="panel_unit">%</span>
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<el-row :gutter="16" style="height: 34px;">
|
<el-row :gutter="16" style="height: 34px;margin-top: 4px">
|
||||||
<el-col :span="12" class="panel_item">
|
<el-col :span="24" class="panel_item" v-if="showKgcet">
|
||||||
<span class="panel_label">用电量</span>
|
<span class="panel_label">
|
||||||
<span class="panel_value">1000</span>
|
<img src="/img/coal.png" style="height: 24px"/>
|
||||||
<span class="panel_unit">KWH</span>
|
单位产品标煤耗
|
||||||
</el-col>
|
</span>
|
||||||
<el-col :span="12" class="panel_item">
|
<span class="panel_value">{{ sectionData.coal_consume_unit }}</span>
|
||||||
<span class="panel_label">用电量</span>
|
<span class="panel_unit">KGCE/T</span>
|
||||||
<span class="panel_value">1000</span>
|
|
||||||
<span class="panel_unit">KWH</span>
|
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="left_other">
|
<div class="dropdown">
|
||||||
|
<div class="dropdown-item" v-for="(val, index) in sectionNames" :key="val" @click="handleSectionClick(val, index)"
|
||||||
|
:class="{ active: activeSection === index }"
|
||||||
|
>{{ val }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="left_other animate__animated animate__backInLeft">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel_title">图表1</div>
|
<div class="panel_title">动力电消耗趋势图</div>
|
||||||
<div class="chart" id="chart1"></div>
|
<div class="chart" id="chart1"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel_title">图表2</div>
|
<div class="panel_title">原煤消耗趋势图</div>
|
||||||
<div class="chart" id="chart2"></div>
|
<div class="chart" id="chart2"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel_title">图表3</div>
|
<div class="panel_title">工业水/压缩空气消耗趋势图</div>
|
||||||
<div class="chart" id="chart3"></div>
|
<div class="chart" id="chart3"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="right_other">
|
<div class="right_other">
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel_title">图表4</div>
|
<div class="panel_title">单位产品电耗趋势图</div>
|
||||||
<div class="chart" id="chart4"></div>
|
<div class="chart" id="chart4"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel_title">图表5</div>
|
<div class="panel_title">产品产量趋势图</div>
|
||||||
<div class="chart" id="chart5"></div>
|
<div class="chart" id="chart5"></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="panel">
|
<div class="panel">
|
||||||
<div class="panel_title">图表6</div>
|
<div class="panel_title">运转率趋势图</div>
|
||||||
<div class="chart" id="chart6"></div>
|
<div class="chart" id="chart6"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -133,38 +158,147 @@ import 'animate.css';
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
factoryData: {'coal_consume': 100, 'elec_consume': 100, 'water_consume': 100, 'cair_consume': 100},
|
||||||
|
sectionData: {'elec_consume_unit': 0, 'total_production': 0, 'run_rate': 100, 'coal_consume_unit': 0},
|
||||||
initialAlpha: -Math.PI / 0.89,
|
initialAlpha: -Math.PI / 0.89,
|
||||||
initialBeta: Math.PI / 3.2,
|
initialBeta: Math.PI / 3.3,
|
||||||
initialRadius: 22,
|
initialRadius: 18,
|
||||||
initialTarget: null,
|
initialTarget: null,
|
||||||
scene: null,
|
scene: null,
|
||||||
is_mainviewpoint: false,
|
is_mainviewpoint: false,
|
||||||
resizeTimeout: null,
|
resizeTimeout: null,
|
||||||
engine: null,
|
engine: null,
|
||||||
loadedPercent: 0,
|
loadedPercent: 0,
|
||||||
}
|
sectionNames: {
|
||||||
|
"xxxx": "电石渣",
|
||||||
|
"xxxx2": "原料磨",
|
||||||
|
"xxxx3": "回转窑",
|
||||||
|
"xxxx4": "煤磨",
|
||||||
|
"柱体.023": "水泥磨",
|
||||||
|
"xxxx6cc": "水泥包装",
|
||||||
|
},
|
||||||
|
showKgcet: true,
|
||||||
|
currentLightMesh: null,
|
||||||
|
activeSection: 2,
|
||||||
|
activeSectionName: '回转窑',
|
||||||
|
updateTime: '2023-08-17 16:00:00',
|
||||||
|
basicOption: {
|
||||||
|
backgroundColor: '',
|
||||||
|
tooltip: {},
|
||||||
|
// legend: {
|
||||||
|
// data: ['销量'],
|
||||||
|
// top: 0,
|
||||||
|
// },
|
||||||
|
xAxis: {
|
||||||
|
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||||
|
},
|
||||||
|
yAxis: {},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '销量',
|
||||||
|
type: 'bar',
|
||||||
|
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: [5, 20, 36, 10, 10, 20]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
grid: { // 让图表占满容器
|
||||||
|
top: "5%",
|
||||||
|
left: "12%",
|
||||||
|
right: "0px",
|
||||||
|
bottom: "15%"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
chart1Option: {},
|
||||||
|
chart2Option: {},
|
||||||
|
chart3Option: {},
|
||||||
|
chart4Option: {},
|
||||||
|
chart5Option: {},
|
||||||
|
chart6Option: {}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
var that = this;
|
var that = this;
|
||||||
this.initDomStyle();
|
this.initDomStyle();
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.initChart('chart1');
|
this.initCharts();
|
||||||
this.initChart('chart2');
|
|
||||||
this.initChart('chart3');
|
|
||||||
this.initChart('chart4');
|
|
||||||
this.initChart('chart5');
|
|
||||||
this.initChart('chart6');
|
|
||||||
this.addListener();
|
this.addListener();
|
||||||
setTimeout(function () {
|
setTimeout(function () {
|
||||||
that.initFactory();
|
that.initFactory();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
|
beforeUnmount(){
|
||||||
|
// 性能优化
|
||||||
|
const canvas = document.getElementById('renderCanvas');
|
||||||
|
if (canvas) {
|
||||||
|
canvas.parentNode.removeChild(canvas);
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
getFactoryData(){
|
||||||
|
|
||||||
|
},
|
||||||
|
getSectionData(){
|
||||||
|
|
||||||
|
},
|
||||||
|
initCharts(){
|
||||||
|
// 初始化所有表格
|
||||||
|
this.setChart('chart1');
|
||||||
|
this.chart2Option = Object.assign({}, this.basicOption)
|
||||||
|
this.chart2Option.series[0].type = 'line'
|
||||||
|
this.setChart('chart2', this.chart2Option);
|
||||||
|
this.chart3Option = Object.assign({}, this.basicOption)
|
||||||
|
this.chart3Option.series = [
|
||||||
|
{
|
||||||
|
name: 'Forest',
|
||||||
|
type: 'bar',
|
||||||
|
label: {
|
||||||
|
show: true,
|
||||||
|
position: 'top'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [320, 332, 301, 334, 390, 380]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: 'Steppe',
|
||||||
|
type: 'bar',
|
||||||
|
emphasis: {
|
||||||
|
focus: 'series'
|
||||||
|
},
|
||||||
|
data: [220, 182, 191, 234, 290, 280]
|
||||||
|
}]
|
||||||
|
this.setChart('chart3', this.chart3Option);
|
||||||
|
this.chart4Option = Object.assign({}, this.basicOption)
|
||||||
|
this.chart4Option.series[0].smooth = true
|
||||||
|
this.setChart('chart4', this.chart4Option);
|
||||||
|
this.setChart('chart5');
|
||||||
|
this.setChart('chart6');
|
||||||
|
},
|
||||||
addListener() {
|
addListener() {
|
||||||
var that = this;
|
var that = this;
|
||||||
window.addEventListener('resize', function () {
|
window.addEventListener('resize', function () {
|
||||||
// 如果已经有 resizeTimeout，清除它
|
// 如果已经有 resizeTimeout，清除它
|
||||||
if (this.resizeTimeout) {
|
if (this.resizeTimeout) {
|
||||||
|
|
@ -181,27 +315,28 @@ export default {
|
||||||
var windowHeight = window.innerHeight;
|
var windowHeight = window.innerHeight;
|
||||||
var windowWidth = window.innerWidth;
|
var windowWidth = window.innerWidth;
|
||||||
// 获取目标元素
|
// 获取目标元素
|
||||||
var dashboard = document.getElementsByClassName('dashboard')[0];
|
var dashboard = document.getElementsByClassName('dashboard')[0];
|
||||||
var left_main = document.getElementsByClassName('left_main')[0];
|
var left_main = document.getElementsByClassName('left_main')[0];
|
||||||
var left_other = document.getElementsByClassName('left_other')[0];
|
var left_other = document.getElementsByClassName('left_other')[0];
|
||||||
var right_main = document.getElementsByClassName('right_main')[0];
|
var right_main = document.getElementsByClassName('right_main')[0];
|
||||||
var right_other = document.getElementsByClassName('right_other')[0];
|
var right_other = document.getElementsByClassName('right_other')[0];
|
||||||
var model = document.getElementsByClassName('model')[0];
|
var model = document.getElementsByClassName('model')[0];
|
||||||
|
// var renderCanvas = document.getElementById('renderCanvas');
|
||||||
if (windowWidth > 960) {
|
if (windowWidth > 960) {
|
||||||
dashboard.style.overflow = 'hidden';
|
dashboard.style.overflow = 'hidden';
|
||||||
// 设置目标元素的高度
|
// 设置目标元素的高度
|
||||||
left_main.style.position = 'absolute';
|
left_main.style.position = 'absolute';
|
||||||
left_main.style.width = '20%';
|
left_main.style.width = '22%';
|
||||||
right_main.style.position = 'absolute';
|
right_main.style.position = 'absolute';
|
||||||
right_main.style.width = '20%';
|
right_main.style.width = '22%';
|
||||||
left_other.style.position = 'absolute';
|
left_other.style.position = 'absolute';
|
||||||
left_other.style.width = '20%';
|
left_other.style.width = '22%';
|
||||||
right_other.style.position = 'absolute';
|
right_other.style.position = 'absolute';
|
||||||
right_other.style.width = '20%';
|
right_other.style.width = '22%';
|
||||||
model.style.height = (windowHeight - 40) + 'px';
|
model.style.height = (windowHeight - 50) + 'px';
|
||||||
var chartHeight = (windowHeight-350)/3 + 'px';
|
var chartHeight = (windowHeight - 400) / 3 + 'px';
|
||||||
var charts = document.getElementsByClassName('chart')
|
var charts = document.getElementsByClassName('chart')
|
||||||
for(var i=0;i<charts.length;i++){
|
for (var i = 0; i < charts.length; i++) {
|
||||||
var chart = charts[i]
|
var chart = charts[i]
|
||||||
chart.style.height = chartHeight;
|
chart.style.height = chartHeight;
|
||||||
}
|
}
|
||||||
|
|
@ -209,7 +344,7 @@ export default {
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
dashboard.style.overflow = 'auto';
|
dashboard.style.overflow = 'auto';
|
||||||
var chartHeight = windowWidth*0.6;
|
var chartHeight = windowWidth * 0.6;
|
||||||
left_main.style.position = 'static';
|
left_main.style.position = 'static';
|
||||||
left_main.style.width = '100%';
|
left_main.style.width = '100%';
|
||||||
right_main.style.position = 'static';
|
right_main.style.position = 'static';
|
||||||
|
|
@ -220,13 +355,13 @@ export default {
|
||||||
right_other.style.width = '100%';
|
right_other.style.width = '100%';
|
||||||
model.style.height = chartHeight;
|
model.style.height = chartHeight;
|
||||||
var charts = document.getElementsByClassName('chart')
|
var charts = document.getElementsByClassName('chart')
|
||||||
for(var i=0;i<charts.length;i++){
|
for (var i = 0; i < charts.length; i++) {
|
||||||
var chart = charts[i]
|
var chart = charts[i]
|
||||||
chart.style.height = chartHeight;
|
chart.style.height = chartHeight;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
if(this.engine != null){
|
if (this.engine != null) {
|
||||||
this.engine.resize();
|
this.engine.resize();
|
||||||
}
|
}
|
||||||
this.resizeChart('chart1');
|
this.resizeChart('chart1');
|
||||||
|
|
@ -236,46 +371,22 @@ export default {
|
||||||
this.resizeChart('chart5');
|
this.resizeChart('chart5');
|
||||||
this.resizeChart('chart6');
|
this.resizeChart('chart6');
|
||||||
},
|
},
|
||||||
resizeChart(name){
|
resizeChart(name) {
|
||||||
// 根据name resize chart
|
// 根据name resize chart
|
||||||
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
||||||
if(myChart!=undefined){
|
if (myChart != undefined) {
|
||||||
console.log(name+' :resize')
|
console.log(name + ' :resize')
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
initChart(name, option=null) {
|
setChart(name, option = null) {
|
||||||
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
// 根据name 渲染数据, option需填写，否则option为模拟数据
|
||||||
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
var myChart = echarts.getInstanceByDom(document.getElementById(name));
|
||||||
if(myChart==undefined){
|
if (myChart == undefined) {
|
||||||
myChart = echarts.init(document.getElementById(name), 'dark');
|
myChart = echarts.init(document.getElementById(name), 'dark', { renderer: 'svg' });
|
||||||
}
|
}
|
||||||
if (option==null){
|
if (option == null) {
|
||||||
option = {
|
option = Object.assign({}, this.basicOption)
|
||||||
backgroundColor: '',
|
|
||||||
tooltip: {},
|
|
||||||
legend: {
|
|
||||||
data: ['销量'],
|
|
||||||
top: 0
|
|
||||||
},
|
|
||||||
xAxis: {
|
|
||||||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
|
||||||
},
|
|
||||||
yAxis: {},
|
|
||||||
series: [
|
|
||||||
{
|
|
||||||
name: '销量',
|
|
||||||
type: 'bar',
|
|
||||||
data: [5, 20, 36, 10, 10, 20]
|
|
||||||
}
|
|
||||||
],
|
|
||||||
grid: { // 让图表占满容器
|
|
||||||
top: "5%",
|
|
||||||
left: "12%",
|
|
||||||
right: "0px",
|
|
||||||
bottom: "15%"
|
|
||||||
}
|
|
||||||
};
|
|
||||||
}
|
}
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
|
|
||||||
|
|
@ -286,14 +397,25 @@ export default {
|
||||||
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
|
const engine = new BABYLON.Engine(canvas, true); // Generate the BABYLON 3D engine
|
||||||
BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
|
BABYLON.DefaultLoadingScreen.prototype.displayLoadingUI = function () {
|
||||||
}
|
}
|
||||||
BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function(){
|
BABYLON.DefaultLoadingScreen.prototype.hideLoadingUI = function () {
|
||||||
document.getElementById("loadingScreen").style.display = "none";
|
document.getElementById("loadingScreen").style.display = "none";
|
||||||
}
|
}
|
||||||
|
|
||||||
engine.displayLoadingUI();
|
engine.displayLoadingUI();
|
||||||
// Add your code here matching the playground format
|
// Add your code here matching the playground format
|
||||||
const createScene = function () {
|
const createScene = function () {
|
||||||
const scene = new BABYLON.Scene(engine);
|
const scene = new BABYLON.Scene(engine);
|
||||||
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 0));
|
scene.clearColor = BABYLON.Color3(1, 0, 1);
|
||||||
|
// const groundMat = new BABYLON.StandardMaterial("groundMat");
|
||||||
|
// groundMat.diffuseTexture = new BABYLON.Texture("img/ground_big.jpg");
|
||||||
|
// groundMat.diffuseTexture.hasAlpha = false;
|
||||||
|
// const ground = BABYLON.MeshBuilder.CreateGround("ground", {width:40, height:40});
|
||||||
|
// ground.material = groundMat;
|
||||||
|
// ground.position.y = - 0.1
|
||||||
|
|
||||||
|
// 加载背景图片
|
||||||
|
// const backgroundImage = new BABYLON.Layer('', 'img/bj.png', scene, true);
|
||||||
|
const camera = new BABYLON.ArcRotateCamera("camera", that.initialAlpha, that.initialBeta, that.initialRadius, new BABYLON.Vector3(0, 0, 1.2));
|
||||||
that.initialTarget = camera.getTarget();
|
that.initialTarget = camera.getTarget();
|
||||||
camera.upperBetaLimit = Math.PI / 2.2; //无法移动到地面以下
|
camera.upperBetaLimit = Math.PI / 2.2; //无法移动到地面以下
|
||||||
camera.attachControl(canvas, true);
|
camera.attachControl(canvas, true);
|
||||||
|
|
@ -304,17 +426,19 @@ export default {
|
||||||
|
|
||||||
// 灯光
|
// 灯光
|
||||||
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
|
const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(1, 1, 0));
|
||||||
light.intensity = 1.8;
|
light.intensity = 1.6;
|
||||||
|
|
||||||
|
|
||||||
// 全屏GUI
|
// 全屏GUI
|
||||||
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
|
const advancedTexture = BABYLON_GUI.AdvancedDynamicTexture.CreateFullscreenUI("myUI");
|
||||||
// 创建一个高亮层
|
// 创建一个高亮层
|
||||||
const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
|
const highlightLayer = new BABYLON.HighlightLayer('highlightLayer', scene);
|
||||||
var name_panel = new BABYLON_GUI.StackPanel();
|
// 主控制区
|
||||||
name_panel.isVertical = false
|
var control_main = new BABYLON_GUI.StackPanel();
|
||||||
name_panel.top = '-40%';
|
control_main.isVertical = false
|
||||||
name_panel.left = '-20%';
|
control_main.top = '-40%';
|
||||||
advancedTexture.addControl(name_panel);
|
control_main.left = '-20%';
|
||||||
|
advancedTexture.addControl(control_main);
|
||||||
|
|
||||||
var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
|
var button_main = BABYLON_GUI.Button.CreateSimpleButton("button_main", "主视角");
|
||||||
button_main.width = "80px"
|
button_main.width = "80px"
|
||||||
|
|
@ -322,7 +446,7 @@ export default {
|
||||||
button_main.color = "white";
|
button_main.color = "white";
|
||||||
button_main.cornerRadius = 20;
|
button_main.cornerRadius = 20;
|
||||||
button_main.background = "green";
|
button_main.background = "green";
|
||||||
name_panel.addControl(button_main)
|
control_main.addControl(button_main)
|
||||||
button_main.onPointerClickObservable.add(() => {
|
button_main.onPointerClickObservable.add(() => {
|
||||||
|
|
||||||
if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
|
if (camera.alpha != that.initialAlpha || camera.beta != that.initialBeta || camera.radius != that.initialRadius) {
|
||||||
|
|
@ -338,124 +462,152 @@ export default {
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/factory.glb";
|
// 高亮显示mesh名区
|
||||||
|
const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
|
||||||
|
mesh_rect.width = "80px";
|
||||||
|
mesh_rect.height = "20px";
|
||||||
|
mesh_rect.backgroundColor = 'black'
|
||||||
|
mesh_rect.alpha = 0.8
|
||||||
|
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 = '16px'
|
||||||
|
mesh_rect.addControl(mesh_name);
|
||||||
|
|
||||||
|
var remoteGlbUrl = process.env.VUE_APP_BASEURL + "/media/model/factory.glb";
|
||||||
|
|
||||||
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
|
BABYLON.SceneLoader.Append(remoteGlbUrl, "", scene, function (scene) {
|
||||||
scene.meshes.forEach(function (mesh) {
|
for (let key in that.sectionNames) {
|
||||||
// if (mesh.name.indexOf('.') != -1) {
|
var value = that.sectionNames[key];
|
||||||
// mesh.actionManager = new BABYLON.ActionManager(scene);
|
|
||||||
// mesh.actionManager.registerAction(
|
var mesh = scene.getMeshByName(key);
|
||||||
// new BABYLON.ExecuteCodeAction(
|
if(mesh){
|
||||||
// BABYLON.ActionManager.OnPointerOverTrigger,
|
var rect1 = new BABYLON_GUI.Rectangle(value + '_rect');
|
||||||
// function (evt) {
|
rect1.width = "60px";
|
||||||
// // 在选中的 mesh 上添加高亮效果
|
rect1.height = "30px";
|
||||||
// highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
|
|
||||||
// }
|
|
||||||
// ),
|
|
||||||
// new BABYLON.ExecuteCodeAction(
|
|
||||||
// BABYLON.ActionManager.OnPointerOutTrigger,
|
|
||||||
// function (evt) {
|
|
||||||
// // 移除效果
|
|
||||||
// highlightLayer.removeMesh()
|
|
||||||
// }
|
|
||||||
// )
|
|
||||||
// );
|
|
||||||
// }
|
|
||||||
if (mesh.name == '柱体.023') {
|
|
||||||
const rect1 = new BABYLON_GUI.Rectangle();
|
|
||||||
rect1.width = 0.06;
|
|
||||||
rect1.height = "40px";
|
|
||||||
rect1.cornerRadius = 4;
|
rect1.cornerRadius = 4;
|
||||||
rect1.color = "Orange";
|
rect1.color = "Orange";
|
||||||
rect1.thickness = 2;
|
rect1.thickness = 2;
|
||||||
rect1.background = "green";
|
rect1.background = "green";
|
||||||
advancedTexture.addControl(rect1);
|
advancedTexture.addControl(rect1);
|
||||||
|
|
||||||
var label = new BABYLON_GUI.TextBlock();
|
var label = new BABYLON_GUI.TextBlock(value + '_label');
|
||||||
label.text = "水泥磨";
|
label.text = value;
|
||||||
label.color = 'white'
|
label.color = 'white'
|
||||||
|
label.fontSize = '14px'
|
||||||
rect1.addControl(label);
|
rect1.addControl(label);
|
||||||
|
|
||||||
rect1.linkWithMesh(mesh);
|
rect1.linkWithMesh(mesh);
|
||||||
rect1.linkOffsetY = -50;
|
rect1.linkOffsetY = -30;
|
||||||
|
|
||||||
// 创建一个数据展示层
|
|
||||||
// 创建一个StackPanel，用于容纳多个文本控件
|
|
||||||
const data_view = new BABYLON_GUI.StackPanel('data_view');
|
|
||||||
data_view.width = '100px'; // StackPanel的宽度
|
|
||||||
data_view.bottom = rect1.bottom + 50 + 'px';
|
|
||||||
data_view.background = 'darkblue'
|
|
||||||
data_view.cornerRadius = 4;
|
|
||||||
// 创建多个文本控件，每个控件表示一行文本
|
|
||||||
const textLines = ["电耗: 123", "产量: 123"];
|
|
||||||
|
|
||||||
for (let i = 0; i < textLines.length; i++) {
|
|
||||||
let textLine = textLines[i];
|
|
||||||
const textA = new BABYLON_GUI.TextBlock('textA');
|
|
||||||
textA.height = "20px"
|
|
||||||
textA.color = "white"
|
|
||||||
textA.text = textLine;
|
|
||||||
// text.fontSize = textLines[i].fontSize;
|
|
||||||
|
|
||||||
data_view.addControl(textA);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 将StackPanel添加到GUI系统中
|
|
||||||
advancedTexture.addControl(data_view);
|
|
||||||
data_view.linkWithMesh(mesh);
|
|
||||||
data_view.linkOffsetY = -100;
|
|
||||||
rect1.onPointerDownObservable.add(() => {
|
rect1.onPointerDownObservable.add(() => {
|
||||||
// 计算新的相机位置
|
var mesh = rect1.linkedMesh;
|
||||||
var cameraPosition = new BABYLON.Vector3(
|
if(camera.target != mesh.position){
|
||||||
mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
|
console.log('fly to')
|
||||||
mesh.position.y + 9 * Math.cos(camera.beta),
|
// 计算新的相机位置
|
||||||
mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
|
var cameraPosition = new BABYLON.Vector3(
|
||||||
);
|
mesh.position.x + 9 * Math.sin(camera.beta) * Math.cos(Math.PI),
|
||||||
var ease = new BABYLON.CubicEase();
|
mesh.position.y + 9 * Math.cos(camera.beta),
|
||||||
ease.setEasingMode(BABYLON.EasingFunction.EASINGMODE_EASEINOUT);
|
mesh.position.z + 9 * Math.sin(camera.beta) * Math.sin(Math.PI)
|
||||||
BABYLON.Animation.CreateAndStartAnimation('at5', camera, 'position', 45, 200, camera.position, cameraPosition, 0, ease);
|
);
|
||||||
BABYLON.Animation.CreateAndStartAnimation('at51', camera, 'target', 45, 200, camera.target, mesh.position, 0, ease);
|
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, mesh.position, 0, ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
|
||||||
// mesh = scene.getMeshByName("柱体.023") // 熟料库顶部
|
// 创建一个数据展示层
|
||||||
|
// 创建一个StackPanel，用于容纳多个文本控件
|
||||||
|
// const data_view = new BABYLON_GUI.StackPanel(value + '_data_view');
|
||||||
|
// data_view.width = '100px'; // StackPanel的宽度
|
||||||
|
// data_view.bottom = rect1.bottom + 50 + 'px';
|
||||||
|
// data_view.background = 'darkblue'
|
||||||
|
// data_view.cornerRadius = 4;
|
||||||
|
// // 创建多个文本控件，每个控件表示一行文本
|
||||||
|
// const textLines = ["电耗: 123", "产量: 123"];
|
||||||
|
|
||||||
|
// for (let i = 0; i < textLines.length; i++) {
|
||||||
|
// let textLine = textLines[i];
|
||||||
|
// const textA = new BABYLON_GUI.TextBlock();
|
||||||
|
// textA.height = "20px"
|
||||||
|
// textA.color = "white"
|
||||||
|
// textA.text = textLine;
|
||||||
|
// // text.fontSize = textLines[i].fontSize;
|
||||||
|
|
||||||
|
// data_view.addControl(textA);
|
||||||
|
// }
|
||||||
|
|
||||||
|
// // 将StackPanel添加到GUI系统中
|
||||||
|
// advancedTexture.addControl(data_view);
|
||||||
|
// data_view.linkWithMesh(mesh);
|
||||||
|
// data_view.linkOffsetY = -80;
|
||||||
|
}
|
||||||
|
|
||||||
engine.hideLoadingUI()
|
engine.hideLoadingUI()
|
||||||
}, function(evt){
|
}, function (evt) {
|
||||||
|
|
||||||
var loadedPercent = 0;
|
var loadedPercent = 0;
|
||||||
if (evt.lengthComputable) {
|
if (evt.lengthComputable) {
|
||||||
loadedPercent = (evt.loaded * 100 / evt.total).toFixed();
|
loadedPercent = parseInt(evt.loaded * 100 / evt.total);
|
||||||
} else {
|
} else {
|
||||||
var dlCount = evt.loaded / (1024 * 1024);
|
var dlCount = evt.loaded / (1024 * 1024);
|
||||||
loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
|
loadedPercent = Math.floor(dlCount * 100.0) / 100.0;
|
||||||
}
|
}
|
||||||
that.loadedPercent = loadedPercent;
|
that.loadedPercent = loadedPercent;
|
||||||
})
|
})
|
||||||
|
|
||||||
var checkbox = new BABYLON_GUI.Checkbox();
|
// 自动旋转checkbox
|
||||||
checkbox.width = "20px";
|
var checkbox = new BABYLON_GUI.Checkbox();
|
||||||
checkbox.height = "20px";
|
checkbox.width = "20px";
|
||||||
checkbox.isChecked = false;
|
checkbox.height = "20px";
|
||||||
checkbox.marginLeft = '16px'
|
checkbox.isChecked = false;
|
||||||
checkbox.color = "green";
|
checkbox.marginLeft = '16px'
|
||||||
checkbox.onIsCheckedChangedObservable.add(function(value) {
|
checkbox.color = "green";
|
||||||
if(value){
|
checkbox.onIsCheckedChangedObservable.add(function (value) {
|
||||||
camera.useAutoRotationBehavior = true;
|
if (value) {
|
||||||
}else{
|
camera.useAutoRotationBehavior = true;
|
||||||
camera.useAutoRotationBehavior = false;
|
} else {
|
||||||
|
camera.useAutoRotationBehavior = false;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
name_panel.addControl(checkbox);
|
control_main.addControl(checkbox);
|
||||||
|
|
||||||
var header = new BABYLON_GUI.TextBlock();
|
var header = new BABYLON_GUI.TextBlock();
|
||||||
|
|
||||||
header.text = "自动旋转";
|
|
||||||
header.width = "80px";
|
|
||||||
header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
|
||||||
header.color = "white";
|
|
||||||
name_panel.addControl(header);
|
|
||||||
|
|
||||||
// checkbox.isChecked = true; //默认开启自动旋转
|
header.text = "自动旋转";
|
||||||
|
header.width = "80px";
|
||||||
|
header.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
||||||
|
header.color = "white";
|
||||||
|
control_main.addControl(header);
|
||||||
|
|
||||||
|
// 添加抓取事件
|
||||||
|
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 (mesh.name == '柱体.024') {
|
||||||
|
// 在选中的 mesh 上添加高亮效果
|
||||||
|
highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
|
||||||
|
that.currentLightMesh = mesh;
|
||||||
|
mesh_rect.linkWithMesh(mesh);
|
||||||
|
mesh_name.text = mesh.name;
|
||||||
|
mesh_rect.isVisible = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
// checkbox.isChecked = true; //默认开启自动旋转
|
||||||
return scene;
|
return scene;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -471,13 +623,35 @@ export default {
|
||||||
window.addEventListener("resize", function () {
|
window.addEventListener("resize", function () {
|
||||||
engine.resize();
|
engine.resize();
|
||||||
});
|
});
|
||||||
}
|
},
|
||||||
|
handleSectionClick(val, index){
|
||||||
|
this.activeSectionName = val;
|
||||||
|
this.activeSection = index;
|
||||||
|
if (val == '回转窑'){
|
||||||
|
this.showKgcet = true;
|
||||||
|
}else{
|
||||||
|
this.showKgcet = false;
|
||||||
|
}
|
||||||
|
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');
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.dashboard {
|
.dashboard {
|
||||||
background-color: #33334d;
|
background-color: black;
|
||||||
/* background-color: #0b2e4a; */
|
/* background-color: #0b2e4a; */
|
||||||
font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
font-family: Inter, "-apple-system", BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB", "noto sans", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||||
}
|
}
|
||||||
|
|
@ -490,39 +664,52 @@ header {
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
background-position: center;
|
background-position: center;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: space-between;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.title_left {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
.title {
|
.title {
|
||||||
|
flex: 1;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 24px;
|
font-size: 24px;
|
||||||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
|
.title_right {
|
||||||
|
flex: 1;
|
||||||
|
font-size: 20px;
|
||||||
|
color: white;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
.model {
|
.model {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
background-image: url('/public/img/bj.png');
|
||||||
|
background-size: cover;
|
||||||
}
|
}
|
||||||
|
|
||||||
#renderCanvas {
|
#renderCanvas {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%
|
height: 100%
|
||||||
}
|
}
|
||||||
|
|
||||||
#loadingScreen {
|
#loadingScreen {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
top: 260px;
|
top: 260px;
|
||||||
color: white;
|
color: white;
|
||||||
display:flex;
|
display: flex;
|
||||||
align-items:center;
|
align-items: center;
|
||||||
justify-content:center;
|
justify-content: center;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.left_main,
|
.left_main,
|
||||||
.right_main {
|
.right_main {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 30px;
|
top: 40px;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -533,7 +720,7 @@ header {
|
||||||
.left_other,
|
.left_other,
|
||||||
.right_other {
|
.right_other {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 190px;
|
top: 240px;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -572,21 +759,45 @@ header {
|
||||||
|
|
||||||
.panel_label {
|
.panel_label {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
flex: 1;
|
flex: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel_value {
|
.panel_value {
|
||||||
|
flex: 2;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel_unit {
|
.panel_unit {
|
||||||
|
flex: 1;
|
||||||
color: #aebfe9;
|
color: #aebfe9;
|
||||||
margin-left: 4px;
|
font-size: 16px;
|
||||||
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart {
|
.chart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 220px;
|
height: 220px;
|
||||||
}
|
}
|
||||||
|
.dropdown {
|
||||||
|
top: 20%;
|
||||||
|
font-size: 18px;
|
||||||
|
right: 22%;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.dropdown-item {
|
||||||
|
padding: 12px 16px;
|
||||||
|
text-decoration: none;
|
||||||
|
display: block;
|
||||||
|
color: white;
|
||||||
|
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 25, 36, 0.335));
|
||||||
|
border-radius: 5%;
|
||||||
|
margin-bottom: 6px;
|
||||||
|
border: 1px solid #99fffe;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item:hover, .dropdown-item.active{
|
||||||
|
background-color: #ddd;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
Loading…
Reference in New Issue