<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page trimDirectiveWhitespaces="true"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="itheima" uri="http://itcast.cn/common/"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Smart Lighting Management System</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/vendors/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/vendors/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/assets/css/admin.css">
<script src="${pageContext.request.contextPath}/static/assets/vendors/nprogress/nprogress.js"></script>
<script src="${pageContext.request.contextPath}/static/assets/vendors/jquery/jquery.js"></script>
<script src="${pageContext.request.contextPath}/static/assets/vendors/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/bootbox.all.min.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
<script src="${pageContext.request.contextPath}/js/My97DatePicker/WdatePicker.js"></script>
<style type="text/css">
* {
font-family: Century Gothic;
}
.main {
background-image: url(${pageContext.request.contextPath}/img/BG1.jpg);
}
#green_bar{
width:100%;
height:34.2px;
background-color: #15a2b3;
}
a{
text-decoration:none;
}
/* tab栏切换area/block/floor/light部分 */
.tab_dv {
margin: 5px auto;
width: 629px;
height: 42px;
/*border: 1px solid red;*/
position: relative;
text-align:center;
}
.all_info {
margin: 20px auto;
width: 1200px;
height: 690px;
/* border: 1px solid #D7D8DA; */
/* overflow: hidden; */
}
.all_info div {
width: 1200px;
height: 815px;
/* border: 1px solid #D7D8DA; */
/*float: left;*/
display: none;
position: relative;
}
.all_info div.selected {
display: block;
}
/* 展示Area部分 */
.span_s_area_area {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 80px;
}
.span_date_area {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 905px;
}
.span_s_area_area select {
width: 145px;
height: 29px;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border: 1px solid #626462;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Century Gothic;
font-size: 12px;
color: #8D8E92;
cursor: pointer;
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
}
.span_s_area_area select option:hover {
background-color: #f80;
color: #FFB6C1;
}
/* 添加Block部分 */
.block_span {
display: inline-block;
width: 820px;
height: 650px;
/*border: 1px solid red;*/
overflow: auto;
}
.area_block {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 80px;
}
.area_block select {
width: 145px;
height: 29px;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border: 1px solid #626462;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Century Gothic;
font-size: 12px;
color: #8D8E92;
cursor: pointer;
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
}
.area_block select option:hover {
background-color: #f80;
color: #FFB6C1;
}
.span_date_block {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 905px;
}
.span_s_block {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 285px;
}
.span_s_block select {
width: 145px;
height: 29px;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border: 1px solid #626462;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Century Gothic;
font-size: 12px;
color: #8D8E92;
cursor: pointer;
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
}
.span_s_block select option:hover {
background-color: #f80;
color: #FFB6C1;
}
/* 添加floor部分 */
.area_floor {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 80px;
}
.area_floor select {
width: 145px;
height: 29px;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border: 1px solid #626462;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Century Gothic;
font-size: 12px;
color: #8D8E92;
cursor: pointer;
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
}
.area_floor select option:hover {
background-color: #f80;
color: #FFB6C1;
}
.block_floor {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 285px;
}
.block_floor select {
width: 145px;
height: 29px;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border: 1px solid #626462;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Century Gothic;
font-size: 12px;
color: #8D8E92;
cursor: pointer;
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
}
.block_floor select option:hover {
background-color: #f80;
color: #FFB6C1;
}
.floor_floor {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 492px;
}
.floor_floor select {
width: 145px;
height: 29px;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border: 1px solid #626462;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Century Gothic;
font-size: 12px;
color: #8D8E92;
cursor: pointer;
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
}
.floor_floor select option:hover {
background-color: #f80;
}
.span_date_floor {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 905px;
}
/* 添加light部分 */
.area_light {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 80px;
}
.area_light select {
width: 145px;
height: 29px;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border: 1px solid #626462;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Century Gothic;
font-size: 12px;
color: #8D8E92;
cursor: pointer;
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
}
.area_light select option:hover {
background-color: #f80;
color: #FFB6C1;
}
.block_light {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 285px;
}
.block_light select {
width: 145px;
height: 29px;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border: 1px solid #626462;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Century Gothic;
font-size: 12px;
color: #8D8E92;
cursor: pointer;
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
}
.block_light select option:hover {
background-color: #f80;
color: #FFB6C1;
}
.floor_light {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 492px;
}
.floor_light select {
width: 145px;
height: 29px;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border: 1px solid #626462;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Century Gothic;
font-size: 12px;
color: #8D8E92;
cursor: pointer;
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
}
.floor_light select option:hover {
background-color: #f80;
color: #FFB6C1;
}
.Wdate {
height: 28px;
width: 108px;
}
.light_light {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 692px;
}
.light_light select {
width: 145px;
height: 29px;
padding: 0.2em 0.4em 0.2em 0.4em;
vertical-align : middle;
border: 1px solid #626462;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: Century Gothic;
font-size: 12px;
color: #8D8E92;
cursor: pointer;
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
}
.light_light select option:hover {
background-color: #f80;
color: #FFB6C1;
}
.span_date_light {
/*margin-right: 5px;*/
position: absolute;
width: 120px;
height: 20px;
/*border: 1px solid red;*/
display: inline-block;
top: -8px;
left: 905px;
}
</style>
<script>
function today(){
var today=new Date();
var y = today.getFullYear();
var m = today.getMonth()+1;
var d = today.getDate();
return y+"-"+m+"-"+d;
}
function changeAreaDate(){
// console.log(11);
var date = $("#areaDate").val();
$("#blockDate").val(date);
$("#floorDate").val(date);
$("#lightDate").val(date);
// console.log("date",date);
drawAreaEnergyConsumption();
}
function drawEnergyConsumptionHorizontalLine(context){
var valueOfY = 800;
//判断不能越界
while(valueOfY>50){
context.beginPath();
context.moveTo(40,valueOfY+0.5);
context.lineTo(1140,valueOfY+0.5);
context.lineWidth = 1;
context.strokeStyle = "#D7D8DA";
context.stroke();
//y月往上其实值是-step
valueOfY -= 250;
}
//画y轴的坐标
context.beginPath();
context.moveTo(40.5,800);
context.lineTo(40.5,50);
context.lineWidth = 1;
context.strokeStyle = "#D7D8DA";
context.stroke();
}
// 画Hour的x轴的函数
function drawHourXMark(context){
for(var i=0;i<24;i++){
// 画刻度线
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText((i+1), 40+45*i, 312);
}
}
function drawAreaHourDayMonthTitle(context){
// Area Consumption
context.font = "24px Century Gothic";
context.fillStyle = "#4CAF50";
context.fillText("Area ", 485, 55);
context.fillText("Consumption", 550, 55);
}
function drawUnitTitleInfo(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("Month", 1112, 812);
context.fillText("Day", 1112, 562);
context.fillText("Hours", 1112, 314);
}
// 画Month的x轴的函数
function drawMonthXMark(context){
for(var i=0;i<12;i++){
// 画刻度线
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText((i+1), 40+94*i, 814);
}
}
// 画y轴能量单位方法
function drawEnergyUnitDescription(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("KW.H", 25, 48);
}
function drawHoursYMark(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("0.5", 15, 253);
context.fillText("1", 15, 208);
context.fillText("1.5", 15, 163);
context.fillText("2", 15, 118);
}
// 画Hours的Y轴的Line标线
function drawHoursYLineMarks(context){
context.beginPath();
context.moveTo(40,253-0.5);
context.lineTo(1140,253-0.5);
context.lineWidth = 1;
context.strokeStyle = "#D7D8DA";
context.stroke();
context.beginPath();
context.moveTo(40,208-0.5);
context.lineTo(1140,208-0.5);
context.stroke();
context.beginPath();
context.moveTo(40,163-0.5);
context.lineTo(1140,163-0.5);
context.stroke();
context.beginPath();
context.moveTo(40,118-0.5);
context.lineTo(1140,118-0.5);
context.stroke();
}
// 画Hours的Y轴的Line标线
function drawHoursYLineMarks(context){
context.beginPath();
context.moveTo(40,253-0.5);
context.lineTo(1140,253-0.5);
context.lineWidth = 1;
context.strokeStyle = "#D7D8DA";
context.stroke();
context.beginPath();
context.moveTo(40,208-0.5);
context.lineTo(1140,208-0.5);
context.stroke();
context.beginPath();
context.moveTo(40,163-0.5);
context.lineTo(1140,163-0.5);
context.stroke();
context.beginPath();
context.moveTo(40,118-0.5);
context.lineTo(1140,118-0.5);
context.stroke();
}
function drawDaysYMark(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("3", 15, 503);
context.fillText("6", 15, 458);
context.fillText("9", 15, 413);
context.fillText("12", 15, 368);
}
// 画Days的Y轴的Line标线
function drawDaysYLineMarks(context){
context.beginPath();
context.moveTo(40,503-0.5);
context.lineTo(1140,503-0.5);
context.lineWidth = 1;
context.strokeStyle = "#D7D8DA";
context.stroke();
context.beginPath();
context.moveTo(40,458-0.5);
context.lineTo(1140,458-0.5);
context.stroke();
context.beginPath();
context.moveTo(40,413-0.5);
context.lineTo(1140,413-0.5);
context.stroke();
context.beginPath();
context.moveTo(40,368-0.5);
context.lineTo(1140,368-0.5);
context.stroke();
}
// 画month的Y轴mark
function drawMonthsYMark(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("100", 15, 753);
context.fillText("200", 15, 708);
context.fillText("300", 15, 663);
context.fillText("400", 15, 618);
}
// 画Month的Y轴的Line标线
function drawMonthsYLineMarks(context){
context.beginPath(context);
context.moveTo(40,753-0.5);
context.lineTo(1140,753-0.5);
context.lineWidth = 1;
context.strokeStyle = "#D7D8DA";
context.stroke();
context.beginPath();
context.moveTo(40,708-0.5);
context.lineTo(1140,708-0.5);
context.stroke();
context.beginPath();
context.moveTo(40,663-0.5);
context.lineTo(1140,663-0.5);
context.stroke();
context.beginPath();
context.moveTo(40,618-0.5);
context.lineTo(1140,618-0.5);
context.stroke();
}
// 画一个月有多少天的刻度
function drawDayXMark(days,context){
for(var i=1;i<=days;i++){
//画刻度线
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText(i, 40+34*(i-1), 564);
}
}
function getCommunityDayEnergyArray(data){
var communityDayEnergyArray = new Array();
// console.log("communityDayEnergyArray before:" + communityDayEnergyArray);
// console.log("communityDayEnergyArray before length:" + communityDayEnergyArray.length);
communityDayEnergyArray[0] = data.communityMonthEnergyDTO.communityDayEnergy1;
communityDayEnergyArray[1] = data.communityMonthEnergyDTO.communityDayEnergy2;
communityDayEnergyArray[2] = data.communityMonthEnergyDTO.communityDayEnergy3;
communityDayEnergyArray[3] = data.communityMonthEnergyDTO.communityDayEnergy4;
communityDayEnergyArray[4] = data.communityMonthEnergyDTO.communityDayEnergy5;
communityDayEnergyArray[5] = data.communityMonthEnergyDTO.communityDayEnergy6;
communityDayEnergyArray[6] = data.communityMonthEnergyDTO.communityDayEnergy7;
communityDayEnergyArray[7] = data.communityMonthEnergyDTO.communityDayEnergy8;
communityDayEnergyArray[8] = data.communityMonthEnergyDTO.communityDayEnergy9;
communityDayEnergyArray[9] = data.communityMonthEnergyDTO.communityDayEnergy10;
communityDayEnergyArray[10] = data.communityMonthEnergyDTO.communityDayEnergy11;
communityDayEnergyArray[11] = data.communityMonthEnergyDTO.communityDayEnergy12;
communityDayEnergyArray[12] = data.communityMonthEnergyDTO.communityDayEnergy13;
communityDayEnergyArray[13] = data.communityMonthEnergyDTO.communityDayEnergy14;
communityDayEnergyArray[14] = data.communityMonthEnergyDTO.communityDayEnergy15;
communityDayEnergyArray[15] = data.communityMonthEnergyDTO.communityDayEnergy16;
communityDayEnergyArray[16] = data.communityMonthEnergyDTO.communityDayEnergy17;
communityDayEnergyArray[17] = data.communityMonthEnergyDTO.communityDayEnergy18;
communityDayEnergyArray[18] = data.communityMonthEnergyDTO.communityDayEnergy19;
communityDayEnergyArray[19] = data.communityMonthEnergyDTO.communityDayEnergy20;
communityDayEnergyArray[20] = data.communityMonthEnergyDTO.communityDayEnergy21;
communityDayEnergyArray[21] = data.communityMonthEnergyDTO.communityDayEnergy22;
communityDayEnergyArray[22] = data.communityMonthEnergyDTO.communityDayEnergy23;
communityDayEnergyArray[23] = data.communityMonthEnergyDTO.communityDayEnergy24;
communityDayEnergyArray[24] = data.communityMonthEnergyDTO.communityDayEnergy25;
communityDayEnergyArray[25] = data.communityMonthEnergyDTO.communityDayEnergy26;
communityDayEnergyArray[26] = data.communityMonthEnergyDTO.communityDayEnergy27;
communityDayEnergyArray[27] = data.communityMonthEnergyDTO.communityDayEnergy28;
communityDayEnergyArray[28] = data.communityMonthEnergyDTO.communityDayEnergy29;
communityDayEnergyArray[29] = data.communityMonthEnergyDTO.communityDayEnergy30;
communityDayEnergyArray[30] = data.communityMonthEnergyDTO.communityDayEnergy31;
// console.log("communityDayEnergyArray after:" + communityDayEnergyArray);
// console.log("communityDayEnergyArray after length:" + communityDayEnergyArray.length);
return communityDayEnergyArray;
}
// 画Area的Day的Consumption
function drawAreaDaysConsumption(days,communityDayEnergyArray,context){
context.lineWidth = 10;
context.strokeStyle = "#F27C1C";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#F27C1C";
for(var i=0;i<days;i++){
var j = 15*parseFloat(communityDayEnergyArray[i]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
// console.log("j:" + j);
context.beginPath();
context.moveTo(45+34*i-0.5,548);
context.lineTo(45+34*i-0.5,548-j);
context.stroke();
// console.log(j>0);
if(j>0){
var communityDayEnergyCosumption = new Number(communityDayEnergyArray[i]).toFixed(3);
// console.log("communityDayEnergyCosumption",communityDayEnergyCosumption);
context.fillText(communityDayEnergyCosumption, 45+34*i-0.5-4, 548-j-4);
}
}
}
function getCommunityHourEnergyValueArray(data){
var communityHourEnergyValueArray =new Array();
// console.log("communityHourEnergyValueArray before:" + communityHourEnergyValueArray);
// console.log("communityHourEnergyValueArray before length:" + communityHourEnergyValueArray.length);
communityHourEnergyValueArray[0] = data.communityDayEnergyValueDTO.communityHourEnergy1;
communityHourEnergyValueArray[1] = data.communityDayEnergyValueDTO.communityHourEnergy2;
communityHourEnergyValueArray[2] = data.communityDayEnergyValueDTO.communityHourEnergy3;
communityHourEnergyValueArray[3] = data.communityDayEnergyValueDTO.communityHourEnergy4;
communityHourEnergyValueArray[4] = data.communityDayEnergyValueDTO.communityHourEnergy5;
communityHourEnergyValueArray[5] = data.communityDayEnergyValueDTO.communityHourEnergy6;
communityHourEnergyValueArray[6] = data.communityDayEnergyValueDTO.communityHourEnergy7;
communityHourEnergyValueArray[7] = data.communityDayEnergyValueDTO.communityHourEnergy8;
communityHourEnergyValueArray[8] = data.communityDayEnergyValueDTO.communityHourEnergy9;
communityHourEnergyValueArray[9] = data.communityDayEnergyValueDTO.communityHourEnergy10;
communityHourEnergyValueArray[10] = data.communityDayEnergyValueDTO.communityHourEnergy11;
communityHourEnergyValueArray[11] = data.communityDayEnergyValueDTO.communityHourEnergy12;
communityHourEnergyValueArray[12] = data.communityDayEnergyValueDTO.communityHourEnergy13;
communityHourEnergyValueArray[13] = data.communityDayEnergyValueDTO.communityHourEnergy14;
communityHourEnergyValueArray[14] = data.communityDayEnergyValueDTO.communityHourEnergy15;
communityHourEnergyValueArray[15] = data.communityDayEnergyValueDTO.communityHourEnergy16;
communityHourEnergyValueArray[16] = data.communityDayEnergyValueDTO.communityHourEnergy17;
communityHourEnergyValueArray[17] = data.communityDayEnergyValueDTO.communityHourEnergy18;
communityHourEnergyValueArray[18] = data.communityDayEnergyValueDTO.communityHourEnergy19;
communityHourEnergyValueArray[19] = data.communityDayEnergyValueDTO.communityHourEnergy20;
communityHourEnergyValueArray[20] = data.communityDayEnergyValueDTO.communityHourEnergy21;
communityHourEnergyValueArray[21] = data.communityDayEnergyValueDTO.communityHourEnergy22;
communityHourEnergyValueArray[22] = data.communityDayEnergyValueDTO.communityHourEnergy23;
communityHourEnergyValueArray[23] = data.communityDayEnergyValueDTO.communityHourEnergy24;
// console.log("communityHourEnergyValueArray after:" + communityHourEnergyValueArray);
// console.log("communityHourEnergyValueArray after length:" + communityHourEnergyValueArray.length);
return communityHourEnergyValueArray;
}
function drawAreaHoursConsumption(days,communityHourEnergyValueArray,context){
context.lineWidth = 10;
context.strokeStyle = "#F4381D";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#F4381D";
for(var i=1;i<=communityHourEnergyValueArray.length;i++){
var j = 90*parseFloat(communityHourEnergyValueArray[i-1]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
// console.log("j:" + j);
context.beginPath();
context.moveTo(45*i-0.5,298);
context.lineTo(45*i-0.5,298-j);
context.stroke();
if(j>0){
var communityHourEnergyCosumption = communityHourEnergyValueArray[i-1];
context.fillText(communityHourEnergyCosumption, 45*i-0.5-4, 298-j-4);
}
}
}
function getCommunityMonthEnergyArray(data){
var communityMonthEnergyArray =new Array();
// console.log("communityMonthEnergyArray before:" + communityMonthEnergyArray);
// console.log("communityMonthEnergyArray before length:" + communityMonthEnergyArray.length);
communityMonthEnergyArray[0] = data.communityYearEnergyDTO.communityMonthEnergy1;
communityMonthEnergyArray[1] = data.communityYearEnergyDTO.communityMonthEnergy2;
communityMonthEnergyArray[2] = data.communityYearEnergyDTO.communityMonthEnergy3;
communityMonthEnergyArray[3] = data.communityYearEnergyDTO.communityMonthEnergy4;
communityMonthEnergyArray[4] = data.communityYearEnergyDTO.communityMonthEnergy5;
communityMonthEnergyArray[5] = data.communityYearEnergyDTO.communityMonthEnergy6;
communityMonthEnergyArray[6] = data.communityYearEnergyDTO.communityMonthEnergy7;
communityMonthEnergyArray[7] = data.communityYearEnergyDTO.communityMonthEnergy8;
communityMonthEnergyArray[8] = data.communityYearEnergyDTO.communityMonthEnergy9;
communityMonthEnergyArray[9] = data.communityYearEnergyDTO.communityMonthEnergy10;
communityMonthEnergyArray[10] = data.communityYearEnergyDTO.communityMonthEnergy11;
communityMonthEnergyArray[11] = data.communityYearEnergyDTO.communityMonthEnergy12;
// console.log("communityMonthEnergyArray after:" + communityMonthEnergyArray);
// console.log("communityMonthEnergyArray after length:" + communityMonthEnergyArray.length);
return communityMonthEnergyArray;
}
function drawAreaMonthConsumption(days,communityMonthEnergyArray,context){
context.lineWidth = 10;
context.strokeStyle = "#FF82AB";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#FF82AB";
for(var i=0;i<communityMonthEnergyArray.length;i++){
var j = 0.45*parseFloat(communityMonthEnergyArray[i]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
context.beginPath();
context.moveTo(45+94*i-0.5,798);
context.lineTo(45+94*i-0.5,798-j);
context.stroke();
if(j>0){
var communityMonthEnergyCosumption = communityMonthEnergyArray[i];
// console.log("communityMonthEnergyCosumption",communityMonthEnergyCosumption);
context.fillText(communityMonthEnergyCosumption, 45+94*i-0.5-4, 798-j-4);
}
}
}
function drawCurrentLevelTitleContent(context,communityOneDaySavedEnergy,communityOneMonthSavedEnergy,communityOneYearSavedEnergy){
var communityOneDaySavedEnergy = new Number(communityOneDaySavedEnergy).toFixed(0)+"KW.H";
// console.log("communityOneDaySavedEnergy:" + communityOneDaySavedEnergy);
var communityOneMonthSavedEnergy = new Number(communityOneMonthSavedEnergy).toFixed(0)+"KW.H";
// console.log("communityOneMonthSavedEnergy:" + communityOneMonthSavedEnergy);
var communityOneYearSavedEnergy = new Number(communityOneYearSavedEnergy).toFixed(0)+"KW.H";
// console.log("communityOneYearSavedEnergy:" + communityOneYearSavedEnergy);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#F4381D";
context.fillText("Saved Energy:", 850, 100);
context.fillText(communityOneDaySavedEnergy, 980, 100);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#F27C1C";
context.fillText("Saved Energy:", 850, 352);
context.fillText(communityOneMonthSavedEnergy, 980, 352);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#FF82AB";
context.fillText("Saved Energy:", 850, 600);
context.fillText(communityOneYearSavedEnergy, 980, 600);
}
function drawCommunityCanvasInfo(context,paramsStr){
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCommunityCanvasInfo.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
var days = data.communityMonthEnergyDTO.days;
// console.log("days",days);
// 画一个月有多少天的刻度
drawDayXMark(days,context);
var communityHourEnergyValueArray = getCommunityHourEnergyValueArray(data);
// console.log("communityHourEnergyValueArray",communityHourEnergyValueArray);
drawAreaHoursConsumption(days,communityHourEnergyValueArray,context);
var communityDayEnergyArray = getCommunityDayEnergyArray(data);
// console.log("communityDayEnergyArray",communityDayEnergyArray);
drawAreaDaysConsumption(days,communityDayEnergyArray,context);
var communityMonthEnergyArray = getCommunityMonthEnergyArray(data);
drawAreaMonthConsumption(days,communityMonthEnergyArray,context);
var communityOneDaySavedEnergy = data.communityOneDaySavedEnergy;
var communityOneMonthSavedEnergy = data.communityOneMonthSavedEnergy;
var communityOneYearSavedEnergy = data.communityOneYearSavedEnergy;
drawCurrentLevelTitleContent(context,communityOneDaySavedEnergy,communityOneMonthSavedEnergy,communityOneYearSavedEnergy);
}
});
}
function drawAreaEnergyConsumption(){
var communityId = $("#s_area_area option:selected").val();
communityId = parseInt(communityId);
// console.log("communityId",communityId);
var date = $("#areaDate").val();
// console.log("date",date);
var canvas = document.getElementById("areaEnergyComsumptionCanvas");
var context = canvas.getContext("2d");
context.clearRect(0,0,canvas.width,canvas.height);
drawEnergyConsumptionHorizontalLine(context);
// 画Hour的x轴的函数
drawHourXMark(context);
// 写标题信息
drawAreaHourDayMonthTitle(context);
// 画小标题信息
drawUnitTitleInfo(context);
// 画Month的x轴的函数
drawMonthXMark(context);
// 画y轴能量单位方法
drawEnergyUnitDescription(context);
// 画Hours的Y轴mark
drawHoursYMark(context);
// 画Hours的Y轴的Line标线
drawHoursYLineMarks(context);
// 画Days的Y轴mark
drawDaysYMark(context);
// 画Days的Y轴的Line标线
drawDaysYLineMarks(context);
// 画month的Y轴mark
drawMonthsYMark(context);
// 画Month的Y轴的Line标线
drawMonthsYLineMarks(context);
var areaParams = {
"communityId":communityId,
"date":date
};
// console.log("areaParams",areaParams);
var paramsStr = JSON.stringify(areaParams);
// console.log("paramsStr",paramsStr);
// 填充后台传过来的数据
drawCommunityCanvasInfo(context,paramsStr);
console.log("drawAreaEnergyConsumption()");
}
function drawBlockConsumptionTitle(context){
// Block Consumption
context.font = "24px Century Gothic";
context.fillStyle = "#4CAF50";
context.fillText("Block ", 485, 55);
context.fillText("Consumption", 556, 55);
}
// 画Block的Hours的Y轴mark
function drawHoursYMark(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("0.5", 15, 253);
context.fillText("1", 15, 208);
context.fillText("1.5", 15, 163);
context.fillText("2", 15, 118);
}
function changeBlockDate(){
// console.log(11);
var date = $("#blockDate").val();
$("#areaDate").val(date);
$("#floorDate").val(date);
$("#lightDate").val(date);
// console.log("date",date);
drawBlockEnergyConsumption();
}
function getBlockHourEnergyValueArray(data){
var blockHourEnergyValueArray =new Array();
// console.log("blockHourEnergyValueArray before:" + blockHourEnergyValueArray);
// console.log("blockHourEnergyValueArray before length:" + blockHourEnergyValueArray.length);
blockHourEnergyValueArray[0] = data.blockDayEnergyValueDTO.blockHourEnergy1;
blockHourEnergyValueArray[1] = data.blockDayEnergyValueDTO.blockHourEnergy2;
blockHourEnergyValueArray[2] = data.blockDayEnergyValueDTO.blockHourEnergy3;
blockHourEnergyValueArray[3] = data.blockDayEnergyValueDTO.blockHourEnergy4;
blockHourEnergyValueArray[4] = data.blockDayEnergyValueDTO.blockHourEnergy5;
blockHourEnergyValueArray[5] = data.blockDayEnergyValueDTO.blockHourEnergy6;
blockHourEnergyValueArray[6] = data.blockDayEnergyValueDTO.blockHourEnergy7;
blockHourEnergyValueArray[7] = data.blockDayEnergyValueDTO.blockHourEnergy8;
blockHourEnergyValueArray[8] = data.blockDayEnergyValueDTO.blockHourEnergy9;
blockHourEnergyValueArray[9] = data.blockDayEnergyValueDTO.blockHourEnergy10;
blockHourEnergyValueArray[10] = data.blockDayEnergyValueDTO.blockHourEnergy11;
blockHourEnergyValueArray[11] = data.blockDayEnergyValueDTO.blockHourEnergy12;
blockHourEnergyValueArray[12] = data.blockDayEnergyValueDTO.blockHourEnergy13;
blockHourEnergyValueArray[13] = data.blockDayEnergyValueDTO.blockHourEnergy14;
blockHourEnergyValueArray[14] = data.blockDayEnergyValueDTO.blockHourEnergy15;
blockHourEnergyValueArray[15] = data.blockDayEnergyValueDTO.blockHourEnergy16;
blockHourEnergyValueArray[16] = data.blockDayEnergyValueDTO.blockHourEnergy17;
blockHourEnergyValueArray[17] = data.blockDayEnergyValueDTO.blockHourEnergy18;
blockHourEnergyValueArray[18] = data.blockDayEnergyValueDTO.blockHourEnergy19;
blockHourEnergyValueArray[19] = data.blockDayEnergyValueDTO.blockHourEnergy20;
blockHourEnergyValueArray[20] = data.blockDayEnergyValueDTO.blockHourEnergy21;
blockHourEnergyValueArray[21] = data.blockDayEnergyValueDTO.blockHourEnergy22;
blockHourEnergyValueArray[22] = data.blockDayEnergyValueDTO.blockHourEnergy23;
blockHourEnergyValueArray[23] = data.blockDayEnergyValueDTO.blockHourEnergy24;
// console.log("blockHourEnergyValueArray after:" + blockHourEnergyValueArray);
// console.log("blockHourEnergyValueArray after length:" + blockHourEnergyValueArray.length);
return blockHourEnergyValueArray;
}
function drawBlockHoursConsumption(days,blockHourEnergyValueArray,context){
context.lineWidth = 10;
context.strokeStyle = "#F4381D";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#F4381D";
for(var i=1;i<=blockHourEnergyValueArray.length;i++){
var j = 90*parseFloat(blockHourEnergyValueArray[i-1]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
// console.log("j:" + j);
context.beginPath();
context.moveTo(45*i-0.5,298);
context.lineTo(45*i-0.5,298-j);
context.stroke();
if(j>0){
var blockHourEnergyConsumption = blockHourEnergyValueArray[i-1];
context.fillText(blockHourEnergyConsumption, 45*i-0.5-4, 298-j-4);
}
}
}
function getBlockDayEnergyArray(data){
var blockDayEnergyArray = new Array();
// console.log("blockDayEnergyArray before:" + blockDayEnergyArray);
// console.log("blockDayEnergyArray before length:" + blockDayEnergyArray.length);
blockDayEnergyArray[0] = data.blockMonthEnergyDTO.blockDayEnergy1;
blockDayEnergyArray[1] = data.blockMonthEnergyDTO.blockDayEnergy2;
blockDayEnergyArray[2] = data.blockMonthEnergyDTO.blockDayEnergy3;
blockDayEnergyArray[3] = data.blockMonthEnergyDTO.blockDayEnergy4;
blockDayEnergyArray[4] = data.blockMonthEnergyDTO.blockDayEnergy5;
blockDayEnergyArray[5] = data.blockMonthEnergyDTO.blockDayEnergy6;
blockDayEnergyArray[6] = data.blockMonthEnergyDTO.blockDayEnergy7;
blockDayEnergyArray[7] = data.blockMonthEnergyDTO.blockDayEnergy8;
blockDayEnergyArray[8] = data.blockMonthEnergyDTO.blockDayEnergy9;
blockDayEnergyArray[9] = data.blockMonthEnergyDTO.blockDayEnergy10;
blockDayEnergyArray[10] = data.blockMonthEnergyDTO.blockDayEnergy11;
blockDayEnergyArray[11] = data.blockMonthEnergyDTO.blockDayEnergy12;
blockDayEnergyArray[12] = data.blockMonthEnergyDTO.blockDayEnergy13;
blockDayEnergyArray[13] = data.blockMonthEnergyDTO.blockDayEnergy14;
blockDayEnergyArray[14] = data.blockMonthEnergyDTO.blockDayEnergy15;
blockDayEnergyArray[15] = data.blockMonthEnergyDTO.blockDayEnergy16;
blockDayEnergyArray[16] = data.blockMonthEnergyDTO.blockDayEnergy17;
blockDayEnergyArray[17] = data.blockMonthEnergyDTO.blockDayEnergy18;
blockDayEnergyArray[18] = data.blockMonthEnergyDTO.blockDayEnergy19;
blockDayEnergyArray[19] = data.blockMonthEnergyDTO.blockDayEnergy20;
blockDayEnergyArray[20] = data.blockMonthEnergyDTO.blockDayEnergy21;
blockDayEnergyArray[21] = data.blockMonthEnergyDTO.blockDayEnergy22;
blockDayEnergyArray[22] = data.blockMonthEnergyDTO.blockDayEnergy23;
blockDayEnergyArray[23] = data.blockMonthEnergyDTO.blockDayEnergy24;
blockDayEnergyArray[24] = data.blockMonthEnergyDTO.blockDayEnergy25;
blockDayEnergyArray[25] = data.blockMonthEnergyDTO.blockDayEnergy26;
blockDayEnergyArray[26] = data.blockMonthEnergyDTO.blockDayEnergy27;
blockDayEnergyArray[27] = data.blockMonthEnergyDTO.blockDayEnergy28;
blockDayEnergyArray[28] = data.blockMonthEnergyDTO.blockDayEnergy29;
blockDayEnergyArray[29] = data.blockMonthEnergyDTO.blockDayEnergy30;
blockDayEnergyArray[30] = data.blockMonthEnergyDTO.blockDayEnergy31;
// console.log("blockDayEnergyArray after:" + blockDayEnergyArray);
// console.log("blockDayEnergyArray after length:" + blockDayEnergyArray.length);
return blockDayEnergyArray;
}
// 画Block的Day的Consumption
function drawBlockDaysConsumption(days,blockDayEnergyArray,context){
context.lineWidth = 10;
context.strokeStyle = "#F27C1C";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#F27C1C";
for(var i=0;i<days;i++){
var j = 15*parseFloat(blockDayEnergyArray[i]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
// console.log("j:" + j);
context.beginPath();
context.moveTo(45+34*i-0.5,548);
context.lineTo(45+34*i-0.5,548-j);
context.stroke();
if(j>0){
var blockDayEnergyCosumption = new Number(blockDayEnergyArray[i]).toFixed(3);
// console.log("blockDayEnergyCosumption",blockDayEnergyCosumption);
context.fillText(blockDayEnergyCosumption, 45+34*i-0.5-4, 548-j-4);
}
}
}
function getBlockMonthEnergyArray(data){
var blockMonthEnergyArray = new Array();
// console.log("blockMonthEnergyArray before:" + blockMonthEnergyArray);
// console.log("blockMonthEnergyArray before length:" + blockMonthEnergyArray.length);
blockMonthEnergyArray[0] = data.blockYearEnergyDTO.blockMonthEnergy1;
blockMonthEnergyArray[1] = data.blockYearEnergyDTO.blockMonthEnergy2;
blockMonthEnergyArray[2] = data.blockYearEnergyDTO.blockMonthEnergy3;
blockMonthEnergyArray[3] = data.blockYearEnergyDTO.blockMonthEnergy4;
blockMonthEnergyArray[4] = data.blockYearEnergyDTO.blockMonthEnergy5;
blockMonthEnergyArray[5] = data.blockYearEnergyDTO.blockMonthEnergy6;
blockMonthEnergyArray[6] = data.blockYearEnergyDTO.blockMonthEnergy7;
blockMonthEnergyArray[7] = data.blockYearEnergyDTO.blockMonthEnergy8;
blockMonthEnergyArray[8] = data.blockYearEnergyDTO.blockMonthEnergy9;
blockMonthEnergyArray[9] = data.blockYearEnergyDTO.blockMonthEnergy10;
blockMonthEnergyArray[10] = data.blockYearEnergyDTO.blockMonthEnergy11;
blockMonthEnergyArray[11] = data.blockYearEnergyDTO.blockMonthEnergy12;
// console.log("blockYearEnergyArray after:" + blockYearEnergyArray);
// console.log("blockYearEnergyArray after length:" + blockYearEnergyArray.length);
return blockMonthEnergyArray;
}
function drawBlockMonthConsumption(days,blockMonthEnergyArray,context){
context.lineWidth = 10;
context.strokeStyle = "#FF82AB";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#FF82AB";
for(var i=0;i<blockMonthEnergyArray.length;i++){
var j = 0.45*parseFloat(blockMonthEnergyArray[i]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
context.beginPath();
context.moveTo(45+94*i-0.5,798);
context.lineTo(45+94*i-0.5,798-j);
context.stroke();
if(j>0){
var blockMonthEnergyCosumption = blockMonthEnergyArray[i];
// console.log("blockMonthEnergyCosumption",blockMonthEnergyCosumption);
context.fillText(blockMonthEnergyCosumption, 45+94*i-0.5-4, 798-j-4);
}
}
}
function drawBlockSavedEnergy(context,blockIdOneDaySavedEnergy,blockOneMonthSavedEnergy,blockOneYearSavedEnergy){
var blockIdOneDaySavedEnergy = new Number(blockIdOneDaySavedEnergy).toFixed(0)+"KW.H";
// console.log("blockIdOneDaySavedEnergy:" + blockIdOneDaySavedEnergy);
var blockOneMonthSavedEnergy = new Number(blockOneMonthSavedEnergy).toFixed(0)+"KW.H";
// console.log("blockOneMonthSavedEnergy:" + blockOneMonthSavedEnergy);
var blockOneYearSavedEnergy = new Number(blockOneYearSavedEnergy).toFixed(0)+"KW.H";
// console.log("blockOneYearSavedEnergy:" + blockOneYearSavedEnergy);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#F4381D";
context.fillText("Saved Energy:", 850, 100);
context.fillText(blockIdOneDaySavedEnergy, 980, 100);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#F27C1C";
context.fillText("Saved Energy:", 850, 352);
context.fillText(blockOneMonthSavedEnergy, 980, 352);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#FF82AB";
context.fillText("Saved Energy:", 850, 600);
context.fillText(blockOneYearSavedEnergy, 980, 600);
}
function drawBlockCanvasInfo(context,paramsStr){
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getBlockCanvasInfo.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
var days = data.blockMonthEnergyDTO.days;
// console.log("days",days);
// 画一个月有多少天的刻度
drawDayXMark(days,context);
var blockHourEnergyValueArray = getBlockHourEnergyValueArray(data);
// console.log("blockHourEnergyValueArray",blockHourEnergyValueArray);
drawBlockHoursConsumption(days,blockHourEnergyValueArray,context);
var blockDayEnergyArray = getBlockDayEnergyArray(data);
// console.log("blockDayEnergyArray",blockDayEnergyArray);
drawBlockDaysConsumption(days,blockDayEnergyArray,context);
var blockMonthEnergyArray = getBlockMonthEnergyArray(data);
// console.log("blockMonthEnergyArray",blockMonthEnergyArray);
drawBlockMonthConsumption(days,blockMonthEnergyArray,context);
var blockIdOneDaySavedEnergy = data.blockIdOneDaySavedEnergy;
var blockOneMonthSavedEnergy = data.blockOneMonthSavedEnergy;
var blockOneYearSavedEnergy = data.blockOneYearSavedEnergy;
drawBlockSavedEnergy(context,blockIdOneDaySavedEnergy,blockOneMonthSavedEnergy,blockOneYearSavedEnergy);
}
});
}
function getInitialFloorSelections(){
var blockId = $("#s_block_floor option:selected").val();
// console.log("blockId",blockId);
var params = {"blockId":blockId};
// console.log("params",params);
paramsStr = JSON.stringify(params);
// 初始化Area信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserFloor.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
// console.log(data);
var floorHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var floorId = item["floorId"];
var floorName = item["floorName"];
if(floorId!=null && floorId!=undefined){
floorHtml += "<option value='"+floorId+"' selected='selected'>"+floorName+"</option>";
}
}
});
// console.log(floorHtml);
$("#s_floor_floor").html(floorHtml);
drawFloorEnergyConsumption();
$("#s_floor_light").html(floorHtml);
getInitialLightSelections();
}
}
});
}
function getInitialLightSelections(){
var floorId = $("#s_floor_light option:selected").val().trim();
// console.log("floorId",floorId);
var params = {"floorId":floorId};
// console.log("params",params);
var paramsStr = params = JSON.stringify(params);
// 初始化Light信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserLight.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
// console.log(data);
var lightHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var lightId = item["lightId"];
var lightName = item["lightName"];
if(lightId!=null && lightId!=undefined){
lightHtml += "<option value='"+lightId+"' selected='selected'>"+lightName+"</option>";
}
}
});
// console.log(lightHtml);
// console.log("getInitialLightSelections()");
$("#s_light_light").html(lightHtml);
drawLightEnergyConsumption();
}
}
});
}
function getInitialBlockSelections(){
var communityId = $("#s_area_block option:selected").val().trim();
// console.log("communityId",communityId);
var params = {"communityId":communityId};
// console.log("params",params);
var paramsStr = params = JSON.stringify(params);
// 初始化Area信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserBlock.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
// console.log(data);
var blockHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var blockId = item["blockId"];
var blockName = item["blockName"];
if(blockId!=null && blockId!=undefined){
blockHtml += "<option value='"+blockId+"' selected='selected'>"+blockName+"</option>";
}
}
});
// console.log(blockHtml);
$("#s_block_block").html(blockHtml);
drawBlockEnergyConsumption();
$("#s_block_floor").html(blockHtml);
getInitialFloorSelections();
$("#s_block_light").html(blockHtml);
}
}
});
}
function changeBlockAreaSelections(communityId){
// console.log("communityId",communityId);
var params = {"communityId":communityId};
// console.log("params",params);
params = JSON.stringify(params);
// 初始化Area信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserBlock.action",
contentType:"application/json;charset=UTF-8",
data : params,
success : function(data){
// console.log(data);
var blockHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var blockId = item["blockId"];
var blockName = item["blockName"];
if(blockId!=null && blockId!=undefined){
blockHtml += "<option value='"+blockId+"' selected='selected'>"+blockName+"</option>";
}
}
});
// console.log(blockHtml);
$("#s_block_block").html(blockHtml);
drawBlockEnergyConsumption();
}
}
});
}
function getAreaSelections(){
// 初始化Area信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserCommunity.action",
contentType:"application/json;charset=UTF-8",
//data : areaParams,
success : function(data){
// console.log(data);
var areaHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
var communityId = item["communityId"];
var communityName = item["communityName"];
areaHtml += "<option value='"+communityId+"' selected='selected'>"+communityName+"</option>";
});
}
// console.log(areaHtml);
$("#s_area_area").html(areaHtml);
drawAreaEnergyConsumption();
$("#s_area_block").html(areaHtml);
$("#s_area_floor").html(areaHtml);
$("#s_area_light").html(areaHtml);
}
});
}
function drawBlockEnergyConsumption(){
var blockId = $("#s_block_block option:selected").val();
blockId = parseInt(blockId);
// console.log("blockId",blockId);
var blockDate = $("#blockDate").val();
// console.log("blockDate",blockDate);
var canvas = document.getElementById("blockEnergyComsumptionCanvas");
var context = canvas.getContext("2d");
context.clearRect(0,0,canvas.width,canvas.height);
drawEnergyConsumptionHorizontalLine(context);
// 画Hour的x轴的函数
drawHourXMark(context);
// 写标题信息
drawBlockConsumptionTitle(context);
// 画小标题信息
drawUnitTitleInfo(context);
// 画Month的x轴的函数
drawMonthXMark(context);
// 画y轴能量单位方法
drawEnergyUnitDescription(context);
// 画Hours的Y轴mark
drawHoursYMark(context);
// 画Hours的Y轴的Line标线
drawHoursYLineMarks(context);
// 画Days的Y轴mark
drawDaysYMark(context);
// 画Days的Y轴的Line标线
drawDaysYLineMarks(context);
// 画month的Y轴mark
drawMonthsYMark(context);
// 画Month的Y轴的Line标线
drawMonthsYLineMarks(context);
var blockParams = {
"blockId":blockId,
"date":blockDate
};
// console.log("blockParams",blockParams);
var paramsStr = JSON.stringify(blockParams);
// console.log("paramsStr",paramsStr);
// 填充后台传过来的数据
drawBlockCanvasInfo(context,paramsStr);
console.log("drawBlockEnergyConsumption()");
}
function changeFloorDate(){
// console.log(11);
var date = $("#floorDate").val();
$("#areaDate").val(date);
$("#blockDate").val(date);
$("#lightDate").val(date);
// console.log("date",date);
drawFloorEnergyConsumption();
}
function drawFloorConsumptionTitle(context){
// Floor Consumption
context.font = "24px Century Gothic";
context.fillStyle = "#4CAF50";
context.fillText("Floor", 485, 55);
context.fillText("Consumption", 556, 55);
}
function drawFloorHoursYMark(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("0.05", 15, 253);
context.fillText("0.1", 15, 208);
context.fillText("0.15", 15, 163);
context.fillText("0.2", 15, 118);
}
function drawFloorDaysYMark(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("1.5", 15, 503);
context.fillText("3", 15, 458);
context.fillText("4.5", 15, 413);
context.fillText("6", 15, 368);
}
function drawFloorMonthsYMark(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("20", 15, 753);
context.fillText("40", 15, 708);
context.fillText("60", 15, 663);
context.fillText("80", 15, 618);
}
function getFloorHourEnergyValueArray(data){
var floorHourEnergyValueArray =new Array();
// console.log("floorHourEnergyValueArray before:" + floorHourEnergyValueArray);
// console.log("floorHourEnergyValueArray before length:" + floorHourEnergyValueArray.length);
floorHourEnergyValueArray[0] = data.floorDayEnergyDTO.floorHourEnergy1;
floorHourEnergyValueArray[1] = data.floorDayEnergyDTO.floorHourEnergy2;
floorHourEnergyValueArray[2] = data.floorDayEnergyDTO.floorHourEnergy3;
floorHourEnergyValueArray[3] = data.floorDayEnergyDTO.floorHourEnergy4;
floorHourEnergyValueArray[4] = data.floorDayEnergyDTO.floorHourEnergy5;
floorHourEnergyValueArray[5] = data.floorDayEnergyDTO.floorHourEnergy6;
floorHourEnergyValueArray[6] = data.floorDayEnergyDTO.floorHourEnergy7;
floorHourEnergyValueArray[7] = data.floorDayEnergyDTO.floorHourEnergy8;
floorHourEnergyValueArray[8] = data.floorDayEnergyDTO.floorHourEnergy9;
floorHourEnergyValueArray[9] = data.floorDayEnergyDTO.floorHourEnergy10;
floorHourEnergyValueArray[10] = data.floorDayEnergyDTO.floorHourEnergy11;
floorHourEnergyValueArray[11] = data.floorDayEnergyDTO.floorHourEnergy12;
floorHourEnergyValueArray[12] = data.floorDayEnergyDTO.floorHourEnergy13;
floorHourEnergyValueArray[13] = data.floorDayEnergyDTO.floorHourEnergy14;
floorHourEnergyValueArray[14] = data.floorDayEnergyDTO.floorHourEnergy15;
floorHourEnergyValueArray[15] = data.floorDayEnergyDTO.floorHourEnergy16;
floorHourEnergyValueArray[16] = data.floorDayEnergyDTO.floorHourEnergy17;
floorHourEnergyValueArray[17] = data.floorDayEnergyDTO.floorHourEnergy18;
floorHourEnergyValueArray[18] = data.floorDayEnergyDTO.floorHourEnergy19;
floorHourEnergyValueArray[19] = data.floorDayEnergyDTO.floorHourEnergy20;
floorHourEnergyValueArray[20] = data.floorDayEnergyDTO.floorHourEnergy21;
floorHourEnergyValueArray[21] = data.floorDayEnergyDTO.floorHourEnergy22;
floorHourEnergyValueArray[22] = data.floorDayEnergyDTO.floorHourEnergy23;
floorHourEnergyValueArray[23] = data.floorDayEnergyDTO.floorHourEnergy24;
// console.log("floorHourEnergyValueArray after:" + floorHourEnergyValueArray);
// console.log("floorHourEnergyValueArray after length:" + floorHourEnergyValueArray.length);
return floorHourEnergyValueArray;
}
function drawFloorHoursConsumption(days,floorHourEnergyValueArray,context){
context.lineWidth = 10;
context.strokeStyle = "#F4381D";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#F4381D";
for(var i=1;i<=floorHourEnergyValueArray.length;i++){
var j = 900*parseFloat(floorHourEnergyValueArray[i-1]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
// console.log("j:" + j);
context.beginPath();
context.moveTo(45*i-0.5,298);
context.lineTo(45*i-0.5,298-j);
context.stroke();
if(j>0){
var floorHourEnergyConsumption = floorHourEnergyValueArray[i-1];
context.fillText(floorHourEnergyConsumption, 45*i-0.5-4, 298-j-4);
}
}
}
function getFloorDayEnergyArray(data){
var floorDayEnergyArray = new Array();
// console.log("floorDayEnergyArray before:" + floorDayEnergyArray);
// console.log("floorDayEnergyArray before length:" + floorDayEnergyArray.length);
floorDayEnergyArray[0] = data.floorMonthEnergyDTO.floorDayEnergy1;
floorDayEnergyArray[1] = data.floorMonthEnergyDTO.floorDayEnergy2;
floorDayEnergyArray[2] = data.floorMonthEnergyDTO.floorDayEnergy3;
floorDayEnergyArray[3] = data.floorMonthEnergyDTO.floorDayEnergy4;
floorDayEnergyArray[4] = data.floorMonthEnergyDTO.floorDayEnergy5;
floorDayEnergyArray[5] = data.floorMonthEnergyDTO.floorDayEnergy6;
floorDayEnergyArray[6] = data.floorMonthEnergyDTO.floorDayEnergy7;
floorDayEnergyArray[7] = data.floorMonthEnergyDTO.floorDayEnergy8;
floorDayEnergyArray[8] = data.floorMonthEnergyDTO.floorDayEnergy9;
floorDayEnergyArray[9] = data.floorMonthEnergyDTO.floorDayEnergy10;
floorDayEnergyArray[10] = data.floorMonthEnergyDTO.floorDayEnergy11;
floorDayEnergyArray[11] = data.floorMonthEnergyDTO.floorDayEnergy12;
floorDayEnergyArray[12] = data.floorMonthEnergyDTO.floorDayEnergy13;
floorDayEnergyArray[13] = data.floorMonthEnergyDTO.floorDayEnergy14;
floorDayEnergyArray[14] = data.floorMonthEnergyDTO.floorDayEnergy15;
floorDayEnergyArray[15] = data.floorMonthEnergyDTO.floorDayEnergy16;
floorDayEnergyArray[16] = data.floorMonthEnergyDTO.floorDayEnergy17;
floorDayEnergyArray[17] = data.floorMonthEnergyDTO.floorDayEnergy18;
floorDayEnergyArray[18] = data.floorMonthEnergyDTO.floorDayEnergy19;
floorDayEnergyArray[19] = data.floorMonthEnergyDTO.floorDayEnergy20;
floorDayEnergyArray[20] = data.floorMonthEnergyDTO.floorDayEnergy21;
floorDayEnergyArray[21] = data.floorMonthEnergyDTO.floorDayEnergy22;
floorDayEnergyArray[22] = data.floorMonthEnergyDTO.floorDayEnergy23;
floorDayEnergyArray[23] = data.floorMonthEnergyDTO.floorDayEnergy24;
floorDayEnergyArray[24] = data.floorMonthEnergyDTO.floorDayEnergy25;
floorDayEnergyArray[25] = data.floorMonthEnergyDTO.floorDayEnergy26;
floorDayEnergyArray[26] = data.floorMonthEnergyDTO.floorDayEnergy27;
floorDayEnergyArray[27] = data.floorMonthEnergyDTO.floorDayEnergy28;
floorDayEnergyArray[28] = data.floorMonthEnergyDTO.floorDayEnergy29;
floorDayEnergyArray[29] = data.floorMonthEnergyDTO.floorDayEnergy30;
floorDayEnergyArray[30] = data.floorMonthEnergyDTO.floorDayEnergy31;
// console.log("floorDayEnergyArray after:" + floorDayEnergyArray);
// console.log("floorDayEnergyArray after length:" + floorDayEnergyArray.length);
return floorDayEnergyArray;
}
function drawFloorDaysConsumption(days,floorDayEnergyArray,context){
context.lineWidth = 10;
context.strokeStyle = "#F27C1C";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#F27C1C";
for(var i=0;i<days;i++){
var j = 30*parseFloat(floorDayEnergyArray[i]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
// console.log("j:" + j);
context.beginPath();
context.moveTo(45+34*i-0.5,548);
context.lineTo(45+34*i-0.5,548-j);
context.stroke();
if(j>0){
var floorDayEnergyCosumption = new Number(floorDayEnergyArray[i]).toFixed(3);
// console.log("floorDayEnergyCosumption",floorDayEnergyCosumption);
context.fillText(floorDayEnergyCosumption, 45+34*i-0.5-4, 548-j-4);
}
}
}
function getFloorMonthEnergyArray(data){
var floorMonthEnergyArray = new Array();
// console.log("floorMonthEnergyArray before:" + floorMonthEnergyArray);
// console.log("floorMonthEnergyArray before length:" + floorMonthEnergyArray.length);
floorMonthEnergyArray[0] = data.floorYearEnergyDTO.floorMonthEnergy1;
floorMonthEnergyArray[1] = data.floorYearEnergyDTO.floorMonthEnergy2;
floorMonthEnergyArray[2] = data.floorYearEnergyDTO.floorMonthEnergy3;
floorMonthEnergyArray[3] = data.floorYearEnergyDTO.floorMonthEnergy4;
floorMonthEnergyArray[4] = data.floorYearEnergyDTO.floorMonthEnergy5;
floorMonthEnergyArray[5] = data.floorYearEnergyDTO.floorMonthEnergy6;
floorMonthEnergyArray[6] = data.floorYearEnergyDTO.floorMonthEnergy7;
floorMonthEnergyArray[7] = data.floorYearEnergyDTO.floorMonthEnergy8;
floorMonthEnergyArray[8] = data.floorYearEnergyDTO.floorMonthEnergy9;
floorMonthEnergyArray[9] = data.floorYearEnergyDTO.floorMonthEnergy10;
floorMonthEnergyArray[10] = data.floorYearEnergyDTO.floorMonthEnergy11;
floorMonthEnergyArray[11] = data.floorYearEnergyDTO.floorMonthEnergy12;
// console.log("floorMonthEnergyArray after:" + floorMonthEnergyArray);
// console.log("floorMonthEnergyArray after length:" + floorMonthEnergyArray.length);
return floorMonthEnergyArray;
}
function drawFloorMonthConsumption(days,floorMonthEnergyArray,context){
context.lineWidth = 10;
context.strokeStyle = "#FF82AB";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#FF82AB";
for(var i=0;i<floorMonthEnergyArray.length;i++){
var j = 2.25*parseFloat(floorMonthEnergyArray[i]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
context.beginPath();
context.moveTo(45+94*i-0.5,798);
context.lineTo(45+94*i-0.5,798-j);
context.stroke();
if(j>0){
var floorMonthEnergyCosumption = floorMonthEnergyArray[i];
// console.log("floorMonthEnergyCosumption",floorMonthEnergyCosumption);
context.fillText(floorMonthEnergyCosumption, 45+94*i-0.5-4, 798-j-4);
}
}
}
function drawFloorSavedEnergy(context,floorOneDaySavedEnergy,floorOneMonthSavedEnergy,floorOneYearSavedEnergy){
var floorOneDaySavedEnergy = new Number(floorOneDaySavedEnergy).toFixed(0)+"KW.H";
// console.log("floorOneDaySavedEnergy:" + floorOneDaySavedEnergy);
var floorOneMonthSavedEnergy = new Number(floorOneMonthSavedEnergy).toFixed(0)+"KW.H";
// console.log("floorOneMonthSavedEnergy:" + floorOneMonthSavedEnergy);
var floorOneYearSavedEnergy = new Number(floorOneYearSavedEnergy).toFixed(0)+"KW.H";
// console.log("floorOneYearSavedEnergy:" + floorOneYearSavedEnergy);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#F4381D";
context.fillText("Saved Energy:", 850, 100);
context.fillText(floorOneDaySavedEnergy, 980, 100);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#F27C1C";
context.fillText("Saved Energy:", 850, 352);
context.fillText(floorOneMonthSavedEnergy, 980, 352);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#FF82AB";
context.fillText("Saved Energy:", 850, 600);
context.fillText(floorOneYearSavedEnergy, 980, 600);
}
function drawFloorCanvasInfo(context,paramsStr){
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getFloorCanvasInfo.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
var days = data.floorMonthEnergyDTO.days;
// console.log("days",days);
// 画一个月有多少天的刻度
drawDayXMark(days,context);
var floorHourEnergyValueArray = getFloorHourEnergyValueArray(data);
// console.log("floorHourEnergyValueArray",floorHourEnergyValueArray);
drawFloorHoursConsumption(days,floorHourEnergyValueArray,context);
var floorDayEnergyArray = getFloorDayEnergyArray(data);
// console.log("floorDayEnergyArray",floorDayEnergyArray);
drawFloorDaysConsumption(days,floorDayEnergyArray,context);
var floorMonthEnergyArray = getFloorMonthEnergyArray(data);
// console.log("floorMonthEnergyArray",floorMonthEnergyArray);
drawFloorMonthConsumption(days,floorMonthEnergyArray,context);
var floorOneDaySavedEnergy = data.floorOneDaySavedEnergy;
var floorOneMonthSavedEnergy = data.floorOneMonthSavedEnergy;
var floorOneYearSavedEnergy = data.floorOneYearSavedEnergy;
drawFloorSavedEnergy(context,floorOneDaySavedEnergy,floorOneMonthSavedEnergy,floorOneYearSavedEnergy);
}
});
}
function changeFloorAreaSelections(communityId){
// console.log("communityId",communityId);
var params = {"communityId":communityId};
// console.log("params",params);
params = JSON.stringify(params);
// 初始化Area信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserBlock.action",
contentType:"application/json;charset=UTF-8",
data : params,
success : function(data){
// console.log(data);
var blockHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var blockId = item["blockId"];
var blockName = item["blockName"];
if(blockId!=null && blockId!=undefined){
blockHtml += "<option value='"+blockId+"' selected='selected'>"+blockName+"</option>";
}
}
});
// console.log(blockHtml);
$("#s_block_floor").html(blockHtml);
getCurrentFloorSelections();
}
}
});
}
function getCurrentFloorSelections(){
var blockId = $("#s_block_floor option:selected").val();
// console.log("blockId",blockId);
var params = {"blockId":blockId};
// console.log("params",params);
paramsStr = JSON.stringify(params);
// 初始化Area信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserFloor.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
// console.log(data);
var floorHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var floorId = item["floorId"];
var floorName = item["floorName"];
if(floorId!=null && floorId!=undefined){
floorHtml += "<option value='"+floorId+"' selected='selected'>"+floorName+"</option>";
}
}
});
// console.log(floorHtml);
$("#s_floor_floor").html(floorHtml);
drawFloorEnergyConsumption();
}
}
});
}
function changeFloorBlockSelections(blockId){
// console.log("blockId",blockId);
var params = {"blockId":blockId};
// console.log("params",params);
var paramsStr = JSON.stringify(params);
// 初始化Area信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserFloor.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
// console.log(data);
var floorHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var floorId = item["floorId"];
var floorName = item["floorName"];
if(floorId!=null && floorId!=undefined){
floorHtml += "<option value='"+floorId+"' selected='selected'>"+floorName+"</option>";
}
}
});
}
// console.log(floorHtml);
// $("#s_floor_light").html(floorHtml);
$("#s_floor_floor").html(floorHtml);
drawFloorEnergyConsumption();
}
});
}
function drawFloorEnergyConsumption(){
var floorId = $("#s_floor_floor option:selected").val();
floorId = parseInt(floorId);
// console.log("floorId",floorId);
var floorDate = $("#floorDate").val();
// console.log("floorDate",floorDate);
var canvas = document.getElementById("floorEnergyComsumptionCanvas");
var context = canvas.getContext("2d");
context.clearRect(0,0,canvas.width,canvas.height);
drawEnergyConsumptionHorizontalLine(context);
// 画Hour的x轴的函数
drawHourXMark(context);
// 写标题信息
drawFloorConsumptionTitle(context);
// 画小标题信息
drawUnitTitleInfo(context);
// 画Month的x轴的函数
drawMonthXMark(context);
// 画y轴能量单位方法
drawEnergyUnitDescription(context);
// 画Floor的Hours的Y轴mark
drawFloorHoursYMark(context);
// 画Hours的Y轴的Line标线
drawHoursYLineMarks(context);
// 画Floor的Days的Y轴mark
drawFloorDaysYMark(context);
// 画Block的Days的Y轴的Line标线
drawDaysYLineMarks(context);
// 画Floor的month的Y轴mark
drawFloorMonthsYMark(context);
// 画Month的Y轴的Line标线
drawMonthsYLineMarks(context);
var floorParams = {
"floorId":floorId,
"date":floorDate
};
// console.log("floorParams",floorParams);
var paramsStr = JSON.stringify(floorParams);
// console.log("paramsStr",paramsStr);
// 填充后台传过来的数据
drawFloorCanvasInfo(context,paramsStr);
console.log("drawFloorEnergyConsumption()");
}
function drawLightConsumptionTitle(context){
// Light Consumption
context.font = "24px Century Gothic";
context.fillStyle = "#4CAF50";
context.fillText("Light", 488, 55);
context.fillText("Consumption", 552, 55);
}
function drawLightHoursYMark(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("0.005", 5, 253);
context.fillText("0.01", 5, 208);
context.fillText("0.015", 5, 163);
context.fillText("0.02", 5, 118);
}
function drawLightDaysYMark(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("0.1", 15, 503);
context.fillText("0.2", 15, 458);
context.fillText("0.3", 15, 413);
context.fillText("0.4", 15, 368);
}
function drawLightMonthsYMark(context){
context.font = "12px Century Gothic";
context.fillStyle = "#2f4050";
context.fillText("3", 15, 753);
context.fillText("6", 15, 708);
context.fillText("9", 15, 663);
context.fillText("12", 15, 618);
}
function changeLightAreaSelections(communityId){
// console.log("communityId",communityId);
var params = {"communityId":communityId};
// console.log("params",params);
var paramsStr = JSON.stringify(params);
// 初始化Area信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserBlock.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
// console.log(data);
var blockHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var blockId = item["blockId"];
var blockName = item["blockName"];
if(blockId!=null && blockId!=undefined){
blockHtml += "<option value='"+blockId+"' selected='selected'>"+blockName+"</option>";
}
}
});
// console.log(blockHtml);
// console.log("changeLightAreaSelections()");
$("#s_block_light").html(blockHtml);
getLightCurrentFloorSelections();
}
}
});
}
function getLightCurrentFloorSelections(){
var blockId = $("#s_block_light option:selected").val();
// console.log("blockId",blockId);
var params = {"blockId":blockId};
// console.log("params",params);
paramsStr = JSON.stringify(params);
// 初始化Area信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserFloor.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
// console.log(data);
var floorHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var floorId = item["floorId"];
var floorName = item["floorName"];
if(floorId!=null && floorId!=undefined){
floorHtml += "<option value='"+floorId+"' selected='selected'>"+floorName+"</option>";
}
}
});
// console.log(floorHtml);
// console.log("getLightCurrentFloorSelections()");
$("#s_floor_light").html(floorHtml);
getInitialLightSelections();
}
}
});
}
function changeLightBlockSelections(blockId){
// console.log("blockId",blockId);
var params = {"blockId":blockId};
// console.log("params",params);
var paramsStr = JSON.stringify(params);
// 初始化Area信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserFloor.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
// console.log(data);
var floorHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var floorId = item["floorId"];
var floorName = item["floorName"];
if(floorId!=null && floorId!=undefined){
floorHtml += "<option value='"+floorId+"' selected='selected'>"+floorName+"</option>";
}
}
});
}
// console.log(floorHtml);
// console.log("changeLightBlockSelections(blockId)");
$("#s_floor_light").html(floorHtml);
getInitialLightSelections();
}
});
}
function changeLightFloorSelections(floorId){
var params = {"floorId":floorId};
// console.log("params",params);
var paramsStr = params = JSON.stringify(params);
// 初始化Light信息
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getCurrentUserLight.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
// console.log(data);
var lightHtml = "";
if(data!=null && data.length>0){
$(data).each(function(index,item){
if(item){
var lightId = item["lightId"];
var lightName = item["lightName"];
if(lightId!=null && lightId!=undefined){
lightHtml += "<option value='"+lightId+"' selected='selected'>"+lightName+"</option>";
}
}
});
// console.log(lightHtml);
// console.log("changeLightFloorSelections("+floorId+")");
$("#s_light_light").html(lightHtml);
drawLightEnergyConsumption();
}
}
});
}
function changeLightDate(){
// console.log(11);
var date = $("#lightDate").val();
$("#areaDate").val(date);
$("#blockDate").val(date);
$("#floorDate").val(date);
// console.log("date",date);
drawLightEnergyConsumption();
}
function getLightHourEnergyValueArray(data){
var lightHourEnergyValueArray = new Array();
// console.log("lightHourEnergyValueArray before:" + lightHourEnergyValueArray);
// console.log("lightHourEnergyValueArray before length:" + lightHourEnergyValueArray.length);
lightHourEnergyValueArray[0] = data.energyDTO.hourEnergy1;
lightHourEnergyValueArray[1] = data.energyDTO.hourEnergy2;
lightHourEnergyValueArray[2] = data.energyDTO.hourEnergy3;
lightHourEnergyValueArray[3] = data.energyDTO.hourEnergy4;
lightHourEnergyValueArray[4] = data.energyDTO.hourEnergy5;
lightHourEnergyValueArray[5] = data.energyDTO.hourEnergy6;
lightHourEnergyValueArray[6] = data.energyDTO.hourEnergy7;
lightHourEnergyValueArray[7] = data.energyDTO.hourEnergy8;
lightHourEnergyValueArray[8] = data.energyDTO.hourEnergy9;
lightHourEnergyValueArray[9] = data.energyDTO.hourEnergy10;
lightHourEnergyValueArray[10] = data.energyDTO.hourEnergy11;
lightHourEnergyValueArray[11] = data.energyDTO.hourEnergy12;
lightHourEnergyValueArray[12] = data.energyDTO.hourEnergy13;
lightHourEnergyValueArray[13] = data.energyDTO.hourEnergy14;
lightHourEnergyValueArray[14] = data.energyDTO.hourEnergy15;
lightHourEnergyValueArray[15] = data.energyDTO.hourEnergy16;
lightHourEnergyValueArray[16] = data.energyDTO.hourEnergy17;
lightHourEnergyValueArray[17] = data.energyDTO.hourEnergy18;
lightHourEnergyValueArray[18] = data.energyDTO.hourEnergy19;
lightHourEnergyValueArray[19] = data.energyDTO.hourEnergy20;
lightHourEnergyValueArray[20] = data.energyDTO.hourEnergy21;
lightHourEnergyValueArray[21] = data.energyDTO.hourEnergy22;
lightHourEnergyValueArray[22] = data.energyDTO.hourEnergy23;
lightHourEnergyValueArray[23] = data.energyDTO.hourEnergy24;
// console.log("lightHourEnergyValueArray after:" + lightHourEnergyValueArray);
// console.log("lightHourEnergyValueArray after length:" + lightHourEnergyValueArray.length);
return lightHourEnergyValueArray;
}
function drawLightHoursConsumption(days,lightHourEnergyValueArray,context){
context.lineWidth = 10;
context.strokeStyle = "#F4381D";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#F4381D";
for(var i=1;i<=lightHourEnergyValueArray.length;i++){
var j = 9000*parseFloat(lightHourEnergyValueArray[i-1]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
// console.log("j:" + j);
context.beginPath();
context.moveTo(45*i-0.5,298);
context.lineTo(45*i-0.5,298-j);
context.stroke();
if(j>0){
var lightHourEnergyConsumption = lightHourEnergyValueArray[i-1];
context.fillText(lightHourEnergyConsumption, 45*i-0.5-4, 298-j-4);
}
}
}
function getLightDayEnergyArray(data){
var lightDayEnergyArray = new Array();
// console.log("floorDayEnergyArray before:" + floorDayEnergyArray);
// console.log("floorDayEnergyArray before length:" + floorDayEnergyArray.length);
lightDayEnergyArray[0] = data.monthEnergyDTO.dayEnergy1;
lightDayEnergyArray[1] = data.monthEnergyDTO.dayEnergy2;
lightDayEnergyArray[2] = data.monthEnergyDTO.dayEnergy3;
lightDayEnergyArray[3] = data.monthEnergyDTO.dayEnergy4;
lightDayEnergyArray[4] = data.monthEnergyDTO.dayEnergy5;
lightDayEnergyArray[5] = data.monthEnergyDTO.dayEnergy6;
lightDayEnergyArray[6] = data.monthEnergyDTO.dayEnergy7;
lightDayEnergyArray[7] = data.monthEnergyDTO.dayEnergy8;
lightDayEnergyArray[8] = data.monthEnergyDTO.dayEnergy9;
lightDayEnergyArray[9] = data.monthEnergyDTO.dayEnergy10;
lightDayEnergyArray[10] = data.monthEnergyDTO.dayEnergy11;
lightDayEnergyArray[11] = data.monthEnergyDTO.dayEnergy12;
lightDayEnergyArray[12] = data.monthEnergyDTO.dayEnergy13;
lightDayEnergyArray[13] = data.monthEnergyDTO.dayEnergy14;
lightDayEnergyArray[14] = data.monthEnergyDTO.dayEnergy15;
lightDayEnergyArray[15] = data.monthEnergyDTO.dayEnergy16;
lightDayEnergyArray[16] = data.monthEnergyDTO.dayEnergy17;
lightDayEnergyArray[17] = data.monthEnergyDTO.dayEnergy18;
lightDayEnergyArray[18] = data.monthEnergyDTO.dayEnergy19;
lightDayEnergyArray[19] = data.monthEnergyDTO.dayEnergy20;
lightDayEnergyArray[20] = data.monthEnergyDTO.dayEnergy21;
lightDayEnergyArray[21] = data.monthEnergyDTO.dayEnergy22;
lightDayEnergyArray[22] = data.monthEnergyDTO.dayEnergy23;
lightDayEnergyArray[23] = data.monthEnergyDTO.dayEnergy24;
lightDayEnergyArray[24] = data.monthEnergyDTO.dayEnergy25;
lightDayEnergyArray[25] = data.monthEnergyDTO.dayEnergy26;
lightDayEnergyArray[26] = data.monthEnergyDTO.dayEnergy27;
lightDayEnergyArray[27] = data.monthEnergyDTO.dayEnergy28;
lightDayEnergyArray[28] = data.monthEnergyDTO.dayEnergy29;
lightDayEnergyArray[29] = data.monthEnergyDTO.dayEnergy30;
lightDayEnergyArray[30] = data.monthEnergyDTO.dayEnergy31;
// console.log("lightDayEnergyArray after:" + lightDayEnergyArray);
// console.log("lightDayEnergyArray after length:" + lightDayEnergyArray.length);
return lightDayEnergyArray;
}
function drawLightDaysConsumption(days,lightDayEnergyArray,context){
context.lineWidth = 10;
context.strokeStyle = "#F27C1C";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#F27C1C";
for(var i=0;i<days;i++){
var j = 450*parseFloat(lightDayEnergyArray[i]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
// console.log("j:" + j);
context.beginPath();
context.moveTo(45+34*i-0.5,548);
context.lineTo(45+34*i-0.5,548-j);
context.stroke();
if(j>0){
var lightDayEnergyCosumption = new Number(lightDayEnergyArray[i]).toFixed(3);
// console.log("lightDayEnergyCosumption",lightDayEnergyCosumption);
context.fillText(lightDayEnergyCosumption, 45+34*i-0.5-4, 548-j-4);
}
}
}
function getLightMonthEnergyArray(data){
var lightMonthEnergyArray = new Array();
// console.log("lightMonthEnergyArray before:" + lightMonthEnergyArray);
// console.log("lightMonthEnergyArray before length:" + lightMonthEnergyArray.length);
lightMonthEnergyArray[0] = data.yearEnergyDTO.monthEnergy1;
lightMonthEnergyArray[1] = data.yearEnergyDTO.monthEnergy2;
lightMonthEnergyArray[2] = data.yearEnergyDTO.monthEnergy3;
lightMonthEnergyArray[3] = data.yearEnergyDTO.monthEnergy4;
lightMonthEnergyArray[4] = data.yearEnergyDTO.monthEnergy5;
lightMonthEnergyArray[5] = data.yearEnergyDTO.monthEnergy6;
lightMonthEnergyArray[6] = data.yearEnergyDTO.monthEnergy7;
lightMonthEnergyArray[7] = data.yearEnergyDTO.monthEnergy8;
lightMonthEnergyArray[8] = data.yearEnergyDTO.monthEnergy9;
lightMonthEnergyArray[9] = data.yearEnergyDTO.monthEnergy10;
lightMonthEnergyArray[10] = data.yearEnergyDTO.monthEnergy11;
lightMonthEnergyArray[11] = data.yearEnergyDTO.monthEnergy12;
// console.log("lightMonthEnergyArray after:" + lightMonthEnergyArray);
// console.log("lightMonthEnergyArray after length:" + lightMonthEnergyArray.length);
return lightMonthEnergyArray;
}
function drawLightMonthConsumption(days,lightMonthEnergyArray,context){
context.lineWidth = 10;
context.strokeStyle = "#FF82AB";
// 这是显示实际的数值
context.font = "12px Century Gothic";
context.fillStyle = "#FF82AB";
for(var i=0;i<lightMonthEnergyArray.length;i++){
var j = 15*parseFloat(lightMonthEnergyArray[i]);
if(j>180){
j=180;
}else if(j<0){
j=0;
}
context.beginPath();
context.moveTo(45+94*i-0.5,798);
context.lineTo(45+94*i-0.5,798-j);
context.stroke();
if(j>0){
var lightMonthEnergyCosumption = lightMonthEnergyArray[i];
// console.log("lightMonthEnergyCosumption",lightMonthEnergyCosumption);
context.fillText(lightMonthEnergyCosumption, 45+94*i-0.5-4, 798-j-4);
}
}
}
function drawLightSavedEnergy(context,lightOneDaySavedEnergy,lightOneMonthSavedEnergy,lightOneYearSavedEnergy){
var lightOneDaySavedEnergy = new Number(lightOneDaySavedEnergy).toFixed(4)+"KW.H";
// console.log("lightOneDaySavedEnergy:" + lightOneDaySavedEnergy);
var lightOneMonthSavedEnergy = new Number(lightOneMonthSavedEnergy).toFixed(0)+"KW.H";
// console.log("lightOneMonthSavedEnergy:" + lightOneMonthSavedEnergy);
var lightOneYearSavedEnergy = new Number(lightOneYearSavedEnergy).toFixed(0)+"KW.H";
// console.log("lightOneYearSavedEnergy:" + lightOneYearSavedEnergy);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#F4381D";
context.fillText("Saved Energy:", 850, 100);
context.fillText(lightOneDaySavedEnergy, 980, 100);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#F27C1C";
context.fillText("Saved Energy:", 850, 352);
context.fillText(lightOneMonthSavedEnergy, 980, 352);
context.beginPath();
context.font = "18px Century Gothic";
context.fillStyle = "#FF82AB";
context.fillText("Saved Energy:", 850, 600);
context.fillText(lightOneYearSavedEnergy, 980, 600);
}
function drawLightCanvasInfo(context,paramsStr){
$.ajax({
type : "POST",
dataType : "JSON",
url : "${pageContext.request.contextPath}/admin/getLightCanvasInfo.action",
contentType:"application/json;charset=UTF-8",
data : paramsStr,
success : function(data){
var days = data.monthEnergyDTO.days;
// console.log("days",days);
// 画一个月有多少天的刻度
drawDayXMark(days,context);
var lightHourEnergyValueArray = getLightHourEnergyValueArray(data);
// console.log("lightHourEnergyValueArray",lightHourEnergyValueArray);
drawLightHoursConsumption(days,lightHourEnergyValueArray,context);
var lightDayEnergyArray = getLightDayEnergyArray(data);
// console.log("lightDayEnergyArray",lightDayEnergyArray);
drawLightDaysConsumption(days,lightDayEnergyArray,context);
var lightMonthEnergyArray = getLightMonthEnergyArray(data);
// console.log("lightMonthEnergyArray",lightMonthEnergyArray);
drawLightMonthConsumption(days,lightMonthEnergyArray,context);
var lightOneDaySavedEnergy = data.oneDaySavedEnergy;
var lightOneMonthSavedEnergy = data.oneMonthSavedEnergy;
var lightOneYearSavedEnergy = data.oneYearSavedEnergy;
drawLightSavedEnergy(context,lightOneDaySavedEnergy,lightOneMonthSavedEnergy,lightOneYearSavedEnergy);
}
});
}
function drawLightEnergyConsumption(){
var lightId = $("#s_light_light option:selected").val();
lightId = parseInt(lightId);
// console.log("lightId",lightId);
var lightDate = $("#lightDate").val();
// console.log("lightDate",lightDate);
var canvas = document.getElementById("lightEnergyComsumptionCanvas");
var context = canvas.getContext("2d");
context.clearRect(0,0,canvas.width,canvas.height);
drawEnergyConsumptionHorizontalLine(context);
// 画Hour的x轴的函数
drawHourXMark(context);
// 写标题信息
drawLightConsumptionTitle(context);
// 画小标题信息
drawUnitTitleInfo(context);
// 画Month的x轴的函数
drawMonthXMark(context);
// 画y轴能量单位方法
drawEnergyUnitDescription(context);
// 画Floor的Hours的Y轴mark
drawLightHoursYMark(context);
// 画Hours的Y轴的Line标线
drawHoursYLineMarks(context);
// 画Floor的Days的Y轴mark
drawLightDaysYMark(context);
// 画Block的Days的Y轴的Line标线
drawDaysYLineMarks(context);
// 画Floor的month的Y轴mark
drawLightMonthsYMark(context);
// 画Month的Y轴的Line标线
drawMonthsYLineMarks(context);
var lightParams = {
"lightId":lightId,
"date":lightDate
};
// console.log("lightParams",lightParams);
var paramsStr = JSON.stringify(lightParams);
// console.log("paramsStr",paramsStr);
// 填充后台传过来的数据
drawLightCanvasInfo(context,paramsStr);
console.log("drawLightEnergyConsumption()");
}
$(function(){
// 初始化Area信息
getAreaSelections();
// 给Area一个默认时间是当天
var date = today();
$("#areaDate").val(date);
$("#blockDate").val(date);
$("#floorDate").val(date);
$("#lightDate").val(date);
$('#s_area_area').change(function(){
// var communityId = $("#s_area_area option:selected").val();
var communityId = $(this).children('option:selected').val();
communityId = parseInt(communityId);
drawAreaEnergyConsumption();
// console.log("communityId",communityId);
});
/* Block Consumption 部分 */
$('#s_area_block').change(function(){
var communityId = $(this).children('option:selected').val();
communityId = parseInt(communityId);
// console.log("communityId",communityId);
changeBlockAreaSelections(communityId);
});
$('#s_block_block').change(function(){
var blockId = $(this).val();
blockId = parseInt(blockId);
// console.log("blockId",blockId);
drawBlockEnergyConsumption();
});
/* Floor Consumption 部分 */
$('#s_area_floor').change(function(){
var communityId = $(this).children('option:selected').val();
communityId = parseInt(communityId);
// console.log("communityId",communityId);
changeFloorAreaSelections(communityId);
});
$('#s_block_floor').change(function(){
var blockId = $(this).children('option:selected').val();
blockId = parseInt(blockId);
// console.log("blockId",blockId);
changeFloorBlockSelections(blockId);
});
$('#s_floor_floor').change(function(){
var floorId = $(this).val();
floorId = parseInt(floorId);
// console.log("floorId",floorId);
drawFloorEnergyConsumption();
});
/* 添加Light部分 */
$('#s_area_light').change(function(){
var communityId = $(this).children('option:selected').val();
communityId = parseInt(communityId);
// console.log("communityId",communityId);
changeLightAreaSelections(communityId);
});
$('#s_block_light').change(function(){
var blockId = $(this).children('option:selected').val();
blockId = parseInt(blockId);
//console.log("blockId",blockId);
changeLightBlockSelections(blockId);
});
$('#s_floor_light').change(function(){
var floorId = $(this).children('option:selected').val();
floorId = parseInt(floorId);
//console.log("blockId",blockId);
changeLightFloorSelections(floorId);
});
$('#s_light_light').change(function(){
var lightId = $(this).children('option:selected').val();
lightId = parseInt(lightId);
// console.log("lightId",lightId);
drawLightEnergyConsumption();
});
// tab栏切换area/block/floor/light部分
$(function(){
// 获取所有的li标签,添加鼠标进入事件
$(".tab_dv>button").click(function(){
// 设置当前鼠标进入的li添加类样式,同时移除当前li的所有兄弟元素
// 类样式
$(this).removeClass("btn-success btn-info").addClass("btn-success").siblings("button").removeClass("btn-success btn-info");
$(this).siblings("button").addClass("btn-info");
// 设置鼠标进入的li对应的div的样式
// 获取当前鼠标进入的li的索引值
var index = $(this).index();
$(".all_info>div:eq("+index+")").addClass("selected")
.siblings('div')
.removeClass('selected');
getAreaSelections();
getInitialBlockSelections();
});
});
});
</script>
</head>
<body>
<div class="main">
<c:import url="navbar.jsp"></c:import>
<div class="container-fluid">
<!-- tab area/block/floor/light部分 -->
<div class="tab_dv">
<button type="button" class="btn btn-success" >Area Consumption</button>
<button type="button" class="btn btn-info" >Block Consumption</button>
<button type="button" class="btn btn-info" >Floor Consumption</button>
<button type="button" class="btn btn-info" >Light Consumption</button>
</div>
<div class="all_info">
<!-- Area Energy Consumption 部分 -->
<div class="area selected">
<canvas id="areaEnergyComsumptionCanvas" width="1200" height="815" >
Your browser does not support HTML5.
</canvas>
<span class="span_s_area_area">
<select name="" id="s_area_area">
</select>
</span>
<span class="span_date_area">
<input type="text" onClick="WdatePicker({lang:'en',onpicked:changeAreaDate,maxDate:new Date()})" readonly="readonly" class="Wdate" id=areaDate />
</span>
</div>
<!-- Block Energy Consumption 部分 -->
<div class="block">
<canvas id="blockEnergyComsumptionCanvas" width="1200" height="815" >
Your browser does not support HTML5.
</canvas>
<span class="area_block">
<select name="" id="s_area_block">
</select>
</span>
<span class="span_date_block">
<input type="text" onClick="WdatePicker({lang:'en',onpicked:changeBlockDate,maxDate:new Date()})" readonly="readonly" class="Wdate" id=blockDate />
</span>
<span class="span_s_block">
<select name="" id="s_block_block">
</select>
</span>
</div>
<!-- Floor Energy Consumption 部分 -->
<div class="floor">
<canvas id="floorEnergyComsumptionCanvas" width="1200" height="815" >
Your browser does not support HTML5.
</canvas>
<span class="area_floor">
<select name="" id="s_area_floor">
</select>
</span>
<span class="block_floor">
<select name="" id="s_block_floor">
</select>
</span>
<span class="floor_floor">
<select name="" id="s_floor_floor">
</select>
</span>
<span class="span_date_floor">
<input type="text" onClick="WdatePicker({lang:'en',onpicked:changeFloorDate,maxDate:new Date()})" readonly="readonly" class="Wdate" id=floorDate />
</span>
</div>
<!-- light Energy Consumption 部分 -->
<div class="light">
<canvas id="lightEnergyComsumptionCanvas" width="1200" height="815" >
Your browser does not support HTML5.
</canvas>
<span class="area_light">
<select name="" id="s_area_light">
</select>
</span>
<span class="block_light">
<select name="" id="s_block_light">
</select>
</span>
<span class="floor_light">
<select name="" id="s_floor_light">
</select>
</span>
<span class="light_light">
<select name="" id="s_light_light">
</select>
</span>
<span class="span_date_light">
<input type="text" onClick="WdatePicker({lang:'en',onpicked:changeLightDate,maxDate:new Date()})" readonly="readonly" class="Wdate" id=lightDate />
</span>
</div>
</div>
</div>
</div>
<c:set var="current_page" scope="session" value="energy_consumption"/>
<c:import url="sidebar.jsp"></c:import>
</body>
</html>
2061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
