<%@ page language="java" pageEncoding="UTF-8"%>
|
<script type="text/javascript"
|
src="https://fastly.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
|
<!-- 大屏电量显示部分 -->
|
<style>
|
.s-title {
|
font-size: 25px;
|
/*font-weight: bold;
|
text-align :center; */
|
vertical-align: middle;
|
text-align: center
|
}
|
|
datetime-local {
|
font-size: 25px;
|
}
|
</style>
|
<div class="modal fade" id="div_daping" tabindex="-1" role="dialog"
|
aria-labelledby="myModalLabel" aria-hidden="true">
|
<form class="form-horizontal" role="form">
|
<div class="modal-dialog" style="width: 75%;height=75%">
|
<div class="modal-content" style="">
|
<div class="modal-header">
|
<div class="form-group" style="margin: auto; text-align: center">
|
<span id="mdp_title"
|
style="font-size: 30px; font-weight: bold; float: left; margin-left: 5%">
|
</span> <span class="s-title">开始时间</span> <input type="datetime-local"
|
id="starttime" name="starttime" class="s-title" /> <span
|
class="s-title">结束时间</span> <input type="datetime-local"
|
id="endtime" name="endtime" class="s-title" />
|
<button type="button" class="btn btn-success btn-lg"
|
id="btn_query" onclick="chat_query()">查询</button>
|
|
<button type="button" class="btn btn-primary close"
|
data-dismiss="modal" aria-hidden="true">【关闭】</button>
|
</div>
|
</div>
|
<div class="modal-body">
|
<!-- <h3>产线每日产量报表</h3> -->
|
<div style="font-size:25px;display:flex">
|
<div class="col-lg-3">产线每日产量报表</div>
|
<div class="col-lg-9"><span id="rf_zl_info"></span></div>
|
</div>
|
<div id="container" style="height: 360px; max-width: 100%"></div>
|
<h3>产线班组每日产量报表</h3>
|
<div id="container1_" style="height: 440px; max-width: 100%"></div>
|
<!-- <div id="container2" style="height: 350px; max-width: 100%"></div> -->
|
</div>
|
<div class="modal-footer"></div>
|
</div>
|
</div>
|
</form>
|
</div>
|
|
|
<script type="text/javascript">
|
var dp_url = "/gmms2/mesview/data/_dpxiangqing_manage";
|
var p_url = "/gmms2/mesview/data/_public_manage";
|
var format = "";
|
var dom = document.getElementById('container');
|
var myChart = echarts.init(dom, null, {
|
renderer : 'canvas',
|
useDirtyRect : false
|
});
|
|
var dom1 = document.getElementById('container1_');
|
var myCharts_ = echarts.init(dom1, null, {
|
renderer : 'canvas',
|
useDirtyRect : false
|
});
|
|
function getFormat(days) {
|
format = "";
|
var nTime = new Date();
|
nTime.setDate(nTime.getDate() - days);
|
format += nTime.getFullYear() + "-";
|
format += (nTime.getMonth() + 1) < 10 ? "0" + (nTime.getMonth() + 1)
|
: (nTime.getMonth() + 1);
|
format += "-";
|
format += nTime.getDate() < 10 ? "0" + (nTime.getDate()) : (nTime
|
.getDate());
|
format += "T";
|
format += nTime.getHours() < 10 ? "0" + (nTime.getHours()) : (nTime
|
.getHours());
|
format += ":";
|
format += nTime.getMinutes() < 10 ? "0" + (nTime.getMinutes()) : (nTime
|
.getMinutes());
|
format += ":00";
|
}
|
|
var current_gongxu_banzu=[];//当前工序班组
|
|
function modalDPShow(gongxu,pT) {
|
$("#div_daping").modal('toggle');
|
$("#mdp_title").text(pT);
|
|
$.ajax({
|
type : "post",
|
dataType : "Json",
|
url : p_url,
|
data : {
|
caozuo : '查询',
|
leixing:'班组列表',
|
gongyi : gongxu
|
},
|
success : function(data) {
|
current_gongxu_banzu=[];
|
if(data.length>0){
|
for(var i =0;i<data.length;i++)
|
current_gongxu_banzu.push(data[i][0]);
|
getFormat(0);//默认开始时间
|
$("#endtime").val(format);
|
getFormat(6);//默认结束时间
|
$("#starttime").val(format);
|
myChart.resize();
|
myCharts_.resize();
|
|
chat_query();
|
}
|
else{
|
$("#CZ_Msg").modal('toggle');
|
$("#cz_Ming").html("查询");
|
$("#cz_Zhuangtai").html("");
|
$("#cz_Zhuangtai").attr("style", "color:red;");
|
$("#cz_mingxi").html("班组获取失败！");
|
return;
|
}
|
}
|
|
});
|
}
|
|
var pageTitle = $("#mdp_title").text();
|
|
var app = {};
|
//需要日期数组，每日产量数组，每日耗电数组
|
//每日班组产量数组
|
|
var qDate = [];//查询的日期集合
|
var qDianLiang = [];//查询的电量集合
|
var qChanLiang = [];//查询的产量集合
|
|
var qBanZu_Cl =[];
|
|
var total_chanliang =0;//产量总和
|
var total_dianliang =0;//电量总和
|
|
//班组-每日 产量
|
var bz_cl_0=[];
|
var bz_cl_1=[];
|
var bz_cl_2=[];
|
var bz_cl_3=[];
|
var bz_cl_4=[];
|
var bz_cl_5=[];
|
var bz_cl_6=[];
|
var bz_cl_7=[];
|
var bz_cl_8=[];
|
var bz_cl_9=[];
|
|
function initArray(){
|
qDate=[];
|
qChanLiang = [];
|
qDianLiang = []
|
bz_cl_0=[];
|
bz_cl_1=[];
|
bz_cl_2=[];
|
bz_cl_3=[];
|
bz_cl_4=[];
|
bz_cl_5=[];
|
bz_cl_6=[];
|
bz_cl_7=[];
|
bz_cl_8=[];
|
bz_cl_9=[];
|
}
|
|
function chat_query() {
|
var sTime = $("#starttime").val();
|
if (sTime == null || sTime == "") {
|
$("#CZ_Msg").modal('toggle');
|
$("#cz_Ming").html("查询");
|
$("#cz_Zhuangtai").html("");
|
$("#cz_Zhuangtai").attr("style", "color:red;");
|
$("#cz_mingxi").html("请选择查询开始时间！");
|
return;
|
}
|
|
var sDate = $("#starttime").val().substr(0, 10);
|
var eDate = $("#endtime").val().substr(0, 10);
|
|
$.ajax({
|
type : "post",
|
dataType : "Json",
|
url : dp_url,
|
data : {
|
caozuo : '产量2',
|
sDate : sDate,
|
eDate : eDate,
|
lineName : $("#mdp_title").text()
|
},
|
success : function(data) {
|
var d = data;
|
if (d.length > 0) {
|
|
initArray();
|
var cl =0;
|
total_chanliang =0;
|
total_dianliang=0;
|
|
for (var i = 0; i < d.length; i++) {
|
total_chanliang+=d[i][2];
|
if(qDate.length==0){
|
qDate.push(d[i][0]);
|
cl=d[i][2];
|
|
}else{
|
if(qDate.indexOf(d[i][0])>=0){
|
cl+=d[i][2];
|
|
|
}else{
|
qChanLiang.push(keepTwoDecimalFull(cl));
|
qDate.push(d[i][0]);
|
cl=d[i][2];
|
}
|
|
if(i==d.length-1){
|
qChanLiang.push(keepTwoDecimalFull(cl));
|
}
|
|
}
|
|
switch(current_gongxu_banzu.indexOf(d[i][1])){
|
case 0:
|
bz_cl_0.push(d[i][2]);
|
break;
|
case 1:
|
bz_cl_1.push(d[i][2]);
|
break;
|
case 2:
|
bz_cl_2.push(d[i][2]);
|
break;
|
case 3:
|
bz_cl_3.push(d[i][2]);
|
break;
|
case 4:
|
bz_cl_4.push(d[i][2]);
|
break;
|
case 5:
|
bz_cl_5.push(d[i][2]);
|
break;
|
case 6:
|
bz_cl_6.push(d[i][2]);
|
break;
|
case 7:
|
bz_cl_7.push(d[i][2]);
|
break;
|
case 8:
|
bz_cl_8.push(d[i][2]);
|
break;
|
case 9:
|
bz_cl_9.push(d[i][2]);
|
break;
|
default:
|
|
}
|
}
|
/* alert("班组1："+bz_cl_0+"\r\n班组2："+bz_cl_1+"\r\n班组3："+bz_cl_2+"\r\n班组4："+bz_cl_3
|
+"\r\n工艺班组:"+current_gongxu_banzu+"\r\n每日产量:"+qChanLiang+"\r\n查询日期："+qDate);
|
return; */
|
|
$.ajax({
|
type : "post",
|
dataType : "Json",
|
url : dp_url,
|
data : {
|
caozuo : '电量',
|
sDate : sDate,
|
eDate : eDate,
|
lineName : $("#mdp_title").text()
|
},
|
success : function(data) {
|
var d = data;
|
if (d.length > 0) {
|
queryDate = [];
|
queryDL = [];
|
avgDL=[];
|
for (var i = 0; i < d.length; i++) {
|
total_dianliang+=d[i][1];
|
qDianLiang.push(d[i][1]);
|
avgDL.push((d[i][1]/qChanLiang[i]).toFixed(2));
|
}
|
if (qDate.length < 1) {
|
return;
|
}
|
/* alert("查询日期：" + qDate +" 长度"+qDate.length+
|
"\r\n电量：" + qDianLiang+" 长度"+qDianLiang.length+
|
"\r\n产量：" + qChanLiang+" 长度"+qChanLiang.length+
|
"\r\n平均耗能："+avgDL+" 长度"+avgDL.length
|
); */
|
|
$("#rf_zl_info").html("【总产量："+keepTwoDecimalFull(total_chanliang)+" ㎡ 】【总电量："+keepTwoDecimalFull(total_dianliang)+" kwh 】【平均耗电量："+keepTwoDecimalFull(total_dianliang/total_chanliang)+" kwh/㎡】");
|
|
//产线每日产量报表
|
showChats(qDate, qDianLiang, qChanLiang,avgDL);
|
//产线班组每日产量报表
|
showBanZuChats(qDate,current_gongxu_banzu,qDianLiang);
|
}
|
|
},
|
error : function(data) {
|
|
}
|
})
|
}
|
|
},
|
error : function(data) {
|
|
}
|
})
|
}
|
|
function showChats(queryDate, queryDL, queryCL,avgDL) {
|
|
var option;
|
option = {
|
/* title : {
|
// text : '产线每日产量表',
|
text : '',
|
left : 'center',
|
subtext : '',
|
textStyle : {
|
fontSize : 35,
|
// textBorderColor:'red',
|
//textBorderWidth:1
|
}
|
}, */
|
|
|
toolbox : {
|
show : true,
|
itemSize : 30,
|
/* top:"top", */
|
/* left:"rigth", */
|
showTitle : false, // 隐藏默认文字，否则两者位置会重叠
|
feature : {
|
dataView : {
|
show : true,
|
readOnly : true,
|
title : '数据视图'
|
},
|
//magicType: { show: true, type: ['line', 'bar'] },
|
//restore: { show: true },
|
saveAsImage : {
|
show : true,
|
title : '保存为图片'
|
}
|
,magicType: { show: true, type: ['line', 'bar'] },
|
restore: { show: true },
|
},
|
tooltip : { // 和 option.tooltip 的配置项相同
|
show : true,
|
formatter : function(param) {
|
//return '<div>' + param.title + '</div>'; // 自定义的 DOM 结构
|
return param.title; // 自定义的 DOM 结构
|
},
|
textStyle : {
|
fontSize : 20
|
},
|
extraCssText : 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 自定义的 CSS 样式
|
}
|
},
|
legend:{
|
data:['产量(㎡)','单位耗能(kwh/m²)']
|
},
|
tooltip : {
|
trigger : 'axis',
|
axisPointer : {
|
type : 'cross',
|
crossStype:{
|
color:'#999'
|
|
}
|
},
|
formatter : function(params) {
|
var chanliang = params[0];
|
var nenghao = params[1];
|
if (chanliang.value != 0) {
|
return chanliang.name + '<br/>' + chanliang.seriesName
|
+ ' : ' + chanliang.value + ' m²' + '<br/>'
|
+'耗电量：'+nenghao.value+" kwh<br/>"
|
//能耗数据显示
|
//+nenghao.seriesName+' : '+nenghao.value+' kwh<br/>'
|
+ '每平方耗电 : '
|
+ (nenghao.value / chanliang.value).toFixed(2)
|
+ ' kwh/m²';
|
|
} else {
|
return chanliang.name + '<br/>' + chanliang.seriesName
|
+ ' : ' + chanliang.value + ' m²' + '<br/>'
|
|
//+nenghao.seriesName+' : '+nenghao.value+' kwh<br/>'
|
+ '每平方耗电 : 0 kwh/m²';
|
}
|
|
},
|
textStyle : {
|
fontSize : 30
|
}
|
},
|
grid : {
|
//top:'10%',
|
left : '3%',
|
right : '5%',
|
bottom : '3%',
|
containLabel : true
|
},
|
xAxis : [ {
|
type : 'category',
|
name : '日期',
|
data : queryDate,
|
axisTick : {
|
alignWithLabel : true
|
},
|
axisLabel : {
|
//interval: 50,
|
//rotate: 40,
|
textStyle : {
|
color : "#222222",
|
fontSize : 26
|
}
|
},
|
} ],
|
textStyle : {
|
fontSize : 26
|
},
|
yAxis : [ {
|
type : 'value',
|
/* name : '产量(m²)', */
|
axisLabel : {
|
//interval: 50,
|
//rotate: 40,
|
textStyle : {
|
color : "#222222",
|
fontSize : 26
|
}
|
}
|
},
|
{
|
type:'value',
|
axisLabel : {
|
//interval: 50,
|
//rotate: 40,
|
textStyle : {
|
/* color : "#222222", */
|
fontSize : 26
|
}
|
}
|
|
}],
|
series : [ {
|
name : '产量(㎡)',
|
type : 'bar',
|
//barWidth: '50%',
|
data : queryCL ,
|
markPoint : {
|
data : [
|
{type : 'max',name : 'Max'},
|
{type : 'min',name : 'Min'}
|
]
|
},
|
markLine : {
|
data : [
|
{type : 'average',name : 'Avg'}
|
]
|
}
|
}, {
|
name : '能耗',
|
type : 'bar',
|
barWidth : '1%',
|
itemStyle : {
|
borderColor : 'transparent',
|
color : 'transparent'
|
},
|
emphasis : {
|
itemStyle : {
|
borderColor : 'transparent',
|
color : 'transparent'
|
}
|
},
|
data : queryDL
|
},{
|
name:'单位耗能(kwh/m²)',
|
type:'line',
|
yAxisIndex:1,
|
data:avgDL,
|
lineStyle:{
|
width:5,
|
type:'solid'
|
}
|
|
}]
|
};
|
|
if (option && typeof option === 'object') {
|
|
myChart.setOption(option);
|
|
}
|
myChart.resize();
|
}
|
|
|
|
function showBanZuChats(queryDate,gx_banzu, queryDL) {
|
|
var option;
|
option = {
|
/* title : {
|
//text : '产线班组每日产量表',
|
text : '',
|
left : 'center',
|
subtext : '',
|
textStyle : {
|
fontSize : 35
|
}
|
}, */
|
legend:{
|
data:gx_banzu
|
},
|
calculable: true,
|
toolbox : {
|
show : true,
|
itemSize : 30,
|
showTitle : false, // 隐藏默认文字，否则两者位置会重叠
|
feature : {
|
dataView : {
|
show : true,
|
readOnly : true,
|
title : '数据视图'
|
},
|
saveAsImage : {
|
show : true,
|
title : '保存为图片'
|
}
|
,magicType: { show: true, type: ['line', 'bar'] },
|
restore: { show: true }
|
},
|
tooltip : { // 和 option.tooltip 的配置项相同
|
show : true,
|
formatter : function(param) {
|
//return '<div>' + param.title + '</div>'; // 自定义的 DOM 结构
|
return param.title; // 自定义的 DOM 结构
|
},
|
textStyle : {
|
fontSize : 20
|
},
|
extraCssText : 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);' // 自定义的 CSS 样式
|
}
|
},
|
tooltip: {
|
trigger: 'axis',
|
textStyle : {
|
fontSize : 30
|
}
|
},
|
/* tooltip : {
|
trigger : 'axis',
|
axisPointer : {
|
type : ''
|
},
|
formatter : function(params) {
|
var chanliang = params[0];
|
var nenghao = params[1];
|
if (chanliang.value != 0) {
|
return chanliang.name + '<br/>' + chanliang.seriesName
|
+ ' : ' + chanliang.value + ' m²' + '<br/>'
|
|
//能耗数据显示
|
//+nenghao.seriesName+' : '+nenghao.value+' kwh<br/>'
|
+ '每平方耗电 : '
|
+ (nenghao.value / chanliang.value).toFixed(2)
|
+ ' kwh/m²';
|
|
} else {
|
return chanliang.name + '<br/>' + chanliang.seriesName
|
+ ' : ' + chanliang.value + ' m²' + '<br/>'
|
|
//+nenghao.seriesName+' : '+nenghao.value+' kwh<br/>'
|
+ '每平方耗电 : 0 kwh/m²';
|
}
|
|
},
|
textStyle : {
|
fontSize : 30
|
}
|
}, */
|
grid : {
|
//top:'15%',
|
left : '3%',
|
right : '4%',
|
bottom : '3%',
|
containLabel : true
|
},
|
xAxis : [ {
|
type : 'category',
|
name : '日期',
|
data : queryDate,
|
axisTick : {
|
alignWithLabel : true
|
},
|
axisLabel : {
|
//interval: 50,
|
//rotate: 40,
|
textStyle : {
|
color : "#222222",
|
fontSize : 26
|
}
|
},
|
} ],
|
textStyle : {
|
fontSize : 26
|
},
|
yAxis : [ {
|
type : 'value',
|
name : '产量(m²)',
|
axisLabel : {
|
//interval: 50,
|
//rotate: 40,
|
textStyle : {
|
color : "#222222",
|
fontSize : 26
|
}
|
}
|
} ],
|
series : [ {
|
name : gx_banzu[0],
|
type : 'bar',
|
//barWidth: '50%',
|
data : bz_cl_0 ,
|
markPoint : {
|
data : [
|
{type : 'max',name : 'Max'},
|
{type : 'min',name : 'Min'}
|
]
|
},
|
markLine : {
|
data : [
|
{type : 'average',name : 'Avg'}
|
]
|
}
|
}, {
|
name : gx_banzu[1],
|
type : 'bar',
|
//barWidth: '50%',
|
data : bz_cl_1 ,
|
markPoint : {
|
data : [
|
{type : 'max',name : 'Max'},
|
{type : 'min',name : 'Min'}
|
]
|
},
|
markLine : {
|
data : [
|
{type : 'average',name : 'Avg'}
|
]
|
}
|
}, {
|
name : gx_banzu[2],
|
type : 'bar',
|
//barWidth: '50%',
|
data : bz_cl_2 ,
|
markPoint : {
|
data : [
|
{type : 'max',name : 'Max'},
|
{type : 'min',name : 'Min'}
|
]
|
},
|
markLine : {
|
data : [
|
{type : 'average',name : 'Avg'}
|
]
|
}
|
}/* , {
|
name : '能耗',
|
type : 'bar',
|
barWidth : '1%',
|
itemStyle : {
|
borderColor : 'transparent',
|
color : 'transparent'
|
},
|
emphasis : {
|
itemStyle : {
|
borderColor : 'transparent',
|
color : 'transparent'
|
}
|
},
|
data : queryDL ,
|
markPoint : {
|
data : [ {
|
name : 'Max',
|
value : 182.2,
|
xAxis : 7,
|
yAxis : 183
|
}, {
|
name : 'Min',
|
value : 2.3,
|
xAxis : 11,
|
yAxis : 3
|
}
|
]
|
},
|
markLine : {
|
data : [ {
|
type : 'average',
|
name : 'Avg'
|
} ]
|
}
|
} */]
|
};
|
|
if (option && typeof option === 'object') {
|
|
myCharts_.setOption(option);
|
}
|
myCharts_.resize();
|
}
|
|
//保留小数点后两位
|
function keepTwoDecimalFull(num) {
|
var result = parseFloat(num);
|
if (isNaN(result)) {
|
|
return;
|
}
|
result = Math.round(num * 100) / 100;
|
var s_x = result.toString();
|
var pos_decimal = s_x.indexOf('.');
|
if (pos_decimal < 0) {
|
pos_decimal = s_x.length;
|
s_x += ".";
|
|
}
|
while (s_x.length <= pos_decimal + 2) {
|
s_x += '0';
|
}
|
return s_x;
|
|
}
|
</script>
|
