| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732 | <!DOCTYPE html><html><head>    <meta charset="utf-8"/>    <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"/>    <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="https://cdn.washpayer.com/components/lib/mui.picker.min.css"/>    <link rel="stylesheet" href="../components/custom/css/common.css"/>    <link rel="stylesheet" href="css/xyf.common.min.css">    <style>        /*重置背景**/        html, .mui-content {            background: #EBEBEB;        }    </style></head><body style="padding-bottom: 60px"><div class="income-panel">    <div class=" mui-input-group mui-reset">        <div class="mui-row">            <div class="mui-col-xs-7 mui-col-sm-7 ">                <div class="mui-input-row mui-search">                    <input type="search" class="mui-input-clear" id="searchKey" placeholder="设备地址">                </div>            </div>            <div class="mui-col-xs-5 mui-col-sm-5 mui-text-right">                <div class="filter-btn"><span>筛选</span><i class="iconfont icon-triangle-up"></i></div>                <div class="in-row-btn" onclick="showChart()"><i class="iconfont icon-chart-pie"></i></div>            </div>        </div>    </div>    <div class="mui-table-view  clear-before">        <div class="mui-row head-status">            <div class="font-12 mui-col-xs-8 mui-col-sm-8">                <span class="" id="time"></span>                <span class="font-bold" id="categoryName">收益</span>            </div>            <div class="mui-col-xs-4 mui-col-sm-4 per-box">                <div class="mui-pull-right" id="toggleCategory" onclick="toggleCategory()">                    <div class="mui-btn"><span style="-webkit-transform: rotate(0deg);">查看消费</span></div>                    <div class="mui-btn"><span style="-webkit-transform: rotate(0deg);">查看收益</span></div>                </div>            </div>        </div>    </div>    <div class="filter-panel datepickerSelecter" style="display: none" id="options">        <div class="input-group-vertical mui-table-view clear-b-border datepicker">            <div style="background: #def;color: #333;font-size: 12px;padding: 10px;">                注:为加速查询性能,提供更好的查询体验,系统仅支持查询最近3年的订单统计数据。            </div>            <!--    暂时隐藏 后面可能还会改。。。-->            <div class="or-border-fir mui-input-row input-clear or-order-status select-date" id="start-date"                 style="">                <label class="or-label-text">开始日期</label>                <span class="mui-icon mui-icon-arrowright"></span>                <span class="or-order-status-font selected-text" id="beginDate"></span>            </div>            <div class="mui-input-row input-clear or-order-status select-date" id="end-date" style="">                <label class="or-label-text">结束日期</label>                <span class="mui-icon mui-icon-arrowright"></span>                <span class="or-order-status-font selected-text" id="endDate"></span>            </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>    <div id="pieChart" class="chart-box"></div>    <div id="pullrefresh" class="mui-content mui-scroll-wrapper time-bd">        <div class="mui-scroll">            <div class="list"></div>        </div>    </div></div><script type="text/html" id="modalIncome"></script><script type="text/html" id="modalConsume">    <div class="custom-bottom groupItem active" role="manage">        <div class="bd-hd"><i class="iconfont icon-balance c-primary iconBack"></i>            <p class="titleInfo font-b"><span class="groupName v-middle"></span><em class="total-mark"></em></p>            <p class="address"></p></div>        <ul class="mui-table-view interval bd-bd">            <li class="mui-table-view-cell">                <a class="consume-list">                </a>            </li>        </ul>    </div></script><script src="https://cdn.washpayer.com/components/lib/echarts.js"></script><script src="https://cdn.washpayer.com/components/lib/echarts-theme/macarons.js"></script><script src="https://cdn.washpayer.com/components/lib/mui.min.js"></script><script src="https://cdn.washpayer.com/components/lib/mui.picker.min.js"></script><script src="https://cdn.washpayer.com/components/lib/moment.min.js"></script><script src="https://cdn.washpayer.com/components/lib/jquery.min.js"></script><script src="/components/custom/js/common.js"></script><script src="js/xyf.common.js"></script><script>    var condition = null;    var searchKey = "";    var category = "income";// 或 consume    var startTime = moment().format("YYYY-MM-DD");    var endTime = moment().format("YYYY-MM-DD");    //如果调到子页面,返回后还是保留查询条件    var orRecordBack = getQueryString('orRecord');    if (orRecordBack) {        history.replaceState(null, null, "income-location.html");//清除orRecord    }    // 缓存条件    var pageType = 'incomeLocation';    //获取条件缓存数据    if (orRecordBack) {        condition = localStorage.condition ? JSON.parse(localStorage.condition)[pageType] : null;    }    var setCondition = function () {        var data = {            startTime: startTime,//开始日期            endTime: endTime,//结束日期            category: category,//分类            searchKey: searchKey,//分类        };        var conArr = localStorage.condition ? JSON.parse(localStorage.condition) : {};        conArr[pageType] = data;        localStorage.condition = JSON.stringify(conArr);    };    /*根据缓存渲染已有条件数据*/    if (condition) {        if (condition.startTime) {            startTime = condition.startTime        }        if (condition.endTime) {            endTime = condition.endTime        }        if (condition.searchKey) {            searchKey = condition.searchKey            $("#searchKey").value(searchKey);        }        if (condition.category) {            category = condition.category        }        if (category == "consume") {            $("#categoryName").text("消费情况");            $("#toggleCategory").addClass("rotate");        }    }    setTimeTitle();    function revertTime() {        //缓存        var tempTime = startTime;        //开始        startTimePicker.setSelectedValue(endTime);        $('#beginDate').text(endTime);        startTime = endTime        //结束        endTimePicker.setSelectedValue(tempTime);        $('#endDate').text(tempTime);        endTime = tempTime        console.log('revertTime')    }    FilterComponent({        ok: function () {            /*合法性验证*/            if (startTime > endTime) {                revertTime();// 反转时间,避免用户再点            }            setTimeTitle();            search();        }    });    function setTimeTitle() {        if (startTime == endTime) {            $("#time").html(startTime + " ");        } else {            $("#time").html(startTime + "至" + endTime + " ");        }        $('#beginDate').text(startTime);        $('#endDate').text(endTime);    }    // 搜索查询    function search(callback) {        pageIndex = 0;        allDataList = [];        $(".list").empty(); // 清空数据        mui('#pullrefresh').pullRefresh().refresh(true);//重置上拉加载        pullupRefresh(callback);    }    var startTimePicker    var endTimePicker    //日期筛选条件    function initDataPick() {        var pickerBegin = moment().add(-2, 'year').startOf("year").toDate();//控件可选最小时间        var pickerEnd = new Date();//控件可选最大时间        var options = {            type: "date",            beginDate: pickerBegin,            endDate: pickerEnd        };        var startTimeBtn = $('#start-date');        startTimePicker = new mui.DtPicker(options);        startTimePicker.setSelectedValue(startTime);//默认选中开始时间        startTimeBtn[0].addEventListener('tap', function () {            //todo 在日期还在滚动的过程中点确定会获取不到值,并且报错报错            startTimePicker.show(function (time) {                startTime = time.y.text + '-' + time.m.text + '-' + time.d.text + '';                $('#beginDate').text(startTime);                // 由开始日期来重新确定结束日期的可选范围; todo 会渲染更多的dom,目前没有找到update option的方式,这个组件不行                var currentYear = moment().format("YYYY")                var sY = time.y.text                var opt = {                    type: "date",                    beginDate: moment(sY + '-01-01').toDate(),                    endDate: moment(sY + '-12-31').toDate()                }                if (currentYear === sY) {                    // 本年的话 end范围是今天                    opt.endDate = new Date()                }                endTimePicker = new mui.DtPicker(opt);                if (currentYear === sY) {                    // 如果是今年,结束时间自动变为今天                    endTimePicker.setSelectedValue(moment().format('YYYY-MM-DD'));                    $('#endDate').text(moment().format('YYYY-MM-DD'));                    endTime = moment().format('YYYY-MM-DD')                } else {                    //如果不是今年,结束时间变为12-31日或者不变                    var endYear = moment(endTime).format('YYYY')                    if (endYear != sY || endTime < startTime) {                        endTime = startTime                        endTimePicker.setSelectedValue(endTime);                        $('#endDate').text(endTime);                    }                }                // 又要重新绑定事件                endTimeBtn[0].addEventListener('tap', function () {                    endTimePicker.show(function (time) {                        endTime = time.y.text + '-' + time.m.text + '-' + time.d.text + '';                        $('#endDate').text(endTime);                    });                }, false);            });        }, false);        // 结束时间选择器,首次初始化,范围是 今年年初-今天        var endTimeBtn = $('#end-date');        endTimePicker = new mui.DtPicker({            type: "date",            beginDate: moment().startOf('year').toDate(),            endDate: new Date()        });        endTimePicker.setSelectedValue(endTime);//默认选中结束时间        endTimeBtn[0].addEventListener('tap', function () {            endTimePicker.show(function (time) {                endTime = time.y.text + '-' + time.m.text + '-' + time.d.text + '';                $('#endDate').text(endTime);            });        }, false);        //快速日期范围选择        $('.datepicker .mui-button-row button').tap(function () {            $(this).addClass('active').siblings().removeClass('active');            var range = $(this).attr('range');            setDateTime(range);            startTimePicker.setSelectedValue(startTime);            endTimePicker.setSelectedValue(endTime);        });        function setDateTime(range) {            startTime = moment().add(-range, "year").format("YYYY-01-01");            endTime = moment().add(-range, "year").format("YYYY-12-31");            $('#beginDate').text(startTime);            $('#endDate').text(endTime);        }    }    initDataPick()    mui.init({        pullRefresh: {            container: '#pullrefresh',            up: {                contentrefresh: '正在加载...',                contentnomore: '',                callback: pullupRefresh            }        }    });    /* 上拉加载具体业务实现*/    var pageIndex = 0;    var allDataList = [];    var total = 0;    function pullupRefresh(callback) {        pageIndex++;        var url = "/dealer/groupIncomeData";        if (category == "consume") {            url = "/dealer/groupConsumptionData";        }        var searchKey = $("#searchKey").val();        var data = {            "searchKey": searchKey,            "pageIndex": pageIndex,            "pageSize": 10,            "startTime": startTime,            "endTime": endTime        };        setCondition();//设置条件到缓存,回退则保留条件,从主页进来不保留条件并且会刷新条件        sendRequest(url, "GET", data, function (res) {            if (res.result == 1) {                if (pageIndex == 1) {                    total = res.para.total;                    if (total == 0) {                        $('#pullrefresh').addClass('mui-hidden');                        $("body").append('<div class="nomore"></div>');                    }                }                var length = res.para.dataList.length;                allDataList = allDataList.concat(res.para.dataList);                refreshChart();                mui('#pullrefresh').pullRefresh().endPullupToRefresh((pageIndex * 10 >= total));                for (var i = 0; i < length; i++) {                    var obj = res.para.dataList[i];                    var income_href = 'income-details.html?startTime=' + startTime + '&groupId=' + obj.groupId + "&endTime=" + endTime;                    var offline_href = 'dev-offline-coins-stat-by-group.html?startTime=' + startTime + '&groupId=' + obj.groupId + "&endTime=" + endTime;                    var html = "";                    if (category == "income") {                        var agentProfitShare = parseFloat(obj.agentProfitShare || 0);//代理商分成                        var percent = parseFloat(obj.percent);//经销商合伙人所得分成                        if (percent == null) {                            percent = 100;                        }                        var finalPercent = ((100 - agentProfitShare) * (percent / 100)).toFixed(2);//最终分成,保留两位小数                        var percentStr = finalPercent + "%";                        var classStr = "";                        if (finalPercent == 100) {                            classStr = "mui-hidden";                        } else {                            classStr = "";                        }                        var perTip = "<i class='c-red'>" + percentStr + " = (100 - " + agentProfitShare + ")% x " + percent + "%</i>" + "  \r\n 分成公式 = (100 - 代理商分成比例)% x (您在合伙人中分成比例)%";                        var incomeDetailDom = '';                        for (var index in obj.incomeList) {                            var itemIn = obj.incomeList[index];                            var thisHref;                            var tmpUrl = thisHref = 'income-list.html?typeShow=income&groupId=' + obj.groupId + '&startTime=' + startTime + '&endTime=' + endTime                            if (itemIn.source === 'chargeVirtualCard') {                                thisHref = tmpUrl + "&category=chargeVirtualCard"                            } else if (itemIn.source === 'chargeCard') {                                thisHref = tmpUrl + "&category=chargeCard"                            } else {                                thisHref = income_href                            }                            var eq0 = parseFloat(itemIn.value) >= 0                            var itemInV = eq0 ? ('+' + itemIn.value) : (itemIn.value)                            var itemInC = eq0 ? 'c-red' : '';                            incomeDetailDom = incomeDetailDom + '<a class="" my-href="' + thisHref + '">' +                                '<p class="font-b">' + itemIn.name + '<span class="mui-pull-right font-b-12 ' + itemInC + '">' + itemInV + '</span></p></a>';                        }                        var emptyFix = "";                        if (!incomeDetailDom && !obj.offlineCoins) {                            emptyFix = '<li class="mui-table-view-cell"><a class="font-b-14">没有数据</a></li>'                        }                        var eq1 = parseFloat(obj.totalIncome) >= 0                        var totalIncome = eq1 ? ('+' + obj.totalIncome) : (obj.totalIncome)                        var totalIncomeC = eq1 ? 'c-red' : '';                        html = '<div class="custom-bottom groupItem">'                            + '<div class="bd-hd">'                            + '<i class="iconfont icon-purse c-primary iconBack"></i>'                            + '<p class="titleInfo font-b"><span class="groupName v-middle">' + obj.groupName + '</span><em class="total-mark">' + obj.equipmentCount + '台</em>' +                            '<em tip-btn="好的" tip-title="您的当前分成" title="' + perTip + '" class="tips-event-tap tips mark bg-red border-red ' + classStr + '" >分成' + percentStr + '</em>'                            + '</p>'                            + '<div class="totalIncome">' + '<span class="font-12 font-b-6">合计</span> <em class="' + totalIncomeC + '">' + totalIncome + '</em></div>'                            + '<p class="address">' + obj.address + '</p>'                            + '</i></div>'                            + '<ul class="mui-table-view bd-bd">'                            + '<li class="category-list mui-table-view-cell ' + (incomeDetailDom ? '' : 'mui-hidden') + '">'                            + incomeDetailDom                            + '</li>'                            + '<li class="mui-table-view-cell ' + (obj.offlineCoins ? '' : 'mui-hidden') + '">'                            + '<a class="font-b-14" my-href="' + offline_href + '">'                            // 线下投币显示次                            + '线下投币<span class="mui-pull-right font-b-6" >' + obj.offlineCoins + '次</span>'                            + '</a>'                            + '</li>'                            + emptyFix                            + '</ul>'                            + '</div>';                        if (obj.isManager || obj.isManager == null) {                            html = $(html).attr("role", "manage");                        } else {                            html = $(html).attr("role", "limit-user");                        }                    } else if (category == "consume") {                        html = $($("#modalConsume").html());                        var consumptionListDom = '';                        for (var index in obj.consumptionList) {                            var itemIn = obj.consumptionList[index];                            consumptionListDom = consumptionListDom + '<p class="font-b">' + itemIn.name + '<span class="mui-pull-right font-b font-b-12">' + itemIn.value + itemIn.unit + '</span></p>';                        }                        if (!consumptionListDom) {                            consumptionListDom = '<p class="font-b">没有数据</p>'                        }                        html.find(".consume-list").html(consumptionListDom);                        html.find(".groupName").html(obj.groupName);                        html.find(".address").html(obj.address);                        html.find(".total-mark").html(obj.equipmentCount + '台');                        html.find("a.consume-list").attr("my-href", income_href + "&category=consume");                    }                    $(".list").append(html);                }            } else {                mui.toast(res.description);            }            if (callback) {                callback();            }        });    }    // 加载echarts 并展示    var chartEntity;    function loadChart() {        var list = allDataList;        var data = [];//内环        var data2 = [];//外环        for (var index in list) {            var obj = list[index];            var detailList = [];            if (category == "income") {                data.push({value: obj.totalIncome, name: obj.groupName});//收入情况一定会有一个总的收入                detailList = obj.incomeList;            } else {                detailList = obj.consumptionList;            }            var totalCusume = 0;            for (var index2 in detailList) {                var item2 = detailList[index2];                // 消费情况只有数据,得把不同的类目加起来,放在饼图上便于展示                totalCusume = totalCusume + parseFloat(item2.value);                data2.push({value: item2.value, name: obj.groupName + "-" + item2.name, shortName: item2.name});            }            if (category !== "income") {                data.push({value: totalCusume, name: obj.groupName});//把消费不同类目的总数加到内环            }        }        var option = {            tooltip: {                trigger: 'item',                formatter: function (params) {                    var tipNum = "<span class='c-red'>+" + params.value + " </span>";                    if (category == "consume") {                        tipNum = "<span class=''>" + params.value + " </span>";                    }                    var span = '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:' + params.color + ';"></span>';                    return span + params.name + ":" + tipNum + "<span style='background: #334455;color: #fff;padding: 0 4px;border-radius: 2px'>占比" + params.percent + "%</span>"                }            },            series: [                {                    type: 'pie',                    radius: ['0%', '30%'],                    label: {                        normal: {                            position: 'inner'                        }                    },                    labelLine: {                        normal: {                            show: false                        }                    },                    data: data                },                {                    type: 'pie',                    radius: ['40%', '55%'],                    label: {                        normal: {                            position: "outside",                            formatter: function (params) {                                return '{b|' + params.data.shortName + '}\n{hr|}\n ' + params.value + '  {per|' + params.percent + '%} '                            },                            backgroundColor: '#eee',                            borderColor: '#aaa',                            borderWidth: .3,                            borderRadius: 4,                            rich: {                                b: {                                    color: '#999',                                    lineHeight: 18,                                    align: 'center'                                },                                hr: {                                    borderColor: '#aaa',                                    width: '100%',                                    borderWidth: 0.3,                                    height: 0                                },                                per: {                                    lineHeight: 24,                                    color: '#eee',                                    backgroundColor: '#334455',                                    padding: [2, 4],                                    borderRadius: 2                                }                            }                        }                    },                    labelLine: {                        length2: 5,                    },                    data: data2                },            ]        };        if (chartEntity) {        } else {            var container = document.getElementById("pieChart");            chartEntity = echarts.init(container, 'macarons');        }        chartEntity.setOption(option);    }    // 点击按钮加载饼图,并展示    function showChart() {        loadChart();        showChartItem();    }    // 展示echarts模块,隐藏列表模块    var showFlag = false;    function showChartItem() {        if (showFlag) {            $(".income-panel").removeClass("chart-active");        } else {            $(".income-panel").addClass("chart-active");        }        showFlag = !showFlag;    }    // 刷新饼图,如果饼图有显示则渲染,不显示则不渲染    function refreshChart() {        if (showFlag) {            loadChart();        }    }    // 切换统计类目    function toggleCategory() {        var myMask = new Mask("正在获取数据...");        myMask.show();        var toggleCategoryDom = $("#toggleCategory");        if (toggleCategoryDom.hasClass("disabled")) {            return        }        toggleCategoryDom.addClass("disabled");        if (category == "income") {            category = "consume";            $("#categoryName").text("消费");            toggleCategoryDom.addClass("rotate");            $("#pullrefresh").animate({left: "-100%"}, function () {                $("#pullrefresh").css({left: "0"});                refreshData()            });        } else {            category = "income";            $("#categoryName").text("收益");            toggleCategoryDom.removeClass("rotate");            $("#pullrefresh").animate({left: "100%"}, function () {                $("#pullrefresh").css({left: "0"});                refreshData()            });        }        function refreshData() {            search(function () {                toggleCategoryDom.removeClass("disabled");                myMask.remove();            });        }    }    if (mui.os.plus) {        mui.plusReady(function () {            setTimeout(function () {                mui('#pullrefresh').pullRefresh().pullupLoading();            }, 1000);        });    } else {        mui.ready(function () {            mui('#pullrefresh').pullRefresh().pullupLoading();        });    }    //关键字搜索    document.onkeydown = function (ev) {        if (ev.keyCode == 13) {            ev.preventDefault();            search();        }    };    $("body").on("tap", ".bd-hd", function () {        var pdom = $(this).parent();        if (pdom.hasClass("active")) {            pdom.removeClass("active");        } else {            pdom.addClass("active");        }    });    //因为该a标签已经用在mui的特性中,必须重新加上mui的tap事件,点击a标签才有反应    //底部菜单事件    mui('body').on('tap', '.mui-tab-item[data-href]', function () {        replacePage($(this).attr("data-href"));    });    //分组内部链接点击事件    mui('body').on('tap', '[my-href]', function () {        history.replaceState(null, null, "income-location.html?orRecord=true&t=" + new Date().getTime());//再次返回该页面会带上orRecord,带上随机数,避免网页本身缓存!!!        var url = $(this).attr('my-href');        if (url.indexOf("income-list") > -1) {            var halfYear = moment().add(-6, 'month').startOf("month").format("YYYY-MM-DD");            console.log(startTime, halfYear)            if (startTime && moment(startTime).isBefore(halfYear)) {                mui.toast('系统目前仅支持查询最近半年的订单明细数据(当前可查询' + halfYear + '起的数据)');            } else {                goPage(url);            }        } else {            goPage(url);        }    });</script></body></html>
 |