// 通过lightId和date查询light画布需要的Triggered Time所有的信息@RequestMapping(value="/admin/getLightTriggeredTimesCanvasInfo.action", headers = {"Accept=application/json"})@ResponseBodypublic 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月往上其实值是-stepvalueOfY -=  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轴markdrawLightYMark(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>

triggered_time相关推荐

  1. Elasticsearch的Watcher插件

    2019独角兽企业重金招聘Python工程师标准>>> Watcher是对Elasticsearch进行告警和通知的插件,可以根据数据的变化采取行动.它的设计原理是在Elastics ...

  2. Elasticsearch 日志监控方案

    现在大部分公司都会选择将应用.中间件.系统等日志存储在 Elasticsearch 中,如何发现日志中的异常数据并且及时告警通知就显得十分重要.本文将会介绍两种主流的日志监控方案,分别是 Yelp 公 ...

最新文章

  1. centos mysql卸载重装_提高性能,MySQL 读写分离环境搭建
  2. 如何更改微信标签名字_微信透明昵称代码复制
  3. 美国将对所有墨西哥输美商品加征关税,为何日本股市反而大跌?
  4. windows下安装python和Python-opencv
  5. 【ArcGIS Pro微课1000例】0015:ArcGIS Pro中属性字段分式标注案例教程
  6. mysqldump备份报Binlogging on server not active的解决
  7. php正则匹配js中变量_PHP正则表达式核心技术完全详解 第12节 [附加知识] 断言匹配...
  8. python怎样填充颜色_python – 使用颜色填充Tkinter画布对象之间的空间
  9. python之数字操作
  10. 万圣节html代码大全,《方舟:生存进化》万圣节代码大全
  11. 数据挖掘肿瘤预测_肿瘤分析数据挖掘及信息解读
  12. 解决Word无响应崩溃的问题
  13. 计算机显卡型号中数字含义详解,显卡型号中字母和数字都是什么意思?
  14. linux源文件安装,Linux下的源文件安装
  15. 前端标准模式与混杂模式的区别
  16. android 生成bks_生成android的bks证书
  17. mac 不显示 外接屏幕_教大家Mac外接显示器设置教程
  18. 垂钓之王hd_它的专业人士指南,以阻止网络钓鱼
  19. 690-文件管理和文件系统
  20. CardView属性app:cardUseCompatPadding和app:cardPreventCornerOverlap

热门文章

  1. [asp.net] 获取网页访问来路的几种方法
  2. modelsim(1):经常使用的测试设计的结构
  3. 【Spring MVC学习】详解spring mvc 3.0常用注解
  4. 有关数据库表被锁定的问题
  5. 美国读本科出勤率低被休学,无法毕业怎么办
  6. RxJava+Retrofit+MVP+Dagger2
  7. simware模拟交换机的方法
  8. 2.2 Wrappers访问控制
  9. Web Form中的Datagrid的自定义分页
  10. webshpere缓存--web.xml