dayuan
/
manyi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463
							<!DOCTYPE html>
<!--suppress ALL -->
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="author" content=""/>
    <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="/components/lib/mui.min.css"/>
    <link rel="stylesheet" href="/components/custom/css/common.css"/>
    <link rel="stylesheet" href="/app/css/xyf.common.min.css"/>
    <link rel="stylesheet" href="/components/lib/mui.picker.min.css"/>
</head>
<style>
    /*定制样式*/

    .mgr-bd{
        bottom: 0;
        margin-top: 80px;
    }

    #pullrefresh .mui-scroll {
        top: 1px;
    }

    .or-order-status .mui-radio input {
        position: relative;
        right: auto;
        top: 2px;
    }

</style>
<body class="device-mgr">

<div class="mui-input-group mui-reset">
    <form class="mui-row" action="">
        <div class="mui-col-xs-9 mui-col-sm-9">
            <div class="mui-input-row mui-search">
                <input type="search" class="mui-input-clear" id="searchKey" placeholder="设备编号/投放地址">
            </div>
        </div>
        <div class="mui-col-xs-3 mui-col-sm-3 mui-text-right">
            <div class="filter-btn"><span>筛选</span><i class="iconfont icon-triangle-up"></i></div>
        </div>
    </form>
</div>

<div class="filter-panel" style="display: none" id="options">
    <div class="input-group-vertical mui-table-view clear-b-border">

        <div class="or-border-fir mui-input-row input-clear or-order-status" id="showPicker">
            <label class="or-label-text">设备场地<span></span></label>
            <span class="mui-icon mui-icon-arrowright"></span>
            <span class="or-order-status-font or-longWrap selected-text or-ellipsis " id="groupText">
                   <span class="putOnAddress">0</span>场地<span class="equipmentNum">0</span>设备
            </span>
        </div>

        <div class="or-border-fir mui-input-row input-clear or-order-status">
            <label class="or-label-text">在线状态<span></span></label>
            <div class="mui-row or-order-status-font">
                <div class="mui-radio mui-col-xs-4 mui-col-sm-4">
                    <input class="" value="all" type="radio" name="online" checked>
                    <span class="font-14">不限</span>
                </div>
                <div class="mui-radio mui-col-xs-4 mui-col-sm-4">
                    <input class="" value="0" type="radio" name="online">
                    <span class="font-14">离线</span>
                </div>
                <div class="mui-radio mui-col-xs-4 mui-col-sm-4">
                    <input class="" value="1" type="radio" name="online">
                    <span class="font-14">在线</span>
                </div>
            </div>
        </div>

        <div class="or-border-fir mui-input-row input-clear or-order-status">
            <label class="or-label-text">过期状态<span></span></label>
            <div class="mui-row or-order-status-font">
                <div class="mui-radio mui-col-xs-3 mui-col-sm-3">
                    <input class="" value="normal" type="radio" name="expireStatus">
                    <span class="font-14">正常</span>
                </div>
                <div class="mui-radio mui-col-xs-4 mui-col-sm-4">
                    <input class="" value="expire" type="radio" name="expireStatus">
                    <span class="font-14">已过期</span>
                </div>
                <div class="mui-radio mui-col-xs-65 mui-col-sm-5">
                    <input class="" value="toExpire" type="radio" name="expireStatus">
                    <span class="font-14">即将过期</span>
                </div>
            </div>
        </div>

        <div class="mui-input-row filter-panel-btn flexbox">
            <span class="cancel-btn flex">取消</span>
            <span class="ok-btn flex">确定</span>
        </div>
    </div>
</div>


<h5 class="dev-top-info flexbox">
    <div class="flex"><span class="putOnAddress">0</span>个地址，<span class="equipmentNum">0</span>台设备</div>
</h5>

<div id="pullrefresh" class="mui-content mui-clearfix mui-scroll-wrapper mgr-bd">
    <!-- 设备列表 -->
    <div class="mui-scroll">
        <div class="list"></div>
    </div>
</div>
<div class="mgr-tip mui-hidden"></div>

