sr-iHealthApp/html/manager/js/comprehensive-analysis.js

mui.init();
var selfwv,
    userRole,
    initLevel,
    initAreaCode,
    initTitle,
    level, 
    areaCode, 
    areaTitle,
    index = "3", // 顶部tab对应的指标的index
    selectedDateType = 1, //折线图中选择的时间类型。 1-日，2-周， 3-月
    indexs = ['3', '4', '5', '27', '21', '20'], //对应顶部tab的index值
    endDate,
    startDate,
    lowLevel,
    indexName = {'index_3': '咨询量', 'index_4': '随访量', 'index_5': '健康指导','index_27':'代预约量','index_21': '绑定微信','index_20': '绑定设备', 'index_83': "健康文章"};

var index_5, index_83; //标记健康教育中健康文章和健康指导的值
var reqParam = []; //请求参数
var reqList = []; //请求的链接数据，根据这些信息后退的时候使用

//初始化计算选择的年份
var chooseYear;
var now = new Date();
if(now.getMonth() >= 6){
    chooseYear = now.getFullYear();
}else{
    chooseYear = now.getFullYear() - 1;
}

var information = {
    "3":"咨询量为签约年度（当年7月1日至次年6月30日）居民咨询的次数，点击右上角可切换查看不同年份数据",
    "4":"随访量为签约年度（当年7月1日至次年6月30日）随访次数，点击右上角可切换查看不同年份数据",
    "5":"健康教育量为签约年度（当年7月1日至次年6月30日）发送健康指导及健康文章数量的总和，点击右上角可切换查看不同年份数据",
    "27":"代预约量为签约年度（当年7月1日至次年6月30日）代居民预约挂号的次数，点击右上角可切换查看不同年份数据",
    "21":"绑定微信量为签约年度签约居民（含未缴费）已关注微信号的数量统计，点击右上角可以切换查看不同年份数据",
    "20":"绑定设备量为签约年度签约居民（含未缴费）已绑定的设备数量统计，点击右上角可以切换查看不同年份数据"
};

mui.plusReady(function(){
    selfwv = plus.webview.currentWebview();
    userRole = JSON.parse(plus.storage.getItem("selectedRole"));
    initLevel = level = userRole.code == '350200'  ? 4 : userRole.code.length==6 ? 3 : 2;
    initAreaCode = areaCode = userRole.code;
    initTitle = areaTitle = userRole.name;
    
    $("#areaTitle").text(areaTitle);
    $("#infoText").text(information[index]);
    $(".choose-label").text(chooseYear + '年');
    
    initReqParams(); //初始请求参数信息
    loadData([0,1,2]);
    
    //记录返回链接信息
    reqList.push({
        level: level,
        lowLevel: lowLevel,
        areaCode: areaCode,
        areaTitle: areaTitle,
        index: index,
        req: reqParam
    });
    
    showBottomTab();
    shaixuanInit(selfwv);
    bindEvents();
});

initScroller();
function getTopReqParams(index1){
    var url = "statistics/total",
        data = {
            index: index1 == '5' ? '5,83' : index1,
            level: level, 
            area: areaCode, 
            year: chooseYear,
            endDate: endDate, 
            startDate: startDate
        };
    if(index1 == 20 || index1 == 21){
        url = "statistics/index_all";
    }
    if(index1 == '5'){
        url = "/statistics/article_total";
    }
    return {
        url: url,
        reqType: 'POST',
        data: data
    };
}

function initReqParams(){
    //初始化开始时间和结束时间
    startDate = getStartDate();
    endDate = getEndDate();
    
    //增量（咨询量3、随访量4、健康教育5、代预约量27），到达量（绑定微信21、绑定设备20）
    var url2 = "statistics/interval",
        url3 = "statistics/lowlevel_total";
    if(index == 20 || index == 21){
        url2 = "statistics/interval_total";
        url3 = "statistics/lowlevel_all";
    }else if(index == 3){
        url3 = "statistics/lowlevel_total_mesh";
    }else if(index == '5'){
        url3 = '/statistics/article_lowlevel_total';
    }
    reqParam = [{
        url: url2,
        reqType: 'POST',
        data:{
            index: index == 5 ? '5,83' : index,
            level: level, 
            area: areaCode, 
            startDate: startDate, 
            endDate: endDate,
            interval: selectedDateType
        }
    },{
        url: url3,
        reqType: 'POST',
        data: {
            index: (index == 3) ? "3,22" : index,
            level: level,
            area: areaCode, 
            sort: 1, 
            year: chooseYear
        }
    },{
        //如果是微信绑定，则增加置顶展示当面层级的总绑定率及已缴费 未缴费居民数.只针对微信绑定时使用
        url: '/statistics/getLevelTotalSingle',
        reqType: 'POST',
        data: {
            date: endDate, 
            level: level, 
            area: areaCode
        }
    }];
    
    if(index == 20 || index == 21){
        reqParam[1].data.date = endDate;
    }else{
        reqParam[1].data.endDate = endDate;
    }
    
    if(lowLevel){
        reqParam[1].data.lowLevel = lowLevel;
    }
}

