iHealth-app-demo/html/manager/js/pay-online-analysis.js

var self,
    initLevel, 
    type, 
    level, 
    area, 
    title, 
    startDate = '', 
    endDate = '',
    lowLevel,
    dateType = 1, //折线图坐标值1-日，2-周，3-月
    analysisType = "1", // 筛选维度的id, 1-按任务，2-按人口，3-高血压，4-糖尿病，5-65岁以上人群
    areaType; //标记底部区域选中的tab的值， 4 - 各区， 3 - 社区， 2 - 团队
    
var userRole;

var reqParam = []; //请求参数
var reqList = []; //请求的链接数据，根据这些信息后退的时候使用

//定义年份
var chooseYear;
var now = new Date();
if(now.getMonth() >= 6){
    chooseYear = now.getFullYear();
}else{
    chooseYear = now.getFullYear() - 1;
}

mui.plusReady(function(){
    var self = plus.webview.currentWebview();
//  userRole = plus!=null ? JSON.parse(plus.storage.getItem("selectedRole")) : {};
//  initLevel = userRole.code == CITY_CODE  ? 4 : userRole.code.length==6 ? 3 : 2;
    initLevel = self.level;
    level = initLevel;
    area = self.code;
    title = self.title;
    if(self.year){
        chooseYear = self.year;
    }
    startDate = getStartDate();
    endDate = getEndDate();
    
    //初始默认选中的时间和类型
    $(".choose-label").text(chooseYear);
    $("#areaTitle").text(title);
    
    //控制底部各区等tab的显示
    showTabs();
    
    initReqParams(); //现获得页面请求的接口参数
    //记录返回链接信息
    reqList.push({
        level: level,
        lowLevel: lowLevel,
        area: area,
        title: title,
        analysisType: analysisType,
        req: reqParam
    });
    loadData([0,1,2]); //现获得页面请求的接口参数
    initScroller();
    shaixuanInit(self);
    bindEvents();
});

//获得页面请求的接口参数
function initReqParams(){
    var mIndex = 82, //折线图指标index
        bIndexs = {"4": "75", "3": "76", "2": "77"};
    var bIndex = 82; //bIndexs[level];
    reqParam = [{
        url: "/statistics/signPayOnline",
        reqType: 'get',
        data: {level:level, area:area, year: chooseYear}
    },{
        url: "/statistics/interval_total",
        reqType: 'get',
        data: {level: level, area: area, startDate: startDate, endDate: endDate, interval: dateType, index: mIndex}
    },{
        url: "/statistics/lowlevel_all_sign_pay_online",
        reqType: 'post',
        data: {sort: 1, date: endDate, level: level, index: bIndex, area: area}
    }];
    if(lowLevel){
        reqParam[2].data.lowLevel = lowLevel;
    }
}

/*
 * 加载页面数据
 * @param loadArr array 记录需要请求的区域0-顶部，1-中间，2-底部
 */
function loadData(loadArr){
    plus.nativeUI.showWaiting();
    getJieZhiTime();
    
    var reqPromise = [];
    for(var i=0; i<loadArr.length; i++){
        var j = loadArr[i];
        reqPromise.push(reqParam[j]);
    }
    
    getReqPromises(reqPromise, true).then(function(ress){
        var res1, res2, res3;
        
        for(var i=0; i<loadArr.length; i++){
            var j = loadArr[i] + 1;
            if(j == 1){
                res1 = ress[i];
            }
            if(j == 2){
                res2 = ress[i];
            }
            if(j == 3){
                res3 = ress[i];
            }
        }
        
        if(res1 && res1.status == 200){
            handleTopData(res1.data);
        }
        if(res2 && res2.status == 200){
            handleSecondPanelData(res2.data);
        }
        if(res3){
            if(res3.status == 200){
                listHandle(res3.data);
            }else{
                $("#listTable").empty();
                mui.toast(res3.msg);
            }
        }
        plus.nativeUI.closeWaiting();
    });
}

/*
 * 加载数据截止时间
 */
function getJieZhiTime(){
    sendPost("/statistics/time",null,function(res){
    },function(res){
        if(res.status=="200"){
            var date = (res.data && res.data.substring(11,16)) || "";
            $(".jiezhi-time").html("（"+date+"）");
        }
    });
}

