340 lines
9.8 KiB
HTML
340 lines
9.8 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>透传设置界面</title>
|
|||
|
|
<style type="text/css">
|
|||
|
|
*
|
|||
|
|
{
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body
|
|||
|
|
{
|
|||
|
|
font-family: 'Segoe UI' , Tahoma, Geneva, Verdana, sans-serif;
|
|||
|
|
line-height: 1.4;
|
|||
|
|
color: #333;
|
|||
|
|
background-color: #f5f7fa;
|
|||
|
|
padding: 16px;
|
|||
|
|
max-width: 1000px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
h1
|
|||
|
|
{
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
color: #2c3e50;
|
|||
|
|
border-bottom: 1px solid #e1e4e8;
|
|||
|
|
padding-bottom: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card
|
|||
|
|
{
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 6px;
|
|||
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|||
|
|
margin-bottom: 20px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-header
|
|||
|
|
{
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
padding: 12px 16px;
|
|||
|
|
border-bottom: 1px solid #e9ecef;
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-content
|
|||
|
|
{
|
|||
|
|
padding: 16px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-row
|
|||
|
|
{
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 15px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group
|
|||
|
|
{
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-row-inline
|
|||
|
|
{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 10px;
|
|||
|
|
margin-bottom: 15px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
label
|
|||
|
|
{
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 5px;
|
|||
|
|
color: #495057;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input, textarea, button
|
|||
|
|
{
|
|||
|
|
font-family: inherit;
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input[type="text"], textarea
|
|||
|
|
{
|
|||
|
|
padding: 8px 12px;
|
|||
|
|
border: 1px solid #ced4da;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
transition: border-color 0.15s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
input[type="text"]:focus, textarea:focus
|
|||
|
|
{
|
|||
|
|
outline: none;
|
|||
|
|
border-color: #4285f4;
|
|||
|
|
box-shadow: 0 0 0 2px rgba(66, 133, 244, 0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
textarea
|
|||
|
|
{
|
|||
|
|
min-height: 80px;
|
|||
|
|
resize: vertical;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button
|
|||
|
|
{
|
|||
|
|
background-color: #4285f4;
|
|||
|
|
color: white;
|
|||
|
|
border: none;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 8px 16px;
|
|||
|
|
cursor: pointer;
|
|||
|
|
font-weight: 500;
|
|||
|
|
transition: background-color 0.15s;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
button:hover
|
|||
|
|
{
|
|||
|
|
background-color: #3367d6;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#send
|
|||
|
|
{
|
|||
|
|
background-color: #34a853;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#send:hover
|
|||
|
|
{
|
|||
|
|
background-color: #2e9449;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.checkbox-group
|
|||
|
|
{
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 8px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-container
|
|||
|
|
{
|
|||
|
|
max-height: 300px;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
border: 1px solid #e9ecef;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
padding: 12px;
|
|||
|
|
background-color: #f8f9fa;
|
|||
|
|
font-family: 'Courier New' , monospace;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item
|
|||
|
|
{
|
|||
|
|
padding: 6px 0;
|
|||
|
|
border-bottom: 1px solid #e9ecef;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.message-item:last-child
|
|||
|
|
{
|
|||
|
|
border-bottom: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#result
|
|||
|
|
{
|
|||
|
|
margin-top: 10px;
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
color: #28a745;
|
|||
|
|
min-height: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (max-width: 768px)
|
|||
|
|
{
|
|||
|
|
.form-row
|
|||
|
|
{
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.form-group
|
|||
|
|
{
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<h1>
|
|||
|
|
透传设置界面</h1>
|
|||
|
|
<!-- 设置透传卡片 -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
设置透传</div>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<div class="form-row">
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="txthostnumber">
|
|||
|
|
主机编号:</label>
|
|||
|
|
<input id="txthostnumber" type="text" placeholder="请输入主机编号">
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<button id="btn_set">
|
|||
|
|
设置</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div id="result">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 发送内容卡片 -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
发送内容</div>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<div class="form-row-inline">
|
|||
|
|
<div class="checkbox-group">
|
|||
|
|
<input id="isprotocol" type="checkbox" checked>
|
|||
|
|
<label for="isprotocol" style="margin-bottom: 0;">
|
|||
|
|
自动加上协议头</label>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group" style="flex-direction: row; align-items: center; gap: 8px;">
|
|||
|
|
<label for="protocoltype" style="margin-bottom: 0;">
|
|||
|
|
协议类型:</label>
|
|||
|
|
<input id="protocoltype" type="text" placeholder="如01,02,0A" style="width: 100px;">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-group">
|
|||
|
|
<label for="content">
|
|||
|
|
透传内容（16进制）:</label>
|
|||
|
|
<textarea id="content" placeholder="请输入16进制内容"></textarea>
|
|||
|
|
</div>
|
|||
|
|
<button id="send">
|
|||
|
|
发送内容</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<!-- 接收数据卡片 -->
|
|||
|
|
<div class="card">
|
|||
|
|
<div class="card-header">
|
|||
|
|
下位机透传来的数据</div>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<div id="touchuan_content" class="message-container">
|
|||
|
|
<!-- 消息将在这里显示 -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="Scripts/jquery-1.8.3.min.js" type="text/javascript"></script>
|
|||
|
|
<script src="Scripts/mqtt.min.js" type="text/javascript"></script>
|
|||
|
|
<script>
|
|||
|
|
function lianjie(hghg) {
|
|||
|
|
const options = {
|
|||
|
|
clientId: 'touchuan_' + Math.random().toString(16).substr(2, 8),
|
|||
|
|
username: "blwws",
|
|||
|
|
password: "E!9~3~H=M.&2STW",
|
|||
|
|
protocolVersion: 5
|
|||
|
|
};
|
|||
|
|
const client = mqtt.connect("wss://gua.blv-oa.com:8084/mqtt", options);
|
|||
|
|
client.on("connect", (error) => {
|
|||
|
|
console.log("连接上了");
|
|||
|
|
client.unsubscribe("blw/touchuan/report" + hghg);
|
|||
|
|
client.subscribe("blw/touchuan/report/" + hghg, (err) => {});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
client.on("message", (topic, message) => {
|
|||
|
|
var data = message.toString();
|
|||
|
|
console.log(data);
|
|||
|
|
$("#touchuan_content").append("<div class='message-item'>" + data + "</div>");
|
|||
|
|
// 自动滚动到底部
|
|||
|
|
$("#touchuan_content").scrollTop($("#touchuan_content")[0].scrollHeight);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$(function() {
|
|||
|
|
$("#btn_set").click(function() {
|
|||
|
|
let hhh = $("#txthostnumber").val();
|
|||
|
|
let mac = "";
|
|||
|
|
let jjj = {
|
|||
|
|
hostnumber: hhh,
|
|||
|
|
mac: mac,
|
|||
|
|
add_or_remove: "add"
|
|||
|
|
};
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/api/SetTouChuanData',
|
|||
|
|
type: 'Post',
|
|||
|
|
contentType: 'application/x-www-form-urlencoded',
|
|||
|
|
data: jjj,
|
|||
|
|
success: function(response) {
|
|||
|
|
console.log(response);
|
|||
|
|
$("#result").text("设置成功: " + response);
|
|||
|
|
lianjie(hhh);
|
|||
|
|
},
|
|||
|
|
error: function(xhr, status, error) {
|
|||
|
|
console.log(error);
|
|||
|
|
$("#result").text("设置失败: " + error);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
$("#send").click(function() {
|
|||
|
|
let is_add_header = $("#isprotocol").prop("checked");
|
|||
|
|
let ccc = $("#content").val();
|
|||
|
|
let hhh = $("#txthostnumber").val();
|
|||
|
|
let mac = "";
|
|||
|
|
let p_type = $("#protocoltype").val();
|
|||
|
|
let jjj = {
|
|||
|
|
hostnumber: hhh,
|
|||
|
|
mac: mac,
|
|||
|
|
bytelist: ccc,
|
|||
|
|
cmdtype: p_type,
|
|||
|
|
isoriginal: is_add_header
|
|||
|
|
};
|
|||
|
|
$.ajax({
|
|||
|
|
url: '/api/SendUDPPackage',
|
|||
|
|
type: 'Post',
|
|||
|
|
contentType: 'application/x-www-form-urlencoded',
|
|||
|
|
data: jjj,
|
|||
|
|
success: function(response) {
|
|||
|
|
console.log(response);
|
|||
|
|
// 将发送的内容也显示在接收区域
|
|||
|
|
$("#touchuan_content").append("<div class='message-item' style='color: #4285f4;'>发送: " + ccc + "</div>");
|
|||
|
|
$("#touchuan_content").scrollTop($("#touchuan_content")[0].scrollHeight);
|
|||
|
|
},
|
|||
|
|
error: function(xhr, status, error) {
|
|||
|
|
console.log(error);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|