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>
|
||||
<el-container class="dashboard">
|
||||
<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-main>
|
||||
<el-row style="height: 60%" :gutter="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">
|
||||
<div class="box">
|
||||
<div class="boxtitle bgimg">
|
||||
<div class="boxlabel"></div>
|
||||
<div>今日任务</div>
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">今日任务</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<div class="boxmain flex_center bigdata border">
|
||||
|
|
@ -24,8 +24,7 @@
|
|||
<el-col :xs="8" :md="8">
|
||||
<div class="box">
|
||||
<div class="boxtitle bgimg">
|
||||
<div class="boxlabel"></div>
|
||||
<div>昨日合格</div>
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">昨日合格</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||
|
|
@ -38,8 +37,7 @@
|
|||
<el-col :xs="8" :md="8">
|
||||
<div class="box">
|
||||
<div class="boxtitle bgimg">
|
||||
<div class="boxlabel"></div>
|
||||
<div>累计合格</div>
|
||||
<div style="margin-left: 6px; font-size: 18px; margin-top: 6px">累计合格</div>
|
||||
</div>
|
||||
<div style="height: 4px;"></div>
|
||||
<!-- <dv-decoration-9 style="height:11rem; width: 11rem;margin:auto;">
|
||||
|
|
@ -51,14 +49,15 @@
|
|||
</el-col>
|
||||
</el-row>
|
||||
<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-col>
|
||||
<div class="box">
|
||||
<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 style="height: 2px;"></div>
|
||||
<div class="boxmain">
|
||||
<dv-scroll-board :config="taskBoard" style="width:100%;height:100%"
|
||||
@mouseover="mouseoverHandler" @click="clickHandler" />
|
||||
|
|
@ -129,7 +128,7 @@
|
|||
<el-col :xs="24" :md="14">
|
||||
<div class="box" :dur="20">
|
||||
<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 style="height: 2px;"></div>
|
||||
<div class="boxmain">
|
||||
|
|
@ -198,7 +197,7 @@
|
|||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<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 class="boxmain" id="chart1">
|
||||
</div>
|
||||
|
|
@ -207,7 +206,7 @@
|
|||
<el-col :xs="24" :md="9">
|
||||
<div class="box">
|
||||
<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 class="boxmain" id="chart2">
|
||||
</div>
|
||||
|
|
@ -216,7 +215,7 @@
|
|||
<el-col :xs="24" :md="6">
|
||||
<div class="box">
|
||||
<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 class="boxmain" id="chart3">
|
||||
</div>
|
||||
|
|
@ -231,7 +230,7 @@
|
|||
background-image: url("https://cdn-upload.datav.aliyun.com/upload/download/1678758744858-EWBrlDVf.jpg");
|
||||
/* url("/public/img/bg.jpg"); */
|
||||
color: #fff;
|
||||
font-family: "微软雅黑" !important;
|
||||
font-family: "Microsoft Yahei" !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
|
@ -239,8 +238,13 @@
|
|||
border-bottom: none;
|
||||
/* background: url("https://cdn-upload.datav.aliyun.com/upload/download/1675143770257-pNifja_p.webp"); */
|
||||
background-size: 100% 100%;
|
||||
font-size: 28px;
|
||||
justify-content: center;
|
||||
font-size: 26px;
|
||||
display: block;
|
||||
height: 80px;
|
||||
color: rgb(149, 255, 255);
|
||||
font-family: 'Microsoft Yahei';
|
||||
text-align: center;
|
||||
padding: 12px 0px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -265,7 +269,7 @@
|
|||
|
||||
.bgimg {
|
||||
background-image: url('https://cdn-upload.datav.aliyun.com/upload/download/1678762309227-E6RP8z2R.png');
|
||||
background-size: 100% 100%;
|
||||
background-size: 140% 100%;
|
||||
}
|
||||
|
||||
.boxlabel {
|
||||
|
|
@ -329,7 +333,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
basicOption: {
|
||||
// backgroundColor: '',
|
||||
backgroundColor: '',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
|
|
@ -576,7 +580,33 @@ export default {
|
|||
chart2Option.series[0].type = 'line'
|
||||
chart2Option.series[1].type = 'line'
|
||||
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)
|
||||
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="panel_title">本月全厂主要数据</div>
|
||||
<el-row :gutter="16" style="height: 72px;margin-top: 4px">
|
||||
<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">
|
||||
<span class="panel_value">{{ factoryData.elec_consume }}</span>
|
||||
<span class="panel_unit">(kW·h)</span>
|
||||
|
|
@ -66,7 +66,8 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<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">
|
||||
<span class="panel_value">{{ sectionData.total_production }}</span>
|
||||
<span class="panel_unit">(t)</span>
|
||||
|
|
@ -82,7 +83,7 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<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">
|
||||
<span class="panel_value">{{ sectionData.coal_consume_unit }}</span>
|
||||
<span class="panel_unit">(kgce/t)</span>
|
||||
|
|
@ -137,15 +138,15 @@ import 'animate.css';
|
|||
export default {
|
||||
data() {
|
||||
return {
|
||||
query:{
|
||||
year_s:2023,
|
||||
month_s:8,
|
||||
type:'month_s',
|
||||
page:0
|
||||
query: {
|
||||
year_s: 2023,
|
||||
month_s: 8,
|
||||
type: 'month_s',
|
||||
page: 0
|
||||
},
|
||||
factoryData: {},
|
||||
sectionData: {},
|
||||
nowDay:1,
|
||||
nowDay: 1,
|
||||
initialAlpha: -Math.PI / 0.89,
|
||||
initialBeta: Math.PI / 3.3,
|
||||
initialRadius: 18,
|
||||
|
|
@ -175,12 +176,12 @@ export default {
|
|||
xAxis: {
|
||||
data: ['一月', '二月', '三月', '四月', '五月', '六月'],
|
||||
},
|
||||
yAxis: { type: 'value'},
|
||||
yAxis: { type: 'value' },
|
||||
series: [
|
||||
{
|
||||
name: '销量',
|
||||
type: 'bar',
|
||||
barwidth:10,
|
||||
barwidth: 10,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top'
|
||||
|
|
@ -211,33 +212,33 @@ export default {
|
|||
bottom: "15%"
|
||||
}
|
||||
},
|
||||
year_start:0,
|
||||
end_time:'',
|
||||
start_time:'',
|
||||
xAxisData:[],
|
||||
arrMonth:[],
|
||||
year_start: 0,
|
||||
end_time: '',
|
||||
start_time: '',
|
||||
xAxisData: [],
|
||||
arrMonth: [],
|
||||
chart1Option: {},
|
||||
chart2Option: {},
|
||||
chart3Option: {},
|
||||
chart4Option: {},
|
||||
chart5Option: {},
|
||||
chart6Option: {},
|
||||
seriesData1:[0,0,0,0,0,0],
|
||||
seriesData2:[0,0,0,0,0,0],
|
||||
seriesData3:[0,0,0,0,0,0],
|
||||
seriesData3_2:[0,0,0,0,0,0],
|
||||
seriesData4:[0,0,0,0,0,0],
|
||||
seriesData5:[0,0,0,0,0,0],
|
||||
seriesData6:[0,0,0,0,0,0],
|
||||
path:"ws://49.232.14.174:2226/ws/my/?token=",
|
||||
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'}
|
||||
seriesData1: [0, 0, 0, 0, 0, 0],
|
||||
seriesData2: [0, 0, 0, 0, 0, 0],
|
||||
seriesData3: [0, 0, 0, 0, 0, 0],
|
||||
seriesData3_2: [0, 0, 0, 0, 0, 0],
|
||||
seriesData4: [0, 0, 0, 0, 0, 0],
|
||||
seriesData5: [0, 0, 0, 0, 0, 0],
|
||||
seriesData6: [0, 0, 0, 0, 0, 0],
|
||||
path: "ws://49.232.14.174:2226/ws/my/?token=",
|
||||
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' }
|
||||
},
|
||||
}
|
||||
},
|
||||
|
|
@ -247,35 +248,35 @@ export default {
|
|||
this.addListener();
|
||||
let myDate = new Date();
|
||||
let year = myDate.getFullYear();
|
||||
let month = myDate.getMonth()+1;
|
||||
let month = myDate.getMonth() + 1;
|
||||
let day = myDate.getDate();
|
||||
that.nowDay = day;
|
||||
that.query.year_s = year;
|
||||
that.query.month_s = month;
|
||||
this.initDomStyle();
|
||||
this.$nextTick(() => {
|
||||
this.$API.enm.enstat.req({type:'month_s',month_s:month,year_s:year,page:0}).then((res1) => {
|
||||
console.log('工段数据：',res1)
|
||||
this.$API.enm.enstat.req({ type: 'month_s', month_s: month, year_s: year, page: 0 }).then((res1) => {
|
||||
console.log('工段数据：', res1)
|
||||
// debugger
|
||||
res1.forEach(item=>{
|
||||
if(item.mgroup_name=='电石渣'){
|
||||
that.mgroupValues.电石渣.total = item.total_production+'';
|
||||
that.mgroupValues.电石渣.elec=item.elec_consume_unit+'';
|
||||
}else if(item.mgroup_name=='原料磨'){
|
||||
that.mgroupValues.原料磨.total=item.total_production+'';
|
||||
that.mgroupValues.原料磨.elec=item.elec_consume_unit+'';
|
||||
}else if(item.mgroup_name=='煤磨'){
|
||||
that.mgroupValues.煤磨.total=item.total_production+'';
|
||||
that.mgroupValues.煤磨.elec=item.elec_consume_unit+'';
|
||||
}else if(item.mgroup_name=='回转窑'){
|
||||
that.mgroupValues.回转窑.total=item.total_production+'';
|
||||
that.mgroupValues.回转窑.elec=item.elec_consume_unit+'';
|
||||
}else if(item.mgroup_name=='水泥磨'){
|
||||
that.mgroupValues.水泥磨.total=item.total_production+'';
|
||||
that.mgroupValues.水泥磨.elec=item.elec_consume_unit+'';
|
||||
}else if(item.mgroup_name=='水泥包装'){
|
||||
that.mgroupValues.水泥包装.total=item.total_production+'';
|
||||
that.mgroupValues.水泥包装.elec=item.elec_consume_unit+'';
|
||||
res1.forEach(item => {
|
||||
if (item.mgroup_name == '电石渣') {
|
||||
that.mgroupValues.电石渣.total = item.total_production + '';
|
||||
that.mgroupValues.电石渣.elec = item.elec_consume_unit + '';
|
||||
} else if (item.mgroup_name == '原料磨') {
|
||||
that.mgroupValues.原料磨.total = item.total_production + '';
|
||||
that.mgroupValues.原料磨.elec = item.elec_consume_unit + '';
|
||||
} else if (item.mgroup_name == '煤磨') {
|
||||
that.mgroupValues.煤磨.total = item.total_production + '';
|
||||
that.mgroupValues.煤磨.elec = item.elec_consume_unit + '';
|
||||
} else if (item.mgroup_name == '回转窑') {
|
||||
that.mgroupValues.回转窑.total = item.total_production + '';
|
||||
that.mgroupValues.回转窑.elec = item.elec_consume_unit + '';
|
||||
} else if (item.mgroup_name == '水泥磨') {
|
||||
that.mgroupValues.水泥磨.total = item.total_production + '';
|
||||
that.mgroupValues.水泥磨.elec = item.elec_consume_unit + '';
|
||||
} else if (item.mgroup_name == '水泥包装') {
|
||||
that.mgroupValues.水泥包装.total = item.total_production + '';
|
||||
that.mgroupValues.水泥包装.elec = item.elec_consume_unit + '';
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
@ -283,29 +284,29 @@ export default {
|
|||
that.initFactory();
|
||||
}, 1000);
|
||||
});
|
||||
let month1= month>9?month:'0'+month;
|
||||
let end_time = year+'-'+month1+'-01 10:00:00';
|
||||
let year_s=year;
|
||||
if(month<6){
|
||||
year_s = year-1;
|
||||
let month1 = month > 9 ? month : '0' + month;
|
||||
let end_time = year + '-' + month1 + '-01 10:00:00';
|
||||
let year_s = year;
|
||||
if (month < 6) {
|
||||
year_s = year - 1;
|
||||
}
|
||||
let arr = [],xAxisData = [];
|
||||
let arr = [], xAxisData = [];
|
||||
let monthItem = month;
|
||||
for (let i = 0; i < 6; i++) {
|
||||
arr.push(monthItem);
|
||||
if(monthItem === 1) {
|
||||
monthItem = 12;
|
||||
} else {
|
||||
monthItem--;
|
||||
}
|
||||
arr.push(monthItem);
|
||||
if (monthItem === 1) {
|
||||
monthItem = 12;
|
||||
} else {
|
||||
monthItem--;
|
||||
}
|
||||
}
|
||||
arr.reverse();
|
||||
for(let i=0;i<6;i++){
|
||||
let item = arr[i]+'月'
|
||||
for (let i = 0; i < 6; i++) {
|
||||
let item = arr[i] + '月'
|
||||
xAxisData.push(item);
|
||||
}
|
||||
let month0= arr[0]>9?arr[0]:'0'+arr[0];
|
||||
let start_time = year_s+'-'+month0+'-01 10:00:00';
|
||||
let month0 = arr[0] > 9 ? arr[0] : '0' + arr[0];
|
||||
let start_time = year_s + '-' + month0 + '-01 10:00:00';
|
||||
that.arrMonth = arr;
|
||||
that.year_start = year_s;
|
||||
that.xAxisData = xAxisData;
|
||||
|
|
@ -325,50 +326,52 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
// 动态绑定Class
|
||||
bindClass(type){
|
||||
let classInfo = { socketDom: true, redColor: false,
|
||||
orangeColor:false, yellowColor:false, blueColor:true }
|
||||
if(type==''){
|
||||
classInfo.redColor = true
|
||||
bindClass(type) {
|
||||
let classInfo = {
|
||||
socketDom: true, redColor: false,
|
||||
orangeColor: false, yellowColor: false, blueColor: true
|
||||
}
|
||||
if (type == '') {
|
||||
classInfo.redColor = true
|
||||
}
|
||||
return classInfo
|
||||
},
|
||||
init() {
|
||||
var that = this
|
||||
// console.log(tool.cookie.get("TOKEN"))
|
||||
if(typeof(WebSocket) === "undefined"){
|
||||
alert("您的浏览器不支持socket")
|
||||
}else{
|
||||
this.ws = new WebSocket(this.path+tool.cookie.get("TOKEN"))
|
||||
//监听是否连接成功
|
||||
this.ws.onopen = ()=> {
|
||||
// console.log("socket连接成功");
|
||||
setTimeout(()=>{
|
||||
that.ws.send(JSON.stringify({'type': 'event'}))
|
||||
},500)
|
||||
// console.log(tool.cookie.get("TOKEN"))
|
||||
if (typeof (WebSocket) === "undefined") {
|
||||
alert("您的浏览器不支持socket")
|
||||
} else {
|
||||
this.ws = new WebSocket(this.path + tool.cookie.get("TOKEN"))
|
||||
//监听是否连接成功
|
||||
this.ws.onopen = () => {
|
||||
// console.log("socket连接成功");
|
||||
setTimeout(() => {
|
||||
that.ws.send(JSON.stringify({ 'type': 'event' }))
|
||||
}, 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') {
|
||||
|
||||
}
|
||||
|
||||
//接听服务器发回的信息并处理展示
|
||||
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.onerror = function(error) {
|
||||
};
|
||||
// 监听并处理error事件
|
||||
this.ws.onerror = function (error) {
|
||||
console.log('ws断开,尝试重连')
|
||||
setTimeout(()=>{
|
||||
setTimeout(() => {
|
||||
this.ws = null;
|
||||
this.init()
|
||||
}, 5000)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
getMessage(msg) {
|
||||
|
|
@ -382,42 +385,42 @@ export default {
|
|||
}
|
||||
},
|
||||
compare(property) {
|
||||
return function (a, b) {
|
||||
return a[property] - b[property];
|
||||
}
|
||||
return function (a, b) {
|
||||
return a[property] - b[property];
|
||||
}
|
||||
},
|
||||
getFactoryData() {
|
||||
var that = this;
|
||||
that.$API.enm.enstat2.req(that.query).then((res) => {
|
||||
if(res.length>0){
|
||||
that.factoryData = res[0]
|
||||
}else{}
|
||||
if (res.length > 0) {
|
||||
that.factoryData = res[0]
|
||||
} else { }
|
||||
})
|
||||
//图表数据
|
||||
let obj = {};
|
||||
obj.type = 'month_s';
|
||||
obj.start_time = that.start_time;
|
||||
obj.end_time = that.end_time;
|
||||
obj.page=0;
|
||||
obj.page = 0;
|
||||
this.$API.enm.enstat2.req(obj).then((res1) => {
|
||||
let list0 = res1.sort(this.compare('month_s'));
|
||||
let list = list0.sort(this.compare('year_s'));
|
||||
let seriesData1 = [0,0,0,0,0,0],
|
||||
seriesData2 = [0,0,0,0,0,0],
|
||||
seriesData3 = [0,0,0,0,0,0],
|
||||
seriesData3_2 = [0,0,0,0,0,0];
|
||||
list.forEach(item=>{
|
||||
let index = that.arrMonth.indexOf(item.month_s);
|
||||
seriesData1[index] = Number(item.elec_consume)
|
||||
seriesData2[index] = Number(item.pcoal_consume)
|
||||
seriesData3[index] = Number(item.water_consume)
|
||||
seriesData3_2[index] = Number(item.cair_consume)
|
||||
})
|
||||
that.seriesData1=seriesData1;
|
||||
that.seriesData2=seriesData2;
|
||||
that.seriesData3=seriesData3;
|
||||
that.seriesData3_2=seriesData3_2;
|
||||
that.initCharts();
|
||||
let list0 = res1.sort(this.compare('month_s'));
|
||||
let list = list0.sort(this.compare('year_s'));
|
||||
let seriesData1 = [0, 0, 0, 0, 0, 0],
|
||||
seriesData2 = [0, 0, 0, 0, 0, 0],
|
||||
seriesData3 = [0, 0, 0, 0, 0, 0],
|
||||
seriesData3_2 = [0, 0, 0, 0, 0, 0];
|
||||
list.forEach(item => {
|
||||
let index = that.arrMonth.indexOf(item.month_s);
|
||||
seriesData1[index] = Number(item.elec_consume)
|
||||
seriesData2[index] = Number(item.pcoal_consume)
|
||||
seriesData3[index] = Number(item.water_consume)
|
||||
seriesData3_2[index] = Number(item.cair_consume)
|
||||
})
|
||||
that.seriesData1 = seriesData1;
|
||||
that.seriesData2 = seriesData2;
|
||||
that.seriesData3 = seriesData3;
|
||||
that.seriesData3_2 = seriesData3_2;
|
||||
that.initCharts();
|
||||
})
|
||||
},
|
||||
getSectionData() {
|
||||
|
|
@ -426,35 +429,35 @@ export default {
|
|||
obj.type = 'month_s';
|
||||
obj.start_time = that.start_time;
|
||||
obj.end_time = that.end_time;
|
||||
obj.mgroup__name=that.activeSectionName;
|
||||
obj.page=0;
|
||||
obj.mgroup__name = that.activeSectionName;
|
||||
obj.page = 0;
|
||||
this.$API.enm.enstat.req(obj).then((res) => {
|
||||
let list0 = res.sort(this.compare('month_s'));
|
||||
let list = list0.sort(this.compare('year_s'));
|
||||
let seriesData4 = [0,0,0,0,0,0],
|
||||
seriesData5 = [0,0,0,0,0,0],
|
||||
seriesData6 = [0,0,0,0,0,0];
|
||||
list.forEach(item=>{
|
||||
let index = that.arrMonth.indexOf(item.month_s);
|
||||
seriesData4[index] = Number(item.elec_consume_unit)
|
||||
seriesData5[index] = Number(item.total_production)
|
||||
seriesData6[index] = Number(item.run_rate)
|
||||
let seriesData4 = [0, 0, 0, 0, 0, 0],
|
||||
seriesData5 = [0, 0, 0, 0, 0, 0],
|
||||
seriesData6 = [0, 0, 0, 0, 0, 0];
|
||||
list.forEach(item => {
|
||||
let index = that.arrMonth.indexOf(item.month_s);
|
||||
seriesData4[index] = Number(item.elec_consume_unit)
|
||||
seriesData5[index] = Number(item.total_production)
|
||||
seriesData6[index] = Number(item.run_rate)
|
||||
})
|
||||
that.seriesData4=seriesData4;
|
||||
that.seriesData5=seriesData5;
|
||||
that.seriesData6=seriesData6;
|
||||
that.seriesData4 = seriesData4;
|
||||
that.seriesData5 = seriesData5;
|
||||
that.seriesData6 = seriesData6;
|
||||
that.initCharts1();
|
||||
})
|
||||
},
|
||||
getDayData(){
|
||||
getDayData() {
|
||||
var that = this;
|
||||
let obj = {};
|
||||
obj.type = 'day_s';
|
||||
obj.year_s = that.query.year_s;
|
||||
obj.month_s = that.query.month_s;
|
||||
obj.day_s = that.nowDay;
|
||||
obj.mgroup__name=that.activeSectionName;
|
||||
obj.page=0;
|
||||
obj.mgroup__name = that.activeSectionName;
|
||||
obj.page = 0;
|
||||
this.$API.enm.enstat.req(obj).then((res) => {
|
||||
that.sectionData = res[0];
|
||||
})
|
||||
|
|
@ -466,7 +469,7 @@ export default {
|
|||
}
|
||||
// 初始化所有表格
|
||||
that.basicOption.xAxis.data = that.xAxisData;
|
||||
that.chart1Option = deepCopy(that.basicOption)
|
||||
that.chart1Option = deepCopy(that.basicOption)
|
||||
that.chart1Option.series = [
|
||||
{
|
||||
name: '电耗',
|
||||
|
|
@ -480,13 +483,13 @@ export default {
|
|||
focus: 'series'
|
||||
},
|
||||
data: that.seriesData1
|
||||
}]
|
||||
that.setChart('chart1',that.chart1Option);
|
||||
}]
|
||||
that.setChart('chart1', that.chart1Option);
|
||||
this.chart2Option = deepCopy(that.basicOption)
|
||||
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.chart3Option =deepCopy(that.basicOption)
|
||||
this.chart3Option = deepCopy(that.basicOption)
|
||||
this.chart3Option.series = [
|
||||
{
|
||||
name: '工业水',
|
||||
|
|
@ -518,17 +521,17 @@ export default {
|
|||
return JSON.parse(JSON.stringify(obj));
|
||||
}
|
||||
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].data = that.seriesData4;
|
||||
this.chart4Option.series[0].data = that.seriesData4;
|
||||
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].data = that.seriesData5;
|
||||
this.chart5Option.series[0].data = that.seriesData5;
|
||||
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].data = that.seriesData6;
|
||||
this.chart6Option.series[0].data = that.seriesData6;
|
||||
this.setChart('chart6', this.chart6Option);
|
||||
},
|
||||
addListener() {
|
||||
|
|
@ -627,10 +630,10 @@ export default {
|
|||
}
|
||||
|
||||
setTimeout(() => {
|
||||
try {
|
||||
myChart.setOption(option);
|
||||
} catch (error) {}
|
||||
}, 500)
|
||||
try {
|
||||
myChart.setOption(option);
|
||||
} catch (error) { }
|
||||
}, 500)
|
||||
},
|
||||
initFactory() {
|
||||
var that = this;
|
||||
|
|
@ -676,17 +679,17 @@ export default {
|
|||
var skyboxMaterial = new BABYLON_MATERIAL.SkyMaterial("skyMaterial", scene);
|
||||
skyboxMaterial.backFaceCulling = false;
|
||||
skybox.material = skyboxMaterial;
|
||||
/*
|
||||
* Keys:
|
||||
* - 1: Day
|
||||
* - 2: Evening
|
||||
* - 3: Increase Luminance
|
||||
* - 4: Decrease Luminance
|
||||
* - 5: Increase Turbidity
|
||||
* - 6: Decrease Turbidity
|
||||
* - 7: Move horizon to -50
|
||||
* - 8: Restore horizon to 0
|
||||
*/
|
||||
/*
|
||||
* Keys:
|
||||
* - 1: Day
|
||||
* - 2: Evening
|
||||
* - 3: Increase Luminance
|
||||
* - 4: Decrease Luminance
|
||||
* - 5: Increase Turbidity
|
||||
* - 6: Decrease Turbidity
|
||||
* - 7: Move horizon to -50
|
||||
* - 8: Restore horizon to 0
|
||||
*/
|
||||
var setSkyConfig = function (property, from, to) {
|
||||
var keys = [
|
||||
{ frame: 0, value: from },
|
||||
|
|
@ -787,14 +790,14 @@ export default {
|
|||
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);
|
||||
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=='电石渣'){
|
||||
if (value == '电石渣') {
|
||||
rect1.linkOffsetY = -200;
|
||||
var line = new BABYLON_GUI.Line();
|
||||
line.lineWidth = 4;
|
||||
|
|
@ -817,7 +820,7 @@ export default {
|
|||
// console.log('fly to')
|
||||
// 计算新的相机位置
|
||||
let position = mesh._parentNode._position
|
||||
if(mesh._parentNode.id=='__root__'){
|
||||
if (mesh._parentNode.id == '__root__') {
|
||||
position = mesh.position
|
||||
}
|
||||
const cameraPosition = new BABYLON.Vector3(
|
||||
|
|
@ -856,7 +859,7 @@ export default {
|
|||
mgroupName.shadowOffsetX = -2;
|
||||
mgroupName.shadowOffsetY = 2;
|
||||
data_view.addControl(mgroupName);
|
||||
const mgroup =new BABYLON_GUI.Rectangle('mgroup');
|
||||
const mgroup = new BABYLON_GUI.Rectangle('mgroup');
|
||||
mgroup.height = "3px";
|
||||
mgroup.width = "160px";
|
||||
mgroup.thickness = 0;
|
||||
|
|
@ -869,45 +872,45 @@ export default {
|
|||
var wd = 2;
|
||||
var hd = 2;
|
||||
for (let i = 0; i < wd; i++) {
|
||||
grid.addRowDefinition(1/wd);
|
||||
grid.addRowDefinition(1 / wd);
|
||||
}
|
||||
for (let j = 0; j < hd; j++) {
|
||||
grid.addColumnDefinition(1/hd);
|
||||
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);
|
||||
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,'关闭');
|
||||
var mgroup_close = BABYLON_GUI.Button.CreateSimpleButton("mgroup_close" + value, '关闭');
|
||||
mgroup_close.width = "70px"
|
||||
mgroup_close.height = "25px";
|
||||
mgroup_close.color = "white";
|
||||
|
|
@ -916,7 +919,7 @@ export default {
|
|||
mgroup_close.background = 'rgb(44,237,255,.5)';
|
||||
mgroup_close.HORIZONTAL_ALIGNMENT_RIGHT = 5;
|
||||
mgroup_close.onPointerClickObservable.add(() => {
|
||||
console.log('data_view',data_view)
|
||||
console.log('data_view', data_view)
|
||||
data_view.isVisible = false;
|
||||
})
|
||||
data_view.addControl(mgroup_close);
|
||||
|
|
@ -924,23 +927,23 @@ export default {
|
|||
advancedTexture.addControl(data_view);
|
||||
data_view.linkWithMesh(mesh);
|
||||
data_view.linkOffsetY = -120;
|
||||
if(value=='电石渣'){
|
||||
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;
|
||||
})
|
||||
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();
|
||||
|
|
@ -1009,7 +1012,7 @@ export default {
|
|||
if (pickResult.hit) {
|
||||
const mesh = pickResult.pickedMesh;
|
||||
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 上添加高亮效果
|
||||
highlightLayer.addMesh(mesh, new BABYLON.Color3(1, 1, 0.5));
|
||||
that.currentLightMesh = mesh;
|
||||
|
|
@ -1051,23 +1054,23 @@ export default {
|
|||
obj.type = 'month_s';
|
||||
obj.start_time = that.start_time;
|
||||
obj.end_time = that.end_time;
|
||||
obj.mgroup__name=val;
|
||||
obj.page=0;
|
||||
obj.mgroup__name = val;
|
||||
obj.page = 0;
|
||||
this.$API.enm.enstat.req(obj).then((res) => {
|
||||
let list0 = res.sort(this.compare('month_s'));
|
||||
let list = list0.sort(this.compare('year_s'));
|
||||
let seriesData4 = [0,0,0,0,0,0],
|
||||
seriesData5 = [0,0,0,0,0,0],
|
||||
seriesData6 = [0,0,0,0,0,0];
|
||||
list.forEach(item=>{
|
||||
let index = that.arrMonth.indexOf(item.month_s);
|
||||
seriesData4[index] = Number(item.elec_consume_unit)
|
||||
seriesData5[index] = Number(item.total_production)
|
||||
seriesData6[index] = Number(item.run_rate)
|
||||
let seriesData4 = [0, 0, 0, 0, 0, 0],
|
||||
seriesData5 = [0, 0, 0, 0, 0, 0],
|
||||
seriesData6 = [0, 0, 0, 0, 0, 0];
|
||||
list.forEach(item => {
|
||||
let index = that.arrMonth.indexOf(item.month_s);
|
||||
seriesData4[index] = Number(item.elec_consume_unit)
|
||||
seriesData5[index] = Number(item.total_production)
|
||||
seriesData6[index] = Number(item.run_rate)
|
||||
})
|
||||
that.seriesData4=seriesData4;
|
||||
that.seriesData5=seriesData5;
|
||||
that.seriesData6=seriesData6;
|
||||
that.seriesData4 = seriesData4;
|
||||
that.seriesData5 = seriesData5;
|
||||
that.seriesData6 = seriesData6;
|
||||
that.initCharts1();
|
||||
const element_main = document.querySelector('.right_main');
|
||||
element_main.classList.add('animate__animated', 'animate__fadeIn');
|
||||
|
|
@ -1081,35 +1084,35 @@ export default {
|
|||
// 移除属性
|
||||
element.classList.remove('animate__fadeIn');
|
||||
});
|
||||
const sectionUI = this.myui.getControlByName(val+'_rect')
|
||||
const sectionUI = this.myui.getControlByName(val + '_rect')
|
||||
sectionUI.onPointerDownObservable.notifyObservers();
|
||||
})
|
||||
|
||||
|
||||
},
|
||||
getMgroupChartData(name){
|
||||
getMgroupChartData(name) {
|
||||
var that = this;
|
||||
let obj = {};
|
||||
obj.type = 'month_s';
|
||||
obj.start_time = that.start_time;
|
||||
obj.end_time = that.end_time;
|
||||
obj.mgroup__name=name;
|
||||
obj.page=0;
|
||||
obj.mgroup__name = name;
|
||||
obj.page = 0;
|
||||
this.$API.enm.enstat.req(obj).then((res) => {
|
||||
let list0 = res.sort(this.compare('month_s'));
|
||||
let list = list0.sort(this.compare('year_s'));
|
||||
let seriesData4 = [0,0,0,0,0,0],
|
||||
seriesData5 = [0,0,0,0,0,0],
|
||||
seriesData6 = [0,0,0,0,0,0];
|
||||
list.forEach(item=>{
|
||||
let index = that.arrMonth.indexOf(item.month_s);
|
||||
seriesData4[index] = Number(item.elec_consume_unit)
|
||||
seriesData5[index] = Number(item.total_production)
|
||||
seriesData6[index] = Number(item.run_rate)
|
||||
let seriesData4 = [0, 0, 0, 0, 0, 0],
|
||||
seriesData5 = [0, 0, 0, 0, 0, 0],
|
||||
seriesData6 = [0, 0, 0, 0, 0, 0];
|
||||
list.forEach(item => {
|
||||
let index = that.arrMonth.indexOf(item.month_s);
|
||||
seriesData4[index] = Number(item.elec_consume_unit)
|
||||
seriesData5[index] = Number(item.total_production)
|
||||
seriesData6[index] = Number(item.run_rate)
|
||||
})
|
||||
that.seriesData4=seriesData4;
|
||||
that.seriesData5=seriesData5;
|
||||
that.seriesData6=seriesData6;
|
||||
that.seriesData4 = seriesData4;
|
||||
that.seriesData5 = seriesData5;
|
||||
that.seriesData6 = seriesData6;
|
||||
that.initCharts1();
|
||||
})
|
||||
},
|
||||
|
|
@ -1181,23 +1184,30 @@ header {
|
|||
justify-content: center;
|
||||
font-size: 30px;
|
||||
}
|
||||
.left_main,.right_main {
|
||||
|
||||
.left_main,
|
||||
.right_main {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.right_main {
|
||||
right: 0;
|
||||
}
|
||||
.left_other,.right_other {
|
||||
|
||||
.left_other,
|
||||
.right_other {
|
||||
position: absolute;
|
||||
top: 240px;
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
.right_other {
|
||||
right: 0
|
||||
}
|
||||
|
||||
.panel {
|
||||
padding: 4px 8px;
|
||||
overflow: auto;
|
||||
|
|
@ -1209,6 +1219,7 @@ header {
|
|||
border: 1px solid transparent;
|
||||
margin: 6px 6px;
|
||||
}
|
||||
|
||||
.panel_title {
|
||||
height: 30px;
|
||||
margin-bottom: 4px;
|
||||
|
|
@ -1216,24 +1227,29 @@ header {
|
|||
font-weight: bold;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.panel_item {
|
||||
color: #fff;
|
||||
padding: 6px;
|
||||
background: linear-gradient(40deg, rgba(11, 101, 140, 0.451), rgba(0, 34, 48, 0.335));
|
||||
}
|
||||
|
||||
.panel_label {
|
||||
font-size: 16px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.pannel_number{
|
||||
position: relative;
|
||||
|
||||
.pannel_number {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.panel_value {
|
||||
padding-left: 1em;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.panel_unit {
|
||||
right: 5px;
|
||||
color: #aebfe9;
|
||||
|
|
@ -1241,10 +1257,12 @@ header {
|
|||
text-align: right;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 220px;
|
||||
}
|
||||
|
||||
.dropdown {
|
||||
/* top: 20%;
|
||||
font-size: 18px;
|
||||
|
|
@ -1281,6 +1299,7 @@ header {
|
|||
line-height: 3.7vw;
|
||||
margin: 0 0.1vw 0.1vw 0.1vw;
|
||||
}
|
||||
|
||||
.dropdown-item:hover,
|
||||
.dropdown-item.active {
|
||||
/* background-color: #ddd; */
|
||||
|
|
@ -1295,6 +1314,4 @@ header {
|
|||
text-align: center;
|
||||
background: url(./../../../public/img/menu_active.png) no-repeat;
|
||||
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