/*
 * 加载页面数据
 * @param loadArr array 记录需要请求的区域0-顶部，1-中间，2-底部
 */
function loadData(loadArr){
    plus.nativeUI.showWaiting();
    getJieZhiTime();
    
    var reqPromise = [],
        newArr = []; //记录非顶部请求的请求数组
    if(loadArr.indexOf(0) > -1){
        //请求加载了头部的内容
        var reqs = [];
        for(i=0; i<indexs.length; i++){
            reqs.push(getTopReqParams(indexs[i]));
        }
        getReqPromises(reqs, true).then(function(ress){
            handleTopPanelData(ress);
        }).then(function(){
            //如果饼图已经显示了，则这边需要重新绘制新的数据
            if($("#pieChartsPanel").hasClass("show")){
                $("#pieChartsPanel").show();
                $("#pieChartsPanel").addClass("show");
                $(".wz-num").text(index_83);
                $(".zd-num").text(index_5);
                var arr = [{
                    name: '健康文章',
                    value: index_83
                },{
                    name: '健康指导',
                    value: index_5
                }];
                
                drawPie('pieChart', arr, ['#ffc800', '#17b3ec']);
            }else{
                $("#pieChartsPanel").hide();
                $("#pieChartsPanel").removeClass("show");
            }
        });
    }
    for(var i=0; i<loadArr.length; i++){
        if(loadArr[i] == 0){
            // do nothing
        }else{
            var j = loadArr[i] - 1;
            reqPromise.push(reqParam[j]);
            newArr.push(loadArr[i]);
        }
    }
    if(index == '21'){
        reqPromise.push(reqParam[2]);
        newArr.push(3);
        $(".area-panel").addClass("bgc-fff");
    }else{
        $("#pieChartsPanel2").hide();
        $(".area-panel").removeClass("bgc-fff");
    }
    
    if(index == '5' ){
        //如果饼图还没有显示了，说明当前操作是点击了”健康教育“tab，此时需要绘制饼图，这样才会有动画效果
        if(!$("#pieChartsPanel").hasClass("show")){
            $("#pieChartsPanel").show();
            $("#pieChartsPanel").addClass("show");
            $(".wz-num").text(index_83);
            $(".zd-num").text(index_5);
            var arr = [{
                name: '健康文章',
                value: index_83
            },{
                name: '健康指导',
                value: index_5
            }];
            
            drawPie('pieChart', arr, ['#ffc800', '#17b3ec']);
        }
    }else{
        $("#pieChartsPanel").hide();
        $("#pieChartsPanel").removeClass("show");
    }
    
    if(reqPromise.length > 0){
        getReqPromises(reqPromise, true).then(function(ress){
            var res2, res3, res4;
        
            for(var i=0; i<newArr.length; i++){
                var j = newArr[i] + 1;
                if(j == 2){
                    res2 = ress[i];
                }
                if(j == 3){
                    res3 = ress[i];
                }
                //微信绑定时，多获取一个请求数据
                if(j == 4){
                    res4 = ress[i];
                }
            }
            if(res2){
                if(res2.status == 200){
                    handleSecondPanelData(res2.data);
                }else{
                    mui.toast(res2.msg);
                }
                
            }
            if(res3){
                if(res3.status == 200){
                    listHandle(res3.data);
                }else{
                    $("#listTable").empty();
                    mui.toast(res3.msg);
                }
            }
            if(res4){
                if(res4.status == 200){
                    $("#pieChartsPanel2").show();
                    handleWXBindData(res4.data);
                }else{
                    $("#pieChartsPanel2").hide();
                    mui.toast(res4.msg);
                }
            }
            plus.nativeUI.closeWaiting();
        }).catch(function(e){
            console.log(e);
            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+"）");
        }
    });
}

/*
 * 处理顶部各tab的值
 */
