triggered_time

Leon_Jinhai_Sun

于 2019-04-03 18:00:58 发布

阅读量252

点赞数

本文链接：https://blog.csdn.net/Leon_Jinhai_Sun/article/details/89001589

版权

	// 通过lightId和date查询light画布需要的Triggered Time所有的信息
	@RequestMapping(value="/admin/getLightTriggeredTimesCanvasInfo.action", headers = {"Accept=application/json"})
	@ResponseBody
	public Map<String,Object> getLightTriggeredTimesCanvasInfo(HttpServletRequest request, @RequestBody EnergyConsumptionDTO consumptionDTO) {
		try {
			Date sysDate = new Date();
			String dateString = FormatUtil.dateToString(sysDate);
			Map<String,Object> map = new HashMap<String,Object>();
			if(consumptionDTO!=null && consumptionDTO.getLightId()!=null) {
				Integer lightId = consumptionDTO.getLightId();
				String lightDate = consumptionDTO.getDate();
				if(lightDate==null || lightDate.trim()=="") {
					lightDate = dateString;
				}
				// 通过lightId查询是否OVP和其发生的时间
				List<StatusOverDTO> ovpList = communityDetailService.selectOvpListByLightId(lightId,lightDate);
				// 通过lightId查询是否OCP和其发生的时间
				List<StatusOverDTO> ocpList = communityDetailService.selectOcpListByLightId(lightId,lightDate);
				// 通过lightId查询是否pirFail和其发生的时间
				List<StatusOverDTO> pirFailList = communityDetailService.selectPirFailListByLightId(lightId,lightDate);
				map.put("ovpList", ovpList);
				map.put("ocpList", ocpList);
				map.put("pirFailList", pirFailList);
			}
			return map;
		} catch (Exception e) {
			e.printStackTrace();
			return null;
		}
	}

