dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache,no-store,no-siteapp,must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="author" content="">
    <meta name="description" content=""/>
    <meta name="keywords" content="扫码支付，线上投币，运营数据，物联网"/>
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <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>
<style>

    .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item, .mui-segmented-control.mui-segmented-control-inverted.mui-segmented-control-vertical .mui-control-item.mui-active {
        border-bottom: 1px solid #E5E5E5 !important;
    }

    .mui-segmented-control .mui-control-item {
        line-height: 50px;
        width: 100%;
    }

    #leftContents .mui-segmented-control.mui-segmented-control-inverted .mui-control-item.mui-active {
        background-color: #fff;
        border-left: 3px solid;
    }

    #leftContents, #rightContents {
        bottom: 0;
        position: absolute;
        overflow: auto;
    }

    #rightContents {
        top: 0;
        right: 0;
        background-color: #fff
    }

    #leftContents {
        top: 51px;
        left: 0
    }

    #leftContents a {
        padding-left: 10px;
    }

    #rightContents p b {
        color: #333333;
    }

    #rightContents .mui-segmented-control-inverted a {
        font-size: 1em
    }

    .groupTitle {
        padding-left: 10px;
        line-height: 50px;
        display: block;
        border-bottom: 1px solid #E5E5E5;
        background-color: #fff
    }

    .offline, .online,.busy {
        float: right;
        line-height: 16px;
    }

    .typeHeader {
        position: fixed;
        background-color: #fff;
        z-index: 99;
        width: 66.66% !important;
    }

    .typeItem {
        top: 53px
    }

    #rightContents .mui-table-view:after {
        left: 15px
    }

</style>
<body>
<div class="mui-content mui-row mui-fullscreen">
    <div class="mui-col-xs-4 mui-col-sm-4"><a class="groupTitle">场地</a></div>
    <div id="leftContents" class="mui-col-xs-4 mui-col-sm-4">
        <div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-vertical">

        </div>
    </div>
    <div id="rightContents" class="mui-col-xs-8 mui-col-sm-8" style="border-left: 1px solid #E5E5E5;">

    </div>
</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>

    $(function () {
        var loadEnd = false;
        var leftContents = $("#leftContents").children(".mui-segmented-control"),
                rightContents = $("#rightContents");


        var generalHtml = function (record, type) {
            var onlineTag = '';
            if (record.online == 1) {
                onlineTag = '<em class="online">在线</em>';
            } else if (record.online == 0) {
                onlineTag = '<em class="offline">离线</em>';
            }

            var groupName = record.groupNumber,
                    remarks = record.remarks,
                    eType = record.devType,
                    value = record.logicalCode

            return '<li online="' + record.online + '" class="mui-table-view-cell" eValue="' + value + '" eType="' + eType + '" >'
                    + (groupName !== 0 ? '<p><i class="c-primary iconfont ' + getDevIconName(eType) + '"></i><b>' + eType + " " + value + '</b>' + onlineTag + '</p>' : '<p></p>')
                    + '<p class="worldlimit"><i>' + groupName + '号</i>' + (groupName !== 0 ? "" : onlineTag) + '</p>'
                    + (remarks.length !== 0 ? '<p class="worldlimit">备注：' + remarks + '</p>' : '<p></p>')
                    + '</li>';
        };
        /**
         * 根据分组Id获得设备列表
         * @param groupId 分组Id
         */
        var getEquipmentsByGroupId = function (groupId) {
            if ($("#" + groupId).children().length === 1) {
                sendRequest("/device/getEquipmentsByGroupId", "post", JSON.stringify({"groupId": groupId}), function (res) {
                    if (res.result == 1) {
                        var records = res.para;
                        var allHtml = '<div id="all' + groupId + '" class="mui-control-content mui-active typeItem"><ul class="mui-table-view">';
                        $.each(records, function (i, record) {
                            allHtml += generalHtml(record, "all");
                        });
                        allHtml += '</ul></div>';
                        var selector = $("#" + groupId);
                        selector.append(allHtml);
                    }
                })
            }
        };

        /**
         * 获得全部分组
         */
        var getGroups = function () {
            sendRequest("/device/getEquipmentNumAndAddressList", "post", {}, function (res) {
                if (res.result == 1) {
                    var records = res.para.groups;
                    var list = "";
                    $.each(records, function (i, record) {
                        if (record.isManager == false) {
                            return;
                        }

                        var groupId = record.groupId;
                        var active = i == 0 ? "mui-active" : "";
                        list += '<a class="mui-text-left mui-control-item ' + active + '" groupId="' + groupId + '" href="#' + groupId + '">' + record.name + '</a>';
                        var rightList = '<div id="' + groupId + '" class="mui-control-content ' + active + '">'
                                + '<div class="mui-segmented-control mui-segmented-control-inverted mui-segmented-control-primary typeHeader">'
                                + '<a class="mui-control-item mui-active" href="#all' + groupId + '">设备</a>'
                                + '</div></div>';
                        rightContents.append(rightList);
                    });
                    leftContents.html(list);
                    if (!loadEnd) {
                        getEquipmentsByGroupId(leftContents.children().eq(0).attr("groupId"));
                        loadEnd = true;
                    }
                }

            });
        };

        /**
         * 点击左侧列表
         */
        leftContents.on("tap", "a", function () {
            var _this = $(this);
            var groupId = _this.attr("groupId");
            getEquipmentsByGroupId(groupId);
        });

        var returnData = {};
        /**
         * 选择设备
         */
        rightContents.on("tap", "li", function () {
            var _this = $(this),
                    online = _this.attr("online"),
                    eValue = _this.attr("eValue");

            if (online != 1) {
                mui.toast('设备离线，无法上分。');
                return;
            }

            window.history.replaceState({}, "管理系统", "index.html");
            var url = "remote-upper.html?logicalCode=" + eValue;
            goPage(url);
        });

        getGroups();

    })


</script>
</body>
</html>