165 lines
4.5 KiB
HTML
165 lines
4.5 KiB
HTML
|
||
<!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">
|
||
<style>
|
||
.rx_win_style{
|
||
min-height:300px;
|
||
background-color: lightgray;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="layuimini-container">
|
||
<div class="layuimini-main">
|
||
<div class="layui-row layui-col-space1">
|
||
<div class="layui-col-md12">
|
||
<div class="layui-form-item">
|
||
<textarea name="rx_win" id="rx_win" class="layui-textarea rx_win_style" readonly></textarea>
|
||
</div>
|
||
</div>
|
||
|
||
<form class="layui-form" action="">
|
||
<div class="layui-col-md12">
|
||
<div class="layui-form-item">
|
||
<textarea name="tx_win" id="tx_win" class="layui-textarea"></textarea>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-md12">
|
||
<div class="layui-form-item">
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">设备ID</label>
|
||
<div class="layui-input-inline">
|
||
<input type="text" name="device_id" lay-verify="required|number" autocomplete="off" class="layui-input">
|
||
</div>
|
||
</div>
|
||
<div class="layui-inline">
|
||
<label class="layui-form-label">指令类型</label>
|
||
<div class="layui-input-inline">
|
||
<select name="cmd_type" lay-filter="cmd_type">
|
||
<option value="0">GNSS</option>
|
||
<option value="1">DTU</option>
|
||
<option value="2">MPU</option>
|
||
<option value="3">DEBUG</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-inline">
|
||
<div class="layui-input-block">
|
||
<button class="layui-btn" lay-submit="" lay-filter="send_btn">发送</button>
|
||
<button class="layui-btn" lay-submit="" lay-filter="clear_btn">清屏</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
|
||
<script>
|
||
layui.use(['form'], function () {
|
||
var form = layui.form
|
||
, $ = layui.$;
|
||
var rxWin = $("#rx_win");
|
||
|
||
|
||
/**
|
||
* 初始化表单，要加上，不然刷新部分组件可能会不加载
|
||
*/
|
||
form.render();
|
||
|
||
//监听提交
|
||
form.on('submit(send_btn)', function (data) {
|
||
//console.log((data.field));
|
||
$.ajax({
|
||
type:"POST",
|
||
url:"/gnss/config_cmd",
|
||
data: data.field,
|
||
success: function (result) {
|
||
//console.log(result);
|
||
if(result.code == 0){
|
||
rxWin.val(rxWin.val() +result.data+ "\r\n");
|
||
var obj = document.getElementById("rx_win");
|
||
obj.scrollTop = obj.scrollHeight;
|
||
}
|
||
else{
|
||
layer.alert(result.data, {
|
||
title: '错误信息'
|
||
})
|
||
}
|
||
//
|
||
},
|
||
error: function () {
|
||
console.log("ajax error");
|
||
}
|
||
});
|
||
return false;
|
||
});
|
||
|
||
form.on('submit(clear_btn)', function (data) {
|
||
rxWin.val("");
|
||
return false;
|
||
});
|
||
});
|
||
</script>
|
||
|
||
<!-- Web socket operations-->
|
||
<script type="text/javascript">
|
||
layui.$(function(){
|
||
if(typeof(WebSocket) == "undefined"){
|
||
console.log("WebSocket not support for this WebBrowser!")
|
||
}
|
||
else{
|
||
connectWebSocket();
|
||
}
|
||
})
|
||
|
||
//建立WebSocket连接
|
||
function connectWebSocket() {
|
||
//获取当前网址，如： http://localhost:8080/ems/Pages/Basic/Person.jsp
|
||
var curPath = window.document.location.href;
|
||
console.log(curPath);
|
||
//获取主机地址之后的目录，如： /ems/Pages/Basic/Person.jsp
|
||
var pathName = window.document.location.pathname;
|
||
console.log(pathName);
|
||
var pos = curPath.indexOf(pathName);
|
||
//获取主机地址，如： http://localhost:8080
|
||
var basePath = curPath.substring(0, pos);
|
||
|
||
//建立webSocket连接
|
||
var webSocktPath;
|
||
webSocktPath = (basePath+"/websocket").replace("http","ws");
|
||
var websocket = new WebSocket(webSocktPath);
|
||
|
||
//打开webSokcet连接时，回调该函数
|
||
websocket.onopen = function () {
|
||
console.log("Socket open");
|
||
}
|
||
websocket.onerror = function (){
|
||
console.log("Socket error");
|
||
layui.layer.alert("Open web socket failed!");
|
||
}
|
||
//接收信息
|
||
websocket.onmessage = function (event) {
|
||
console.log(event.data);
|
||
var rxWin = layui.$('#rx_win');
|
||
rxWin.append(event.data + "\r\n");
|
||
var obj = document.getElementById("rx_win");
|
||
rxWin.scrollTop = rxWin.scrollHeight;
|
||
}
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
</html> |