fix: 大屏及部分bug修复
This commit is contained in:
parent
155a4c7b7e
commit
283321f238
Binary file not shown.
|
After Width: | Height: | Size: 51 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 48 KiB |
|
|
@ -1,17 +1,17 @@
|
||||||
<template>
|
<template>
|
||||||
<el-container class="dashboard">
|
<el-container class="dashboard">
|
||||||
<el-header class="header">
|
<el-header class="header">
|
||||||
<div>10车间生产数据大看板</div>
|
<div style="font-weight: bold;">10车间生产数据看板</div>
|
||||||
|
<div style="font-size: 14px;margin-top:18px">2023-11-01 08:00</div>
|
||||||
</el-header>
|
</el-header>
|
||||||
<el-main>
|
<el-main>
|
||||||
<el-row style="height: 60%" :gutter="10">
|
<el-row style="height: 60%" :gutter="10">
|
||||||
<el-col :xs="24" :md="10">
|
<el-col :xs="24" :md="10">
|
||||||
<el-row style="height: 34%;" :gutter="10">
|
<el-row style="height: 38%;" :gutter="10">
|
||||||
<el-col :xs="8" :md="8">
|
<el-col :xs="8" :md="8">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="boxtitle bgimg">
|
<div class="boxtitle bgimg">
|
||||||
<div class="boxlabel"></div>
|
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">今日任务</div>
|
||||||
<div>今日任务</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 4px;"></div>
|
<div style="height: 4px;"></div>
|
||||||
<div class="boxmain flex_center bigdata border">
|
<div class="boxmain flex_center bigdata border">
|
||||||
|
|
@ -24,8 +24,7 @@
|
||||||
<el-col :xs="8" :md="8">
|
<el-col :xs="8" :md="8">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="boxtitle bgimg">
|
<div class="boxtitle bgimg">
|
||||||
<div class="boxlabel"></div>
|
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格</div>
|
||||||
<div>昨日合格</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 4px;"></div>
|
<div style="height: 4px;"></div>
|
||||||
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||||
|
|
@ -38,8 +37,7 @@
|
||||||
<el-col :xs="8" :md="8">
|
<el-col :xs="8" :md="8">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="boxtitle bgimg">
|
<div class="boxtitle bgimg">
|
||||||
<div class="boxlabel"></div>
|
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">累计合格</div>
|
||||||
<div>累计合格</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 4px;"></div>
|
<div style="height: 4px;"></div>
|
||||||
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||||
|
|
@ -51,14 +49,15 @@
|
||||||
</el-col>
|
</el-col>
|
||||||
</el-row>
|
</el-row>
|
||||||
<div style="height:2%"></div>
|
<div style="height:2%"></div>
|
||||||
<dv-decoration3 style="width:100%;height:4%;" />
|
<!-- <dv-decoration3 style="width:100%;height:4%;" /> -->
|
||||||
<el-row style="height:60%">
|
<el-row style="height:60%">
|
||||||
<el-col>
|
<el-col>
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="boxtitle">
|
<div class="boxtitle">
|
||||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">人员到岗
|
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">人员到岗
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div style="height: 2px;"></div>
|
||||||
<div class="boxmain">
|
<div class="boxmain">
|
||||||
<dv-scroll-board :config="taskBoard" style="width:100%;height:100%"
|
<dv-scroll-board :config="taskBoard" style="width:100%;height:100%"
|
||||||
@mouseover="mouseoverHandler" @click="clickHandler" />
|
@mouseover="mouseoverHandler" @click="clickHandler" />
|
||||||
|
|
@ -129,7 +128,7 @@
|
||||||
<el-col :xs="24" :md="14">
|
<el-col :xs="24" :md="14">
|
||||||
<div class="box" :dur="20">
|
<div class="box" :dur="20">
|
||||||
<div class="boxtitle">
|
<div class="boxtitle">
|
||||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">任务进度</div>
|
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">任务进度</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="height: 2px;"></div>
|
<div style="height: 2px;"></div>
|
||||||
<div class="boxmain">
|
<div class="boxmain">
|
||||||
|
|
@ -198,7 +197,7 @@
|
||||||
<el-col :xs="24" :md="9">
|
<el-col :xs="24" :md="9">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="boxtitle">
|
<div class="boxtitle">
|
||||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">全年生产统计</div>
|
<div style="margin-left: 6px;font-size: 18px; margin-top: 6px">全年生产统计</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="boxmain" id="chart1">
|
<div class="boxmain" id="chart1">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -207,7 +206,7 @@
|
||||||
<el-col :xs="24" :md="9">
|
<el-col :xs="24" :md="9">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="boxtitle">
|
<div class="boxtitle">
|
||||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">本月合格率统计</div>
|
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">本月合格率统计</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="boxmain" id="chart2">
|
<div class="boxmain" id="chart2">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -216,7 +215,7 @@
|
||||||
<el-col :xs="24" :md="6">
|
<el-col :xs="24" :md="6">
|
||||||
<div class="box">
|
<div class="box">
|
||||||
<div class="boxtitle">
|
<div class="boxtitle">
|
||||||
<div style="margin:auto; font-size: 18px; margin-top: 6px">昨日合格统计</div>
|
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格统计</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="boxmain" id="chart3">
|
<div class="boxmain" id="chart3">
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -231,7 +230,7 @@
|
||||||
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
|
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
|
||||||
/* url("/public/img/bg.jpg"); */
|
/* url("/public/img/bg.jpg"); */
|
||||||
color: #fff;
|
color: #fff;
|
||||||
font-family: "微软雅黑" !important;
|
font-family: "Microsoft Yahei" !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header {
|
.header {
|
||||||
|
|
@ -239,8 +238,13 @@
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
/* background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp"); */
|
/* background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp"); */
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
font-size: 28px;
|
font-size: 26px;
|
||||||
justify-content: center;
|
display: block;
|
||||||
|
height: 80px;
|
||||||
|
color: rgb(149, 255, 255);
|
||||||
|
font-family: 'Microsoft Yahei';
|
||||||
|
text-align: center;
|
||||||
|
padding: 12px 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -265,7 +269,7 @@
|
||||||
|
|
||||||
.bgimg {
|
.bgimg {
|
||||||
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
|
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
|
||||||
background-size: 100% 100%;
|
background-size: 140% 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.boxlabel {
|
.boxlabel {
|
||||||
|
|
@ -329,7 +333,7 @@ export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
basicOption: {
|
basicOption: {
|
||||||
// backgroundColor: '',
|
backgroundColor: '',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
trigger: 'axis',
|
trigger: 'axis',
|
||||||
axisPointer: {
|
axisPointer: {
|
||||||
|
|
@ -576,7 +580,33 @@ export default {
|
||||||
chart2Option.series[0].type = 'line'
|
chart2Option.series[0].type = 'line'
|
||||||
chart2Option.series[1].type = 'line'
|
chart2Option.series[1].type = 'line'
|
||||||
let chart2 = this.setChart("chart2", chart2Option)
|
let chart2 = this.setChart("chart2", chart2Option)
|
||||||
let chart3Option = deepCopy(this.basicOption)
|
let chart3Option = {
|
||||||
|
backgroundColor: '',
|
||||||
|
legend: {
|
||||||
|
top: 'bottom'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: 'Nightingale Chart',
|
||||||
|
type: 'pie',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
roseType: 'area',
|
||||||
|
itemStyle: {
|
||||||
|
borderRadius: 8
|
||||||
|
},
|
||||||
|
data: [
|
||||||
|
{ value: 40, name: 'rose 1' },
|
||||||
|
{ value: 38, name: 'rose 2' },
|
||||||
|
{ value: 32, name: 'rose 3' },
|
||||||
|
{ value: 30, name: 'rose 4' },
|
||||||
|
{ value: 28, name: 'rose 5' },
|
||||||
|
{ value: 26, name: 'rose 6' },
|
||||||
|
{ value: 22, name: 'rose 7' },
|
||||||
|
{ value: 18, name: 'rose 8' }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
let chart3 = this.setChart("chart3", chart3Option)
|
let chart3 = this.setChart("chart3", chart3Option)
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
<div class="panel_title">本月全厂主要数据</div>
|
<div class="panel_title">本月全厂主要数据</div>
|
||||||
<el-row :gutter="16" style="height: 72px;margin-top: 4px">
|
<el-row :gutter="16" style="height: 72px;margin-top: 4px">
|
||||||
<el-col :span="12" class="panel_item">
|
<el-col :span="12" class="panel_item">
|
||||||
<div class="panel_label"><img src="img/elec.png" style="height: 24px;vertical-align:middle;"/>动力电消耗</div>
|
<div class="panel_label"><img src="img/elec.png" style="height: 24px;vertical-align:middle;" />动力电消耗</div>
|
||||||
<div class="pannel_number">
|
<div class="pannel_number">
|
||||||
<span class="panel_value">{{ factoryData.elec_consume }}</span>
|
<span class="panel_value">{{ factoryData.elec_consume }}</span>
|
||||||
<span class="panel_unit">(kW·h)</span>
|
<span class="panel_unit">(kW·h)</span>
|
||||||
|
|
@ -66,7 +66,8 @@
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12" class="panel_item">
|
<el-col :span="12" class="panel_item">
|
||||||
<div class="panel_label"><img src="img/total_production.png" style="height: 24px;vertical-align:middle;" />产品产量</div>
|
<div class="panel_label"><img src="img/total_production.png"
|
||||||
|
style="height: 24px;vertical-align:middle;" />产品产量</div>
|
||||||
<div class="pannel_number">
|
<div class="pannel_number">
|
||||||
<span class="panel_value">{{ sectionData.total_production }}</span>
|
<span class="panel_value">{{ sectionData.total_production }}</span>
|
||||||
<span class="panel_unit">(t)</span>
|
<span class="panel_unit">(t)</span>
|
||||||
|
|
@ -82,7 +83,7 @@
|
||||||
</div>
|
</div>
|
||||||
</el-col>
|
</el-col>
|
||||||
<el-col :span="12" class="panel_item" v-if="showKgcet">
|
<el-col :span="12" class="panel_item" v-if="showKgcet">
|
||||||
<div class="panel_label"><img src="img/coal.png" style="height: 24px;vertical-align:bottom;"/>单位产品标煤耗</div>
|
<div class="panel_label"><img src="img/coal.png" style="height: 24px;vertical-align:bottom;" />单位产品标煤耗</div>
|
||||||
<div class="pannel_number">
|
<div class="pannel_number">
|
||||||
<span class="panel_value">{{ sectionData.coal_consume_unit }}</span>
|
<span class="panel_value">{{ sectionData.coal_consume_unit }}</span>
|
||||||
<span class="panel_unit">(kgce/t)</span>
|
<span class="panel_unit">(kgce/t)</span>
|
||||||
|
|
@ -137,15 +138,15 @@ import 'animate.css';
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
query:{
|
query: {
|
||||||
year_s:2023,
|
year_s: 2023,
|
||||||
month_s:8,
|
month_s: 8,
|
||||||
type:'month_s',
|
type: 'month_s',
|
||||||
page:0
|
page: 0
|
||||||
},
|
},
|
||||||
factoryData: {},
|
factoryData: {},
|
||||||
sectionData: {},
|
sectionData: {},
|
||||||
nowDay:1,
|
nowDay: 1,
|
||||||
initialAlpha: -Math.PI / 0.89,
|
initialAlpha: -Math.PI / 0.89,
|
||||||
initialBeta: Math.PI / 3.3,
|
initialBeta: Math.PI / 3.3,
|
||||||
initialRadius: 18,
|
initialRadius: 18,
|
||||||
|
|
@ -175,12 +176,12 @@ export default {
|
||||||
xAxis: {
|
xAxis: {
|
||||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||||
},
|
},
|
||||||
yAxis: { type: 'value'},
|
yAxis: { type: 'value' },
|
||||||
series: [
|
series: [
|
||||||
{
|
{
|
||||||
name: '销量',
|
name: '销量',
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
barwidth:10,
|
barwidth: 10,
|
||||||
label: {
|
label: {
|
||||||
show: true,
|
show: true,
|
||||||
position: 'top'
|
position: 'top'
|
||||||
|
|
@ -211,33 +212,33 @@ export default {
|
||||||
bottom: "15%"
|
bottom: "15%"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
year_start:0,
|
year_start: 0,
|
||||||
end_time:'',
|
end_time: '',
|
||||||
start_time:'',
|
start_time: '',
|
||||||
xAxisData:[],
|
xAxisData: [],
|
||||||
arrMonth:[],
|
arrMonth: [],
|
||||||
chart1Option: {},
|
chart1Option: {},
|
||||||
chart2Option: {},
|
chart2Option: {},
|
||||||
chart3Option: {},
|
chart3Option: {},
|
||||||
chart4Option: {},
|
chart4Option: {},
|
||||||
chart5Option: {},
|
chart5Option: {},
|
||||||
chart6Option: {},
|
chart6Option: {},
|
||||||
seriesData1:[0,0,0,0,0,0],
|
seriesData1: [0, 0, 0, 0, 0, 0],
|
||||||
seriesData2:[0,0,0,0,0,0],
|
seriesData2: [0, 0, 0, 0, 0, 0],
|
||||||
seriesData3:[0,0,0,0,0,0],
|
seriesData3: [0, 0, 0, 0, 0, 0],
|
||||||
seriesData3_2:[0,0,0,0,0,0],
|
seriesData3_2: [0, 0, 0, 0, 0, 0],
|
||||||
seriesData4:[0,0,0,0,0,0],
|
seriesData4: [0, 0, 0, 0, 0, 0],
|
||||||
seriesData5:[0,0,0,0,0,0],
|
seriesData5: [0, 0, 0, 0, 0, 0],
|
||||||
seriesData6:[0,0,0,0,0,0],
|
seriesData6: [0, 0, 0, 0, 0, 0],
|
||||||
path:"ws://49.232.14.174:2226/ws/my/?token=",
|
path: "ws://49.232.14.174:2226/ws/my/?token=",
|
||||||
ws:null,
|
ws: null,
|
||||||
mgroupValues:{
|
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' },
|
||||||
回转窑:{total:'0',elec:'0'},
|
回转窑: { total: '0', elec: '0' },
|
||||||
水泥磨:{total:'0',elec:'0'},
|
水泥磨: { total: '0', elec: '0' },
|
||||||
水泥包装:{total:'0',elec:'0'}
|
水泥包装: { total: '0', elec: '0' }
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
@ -247,35 +248,35 @@ export default {
|
||||||
this.addListener();
|
this.addListener();
|
||||||
let myDate = new Date();
|
let myDate = new Date();
|
||||||
let year = myDate.getFullYear();
|
let year = myDate.getFullYear();
|
||||||
let month = myDate.getMonth()+1;
|
let month = myDate.getMonth() + 1;
|
||||||
let day = myDate.getDate();
|
let day = myDate.getDate();
|
||||||
that.nowDay = day;
|
that.nowDay = day;
|
||||||
that.query.year_s = year;
|
that.query.year_s = year;
|
||||||
that.query.month_s = month;
|
that.query.month_s = month;
|
||||||
this.initDomStyle();
|
this.initDomStyle();
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.$API.enm.enstat.req({type:'month_s',month_s:month,year_s:year,page:0}).then((res1) => {
|
this.$API.enm.enstat.req({ type: 'month_s', month_s: month, year_s: year, page: 0 }).then((res1) => {
|
||||||
console.log('工段数据：',res1)
|
console.log('工段数据：', res1)
|
||||||
// debugger
|
// debugger
|
||||||
res1.forEach(item=>{
|
res1.forEach(item => {
|
||||||
if(item.mgroup_name=='电石渣'){
|
if (item.mgroup_name == '电石渣') {
|
||||||
that.mgroupValues.电石渣.total = item.total_production+'';
|
that.mgroupValues.电石渣.total = item.total_production + '';
|
||||||
that.mgroupValues.电石渣.elec=item.elec_consume_unit+'';
|
that.mgroupValues.电石渣.elec = item.elec_consume_unit + '';
|
||||||
}else if(item.mgroup_name=='原料磨'){
|
} else if (item.mgroup_name == '原料磨') {
|
||||||
that.mgroupValues.原料磨.total=item.total_production+'';
|
that.mgroupValues.原料磨.total = item.total_production + '';
|
||||||
that.mgroupValues.原料磨.elec=item.elec_consume_unit+'';
|
that.mgroupValues.原料磨.elec = item.elec_consume_unit + '';
|
||||||
}else if(item.mgroup_name=='煤磨'){
|
} else if (item.mgroup_name == '煤磨') {
|
||||||
that.mgroupValues.煤磨.total=item.total_production+'';
|
that.mgroupValues.煤磨.total = item.total_production + '';
|
||||||
that.mgroupValues.煤磨.elec=item.elec_consume_unit+'';
|
that.mgroupValues.煤磨.elec = item.elec_consume_unit + '';
|
||||||
}else if(item.mgroup_name=='回转窑'){
|
} else if (item.mgroup_name == '回转窑') {
|
||||||
that.mgroupValues.回转窑.total=item.total_production+'';
|
that.mgroupValues.回转窑.total = item.total_production + '';
|
||||||
that.mgroupValues.回转窑.elec=item.elec_consume_unit+'';
|
that.mgroupValues.回转窑.elec = item.elec_consume_unit + '';
|
||||||
}else if(item.mgroup_name=='水泥磨'){
|
} else if (item.mgroup_name == '水泥磨') {
|
||||||
that.mgroupValues.水泥磨.total=item.total_production+'';
|
that.mgroupValues.水泥磨.total = item.total_production + '';
|
||||||
that.mgroupValues.水泥磨.elec=item.elec_consume_unit+'';
|
that.mgroupValues.水泥磨.elec = item.elec_consume_unit + '';
|
||||||
}else if(item.mgroup_name=='水泥包装'){
|
} else if (item.mgroup_name == '水泥包装') {
|
||||||
that.mgroupValues.水泥包装.total=item.total_production+'';
|
that.mgroupValues.水泥包装.total = item.total_production + '';
|
||||||
that.mgroupValues.水泥包装.elec=item.elec_consume_unit+'';
|
that.mgroupValues.水泥包装.elec = item.elec_consume_unit + '';
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
@ -283,29 +284,29 @@ export default {
|
||||||
that.initFactory();
|
that.initFactory();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
});
|
});
|
||||||
let month1= month>9?month:'0'+month;
|
let month1 = month > 9 ? month : '0' + month;
|
||||||
let end_time = year+'-'+month1+'-01 10:00:00';
|
let end_time = year + '-' + month1 + '-01 10:00:00';
|
||||||
let year_s=year;
|
let year_s = year;
|
||||||
if(month<6){
|
if (month < 6) {
|
||||||
year_s = year-1;
|
year_s = year - 1;
|
||||||
}
|
}
|
||||||
let arr = [],xAxisData = [];
|
let arr = [], xAxisData = [];
|
||||||
let monthItem = month;
|
let monthItem = month;
|
||||||
for (let i = 0; i < 6; i++) {
|
for (let i = 0; i < 6; i++) {
|
||||||
arr.push(monthItem);
|
arr.push(monthItem);
|
||||||
if(monthItem === 1) {
|
if (monthItem === 1) {
|
||||||
monthItem = 12;
|
monthItem = 12;
|
||||||
} else {
|
} else {
|
||||||
monthItem--;
|
monthItem--;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
arr.reverse();
|
arr.reverse();
|
||||||
for(let i=0;i<6;i++){
|
for (let i = 0; i < 6; i++) {
|
||||||
let item = arr[i]+'月'
|
let item = arr[i] + '月'
|
||||||
xAxisData.push(item);
|
xAxisData.push(item);
|
||||||
}
|
}
|
||||||
let month0= arr[0]>9?arr[0]:'0'+arr[0];
|
let month0 = arr[0] > 9 ? arr[0] : '0' + arr[0];
|
||||||
let start_time = year_s+'-'+month0+'-01 10:00:00';
|
let start_time = year_s + '-' + month0 + '-01 10:00:00';
|
||||||
that.arrMonth = arr;
|
that.arrMonth = arr;
|
||||||
that.year_start = year_s;
|
that.year_start = year_s;
|
||||||
that.xAxisData = xAxisData;
|
that.xAxisData = xAxisData;
|
||||||
|
|
@ -325,55 +326,57 @@ export default {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
// 动态绑定Class
|
// 动态绑定Class
|
||||||
bindClass(type){
|
bindClass(type) {
|
||||||
let classInfo = { socketDom: true, redColor: false,
|
let classInfo = {
|
||||||
orangeColor:false, yellowColor:false, blueColor:true }
|
socketDom: true, redColor: false,
|
||||||
if(type==''){
|
orangeColor: false, yellowColor: false, blueColor: true
|
||||||
classInfo.redColor = true
|
}
|
||||||
|
if (type == '') {
|
||||||
|
classInfo.redColor = true
|
||||||
}
|
}
|
||||||
return classInfo
|
return classInfo
|
||||||
},
|
},
|
||||||
init() {
|
init() {
|
||||||
var that = this
|
var that = this
|
||||||
// console.log(tool.cookie.get("TOKEN"))
|
// console.log(tool.cookie.get("TOKEN"))
|
||||||
if(typeof(WebSocket) === "undefined"){
|
if (typeof (WebSocket) === "undefined") {
|
||||||
alert("您的浏览器不支持socket")
|
alert("您的浏览器不支持socket")
|
||||||
}else{
|
} else {
|
||||||
this.ws = new WebSocket(this.path+tool.cookie.get("TOKEN"))
|
this.ws = new WebSocket(this.path + tool.cookie.get("TOKEN"))
|
||||||
//监听是否连接成功
|
//监听是否连接成功
|
||||||
this.ws.onopen = ()=> {
|
this.ws.onopen = () => {
|
||||||
// console.log("socket连接成功");
|
// console.log("socket连接成功");
|
||||||
setTimeout(()=>{
|
setTimeout(() => {
|
||||||
that.ws.send(JSON.stringify({'type': 'event'}))
|
that.ws.send(JSON.stringify({ 'type': 'event' }))
|
||||||
},500)
|
}, 500)
|
||||||
|
}
|
||||||
|
|
||||||
|
//接听服务器发回的信息并处理展示
|
||||||
|
this.ws.onmessage = (msg) => {
|
||||||
|
let data = JSON.parse(msg.data)
|
||||||
|
console.log(data)
|
||||||
|
if (data.type == 'event') {
|
||||||
|
that.bindClass();
|
||||||
|
} if (data.type == 'ticket') {
|
||||||
|
|
||||||
|
} if (data.type == 'remaind') {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
};
|
||||||
//接听服务器发回的信息并处理展示
|
// 监听并处理error事件
|
||||||
this.ws.onmessage = (msg)=>{
|
this.ws.onerror = function (error) {
|
||||||
let data = JSON.parse(msg.data)
|
|
||||||
console.log(data)
|
|
||||||
if(data.type=='event'){
|
|
||||||
that.bindClass();
|
|
||||||
}if(data.type=='ticket'){
|
|
||||||
|
|
||||||
}if(data.type=='remaind'){
|
|
||||||
|
|
||||||
}
|
|
||||||
};
|
|
||||||
// 监听并处理error事件
|
|
||||||
this.ws.onerror = function(error) {
|
|
||||||
console.log('ws断开,尝试重连')
|
console.log('ws断开,尝试重连')
|
||||||
setTimeout(()=>{
|
setTimeout(() => {
|
||||||
this.ws = null;
|
this.ws = null;
|
||||||
this.init()
|
this.init()
|
||||||
}, 5000)
|
}, 5000)
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
},
|
|
||||||
|
},
|
||||||
getMessage(msg) {
|
getMessage(msg) {
|
||||||
console.log(msg);
|
console.log(msg);
|
||||||
},
|
},
|
||||||
close() {
|
close() {
|
||||||
if (this.ws) {
|
if (this.ws) {
|
||||||
this.ws.close();
|
this.ws.close();
|
||||||
|
|
@ -382,42 +385,42 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
compare(property) {
|
compare(property) {
|
||||||
return function (a, b) {
|
return function (a, b) {
|
||||||
return a[property] - b[property];
|
return a[property] - b[property];
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
getFactoryData() {
|
getFactoryData() {
|
||||||
var that = this;
|
var that = this;
|
||||||
that.$API.enm.enstat2.req(that.query).then((res) => {
|
that.$API.enm.enstat2.req(that.query).then((res) => {
|
||||||
if(res.length>0){
|
if (res.length > 0) {
|
||||||
that.factoryData = res[0]
|
that.factoryData = res[0]
|
||||||
}else{}
|
} else { }
|
||||||
})
|
})
|
||||||
//图表数据
|
//图表数据
|
||||||
let obj = {};
|
let obj = {};
|
||||||
obj.type = 'month_s';
|
obj.type = 'month_s';
|
||||||
obj.start_time = that.start_time;
|
obj.start_time = that.start_time;
|
||||||
obj.end_time = that.end_time;
|
obj.end_time = that.end_time;
|
||||||
obj.page=0;
|
obj.page = 0;
|
||||||
this.$API.enm.enstat2.req(obj).then((res1) => {
|
this.$API.enm.enstat2.req(obj).then((res1) => {
|
||||||
let list0 = res1.sort(this.compare('month_s'));
|
let list0 = res1.sort(this.compare('month_s'));
|
||||||
let list = list0.sort(this.compare('year_s'));
|
let list = list0.sort(this.compare('year_s'));
|
||||||
let seriesData1 = [0,0,0,0,0,0],
|
let seriesData1 = [0, 0, 0, 0, 0, 0],
|
||||||
seriesData2 = [0,0,0,0,0,0],
|
seriesData2 = [0, 0, 0, 0, 0, 0],
|
||||||
seriesData3 = [0,0,0,0,0,0],
|
seriesData3 = [0, 0, 0, 0, 0, 0],
|
||||||
seriesData3_2 = [0,0,0,0,0,0];
|
seriesData3_2 = [0, 0, 0, 0, 0, 0];
|
||||||
list.forEach(item=>{
|
list.forEach(item => {
|
||||||
let index = that.arrMonth.indexOf(item.month_s);
|
let index = that.arrMonth.indexOf(item.month_s);
|
||||||
seriesData1[index] = Number(item.elec_consume)
|
seriesData1[index] = Number(item.elec_consume)
|
||||||
seriesData2[index] = Number(item.pcoal_consume)
|
seriesData2[index] = Number(item.pcoal_consume)
|
||||||
seriesData3[index] = Number(item.water_consume)
|
seriesData3[index] = Number(item.water_consume)
|
||||||
seriesData3_2[index] = Number(item.cair_consume)
|
seriesData3_2[index] = Number(item.cair_consume)
|
||||||
})
|
})
|
||||||
that.seriesData1=seriesData1;
|
that.seriesData1 = seriesData1;
|
||||||
that.seriesData2=seriesData2;
|
that.seriesData2 = seriesData2;
|
||||||
that.seriesData3=seriesData3;
|
that.seriesData3 = seriesData3;
|
||||||
that.seriesData3_2=seriesData3_2;
|
that.seriesData3_2 = seriesData3_2;
|
||||||
that.initCharts();
|
that.initCharts();
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getSectionData() {
|
getSectionData() {
|
||||||
|
|
@ -426,35 +429,35 @@ export default {
|
||||||
obj.type = 'month_s';
|
obj.type = 'month_s';
|
||||||
obj.start_time = that.start_time;
|
obj.start_time = that.start_time;
|
||||||
obj.end_time = that.end_time;
|
obj.end_time = that.end_time;
|
||||||
obj.mgroup__name=that.activeSectionName;
|
obj.mgroup__name = that.activeSectionName;
|
||||||
obj.page=0;
|
obj.page = 0;
|
||||||
this.$API.enm.enstat.req(obj).then((res) => {
|
this.$API.enm.enstat.req(obj).then((res) => {
|
||||||
let list0 = res.sort(this.compare('month_s'));
|
let list0 = res.sort(this.compare('month_s'));
|
||||||
let list = list0.sort(this.compare('year_s'));
|
let list = list0.sort(this.compare('year_s'));
|
||||||
let seriesData4 = [0,0,0,0,0,0],
|
let seriesData4 = [0, 0, 0, 0, 0, 0],
|
||||||
seriesData5 = [0,0,0,0,0,0],
|
seriesData5 = [0, 0, 0, 0, 0, 0],
|
||||||
seriesData6 = [0,0,0,0,0,0];
|
seriesData6 = [0, 0, 0, 0, 0, 0];
|
||||||
list.forEach(item=>{
|
list.forEach(item => {
|
||||||
let index = that.arrMonth.indexOf(item.month_s);
|
let index = that.arrMonth.indexOf(item.month_s);
|
||||||
seriesData4[index] = Number(item.elec_consume_unit)
|
seriesData4[index] = Number(item.elec_consume_unit)
|
||||||
seriesData5[index] = Number(item.total_production)
|
seriesData5[index] = Number(item.total_production)
|
||||||
seriesData6[index] = Number(item.run_rate)
|
seriesData6[index] = Number(item.run_rate)
|
||||||
})
|
})
|
||||||
that.seriesData4=seriesData4;
|
that.seriesData4 = seriesData4;
|
||||||
that.seriesData5=seriesData5;
|
that.seriesData5 = seriesData5;
|
||||||
that.seriesData6=seriesData6;
|
that.seriesData6 = seriesData6;
|
||||||
that.initCharts1();
|
that.initCharts1();
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
getDayData(){
|
getDayData() {
|
||||||
var that = this;
|
var that = this;
|
||||||
let obj = {};
|
let obj = {};
|
||||||
obj.type = 'day_s';
|
obj.type = 'day_s';
|
||||||
obj.year_s = that.query.year_s;
|
obj.year_s = that.query.year_s;
|
||||||
obj.month_s = that.query.month_s;
|
obj.month_s = that.query.month_s;
|
||||||
obj.day_s = that.nowDay;
|
obj.day_s = that.nowDay;
|
||||||
obj.mgroup__name=that.activeSectionName;
|
obj.mgroup__name = that.activeSectionName;
|
||||||
obj.page=0;
|
obj.page = 0;
|
||||||
this.$API.enm.enstat.req(obj).then((res) => {
|
this.$API.enm.enstat.req(obj).then((res) => {
|
||||||
that.sectionData = res[0];
|
that.sectionData = res[0];
|
||||||
})
|
})
|
||||||
|
|
@ -466,7 +469,7 @@ export default {
|
||||||
}
|
}
|
||||||
// 初始化所有表格
|
// 初始化所有表格
|
||||||
that.basicOption.xAxis.data = that.xAxisData;
|
that.basicOption.xAxis.data = that.xAxisData;
|
||||||
that.chart1Option = deepCopy(that.basicOption)
|
that.chart1Option = deepCopy(that.basicOption)
|
||||||
that.chart1Option.series = [
|
that.chart1Option.series = [
|
||||||
{
|
{
|
||||||
name: '电耗',
|
name: '电耗',
|
||||||
|
|
@ -480,13 +483,13 @@ export default {
|
||||||
focus: 'series'
|
focus: 'series'
|
||||||
},
|
},
|
||||||
data: that.seriesData1
|
data: that.seriesData1
|
||||||
}]
|
}]
|
||||||
that.setChart('chart1',that.chart1Option);
|
that.setChart('chart1', that.chart1Option);
|
||||||
this.chart2Option = deepCopy(that.basicOption)
|
this.chart2Option = deepCopy(that.basicOption)
|
||||||
this.chart2Option.series[0].type = 'line';
|
this.chart2Option.series[0].type = 'line';
|
||||||
this.chart2Option.series[0].data = that.seriesData2;
|
this.chart2Option.series[0].data = that.seriesData2;
|
||||||
this.setChart('chart2', this.chart2Option);
|
this.setChart('chart2', this.chart2Option);
|
||||||
this.chart3Option =deepCopy(that.basicOption)
|
this.chart3Option = deepCopy(that.basicOption)
|
||||||
this.chart3Option.series = [
|
this.chart3Option.series = [
|
||||||
{
|
{
|
||||||
name: '工业水',
|
name: '工业水',
|
||||||
|
|
@ -518,17 +521,17 @@ export default {
|
||||||
return JSON.parse(JSON.stringify(obj));
|
return JSON.parse(JSON.stringify(obj));
|
||||||
}
|
}
|
||||||
that.basicOption.xAxis.data = that.xAxisData;
|
that.basicOption.xAxis.data = that.xAxisData;
|
||||||
this.chart4Option = deepCopy(that.basicOption)
|
this.chart4Option = deepCopy(that.basicOption)
|
||||||
this.chart4Option.series[0].type = 'line';
|
this.chart4Option.series[0].type = 'line';
|
||||||
this.chart4Option.series[0].data = that.seriesData4;
|
this.chart4Option.series[0].data = that.seriesData4;
|
||||||
this.setChart('chart4', this.chart4Option);
|
this.setChart('chart4', this.chart4Option);
|
||||||
this.chart5Option = deepCopy(that.basicOption)
|
this.chart5Option = deepCopy(that.basicOption)
|
||||||
this.chart5Option.series[0].type = 'line';
|
this.chart5Option.series[0].type = 'line';
|
||||||
this.chart5Option.series[0].data = that.seriesData5;
|
this.chart5Option.series[0].data = that.seriesData5;
|
||||||
this.setChart('chart5', this.chart5Option);
|
this.setChart('chart5', this.chart5Option);
|
||||||
this.chart6Option = deepCopy(that.basicOption)
|
this.chart6Option = deepCopy(that.basicOption)
|
||||||
this.chart6Option.series[0].type = 'line';
|
this.chart6Option.series[0].type = 'line';
|
||||||
this.chart6Option.series[0].data = that.seriesData6;
|
this.chart6Option.series[0].data = that.seriesData6;
|
||||||
this.setChart('chart6', this.chart6Option);
|
this.setChart('chart6', this.chart6Option);
|
||||||
},
|
},
|
||||||
addListener() {
|
addListener() {
|
||||||
|
|
@ -627,10 +630,10 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
try {
|
try {
|
||||||
myChart.setOption(option);
|
myChart.setOption(option);
|
||||||
} catch (error) {}
|
} catch (error) { }
|
||||||
}, 500)
|
}, 500)
|
||||||
},
|
},
|
||||||
initFactory() {
|
initFactory() {
|
||||||
var that = this;
|
var that = this;
|
||||||
|
|
@ -676,17 +679,17 @@ export default {
|
||||||
var skyboxMaterial = new BABYLON_MATERIAL.SkyMaterial("skyMaterial", scene);
|
var skyboxMaterial = new BABYLON_MATERIAL.SkyMaterial("skyMaterial", scene);
|
||||||
skyboxMaterial.backFaceCulling = false;
|
skyboxMaterial.backFaceCulling = false;
|
||||||
skybox.material = skyboxMaterial;
|
skybox.material = skyboxMaterial;
|
||||||
/*
|
/*
|
||||||
* Keys:
|
* Keys:
|
||||||
* - 1: Day
|
* - 1: Day
|
||||||
* - 2: Evening
|
* - 2: Evening
|
||||||
* - 3: Increase Luminance
|
* - 3: Increase Luminance
|
||||||
* - 4: Decrease Luminance
|
* - 4: Decrease Luminance
|
||||||
* - 5: Increase Turbidity
|
* - 5: Increase Turbidity
|
||||||
* - 6: Decrease Turbidity
|
* - 6: Decrease Turbidity
|
||||||
* - 7: Move horizon to -50
|
* - 7: Move horizon to -50
|
||||||
* - 8: Restore horizon to 0
|
* - 8: Restore horizon to 0
|
||||||
*/
|
*/
|
||||||
var setSkyConfig = function (property, from, to) {
|
var setSkyConfig = function (property, from, to) {
|
||||||
var keys = [
|
var keys = [
|
||||||
{ frame: 0, value: from },
|
{ frame: 0, value: from },
|
||||||
|
|
@ -731,7 +734,7 @@ export default {
|
||||||
control_main.top = '-40%';
|
control_main.top = '-40%';
|
||||||
control_main.left = '-20%';
|
control_main.left = '-20%';
|
||||||
advancedTexture.addControl(control_main);
|
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"
|
||||||
button_main.height = "30px";
|
button_main.height = "30px";
|
||||||
|
|
@ -752,7 +755,7 @@ export default {
|
||||||
BABYLON.Animation.CreateAndStartAnimation('at61', camera, 'target', 45, 200, camera.target, that.initialTarget, 0, ease);
|
BABYLON.Animation.CreateAndStartAnimation('at61', camera, 'target', 45, 200, camera.target, that.initialTarget, 0, ease);
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// 高亮显示mesh名
|
// 高亮显示mesh名
|
||||||
const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
|
const mesh_rect = new BABYLON_GUI.Rectangle('mesh_rect');
|
||||||
mesh_rect.width = "100px";
|
mesh_rect.width = "100px";
|
||||||
|
|
@ -786,15 +789,15 @@ export default {
|
||||||
rect1.thickness = 2;
|
rect1.thickness = 2;
|
||||||
rect1.background = "green";
|
rect1.background = "green";
|
||||||
rect1.isPointerBlocker = true; // 防止点击穿透
|
rect1.isPointerBlocker = true; // 防止点击穿透
|
||||||
advancedTexture.addControl(rect1);
|
advancedTexture.addControl(rect1);
|
||||||
var label = new BABYLON_GUI.TextBlock(value + '_label');
|
var label = new BABYLON_GUI.TextBlock(value + '_label');
|
||||||
label.text = value;
|
label.text = value;
|
||||||
label.color = 'white';
|
label.color = 'white';
|
||||||
label.fontSize = '14px';
|
label.fontSize = '14px';
|
||||||
rect1.addControl(label);
|
rect1.addControl(label);
|
||||||
rect1.linkWithMesh(mesh);
|
rect1.linkWithMesh(mesh);
|
||||||
rect1.linkOffsetY = -30;
|
rect1.linkOffsetY = -30;
|
||||||
if(value=='电石渣'){
|
if (value == '电石渣') {
|
||||||
rect1.linkOffsetY = -200;
|
rect1.linkOffsetY = -200;
|
||||||
var line = new BABYLON_GUI.Line();
|
var line = new BABYLON_GUI.Line();
|
||||||
line.lineWidth = 4;
|
line.lineWidth = 4;
|
||||||
|
|
@ -804,9 +807,9 @@ export default {
|
||||||
line.linkOffsetY = -15;
|
line.linkOffsetY = -15;
|
||||||
line.dash = [3, 3];
|
line.dash = [3, 3];
|
||||||
advancedTexture.addControl(line);
|
advancedTexture.addControl(line);
|
||||||
line.linkWithMesh(mesh);
|
line.linkWithMesh(mesh);
|
||||||
let connectedControl = advancedTexture.getControlByName('电石渣_rect')
|
let connectedControl = advancedTexture.getControlByName('电石渣_rect')
|
||||||
line.connectedControl = connectedControl;
|
line.connectedControl = connectedControl;
|
||||||
// line.connectedControl = rect1;
|
// line.connectedControl = rect1;
|
||||||
// line.connectedControl = data_view;
|
// line.connectedControl = data_view;
|
||||||
}
|
}
|
||||||
|
|
@ -817,7 +820,7 @@ export default {
|
||||||
// console.log('fly to')
|
// console.log('fly to')
|
||||||
// 计算新的相机位置
|
// 计算新的相机位置
|
||||||
let position = mesh._parentNode._position
|
let position = mesh._parentNode._position
|
||||||
if(mesh._parentNode.id=='__root__'){
|
if (mesh._parentNode.id == '__root__') {
|
||||||
position = mesh.position
|
position = mesh.position
|
||||||
}
|
}
|
||||||
const cameraPosition = new BABYLON.Vector3(
|
const cameraPosition = new BABYLON.Vector3(
|
||||||
|
|
@ -856,7 +859,7 @@ export default {
|
||||||
mgroupName.shadowOffsetX = -2;
|
mgroupName.shadowOffsetX = -2;
|
||||||
mgroupName.shadowOffsetY = 2;
|
mgroupName.shadowOffsetY = 2;
|
||||||
data_view.addControl(mgroupName);
|
data_view.addControl(mgroupName);
|
||||||
const mgroup =new BABYLON_GUI.Rectangle('mgroup');
|
const mgroup = new BABYLON_GUI.Rectangle('mgroup');
|
||||||
mgroup.height = "3px";
|
mgroup.height = "3px";
|
||||||
mgroup.width = "160px";
|
mgroup.width = "160px";
|
||||||
mgroup.thickness = 0;
|
mgroup.thickness = 0;
|
||||||
|
|
@ -869,45 +872,45 @@ export default {
|
||||||
var wd = 2;
|
var wd = 2;
|
||||||
var hd = 2;
|
var hd = 2;
|
||||||
for (let i = 0; i < wd; i++) {
|
for (let i = 0; i < wd; i++) {
|
||||||
grid.addRowDefinition(1/wd);
|
grid.addRowDefinition(1 / wd);
|
||||||
}
|
}
|
||||||
for (let j = 0; j < hd; j++) {
|
for (let j = 0; j < hd; j++) {
|
||||||
grid.addColumnDefinition(1/hd);
|
grid.addColumnDefinition(1 / hd);
|
||||||
}
|
}
|
||||||
for (let i = 0; i < wd; i++) {
|
for (let i = 0; i < wd; i++) {
|
||||||
for (let j = 0; j < hd; j++) {
|
for (let j = 0; j < hd; j++) {
|
||||||
var rc= new BABYLON_GUI.TextBlock("rc"+i+j);
|
var rc = new BABYLON_GUI.TextBlock("rc" + i + j);
|
||||||
rc.width = "100%";
|
rc.width = "100%";
|
||||||
// rc.height = "100%";
|
// rc.height = "100%";
|
||||||
rc.thickness = 0;
|
rc.thickness = 0;
|
||||||
if(j==0&&i==0){
|
if (j == 0 && i == 0) {
|
||||||
rc.width = "120px";
|
rc.width = "120px";
|
||||||
rc.text = "产品产量：";
|
rc.text = "产品产量：";
|
||||||
rc.color = "white";
|
rc.color = "white";
|
||||||
rc.fontSize = '16px';
|
rc.fontSize = '16px';
|
||||||
}else if(j==0&&i==1){
|
} else if (j == 0 && i == 1) {
|
||||||
rc.width = "120px";
|
rc.width = "120px";
|
||||||
rc.color = "white";
|
rc.color = "white";
|
||||||
rc.fontSize = '16px';
|
rc.fontSize = '16px';
|
||||||
rc.text = "单位产品电耗：";
|
rc.text = "单位产品电耗：";
|
||||||
}else if(j==1&&i==0){
|
} else if (j == 1 && i == 0) {
|
||||||
// rc.text = that.mgroupValues[value].total;
|
// rc.text = that.mgroupValues[value].total;
|
||||||
rc.text = "123";
|
rc.text = "123";
|
||||||
rc.width = "80px";
|
rc.width = "80px";
|
||||||
rc.fontSize = '18px';
|
rc.fontSize = '18px';
|
||||||
rc.color = "rgb(44,237,255)";
|
rc.color = "rgb(44,237,255)";
|
||||||
}else if(j==1&&i==1){
|
} else if (j == 1 && i == 1) {
|
||||||
// rc.text = that.mgroupValues[value].total;
|
// rc.text = that.mgroupValues[value].total;
|
||||||
rc.text = "456";
|
rc.text = "456";
|
||||||
rc.width = "80px";
|
rc.width = "80px";
|
||||||
rc.fontSize = '18px';
|
rc.fontSize = '18px';
|
||||||
rc.color = "rgb(44,237,255)";
|
rc.color = "rgb(44,237,255)";
|
||||||
}
|
|
||||||
grid.addControl(rc, i, j);
|
|
||||||
}
|
}
|
||||||
|
grid.addControl(rc, i, j);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
data_view.addControl(grid);
|
data_view.addControl(grid);
|
||||||
var mgroup_close = BABYLON_GUI.Button.CreateSimpleButton("mgroup_close"+value,'关闭');
|
var mgroup_close = BABYLON_GUI.Button.CreateSimpleButton("mgroup_close" + value, '关闭');
|
||||||
mgroup_close.width = "70px"
|
mgroup_close.width = "70px"
|
||||||
mgroup_close.height = "25px";
|
mgroup_close.height = "25px";
|
||||||
mgroup_close.color = "white";
|
mgroup_close.color = "white";
|
||||||
|
|
@ -916,7 +919,7 @@ export default {
|
||||||
mgroup_close.background = 'rgb(44,237,255,.5)';
|
mgroup_close.background = 'rgb(44,237,255,.5)';
|
||||||
mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5;
|
mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5;
|
||||||
mgroup_close.onPointerClickObservable.add(() => {
|
mgroup_close.onPointerClickObservable.add(() => {
|
||||||
console.log('data_view',data_view)
|
console.log('data_view', data_view)
|
||||||
data_view.isVisible = false;
|
data_view.isVisible = false;
|
||||||
})
|
})
|
||||||
data_view.addControl(mgroup_close);
|
data_view.addControl(mgroup_close);
|
||||||
|
|
@ -924,23 +927,23 @@ export default {
|
||||||
advancedTexture.addControl(data_view);
|
advancedTexture.addControl(data_view);
|
||||||
data_view.linkWithMesh(mesh);
|
data_view.linkWithMesh(mesh);
|
||||||
data_view.linkOffsetY = -120;
|
data_view.linkOffsetY = -120;
|
||||||
if(value=='电石渣'){
|
if (value == '电石渣') {
|
||||||
data_view.linkOffsetY = -290;
|
data_view.linkOffsetY = -290;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
engine.hideLoadingUI()
|
engine.hideLoadingUI()
|
||||||
},
|
},
|
||||||
function (evt) {
|
function (evt) {
|
||||||
var loadedPercent = 0;
|
var loadedPercent = 0;
|
||||||
if (evt.lengthComputable) {
|
if (evt.lengthComputable) {
|
||||||
loadedPercent = parseInt(evt.loaded * 100 / evt.total);
|
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;
|
||||||
})
|
})
|
||||||
|
|
||||||
// 自动旋转checkbox
|
// 自动旋转checkbox
|
||||||
var checkbox = new BABYLON_GUI.Checkbox();
|
var checkbox = new BABYLON_GUI.Checkbox();
|
||||||
|
|
@ -979,14 +982,14 @@ export default {
|
||||||
console.log(name)
|
console.log(name)
|
||||||
let dataView = advancedTexture.getControlByName(name);
|
let dataView = advancedTexture.getControlByName(name);
|
||||||
dataView.isVisible = true;
|
dataView.isVisible = true;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
for (let key in that.sectionNames) {
|
for (let key in that.sectionNames) {
|
||||||
let name = that.sectionNames[key] + '_data_view';
|
let name = that.sectionNames[key] + '_data_view';
|
||||||
console.log(name)
|
console.log(name)
|
||||||
let dataView = advancedTexture.getControlByName(name);
|
let dataView = advancedTexture.getControlByName(name);
|
||||||
dataView.isVisible = false;
|
dataView.isVisible = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
control_main.addControl(checkbox1);
|
control_main.addControl(checkbox1);
|
||||||
|
|
@ -997,7 +1000,7 @@ export default {
|
||||||
header1.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
header1.textHorizontalAlignment = BABYLON_GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
|
||||||
header1.color = "white";
|
header1.color = "white";
|
||||||
control_main.addControl(header1);
|
control_main.addControl(header1);
|
||||||
|
|
||||||
// 添加抓取事件
|
// 添加抓取事件
|
||||||
canvas.addEventListener('mousemove', (event) => {
|
canvas.addEventListener('mousemove', (event) => {
|
||||||
// 使用 scene.pick 检测鼠标拾取
|
// 使用 scene.pick 检测鼠标拾取
|
||||||
|
|
@ -1009,7 +1012,7 @@ export default {
|
||||||
if (pickResult.hit) {
|
if (pickResult.hit) {
|
||||||
const mesh = pickResult.pickedMesh;
|
const mesh = pickResult.pickedMesh;
|
||||||
highlightLayer.removeAllMeshes();
|
highlightLayer.removeAllMeshes();
|
||||||
if(/.*[\u4e00-\u9fa5]+.*$/.test(mesh.name)&&mesh.name!=='地面1'&&mesh.name!=='绿地'&&mesh.name!=='停车场') {
|
if (/.*[\u4e00-\u9fa5]+.*$/.test(mesh.name) && mesh.name !== '地面1' && mesh.name !== '绿地' && mesh.name !== '停车场') {
|
||||||
// 在选中的 mesh 上添加高亮效果
|
// 在选中的 mesh 上添加高亮效果
|
||||||
highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
|
highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
|
||||||
that.currentLightMesh = mesh;
|
that.currentLightMesh = mesh;
|
||||||
|
|
@ -1051,23 +1054,23 @@ export default {
|
||||||
obj.type = 'month_s';
|
obj.type = 'month_s';
|
||||||
obj.start_time = that.start_time;
|
obj.start_time = that.start_time;
|
||||||
obj.end_time = that.end_time;
|
obj.end_time = that.end_time;
|
||||||
obj.mgroup__name=val;
|
obj.mgroup__name = val;
|
||||||
obj.page=0;
|
obj.page = 0;
|
||||||
this.$API.enm.enstat.req(obj).then((res) => {
|
this.$API.enm.enstat.req(obj).then((res) => {
|
||||||
let list0 = res.sort(this.compare('month_s'));
|
let list0 = res.sort(this.compare('month_s'));
|
||||||
let list = list0.sort(this.compare('year_s'));
|
let list = list0.sort(this.compare('year_s'));
|
||||||
let seriesData4 = [0,0,0,0,0,0],
|
let seriesData4 = [0, 0, 0, 0, 0, 0],
|
||||||
seriesData5 = [0,0,0,0,0,0],
|
seriesData5 = [0, 0, 0, 0, 0, 0],
|
||||||
seriesData6 = [0,0,0,0,0,0];
|
seriesData6 = [0, 0, 0, 0, 0, 0];
|
||||||
list.forEach(item=>{
|
list.forEach(item => {
|
||||||
let index = that.arrMonth.indexOf(item.month_s);
|
let index = that.arrMonth.indexOf(item.month_s);
|
||||||
seriesData4[index] = Number(item.elec_consume_unit)
|
seriesData4[index] = Number(item.elec_consume_unit)
|
||||||
seriesData5[index] = Number(item.total_production)
|
seriesData5[index] = Number(item.total_production)
|
||||||
seriesData6[index] = Number(item.run_rate)
|
seriesData6[index] = Number(item.run_rate)
|
||||||
})
|
})
|
||||||
that.seriesData4=seriesData4;
|
that.seriesData4 = seriesData4;
|
||||||
that.seriesData5=seriesData5;
|
that.seriesData5 = seriesData5;
|
||||||
that.seriesData6=seriesData6;
|
that.seriesData6 = seriesData6;
|
||||||
that.initCharts1();
|
that.initCharts1();
|
||||||
const element_main = document.querySelector('.right_main');
|
const element_main = document.querySelector('.right_main');
|
||||||
element_main.classList.add('animate__animated', 'animate__fadeIn');
|
element_main.classList.add('animate__animated', 'animate__fadeIn');
|
||||||
|
|
@ -1081,35 +1084,35 @@ export default {
|
||||||
// 移除属性
|
// 移除属性
|
||||||
element.classList.remove('animate__fadeIn');
|
element.classList.remove('animate__fadeIn');
|
||||||
});
|
});
|
||||||
const sectionUI = this.myui.getControlByName(val+'_rect')
|
const sectionUI = this.myui.getControlByName(val + '_rect')
|
||||||
sectionUI.onPointerDownObservable.notifyObservers();
|
sectionUI.onPointerDownObservable.notifyObservers();
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
getMgroupChartData(name){
|
getMgroupChartData(name) {
|
||||||
var that = this;
|
var that = this;
|
||||||
let obj = {};
|
let obj = {};
|
||||||
obj.type = 'month_s';
|
obj.type = 'month_s';
|
||||||
obj.start_time = that.start_time;
|
obj.start_time = that.start_time;
|
||||||
obj.end_time = that.end_time;
|
obj.end_time = that.end_time;
|
||||||
obj.mgroup__name=name;
|
obj.mgroup__name = name;
|
||||||
obj.page=0;
|
obj.page = 0;
|
||||||
this.$API.enm.enstat.req(obj).then((res) => {
|
this.$API.enm.enstat.req(obj).then((res) => {
|
||||||
let list0 = res.sort(this.compare('month_s'));
|
let list0 = res.sort(this.compare('month_s'));
|
||||||
let list = list0.sort(this.compare('year_s'));
|
let list = list0.sort(this.compare('year_s'));
|
||||||
let seriesData4 = [0,0,0,0,0,0],
|
let seriesData4 = [0, 0, 0, 0, 0, 0],
|
||||||
seriesData5 = [0,0,0,0,0,0],
|
seriesData5 = [0, 0, 0, 0, 0, 0],
|
||||||
seriesData6 = [0,0,0,0,0,0];
|
seriesData6 = [0, 0, 0, 0, 0, 0];
|
||||||
list.forEach(item=>{
|
list.forEach(item => {
|
||||||
let index = that.arrMonth.indexOf(item.month_s);
|
let index = that.arrMonth.indexOf(item.month_s);
|
||||||
seriesData4[index] = Number(item.elec_consume_unit)
|
seriesData4[index] = Number(item.elec_consume_unit)
|
||||||
seriesData5[index] = Number(item.total_production)
|
seriesData5[index] = Number(item.total_production)
|
||||||
seriesData6[index] = Number(item.run_rate)
|
seriesData6[index] = Number(item.run_rate)
|
||||||
})
|
})
|
||||||
that.seriesData4=seriesData4;
|
that.seriesData4 = seriesData4;
|
||||||
that.seriesData5=seriesData5;
|
that.seriesData5 = seriesData5;
|
||||||
that.seriesData6=seriesData6;
|
that.seriesData6 = seriesData6;
|
||||||
that.initCharts1();
|
that.initCharts1();
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
@ -1181,23 +1184,30 @@ header {
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
font-size: 30px;
|
font-size: 30px;
|
||||||
}
|
}
|
||||||
.left_main,.right_main {
|
|
||||||
|
.left_main,
|
||||||
|
.right_main {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 40px;
|
top: 40px;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right_main {
|
.right_main {
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
.left_other,.right_other {
|
|
||||||
|
.left_other,
|
||||||
|
.right_other {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 240px;
|
top: 240px;
|
||||||
width: 20%;
|
width: 20%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.right_other {
|
.right_other {
|
||||||
right: 0
|
right: 0
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel {
|
.panel {
|
||||||
padding: 4px 8px;
|
padding: 4px 8px;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
|
@ -1209,6 +1219,7 @@ header {
|
||||||
border: 1px solid transparent;
|
border: 1px solid transparent;
|
||||||
margin: 6px 6px;
|
margin: 6px 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel_title {
|
.panel_title {
|
||||||
height: 30px;
|
height: 30px;
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
|
|
@ -1216,24 +1227,29 @@ header {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel_item {
|
.panel_item {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
padding: 6px;
|
padding: 6px;
|
||||||
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335));
|
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335));
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel_label {
|
.panel_label {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-bottom: 6px;
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
.pannel_number{
|
|
||||||
position: relative;
|
.pannel_number {
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel_value {
|
.panel_value {
|
||||||
padding-left: 1em;
|
padding-left: 1em;
|
||||||
font-size: 22px;
|
font-size: 22px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: right;
|
text-align: right;
|
||||||
}
|
}
|
||||||
|
|
||||||
.panel_unit {
|
.panel_unit {
|
||||||
right: 5px;
|
right: 5px;
|
||||||
color: #aebfe9;
|
color: #aebfe9;
|
||||||
|
|
@ -1241,10 +1257,12 @@ header {
|
||||||
text-align: right;
|
text-align: right;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chart {
|
.chart {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 220px;
|
height: 220px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown {
|
.dropdown {
|
||||||
/* top: 20%;
|
/* top: 20%;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
|
|
@ -1281,6 +1299,7 @@ header {
|
||||||
line-height: 3.7vw;
|
line-height: 3.7vw;
|
||||||
margin: 0 0.1vw 0.1vw 0.1vw;
|
margin: 0 0.1vw 0.1vw 0.1vw;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dropdown-item:hover,
|
.dropdown-item:hover,
|
||||||
.dropdown-item.active {
|
.dropdown-item.active {
|
||||||
/* background-color: #ddd; */
|
/* background-color: #ddd; */
|
||||||
|
|
@ -1295,6 +1314,4 @@ header {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background: url(./../../../public/img/menu_active.png) no-repeat;
|
background: url(./../../../public/img/menu_active.png) no-repeat;
|
||||||
background-size: 100%;
|
background-size: 100%;
|
||||||
}
|
}</style>
|
||||||
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue