dayuan
/
manyi


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="description" content=""/>
    <meta name="keywords" content="扫码支付，线上投币，运营数据，物联网"/>
    <meta name="format-detection" content="telphone=no,email=no"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <title>设置设备编号</title>
    <link rel="stylesheet" href="https://cdn.washpayer.com/components/lib/mui.min.css"/>
    <link rel="stylesheet" href="../components/custom/css/common.css"/>
    <link rel="stylesheet" href="css/xyf.common.min.css">
</head>
<body>

<div class="input-group-vertical ">

    <h5 class="mui-content-padded">请选择或输入组内地址/编号</h5>
    <div class="" id="groupNumberSelect">
        <div class="mui-input-group reg-hd">
            <div class="mui-input-row ">
                <label>组内地址/编号</label>
                <input type="text" id="groupNumber" placeholder="组内地址/编号" class="mui-text-right ">
            </div>
        </div>
        <div class="mui-input-group reg-bd">
            <div class="mui-input-row">
                <ol>
                    <li>快速选择组内地址/编号</li>
                </ol>
                <div class="mui-row">
                    <div class="mui-col-xs-4 mui-col-sm-4">
                        <span class="mui-inline done"></span>已注册
                    </div>
                    <div class="mui-col-xs-4 mui-col-sm-4">
                        <span class="mui-inline option"></span>可选
                    </div>
                    <div class="mui-col-xs-4 mui-col-sm-4">
                        <span class="mui-inline active"></span>选中
                    </div>
                </div>
            </div>
            <div class="mui-input-row reg-list">
                <!-- 分组编号列表 -->
                <div class="mui-row option-list"></div>
            </div>
        </div>
    </div>

</div>
<div class="subt">
    <input class="mui-btn-block" type="button" value="保存" onclick="commit()">
</div>

<script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script>
<script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script>
<script src="/components/custom/js/common.js"></script>
<script src="js/xyf.common.js"></script>
<script>
    var groupId = getQueryString("groupId");
    var logicalCode = getQueryString("logicalCode");
    var groupNumber = getQueryString("groupNumber");
    groupNumberData(groupId);
    $("#groupNumber").val(groupNumber);

    // 同步刷新快速选择器
    $('#groupNumber').on('input', function () {
        // 取消其他的选中
        $('.reg-list a.active').removeClass('active').addClass('option');
        // 选中当前
        var nowValue = $(this).val()
        $('.reg-list a').each(function () {
            var eachVal = $(this).text()
            if (nowValue == eachVal) {
                $(this).not('.done').removeClass('option').addClass('active');
            }
        })
    })

    //加载分组编号
    function groupNumberData(groupId) {
        var data = {"groupId": groupId};
        //获取哪些分组编号已经占用
        sendRequest("/device/groupUsedNumber", "GET", data, function (res) {
            if (res.result == 1) {
                var groupNumberHtml = "";
                var classValue = "";
                var payload = res.para
                for (var i = 1; i <= 32; i++) {
                    if (groupNumber == i) {
                        classValue = "active";
                    } else {
                        classValue = 'option'
                    }

                    // 查看是否被用过
                    for (var index in payload) {
                        var used = payload[index].groupNumber
                        if (used == i) {
                            classValue = 'done'
                            break
                        }
                    }

                    groupNumberHtml += ' <div class="mui-col-xs-3 mui-col-sm-3 option-list-item">' +
                        '<a href="javascript:;" class=' + classValue + '>' + i + '</a>' +
                        '</div>';
                }
                groupNumberHtml += '';
                $(".option-list").html(groupNumberHtml);
                //按钮选择
                $('.option-list-item a').tap(function () {
                    var other = $(this).parent().siblings().find('a');
                    if ($(this).is('.option')) {
                        $(this).removeClass('option').addClass('active');
                        other.not('.done').removeClass('active').addClass('option');

                        // 马上刷新输入框的编号
                        $('#groupNumber').val($(this).text())
                    }
                });

            } else {
                mui.toast(res.description);
            }
        });
    }

    function commit() {
        var groupNumber = $("#groupNumber").val();
        if (groupNumber === '') {
            mui.toast("请输入组内地址/编号");
            return
        }
        var url = "/device/setEquipmentGroupNumber";
        var data = {"logicalCode": logicalCode, "groupNumber": groupNumber};
        sendRequest(url, "POST", data, function (res) {
            if (res.result == 1) {
                history.back();
            } else {
                mui.alert(res.description, '温馨提示', '我知道了');
            }
        });
    }
</script>
</body>
</html>