<script src="/components/lib/jquery.min.js"></script>
<script src="/components/lib/mui.min.js"></script>
<script src="/components/lib/mui.picker.min.js"></script>
<script src="/components/lib/moment.min.js"></script>
<script src="/components/lib/moment.zh.js"></script>
<script src="/components/custom/js/common.js"></script>
<script src="/app/js/xyf.common.js"></script>
<script>
    var dealerId = getQueryString("dealerId");

    $(function () {
        //全选
        $("#checkbox-all").on("change", function () {
            if ($(this).is(":checked")) {
                $(".checkbox-btn").prop("checked", true);
            } else {
                $(".checkbox-btn").prop("checked", false);
            }
        });

        //复选框事件重写
        $("#pullrefresh").on("tap", ".mui-checkbox-wear", function (evt) {
            var box = $(this).find(".mui-checkbox input");
            if (box.is(":checked")) {
                box.prop("checked", false);
            } else {
                box.prop("checked", true);
            }
            evt.stopPropagation();
            evt.preventDefault();
        }).on("tap", ".groupSelect", function () {
            //组全选：该事件必须在上个事件之后
            var input = $(this).find("input");
            var checked = input.is(":checked");

            var groupDom = $(this).closest("li").find(".group-content");
            if (checked) {
                groupDom.find(".checkbox-btn").prop("checked", true);
            } else {
                groupDom.find(".checkbox-btn").prop("checked", false);
            }
        });

    });

    //激活批量操作
    function batchOper() {
        if ($("body").hasClass("batch-model")) {
            $("body").removeClass("batch-model");
        } else {
            $("body").addClass("batch-model");
        }
    }


    //检测过期时间，经销商修改的过期时间不得早于流量卡的过期时间
    function validateExpireDate() {
        var validate = true;
        var targetExpireDate = $('#expireDate').val();
        $(".devCheck").each(function () {
            var checked = $(this).find("input").is(":checked");
            if (checked) {
                var expireDate = $(this).closest(".deviceRow").attr("expireDate");
                if (targetExpireDate < expireDate) {
                    validate = false;
                    return;
                }
            }
        });
        return validate;
    }

    //获取被选中设备的ID，并检测选中的设备是否同类型
    function getSelectIdInfo() {
        var idList = [];
        var typeId = null;
        var typeSame = true;//检测是否同设备类型
        $(".devCheck").each(function () {
            var checked = $(this).find("input").is(":checked");
            if (checked) {
                var id = $(this).closest(".deviceRow").attr("data-id");
                var getTypeId = $(this).closest(".deviceRow").attr("type-id");
                if (typeId != null && getTypeId != typeId) {
                    typeSame = false;
                    return false;
                } else {
                    typeId = getTypeId;
                }

                if (id) {
                    idList.push(id);
                }
            }
        });

        if (!typeSame) {
            return null;
        } else {
            return {idList: idList, typeId: typeId};
        }
    }

    var picker = new mui.PopPicker({
        layer: 1
    });
    /**
     * 地址筛选
     * @private
     */
    var _filterPicker = {
        pickerDatas: [],
        /**
         * 获取设备数量和投放地址列表
         */
        getEquipmentNumAndAdressList: function () {
            var $scope = this;//todo 改为get
            sendRequest('/device/getEquipmentNumAndAddressList', 'post', {dealerId: dealerId}, function (res) {
                if (res.result == 1) {
                    $scope.setPickerData(res.para.groups);
                    picker.setData($scope.pickerDatas);
                } else {
                    mui.toast(res.description);
                }
            })
        },
        /**
         * 设置设备投放地址数和设备数量
         * @param equipmentNum 设备数
         * @param AddressNum 地址数
         */
        setEquipmentNumAndAddressNum: function (AddressNum, equipmentNum) {
            $('.putOnAddress').text(AddressNum);
            $('.equipmentNum').text(equipmentNum);
        },

        /**
         * 设置picker的数据
         * @param datas
         */
        setPickerData: function (datas) {
            this.pickerDatas.push({
                value: 'all',
                text: '全部投放地址',
            });

            var addressHtml = "";
            for (var i = 0, length = datas.length; i < length; i++) {
                var item = {
                    value: datas[i].groupId,
                    text: datas[i].name,
                };
                this.pickerDatas.push(item);
                addressHtml += '<li class="mui-table-view-cell">' + datas[i].name + '</li>';
            }
        }
    };


    FilterComponent({
        ok: function () {
            searchByKey()
        }
    });

    //关键字搜索
    document.onkeydown = function (ev) {
        if (ev.keyCode == 13) {
            ev.preventDefault();
            searchByKey();
        }
    };
    function searchByKey() {
        pageIndex = 0;
        $(".list").empty();//清空设备列表
        mui('#pullrefresh').pullRefresh().refresh(true);//重置上拉加载
        pullupRefresh();//加载设备数据
    }
    //searchBar
    $(function () {
        _filterPicker.getEquipmentNumAndAdressList();

        $("#showPicker").on("tap", function () {
            picker.show(function (rs) {
                equipmentGroupId = rs[0].value;
                $('#groupText').html(rs[0].text);

            });
            return false;
        })

    });

    mui.init({
        pullRefresh: {
            container: '#pullrefresh',
            up: {
                contentrefresh: '正在加载...',
                contentnomore: '',
                callback: pullupRefresh
            }
        }
    });

    /* 上拉加载具体业务实现*/
    var pageIndex = 0;
    var total = 0;
    var groupCount = 0;
    var equipmentGroupId = "";

    function pullupRefresh() {
        var groupName = null;
        pageIndex++;
        var data = {
            "dealerId": dealerId,
            "pageIndex": pageIndex,
            "pageSize": 10,
            "searchKey": $("#searchKey").val(),
            "online": $("input[name='online']:checked").val(),
            "expireStatus": $("input[name='expireStatus']:checked").val(),
            "equipmentGroupId": equipmentGroupId
        };
        var groupList = "";
        sendRequest("/agent/equipmentList?random=" + Math.random() * 1000, "GET", data, function (res) {
            if (res.result == 1) {
                if (pageIndex == 1) {
                    total = res.para.total;
                    groupCount = res.para.groupCount;
                    resultList = "";
                    groupName = null;
                }
                var length = res.para.dataList.length;
                _filterPicker.setEquipmentNumAndAddressNum(groupCount, total);
                if (pageIndex == 1 && length == 0) {
                    $(".mgr-bd").hide();
                    $(".mgr-tip").removeClass("mui-hidden");
                } else {
                    $(".mgr-bd").show();
                    $(".mgr-tip").addClass("mui-hidden");
                }
                mui('#pullrefresh').pullRefresh().endPullupToRefresh((pageIndex * 10 >= total));
                var dataTree = [];
                for (var i = 0; i < length; i++) {
                    var obj = res.para.dataList[i];

                    //展示分组
                    if (obj.name != groupName) {
                        var p = {};
                        p[obj.groupId] = [];
                        dataTree.push(p);
                        groupName = obj.name;

                        if ($("#" + obj.groupId).length == 0) {
                            if (obj.isManager) {
                                var role = "manage";
                            } else {
                                var role = "limit-user";
                            }

                            groupList += '<ul role="' + role + '" class="mui-table-view"><li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="javascript:void 0;">' +
                                    '<div class="mui-checkbox-wear groupSelect"><div class="mui-checkbox"><input class="checkbox-btn" value="" type="checkbox"></div></div>' +
                                    '<span class="font-18 v-middle" id="' + obj.groupId + '">' +
                                    groupName + '</span><em permission="limit-user-show" class="total-mark">合伙</em><span class="mui-pull-right group-ele-total">' +
                                    '台</span></a><div class="mui-collapse-content"><ul class="mui-table-view group-content">';
                            groupList += '</ul></div></li></ul>';
                        }
                    }

                    var simStatusEnum = {
                        'chargedUnupdated': '充值待更新',
                        'illegal': '非法卡',
                        'updated': '已更新',
                        'undefined': '',
                    }
                    var expireDateHtml = simStatusEnum[obj.simStatus] || ('到期时间：' + obj.expireDate)
                    //追加分组下面的设备
                    var resultList = "";
                    resultList += '<li class="mui-table-view-cell deviceRow" data-id="' + obj.id + '" type-id="' + obj.typeId + '" expireDate="' + obj.expireDate + '">' +
                            '<div class="mui-row" href="javascript:void(0)">' +
                            '<div class="devCheck mui-checkbox-wear"><div class="mui-checkbox"><input class="checkbox-btn" value="" type="checkbox"></div></div>' +
                            '<span class="mui-text-left">' + "<i class='c-primary iconfont " + getDevIconName(obj.type) + "'></i> " + obj.type + ' ' + obj.logicalCode + '</span>' +
                            '<p class="mui-text-left mui-ellipsis font-b-14-4" style="min-height: 1.5em">' + expireDateHtml + '</p>' +
                            '</div>' +
                            '</li>';
                    var lastElement = dataTree[dataTree.length - 1];
                    lastElement[obj.groupId].push(resultList);

                }

                $(".list").append(groupList);
                $.each(dataTree, function (i, e) {
                    for (var key in e) {
                        $("#" + key).parent().next().find(".group-content").append(e[key].join(""));
                    }
                });


                // 设备刷新完后刷新设备在线 总数目
                setDevCount();
            } else {
                mui.toast(res.description);
            }
        });
    }


    // 翻页或是刷新信号，可能会引起设备数量的变化，所以每次都要根据dom树去找在线或离线的设备
    function setDevCount() {
        var g = $(".group-content");
        $.each(g, function () {
            var e = $(this);
            var len = e.children().length;

            //找到在线的数量
            var onlineLength = 0;//暂时不要
            e.parent().prev("a").find(".group-ele-total").html(len + "台");

        });

    }

    if (mui.os.plus) {
        mui.plusReady(function () {
            setTimeout(function () {
                mui('#pullrefresh').pullRefresh().pullupLoading();
            }, 1000);

        });
    } else {
        mui.ready(function () {
            mui('#pullrefresh').pullRefresh().pullupLoading();
        });
    }

    /**
     * 初始化全局变量
     */
    function initGlobalVar() {
        pageIndex = 0;
    }
</script>
</body>
</html>