<%@ 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="learn" uri="http://learn.cn/common/"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Learn LMS - Configure SPS100</title>
<style type="text/css">
#container {
width: 100%;
height: 100%;
margin: auto;
background-image: url(${pageContext.request.contextPath}/img/BG1.jpg);
}
#title {
/*border:1px solid red;*/
width: 50%;
color: #15a2b3;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: center;
margin: 0 auto;
padding-top:5%;
padding-bottom:1%;
}
html,body{
margin: 0px;
padding: 0px;
/* background-image: url(${pageContext.request.contextPath}/img/BG1.jpg); */
}
body{
background-image: url(${pageContext.request.contextPath}/img/BG1.jpg);
}
/* D/E PIR Sensitivity */
.s_checkbox{
height: 50px;
line-height: 50px;
font-size: 18px;
/*border: 1px solid #ccc;*/
}
.s_checkbox input {
vertical-align: -2px;
}
.s_select{
float: left;
/*用div的样式代替select的样式*/
width: 180px;
height: 30px;
position: relative;
}
.s_select select{
width: 100%;
height: 30px;
padding: 0.0em 0.4em 0.0em 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;
/* background: #F4F4F6; */
font-size: 14px;
color: #8D8E92;
cursor: pointer;
/* background: url(select_arrow.png) no-repeat right; */
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
background-size: 40px;
}
.s_select select option:hover {
background-color: #f80;
color: #FFB6C1;
}
/* DIM Level */
.slide_father{
width: 559px;
height: 68px;
background-color: #E4E5E5;
margin: 0 auto;
position: relative;
border-radius: 29px;
box-shadow: 6px 6px 5px #888888;
}
.slide_son1{
width: 512px;
height: 40px;
background-color: #B3B2B3;
position: absolute;
left: 50%;
top: 14px;
margin-left: -256px;
border-radius: 22px;
box-shadow: 9px 9px 9px #999 inset;
}
.slide_son2{
width: 482px;
height: 16px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#AC07BD, endColorStr=#f6f6f8); /*IE 6 7 8*/
background: -moz-linear-gradient(right, #545655 40%, #ffffff 100%);
background: -ms-linear-gradient(right, #545655, #ffffff);
background: -webkit-linear-gradient(right, #545655 40%,#ffffff 100%);
position: absolute;
left: 50%;
top: 26px;
margin-left: -241px;
border-radius: 12px;
/*box-shadow: -8px -8px 5px #888888;*/
box-shadow:8px 8px 8px #999 inset;
}
.slide_ball{
width: 22px;
height: 22px;
background-color: #45A265;
background: radial-gradient(circle,SeaGreen,DarkGreen,Green);
background: -ms-radial-gradient(circle,SeaGreen,DarkGreen,Green);
border-radius: 50%;
position: absolute;
left: 29px;
top: 22px;
box-shadow: 4px 4px 4px #888888;
}
.comment_father{
margin: 0 auto;
width: 500px;
height: 26px;
/*border: 1px solid red;*/
}
.comment_son1{
/*margin-left: 20px;*/
/*width: 742px;*/
height: 12px;
/*border: 1px solid green;*/
}
/* ul,li{
margin: 0;
padding: 0;
list-style: none;
} */
.comment_father ul,.comment_ps_father ul{
margin: 0;
padding: 0;
list-style: none;
}
.comment_son1 ul li{
float: left;
padding-right: 29px;
font-size: 12px;
line-height: 12px;
color: #28383A;
}
.comment_son1 ul li:first-child{
padding-left: 10px;
}
.comment_son1 ul li:last-child{
padding-right: 0;
}
.comment_son2{
margin-left: 5px;
height: 12px;
/*border: 1px solid blue;*/
}
.comment_son2 ul li{
float: left;
padding-right: 49px;
font-size: 12px;
line-height: 12px;
color: #28383A;
}
.comment_son2 ul li:first-child{
padding-left: 10px;
}
.comment_son2 ul li:last-child{
padding-right: 0;
}
.slide_title{
color: #080;
padding-left: 15%;
position: absolute;
margin: auto;
}
.dimLevel{
position: absolute;
font-size: 18px;
color: #f10215;
top: 20px;
left: 580px;
}
/* Photosensor Sensitivity */
.slide_photosensor_sensi{
width: 559px;
height: 68px;
background-color: #E4E5E5;
margin: 0 auto;
position: relative;
border-radius: 29px;
box-shadow: 6px 6px 5px #888888;
}
.slide_ps_son1{
width: 512px;
height: 40px;
background-color: #B3B2B3;
position: absolute;
left: 50%;
top: 14px;
margin-left: -256px;
border-radius: 22px;
box-shadow: 9px 9px 9px #999 inset;
}
.slide_ps_son2{
width: 482px;
height: 16px;
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#AC07BD, endColorStr=#f6f6f8); /*IE 6 7 8*/
background: -moz-linear-gradient(right, #545655 40%, #ffffff 100%);
background: -ms-linear-gradient(right, #545655, #ffffff);
background: -webkit-linear-gradient(right, #545655 40%,#ffffff 100%);
position: absolute;
left: 50%;
top: 26px;
margin-left: -241px;
border-radius: 12px;
box-shadow:8px 8px 8px #999 inset;
}
.slide_ps_ball{
width: 22px;
height: 22px;
background-color: #45A265;
background: radial-gradient(circle,SeaGreen,DarkGreen,Green);
background: -ms-radial-gradient(circle,SeaGreen,DarkGreen,Green);
border-radius: 50%;
position: absolute;
left: 29px;
top: 22px;
box-shadow: 4px 4px 4px #888888;
}
.slide_ps_title{
color: #080;
padding-left: 15%;
position: absolute;
margin: auto;
}
.comment_ps_father{
margin: 40px auto 5px;
width: 580px;
height: 26px;
/*border: 1px solid red;*/
}
.comment_ps_son1{
height: 12px;
}
.comment_ps_son1 ul li{
float: left;
padding-right: 34px;
font-size: 12px;
line-height: 12px;
color: #28383A;
}
.comment_ps_son1 ul li:first-child{
padding-left: 45px;
}
.comment_ps_son1 ul li:last-child{
padding-right: 0;
}
.comment_ps_son2{
/*margin-left: 5px;*/
height: 12px;
/*border: 1px solid green;*/
}
.comment_ps_son2 ul li{
float: left;
padding-right: 45px;
font-size: 12px;
line-height: 12px;
color: #28383A;
}
.comment_ps_son2 ul li:first-child{
padding-left: 48px;
}
.comment_ps_son2 ul li:last-child{
padding-right: 0;
}
.photosensor{
position: absolute;
font-size: 18px;
color: #f10215;
top: 20px;
left: 580px;
}
/* Hold Time */
.hold_time{
padding-left: 15%;
height: 30px;
}
.hold_time .ht_input{
float: left;
font-size: 18px;
color: #686969;
}
.hold_time .ht_input input{
width: 60px;
height: 30px;
border: 1px solid #D7D8DA;
font-size: 18px;
text-indent: 1.5em;
}
.hold_time .ht_input .ht_number{
font-size: 12px;
color: #f10215;
}
/* Schedule */
.schedule{
padding-left: 15%;
height: 50px;
/*border: 1px solid red;*/
}
.sche_checkbox{
height: 30px;
line-height: 50px;
color: #686969;
font-size: 18px;
}
.sche_checkbox input {
vertical-align: -2px;
}
/* lightIntensity */
.lightIntensity{
padding-left: 15%;
height: 50px;
color: #686969;
/* border: 1px solid red; */
}
.title_lightIntensity{
height: 30px;
float: left;
color: #686969;
font-size: 18px;
/*border: 1px solid #ccc;*/
}
.s_lightIntensity{
float: left;
/*用div的样式代替select的样式*/
width: 130px;
height: 30px;
position: relative;
}
.s_lightIntensity select{
width: 100%;
height: 30px;
padding: 0.0em 0.4em 0.0em 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;
/* background: #F4F4F6; */
font-size: 14px;
color: #8D8E92;
cursor: pointer;
/* background: url(select_arrow.png) no-repeat right; */
background: #F4F4F6 url(${pageContext.request.contextPath}/img/select_arrow.png) no-repeat right;
background-size: 40px;
}
.s_lightIntensity select option:hover {
background-color: #f80;
color: #FFB6C1;
}
/* Month */
.winter_month{
width: 50%;
/*text-align: center; */
font-size: 18px;
color: #686969;
/*border: 1px solid green;*/
}
.winter_month input{
width: 60px;
height: 30px;
border: 1px solid #D7D8DA;
font-size: 18px;
text-indent: 1.5em;
}
.summer_month{
width: 50%;
/*margin-left: 29px;*/
font-size: 18px;
color: #686969;
/*border: 1px solid blue;*/
}
.summer_month input{
width: 60px;
height: 30px;
border: 1px solid #D7D8DA;
font-size: 18px;
text-indent: 1.5em;
}
.wm_number,.sm_number,.ws_number,.we_number{
font-size: 12px;
color: #f10215;
}
.winter_start{
width: 322px;
float: left;
font-size: 18px;
color: #686969;
/*border: 1px solid green;*/
}
.winter_start input{
width: 140px;
height: 30px;
border: 0 none;
outline-style: none;
border: 1px solid #D7D8DA;
font-size: 18px;
text-indent: 0.5em;
}
.winter_end{
width: 342px;
float: left;
font-size: 18px;
color: #686969;
/*border: 1px solid blue;*/
}
.winter_end input{
width: 140px;
height: 30px;
border: 0 none;
outline-style: none;
border: 1px solid #D7D8DA;
font-size: 18px;
text-indent: 0.5em;
}
.summer_start{
width: 342px;
float: left;
font-size: 18px;
color: #686969;
/*border: 1px solid green;*/
}
.summer_start input{
width: 140px;
height: 30px;
border: 0 none;
outline-style: none;
border: 1px solid #D7D8DA;
font-size: 18px;
text-indent: 0.5em;
}
.summer_end {
width: 342px;
float: left;
font-size: 18px;
color: #686969;
/*border: 1px solid blue;*/
}
.summer_end input{
width: 140px;
height: 30px;
border: 0 none;
outline-style: none;
border: 1px solid #D7D8DA;
font-size: 18px;
text-indent: 0.5em;
}
/* area_block_floor_light_info */
.area_block{
margin: 0 auto;
width: 40%;
height: 300px;
border: 1px solid #D7D8DA;
overflow: auto;
}
/* button */
.config_btn{
margin: 20px auto;
/* width:400px;
height:100px; */
text-align: center;
color: green;
}
.config_btn button{
width: 10%;
color: green;
cursor: pointer;
}
.feedback{
margin: 0 auto 20px;
/* width: 400px;
height: 400px; */
/*border: 1px solid red;*/
}
.feedback .info{
text-align: center;
height: 40px;
line-height: 40px;
color: #f10215;
/*border: 1px solid green;*/
}
.t_title{
margin: 0 auto;
height: 40px;
line-height: 40px;
text-align: center;
font-weight: 500;
color: #f10215;
border:1px solid #D7D8DA;
width:50%;
border-bottom: none;
}
.show_table{
margin: 0 auto;
width: 50%;
height: 150px;
/*border: 1px solid #D7D8DA;*/
overflow: auto;
border-top: none;
}
.show_table table{
/*border: 1px solid #686969;*/
border-collapse: collapse;
text-align: center;
color: #686969;
font-weight: 500;
width: 100%;
margin: 0;
border-spacing: 0;
}
.show_table td{
border: 1px solid #D7D8DA;
width: 25%;
height: 40px;
line-height: 40px;
padding: 0;
}
.show_table td.t_td{
font-size: 14px;
}
.show_table td.t_td.light span{
color: #f10215;
}
.resubmit{
margin: 0 auto 30px;
text-align: center;
color: green;
}
.resubmit button{
width: 10%;
color: green;
cursor: pointer;
}
/* Configure Device Time */
.deviceTime{
width: 75%;
margin: 0 auto;
height: 50px;
/*border: 1px solid red;*/
}
.deviceTime_checkbox{
margin-left: 26px;
height: 50px;
float: left;
line-height: 50px;
color: #686969;
font-size: 18px;
}
.deviceTime_checkbox input {
vertical-align: -2px;
}
#bottom {
width: 100%;
text-align: center;
font-size: 15px;
}
</style>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/font-awesome.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/style2.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/js/ztree/zTreeStyle.css" type="text/css">
<script src="${pageContext.request.contextPath}/js/jquery-3.3.1.min.js"></script>
<script src="${pageContext.request.contextPath}/js/solid.js"></script>
<script src="${pageContext.request.contextPath}/js/fontawesome.js"></script>
<script src="${pageContext.request.contextPath}/js/jquery.mCustomScrollbar.concat.min.js"></script>
<script src="${pageContext.request.contextPath}/js/popper.min.js"></script>
<script src="${pageContext.request.contextPath}/js/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/js/ztree/jquery.ztree.all-3.5.js"></script>
<script src="${pageContext.request.contextPath}/js/mqttws31.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#sidebar").mCustomScrollbar({
theme: "minimal"
});
$('#sidebarCollapse').on('click', function () {
$('#sidebar, #content').toggleClass('active');
$('.collapse.in').toggleClass('in');
$('a[aria-expanded=true]').attr('aria-expanded', 'false');
});
var clientName = "lms_server" + new Date().getTime();
//Using the HiveMQ public Broker, with a random client Id
var client = new Messaging.Client("localhost", 9001, clientName);
//Gets called if the websocket/mqtt connection gets disconnected for any reason
client.onConnectionLost = function (responseObject) {
//Depending on your scenario you could implement a reconnect logic here
alert("connection lost: " + responseObject.errorMessage);
};
//Gets called whenever you receive a message for your subscriptions
client.onMessageArrived = function (message) {
//Do something with the push message you received
$('#messages').append('<span>Topic: ' + message.destinationName + ' | ' + message.payloadString + '</span><br/>');
};
//Connect Options
var options = {
timeout: 3,
userName: clientName,
password: clientName,
//Gets Called if the connection has sucessfully been established
onSuccess: function () {
/*var msg = "Hello from LMS"
var topic = "${topic}"
alert("Topic: " + topic + ", Msg: ");
publish(msg, topic, 1);
client.disconnect();*/
},
//Gets Called if the connection could not be established
onFailure: function (message) {
alert("Connection failed: " + message.errorMessage);
}
};
//Creates a new Messaging.Message Object and sends it to the HiveMQ MQTT Broker
var publish = function (payload, topic, qos) {
//Send your message (also possible to serialize it as JSON or protobuf or just use a string, no limitations)
var message = new Messaging.Message(payload);
message.destinationName = topic;
message.qos = qos;
client.send(message);
console.info("mqtt msg: " + message);
}
client.connect(options);
$("#config_param").on("click",function(){
var flag = true;
//1.eventID(这个是作为唯一标识)
var myData = new Date();
var eventId = myData.getTime();//当前时间的毫秒数
//console.log(eventID);
var treeObj = $.fn.zTree.getZTreeObj("ztree");
var list = treeObj.getCheckedNodes(true); //获取选中的节点，如果只有部分子节点被选中了，父节点也会被选中，过滤掉父节点
if (list && list.length > 0) {
// 清空原数据
var array = new Array();
var blockTopics = new Array();
for (var i = 0; i < list.length; i++) {
/*if (list[i].id.substring().includes('block')) {
blockTopics.push(list[i].topic);
}*/
if(list[i].level!=0){
// 过滤父节点,nodes[i].getCheckStatus().half===true表示是半选中
if (list[i].getCheckStatus().half != true && list[i].getParentNode().checked==true
&& list[i].getParentNode().getCheckStatus().half!=false) {
array.push(list[i]);
blockTopics.push(list[i].topic);
}
} else if (list[i].level == 0) {
// 过滤父节点,nodes[i].getCheckStatus().half===true表示是半选中
if (list[i].getCheckStatus().half != true) {
array.push(list[i]);
blockTopics.push(list[i].topic);
}
}
};
}
// console.log("array:",array);
var jsonArray = new Array();
var jsonId = [];
if(array==undefined){
flag = false;
alert('Please select the lights you need config!');
return;
}else{
for (var i = 0; i < array.length; i++) {
var j = {};
var id = array[i].id;
j.topic = array[i].topic;
//console.log("id",id);
if(id.indexOf("community")!=-1){
//j.whatId = "1"; //EDIT FOR SENDING TO DONGLE 100519
//j.idValue = id.substring(9);
j.whatId = 1;
j.idValues = [parseInt(id.substring(9))];
//console.log("community");
}else if(id.indexOf("block")!=-1){
//j.whatId = "2";
//j.idValue = id.substring(5);
j.whatId = 2;
j.idValues = [parseInt(id.substring(5))];
//console.log("block");
}else if(id.indexOf("floor")!=-1){
//j.whatId = "3";
//j.idValue = id.substring(5);
j.whatId = 3;
var floorNO = array[i].floorNO;
j.idValues = [parseInt(floorNO)];
//j.idValues = [parseInt(id.substring(5))];
//console.log("floor");
}else if(id.indexOf("light")!=-1){
//j.whatId = "4";
//j.idValue = id.substring(5);
j.whatId = 4;
var lightSN = array[i].lightSN;
j.idValues = [parseInt(lightSN)];
//j.idValues = [parseInt(id.substring(5))];
//console.log("light");
}
//\delete j['topic'];
jsonId.push(j);
jsonArray.push(jsonId);
}
}
// console.log(jsonID);
//2.PIR
var pirObj = $("#pirEnable").get(0);
if(pirObj.checked){
var pir = 1;
}else{
var pir = 0;
}
//4.dimLvl
var dimLevel = $('.dimLevel').text().trim();
dimLevel = parseInt(dimLevel);
// console.log(dimLevel);
//5.holdtime
var holdtime = $("#holdtime").val().trim();
holdtime = parseInt(holdtime);
// console.log("holdtime",holdtime);
//6.PIRSen
var pirSen = $("#s_sensitivity option:selected").val().trim();
pirSen = parseInt(pirSen);
// console.log(pirSen);
//8.photoLvl
var photoLvl = $(".photosensor").text().trim();
photoLvl = parseInt(photoLvl);
//9.RTC
var rtcObj = $("#rtc").get(0);
if(rtcObj.checked){
var rtc = 1;
}else{
var rtc = 0;
}
// console.log("RTC",rtc);
//10.wintermonth
var wintermonth = $("#wintermonth").val().trim();
wintermonth = parseInt(wintermonth);
// console.log(wintermonth);
//11.summermonth
var summermonth = $("#summermonth").val().trim();
summermonth = parseInt(summermonth);
//12.deviceTime
var deviceTimeObj = $("#deviceTime").get(0);
if(deviceTimeObj.checked){
var deviceTime = 1;
}else{
var deviceTime = 0;
}
console.log("deviceTime",deviceTime);
function getStrTime(time){
var array = time.split(':');
var hour = array[0];
var minute = array[1];
strTime = hour + minute;
return strTime;
}
//12.WT
var wst = $("#winterstart").val().trim();
wst = getStrTime(wst);
//console.log("wst",wst);
var wet = $("#winterend").val().trim();
wet = getStrTime(wet);
var wt = wst + wet;
//console.log("WT",wt);
//14.ST
var sst = $("#summerstart").val().trim();
sst = getStrTime(sst);
//console.log("sst",sst);
var set = $("#summerend").val().trim();
set = getStrTime(set);
//console.log("set",set);
var st = sst + set;
//console.log("ST",st);
//15.userId
var userId = ${currentUser.userId};
//console.log("userId",userId);
//16.lightIntensity
var lightIntensity = $("#lightIntensity option:selected").val().trim();
lightIntensity = parseInt(lightIntensity);
console.log(lightIntensity);
sendMessage();
//console.log("params",params);
function sendMessage(){
//把json对象转成String
var str = JSON.stringify(params);
//console.info("params" + str);
//这里先演示传入一个字符串,后面会从数据库查询数,然后封装成一个json字符串对象传给后台广播给C程序
var r = confirm('Submit the config parameters?');
if(r == true) {
for (var i=0;i < blockTopics.length;i++){
for (var j = 0; j < jsonArray.length; j++) {
if (jsonArray[0][j].topic == blockTopics[i]){
delete jsonArray[0][j]['topic'];
var params = {
eventId:eventId,
messageCode:0,
jsonId:[jsonArray[0][j]],
pir:pir,
dimLvl:dimLevel,
holdTime:holdtime,
pirSen:pirSen,
photoLvl:photoLvl,
rtc:rtc,
wm:wintermonth,
sm:summermonth,
wt:wt,
st:st,
deviceTime:deviceTime,
lightIntensity:lightIntensity,
userId:userId
};
console.log(params);
console.log("This one sent to: " + blockTopics[i]);
var msg = JSON.stringify(params);
var topic = blockTopics[i];
publish(msg, topic, 1);
}
}
}
} else{
alert("Cancelled!");
}
}
});
});
// DIM Level
$(function() {
var $slide = $(".slide_father");
var $bar = $(".slide_son2");
var $ball = $(".slide_ball");
var $dimLevel = $(".dimLevel");
var ballLeft = $ball.position().left;
var startX = 29;
var width = $bar.width();
// 跃进功能
$bar.on('click',function(e){
// 获取点击的位置和进度条宽度的比例
// 通过比例去计算播放时间
// e.offsetX e.offsetY 当前点击的地方 距离坐标的左边和上边的坐标
//相对于当前元素的
var barX = e.offsetX + 20;
if(barX >= 482){
barX = 482;
}
$ball.css("left",barX);
ballLeft = $ball.position().left;
if(ballLeft >= 482){
ballLeft = 482;
}
//这里加10是因为从10%开始标识的
var ratio = Math.floor(((ballLeft-50)/width)*100+10);
if(ratio<=10){
ratio = 10;
} else if(ratio>=100){
ratio = 100;
}
$('.dimLevel').html(ratio);
});
//滑动:进度条拖拽
var ball = $ball.get(0);
var slide = $slide.get(0);
var bar = $bar.get(0);
ball.onmousedown = function() {
// console.log(bar.offsetWidth);
document.onmousemove = function(e){
var leftv = e.clientX - bar.offsetLeft - slide.offsetLeft - 250;
if (leftv<=0){
leftv = 0;
} else if(leftv>=482){
leftv = 482;
}
var ratio2 = Math.floor(((leftv-25)/width)*100+10);
// console.log('ratio2',ratio2);
leftv = leftv + 29;
ball.style.left = leftv + 'px';
if(ratio2<=10){
ratio2 = 10;
}else if(ratio2>=100){
ratio2 = 100;
}
$('.dimLevel').html(ratio2);
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
});
// Photosensor Sensitivity
$(function(){
var $ps_slide = $(".slide_photosensor_sensi");
var $ps_bar = $(".slide_ps_son2");
var $ps_ball = $(".slide_ps_ball");
var $photosensor = $(".photosensor");
// var ballLeft = $ps_ball.position().left;
var startX = 29;
var width = $ps_bar.width();
//点击跃进功能
$ps_bar.on('click',function(e){
var barX = e.offsetX + 20;
if(barX>=482){
barX = 482;
}
$ps_ball.css("left",barX);
var ballLeft = $ps_ball.position().left;
if(ballLeft>=482){
ballLeft = 482;
}
//这里是从0开始的
var ratio = Math.floor(((ballLeft-15)/width)*100);
if(ratio<=0){
ratio = 0;
}else if(ratio>100){
ratio = 100;
}
$('.photosensor').html(ratio);
});
//滑动:进度条拖拽
var ps_ball = $ps_ball.get(0);
var ps_slide = $ps_slide.get(0);
var ps_bar = $ps_bar.get(0);
ps_ball.onmousedown = function(){
document.onmousemove = function(e){
var leftv = e.clientX - ps_bar.offsetLeft - ps_slide.offsetLeft - 250;
if(leftv<=0){
leftv = 0;
}else if(leftv>=482){
leftv = 482;
}
var ratio2 = Math.floor((leftv/width)*100);
leftv = leftv + 29;
ps_ball.style.left = leftv + 'px';
if(ratio2<=0){
ratio2 = 0;
}else if(ratio2>=100){
ratio2 = 100;
}
$('.photosensor').html(ratio2);
};
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
};
};
});
//Hold Time
$(function(){
var ht_input = $(".hold_time .ht_input input");
ht_input.on('blur',function(){
var holdtime = ht_input.val();
if(holdtime<5 || holdtime>255){
$(".hold_time .ht_input .ht_number").html('Invalid number');
alert('Hold Time Input Number should be between 5 and 255!');
}else{
$(".hold_time .ht_input .ht_number").html('');
}
});
});
//Winter Month && Summer Month
$(function(){
var $wintermonth = $("#wintermonth");
var flag = false;
$wintermonth.on('blur',function(){
var wintermonth = $wintermonth.val();
if(wintermonth<1 || wintermonth>12){
flag = false;
$(".wm_number").html('Invalid Number');
alert('Winter Month Number should between 1 and 12!');
}else{
flag = true;
$(".wm_number").html('');
}
if(flag){
if(!/^\d+$/.test(wintermonth)){
$(".wm_number").html('Invalid Number');
alert('This number must be integer!');
}else{
$(".wm_number").html('');
}
}
});
var $summermonth = $("#summermonth");
var flag = false;
$summermonth.on('blur',function(){
var summermonth = $summermonth.val();
if(summermonth<1 || summermonth>12){
flag = false;
$(".sm_number").html('Invalid Number');
alert('Summer Month Number should between 1 and 12!');
}else{
flag = true;
$(".sm_number").html('');
}
if(flag){
if(!/^\d+$/.test(summermonth)){
$(".sm_number").html('Invalid Number');
alert('This number must be integer!');
}else{
$(".sm_number").html('');
}
}
});
});
/* ztree实现层级area_block_floor_light_info */
$(function(){
//初始化输入框的值
$("#winterstart").val("08:00");
$("#winterend").val("17:30");
$("#summerstart").val("07:00");
$("#summerend").val("19:00");
var setting2 = {
data: {
simpleData: {
enable: true //使用简单json数据构造ztree节点
}
},
check: {
enable: true
},
view: {
fontCss : {color:"#000"}
},
callback:{
onCheck: zTreeOnCheck
}
};
setting2.check.chkboxType = { "Y" : "ps", "N" : "ps" };
//发送ajax请求,获取json数据
//jquery提供的ajax方法:ajax,post,get,load,getJSON,getScript
//var url = "${pageContext.request.contextPath}/json/menu.json";
var url = "${pageContext.request.contextPath}/showZtreeMenu.action";
$.post(url,{},function(data){
//console.log('data',data);
//调用API初始化ztree
$.fn.zTree.init($("#ztree"), setting2, data);
},'json');
});
function zTreeOnCheck(){
refreshLayers();
clearCheckedOldNodes();
}
//刷新图层的显示情况
var layers;
function refreshLayers() {
var zTree = $.fn.zTree.getZTreeObj("ztree");
var changedNodes = zTree.getChangeCheckedNodes();
for ( var i=0 ; i < changedNodes.length ; i++ ){
var treeNode = changedNodes[i];
}
}
//清理善后工作
function clearCheckedOldNodes() {
var zTree = $.fn.zTree.getZTreeObj("ztree"),
nodes = zTree.getChangeCheckedNodes();
for (var i=0, l=nodes.length; i<l; i++) {
nodes[i].checkedOld = nodes[i].checked;
}
};
</script>
</head>
<body>
<div class="wrapper">
<!-- Sidebar -->
<nav id="sidebar">
<div class="sidebar-header">
<font color="#1c6299" size="7" face="Arial"><b>Learn</b></font>
<font color="#15a2b3" size="7" face="Helvetica"><b>tech</b></font>
<br><font color="#5d5b5d" size="5" face="Calibri">Smart LMS v1.0.1</font>
</div>
<div class="sidebar-username"><font color="black">Welcome, ${currentUser.userName}</font></div>
<ul class="list-unstyled components">
<li>
<a href="${pageContext.request.contextPath}/community/dashboard.action">Home dashboard</a>
</li>
<li>
<a href="${pageContext.request.contextPath}/community/controlLights.action">Control lights</a>
</li>
<li>
<a href="#pageSubmenu2" data-toggle="collapse" aria-expanded="true" class="dropdown-toggle">Configure lights</a>
<ul class="list-unstyled" id="pageSubmenu2">
<li class="active">
<a href="${pageContext.request.contextPath}/configParam.action">SPS100</a>
</li>
<li>
<a href="${pageContext.request.contextPath}/sps200Config.action">SPS200</a>
</li>
<li>
<a href="${pageContext.request.contextPath}/photoParam.action">Photosensor</a>
</li>
<li>
<a href="${pageContext.request.contextPath}/configAddNew.action">Add new data</a>
</li>
</ul>
</li>
<li>
<a href="#pageSubmenu3" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Manage account</a>
<ul class="collapse list-unstyled" id="pageSubmenu3">
<li>
<a href="${pageContext.request.contextPath}/user/user_account.action">Update profile</a>
</li>
<c:if test="${currentUser.userType == 1}">
<li>
<a href="${pageContext.request.contextPath}/user/user_register.action">Register new user</a>
</li>
<li>
<a href="${pageContext.request.contextPath}/user/user_management.action">User management</a>
</li>
</c:if>
</ul>
</li>
</ul>
<ul class="list-unstyled CTAs">
<li>
<a href="#" class="download">Logout</a>
</li>
<li><br>
<div id="time" style="text-align:center">
<script>
updateTime();
function updateTime() {
var date = new Date().toLocaleString();
var day = new Date().getDay();
var datetime;
if (day == 0) {
day = "<br>Sunday";
} else if (day == 1) {
day = "<br>Monday";
} else if (day == 2) {
day = "<br>Tuesday";
} else if (day == 3) {
day = "<br>Wednesday";
} else if (day == 4) {
day = "<br>Thursday";
} else if (day == 5) {
day = "<br>Friday";
} else {
day = "<br>Saturday";
}
datetime = date + day;
document.getElementById('time').innerHTML = datetime;
}
setInterval("updateTime()", 1000);
</script>
</div>
</li>
</ul>
</nav>
<div id="content">
<div class="main">
<div id="container">
<div id="title">Configure SPS100 Lights</div>
<div id="first_hr">
<hr align="center" width="80%" color="#b5b7b9">
</div>
<!-- D/E PIR Sensitivity -->
<table style="width:70%; margin:0 auto">
<tr>
<td style="width:5%">PIR D/E</td>
<td style="width:20%"><input type="checkbox" checked="checked" id="pirEnable"></td>
<td style="width:5%">PIR Sensitivity</td>
<td style="width:15%">
<div class="s_select">
<select name="" id="s_sensitivity">
<option value="1">High</option>
<option value="2" selected="selected">Medium-High</option>
<option value="3">Medium</option>
<option value="4">Medium-Low</option>
<option value="5">Low</option>
</select>
</div>
</td>
</tr>
</table>
<br>
<!-- DIM Level -->
<div class="slide_title">DIM Level (10-100%)</div>
<br><br>
<div class="comment_father">
<div class="comment_son1">
<ul>
<li>10%</li>
<li>20%</li>
<li>30%</li>
<li>40%</li>
<li>50%</li>
<li>60%</li>
<li>70%</li>
<li>80%</li>
<li>90%</li>
<li>100%</li>
</ul>
</div>
<div class="comment_son2">
<ul>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
</ul>
</div>
</div>
<div class="slide_father">
<div class="slide_son1"></div>
<div class="slide_son2"></div>
<div class="slide_ball"></div>
<div class="dimLevel">10</div>
</div>
<!-- Photosensor Sensitivity -->
<br>
<div class="slide_ps_title">Photosensor Level (0-100)</div>
<div class="comment_ps_father">
<div class="comment_ps_son1">
<ul>
<li>0</li>
<li>10</li>
<li>20</li>
<li>30</li>
<li>40</li>
<li>50</li>
<li>60</li>
<li>70</li>
<li>80</li>
<li>90</li>
<li>100</li>
</ul>
</div>
<div class="comment_ps_son2">
<ul>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
<li>|</li>
</ul>
</div>
</div>
<div class="slide_photosensor_sensi">
<div class="slide_ps_son1"></div>
<div class="slide_ps_son2"></div>
<div class="slide_ps_ball"></div>
<div class="photosensor">0</div>
</div>
<br><br>
<!-- Hold Time -->
<div class="hold_time">
<div class="ht_input">Hold Time: <input type="text" name="holdtime" value="15" id="holdtime"> Seconds
<span class="ht_number"></span>
</div>
</div>
<!-- Schedule -->
<div class="schedule">
<div class="sche_checkbox">
Schedule: D/E <input type="checkbox" checked="checked" id="rtc">
</div>
</div>
<!-- lightIntensity -->
<div class="lightIntensity">
<div class="title_lightIntensity">
Light Intensity
</div>
<div class="s_lightIntensity">
<select id="lightIntensity">
<option value="1">Fast</option>
<option value="2" selected="selected">Medium</option>
<option value="3">Slow</option>
</select>
</div>
</div>
<br>
<!-- Month -->
<table style="width: 70%; margin: auto">
<tr><td>Group 1 </td><td>Group 2</td></tr>
<tr><td>
<div id="first_hr">
<hr align="left" width="70%" color="#b5b7b9">
</div></td><td>
<div id="first_hr">
<hr align="left" width="70%" color="#b5b7b9">
</div>
</td></tr>
<tr>
<td style="width:30%;">
<div class="winter_month">
Period: <input style="margin-left:42px" type="text" name="wintermonth" value="10" id="wintermonth">
<span class="wm_number"></span>
</div>
</td>
<td style="width:30%;">
<div class="summer_month">
Period: <input style="margin-left:42px" type="text" name="summermonth" value="5" id="summermonth">
<span class="sm_number"></span>
</div>
</td>
</tr>
<tr>
<td style="width:35%;">
<div class="winter_start">
Start time: <input style="margin-left:10px" type="time" name="winterstart" id="winterstart">
<span class="ws_number"></span>
</div>
</td>
<td style="width:35%;">
<div class="summer_start">
Start time: <input style="margin-left:10px" type="time" name="summerstart" id="summerstart">
<span class="we_number"></span>
</div>
</td>
</tr>
<tr>
<td style="width:35%;">
<div class="winter_end">
End time: <input style="margin-left:20px" type="time" name="winterend" id="winterend">
</div>
</td>
<td style="width:35%;">
<div class="summer_end">
End time: <input style="margin-left:20px" type="time" name="summerend" id="summerend">
</div>
</td>
</tr>
</table>
<br>
<!-- Configure Device Time -->
<div class="deviceTime">
<div class="deviceTime_checkbox">
Configure Device Time: D/E <input type="checkbox" id="deviceTime">
</div>
</div>
<!-- area_block_floor_light_info -->
<div class="area_block">
<ul id="ztree" class="ztree">
</ul>
</div>
<div class="config_btn">
<button id="config_param">Submit</button>
</div>
<!-- <div class="feedback">
<div class="info"></div>
</div>
<div class="t_title">List of Configuration failed SPS100</div>
<div class="show_table">
<table id="table" border="1">
<tr>
<td>Light</td>
<td>Floor</td>
<td>Block</td>
<td>Area</td>
</tr>
</table>
</div>
<div class="resubmit">
<button id="resubmit">Resubmit</button>
</div> -->
</div>
<div id="bottom">
<p>
<br><font color="#999">Copyright © 1986 - 2018</font> <b>Learn Group Ltd. All rights reserved.</b>
</p>
</div>
</div>
</div>
</div>
</body>
</html>
299
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
