repairList.html 12.5 KB
<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>报障列表</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body class="repair-list-view warning-view">
    <div class="aui-content aui-margin-b-15">
        <header class="aui-bar aui-bar-nav" id="header">
            <a class="aui-btn aui-pull-left" tapmode onclick="closeWin()">
                <span class="aui-iconfont aui-icon-left"></span>
            </a>
            <div class="aui-title">报障列表</div>
        </header>
        <div class="search-view-inline">
            <div class="select-list aui-ellipsis-1" tapmode onclick="selectNumber( this )">
                <span>请选择设备编号</span>
                <i></i>
            </div>
            <label></label>
            <div class="select-list aui-ellipsis-1" tapmode onclick="selectStatus( this )">
                <span>请选择</span>
                <i></i>
            </div>
        </div>
        <ul id="repair-list"></ul>
        <div id="loading-data-view"></div>
    </div>
</body>

</html>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    var header = $api.byId('header');
    var selectorStyle = {
        mask: 'rgba(0,0,0,0.3)',
        title: {
            bg: '#f5f5f5',
            color: 'rgb(0,0,0)',
            size: 14,
            h: 44
        },
        leftButton: {
            w: 80,
            h: 35,
            marginT: 5,
            marginL: 8,
            color: 'rgb(0,0,0)',
            bg: 'rgb(200,200,200)',
            size: 14,
        },
        rightButton: {
            w: 80,
            h: 35,
            marginT: 5,
            marginR: 8,
            color: 'rgb(255,255,255)',
            bg: '#5D93E4',
            size: 14,
        },
        item: {
            h: 40,
            bg: '#fff',
            bgActive: '#57A0EC',
            bgHighlight: '#57A0EC',
            color: '#666',
            active: '#FFF',
            highlight: '#FFF',
            size: 14,
            lineColor: '#ccc',
            textAlign: 'center',
        },
    };
    var page = 1,
        limit = 10,
        status = '',
        keyword = '',
        imei = '',
        nextDataFlag = true,loadDataFlag = true;
    var token = $api.getStorage('userToken');
    var user_id = $api.getStorage('userID');
    fixStatusBar_API(header);
    apiready = function() {
        api.setStatusBarStyle({
            style: 'dark',
            color: 'rgba(0,0,0,0)'
        });
        api.parseTapmode();
        fnInitData();
        /**上拉加载 */
        api.addEventListener({
            name: 'scrolltobottom',
            extra: {
                threshold: 0
            }
        }, function(ret, err) {
            if(!loadDataFlag)return false;
            if (nextDataFlag) {
                //页码+1,继续请求数据
                page += 1;
                fnInitData();
            } else {
                api.toast({
                    msg: "暂无更多数据",
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });
        /** 下拉刷新 */
        // api.setRefreshHeaderInfo({
        //     bgColor: '#ccc',
        //     textColor: '#fff',
        //     textDown: '下拉刷新...',
        //     textUp: '松开刷新...'
        // }, function(ret, err) {
        //     api.refreshHeaderLoadDone();
        // });
    }

    function fnInitData() {
        loadDataFlag = false;
        loadingData($api.byId("loading-data-view"));
        //console.log(HOST + '/iot_api/v1/app/get_issue_list?user_id=' + user_id + '&page=' + page + '&limit=' + limit + '&imei=' + imei + '&status=' + status + '&keyword=' + keyword);
        $.ajax({
            url: HOST + '/iot_api/v1/app/get_issue_list?user_id=' + user_id + '&page=' + page + '&limit=' + limit + '&imei=' + imei + '&status=' + status + '&keyword=' + keyword,
            type: 'GET',
            dataType: 'json',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
                'token': token
            },
            success: function(ret) {
                //console.log(JSON.stringify(ret));
                if (ret) {
                    if (ret.code == 0) {
                        if (!ret.data.next) {
                            nextDataFlag = false;
                        }
                        if (ret.data.count==0) {
                            noData($api.byId("repair-list"));
                        }
                        for (var i = 0; i < ret.data.rows.length; i++) {
                            var targetItem = '<li tapmode data-id="' + ret.data.rows[i].id + '" onclick="openRepairDetail(this)">' +
                                '<p><label>' + (((page - 1) * limit) + (i + 1)) + '</label><span>' + ret.data.rows[i].imei + '</span><abbr>' + parseTime(ret.data.rows[i].updatedAt,'{y}-{m}-{d} {h}:{i}:{s}') + '</abbr></p>' +
                                '<p class="aui-hr"></p>' +
                                '<p><b>原因:</b><samp>' + ret.data.rows[i].type + '</samp></p>' +
                                '<p class="aui-hr"></p>' +
                                '<p><small class="aui-pull-right">' + ret.data.rows[i].status + '</small></p>' +
                                '</li>';
                            $api.append($api.byId("repair-list"), targetItem);
                        }
                    } else {
                        api.toast({
                            msg: ret.msg,
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                }
                $api.html($api.byId('loading-data-view'),'');
                loadDataFlag = true;
            },
            error: function() {
                $api.html($api.byId('loading-data-view'),'');
                api.toast({
                    msg: '获取数据失败',
                    duration: 2000,
                    location: 'bottom'
                });
                loadDataFlag = true;
            }
        });
    }

    function selectNumber(obj) {
        var deviceListStr = $api.getStorage('devices');
        if (!deviceListStr || deviceListStr == '') {
            api.toast({
                msg: '暂无设备',
                duration: 2000,
                location: 'bottom'
            });
        }
        var devices = JSON.parse(deviceListStr);
        if (devices && devices.length > 0) {
            var selectNum = api.require('UIMultiSelector');
            var deviceIDs = [];
            for (var i in devices) {
                deviceIDs[i] = {
                    text: devices[i].imei,
                    status: imei == devices[i].imei ? 'selected' : 'normal'
                }
            }
            selectNum.open({
                rect: {
                    h: 244
                },
                text: {
                    title: '设备编号',
                    leftBtn: '取消',
                    rightBtn: '确定',
                    selectAll: '全选'
                },
                max: 1,
                singleSelection: true,
                maskClose: false,
                styles: selectorStyle,
                animation: true,
                maskClose: true,
                items: deviceIDs
            }, function(ret, err) {
                if (ret.eventType == 'clickLeft') {
                    imei = "";
                    $api.html($api.dom(obj, 'span'), "请选择设备编号");
                    selectNum.close();
                }
                if (ret.eventType == 'clickRight') {
                    //console.log(JSON.stringify(ret))
                    if (ret.items.length > 0) {
                        imei = ret.items[0].text;
                        $api.html($api.dom(obj, 'span'), imei);
                        page = 1;
                        nextDataFlag = true;
                        $api.html($api.byId("repair-list"), '');
                        fnInitData();
                        selectNum.close();
                    } else {
                        api.toast({
                            msg: '请选择设备',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                }
            });
        }
    }

    function selectStatus(obj) {
        var statusList = [];
        $.ajax({
            url: HOST + '/iot_api/v1/app/get_issue_status',
            type: 'GET',
            dataType: 'json',
            headers: {
                'Content-Type': 'application/json;charset=utf-8',
                'token': token
            },
            success: function(ret) {
                //console.log(JSON.stringify(ret))
                if (ret) {
                    if (ret.code == 0) {
                        for (var i = 0; i < ret.data.length; i++) {
                            statusList[i] = {
                                text: ret.data[i],
                                status: status == ret.data[i] ? 'selected' : 'normal'
                            };
                        }
                        var selectSta = api.require('UIMultiSelector');
                        selectSta.open({
                            rect: {
                                h: 244
                            },
                            text: {
                                title: '处理状态',
                                leftBtn: '取消',
                                rightBtn: '确定',
                                selectAll: '全选'
                            },
                            max: 1,
                            singleSelection: true,
                            maskClose: false,
                            styles: selectorStyle,
                            animation: true,
                            maskClose: true,
                            items: statusList
                        }, function(ret, err) {
                            if (ret.eventType == 'clickLeft') {
                                status = "";
                                $api.html($api.dom(obj, 'span'), "请选择");
                                selectSta.close();
                            }
                            if (ret.eventType == 'clickRight') {
                                //console.log(JSON.stringify(ret))
                                if (ret.items.length > 0) {
                                    status = ret.items[0].text;
                                    $api.html($api.dom(obj, 'span'), status);
                                    page = 1;
                                    nextDataFlag = true;
                                    $api.html($api.byId("repair-list"), '');
                                    fnInitData();
                                    selectSta.close();
                                } else {
                                    api.toast({
                                        msg: '请选择处理状态',
                                        duration: 2000,
                                        location: 'bottom'
                                    });
                                }
                            }
                        });
                    } else {
                        api.toast({
                            msg: '获取报修状态失败',
                            duration: 2000,
                            location: 'bottom'
                        });
                    }
                }
            },
            error: function() {
                api.toast({
                    msg: '获取报修状态失败',
                    duration: 2000,
                    location: 'bottom'
                });
            }
        });
    }

    function openRepairDetail(obj) {
        var id = $api.attr(obj, 'data-id');
        //console.log(id);
        api.openWin({ slidBackEnabled:false,
            name: 'repairDetail',
            url: 'repairDetail.html',
            pageParam: {
                "id": id
            }
        });
    }
</script>