/*
 * 处理顶部水球图数据
 */
function handleTopData(res){
    $(".online-num").text(res.signPayOnlineNum);
    $(".online-rate").text(res.signPayOnlineRate);
    $(".offline-num").text(res.signPayUnderNum);
    $(".offline-rate").text(res.signPayUnderRate);
    
    var pieChart = echarts.init(document.getElementById('pieChart')),
        options = {
            tooltip: {
                trigger: 'item',
                formatter: "{b}:<br/> {c} ({d}%)"
            },
            series: [
                {
                    type:'pie',
                    radius: ['80%', '70%'],
                    color:['#ffc800', '#17b3ec'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
//                      emphasis: {
//                          show: true,
//                          textStyle: {
//                              fontSize: '16',
//                              fontWeight: 'bold'
//                          }
//                      }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:res.signPayOnlineNum, name:'线上缴费人数'},
                        {value:res.signPayUnderNum, name:'线下缴费人数'}
                    ]
                }
            ]
        };
    pieChart.setOption(options);
}

/*
 * 处理中间折线图数据
 */
function handleSecondPanelData(data){
    for(var p in data){
        var xData = _.map(data[p].data, function(o){
            return o.range;
        });
        var yData = _.map(data[p].data, function(o){
            return o.amount;
        });
        var lastIndex = yData.length % 10;
        if(yData.length >10 ){  
            var dataZoom_end = 100-(9/yData.length)*100;  
        }else{  
            var dataZoom_end = 0;  
        }  
        //初始给定第一版页面中时间区间
        if(dateType == 3){
            var d1 = xData[yData.length - lastIndex],
                d2 = xData[yData.length -1];
            $("#startValue").text(d1.substr(0,4)+"年"+d1.substr(5,2)+"月");
            $("#endValue").text(d2.substr(0,4)+"年"+d2.substr(5,2)+"月");
        }else{
            $("#startValue").text(xData[yData.length - lastIndex]);
            $("#endValue").text(xData[yData.length -1]);
        }
        var lineCharts = echarts.init(document.getElementById('lineChart'));
        var options = {
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                top: 'bottom',
                data:['线上缴费量']
            },
            grid: {
                left: '10px',
                right: '10px',
                bottom: '30px',
                top: '10px',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: xData,
                axisLabel: {
                    interval:0,//横轴信息全部显示  
                    formatter: function (value, index) {
                        if(dateType == 1 || dateType == 2){
                            if(index == 0){
                                $("#startValue").text(value);
                                return value.substr(5,2)+"月"+value.substr(8,2);
                            }else{
                                if(index == 10){
                                    $("#endValue").text(value);
                                }
                                return value.substr(8,2);
                            }
                        }else if(dateType == 3){
                            var val = value.substr(5,2)+"月"
                            if(index == 0){
                                $("#startValue").text(value.substr(0,4)+"年"+val);
                            }else{
                                if(index == 9){
                                    $("#endValue").text(value.substr(0,4)+"年"+val);
                                }
                            }
                            return val;
                        }
                    }
                }
            },
            yAxis: {
                type: 'value',
                axisPointer: {
                    snap: true
                },
                scale: true,
                minInterval: 1,
                boundaryGap: ['10%', '30%']
            },
            dataZoom: [{//给x轴设置滚动条  
                show: false,
                start: dataZoom_end,
                end: 100,
                type: 'slider',
                zoomLock: true,
            },{ //下面这个属性是内容区域配置
                start: dataZoom_end,
                end: 100,
                type: 'inside',
                zoomLock: true,
            }],
            series: [{
                name: '线上缴费量',
                type: 'line',
                smooth: true,
                data: yData,
                lineStyle:{
                    normal: {
                        color: '#12b7f5'
                    }
                },
                itemStyle:{
                    normal: {
                        color: '#12b7f5'
                    }
                }
            }]
        };
        lineCharts.setOption(options);
    }
}

/*
 * 处理底部区域数据
 */
