<!DOCTYPE html>
<html>
<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, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
	<link rel="stylesheet" href="../css/public.css" media="all">
</head>
<body>
<div class="layuimini-container">
	<div class="layuimini-main">

		<fieldset class="table-search-fieldset">
			<div style="margin: 10px 10px 10px 10px">
				<form class="layui-form layui-form-pane" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">设备号</label>
							<div class="layui-input-inline">
								<input type="text" name="deviceId" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<button class="layui-btn" lay-submit="" lay-filter="data-search-btn">查询</button>
						</div>
					</div>
				</form>
			</div>
		</fieldset>

		<div class="layui-card top-panel">
			<div class="layui-card-header">基本信息</div>
			<div class="layui-card-body">
				<div class="layui-form-item">
					<label class="layui-form-label">状态</label>
					<div class="layui-input-inline">
						<span id="deviceState1" class="layui-badge layui-bg-green" style="display: none">在线</span>
						<span id="deviceState0" class="layui-badge layui-bg-red" style="display: none">离线</span>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">上线时间</label>
					<div class="layui-input-inline">
						<input type="text" name="onlineTime" id="onlineTime" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">类型</label>
					<div class="layui-input-inline">
						<input type="text" name="deviceType" id="deviceType" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">电压</label>
					<div class="layui-input-inline">
						<input type="text" name="voltage" id="voltage" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">4G信号</label>
					<div class="layui-input-inline">
						<input type="text" name="rssi" id="rssi" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">卫星</label>
					<div class="layui-input-inline">
						<input type="text" name="satNum" id="satNum" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">收到字节</label>
					<div class="layui-input-inline">
						<input type="text" name="rxBytes" id="rxBytes" class="layui-input">
					</div>
				</div>
			</div>
		</div>

	</div>
</div>
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script th:inline="javascript">
	layui.use(['form'], function () {
		var $ = layui.$,
				form = layui.form;

		/**
		 * 初始化表单，要加上，不然刷新部分组件可能会不加载
		 */
		form.render();

		// 监听搜索操作
		form.on('submit(data-search-btn)', function (data) {
			$.ajax({
				type:"GET",
				url:"/device_summary/query",
				data: data.field,
				success: function (result) {
					console.log(result);
					if(result.code == 0){
						layer.alert(result.msg);
					}
					else {
						if(result.deviceState==1){
							$('#deviceState1').show();
							$('#deviceState0').hide();
						}
						else {
							$('#deviceState0').show();
							$('#deviceState1').hide()
						}
						$('#onlineTime').val(result.onlineTime);
						$('#voltage').val(result.voltage);
						$('#satNum').val(result.satNum);
						$('#rxBytes').val(result.rxBytes)
						$('#deviceType').val(result.deviceType)
						$('#rssi').val(result.rssi)
						form.render();
					}
				},
				error: function () {
					console.log("未获取到数据");
				}
			});

			return false;
		});

	});

</script>

</body>
</html>