function handleTopPanelData(ress){
    for(i=0; i<ress.length; i++){
        var res = ress[i];
        if(res.status == 200){
            for(key in res.data){
                if(key == 'index_5'){
                    index_5 = res.data[key];
                }else if(key == 'index_83'){
                    index_83 = res.data[key];
                }else{
                    $("#"+key).text(res.data[key]);
                }
            }
        }else{
            mui.toast(res.msg);
        }
    }
    var jy_total = parseInt(index_5) + parseInt(index_83);
    $("#index_5").text(jy_total);
}

/*
 * 处理中间折线图区域的数据
 */
function handleSecondPanelData(data){
    var dataZoom_end,
        xDatas = [],
        yDatas = [],
        names = [],
        colors = ['#12b7f5', '#cd67fd'];
    for(var p in data){
        names.push(indexName[p]);
        if(p == 'index_21' || p == 'index_20'){
            var xData = _.map(data[p].data, function(o){
                return o.range;
            });
            var yData = _.map(data[p].data, function(o){
                return o.amount;
            });
        }else{
            var xData = _.map(data[p], function(o){
                return o.range;
            });
            var yData = _.map(data[p], 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;  
        }
        //初始给定第一版页面中时间区间
        if(selectedDateType == 3){
            var d1 = lastIndex > 0 ? xData[yData.length - lastIndex] : xData[yData.length - 10],
                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(lastIndex > 0 ? xData[yData.length - lastIndex] : xData[yData.length - 10]);
            $("#endValue").text(xData[yData.length -1]);
        }
    }
    drawLine(names, dataZoom_end, xDatas[0], yDatas, colors);
}

/*
 * 处理底部区，社区，团队的数据
 */
function listHandle(data){
    for(var k in data){
        var list = data[k];
        if(index=="3"){//咨询量
            for(var i=0;i<list.length;i++){
                var amount = list[i].amount.split(",");
                list[i].amount = amount[0];//咨询量
                list[i].noAmount = amount[1];//未回复咨询量
            }
        }
        
        var topArr = [];
        if(index == "21"){
            topArr = soreRank(amountArr(list, 'bindRate'))
        }else{
            topArr = soreRank(amountArr(list, 'amount'));
        }
        
        for(var j in list){
            list[j].top = topArr[j];
        }
        
        var html = template("data-list", {
            list: list, 
            level: level, 
            index: index,
            lowLevel: lowLevel
        });
        $("#listTable").empty().append(html);
    } 
}

/*
 * 处理微信绑定统计的数据
 */
function handleWXBindData(data){
    switch(level){
        case 4: 
            $("#pieChartsPanel2 .title").text("全市概况");
            break;
        case 3: 
            $("#pieChartsPanel2 .title").text("全区概况");
            break;
        case 2: 
            $("#pieChartsPanel2 .title").text("全社区概况");
            break;
    }
    $(".jf-num").text(data.weChatAmount1);
    $(".wjf-num").text(data.weChatAmount0);
    $(".num").text((data.bindRate || 0)+"%");
    var arr = [{
        name: '已缴费人数',
        value: data.weChatAmount1
    },{
        name: '未缴费人数',
        value: data.weChatAmount0
    }];
    drawPie('pieChart2', arr, ['#17b3ec', '#909090']);
}

/*
 * 获得团队信息
 */

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(){
    //说明信息相关事件
    $("#closeBtn").on("tap", function(){
        $(".information").hide();
    });
    
    $(".info-icon").on("tap", function(){
        $(".information").show();
    });
    
    //点击顶部tab切换
    $(".l-banner").on('tap', 'li', function(){
        var $this = $(this),
            val = $this.attr("data-index");
        if($this.hasClass("active")){
            return false;
        }
        $(".l-banner li.active").removeClass("active");
        $this.addClass("active");
        
        index = val;
        
        $("#infoText").text(information[index]);
        var tagName = index == '5' ? '推送量' : indexName['index_'+index];
        $("#tagName").text(tagName);
        initReqParams();
        loadData([1,2]);
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            areaCode: areaCode,
            areaTitle: areaTitle,
            index: index,
            req: reqParam
        });
    });
    
    //日月周切换
    $(".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");
        
        selectedDateType = val;
        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 = '';
        }else if(type == "3"){
            lowLevel = 2;
        }else{
            lowLevel = 1;
        }
        
        initReqParams();
        loadData([2]);
    });
    
    //点击列表查看下一级数据
    $("#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){
            mui(".mui-scroll-wrapper").scroll().scrollTo(0, -(parseInt(initTabOffsetTop)/2), 500);
        }
        
        showBottomTab();
        initReqParams();
        loadData([0,1,2]);
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            areaCode: areaCode,
            areaTitle: areaTitle,
            index: index,
            req: reqParam
        });
    });
    
    //弹出遮罩
    $(".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();
    });
    
    //左滑筛选区域的数据
    $('.header-link').on("tap", function(){
        var self = plus.webview.currentWebview();
        mui.fire(self, "showShaiXuan");
    });
    
    //添加页面监听
    window.addEventListener("refresh", function(e){
        var year = e.detail.year;
        //重置变量值
        chooseYear = year;
        level = initLevel;
        areaCode = initAreaCode
        areaTitle = initTitle;
        lowLevel = "";
        startDate = getStartDate();
        endDate = getEndDate();
        
        $("#areaTitle").text(areaTitle);
        $(".choose-label").text(chooseYear+"年");
        
        showBottomTab();
        initReqParams();
        
        //清空请求数组
        reqList.splice(0, reqList.length);
        //记录返回链接信息
        reqList.push({
            level: level,
            lowLevel: lowLevel,
            areaCode: areaCode,
            areaTitle: areaTitle,
            index: index,
            req: reqParam
        });
        loadData([0,1,2]);
    })
}

