373 lines
11 KiB
HTML
373 lines
11 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"/>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<form class="layui-form" lay-filter="demo-val-filter">
|
|
<input type="text" name="code" lay-verify="title" autocomplete="off" placeholder="请输入" class="layui-input hidden-input" style="display: none;">
|
|
<!-- 开关 -->
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">设备开关:</label>
|
|
<div class="layui-input-inline">
|
|
<input type="checkbox" name="controlState" lay-skin="switch" lay-filter="switchTest" title="开 | 关">
|
|
</div>
|
|
</div>
|
|
<!-- 类型选择 -->
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">类型选择：</label>
|
|
<div class="layui-input-inline">
|
|
<select name="controlMode" lay-verify="required" lay-filter="typeFilter">
|
|
<option value="">请选择类型</option>
|
|
<option value="0">制冷</option>
|
|
<option value="1">抽湿</option>
|
|
<option value="2">手动</option>
|
|
<option value="3">制热</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 空调风速 -->
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">空调风速：</label>
|
|
<div class="layui-input-inline">
|
|
<select name="speedMode" lay-verify="required" lay-filter="typeFilter">
|
|
<option value="">请选择类型</option>
|
|
<option value="1">高</option>
|
|
<option value="2">中</option>
|
|
<option value="3">低</option>
|
|
<option value="4">自动</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<!-- 运行温度 -->
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">运行温度：</label>
|
|
<div class="layui-input-inline">
|
|
<input name="temp" type="number" lay-affix="number" placeholder="设置温度" step="1" min="16" max="30"
|
|
class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fixed-bottom">
|
|
<button type="button" class="submit-btn" lay-submit lay-filter="formSubmit">
|
|
<span class="btn-text">确认提交</span>
|
|
<i class="layui-icon loading-icon" style="display: none;"></i>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<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', 'laydate', 'layer', 'upload'], function () {
|
|
form = layui.form;
|
|
layer = layui.layer;
|
|
upload = layui.upload;
|
|
laydate = layui.laydate;
|
|
|
|
formReproduction();
|
|
// 监听表单提交
|
|
form.on('submit(formSubmit)', function (data) {
|
|
// 获取各个字段的值
|
|
const controlMode = data.field.controlMode;
|
|
const controlState = data.field.controlState;
|
|
const speedMode = data.field.speedMode;
|
|
const temp = data.field.temp;
|
|
// 表单验证
|
|
if (!controlMode) {
|
|
layer.msg('请选择类型', {icon: 6});
|
|
return false;
|
|
}
|
|
if (!speedMode) {
|
|
layer.msg('请选择空调风速', {icon: 6});
|
|
return false;
|
|
}
|
|
if (!temp) {
|
|
layer.msg('运行温度不能为空', {icon: 6});
|
|
return false;
|
|
}
|
|
if (controlState === "on"){
|
|
data.field.controlState = '1'
|
|
} else{
|
|
data.field.controlState = '0'
|
|
}
|
|
layer.msg(JSON.stringify(data.field), {icon: 6});
|
|
const fromData = data.field
|
|
// 发送请求
|
|
$.ajax({
|
|
type: 'POST',
|
|
url: dataUrl + 'conditioning/updateAirStatus',
|
|
data: fromData,
|
|
dataType: 'json',
|
|
success: function (res) {
|
|
if (res.res === 1) {
|
|
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(res.msg || '下发失败，请重试');
|
|
}
|
|
}
|
|
});
|
|
return false; // 阻止表单默认提交
|
|
});
|
|
// 监听选择框
|
|
form.on('select(typeFilter)', function (data) {
|
|
});
|
|
});
|
|
|
|
function formReproduction() {
|
|
const id = localStorage.getItem('id')
|
|
$.ajax({
|
|
type: 'get',
|
|
url: dataUrl + 'conditioning/airForm',
|
|
data: {
|
|
id: id
|
|
},
|
|
dataType: 'json',
|
|
success: function (res) {
|
|
const data = res.obj
|
|
const controlState = data.controlState === '1' ? true : false
|
|
//赋值给表单
|
|
form.val('demo-val-filter', {
|
|
"controlState": controlState, // 开关状态
|
|
"controlMode": data.controlMode,
|
|
"speedMode": data.speedMode,
|
|
"temp": data.temp,
|
|
"code": data.code
|
|
});
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
<style>
|
|
html, body {
|
|
width: 100%;
|
|
height: 100%;
|
|
color: white;
|
|
}
|
|
|
|
.container {
|
|
padding: 20px;
|
|
}
|
|
|
|
.layui-layer-content {
|
|
color: #000; /* 设置文本颜色为黑色 */
|
|
}
|
|
|
|
.layui-form-item {
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.layui-form-label {
|
|
color: white;
|
|
width: 120px;
|
|
text-align: right;
|
|
padding: 9px 15px;
|
|
box-sizing: border-box;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* 下拉框样式 */
|
|
.layui-select-title .layui-input {
|
|
background-color: transparent !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.layui-form-select dl {
|
|
background-color: #001a2e;
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
.layui-form-select dl dd {
|
|
color: white;
|
|
}
|
|
|
|
.layui-form-select dl dd.layui-this {
|
|
background-color: #00e0ff;
|
|
}
|
|
|
|
.layui-input-wrap .layui-input-number .layui-icon-up {
|
|
top: 0;
|
|
border-bottom: 1px solid #335054;
|
|
}
|
|
|
|
.layui-badge-rim, .layui-border, .layui-colla-content, .layui-colla-item, .layui-collapse, .layui-elem-field, .layui-form-pane .layui-form-item[pane], .layui-form-pane .layui-form-label, .layui-input, .layui-input-split, .layui-panel, .layui-quote-nm, .layui-select, .layui-tab-bar, .layui-tab-card, .layui-tab-title, .layui-tab-title .layui-this:after, .layui-textarea {
|
|
border-color: #335054;
|
|
}
|
|
|
|
.layui-input-affix .layui-icon {
|
|
color: #ffffff;
|
|
pointer-events: auto !important;
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* 输入框样式 */
|
|
.layui-input {
|
|
background-color: transparent !important;
|
|
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
|
color: white !important;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
width: 200px;
|
|
}
|
|
|
|
/* 时间范围样式 */
|
|
.time-range {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.time-range .layui-form-mid {
|
|
color: white;
|
|
padding: 0 10px !important;
|
|
}
|
|
|
|
/* 按钮样式 */
|
|
.layui-btn {
|
|
background-color: #00e0ff;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
padding: 0 20px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
/* 文件上传区域样式 */
|
|
.upload-area {
|
|
margin-left: 120px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.file-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 15px;
|
|
margin-top: 15px;
|
|
}
|
|
|
|
.file-item {
|
|
position: relative;
|
|
width: 120px;
|
|
background: rgba(0, 0, 0, 0.2);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
}
|
|
|
|
.file-preview {
|
|
width: 100%;
|
|
height: 120px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
.file-preview img {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.file-preview .file-icon {
|
|
font-size: 40px;
|
|
color: #00e0ff;
|
|
}
|
|
|
|
.file-name {
|
|
font-size: 12px;
|
|
color: #fff;
|
|
word-break: break-all;
|
|
line-height: 1.2;
|
|
max-height: 2.4em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.delete-file {
|
|
position: absolute;
|
|
top: -8px;
|
|
right: -8px;
|
|
background: #ff5722;
|
|
color: white;
|
|
border-radius: 50%;
|
|
width: 20px;
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.upload-tips {
|
|
color: rgba(255, 255, 255, 0.6);
|
|
font-size: 12px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* 添加固定按钮样式 */
|
|
.fixed-bottom {
|
|
position: fixed;
|
|
bottom: 20%;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 15px 0;
|
|
text-align: center;
|
|
z-index: 1000;
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
.submit-btn {
|
|
background: #00e0ff;
|
|
border: none;
|
|
color: #fff;
|
|
padding: 8px 30px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.3s;
|
|
}
|
|
|
|
.submit-btn:hover {
|
|
background: #00b8d4;
|
|
}
|
|
|
|
/* 添加loading样式 */
|
|
.loading-icon {
|
|
display: inline-block;
|
|
animation: loading-rotate 1s linear infinite;
|
|
}
|
|
|
|
@keyframes loading-rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
</style>
|
|
</html> |