iHealth-app-demo/html/manager/js/activity-statistic.js

mui.init();
var userRole,
    initLevel,
    initAreaCode,
    initTitle,
    level, 
    areaCode, 
    areaTitle,
    lowLevel = '',
    dateType = 1, //折线图中选择的时间类型。 1-日，2-周， 3-月
    endDate,
    startDate,
    activityPicker, //活动下拉框
    activityId, //标记活动Id
    myScroller;
    
var initTabOffsetTop = 0; //初始化时，底部tab距离顶部的位置
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 selfwv = plus.webview.currentWebview();
    
    userRole = JSON.parse(plus.storage.getItem("selectedRole"));
    initLevel = level = userRole.code == CITY_CODE  ? 4 : userRole.code.length==6 ? 3 : 2;
    initAreaCode = areaCode = userRole.code;
    initTitle = areaTitle = userRole.name;
    
    lowLevel = level - 1;
    
    var now = new Date();
    $("#endTime").text("截至"+now.format("yyyy-MM-dd"));
    
    activityPicker = new mui.PopPicker();
    
    //控制底部各区等tab的显示
    showTabs();
    
    initReqParams();
    loadData(true);
    //记录返回链接信息
    reqList.push({
        level: level,
        lowLevel: lowLevel,
        areaCode: areaCode,
        areaTitle: areaTitle,
        req: reqParam,
        activityId: activityId
    });
    
    initTabOffsetTop = $(".area-tab-panel").offset().top;
    bindEvents();
    initScroller();
})

function initReqParams(){
    if(!activityId){
        startDate = getStartDate();
        endDate = getEndDate();
    }
    reqParam = [{
        url: "/statistics/getAllAtivity",
        reqType: 'get',
        data: {area: initAreaCode, level: initLevel}
    },{
        url: "/statistics/lowlevel_activity",
        reqType: 'get',
        data: {
            area: areaCode,
            level: level,
            sort: 1,
            year: chooseYear
        }
    },{
        //折线图接口信息
        url: "/statistics/active_apply_statistics",
        reqType: 'get',
        data: {
            startDate: startDate,
            endDate: endDate,
            interval: dateType,
            area: areaCode,
            level: level
        }
    }];
    
    if(activityId){
        reqParam[0].data.id = activityId;
        reqParam[1].data.activityCode = activityId;
        reqParam[2].data.activityCode = activityId;
    }
    
    if(lowLevel){
        reqParam[1].data.lowLevel = lowLevel;
    }
}

function loadData(getTopData){
    plus.nativeUI.showWaiting();
    if(getTopData){
        var params = reqParam[0];
        getReqPromise(params.url, params.data, 'GET', true).then(function(res){
            if(res.status == 200){
                handleTopPanelData(res.data);
                
                initReqParams();
                loadData2();
            }else{
                mui.toast(res.msg);
                plus.nativeUI.closeWaiting();
            }
        })
    }else{
        loadData2()
    }
}

function loadData2(){
    var reqs = [reqParam[1], reqParam[2]];
    getReqPromises(reqs, true).then(function(ress){
        var res1, res2, res3;
        res1 = ress[0];
        res2 = ress[1];
        
        if(res1){
            if(res1.status == 200){
                handleSecondPanelData(res1.data);
            }else{
                mui.toast(res1.msg);
            }
        }
        
        if(res2){
            if(res2.status == 200){
                handleAreaPanel(res2.data); // 处理折线图
            }else{
                mui.toast(res2.msg);
            }
        }
        plus.nativeUI.closeWaiting();
    })
}

function loadLineData(){
    var params = reqParam[2];
    getReqPromise(params.url, params.data, params.reqType, true).then(function(res){
        if(res.status == 200){
            handleAreaPanel(res.data);
        }else{
            mui.toast(res.msg);
        }
    });
}

function handleTopPanelData(data){
    if(!activityId){
        $("#totalPanel").show();
        $("#activityPanel").hide();
        var list = [{
            value: '',
            text: "总积分排行榜"
        }];
        for(i=0; i<data.length; i++){
            var item = data[i];
            list.push({
                value: item.id,
                text: item.title
            });
        }
        activityPicker.setData(list);
    }else{
        $("#totalPanel").hide();
        var html = template("activity-tmp", data[0]);
        $("#activityInfo").empty().append(html);
        $("#activityPanel").show();
        
        areaCode = data[0].area;
        level = areaCode == CITY_CODE  ? 4 : areaCode.length==6 ? 3 : 2;
        lowLevel = level - 1;
        
        startDate = data[0].start_time.substr(0,10);
        endDate = data[0].end_time.substr(0,10);
    
        showTabs();
    }
}

