<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<base href="//s.iamberry.com/watero/">
<link rel="stylesheet" type="text/css" href="/css/mui.min.css">
<link rel="stylesheet" type="text/css" href="/css/iconfont.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<style>
.my-select {-webkit-appearance: menulist;border:1px solid #ccc !important;}
.box{width:100%;text-align: center;}
.box .left_tab{display: inline-block;width:45%;margin-right: 4%;}
.box .right_tab{display: inline-block;width:45%;margin-left: 4%;}
.mui-btn-block{padding: 10px 0;}
</style>
</head>
<body style="background: #fff;">
<div class="loading-bg">
<div class="mui-loading">
<div class="mui-spinner">
</div>
加载中...
</div>
</div>
<div class="mui-content" style="background: #fff;">
<div class="mui-content-padded">
<input type="text" id="mac-input" class="mui-text-center" placeholder="请输入蓝牙MAC地址 :不需要" />
<br/>
<button type="button" id="confirm-mac-btn" class="mui-btn mui-btn-block mui-btn-blue" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="确认中...">确认蓝牙MAC</button>
<div class="box">
<div class="left_tab"><button type="button" id="conn-dev-btn" class="mui-btn mui-btn-block mui-btn-blue" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="连接中...">连接机器</button></div>
<div class="right_tab"><button type="button" id="dis-dev-btn" class="mui-btn mui-btn-block mui-btn-blue" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="断开中...">断开连接</button></div>
</div>
<div class="box">
<div class="left_tab"><select class="my-select" id="init-year-input"><option value="1">1年</option><option value="2">2年</option><option value="3">3年</option></select></div>
<div class="right_tab"><button type="button" id="init-dev-btn" class="mui-btn mui-btn-block mui-btn-blue" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="激活中...">激活机器</button></div>
</div>
<div class="box" style="display: none;">
<div class="left_tab"><select class="my-select"><option>1年</option><option>2年</option><option>3年</option></select></div>
<div class="right_tab"><button type="button" class="mui-btn mui-btn-block mui-btn-blue" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="续费中...">续费</button></div>
</div>
<div class="box">
<div class="left_tab"><input type="text" id="tds-input" value="TDS" style="width: 45%;" readonly="readonly"/><input type="text" id="water-input" value="水量" style="width: 45%;float: right;" readonly="readonly"/></div>
<div class="right_tab"><button type="button" id="get-data-btn" class="mui-btn mui-btn-block mui-btn-blue" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="获取中...">获取水量、TDS</button></div>
</div>
<div class="box">
<div class="left_tab" id="state-div">
<span class="iconfont icon-lvxin_full"></span><span class="iconfont icon-lvxin_full"></span><span class="iconfont icon-lvxin_full"></span><span class="iconfont icon-lvxin_null"></span>
</div>
<div class="right_tab"><button type="button" id="get-state-btn" class="mui-btn mui-btn-block mui-btn-blue" data-loading-icon="mui-spinner mui-spinner-custom" data-loading-text="获取中...">获取滤芯状态</button></div>
</div>
</div>
</div>
<script type="text/javascript" src="js/mui.min.js"></script>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="/js/wechat_iot.js"></script>
<script type="text/javascript">
mui.ready(function(){
console.log("页面加载完毕")
document.querySelector('.loading-bg').style.display='none';
});
// 全局flag:是否允许请求
var isRequest = false;
var deviceId = null;
// 确认MAC
$(function () {
// 确认MAC
$("#confirm-mac-btn").click(function () {
// 校验数据
var mac = $("#mac-input").val();
if (mac == null || mac == "") {
mui.alert("请检查MAC是否为空");
return;
}
// 处理 :
if (mac.indexOf(":") != -1) {
var replaceStr = ":";
mac = mac.replace(new RegExp(replaceStr,'gm'),'').toLowerCase();
}
// 发起请求
var url = "//w.iamberry.com/watero/wechat/factory/info_by_mac";
$.post(url,{"mac":mac},function(result){
if (result.resultCode != 200 || result.returnCode != 200) {
mui.alert("没有查找到机器，请检查");
return;
}
// 允许请求
isRequest = true;
// 保存deviceid
deviceId = result.returnMsg.info.machineDeviceId;
mui.alert("已检测到机器，请确认机器在线，然后开始测试...");
});
});
// 连接请求
$("#conn-dev-btn").click(function () {
if (!isRequest) {
mui.alert("请先输入mac地址 然后测试...");
return;
}
wx.invoke('getWXDeviceTicket', {'deviceId':deviceId,'type':'1', 'connType':'blue'}, function(res) {
if (res.err_msg == "getWXDeviceTicket:ok") {
var ticket = res.ticket;
var url = "//w.iamberry.com/watero/wechat/factory/bind";
$.post(url,{"ticket":ticket, "device_id":deviceId},function(result){
if (result.resultCode != 200 || result.returnCode != 200) {
mui.alert("绑定失败，请检查");
return;
}
});
}
});
});
// 断开连接
$("#dis-dev-btn").click(function () {
if (!isRequest) {
mui.alert("请先输入mac地址 然后测试...");
return;
}
wx.invoke('getWXDeviceTicket', {'deviceId':deviceId,'type':'2', 'connType':'blue'}, function(res) {
if (res.err_msg == "getWXDeviceTicket:ok") {
var ticket = res.ticket;
var url = "//w.iamberry.com/watero/wechat/factory/un_bind";
$.post(url,{"ticket":ticket, "device_id":deviceId},function(result){
if (result.resultCode != 200 || result.returnCode != 200) {
mui.alert("解除绑定失败，请检查");
return;
}
});
}
});
});
// 激活机器
$("#init-dev-btn").click(function () {
if (!isRequest) {
mui.alert("请先输入mac地址 然后测试...");
return;
}
// 发送
sendMsgToDevice(deviceId, base64encode("*setDir2#"), function(state, res){
if (state == 200) {
var hour = parseInt($("#init-year-input").val()) * 365 * 24;
hour = append(hour);
var water = 2500 * parseInt($("#init-year-input").val());
water = append(water);
sendMsgToDevice(deviceId, base64encode("*setData" + hour + " " + water + "#"), function(code, data){
receiveData(function(temp) {
var t = base64decode(temp);
if (t == "ok1") {
mui.alert("激活成功...");
} else {
mui.alert("激活失败...");
}
});
// 改变数据方向
sendMsgToDevice(deviceId, base64encode("*setDir0#"), function(){});
});
}
});
});
// 获取数据
$("#get-data-btn").click(function () {
if (!isRequest) {
mui.alert("请先输入mac地址 然后测试...");
return;
}
sendMsgAndReceiveData(deviceId, "*getData#", function(state, data){
if (state == 200) {
var temp = data.split(" ");
$("#tds-input").val(temp[0]);
$("#water-input").val(temp[1]);
} else {
mui.alert("获取失败，请重试!");
}
});
});
// 获取滤芯状态
$("#get-state-btn").click(function(){
if (!isRequest) {
mui.alert("请先输入mac地址 然后测试...");
return;
}
sendMsgAndReceiveData(deviceId, "*isUse#", function(state, data){
if (state == 200) {
var t = data.split("");
// 先清空
$("#state-div").html("");
for (var i = 0; i < t.length; i++) {
if (t[i] == "0") {
// 不可用
$("#state-div").append("<span class='iconfont icon-lvxin_null'></span>");
} else {
$("#state-div").append("<span class='iconfont icon-lvxin_full'></span>");
}
}
} else {
mui.alert("获取失败，请重试!");
}
});
});
});
// 填充参数
function append(hour) {
var temp = hour + "";
if (hour.length == 5) {
return temp;
}
return append("0" + hour);
}
</script>
</body>
</html>