You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
284 lines
13 KiB
284 lines
13 KiB
<!DOCTYPE html>
|
|
<html class="x-admin-sm">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>增删设备</title>
|
|
<meta name="renderer" content="webkit">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
<meta name="viewport"
|
|
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
|
|
<link rel="stylesheet" href="/css/font.css">
|
|
<link rel="stylesheet" href="/css/xadmin.css">
|
|
<script src="/lib/layui/layui.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="/js/xadmin.js"></script>
|
|
|
|
<style>
|
|
.layui-form-select dl {
|
|
max-height: 224px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="layui-anim layui-anim-scale flag" style="display: none"><br/>
|
|
<div class="x-nav">
|
|
<span class="layui-breadcrumb">
|
|
<a>首页</a>
|
|
<a>设备管理</a>
|
|
<a>增删设备</a>
|
|
</span>
|
|
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
|
|
onclick="location.reload()" title="刷新">
|
|
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
|
|
</a>
|
|
</div>
|
|
<div class="layui-fluid">
|
|
<div class="layui-row layui-col-space15">
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card" style="border-radius: 20px;">
|
|
<div class="layui-card-body" style="background-image: linear-gradient(#8dd6d1,#ffffff,#ffffff, #8dd6d1);border-radius: 20px;margin-bottom: 20px">
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
|
|
<legend class="layui-icon">删除设备 </legend>
|
|
</fieldset>
|
|
<div id="deleteDevice" style="margin-bottom: 20px">
|
|
{foreach $data as $value}
|
|
<button type="button" class=" layui-btn layui-btn-lg layui-btn-radius"
|
|
style="margin-left: 0;margin-bottom: 7px">
|
|
<i class="layui-icon">{$value.icon}</i>
|
|
<i id="chinese">{$value.chinese}</i>
|
|
<b style="display: none">{$value.function}</b>
|
|
<i class="layui-icon layui-icon-delete" style="margin-left: 10px"></i>
|
|
</button>
|
|
{/foreach}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-card" style="border-radius: 20px;">
|
|
<div class="layui-card-body" style="background-image: linear-gradient(#ffeae4,#ffffff, #ffeae4);border-radius: 20px;">
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
|
|
<legend class="layui-icon">添加设备 </legend>
|
|
</fieldset>
|
|
<form class="layui-form" action="">
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">设备名</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="devname" lay-verify="required" lay-reqtext="设备名为必填项，岂能为空？"
|
|
placeholder="注意名称不能与现有设备相同"
|
|
title="注意名称不能与现有设备相同"
|
|
autocomplete="off" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">设备标识名</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="title" lay-verify="devicefun" autocomplete="off"
|
|
placeholder="例如：traffic_light  /  temperature_sensor  /  infrared_sensor"
|
|
title="例如：traffic_light  /  temperature_sensor  /  infrared_sensor"
|
|
class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">数据单位</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="unit" lay-verify="" autocomplete="off"
|
|
placeholder="请输入该设备所产生的的数据的单位，可以为空，一旦录入不可更改。"
|
|
title="请输入该设备所产生的的数据的单位，可以为空，一旦录入不可更改。"
|
|
class="layui-input">
|
|
</div>
|
|
</div>
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">选择图标</label>
|
|
<a class="layui-btn" onclick="xadmin.open('图标预览','/index/Tools/icon')">图标预览</a>
|
|
|
|
<div class="layui-input-inline">
|
|
<select name="iconpick" lay-verify="required" lay-reqtext="挑一个您喜欢的图标" lay-search>
|
|
<option value="">直接选择或搜索选择</option>
|
|
{foreach $icons as $icon}
|
|
<option value={$icon.icon_sym}>{$icon.icon_name}</option>
|
|
{/foreach}
|
|
|
|
</select>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-form-item">
|
|
<div class="layui-input-block">
|
|
<button type="submit" class="layui-btn" lay-submit="" lay-filter="add">立即提交</button>
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
layui.use(['form', 'element', 'jquery'], function () {
|
|
var form = layui.form
|
|
, layer = layui.layer
|
|
, element = layui.element
|
|
, $ = layui.jquery;
|
|
|
|
//动态显示
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.info('增删设备界面', '已进入', parent.noticeOpt1);
|
|
// setTimeout(function () {
|
|
// $('.flag').show();
|
|
// }, 30);
|
|
$('.flag').show();
|
|
//自定义验证规则
|
|
form.verify({
|
|
title: function (value) {
|
|
if (value.length < 1) {
|
|
return '您还未填写设备标识名';
|
|
}
|
|
},
|
|
devicefun: function (value) {
|
|
// console.log(/^\d+$/.test(value));
|
|
var regString = /[a-zA-Z]+/; //验证大小写26个字母任意字母最少出现1次。
|
|
if (!(regString.test(value)) || value.length < 1){
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.error('您输入的设备标识名格式错误，请重新输入！', '操作异常', parent.noticeOpt5);
|
|
return '您输入的设备标识名格式错误，请重新输入！';
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
//删除设备事件绑定
|
|
$('#deleteDevice').on('click', 'button', function () {
|
|
// layer.alert('你点击了'+$(this).innerText);
|
|
var deviceName = $(this).find("#chinese").text();
|
|
var deviceFun = $(this).children("b").text();
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.warning('正在删除总设备：' + deviceName, '操作提示：', parent.noticeOpt3);
|
|
layer.confirm('真的要删除 ' + deviceName + ' 吗？', {
|
|
shade: [0.6, '#dc7069'],
|
|
btn: ['我确定', '再想想'],
|
|
icon: 0,
|
|
closeBtn: 0,
|
|
title: '请谨慎执行此操作'
|
|
}, function () {
|
|
// obj.del();
|
|
layer.confirm('请再次确认是否要删除 ' + deviceName, {
|
|
shade: [0.7, '#8c261f'],
|
|
anim: 6,
|
|
btn: ['心意已决', '还是算了吧'],
|
|
icon: 3,
|
|
title: '此操作不可逆转'
|
|
},
|
|
function (index) {
|
|
var load = layer.load();
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "/index/Tools/device_delete",
|
|
data: {
|
|
function: deviceFun,
|
|
deviceName: deviceName
|
|
},
|
|
success: function (msg) {
|
|
layer.close(load);
|
|
parent.layui.notice.remove();
|
|
if (msg === 'ok') {
|
|
parent.layui.notice.success('总设备'+deviceName+'删除成功', '操作完成', parent.noticeOpt4);
|
|
layer.msg('总设备'+deviceName+'删除成功', {time: 1500, icon: 1});
|
|
setTimeout(function () {
|
|
parent.location.reload();
|
|
}, 1600);
|
|
|
|
} else {
|
|
parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
|
|
layer.msg(msg, {time: 1000});
|
|
}
|
|
|
|
},
|
|
error: function () {
|
|
layer.close(load);
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.error('数据传输失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
|
|
layer.alert('数据传输失败，请联系后台管理员！', {icon: 2})
|
|
}
|
|
});
|
|
layer.close(index);
|
|
},
|
|
function () {
|
|
layer.msg('您取消了操作', {time: 600});
|
|
// location.reload();
|
|
}
|
|
);
|
|
|
|
|
|
},
|
|
function () {
|
|
layer.msg('您取消了操作', {time: 600});
|
|
// location.reload();
|
|
}
|
|
);
|
|
|
|
|
|
});
|
|
|
|
//监听提交
|
|
form.on('submit(add)', function (data) {
|
|
// console.log(data.field.devname);
|
|
// console.log(data.field.title);
|
|
//使用ajax传递数据
|
|
// layer.msg('添加中……',{time:600});
|
|
var load = layer.load();
|
|
$.ajax({
|
|
type: "POST",
|
|
url: "/index/Tools/device_insert",
|
|
data: {
|
|
chinese: data.field.devname,
|
|
function: data.field.title,
|
|
icon: data.field.iconpick,
|
|
unit: data.field.unit,
|
|
},
|
|
success: function (msg) {
|
|
//发异步，把数据提交给php
|
|
// console.log(msg);
|
|
layer.close(load);
|
|
parent.layui.notice.remove();
|
|
if (msg === 'ok') {
|
|
// parent.location.reload();
|
|
// 获得frame索引
|
|
// var index = parent.layer.getFrameIndex(window.name);
|
|
parent.layui.notice.success(data.field.devname+'设备新增成功！', '操作完成', parent.noticeOpt4);
|
|
parent.layer.msg(data.field.devname+'设备新增成功！', {
|
|
icon: 6,
|
|
time: 1600
|
|
});
|
|
setTimeout(function () {
|
|
parent.location.reload();
|
|
}, 1700);
|
|
//关闭并刷新页面
|
|
// setTimeout(function () {
|
|
// parent.layer.close(index);
|
|
// }, 1000);
|
|
// parent.location.reload();
|
|
|
|
} else {
|
|
parent.layui.notice.error(msg, '操作异常', parent.noticeOpt5);
|
|
layer.alert(msg, {icon: 7});
|
|
}
|
|
},
|
|
error: function () {
|
|
layer.close(load);
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.error('数据提交失败，请联系后台管理员', '操作异常', parent.noticeOpt5);
|
|
layer.alert('数据提交失败，请联系后台管理员！', {icon: 2})
|
|
}
|
|
});
|
|
return false;
|
|
});
|
|
|
|
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|