function handleSecondPanelData(data){
    if(!activityId){
        $("#activityCount").text(data.activityCount);
        $("#patientCount").text(data.applyCount);
    }else{
        $("#signNum").text(data.applyCount);
        $("#joinNum").text(data.participantCount);
    }
    
    var seriesData = [{
        name: "已参与",
        value: parseFloat(data.participantRange)
    },{
        name: "已获得积分",
        value: parseFloat(data.creditsRange)
    },{
        name: "已兑奖",
        value: parseFloat(data.expiryRange)
    }];
    drawFunnelChart(seriesData);
    
    //填充底部区域数据
    var list = data.list,
        topArr = soreRank(amountArr(data.list, 'rate'));
    for(var j in list){
        list[j].top = topArr[j];
    }
    
    var html = template("data-list", {
        list: list, 
        level: level, 
        lowLevel: lowLevel
    });
    $("#listTable").empty().append(html);
}

//折线图数据处理
function handleAreaPanel(data){
    var dataZoom_end,
        xDatas = [],
        yDatas = [],
        names = [],
        colors = ['#17b3ec', '#22bd4c'],
        indexName = {'index_91': '报名量', 'index_90': '活跃量'};
    for(p in data){
        names.push(indexName[p]);
        var xData = _.map(data[p].data, function(o){
            return o.range;
        });
        var yData = _.map(data[p].data, function(o){
            return o.amount;
        });
        xDatas.push(xData);
        yDatas.push(yData);
        var lastIndex = yData.length % 10;
        if(yData.length >10 ){  
            dataZoom_end = 100-(9/yData.length)*100;  
        }else{  
            dataZoom_end = 0;  
        }
        $("#startValue").text(xData[yData.length - lastIndex]);
        $("#endValue").text(xData[yData.length -1]);
    }
    
    drawLine(names, dataZoom_end, xDatas[0], yDatas, colors);
}

/*
 * 获得团队信息
 */
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 bindEvents(){
    $("#chooseActivity").on('tap', function(){
        activityPicker.show(function(items) {
            var item = items[0];
            activityId = item.value;
            $("#activityTitle").text(item.text);
            initReqParams();
            //清空请求数组
            reqList.splice(0, reqList.length);
            reqList.push({
                level: level,
                lowLevel: lowLevel,
                areaCode: areaCode,
                areaTitle: areaTitle,
                req: reqParam,
                activityId: activityId
            });
            mui(".mui-scroll-wrapper").scroll().scrollTo(0, 0, 500);
            loadData(true);
        });
    });
    
    $("#pop1").on('tap', function(){
        var popup1 = dialog({
            content: '漏斗图显示活动中居民报名、参与、兑奖三个环节数据对比',
            quickClose: true// 点击空白处快速关闭
        });

        popup1.show(document.getElementById("pop1"));
    });
    
    $("#pop2").on('tap', function(){
        var popup2 = dialog({
            content: '曲线代表活动中居民报名量与参与活动量按时间分布对比情况',
            quickClose: true// 点击空白处快速关闭
        });
        popup2.show(document.getElementById("pop2"));
    });
    
    $(".date-tag").on('tap', function(){
        var $this = $(this),
            val = $this.attr("data-type");
        if($this.hasClass("active")){
            return false;
        }
        $(".date-tag").removeClass("active");
        $this.addClass("active");
        
        dateType = val;
        initReqParams();
        loadLineData();
    });
    
    //底部各区，社区，团队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 = '';
        }else if(type == "3"){
            lowLevel = 2;
        }else{
            lowLevel = 1;
        }
        
        initReqParams();
        loadData();
    });
    
    //点击列表查看下一级数据
    $("#listTable").on('tap', '.data-row', function(){
        var $this = $(this),
            code = $this.attr("data-code"),
            name = $this.attr("data-name");
        
        if($this.find(".fa-angle-right").length == 0){
            //团队内容
            showTeamInfo(code);
            return false;
        }
        
        areaTitle = name;
        areaCode = code;
        var newlevel = level - 1;
        //如果是市级管理员，先点击“社区”tab后再往下看下一级的数据，需要将level再-1
        if(newlevel == 3 && lowLevel == 2){
            newlevel -- ;
        }
        lowLevel = '';
        level = newlevel;
//      $("#areaTitle").text(areaTitle);
        
        //判断当前tab的位置
        var top = $(".area-tab-panel").offset().top;
        if(top < 0){
            var height = -(parseInt(initTabOffsetTop)/2);
            mui(".mui-scroll-wrapper").scroll().scrollTo(0, height, 500);
        }
        
        showTabs();
        initReqParams();
        loadData();
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            areaCode: areaCode,
            areaTitle: areaTitle,
            req: reqParam,
            activityId: activityId
        });
    });
    
    //弹出遮罩
    $(".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();
    });
}

