583 lines
27 KiB
Plaintext
583 lines
27 KiB
Plaintext
|
<%@ page language="java" pageEncoding="UTF-8" %>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jstl/core_rt" prefix="c" %>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
|
|||
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
|||
|
|
<%@ page import="com.sipai.entity.base.ServerObject" %>
|
|||
|
|
<%@ taglib uri="http://www.springsecurity.org/jsp" prefix="security" %>
|
|||
|
|
<%@page import="com.sipai.entity.scada.MPoint" %>
|
|||
|
|
<%request.setAttribute("Flag_Enable", MPoint.Flag_Enable);%>
|
|||
|
|
<%request.setAttribute("Flag_Disable", MPoint.Flag_Disable);%>
|
|||
|
|
<!DOCTYPE html>
|
|||
|
|
<!-- <html lang="zh-CN"> -->
|
|||
|
|
<!-- BEGIN HEAD -->
|
|||
|
|
<head>
|
|||
|
|
<title><%= ServerObject.atttable.get("TOPTITLE")%>
|
|||
|
|
</title>
|
|||
|
|
|
|||
|
|
<!-- 引用页头及CSS页-->
|
|||
|
|
<jsp:include page="/jsp/inc.jsp"></jsp:include>
|
|||
|
|
<!-- echarts-->
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/echarts/echarts.4.1.0.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<!-- 引入daterangepicker-->
|
|||
|
|
<link rel="stylesheet" href="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.css"/>
|
|||
|
|
<script type="text/javascript" src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/moment.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<script type="text/javascript"
|
|||
|
|
src="<%=request.getContextPath()%>/plugins/bootstrap-daterangepicker/daterangepicker.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
<!-- bootstrap switch -->
|
|||
|
|
<link rel="stylesheet"
|
|||
|
|
href="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/css/bootstrap3/bootstrap-switch.min.css"/>
|
|||
|
|
<script type="text/javascript"
|
|||
|
|
src="<%=request.getContextPath()%>/node_modules/bootstrap-switch/dist/js/bootstrap-switch.min.js"
|
|||
|
|
charset="utf-8"></script>
|
|||
|
|
|
|||
|
|
<script type="text/javascript">
|
|||
|
|
var beginTimeStore = '';
|
|||
|
|
var endTimeStore = '';
|
|||
|
|
$(function () {
|
|||
|
|
|
|||
|
|
var tree = false;
|
|||
|
|
|
|||
|
|
//判断是否有配置
|
|||
|
|
$.post(ext.contextPath + '/efficiency/constituteConfigureScheme/getTreeJson.do', {
|
|||
|
|
unitId: unitId
|
|||
|
|
}, function (result) {
|
|||
|
|
console.log(result)
|
|||
|
|
if (result.length > 0) {
|
|||
|
|
document.getElementById('closeImage').style.display = 'block'
|
|||
|
|
document.getElementById('openImage').style.display = 'none'
|
|||
|
|
|
|||
|
|
var windowghight = $(window).height();
|
|||
|
|
$('#mainDiv').attr("style", "height:" + windowghight + "px;width:100%;padding-top:20px;");
|
|||
|
|
|
|||
|
|
beginTimeStore = moment().subtract(30, 'days').format('YYYY-MM-DD HH:mm');
|
|||
|
|
endTimeStore = moment().subtract(0, 'days').format('YYYY-MM-DD HH:mm');
|
|||
|
|
|
|||
|
|
var locale = {
|
|||
|
|
"format": 'YYYY-MM-DD HH:mm',
|
|||
|
|
"separator": "~",
|
|||
|
|
"applyLabel": "确定",
|
|||
|
|
"cancelLabel": "取消",
|
|||
|
|
"fromLabel": "起始时间",
|
|||
|
|
"toLabel": "结束时间'",
|
|||
|
|
"customRangeLabel": "自定义",
|
|||
|
|
"weekLabel": "W",
|
|||
|
|
"daysOfWeek": ["日", "一", "二", "三", "四", "五", "六"],
|
|||
|
|
"monthNames": ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
|
|||
|
|
"firstDay": 1
|
|||
|
|
};
|
|||
|
|
$('#reservationtime').daterangepicker({
|
|||
|
|
timePicker: false,
|
|||
|
|
timePicker24Hour: false,
|
|||
|
|
linkedCalendars: false,
|
|||
|
|
autoUpdateInput: false,
|
|||
|
|
showDropdowns: true,
|
|||
|
|
locale: locale,
|
|||
|
|
//汉化按钮部分
|
|||
|
|
ranges: {
|
|||
|
|
'本月': [moment().startOf('month'), moment().endOf('month').subtract(0, 'month')],
|
|||
|
|
'上月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month').subtract(0, 'month')]
|
|||
|
|
},
|
|||
|
|
startDate: beginTimeStore,
|
|||
|
|
endDate: endTimeStore
|
|||
|
|
}, function (start, end, label) {
|
|||
|
|
beginTimeStore = start.format(this.locale.format);
|
|||
|
|
endTimeStore = end.format(this.locale.format);
|
|||
|
|
if (!this.startDate) {
|
|||
|
|
this.element.val('');
|
|||
|
|
} else {
|
|||
|
|
this.element.val(this.startDate.format(this.locale.format) + this.locale.separator + this.endDate.format(this.locale.format));
|
|||
|
|
}
|
|||
|
|
// dosearch();
|
|||
|
|
});
|
|||
|
|
$('#reservationtime').val(beginTimeStore + locale.separator + endTimeStore);
|
|||
|
|
|
|||
|
|
|
|||
|
|
$("#schemeTree").empty();
|
|||
|
|
var selelct_ = $("#schemeTree").select2({
|
|||
|
|
data: result,
|
|||
|
|
cache: false,
|
|||
|
|
placeholder: '请选择',//默认文字提示
|
|||
|
|
allowClear: false,//允许清空
|
|||
|
|
escapeMarkup: function (markup) {
|
|||
|
|
return markup;
|
|||
|
|
}, // 自定义格式化防止xss注入
|
|||
|
|
language: "zh-CN",
|
|||
|
|
minimumInputLength: 0,
|
|||
|
|
minimumResultsForSearch: 10,//数据超过十个启用搜索框
|
|||
|
|
formatResult: function formatRepo(repo) {
|
|||
|
|
return repo.text;
|
|||
|
|
}, // 函数用来渲染结果
|
|||
|
|
formatSelection: function formatRepoSelection(repo) {
|
|||
|
|
return repo.text;
|
|||
|
|
} // 函数用于呈现当前的选择
|
|||
|
|
});
|
|||
|
|
$(".select2-selection--single").css({'height': '30px', 'paddingTop': '4px'})
|
|||
|
|
selelct_.val(result[0].id).trigger("change");
|
|||
|
|
selelct_.on("change", function (e) {
|
|||
|
|
dosearch();
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
dosearch();
|
|||
|
|
} else {
|
|||
|
|
document.getElementById('db').style.display = 'none'
|
|||
|
|
document.getElementById('fx').style.display = 'none'
|
|||
|
|
document.getElementById('openImage').style.display = 'block'
|
|||
|
|
document.getElementById('closeImage').style.display = 'none'
|
|||
|
|
}
|
|||
|
|
}, 'json');
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
function dosearch() {
|
|||
|
|
dodata1();
|
|||
|
|
dochart2(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
var color = [
|
|||
|
|
"#2ec7c9",
|
|||
|
|
"#b6a2de",
|
|||
|
|
"#5ab1ef",
|
|||
|
|
"#ffb980",
|
|||
|
|
"#d87a80",
|
|||
|
|
"#8d98b3",
|
|||
|
|
"#e5cf0d",
|
|||
|
|
"#97b552",
|
|||
|
|
"#95706d",
|
|||
|
|
"#dc69aa",
|
|||
|
|
"#07a2a4",
|
|||
|
|
"#9a7fd1",
|
|||
|
|
"#588dd5",
|
|||
|
|
"#f5994e",
|
|||
|
|
"#c05050",
|
|||
|
|
"#59678c",
|
|||
|
|
"#c9ab00",
|
|||
|
|
"#7eb00a",
|
|||
|
|
"#6f5553",
|
|||
|
|
"#c14089"
|
|||
|
|
];
|
|||
|
|
|
|||
|
|
var jsondata1 = ""
|
|||
|
|
|
|||
|
|
function dodata1() {
|
|||
|
|
$.post(ext.contextPath + '/efficiency/constitute/getCompanyEnergy.do', {
|
|||
|
|
unitId: unitId,
|
|||
|
|
sid:$('#schemeTree').val(),
|
|||
|
|
sdt: beginTimeStore,
|
|||
|
|
edt: endTimeStore
|
|||
|
|
}, function (result) {
|
|||
|
|
// console.log(result);
|
|||
|
|
jsondata1 = result;
|
|||
|
|
dochart1(-1);
|
|||
|
|
dotable1();
|
|||
|
|
dotable2(0);
|
|||
|
|
}, 'json');
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
let option1 = "";
|
|||
|
|
let myChart1 = "";
|
|||
|
|
|
|||
|
|
function dochart1(num) {
|
|||
|
|
var legendData = [];
|
|||
|
|
var seriesData1 = [];
|
|||
|
|
var seriesData2 = [];
|
|||
|
|
|
|||
|
|
if (num == -1) {
|
|||
|
|
for (var i = 0; i < jsondata1.length; i++) {
|
|||
|
|
legendData.push(jsondata1[i].name);
|
|||
|
|
seriesData1.push({
|
|||
|
|
value: jsondata1[i].value,
|
|||
|
|
name: jsondata1[i].name
|
|||
|
|
})
|
|||
|
|
for (var j = 0; j < jsondata1[i].children.length; j++) {
|
|||
|
|
legendData.push(jsondata1[i].children[j].name);
|
|||
|
|
seriesData2.push({
|
|||
|
|
value: jsondata1[i].children[j].value,
|
|||
|
|
name: jsondata1[i].children[j].name
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
legendData.push(jsondata1[num].name);
|
|||
|
|
seriesData1.push({
|
|||
|
|
value: jsondata1[num].value,
|
|||
|
|
name: jsondata1[num].name
|
|||
|
|
})
|
|||
|
|
for (var j = 0; j < jsondata1[num].children.length; j++) {
|
|||
|
|
legendData.push(jsondata1[num].children[j].name);
|
|||
|
|
seriesData2.push({
|
|||
|
|
value: jsondata1[num].children[j].value,
|
|||
|
|
name: jsondata1[num].children[j].name
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
myChart1 = echarts.init(document.getElementById("chart1"));
|
|||
|
|
option1 = {
|
|||
|
|
color: color,
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'item',
|
|||
|
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
|||
|
|
},
|
|||
|
|
legend: {
|
|||
|
|
show: true,
|
|||
|
|
type: 'scroll',
|
|||
|
|
orient: 'vertical',
|
|||
|
|
left: 10,
|
|||
|
|
data: legendData
|
|||
|
|
},
|
|||
|
|
series: [
|
|||
|
|
{
|
|||
|
|
name: '全厂能耗(kWh)',
|
|||
|
|
type: 'pie',
|
|||
|
|
selectedMode: 'single',
|
|||
|
|
center: ['55%', '50%'],
|
|||
|
|
radius: [0, '40%'],
|
|||
|
|
label: {
|
|||
|
|
normal: {
|
|||
|
|
position: 'inner'
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
labelLine: {
|
|||
|
|
normal: {
|
|||
|
|
show: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data: seriesData1
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
name: '全厂能耗(kWh)',
|
|||
|
|
type: 'pie',
|
|||
|
|
center: ['55%', '50%'],
|
|||
|
|
radius: ['50%', '65%'],
|
|||
|
|
// label: {
|
|||
|
|
// normal: {
|
|||
|
|
// formatter: ' {b|{b}：}\n {per|{d}%}',
|
|||
|
|
// backgroundColor: '#eee',
|
|||
|
|
// borderColor: '#aaa',
|
|||
|
|
// borderWidth: 1,
|
|||
|
|
// borderRadius: 4,
|
|||
|
|
// rich: {
|
|||
|
|
// b: {
|
|||
|
|
// fontSize: 12,
|
|||
|
|
// align: 'left',
|
|||
|
|
// lineHeight: 20
|
|||
|
|
// },
|
|||
|
|
// per: {
|
|||
|
|
// align: 'left',
|
|||
|
|
// color: '#eee',
|
|||
|
|
// backgroundColor: '#334455',
|
|||
|
|
// padding: [2, 4],
|
|||
|
|
// borderRadius: 2
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
data: seriesData2
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
};
|
|||
|
|
myChart1.setOption(option1, true);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function dochart2(num) {
|
|||
|
|
$.post(ext.contextPath + '/efficiency/constitute/getLineData.do', {
|
|||
|
|
unitId: unitId,
|
|||
|
|
sid:$('#schemeTree').val(),
|
|||
|
|
sdt: beginTimeStore,
|
|||
|
|
edt: endTimeStore,
|
|||
|
|
num: num
|
|||
|
|
}, function (result) {
|
|||
|
|
var series = [];
|
|||
|
|
var yAxis = [];
|
|||
|
|
var legenddata = [];
|
|||
|
|
|
|||
|
|
for (var i = 0; i < result.length; i++) {
|
|||
|
|
series.push({
|
|||
|
|
data: result[i].data,
|
|||
|
|
symbol: 'none',
|
|||
|
|
name: result[i].parmname,
|
|||
|
|
type: 'line',
|
|||
|
|
lineStyle: {
|
|||
|
|
width: 2
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
legenddata.push(result[i].parmname);
|
|||
|
|
}
|
|||
|
|
yAxis.push({
|
|||
|
|
type: 'value',
|
|||
|
|
name: false,
|
|||
|
|
splitLine: {
|
|||
|
|
show: false//是否显示分隔线。默认数值轴显示，类目轴不显示。
|
|||
|
|
},
|
|||
|
|
scale: true//设置成 true 后坐标刻度不会强制包含零刻度。
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var myChart = echarts.init(document.getElementById("chart2"));
|
|||
|
|
var option = {
|
|||
|
|
color: color,
|
|||
|
|
animation: false,
|
|||
|
|
legend: {
|
|||
|
|
type: 'scroll',
|
|||
|
|
data: legenddata,
|
|||
|
|
left: 'center'
|
|||
|
|
},
|
|||
|
|
grid: {
|
|||
|
|
left: '4%', // 与容器左侧的距离
|
|||
|
|
right: '4%', // 与容器右侧的距离
|
|||
|
|
top: '8%', // 与容器顶部的距离
|
|||
|
|
//bottom: '5%', // 与容器底部的距离
|
|||
|
|
containLabel: true
|
|||
|
|
},
|
|||
|
|
// toolbox: {
|
|||
|
|
// feature: {
|
|||
|
|
// saveAsImage: {show: true}
|
|||
|
|
// }
|
|||
|
|
// },
|
|||
|
|
xAxis: {
|
|||
|
|
type: 'time'
|
|||
|
|
},
|
|||
|
|
yAxis: yAxis,
|
|||
|
|
series: series,
|
|||
|
|
tooltip: {
|
|||
|
|
trigger: 'axis',
|
|||
|
|
formatter: function (params, ticket, callback) {
|
|||
|
|
var htmlStr = '';
|
|||
|
|
for (var i = 0; i < params.length; i++) {
|
|||
|
|
var param = params[i];
|
|||
|
|
// console.log(param);
|
|||
|
|
var xName = param.name;//x轴的名称
|
|||
|
|
var seriesName = param.seriesName;//图例名称
|
|||
|
|
var xvalue = param.value[0];//x轴值
|
|||
|
|
var yvalue = param.value[1];//y轴值
|
|||
|
|
var remarkvalue = param.value[2];//备注轴值
|
|||
|
|
var color = param.color;//图例颜色
|
|||
|
|
var dataIndex = param.dataIndex;
|
|||
|
|
var seriesIndex = param.seriesIndex;
|
|||
|
|
htmlStr += '<div>';
|
|||
|
|
if (i == 0) {
|
|||
|
|
htmlStr += xvalue + '<br/>';
|
|||
|
|
}
|
|||
|
|
htmlStr += '<span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:' + color + ';"></span>';
|
|||
|
|
htmlStr += seriesName + ':' + yvalue + '';
|
|||
|
|
htmlStr += '</div>';
|
|||
|
|
}
|
|||
|
|
return htmlStr;
|
|||
|
|
}
|
|||
|
|
// alwaysShowContent:true,
|
|||
|
|
},
|
|||
|
|
dataZoom: [{
|
|||
|
|
type: 'inside',
|
|||
|
|
start: 0,
|
|||
|
|
end: 100
|
|||
|
|
}, {
|
|||
|
|
start: 0,
|
|||
|
|
end: 100,
|
|||
|
|
handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
|
|||
|
|
handleSize: '60%',
|
|||
|
|
height: '25px',
|
|||
|
|
handleStyle: {
|
|||
|
|
color: '#fff',
|
|||
|
|
shadowBlur: 3,
|
|||
|
|
shadowColor: 'rgba(0, 0, 0, 0.6)',
|
|||
|
|
shadowOffsetX: 2,
|
|||
|
|
shadowOffsetY: 2
|
|||
|
|
}
|
|||
|
|
}]
|
|||
|
|
};
|
|||
|
|
// console.log(option);
|
|||
|
|
myChart.setOption(option, true);
|
|||
|
|
|
|||
|
|
}, 'json');
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function dotable1() {
|
|||
|
|
var html = "";
|
|||
|
|
html += "<table style='height:100%;width: 100%;border-collapse: collapse;'>";
|
|||
|
|
html += "<tr style='width:100%;height:40px;background-color:#E3E4E6;'>";
|
|||
|
|
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>用能单位</td>";
|
|||
|
|
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>实际值</td>";
|
|||
|
|
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>基准值</td>";
|
|||
|
|
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>节约值</td>";
|
|||
|
|
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>节约率(%)</td>";
|
|||
|
|
html += "</tr>";
|
|||
|
|
for (var i = 0; i < jsondata1.length; i++) {
|
|||
|
|
var name = jsondata1[i].name;
|
|||
|
|
if(jsondata1[i].unit!=''&&jsondata1[i].unit!=null){
|
|||
|
|
name+="("+jsondata1[i].unit+")";
|
|||
|
|
}
|
|||
|
|
var value = Number(jsondata1[i].value).toFixed(2);
|
|||
|
|
var lastvalue = Number(jsondata1[i].lastvalue).toFixed(2);
|
|||
|
|
var diffvalue = 0;
|
|||
|
|
if (lastvalue > 0) {
|
|||
|
|
diffvalue = (lastvalue - value).toFixed(2);
|
|||
|
|
}
|
|||
|
|
html += "<tr style='width:100%;height:60px;cursor:pointer;' onclick='dochange(" + i + ")'>";
|
|||
|
|
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + name + "</td> ";
|
|||
|
|
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + value + "</td> ";
|
|||
|
|
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + lastvalue + "</td> ";
|
|||
|
|
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + diffvalue + "</td> ";
|
|||
|
|
let outValue = 0;
|
|||
|
|
if (lastvalue > 0) {
|
|||
|
|
outValue = (((lastvalue - value) / lastvalue) * 100).toFixed(2);
|
|||
|
|
}
|
|||
|
|
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + outValue + "</td> ";
|
|||
|
|
html += "</tr>";
|
|||
|
|
}
|
|||
|
|
html += "</table>";
|
|||
|
|
$('#table1').html(html);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function dotable2(num) {
|
|||
|
|
// console.log(jsondata1);
|
|||
|
|
var html = "";
|
|||
|
|
html += "<table style='height:100%;width: 100%;border-collapse: collapse;'>";
|
|||
|
|
html += "<tr style='width:100%;height:40px;background-color:#E3E4E6;'>";
|
|||
|
|
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>用能单位</td>";
|
|||
|
|
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>实际值</td>";
|
|||
|
|
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>基准值</td>";
|
|||
|
|
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>节约值</td>";
|
|||
|
|
html += "<td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>节约率(%)</td>";
|
|||
|
|
html += "</tr>";
|
|||
|
|
for (var i = 0; i < jsondata1[num].children.length; i++) {
|
|||
|
|
var name = jsondata1[num].children[i].name;
|
|||
|
|
if(jsondata1[num].children[i].unit!=''&&jsondata1[num].children[i].unit!=null){
|
|||
|
|
name+="("+jsondata1[num].children[i].unit+")";
|
|||
|
|
}
|
|||
|
|
var value = Number(jsondata1[num].children[i].value).toFixed(2);
|
|||
|
|
var lastvalue = Number(jsondata1[num].children[i].lastvalue).toFixed(2);
|
|||
|
|
var diffvalue = 0;
|
|||
|
|
if (lastvalue > 0) {
|
|||
|
|
diffvalue = (lastvalue - value).toFixed(2);
|
|||
|
|
}
|
|||
|
|
html += "<tr style='width:100%;height:60px;' >";
|
|||
|
|
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;cursor:pointer;' onclick='showDetail(\"" + jsondata1[num].children[i].id + "\");'>" + name + "</td> ";
|
|||
|
|
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + value + "</td> ";
|
|||
|
|
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + lastvalue + "</td> ";
|
|||
|
|
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + diffvalue + "</td> ";
|
|||
|
|
let outValue = 0;
|
|||
|
|
if (lastvalue > 0) {
|
|||
|
|
outValue = (((lastvalue - value) / lastvalue) * 100).toFixed(2);
|
|||
|
|
}
|
|||
|
|
html += " <td align='center' style='width: 20%;border: 1px solid #e4e4e4;'>" + outValue + "</td> ";
|
|||
|
|
html += "</tr>";
|
|||
|
|
}
|
|||
|
|
html += "</table>";
|
|||
|
|
$('#table2').html(html);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function showDetail(id) {
|
|||
|
|
$.post(ext.contextPath + '/efficiency/constitute/getDetailDataView.do', {
|
|||
|
|
id: id,
|
|||
|
|
sdt: beginTimeStore,
|
|||
|
|
edt: endTimeStore
|
|||
|
|
}, function (data) {
|
|||
|
|
$("#detailDataDiv").html(data);
|
|||
|
|
openModal("detailDataModal");
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function dochange(num) {
|
|||
|
|
dochart1(num);
|
|||
|
|
dochart2(num);
|
|||
|
|
dotable2(num);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function changeOp2LIsHidden(obj) {
|
|||
|
|
var value = $(obj).val();
|
|||
|
|
if (value == '0') {
|
|||
|
|
option1.legend.show = true;
|
|||
|
|
} else {
|
|||
|
|
option1.legend.show = false;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
myChart1.setOption(option1, true);
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
<body class="hold-transition ${cu.themeclass} sidebar-mini" style="overflow: hidden;">
|
|||
|
|
<div class="box box-solid">
|
|||
|
|
<div id="mainDiv" class="box-body ">
|
|||
|
|
<div id="detailDataDiv"></div>
|
|||
|
|
<div style="width: 100%;height:45px;float: left;">
|
|||
|
|
<div class="form-group form-inline" style="padding-left:10px;">
|
|||
|
|
<div class="form-group" style="height: 40px;line-height: 40px;">
|
|||
|
|
<label class="input-lable"> 方案:</label>
|
|||
|
|
<div class="input-group " style="width: 180px;">
|
|||
|
|
<select id="schemeTree" name="schemeTree" class="select2"
|
|||
|
|
style="height: 30px;padding: 0px 10px;width: 100%;">
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group" style="height: 40px;line-height: 40px;">
|
|||
|
|
<label class="input-lable"> 日期:</label>
|
|||
|
|
<div class="input-group ">
|
|||
|
|
<div class="input-group pull-right input-group-sm">
|
|||
|
|
<div class="input-group-addon">
|
|||
|
|
<i class="fa fa-clock-o"></i>
|
|||
|
|
</div>
|
|||
|
|
<input type="text" class="form-control" id="reservationtime" style="width:225px">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group" style="height: 40px;line-height: 40px;">
|
|||
|
|
<button type="button" class="btn btn-default" onclick="dosearch();"><i class="fa fa-search"></i> 查询
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="openImage">
|
|||
|
|
<img style="width: 100%; height: 100%" src="<%=request.getContextPath()%>/IMG/nengxiaoBack.png"/>
|
|||
|
|
</div>
|
|||
|
|
<div id="closeImage" style="width: 100%;height:calc(100% - 45px);float: left;">
|
|||
|
|
<div id="db" style="width: 45%;height:100%;float: left;">
|
|||
|
|
<div style="width: 100%;height: 65%;float: left;border:1px solid gray;padding:5px;">
|
|||
|
|
<div style="width: 100%;height: 30px;float: left;background:#E3E4E6;border:1px solid #e4e4e4;line-height: 30px;font-size: 14px;font-weight:bold;padding-left: 10px;">
|
|||
|
|
<div style="width: 200px;height:100%;float: left;">
|
|||
|
|
能耗对比分析
|
|||
|
|
</div>
|
|||
|
|
<%-- <div style="width: 180px;height:100%;float: right;font-weight:400;">--%>
|
|||
|
|
<%-- <div style="width: 80px;height:100%;float: left;">图例切换</div>--%>
|
|||
|
|
<%-- <div style="width: 100px;height:100%;float: left;font-weight:400;">--%>
|
|||
|
|
<%-- <select id="op2LIsHidden" name="op2LIsHidden" class="select2"--%>
|
|||
|
|
<%-- style="height: 30px;padding: 0px 10px;"--%>
|
|||
|
|
<%-- onchange="changeOp2LIsHidden(this);">--%>
|
|||
|
|
<%-- <option value="0" selected>显示</option>--%>
|
|||
|
|
<%-- <option value="1">隐藏</option>--%>
|
|||
|
|
<%-- </select>--%>
|
|||
|
|
<%-- </div>--%>
|
|||
|
|
<%-- </div>--%>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 100%;height:calc(100% - 35px);float: left;border:1px solid #e4e4e4;margin-top: 5px;">
|
|||
|
|
<div id="chart1" style="height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 100%;height: 35%;float: left;border:1px solid gray;padding: 5px;">
|
|||
|
|
<div id="table1" style="height:100%;width: 100%;overflow:auto;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="fx" style="width: 55%;height: 100%;float: left;">
|
|||
|
|
<div style="width: 100%;height: 50%;float: left;border:1px solid gray;padding:5px;">
|
|||
|
|
<div style="width: 100%;height: 30px;float: left;background:#E3E4E6;border:1px solid #e4e4e4;line-height: 30px;font-size: 14px;font-weight:bold;padding-left: 10px;">
|
|||
|
|
能耗趋势分析
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 100%;height:calc(100% - 35px);float: left;border:1px solid #e4e4e4;margin-top: 5px;">
|
|||
|
|
<div id="chart2" style="height: 100%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="width: 100%;height: 50%;float: left;border:1px solid gray;padding:5px;">
|
|||
|
|
<div id="table2" style="height:100%;width: 100%;overflow:auto;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</body>
|
|||
|
|
</html>
|