147 lines
3.9 KiB
HTML
147 lines
3.9 KiB
HTML
<style>
|
||
.rx_win_style{
|
||
min-height:300px;
|
||
background-color: lightgray;
|
||
}
|
||
</style>
|
||
|
||
<div class="layuimini-container layuimini-page-anim">
|
||
<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>
|
||
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;
|
||
//获取主机地址之后的目录，如： /ems/Pages/Basic/Person.jsp
|
||
var pathName = window.document.location.pathname;
|
||
var pos = curPath.indexOf(pathName);
|
||
//获取主机地址，如： http://localhost:8080
|
||
var basePath = curPath.substring(0, pos);
|
||
|
||
//建立webSocket连接
|
||
//var webSocktPath = (basePath+"/websocket").replace("https","wss");
|
||
var 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");
|
||
}
|
||
//接收信息
|
||
websocket.onmessage = function (event) {
|
||
var rxWin = layui.$('#rx_win');
|
||
rxWin.val(rxWin.val()+event.data + "\r\n");
|
||
var obj = document.getElementById("rx_win");
|
||
obj.scrollTop = obj.scrollHeight;
|
||
}
|
||
}
|
||
</script>
|