/*
 * 控制底部各区，社区，团队的显示
 */
function showBottomTab(){
    $(".area-tab").removeClass("active");
    switch(level){
        case 4:
            $(".area-tab").eq(0).addClass("active").show();
            $(".area-tab").eq(1).show();
            $(".area-tab").eq(2).hide();
            break;
        case 3:
            $(".area-tab").eq(0).hide();
            $(".area-tab").eq(1).addClass("active").show();
            $(".area-tab").eq(2).show();
            break;
        case 2:
            $(".area-tab").eq(0).hide();
            $(".area-tab").eq(1).hide();
            $(".area-tab").eq(2).addClass("active").show();
            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:{
                }
           });
    }
    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 drawLine(name, dataZoom_end, xData, yDatas, colors){
    var lineCharts = echarts.init(document.getElementById('lineChart'));
    var options = {
        tooltip: {
            trigger: 'axis'
        },
        color: colors,
        legend: {
            bottom: '0px',
            data: name,
            borderColor: "#f1f1f1"
        },
        grid: {
            show: false,
            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(selectedDateType == 1 || selectedDateType == 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(selectedDateType == 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: name,
//          type: 'line',
//          smooth: true,
//          data: yData,
//          lineStyle:{
//              normal: {
//                  color: '#12b7f5'
//              }
//          }
//      }]
    };
    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]
                }
            }
        };
        series.push(obj);
    }
    options.series = series;
    $("#lineChart").removeAttr('_echarts_instance_')
    lineCharts.setOption(options);
}

/*
 * 绘制饼图
 */
function drawPie(elId, arry, color){
    var myChart = echarts.init(document.getElementById(elId));
    var option = {
        tooltip: {
            trigger: 'item',
            formatter: "{b} : {c} ({d}%)",
            position: ['50%', '50%']
        },
        color: color,
        series: [
        {
            type:'pie',
            radius: ['80%', '99%'],
            startAngle: 270,
            legendHoverLink: false,
            hoverAnimation: false,
            avoidLabelOverlap: false,
            label: {
                normal: {
                    show: false,
                    textStyle: {
                        color: "#000"
                    }
                }
            },
            labelLine: {
                normal: {
                    show: false 
                }
            },
            data:arry
        }]
    };
    myChart.setOption(option);
}

/*
 * 获取用来排序的字段值，返回数组
 * 参数： 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;
}

function getStartDate(){
    // 按年度来计算的时候，开始时间是该年度7月1号还是到下一个年的6月30号结束
    if(chooseYear == 2016){
        return chooseYear + "-08-01";
    }else{
        return chooseYear+'-07-01';
    }
}
//获取结束时间
function getEndDate(){
    chooseYear = parseInt(chooseYear);
    var endDate = new Date((chooseYear+1) + '-06-30'),
        now = new Date();
    if(now <= endDate){
        var month = now.getMonth()+1,
            date1 = now.getDate();
        if(month < 10){
            month = "0"+month;
        }
        if(date1 < 10){
            date1 = "0"+date1;
        }
        return now.getFullYear()+"-"+month+"-"+date1;
    }else{
        return (chooseYear+1) + '-06-30';
    }
}

//返回事件 
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;
        index = info.index;
        
        if(!$(".l-banner li[data-index="+index+"]").hasClass("active")){
            $(".l-banner li").removeClass("active");
            $(".l-banner li[data-index="+index+"]").addClass("active");
        }
        $("#areaTitle").html(areaTitle);
        showBottomTab();
        initReqParams();
        loadData([0,1,2]);
    }
}