mirror of
https://gitee.com/beecue/fastbee.git
synced 2025-12-20 01:45:55 +08:00
198 lines
7.3 KiB
HTML
198 lines
7.3 KiB
HTML
<!doctype html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||
<title>物美智能设备AP配置</title>
|
||
<style type="text/css">
|
||
*{
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
#all{
|
||
margin: 20px auto;
|
||
position: relative;
|
||
width:320px;
|
||
text-align:center;
|
||
}
|
||
#all #tab li{
|
||
list-style: none;
|
||
float: left;
|
||
width: 94px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
color:#fff;
|
||
margin-left:10px;
|
||
}
|
||
#tab{
|
||
height:40px;
|
||
}
|
||
#all .con{
|
||
border:1px solid #ddd;
|
||
padding:10px;
|
||
margin:15px 10px;
|
||
}
|
||
.group{
|
||
line-height:50px;
|
||
}
|
||
.group .btn{
|
||
padding:4px 14px;
|
||
background:#f56c6c;
|
||
color:#fff;
|
||
border:1px solid #ddd;
|
||
border-radius:6px;
|
||
width:190px;
|
||
}
|
||
.group span{
|
||
width:85px;
|
||
display:inline-block;
|
||
font-size:14px;
|
||
}
|
||
.group input{
|
||
line-height:24px;
|
||
width:180px;
|
||
}
|
||
</style>
|
||
<script type="text/javascript">
|
||
window.onload = function(){
|
||
var tab = document.getElementById("tab");
|
||
var lis = tab.getElementsByTagName('li');//获得标签li的数组
|
||
var cons = document.getElementsByClassName('con');//获得下面内容div的数组
|
||
for(var i=0;i<lis.length;i++){
|
||
lis[i].num = i;//给对象添加属性，赋值用于标记
|
||
lis[i].onclick = function(){
|
||
if(this.num==2){
|
||
window.location.href="/download/";
|
||
}
|
||
//tab内容显示和隐藏
|
||
for(var j = 0;j<cons.length;j++){
|
||
if(j==this.num){
|
||
cons[this.num].style.display = 'block';
|
||
}else{
|
||
cons[j].style.display = 'none';
|
||
}
|
||
}
|
||
//设置选中
|
||
for(var k=0;k<lis.length;k++){
|
||
if(k==this.num){
|
||
lis[this.num].style.backgroundColor ="#006DFE"; //设置为选中
|
||
}else{
|
||
lis[k].style.backgroundColor="#888"; //设置背景为灰色
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
// 根据url参数设置选中
|
||
var value=getQueryVariable("tab");
|
||
console.log("value",value);
|
||
if(value==0){
|
||
lis[0].onclick();
|
||
}else if(value==1){
|
||
lis[1].onclick();
|
||
}
|
||
}
|
||
function getQueryVariable(variable){
|
||
var query = window.location.search.substring(1);
|
||
var vars = query.split("&");
|
||
for (var i=0;i<vars.length;i++) {
|
||
var pair = vars[i].split("=");
|
||
if(pair[0] == variable){return pair[1];}
|
||
}
|
||
return(false);
|
||
}
|
||
function wifiSubmit(){
|
||
var ssid = document.getElementById("ssid").value;
|
||
var password = document.getElementById("password").value;
|
||
var uuid = document.getElementById("uuid").value;
|
||
if(ssid=="" || password=="" || uuid==""){
|
||
alert("WIFI的名称、密码和关联用户不能为空。")
|
||
return;
|
||
}else{
|
||
// 确认提交
|
||
}
|
||
|
||
var button = document.getElementById("wifi_submit").submit();
|
||
}
|
||
function mqttSubmit(){
|
||
var mqtt_address = document.getElementById("mqtt_address").value;
|
||
var mqtt_port = document.getElementById("mqtt_port").value;
|
||
if(mqtt_address=="" || mqtt_port==""){
|
||
alert("MQTT的地址和端口不能为空");
|
||
return;
|
||
}else{
|
||
//确认提交
|
||
}
|
||
var button = document.getElementById("mqtt_submit").submit();
|
||
}
|
||
</script>
|
||
</head>
|
||
|
||
<body>
|
||
<div style="width:100%;height:60px;font-size:22px;line-height:60px;background:#006DFE;color:#fff;text-align:center;">物美智能设备配置</div>
|
||
|
||
<div id="all">
|
||
<ul id="tab">
|
||
<li style="background: #006DFE;">服务端</li>
|
||
<li style="background: #888;">配网</li>
|
||
<li style="background: #888;">上传证书</li>
|
||
</ul>
|
||
<div class="con" style="display:block;">
|
||
<form name=”form1” method="post" action="mqtt" id="mqtt_submit">
|
||
<div class="group">
|
||
<span>MQTT地址：</span>
|
||
<input type="text" name="mqtt_address" placeholder="www.wumei.live" id="mqtt_address">
|
||
</div>
|
||
<div class="group">
|
||
<span>MQTT端口：</span>
|
||
<input type="text" name="mqtt_port" placeholder="1883" id="mqtt_port">
|
||
</div>
|
||
<div class="group">
|
||
<span>MQTT账号：</span>
|
||
<input type="text" name="mqtt_account" placeholder="可选项">
|
||
</div>
|
||
<div class="group">
|
||
<span>MQTT密码：</span>
|
||
<input type="text" name="mqtt_password" placeholder="可选项">
|
||
</div>
|
||
<div style="line-height:50px;">
|
||
<span>使用证书：</span>
|
||
<input type="radio" name="is_certifi" id="unuse" value=0 checked> <label for="unuse" style="margin-right:20px;">不使用</label>
|
||
<input type="radio" name="is_certifi" id="use" value=1> <label for="use" style="margin-right:35px;">使用</label><br/>
|
||
</div>
|
||
<div style="line-height:20px;" class="group">
|
||
<span></span>
|
||
<input type="button" class="btn" value="连接服务端" onclick="mqttSubmit()">
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
|
||
<div class="con" style="display:none;">
|
||
<form name=”form2” method="post" action="wifi" id="wifi_submit">
|
||
<div class="group">
|
||
<span>WIFI名称：</span>
|
||
<input type="text" name="ssid" placeholder="不能包含中文" id="ssid">
|
||
</div>
|
||
<div class="group">
|
||
<span>WIFI密码：</span>
|
||
<input type="text" name="password" placeholder="不能包含中文" id="password">
|
||
</div>
|
||
<div class="group">
|
||
<span>关联用户：</span>
|
||
<input type="text" name="uuid" placeholder="用户ID或者手机号" id="uuid">
|
||
</div>
|
||
<div style="line-height:20px;" class="group">
|
||
<span></span>
|
||
<input type="button" class="btn" value="配网" onclick="wifiSubmit()" >
|
||
</div>
|
||
</form>
|
||
</div>
|
||
|
||
<div class="con"></div>
|
||
</div>
|
||
</body>
|
||
|
||
</html> |