function listHandle(res){
    for(var k in res){
        var list = res[k];
        var topArr = soreRank(amountArr(list));
        
        list = _.map(list, function(o, index){
            o.top = topArr[index];
            o.rate = parseFloat(o.rate).toFixed(2);
            o.targetRate = parseFloat(o.targetRate).toFixed(2);
            return o;
        })
        
        var html = template("data-list", {list: list, level: level, lowLevel: lowLevel, analysisType: analysisType});
        $("#listTable").empty().append(html);
    } 
}

/*
 * 控制底部各区等tab的显示，根据level来控制
 */
function showTabs(){
    $(".area-tab").removeClass("active");
    switch(parseInt(level)){
        case 4:
            $(".area-tab").show();
            $(".area-tab").eq(0).addClass("active");
            areaType = "4";
            break;
        case 3:
            $(".area-tab").eq(0).hide();
            $(".area-tab").eq(1).show();
            $(".area-tab").eq(1).addClass("active");
            areaType = "3";
            break;
        case 2:
            $(".area-tab").eq(0).hide();
            $(".area-tab").eq(1).hide();
            $(".area-tab").eq(2).addClass("active");
            areaType = "2";
            break;
        case 1: //团队
            $(".area-tab-panel").parent().remove();
            break;
    }
}

/*
 * 初始化scroller
 */
function initScroller(){
    //阻尼系数
    var deceleration = mui.os.ios?0.003:0.0009;
    mui('.mui-scroll-wrapper').scroll({
        bounce: false,
        indicators: true, //是否显示滚动条
        deceleration:deceleration
    });
    mui('.mui-scroll-wrapper').pullRefresh({
        down: {
            callback: function() {
                var self = this;
                setTimeout(function() {
                    initReqParams();
                    loadData([0,1,2]);
                    self.endPulldownToRefresh();
                }, 1000);
            }
        }
    });
}

/**
 * 初始化筛选事件
 */
function shaixuanInit(main){
    var shaixuan = plus.webview.getWebviewById('shaixuan2.html');
    if(!shaixuan){
        shaixuan = mui.createWindow({
                id: 'shaixuan2.html',
                url: 'shaixuan2.html',
                styles: {
                    top: 0,
                    bottom: 0,
                    left: '20%',
                    width: '80%',
                    scorllIndicator: "none"
                },
                show:{
                  aniShow: "slide-in-right",
                  duration: "400"
                },
                extras:{
                    noYear: '2016',
                    chooseYear: chooseYear
                }
           });
    }
    window.addEventListener("hideShaiXuan",function(){
        console.log("hideShaiXuan");
        main.setStyle({mask:"none"});
        shaixuan.hide();
    }, false);
    
    window.addEventListener("showShaiXuan", function() {
        shaixuan.show();
        main.setStyle({mask:"rgba(0,0,0,0.5)"});
        main.addEventListener("maskClick",function(){
            main.setStyle({mask:"none"});
            shaixuan.hide();
        }, false);
    });
}

