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.
324 lines
12 KiB
324 lines
12 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>
|
|
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
|
|
<!--[if lt IE 9]>
|
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
|
<![endif]-->
|
|
<style>
|
|
.layui-table thead span {
|
|
/*background-color: #acd3ed;*/
|
|
font-size: 15px;
|
|
}
|
|
|
|
.layui-table tbody tr td div {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.layui-table tbody tr:hover {
|
|
background-color: #f7e8df;
|
|
}
|
|
|
|
</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:5px;float:right"
|
|
id="refresh" title="刷新">
|
|
<i class="layui-icon layui-icon-refresh" style="line-height:30px"></i>
|
|
</a>
|
|
</div>
|
|
<div class="layui-fluid" style="margin-bottom: 30px;min-height: 740px">
|
|
<!-- style="width: 90%;margin-left: auto;margin-right: auto;"-->
|
|
<div class="layui-card" style="border-radius: 20px;">
|
|
|
|
<div class="layui-card-body">
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 10px;">
|
|
<legend class="layui-icon">设备序列号管理 </legend>
|
|
</fieldset>
|
|
<form class="layui-form layui-col-space5" action="" id="myForm">
|
|
<div class="layui-input-inline">
|
|
<select lay-verify="choose" lay-filter="choose" name="option">
|
|
<option value="">选择要查找的内容</option>
|
|
<option value="1">设备ID</option>
|
|
</select>
|
|
</div>
|
|
<div class="layui-inline layui-show-xs-block">
|
|
<input style="display: none" lay-verify="" id="findText" type="text" name="message"
|
|
autocomplete="false" placeholder="" lay-reqText="" class="layui-input">
|
|
</div>
|
|
<div class="layui-inline layui-show-xs-block">
|
|
<button class="layui-btn" lay-submit="" lay-filter="search">
|
|
<i class="layui-icon"></i>查找
|
|
</button>
|
|
</div>
|
|
</form>
|
|
<table id="demo" lay-filter="demo"></table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
layui.use(['table', 'form', 'layer', 'jquery',], function () {
|
|
var table = layui.table;
|
|
var form = layui.form;
|
|
var layer = layui.layer;
|
|
var $ = layui.jquery;
|
|
|
|
$("#fresh").click(function () {
|
|
setTimeout(() => window.scrollTo(0, 870), 10);
|
|
});
|
|
|
|
$("#refresh").click(function () {
|
|
$("#myForm")[0].reset();
|
|
layui.form.render();
|
|
$("#findText").hide();
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.success("设备序列号列表已校准", "<div class = 'layui-icon layui-icon-heart-fill'> 同步成功</div>", parent.noticeOpt6);
|
|
table.render({
|
|
elem: '#demo'
|
|
, url: '/index/Device/deviceList' //数据接口
|
|
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
|
|
, loading: true
|
|
, size: 'lg'
|
|
|
|
, page: {
|
|
layout: ['prev', 'page', 'next', 'count', 'limit']//自定义布局顺序
|
|
|
|
, groups: 10 //最多几个跳页按钮
|
|
, first: false //不显示首页
|
|
, last: false //不显示尾页
|
|
}
|
|
, cols: [get_cols()]
|
|
});
|
|
});
|
|
|
|
//动态显示
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.info('设备信息总览', '已进入', parent.noticeOpt1);
|
|
setTimeout(function () {
|
|
$('.flag').show();
|
|
tableIns.resize();
|
|
},20);
|
|
|
|
|
|
//自定义验证规则
|
|
form.verify({
|
|
choose: function (value) {
|
|
if (!value) {
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.error('请选择搜索项', '操作异常', parent.noticeOpt5);
|
|
return '请选择搜索项！'
|
|
}
|
|
// return '请选择搜索项！'
|
|
},
|
|
message: function (value) {
|
|
if (!value) {
|
|
parent.layui.notice.remove();
|
|
parent.layui.notice.error('请输入要搜索的内容', '操作异常', parent.noticeOpt5);
|
|
return '请输入要搜索的内容';
|
|
}
|
|
|
|
}
|
|
|
|
});
|
|
|
|
// 动态显示搜索选项提示
|
|
form.on('select(choose)', function (data) {
|
|
// console.log(data.elem); //得到select原始DOM对象
|
|
// console.log(data.value); //得到被选中的值
|
|
// console.log(data.othis); //得到美化后的DOM对象
|
|
var findText = $("#findText");
|
|
var select = data.value;
|
|
//默认不显示输入框
|
|
findText.hide();
|
|
//重置验证类型
|
|
findText.attr('lay-verify', '');
|
|
//每次切换搜索项后都要清空里面的值
|
|
findText.val('');
|
|
// console.log(findText.val);
|
|
switch (select) {
|
|
case "1":
|
|
findText.attr('lay-verify', 'message');
|
|
findText.attr('placeholder', '请输入要搜索的设备ID');
|
|
// findText.attr('lay-reqText', '请输入要搜索的设备ID');
|
|
findText.show();
|
|
break;
|
|
case "2":
|
|
findText.attr('lay-verify', 'message');
|
|
findText.attr('placeholder', '请输入要搜索的设备类型');
|
|
// findText.attr('lay-reqText', '请输入要搜索的设备类型');
|
|
findText.show();
|
|
break;
|
|
}
|
|
|
|
});
|
|
|
|
//生成数据表格
|
|
var tableIns = table.render({
|
|
elem: '#demo'
|
|
, url: '/index/Device/deviceList' //数据接口
|
|
, toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
|
|
, loading: true
|
|
, size: 'lg'
|
|
|
|
, page: {
|
|
layout: ['prev', 'page', 'next', 'count', 'limit']//自定义布局顺序
|
|
|
|
, groups: 10 //最多几个跳页按钮
|
|
, first: false //不显示首页
|
|
, last: false //不显示尾页
|
|
}
|
|
, cols: [get_cols()]
|
|
// ,done: function(res, curr, count){
|
|
// //如果是异步请求数据方式，res即为你接口返回的信息。
|
|
// //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
|
|
// console.log(res.data);
|
|
//
|
|
// //得到数据总量
|
|
// console.log(count);
|
|
// }
|
|
});
|
|
|
|
//搜索功能
|
|
form.on('submit(search)', function (data) {
|
|
layer.msg('搜索中', {time: 500});
|
|
// console.log(data.field.findTime);
|
|
var load = layer.load();
|
|
tableIns.reload({
|
|
where: { //设定异步数据接口的额外参数，任意设
|
|
choose: data.field.option
|
|
, message: data.field.message
|
|
}
|
|
, page: {
|
|
curr: 1 //重新从第 1 页开始
|
|
}
|
|
, done: function (res, curr, count) {
|
|
layer.close(load);
|
|
parent.layui.notice.remove();
|
|
if (count === 0) {
|
|
parent.layui.notice.success(res.msg, '搜索完成', parent.noticeOpt4);
|
|
layer.msg('搜索完成，' + res.msg, {time: 1500});
|
|
} else {
|
|
parent.layui.notice.success('找到' + count + '条数据', '搜索完成', parent.noticeOpt4);
|
|
layer.msg('搜索完成，找到' + count + '条数据', {time: 1500});
|
|
}
|
|
|
|
}
|
|
});
|
|
|
|
return false;
|
|
});
|
|
|
|
function get_cols() {
|
|
return [ //表头,style: 'background-color: #bee4ca ; color: #2c2525 ' ,style: 'background-color: #acd3ed;color: #2c2525;' ,style: 'background-color: #bda9c5'
|
|
{
|
|
field: 'deviceId',
|
|
title: '设备ID',
|
|
minWidth: 100,
|
|
align: 'center'
|
|
}
|
|
, {
|
|
field: 'deviceName',
|
|
title: '设备名称',
|
|
minWidth: 100,
|
|
align: 'center'
|
|
}
|
|
, {
|
|
field: 'productId',
|
|
title: '产品id',
|
|
minWidth: 100,
|
|
align: 'center'
|
|
}
|
|
, {
|
|
field: 'imei',
|
|
title: 'IMEI号',
|
|
minWidth: 100,
|
|
align: 'center'
|
|
}
|
|
, {
|
|
field: 'imsi',
|
|
title: 'IMSI号',
|
|
minWidth: 100,
|
|
align: 'center'
|
|
}
|
|
, {
|
|
field: 'firmwareVersion',
|
|
title: '固件版本',
|
|
minWidth: 100,
|
|
align: 'center'
|
|
}
|
|
, {
|
|
field: 'deviceStatus', title: '设备状态',
|
|
width: 90, align: 'center',
|
|
templet: function (d) {
|
|
if (d.deviceStatus == 1) {
|
|
return '<span style="color: #33912b;font-family: 黑体;font-weight: bold;">已激活</span>'
|
|
} else if (d.deviceStatus == 2) {
|
|
return '<span style="color: #ab3635;font-family: 黑体;font-weight: bold;">已注销</span>'
|
|
} else {
|
|
return '<span style="color: #9F9F9F;font-family: 黑体;font-weight: bold;">已注册</span>'
|
|
}
|
|
}
|
|
}
|
|
, {
|
|
field: 'netStatus', title: '设备在线状态',
|
|
width: 90, align: 'center',
|
|
templet: function (d) {
|
|
if (d.netStatus == 1) {
|
|
return '<span style="color: #33912b;font-family: 黑体;font-weight: bold;">在线</span>'
|
|
} else {
|
|
return '<span style="color: #ab3635;font-family: 黑体;font-weight: bold;">不在线</span>'
|
|
}
|
|
}
|
|
}
|
|
, {
|
|
field: 'onlineAt',
|
|
title: '设备最后上线时间',
|
|
minWidth: 100,
|
|
align: 'center'
|
|
}
|
|
, {
|
|
field: 'offlineAt',
|
|
title: '设备最后下线时间',
|
|
minWidth: 100,
|
|
align: 'center'
|
|
}
|
|
, {
|
|
field: 'operation',
|
|
title: '操作',
|
|
width: 90,
|
|
align: 'center',
|
|
toolbar: '#barDemo'
|
|
}
|
|
]
|
|
}
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|