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>
|