iHealth-app-demo/html/manager/js/xuqiantongji-online.js

var self,
    initLevel,
    initArea,
    initTitle,
    level, 
    area, 
    title, 
    startDate = '', 
    endDate = '',
    lowLevel,
    lowCode = '',
    dateType = 1, //折线图坐标值1-日，2-周，3-月
    areaType; //标记底部区域选中的tab的值， 4 - 各区， 3 - 社区， 2 - 团队
    
var userRole;

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

var initTabOffsetTop = 0; //初始化时，底部tab距离顶部的位置

//定义年份
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();
    level = initLevel = self.level;
    area = initArea = self.area;
    title = initTitle = self.title;
    lowCode = self.lowCode;
    startDate = getStartDate();
    endDate = getEndDate();
    
    //初始默认选中的时间和类型
    $(".choose-label").text(self.labelName);
    $("#areaTitle").text(title);
    
    //控制底部各区等tab的显示
    showTabs();
    
    initReqParams(); //现获得页面请求的接口参数
    //记录返回链接信息
    reqList.push({
        level: level,
        lowLevel: lowLevel,
        area: area,
        title: title,
        lowCode: lowCode,
        req: reqParam
    });
    loadData([0,1,2]); //现获得页面请求的接口参数
    
    initTabOffsetTop = $(".area-tab-panel").offset().top;
    
    initScroller();
    shaixuanInit(self);
    bindEvents();
});

//获得页面请求的接口参数
function initReqParams(){
    var topIndex = {"4": "29", "3": "44", "2": "43"}, //顶部区域对应的level ： index 
        middleIndex = {"4": "74", "3": "75", "2": "76"}, //中间折线图index
        bottomIndex = {"4": "75", "3": "76", "2": "77"}; //与选中的当前底部区域tab的值有关 areaType
    
    if(lowCode && lowCode != "0"){
        var topIndex = {"4": "51", "3": "54", "2": "53"}, //顶部区域对应的level ： index 
            middleIndex = {"4": "78", "3": "79", "2": "80"}, //中间折线图index
            bottomIndex = {"4": "79", "3": "80", "2": "81"}; //与选中的当前底部区域tab的值有关 areaType
    }
    
    var index = topIndex[level],
        mIndex = middleIndex[level],
        bIndex = bottomIndex[areaType];
    
    reqParam = [{
        url: "/statistics/getRenewPercentOnline",
        reqType: 'get',
        data: {level:level, code:area, year: chooseYear, index: index, lowCode: lowCode}
    },{
        url: "/statistics/interval_total",
        reqType: 'get',
        data: {level: level, area: area, year: chooseYear, startDate: startDate, endDate: endDate, interval: dateType, index: mIndex, lowCode: lowCode}
    },{
        url: "/statistics/lowlevel_all_sign_renew_online",
        reqType: 'get',
        data: {sort: 1, year: chooseYear, level: level, index: bIndex, area: area, lowCode: lowCode}
    }];
    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){
    //绘制水球图
    $('#xuqianlv').waterbubble({
        txt: res.renewRange,
        data: parseFloat(res.renewRange)/100,
        waterColor: '#12B7F5',
        lineWidth:2,
        radius: 40,
        textColor: 'rgba(0, 0, 0, 1)',
        font: '14px arial'
    });
    $(".p-xuqianlv").html("<span class='c-12b7f5'>"+res.thisYearRenew+"</span>/"+res.yesterYearSign);
        
    $('#onlinelv').waterbubble({
        txt: res.renewRangeOnline,
        data: parseFloat(res.renewRangeOnline)/100,
        waterColor: '#19d5c5',
        lineWidth:2,
        radius: 40,
        textColor: 'rgba(0, 0, 0, 1)',
        font: '14px arial'
    });
    $(".p-onlinelv").html("<span class='c-19d5c5'>"+res.thisYearRenewOnline+"</span>/"+res.thisYearRenew);
}

/*
 * 处理中间折线图数据
 */
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});
        $("#listTable").empty().append(html);
    } 
}

/*
 * 控制底部各区等tab的显示，根据level来控制
 */
function showTabs(){
    $(".area-tab").removeClass("active");
    switch(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;
    }
}

/*
 * 初始化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('xq-shaixuan2.html');
    if(!shaixuan){
        shaixuan = mui.createWindow({
                id: 'xq-shaixuan2.html',
                url: 'xq-shaixuan.html',
                styles: {
                    top: 0,
                    bottom: 0,
                    left: '20%',
                    width: '80%',
                    scorllIndicator: "none"
                },
                show:{
                  aniShow: "slide-in-right",
                  duration: "400"
                },
                extras:{
                    showType: 1,
                    selectedType: lowCode
                }
           });
    }
    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");
        
        title = name;
        
        if($selectTab.attr("data-val") == "2"){ //获得团队信息，弹框显示数据
            showTeamInfo(code);
            return false;
        }
        
        area = code;
        var newlevel = level - 1;
        
        //如果是市级管理员，先点击“社区”tab后再往下看下一级的数据，需要将level再-1
        if(newlevel == 3 && lowLevel == 2){
            newlevel -- ;
        }
        lowLevel = '';
        level = newlevel;
        $("#areaTitle").text(title);
        
        //判断当前tab的位置
        var top = $(".area-tab-panel").offset().top;
        if(top < 0){
            mui(".mui-scroll-wrapper").scroll().scrollTo(0, -(parseInt(initTabOffsetTop)/2), 500);
        }
        
        showTabs();
        initReqParams();
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            area: area,
            title: title,
            lowCode: lowCode,
            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;
        var name = e.detail.name;
        
        lowCode = e.detail.lowCode || "";
        //重置变量值
//      chooseYear = year;
        level = initLevel;
        area = initArea;
        title = initTitle;
        lowLevel = "";
        startDate = getStartDate();
        endDate = getEndDate();
        
        $("#areaTitle").text(title);
        $(".choose-label").text(name);
        
        showTabs();
        initReqParams();
        
        //清空请求数组
        reqList.splice(0, reqList.length);
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            area: area,
            title: title,
            lowCode: lowCode,
            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].renewOnlineNum);
    }
    
    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;
        
        $("#areaTitle").html(title);
        showTabs();
        initReqParams();
        loadData([0,1,2]);
    }
}