maochaoying
/
websocket-util
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

tabs

main
maochaoying 2 years ago
parent
18d2bc84ae
commit
72d33a8d45
2 changed files with 158 additions and 73 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 1
      config.js
  2. 230
      index.html

1
config.js
View File

@ -1,7 +1,6 @@
const websocketAddress = "ws://192.168.1.138:19001";
const config = {
你好: "123",
b: "1231231",
};
const commonMessage = {

230
index.html
View File

@ -13,6 +13,9 @@
padding: 0;
box-sizing: border-box;
}
li {
list-style: none;
}
.container {
display: flex;
width: 100vw;
@ -26,9 +29,10 @@
display: flex;
box-sizing: border-box;
flex-direction: column;
flex: 0.6;
padding: 24px;
overflow: scroll;
width: 400px;
min-width: 400px;
}
.right_message {
height: 100vh;
@ -78,6 +82,8 @@
}
.status {
padding: 4px 0;
border-bottom: solid 2px #ddd;
margin-bottom: 10px;
}
.tabs {
margin: 20px 0;
@ -94,9 +100,9 @@
cursor: pointer;
}
.active {
/* .active {
border-bottom: 2px solid blue;
}
} */
.tab-panel {
display: none;
@ -156,6 +162,38 @@
border-bottom: solid 1px #ddd;
margin-bottom: 10px;
}
.mod-tab .tab_top {
float: left;
padding: 5px 20px;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
background-color: #ddd;
}
.header .tab_top:last-child {
border-right: 1px solid #ccc;
}
.content {
border: 1px solid #ccc;
width: 100%;
height: 100%;
}
.header::after {
content: "";
display: block;
clear: both;
}
.mod-tab .header .active {
background-color: #fff;
}
.mod-tab .content .panel {
display: none;
}
.mod-tab .content .active {
display: block;
}
</style>
</head>
<body>
@ -166,83 +204,106 @@
<button class="connect" onclick="connectWs()">连接</button>
</div>
<p class="status" id="status">当前状态： 未连接</p>
<div class="report_c">
<p class="title">上报解析</p>
<div class="form_line">
<p class="tit">ADDRESS：</p>
<input type="text" class="info" disabled id="report_address" />
</div>
<div class="form_line">
<p class="tit">VALUE：</p>
<input type="text" class="info" disabled id="report_val" />
</div>
</div>
<div class="report_c">
<p class="title">回执解析</p>
<div class="form_line">
<p class="tit">ADDRESS：</p>
<input type="text" class="info" disabled id="receipt_address" />
<div class="mod-tab">
<div class="header">
<button class="tab_top active button1">基本控制</button>
<button class="tab_top button2">电机控制</button>
<button class="tab_top button3">舵机控制</button>
</div>
<div class="form_line">
<p class="tit">VALUE：</p>
<input type="text" class="info" disabled id="receipt_val" />
</div>
<div class="form_line">
<p class="tit">结果：</p>
<input
type="text"
class="info"
value="无"
disabled
id="receipt_message"
/>
</div>
</div>
<div class="tabs">
<ul class="tab-bar">
<li class="tab active">通用指令</li>
<li class="tab">指令列表</li>
</ul>
<div class="tab-content">
<div class="tab-panel active">
<div class="common_order_input">
<div class="single">
<p>ID</p>
<input type="text" class="input" id="common_id" />
<div class="content">
<div class="panel active">
<div class="report_c">
<p class="title">上报解析</p>
<div class="form_line">
<p class="tit">ADDRESS：</p>
<input
type="text"
class="info"
disabled
id="report_address"
/>
</div>
<div
class="single"
style="margin-left: 10px; margin-right: 5px"
>
<p>BASE</p>
<input type="text" class="input" id="common_base" />
<div class="form_line">
<p class="tit">VALUE：</p>
<input type="text" class="info" disabled id="report_val" />
</div>
<div
class="single"
style="margin-left: 5px; margin-right: 10px"
>
<p>OFFSET</p>
<input type="text" class="input" id="common_off" />
</div>
<div class="report_c">
<p class="title">回执解析</p>
<div class="form_line">
<p class="tit">ADDRESS：</p>
<input
type="text"
class="info"
disabled
id="receipt_address"
/>
</div>
<div class="single">
<p>VALUE</p>
<input type="text" class="input" id="common_value" />
<div class="form_line">
<p class="tit">VALUE：</p>
<input type="text" class="info" disabled id="receipt_val" />
</div>
<div class="form_line">
<p class="tit">结果：</p>
<input
type="text"
class="info"
value="无"
disabled
id="receipt_message"
/>
</div>
</div>
<div class="common_btns">
<button class="btn_c" onclick="writeFun()">写</button>
<button class="btn_c" onclick="read()">读</button>
<button class="btn_c" onclick="autoReport()">
使能自动上报
</button>
<button class="btn_c" onclick="reportCycle()">
设置上报周期
</button>
<div class="tabs">
<ul class="tab-bar">
<li class="tab active">通用指令</li>
<li class="tab">指令列表</li>
</ul>
<div class="tab-content">
<div class="tab-panel active">
<div class="common_order_input">
<div class="single">
<p>ID</p>
<input type="text" class="input" id="common_id" />
</div>
<div
class="single"
style="margin-left: 10px; margin-right: 5px"
>
<p>BASE</p>
<input type="text" class="input" id="common_base" />
</div>
<div
class="single"
style="margin-left: 5px; margin-right: 10px"
>
<p>OFFSET</p>
<input type="text" class="input" id="common_off" />
</div>
<div class="single">
<p>VALUE</p>
<input type="text" class="input" id="common_value" />
</div>
</div>
<div class="common_btns">
<button class="btn_c" onclick="writeFun()">写</button>
<button class="btn_c" onclick="read()">读</button>
<button class="btn_c" onclick="autoReport()">
使能自动上报
</button>
<button class="btn_c" onclick="reportCycle()">
设置上报周期
</button>
</div>
</div>
<div class="tab-panel">
<div class="order" id="order"></div>
</div>
</div>
</div>
</div>
<div class="tab-panel">
<div class="order" id="order"></div>
</div>
<div class="panel">panel2</div>
<div class="panel">panel3</div>
</div>
</div>
</div>
@ -379,6 +440,7 @@
}
};
const connectWs = () => {
console.log(123);
const input = document.querySelector("#ws_connnect_input");
const status = document.querySelector("#status");
const address = input.value;
@ -481,5 +543,29 @@
const msg = getCommonOrderInput("set_auto_report_period");
sendOrder(msg);
};
document.querySelectorAll(".tab_top").forEach(function (node) {
node.addEventListener("click", function () {
var index;
this.parentElement
.querySelectorAll(".tab_top")
.forEach(function (e, inx) {
//e.style.display='none' 跳转的时候隐藏按钮
e.classList.remove("active");
if (node === e) {
index = inx;
}
});
this.classList.add("active");
this.parentElement.nextElementSibling
.querySelectorAll(".panel")
.forEach(function (panel) {
panel.classList.remove("active");
});
this.parentElement.nextElementSibling
.querySelectorAll(".panel")
[index].classList.add("active");
});
});
</script>
</html>
Write Preview
Loading…
Cancel
Save