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

var self,
    initLevel,
    initArea,
    initTitle,
    level, 
    area, 
    title, 
    startDate = '', 
    endDate = '',
    lowLevel,
    lowCode = '',
    dateType = 1, //折线图坐标值1-日，2-周，3-月
    analysisType = "1"; // 筛选维度的id, 1-按任务，2-按人口，3-高血压，4-糖尿病，5-65岁以上人群
    
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;
    chooseYear = self.chooseYear;
    lowCode = self.lowCode;
    analysisType = self.analysisType;
    
    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,
        analysisType: analysisType,
        req: reqParam
    });
    loadData([0,1,2]); //现获得页面请求的接口参数
    
    initTabOffsetTop = $(".area-tab-panel").offset().top;
    
    initScroller();
    shaixuanInit(self);
    bindEvents();
});

//获得页面请求的接口参数
function initReqParams(){
    var index = 72;
    if(lowCode){
        index = 73;
    }
    reqParam = [{
        url: "/statistics/sign_info_online",
        reqType: 'get',
        data: {level:level, area:area, lowCode:lowCode, year: chooseYear, endDate:endDate}
    },{
        url: "/statistics/interval_total",
        reqType: 'get',
        data: {level: level, area: area, startDate: startDate, endDate: endDate, interval: dateType, index: index, lowCode: lowCode}
    },{
        url: "/statistics/lowlevel_all",
        reqType: 'get',
        data: {sort: 1, date: endDate, level: level, index: index, 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){
            if(res2.status == 200){
                handleSecondPanelData(res2.data);
            }else{
                handleSecondPanelData();
            }
        }
        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){
    //绘制水球图
    $('#qieyuelv').waterbubble({
        txt: parseFloat(res.signRate.rate).toFixed(2) + "%",
        data: parseFloat(res.signRate.rate)/100,
        waterColor: '#12B7F5',
        lineWidth:2,
        radius: 40,
        textColor: 'rgba(0, 0, 0, 1)',
        font: '14px arial'
    });
    $(".p-qianyuelv").html("<span class='c-12b7f5'>"+res.signRate.sign+"</span>/"+res.signRate.people);
        
    $('#dabiaolv').waterbubble({
        txt: parseFloat(res.signOnlineRate.rate).toFixed(2) + "%",
        data: parseFloat(res.signOnlineRate.rate)/100,
        waterColor: '#19d5c5',
        lineWidth:2,
        radius: 40,
        textColor: 'rgba(0, 0, 0, 1)',
        font: '14px arial'
    });
    $(".p-dachenglv").html("<span class='c-19d5c5'>"+res.signOnlineRate.signOnline+"</span>/"+res.signOnlineRate.sign);
}

/*
 * 处理中间折线图数据
 */
function handleSecondPanelData(data){
    var lineCharts = echarts.init(document.getElementById('lineChart'),{
        noDataLoadingOption :{
            text: '暂无数据',
            effect:'bubble',
//          effectOption : {
//              effect: {
//                  n: 0 //气泡个数为0 
//              }
//          },
            textStyle: {
                fontSize: 32,
                fontWeight: 'bold'
            }
        }
    });
    if(!data){
        $("#startValue").text(startDate);
        $("#endValue").text(endDate);
        var xData =[];
        var yData = [];
        lineCharts.clear();
        var xAxis = {
            type: 'category',
            boundaryGap: false,
            data: xData
        };
    }else{
        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 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;
                    }
                }
            }
        };
    }
    
    
    var options = {
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            top: 'bottom',
            data:['线上签约量']
        },
        grid: {
            left: '10px',
            right: '10px',
            bottom: '30px',
            top: '10px',
            containLabel: true
        },
        xAxis: xAxis,
        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(level){
        case 4:
            $(".area-tab").show();
            $(".area-tab").eq(0).addClass("active");
            break;
        case 3:
            $(".area-tab").eq(0).hide();
            $(".area-tab").eq(1).show();
            $(".area-tab").eq(1).addClass("active")
            break;
        case 2:
            $(".area-tab").eq(0).hide();
            $(".area-tab").eq(1).hide();
            $(".area-tab").eq(2).addClass("active")
            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-1.html');
    if(!shaixuan){
        shaixuan = mui.createWindow({
                id: 'shaixuan2-1.html',
                url: 'shaixuan2.html',
                styles: {
                    top: 0,
                    bottom: 0,
                    left: '20%',
                    width: '80%',
                    scorllIndicator: "none"
                },
                show:{
                  aniShow: "slide-in-right",
                  duration: "400"
                },
                extras:{
                    showType: 1,
                    noYear: '2016',
                    chooseYear: chooseYear,
                    selectedType: analysisType
                }
           });
    }
    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 - 团队
        
        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,
            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;
        var name = e.detail.name;
        
        lowCode = e.detail.lowCode || "";
        analysisType = e.detail.id || "1";
        //重置变量值
        chooseYear = year;
        level = initLevel;
        area = initArea;
        title = initTitle;
        lowLevel = "";
        startDate = getStartDate();
        endDate = getEndDate();
        
        $("#areaTitle").text(title);
        $(".choose-label").text(year+"年（"+name+"）");
        
        showTabs();
        initReqParams();
        
        //清空请求数组
        reqList.splice(0, reqList.length);
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            area: area,
            title: title,
            lowCode: lowCode,
            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].signOnlineNum);
    }
    
    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]);
    }
}