<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
|
<link rel="stylesheet" href="../static/css/jquery.upload.css" media="all"/>
|
<style>
|
#formAdvForm {
|
background-color: #f3f3f3;
|
}
|
#formAdvForm .layui-form-item {
|
margin-top: 20px;
|
margin-bottom: 0;
|
}
|
|
#formAdvForm .layui-form-item .layui-inline {
|
margin-bottom: 25px;
|
margin-right: 0;
|
}
|
|
.form-group-bottom {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 10px 20px;
|
background-color: #fff;
|
box-shadow: 0 -1px 2px 0 rgba(0, 0, 0, .05);
|
}
|
.cool-divider {
|
float: left;
|
margin: 4px 18px;
|
display: inline-block;
|
height: 32px;
|
width: 1px;
|
vertical-align: middle;
|
position: relative;
|
top: -.06em;
|
box-sizing: border-box;
|
-webkit-tap-highlight-color: transparent;
|
margin-top: 5px !important;
|
margin-bottom: 5px !important;
|
background: #c8d1dabd;
|
}
|
.sensor-label {
|
display: inline-block;
|
float: left;
|
font-size: 16px;
|
font-weight: bolder;
|
height: 40px;
|
line-height: 40px;
|
text-align: center;
|
white-space: nowrap;
|
vertical-align: baseline;
|
border-radius: .25em;
|
}
|
.online-info {
|
display: inline-block;
|
float: left;
|
font-weight: bold;
|
text-shadow: 0 1px 0 rgb(0 0 0 / 20%);
|
padding: .3em .6em;
|
font-size: 85%;
|
height: 30px;
|
line-height: 30px;
|
color: #fff;
|
text-align: center;
|
white-space: nowrap;
|
vertical-align: baseline;
|
border-radius: .25em;
|
}
|
.online-success {
|
background-color: #5cb85c;
|
}
|
.online-fail {
|
background-color: #d9534f;
|
}
|
</style>
|
<!-- 正文开始 -->
|
<form class="layui-form" id="formAdvForm" lay-filter="formAdvForm">
|
<div class="layui-fluid" style="padding-bottom: 75px;">
|
<!-- 定位 -->
|
<!-- <div class="layui-card">-->
|
<!-- <div class="layui-card-header">定位</div>-->
|
<!-- <div class="layui-card-body">-->
|
<!-- <div class="upload-box clear">-->
|
<!-- <div id="map" style="width: 100%; height: 200px"></div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- </div>-->
|
<!-- 图片 -->
|
<div class="layui-card">
|
<div class="layui-card-header">图片</div>
|
<div class="layui-card-body">
|
<div class="upload-box clear">
|
<div class="image-box"></div>
|
</div>
|
</div>
|
</div>
|
<!-- 基本信息 -->
|
<div class="layui-card">
|
<div class="layui-card-header">基本信息</div>
|
<div class="layui-card-body">
|
|
<div class="layui-form-item layui-row">
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">设备编号:</label>
|
<div class="layui-input-block">
|
<input name="uuid" placeholder="请输入设备编号" class="layui-input"/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">所属项目:</label>
|
<div class="layui-input-block">
|
<input name="hostId$" placeholder="请输入所属项目" class="layui-input"/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">ccid:</label>
|
<div class="layui-input-block">
|
<input name="sim" placeholder="请输入sim卡号" class="layui-input"/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">系统状态:</label>
|
<div class="layui-input-block">
|
<select name="status">
|
<option value="1">启用</option>
|
<option value="0">禁用</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">添加时间:</label>
|
<div class="layui-input-block">
|
<input id="formAdvDateSel1" name="createTime$" placeholder="请选择日期"
|
class="layui-input icon-date" autocomplete="off"/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label ">添加人员:</label>
|
<div class="layui-input-block">
|
<input name="createBy$" placeholder="请输入添加人员" class="layui-input"/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md12">
|
<label class="layui-form-label ">地理位置:</label>
|
<div class="layui-input-block">
|
<input name="locationMore" placeholder="未知" class="layui-input" disabled/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md12">
|
<label class="layui-form-label ">具体描述:</label>
|
<div class="layui-input-block">
|
<input name="desc" placeholder="暂无" class="layui-input"/>
|
</div>
|
</div>
|
</div>
|
|
</div>
|
</div>
|
<!-- 设备参数 -->
|
<div class="layui-card">
|
<div class="layui-card-header">设备参数</div>
|
<div class="layui-card-body">
|
|
<div class="layui-form-item layui-row">
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">主题-topic:</label>
|
<div class="layui-input-block">
|
<input name="topic" placeholder="请输入主题" class="layui-input"/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">地址-ip:</label>
|
<div class="layui-input-block">
|
<input name="ip" placeholder="请输入ip地址" class="layui-input"/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">端口-port:</label>
|
<div class="layui-input-block">
|
<input type="number" name="port" placeholder="请输入端口" class="layui-input"
|
lay-verType="tips" lay-verify="number" required/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">信号值:</label>
|
<div class="layui-input-block">
|
<input type="number" name="signal" placeholder="请输入信号值" class="layui-input"
|
lay-verType="tips" lay-verify="number" required/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">电池电量:</label>
|
<div class="layui-input-block">
|
<input type="number" name="battery" placeholder="请输入电量" class="layui-input"
|
lay-verType="tips" lay-verify="number" required/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">环境温度-℃:</label>
|
<div class="layui-input-block">
|
<input type="number" name="tempe" placeholder="请输入温度" class="layui-input"
|
lay-verType="tips" lay-verify="number" required/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">充电状态:</label>
|
<div class="layui-input-block">
|
<select name="charge">
|
<option value="1">充电中</option>
|
<option value="0">不在充电</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">倾斜角度-°:</label>
|
<div class="layui-input-block">
|
<input type="number" name="tiltZ" placeholder="倾斜角度" class="layui-input"
|
lay-verType="tips" lay-verify="number" required/>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">破损状态:</label>
|
<div class="layui-input-block">
|
<select name="worn">
|
<option value="1">已破损</option>
|
<option value="0">未破损</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">水位情况:</label>
|
<div class="layui-input-block">
|
<select name="overflow">
|
<option value="0">水位正常</option>
|
<option value="1">水位超标</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">光伏功能:</label>
|
<div class="layui-input-block">
|
<select name="agc">
|
<option value="1">有</option>
|
<option value="0">没有</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">形状:</label>
|
<div class="layui-input-block">
|
<select name="shape">
|
<option value="1">圆形</option>
|
<option value="2">长方形</option>
|
<option value="3">正方形</option>
|
</select>
|
</div>
|
</div>
|
<div class="layui-inline layui-col-md4">
|
<label class="layui-form-label">尺寸:</label>
|
<div class="layui-input-block">
|
<input type="number" name="size" placeholder="请输入尺寸" class="layui-input"/>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
<!-- 报文日志 -->
|
<div class="layui-card">
|
<div class="layui-card-header">报文日志</div>
|
<div class="layui-card-body">
|
<table id="sensorLogTable" lay-filter="sensorLogTable"></table>
|
</div>
|
</div>
|
</div>
|
|
<div class="form-group-bottom text-right">
|
<div>
|
<span class="online-info">在线，可以进行远程操作</span>
|
<div class="cool-divider"></div>
|
<span class="sensor-label"></span>
|
</div>
|
<button class="layui-btn" lay-filter="refresh" lay-submit><i class="layui-icon"></i> 刷新 </button>
|
</div>
|
|
</form>
|
<!--<script type="text/javascript" src="../static/js/tools/jquery.upload.min.js" charset="utf-8"></script>-->
|
<script type="text/javascript" src="../static/js/upload/jquery.upload.js" charset="utf-8"></script>
|
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=24c671d7d8365d7eaff888498538452f"></script>
|
<script>
|
var map;
|
var issueId = top.issueByDetl;
|
layui.config({
|
base: baseUrl + "/static/layui/lay/modules/"
|
}).extend({
|
notice: 'notice/notice',
|
}).use(['form', 'table', 'laydate', 'notice'], function () {
|
var $ = layui.jquery;
|
var form = layui.form;
|
var table = layui.table;
|
var laydate = layui.laydate;
|
var notice = layui.notice;
|
|
form.render('select');
|
|
init();
|
function init(){
|
notice.msg('正在载入数据......', {icon: 4, position: "topRight"});
|
$.ajax({
|
url: baseUrl + "/issue/" + issueId + "/auth",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'GET',
|
success: function (res) {
|
notice.destroy();
|
if (res.code === 200) {
|
var issue = res.data;
|
top.sensorByDetl = null;
|
// 地图
|
// map = new AMap.Map('map', {
|
// resizeEnable: true,
|
// zoom: 13,
|
// center: [sensor.lon, sensor.lat]
|
// });
|
// marker = new AMap.Marker({
|
// icon: "https://dz-admin.oss-cn-hangzhou.aliyuncs.com/other/marker.png",
|
// position:[sensor.lon, sensor.lat]
|
// });
|
// marker.setMap(map);
|
// 设备唯一码
|
$('.sensor-label').text(issue.uuid);
|
// 设备明细
|
form.val('formAdvForm', issue);
|
// 日志表格
|
initLogTable(issue.id);
|
// 图片
|
initImgs(sensor.id, issue.imgArr);
|
// 在线情况
|
$('.online-info').attr("class", sensor.online?"online-info online-success":"online-info online-fail");
|
$('.online-info').text(sensor.online?"在线，可以进行远程操作":"离线，不能进行远程操作");
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
} else {
|
layer.msg(res.msg, {icon: 2})
|
}
|
}
|
})
|
}
|
|
/* 渲染表格 */
|
var LogTb;
|
function initLogTable(sensorId){
|
if (sensorId == null) {
|
return false;
|
}
|
if (typeof LogTb === "undefined") {
|
LogTb = table.render({
|
elem: '#sensorLogTable',
|
headers: {token: localStorage.getItem('token')},
|
url: baseUrl+'/sensorLog/list/auth',
|
where: {sensor_id: sensorId},
|
page: true,
|
limit: 10,
|
limits: [10, 30, 50, 100, 200, 500],
|
cols: [[
|
{type: 'numbers', title: '#'}
|
// ,{field: 'id', align: 'center',title: 'ID'}
|
// ,{field: 'hostId$', align: 'center',title: '授权商户', templet: '#hostTpl', width: 140}
|
// ,{field: 'sensorId$', align: 'center',title: '设备编号'}
|
// ,{field: 'senserType$', align: 'center',title: '设备类型'}
|
,{field: 'data', align: 'center',title: '报文'}
|
,{field: 'createTime$', align: 'center',title: '时间', minWidth: 200, width: 200}
|
// ,{field: 'memo', align: 'center',title: '备注'}
|
]],
|
request: {
|
pageName: 'curr',
|
pageSize: 'limit'
|
},
|
parseData: function (res) {
|
return {
|
'code': res.code,
|
'msg': res.msg,
|
'count': res.data.total,
|
'data': res.data.records
|
}
|
},
|
response: {
|
statusCode: 200
|
},
|
done: function(res, curr, count) {
|
$('#sensorLogTable').next().find('.layui-table-body').find("table" ).find("tbody").children("tr").on('dblclick', function(){
|
var id = JSON.stringify($('#sensorLogTable').next().find('.layui-table-body').find("table").find("tbody").find(".layui-table-hover").data('index'));
|
layer.open({
|
type: 1,
|
shade: false,
|
area: '500px',
|
title: false,
|
content: "<div style='color: #ffffff;font-size: 18px;overflow: hidden;" +
|
"background-color: #5FB878;padding: 15px 10px;word-break:break-all;'>" + res.data[id].data + "</div>"
|
});
|
})
|
}
|
});
|
} else {
|
LogTb.reload();
|
}
|
}
|
|
/* 渲染图片 */
|
function initImgs(sensorId, imgArr) {
|
if (imgArr == null) {
|
imgArr = [];
|
}
|
// https://gitee.com/gouguoyin/ajax-image-upload?_from=gitee_search#http://www.gouguoyin.cn/ajax-image-upload
|
$(".image-box").ajaxImageUpload({
|
fileInput : 'file',
|
postUrl : baseUrl + '/sensor/upload.action', //上传的服务器地址
|
width : 180,
|
height : 180,
|
imageUrl: imgArr,
|
postData : { sensorId: sensorId },
|
maxNum: 5, //允许上传图片数量
|
allowZoom : true, //允许放大
|
maxSize : 3, //允许上传图片的最大尺寸，单位M
|
appendMethod : 'after',
|
before : function () {
|
// layer.msg('上传前回调函数2');
|
},
|
success : function(json){
|
},
|
complete : function () {
|
layer.msg('上传成功', {icon: 1});
|
},
|
delete : function (src) {
|
$.ajax({
|
url: baseUrl + "/sensor/remove.action",
|
headers: {'token': localStorage.getItem('token')},
|
method: 'POST',
|
data: {
|
sensorId: sensorId,
|
src: src
|
},
|
// async: false,
|
success: function (res) {
|
if (res.code === 200) {
|
layer.msg(res.msg, {icon: 1})
|
} else if (res.code === 403) {
|
top.location.href = baseUrl + "/";
|
} else {
|
layer.msg(res.msg, {icon: 2})
|
}
|
}
|
})
|
},
|
error : function (e) {
|
layer.msg(e.msg + '(' + e.code + ')', {icon: 2});
|
}
|
});
|
}
|
|
/* 渲染laydate */
|
laydate.render({
|
elem: '#createTime\\$',
|
type: 'datetime'
|
});
|
|
/* 监听表单提交 */
|
form.on('submit(refresh)', function (data) {
|
init();
|
return false;
|
});
|
|
});
|
</script>
|
