wangxiaoming
/
iamberry-watero


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
							<!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="//s.iamberry.com/watero/css/mui.min.css">
	<link rel="stylesheet" type="text/css" href="//s.iamberry.com/watero/css/iconfont.css" />
	<link rel="stylesheet" type="text/css" href="//s.iamberry.com/watero/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>
		&nbsp;&nbsp;加载中...
	</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="//s.iamberry.com/watero/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>