369 lines
13 KiB
HTML
369 lines
13 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8">
|
||
|
|
<title>智慧路灯-用电模块</title>
|
||
|
|
<link rel="stylesheet" type="text/css" href="../../js/layui-v2.9.18/css/layui.css"/>
|
||
|
|
<style>
|
||
|
|
html,
|
||
|
|
body {
|
||
|
|
width: 97%;
|
||
|
|
height: 97%;
|
||
|
|
margin: 0;
|
||
|
|
padding: 0;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
html {
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-view .layui-table td, .layui-table-view .layui-table th {
|
||
|
|
padding: 5px 0;
|
||
|
|
border-top: none;
|
||
|
|
border-right: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-header {
|
||
|
|
margin-bottom: 0.4%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-header tr {
|
||
|
|
background-image: url(../../img/index/child/titleLong.png);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-header tr th {
|
||
|
|
color: #ffffff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-main tr {
|
||
|
|
background-image: url(../../img/index/child/standardColumnLong.png);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
|
||
|
|
display: inline-block;
|
||
|
|
margin-bottom: 5px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-main tr td {
|
||
|
|
color: rgba(255, 255, 255, 0.8);
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-main tr:hover {
|
||
|
|
background-image: url(../../img/index/child/standardColumnHoverLong.png);
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-size: 100% 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table td, .layui-table th, .layui-table-fixed-r, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
|
||
|
|
border-width: 0px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table[lay-even] tr:nth-child(even) {
|
||
|
|
background-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table {
|
||
|
|
background-color: rgba(0, 0, 0, 0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-laypage-count {
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-box a {
|
||
|
|
color: #FFFFFF !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-form-label {
|
||
|
|
position: relative;
|
||
|
|
float: left;
|
||
|
|
display: block;
|
||
|
|
padding: 12px 6px;
|
||
|
|
width: 94px;
|
||
|
|
font-weight: 400;
|
||
|
|
line-height: 20px;
|
||
|
|
text-align: right;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-tool-self {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-box {
|
||
|
|
margin-left: 1%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-tool-self {
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-page .layui-laypage input {
|
||
|
|
width: 40px;
|
||
|
|
background: transparent;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-page .layui-laypage button {
|
||
|
|
background: transparent;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-box, .layui-box * {
|
||
|
|
box-sizing: content-box;
|
||
|
|
color: #00e0ff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.layui-table-view select[lay-ignore] {
|
||
|
|
display: inline-block;
|
||
|
|
color: white;
|
||
|
|
background: transparent;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<form class="layui-form" id="projectForm" action="" method="post" onsubmit=" return false">
|
||
|
|
<div class="layui-form-item" style="margin-top: 10px;">
|
||
|
|
<div class="layui-inline">
|
||
|
|
<label class="layui-form-label" style="color: white">是否启用：</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input id="checkInput" type="checkbox" name="switchStatus" lay-skin="switch" lay-filter="switchTest"
|
||
|
|
lay-text="ON|OFF">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item" style="margin-top: 10px;">
|
||
|
|
<div class="layui-inline">
|
||
|
|
<label class="layui-form-label" style="color: white">是否选择特殊时间段：</label>
|
||
|
|
<div class="layui-input-block">
|
||
|
|
<input id="speccheckInput" type="checkbox" name="ifDay" lay-skin="switch" lay-filter="switchTests"
|
||
|
|
lay-text="ON|OFF" checked>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item" id="dailyTimeRange">
|
||
|
|
<label class="layui-form-label" style="color: white">每天时间段：</label>
|
||
|
|
<div class="layui-inline">
|
||
|
|
<div class="layui-input-inline">
|
||
|
|
<input type="text" name="startTime" class="layui-input" id="startTime" placeholder="开始时间">
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-mid" style="color:white;">-</div>
|
||
|
|
<div class="layui-input-inline">
|
||
|
|
<input type="text" name="endTime" class="layui-input" id="endTime" placeholder="结束时间">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item" id="specificTimeRange">
|
||
|
|
<label class="layui-form-label" style="color: white">特定时间段：</label>
|
||
|
|
<div class="layui-inline" style="width: 193px;">
|
||
|
|
<input type="text" name="specificTime" class="layui-input"
|
||
|
|
id="ID-laydate-shortcut-range-datetime"
|
||
|
|
placeholder=" - ">
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="layui-form-item" style="display: flex;flex-direction: row;justify-content: center;">
|
||
|
|
<button class="layui-btn" lay-submit lay-filter="demo2">确认</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|
||
|
|
<script type="text/javascript" src="../../js/core/jquery-3.6.0.js"></script>
|
||
|
|
<script type="text/javascript" src="../../js/layui-v2.9.18/layui.js"></script>
|
||
|
|
<script src="../../js/core/public.js" type="text/javascript"></script>
|
||
|
|
<script>
|
||
|
|
let form, layer, laydate;
|
||
|
|
layui.use(['form', 'layer', 'laydate'], function () {
|
||
|
|
form = layui.form;
|
||
|
|
layer = layui.layer;
|
||
|
|
laydate = layui.laydate;
|
||
|
|
|
||
|
|
initData(localStorage.getItem("id"));
|
||
|
|
|
||
|
|
laydate.render({
|
||
|
|
elem: '#startTime',
|
||
|
|
type: 'time',
|
||
|
|
done: function (value, date) {
|
||
|
|
document.getElementById('startTime').value = value;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 渲染结束时间选择器
|
||
|
|
laydate.render({
|
||
|
|
elem: '#endTime',
|
||
|
|
type: 'time',
|
||
|
|
done: function (value, date) {
|
||
|
|
document.getElementById('endTime').value = value;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
// 日期时间范围
|
||
|
|
laydate.render({
|
||
|
|
elem: "#ID-laydate-shortcut-range-datetime",
|
||
|
|
type: "data",
|
||
|
|
range: true,
|
||
|
|
shortcuts: [
|
||
|
|
{
|
||
|
|
text: "上个月",
|
||
|
|
value: function () {
|
||
|
|
let date = new Date();
|
||
|
|
let year = date.getFullYear();
|
||
|
|
let month = date.getMonth();
|
||
|
|
return [
|
||
|
|
new Date(year, month - 1, 1),
|
||
|
|
new Date(year, month, 0, 23, 59, 59)
|
||
|
|
];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "这个月",
|
||
|
|
value: function () {
|
||
|
|
let date = new Date();
|
||
|
|
let year = date.getFullYear();
|
||
|
|
let month = date.getMonth();
|
||
|
|
return [
|
||
|
|
new Date(year, month, 1),
|
||
|
|
new Date(year, month + 1, 0, 23, 59, 59)
|
||
|
|
];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
{
|
||
|
|
text: "下个月",
|
||
|
|
value: function () {
|
||
|
|
let date = new Date();
|
||
|
|
let year = date.getFullYear();
|
||
|
|
let month = date.getMonth();
|
||
|
|
return [
|
||
|
|
new Date(year, month + 1, 1),
|
||
|
|
new Date(year, month + 2, 0, 23, 59, 59)
|
||
|
|
];
|
||
|
|
}
|
||
|
|
}
|
||
|
|
]
|
||
|
|
});
|
||
|
|
|
||
|
|
form.on('switch(switchTests)', function (data) {
|
||
|
|
if (data.elem.checked) {
|
||
|
|
if (data.elem.name === "ifDay") {
|
||
|
|
$("#specificTimeRange").css("display", "flex");
|
||
|
|
}
|
||
|
|
} else {
|
||
|
|
if (data.elem.name === "ifDay") {
|
||
|
|
$("#specificTimeRange").css("display", "none");
|
||
|
|
// 清空特定时间段
|
||
|
|
$("#ID-laydate-shortcut-range-datetime").val("");
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
// 提交事件
|
||
|
|
form.on('submit(demo2)', function (data) {
|
||
|
|
let field = data.field; // 获取表单字段值
|
||
|
|
field.deviceId = localStorage.getItem("id");
|
||
|
|
if (field.switchStatus === "on") {
|
||
|
|
field.switchStatus = "0";
|
||
|
|
} else {
|
||
|
|
field.switchStatus = "1";
|
||
|
|
}
|
||
|
|
if(field.ifDay === "on"){
|
||
|
|
field.ifDay = "0";
|
||
|
|
}else{
|
||
|
|
field.ifDay = "1";
|
||
|
|
}
|
||
|
|
field.status = "1";
|
||
|
|
// if (field.datTime) {
|
||
|
|
// let time = field.datTime.split(" - ");
|
||
|
|
// field.startTime = time[0];
|
||
|
|
// field.endTime = time[1];
|
||
|
|
// }
|
||
|
|
if (field.specificTime) {
|
||
|
|
let specificTime = field.specificTime.split(" - ");
|
||
|
|
field.startDate = specificTime[0];
|
||
|
|
field.endDate = specificTime[1];
|
||
|
|
}
|
||
|
|
// layer.alert(JSON.stringify(field), {
|
||
|
|
// title: '当前填写的字段值'
|
||
|
|
// });
|
||
|
|
// 此处可执行 Ajax 等操作
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
async: false, // 默认异步true,false表示同步
|
||
|
|
url: dataUrl + "lamp/modelsaveInfo",// 请求地址
|
||
|
|
contentType: "application/x-www-form-urlencoded",
|
||
|
|
dataType: 'json', // 服务器返回数据类型
|
||
|
|
data: field, //获取提交的表单字段
|
||
|
|
success: function (data) {
|
||
|
|
let resMsg = data.data;
|
||
|
|
if ("数据下发成功" === resMsg) {
|
||
|
|
layer.msg("数据下发成功", {icon: 1, time: 2000}, function () {
|
||
|
|
//关闭当前layui弹窗
|
||
|
|
let index = parent.layer.getFrameIndex(window.name);
|
||
|
|
parent.layer.close(index); //再执行关闭
|
||
|
|
//刷新父页面
|
||
|
|
window.parent.location.reload();
|
||
|
|
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
layer.msg(error, {icon: 2});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
return false; // 阻止默认 form 跳转
|
||
|
|
});
|
||
|
|
});
|
||
|
|
|
||
|
|
// 初始化数据
|
||
|
|
function initData(id){
|
||
|
|
if(id !== ""){
|
||
|
|
$.ajax({
|
||
|
|
type: 'POST',
|
||
|
|
async: false, // 默认异步true,false表示同步
|
||
|
|
url: dataUrl + "lamp/getCommandInfo",// 请求地址
|
||
|
|
contentType: "application/x-www-form-urlencoded",
|
||
|
|
dataType: 'json', // 服务器返回数据类型
|
||
|
|
data: {
|
||
|
|
deviceId: id
|
||
|
|
},
|
||
|
|
success : function(data) {
|
||
|
|
let resData = data.data;
|
||
|
|
if(resData.length > 0){
|
||
|
|
let switchStatus = resData[0].switchStatus;
|
||
|
|
if(switchStatus === "0"){
|
||
|
|
$("#checkInput").attr("checked", true);
|
||
|
|
form.render('checkbox');
|
||
|
|
}else{
|
||
|
|
$("#specificTimeRange").css("display", "none");
|
||
|
|
$("#checkInput").attr("checked", false);
|
||
|
|
form.render('checkbox');
|
||
|
|
}
|
||
|
|
let ifDay = resData[0].ifDay;
|
||
|
|
if(ifDay === "0"){
|
||
|
|
$("#speccheckInput").attr("checked", true);
|
||
|
|
form.render('checkbox');
|
||
|
|
$("#specificTimeRange").css("display", "flex");
|
||
|
|
}else{
|
||
|
|
$("#speccheckInput").attr("checked", false);
|
||
|
|
form.render('checkbox');
|
||
|
|
$("#specificTimeRange").css("display", "none");
|
||
|
|
}
|
||
|
|
let startTime = resData[0].startTime;
|
||
|
|
let endTime = resData[0].endTime;
|
||
|
|
$("#startTime").val(startTime);
|
||
|
|
$("#endTime").val(endTime);
|
||
|
|
let startDate = resData[0].startDate;
|
||
|
|
let endDate = resData[0].endDate;
|
||
|
|
if(startDate && endDate){
|
||
|
|
$("#ID-laydate-shortcut-range-datetime").val(startDate + " - " + endDate);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|