<%@ 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);
	}
    .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;*/
      position: relative;
    }
     /* 添加light部分 */
	.area_title{
      position: absolute;
      width: 40px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: -4px;
      left: 65px;
      font-size: 14px;
      color: #0496A4;
	}
    .area_light {
      /*margin-right: 5px;*/
      position: absolute;
      width: 120px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: -8px;
      left: 106px;
    }
    .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_title{
      position: absolute;
      width: 40px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: -4px;
      left: 264px;
      font-size: 14px;
      color: #0496A4;
	}
    .block_light {
      /*margin-right: 5px;*/
      position: absolute;
      width: 120px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: -8px;
      left: 308px;
    }
    .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_title{
      position: absolute;
      width: 40px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: -4px;
      left: 465px;
      font-size: 14px;
      color: #0496A4;
	}
    .floor_light {
      /*margin-right: 5px;*/
      position: absolute;
      width: 120px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: -8px;
      left: 506px;
    }
    .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_title{
      position: absolute;
      width: 40px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: -4px;
      left: 666px;
      font-size: 14px;
      color: #0496A4;
	}
    .light_light {
      /*margin-right: 5px;*/
      position: absolute;
      width: 120px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: -8px;
      left: 706px;
    }
    .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: 908px;
    }
	.date_title{
      position: absolute;
      width: 40px;
      height: 20px;
      /*border: 1px solid red;*/
      display: inline-block;
      top: -4px;
      left: 866px;
      font-size: 14px;
      color: #0496A4;
	}
  </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 drawLightTriggerTimesTitle(context){
          context.font = "24px Century Gothic";
          context.fillStyle = "#FF69B4";
          context.fillText("OVP", 400, 65);
          context.fillStyle = "#FFF";
          context.fillText("&", 460, 65);
          context.fillStyle = "#228B22";
          context.fillText("OCP", 485, 65);
          context.fillStyle = "#FFF";
          context.fillText("&", 545, 65);
          context.fillStyle = "#00BFFF";
          context.fillText("PIR-Fail", 569, 65);
          //画OVP图形描述
          context.beginPath();
          context.fillStyle = "#FF69B4";
          context.moveTo(490,90);
          context.lineTo(498,81);
          context.lineTo(506,90);
          context.lineTo(498,99);
          context.fill();
          context.closePath();  
          //画OVP文字
          context.font = "15px Century Gothic";
          context.fillText("OVP",515,94);
          //画OCP图像描述
          context.beginPath();
          context.fillStyle = "#228B22";
          context.moveTo(490,119);
          context.lineTo(498,111);
          context.lineTo(506,119);
          context.lineTo(498,127);
          context.fill();
          context.closePath();
          //画OCP文字
          context.font = "15px Century Gothic";
          context.fillText("OCP",515,123);
          //画PIR Fault图形描述
          context.beginPath();
          context.fillStyle = "#00BFFF";
          context.moveTo(490,147);
          context.lineTo(498,139);
          context.lineTo(506,147);
          context.lineTo(498,155);
          context.fill();
          context.closePath();
          //画PIR Fault文字
          context.fillText("PIR Fail",515,151);          
      }
      
      function drawLightYMark(context){
          context.font = "12px Century Gothic";
          context.fillStyle = "#00BFFF";
          context.fillText("PIR-Fail", 0, 384);
          context.fillStyle = "#228B22";
          context.fillText("OCP", 12, 284);
          context.fillStyle = "#FF69B4";
          context.fillText("OVP", 12, 184);
      }
      
    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);
					    $("#s_block_light option:first").prop("selected", 'selected');
					    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);
				    $("#s_floor_light option:first").prop("selected", 'selected');
				    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);
				    $("#s_light_light option:first").prop("selected", 'selected');
				    drawLightTriggerTimes();
			      }	
	    		}	
	    	});
	  }
    
	  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);
					    $("#s_floor_light option:first").prop("selected", 'selected');
					    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);
				    $("#s_light_light option:first").prop("selected", 'selected');
				    drawLightTriggerTimes();
			      }	
	    		}	
	    	});
  	  }
	  
	  function changeLightDate(){
			// console.log(11);
			var date = $("#lightDate").val();
			$("#areaDate").val(date);
			$("#blockDate").val(date);
			$("#floorDate").val(date);
			// console.log("date",date);
			drawLightTriggerTimes();
	  }
	  
	  function getInitialBlockSelections(){	
		  var communityId = $("#s_area_light 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_light").html(blockHtml); 
				    $("#s_block_light option:first").prop("selected", 'selected');
				    getLightCurrentFloorSelections();
			      }	
	    		}	
	    	});
}
	  
	  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_light").html(areaHtml);
				      $("#s_area_light option:first").prop("selected", 'selected');
				      getInitialBlockSelections();
		    		}	
		    	});
	  }
	  
	  function drawOVPLine(context,data){
		  // console.log(data);
		  var ovpList = data.ovpList;
		  // console.log("ovpList",ovpList);
		  var ovpLength = data.ovpList.length;
		  // console.log("ovpLength",ovpLength);
		  if(ovpLength>0){
			  for(var i=0;i<ovpLength;i++){
				  // console.log(ovpList[i].currentSecond,ovpList[i].ovpValue);
				  drawSingleOVPLine(context,ovpList[i].currentSecond,ovpList[i].ovpValue);
			  }
		  }
	  }
	  
      // 画OVP单个点的方法
      function drawSingleOVPLine(context,currentSecond,ovpValue){
        if(ovpValue==1){
          context.beginPath();
          context.lineWidth = 5;
          context.strokeStyle = "#FF69B4";
          var leftPoint = (currentSecond/88)+50;
          var rightPoint = (currentSecond/88)+54;
          context.moveTo(leftPoint,182);          
          context.lineTo(rightPoint,186);
          context.stroke();
          context.closePath();
        }
      }
      
	  function drawOCPLine(context,data){
		  // console.log(data);
		  var ocpList = data.ocpList;
		  // console.log("ocpList",ocpList);
		  var ocpLength = data.ocpList.length;
		  // console.log("ocpLength",ocpLength);
		  if(ocpLength>0){
			  for(var i=0;i<ocpLength;i++){
				  // console.log(ocpList[i].currentSecond,ocpList[i].ocpValue);
				  drawSingleOCPLine(context,ocpList[i].currentSecond,ocpList[i].ocpValue);
			  }
		  }
	  }
	  
      // 画OCP单个点的方法
      function drawSingleOCPLine(context,currentSecond,ocpValue){
          if(ocpValue==1){
	            context.beginPath();
	            context.lineWidth = 5;
	            context.strokeStyle = "#228B22";
	            var leftPoint = (currentSecond/88)+50;
	            var rightPoint = (currentSecond/88)+54;
	            context.moveTo(leftPoint,282);          
	            context.lineTo(rightPoint,286);
	            context.stroke();
	            context.closePath();
	      }
      }
      
	  function drawPIRFailLine(context,data){
		  // console.log(data);
		  var pirFailList = data.pirFailList;
		  // console.log("pirFailList",pirFailList);
		  var pirFailLength = data.pirFailList.length;
		  // console.log("pirFailLength",pirFailLength);
		  if(pirFailLength>0){
			  for(var i=0;i<pirFailLength;i++){
				  // console.log(pirFailList[i].currentSecond,pirFailList[i].ovpValue);
				  drawSinglePIRFailLine(context,pirFailList[i].currentSecond,pirFailList[i].failStatus);
			  }
		  }
	  }
	  
      // 画PIR-Fail单个点的方法
      function drawSinglePIRFailLine(context,currentSecond,failStatus){
          if(failStatus==1){
	            context.beginPath();
	            context.lineWidth = 5;
	            context.strokeStyle = "#00BFFF";
	            var leftPoint = (currentSecond/88)+50;
	            var rightPoint = (currentSecond/88)+54;
	            context.moveTo(leftPoint,382);          
	            context.lineTo(rightPoint,386);
	            context.stroke();
	            context.closePath();
	     }
      }
	  
      function drawLightCanvasInfo(context,paramsStr){ 	
		    $.ajax({	
	    		type : "POST",
	    		dataType : "JSON",
	    		url : "${pageContext.request.contextPath}/admin/getLightTriggeredTimesCanvasInfo.action",
	    		contentType:"application/json;charset=UTF-8",
	    		data : paramsStr,
	    		success : function(data){
	    		  	// 画OVP点的方法
	    			drawOVPLine(context,data);
	    		  	// 画OCP点的方法
	    			drawOCPLine(context,data);
	    		  	// 画PIR-Fail点的方法
	    			drawPIRFailLine(context,data);
	    		}	
		    });
     }
      
      function drawHorizontalLine(context){
          var valueOfY = 484;
          //判断不能越界
          while(valueOfY>150){
              context.beginPath();
              context.moveTo(45,valueOfY+0.5);
              context.lineTo(1040,valueOfY+0.5);
              context.lineWidth = 1;
              context.strokeStyle = "#D7D8DA";
              context.stroke();
            //y月往上其实值是-step
            valueOfY -=  100;
          }          
      }

      //画x轴的函数
      function drawHourXMark(context){
        for(var i=0;i<25;i++){      
          //画刻度线
          context.font = "12px Century Gothic";
          context.fillStyle = "#2f4050";
          context.fillText(i, 40+40*i, 496);        
        }
      }  
	  
	  function drawLightTriggerTimes(){
			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("lightTriggerTimesCanvas");
			var context = canvas.getContext("2d");
			
			context.clearRect(0,0,canvas.width,canvas.height);
			
	        drawHorizontalLine(context); 
	
	        // 画Hour的x轴的函数
	        drawHourXMark(context); 	
	        
	        // 写标题信息
	        drawLightTriggerTimesTitle(context);
	        
	        // 画Light的Hours的Y轴mark
	        drawLightYMark(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("drawLightTriggerTimes()");
	  }
	  
  
  	 $(function(){
  		  // 初始化Area信息
  		  getAreaSelections();
  		  
  		  // 给Area一个默认时间是当天
  		  var date = today();  		 
  		  $("#lightDate").val(date);
	      
		  /* 添加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);	
		   		drawLightTriggerTimes();
		  });  	        
  	 });
  	 
  	 
  	 
  </script>
</head>
<body>

  <div class="main">

	<c:import url="navbar.jsp"></c:import>

    <div class="container-fluid">	  
	  <div class="all_info">	    
	    <!-- light Trigger Times 部分 -->
	    <div class="light">
			<canvas id="lightTriggerTimesCanvas" width="1200" height="600" >
				Your browser does not support HTML5.
			</canvas>
	        <span class="area_title">
	          Area:
	        </span>
	        <span class="area_light">
	          <select name="" id="s_area_light">
	           
	          </select>
	        </span>
	        <span class="block_title">
	          Block:
	        </span>
	        <span class="block_light">
	          <select name="" id="s_block_light">
	           
	          </select>
	        </span>
	        <span class="floor_title">
	          Floor:
	        </span>
	        <span class="floor_light">
	          <select name="" id="s_floor_light">
	           
	          </select>
	        </span>
	        <span class="light_title">
	          Light:
	        </span>
	        <span class="light_light">
	          <select name="" id="s_light_light">
	           
	          </select>
	        </span>
	        <span class="date_title">
	          Date:
	        </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="triggered_time"/>
  <c:import url="sidebar.jsp"></c:import>

</body>
</html>