/*
 * 控制底部各区等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;
    }
}

function drawLine(name, dataZoom_end, xData, yDatas, colors){
    var lineChart = echarts.init(document.getElementById('lineChart'));
    var option = {
        tooltip: {
            trigger: 'axis'
        },
        color: colors,
        legend: {
            bottom: '0px',
            data: name,
            borderColor: "#f1f1f1"
        },
        grid: {
            show: false,
            left: '30px',
            right: '20px',
            bottom: '30px',
            top: '10px',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: xData,
            axisLabel: {
                interval:0,//横轴信息全部显示  
                formatter: function (value, index) {
                    if(index == 0){
                        $("#startValue").text(value);
//                      if(dateType == 1){
                            return value.substr(5,2)+"月"+value.substr(8,2);
//                      }
//                      return value.substr(5,5);
                    }else{
                        if(index == 9){
                            $("#endValue").text(value);
                        }
//                      return value.substr(5,5);
                        return value.substr(8,2);
                    }
                }
            }
        },
        yAxis: {
            type: 'value',
            axisPointer: {
                snap: true
            },
            scale: true,
            minInterval: 1,
            boundaryGap: ['0%', '30%']
        },
        dataZoom: [{//给x轴设置滚动条  
            show: false,
            start: dataZoom_end,
            end: 100,
            type: 'slider',
            zoomLock: true,
        },{ //下面这个属性是内容区域配置
            start: dataZoom_end,
            end: 100,
            type: 'inside',
            zoomLock: true,
        }]
    };
    var series = [],
        legend = [];
    for(var i=0; i<yDatas.length; i++){
        var obj = {
            name: name[i],
            type: 'line',
            smooth: true,
            data: yDatas[i],
            lineStyle:{
                normal:{
                    color: colors[i]
                }
            },
            areaStyle: {normal: {}, opacity: 0.5},
        };
        series.push(obj);
    }
    option.series = series;
//  console.log(JSON.stringify(option));
    $("#lineChart").removeAttr('_echarts_instance_')
    lineChart.setOption(option);
}

//绘制漏斗图
function drawFunnelChart(seriesData){
    var myChart = echarts.init(document.getElementById('funnelChart'));
    var option = {
        color: ["#17b3ec", "#4dcd70", "#ff9526"],
        legend: {
            right: 20,
            top: 60,
            orient: 'vertical',
            data: [{name:'已参与', icon: 'circle',},
                    {name:'已获得积分', icon: 'circle',},
                    {name:'已兑奖', icon: 'circle',}]
        },
        calculable: true,
        series: [
        {
            type:'funnel',
            left: 0,
            top: 15,
            right: '30%',
            bottom: 15,
            width: '70%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 5,
            label: {
                normal: {
                    show: true,
                    position: 'inside',
                    formatter: '{c}%'
                }
            },
            labelLine: {
                normal: {
                    length: 10,
                    lineStyle: {
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            itemStyle: {
                normal: {
                    borderColor: "#d7ecf4",
                    borderWidth: 1
                }
            },
            data: seriesData
        }]
    };
    console.log(JSON.stringify(option));
    $("#funnelChart").removeAttr('_echarts_instance_')
    myChart.setOption(option);
}

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';
    }
}

/*
 * 获取用来排序的字段值，返回数组
 * 参数： list - 列表， key - 字段的名称 
 */
function amountArr(list, key){
    var amountArr = [];
    for(var k in list){
        amountArr.push(list[k][key]);
    }
    
    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;
}

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

//返回事件 
var old_back = mui.back;
mui.back = function(){
    if(reqList.length == 1){
        old_back();
    } 
    else{
        var preInfo = reqList.pop();
        var info = reqList[reqList.length - 1];
        level = info.level;
        areaCode = info.areaCode;
        areaTitle = info.areaTitle;
        lowLevel = info.lowLevel;
        activityId = info.activityId;
        
//      $("#areaTitle").html(areaTitle);
        showTabs();
        initReqParams();
        loadData(true);
    }
}