|
|
|
@ -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,11 +204,24 @@ |
|
|
|
<button class="connect" onclick="connectWs()">连接</button> |
|
|
|
</div> |
|
|
|
<p class="status" id="status">当前状态： 未连接</p> |
|
|
|
<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="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" /> |
|
|
|
<input |
|
|
|
type="text" |
|
|
|
class="info" |
|
|
|
disabled |
|
|
|
id="report_address" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="form_line"> |
|
|
|
<p class="tit">VALUE：</p> |
|
|
|
@ -181,7 +232,12 @@ |
|
|
|
<p class="title">回执解析</p> |
|
|
|
<div class="form_line"> |
|
|
|
<p class="tit">ADDRESS：</p> |
|
|
|
<input type="text" class="info" disabled id="receipt_address" /> |
|
|
|
<input |
|
|
|
type="text" |
|
|
|
class="info" |
|
|
|
disabled |
|
|
|
id="receipt_address" |
|
|
|
/> |
|
|
|
</div> |
|
|
|
<div class="form_line"> |
|
|
|
<p class="tit">VALUE：</p> |
|
|
|
@ -246,6 +302,11 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="panel">panel2</div> |
|
|
|
<div class="panel">panel3</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="right_message"> |
|
|
|
<div class="message_wrap" id="message_wrap"></div> |
|
|
|
<div style="display: flex; align-items: center; margin-top: 10px"> |
|
|
|
@ -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> |
maochaoying
2 years ago