function bindEvents(){
    //说明信息相关事件
    $("#closeBtn").on("tap", function(){
        $(".information").hide();
    });
    
    $(".info-icon").on("tap", function(){
        $(".information").show();
    });
    
    //左滑筛选区域的数据
    $('.header-link').on("tap", function(){
        var self = plus.webview.currentWebview();
        mui.fire(self, "showShaiXuan");
    });
    
    //日、周、月按钮切换
    $(".date-tag").on("tap",function(){
        dateType = $(this).attr("data-type");
        $(".date-tag").removeClass("active");
        $(this).addClass("active");
        
        initReqParams();
        loadData([1]); //只加载中间区域的数据
    });
    
    //底部各区等区域的tab切换
    $(".area-tab").on('tap', function(){
        var $this = $(this),
            type = $this.attr("data-val"); //4 - 各区， 3 - 社区， 2 - 团队
        
        areaType = type;
        
        if($this.hasClass("active")){
            return false;
        }
        $(".area-tab").removeClass("active");
        $this.addClass("active");
        
        if(type == "4"){
            lowLevel = 0;
        }else if(type == "3"){
            lowLevel = 2;
        }else{
            lowLevel = 1;
        }
        initReqParams();
        loadData([2]);
    });
    
    //底部每条记录的点击事件
    $("#listTable").on('tap', ".data-row", function(){
        var $this = $(this),
            name = $this.attr("data-name"),
            code = $this.attr("data-code"),
            $selectTab = $(".area-tab.active");
        
        if($selectTab.attr("data-val") == "2"){ //获得团队信息，弹框显示数据
            showTeamInfo(code);
            return false;
        }
        
        title = name;
        area = code;
        var newlevel = level - 1;
        //如果是市级管理员，先点击“社区”tab后再往下看下一级的数据，需要将level再-1
        if(newlevel == 3 && lowLevel == 2){
            newlevel -- ;
        }
        lowLevel = '';
        level = newlevel;
        $("#areaTitle").text(title);
        
        showTabs();
        initReqParams();
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            area: area,
            title: title,
            analysisType: analysisType,
            req: reqParam
        });
        loadData([0,1,2]);
    });
    
    //弹出遮罩
    $(".icon-remark").on("click", function(e) {
        $(".modal-overlay").addClass("modal-overlay-visible");
        setTimeout(function(){
            $(".modal-content").show();
        },50)
    });
    
    $(".div-close,.modal-overlay").on("click",function(){
        $(".modal-overlay").removeClass("modal-overlay-visible");
        $(".modal-content").hide();
    });
    
    //添加页面监听
    window.addEventListener("refresh", function(e){
        var year = e.detail.year;
        
        chooseYear = year;
        
        //重置变量值
        level = initLevel;
        area = userRole.code;
        title = userRole.name;
        lowLevel = "";
        startDate = getStartDate();
        endDate = getEndDate();
        
        $("#areaTitle").text(title);
        $(".choose-label").text(chooseYear);
        
        showTabs();
        initReqParams();
        
        //清空请求数组
        reqList.splice(0, reqList.length);
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            area: area,
            title: title,
            analysisType: analysisType,
            req: reqParam
        });
        loadData([0,1,2]);
    });
}

/*
 * 获得团队信息
 */

function showTeamInfo(teamId){
    var url = "/doctor/admin-teams/teams/info",
        params = {
            teamId: teamId
        };
    plus.nativeUI.showWaiting();
    sendGet(url, params, null, function(res){
        if(res.status == 200){
            var data = res.data;
            data.memberLength = data.members.length;
            var html = template("teamInfo", data);
            $("#teamInfoBox").empty().append(html);
            $(".modal-overlay").addClass("modal-overlay-visible");
            setTimeout(function(){
                $(".modal-content").show();
            },50)
        }else{
            mui.toast(res.msg);
        }
        plus.nativeUI.closeWaiting();
    }, true);
}

function getStartDate(){
    return chooseYear+'-07-01';
}

//获取结束时间
function getEndDate(){
    var nowdate = new Date();
    var year = nowdate.getFullYear();
    var month = nowdate.getMonth() + 1;
    var day = nowdate.getDate();
    var endDate = new Date((parseInt(chooseYear)+1) + '-06-30');
    var now = new Date();
    
    if(now <= endDate){
        return now.format("yyyy-MM-dd");
    }else{
        return (parseInt(chooseYear)+1) + '-06-30';
    }
}

//续签量数据集合
function amountArr(list){
    var amountArr = [];
    for(var k in list){
        amountArr.push(list[k].signPayOnlineNum);
    }
    
    return amountArr;
}

//排名方法
function soreRank(arr){
    var temp = [];
    var lis = [];
    for(var i=0;i<arr.length;i++){
        lis.push(arr[i]);
    }
    lis = _.uniq(lis);
    for(var i=0;i<arr.length;i++){
        temp[i] = lis.indexOf(arr[i])+1;
    }
    
    return temp;
}
//返回事件 
var old_back = mui.back;
mui.back = function(){
    if(reqList.length == 1){
        old_back();
    } 
    else{
        var preInfo = reqList[reqList.length - 1];
        if(preInfo.level == level && preInfo.lowLevel == lowLevel){
            reqList.pop();
            var info = reqList[reqList.length - 1];
        }else{
            info = preInfo;
        }
        
        level = info.level;
        area = info.area;
        title = info.title;
        lowLevel = info.lowLevel;
        sumType = info.sumType;
        tagCode = info.tagCode;
        analysisType = info.analysisType;
        
        $("#areaTitle").html(title);
        showTabs();
        initReqParams();
        loadData([0,1,2]);
    }
}