初始化CRICS
This commit is contained in:
339
WebSite/touchuantest.htm
Normal file
339
WebSite/touchuantest.htm
Normal file
@@ -0,0 +1,339 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user