PC-application/app/statistics/js/comprehensive-analysis.js

var reqList = []; //记录请求的参数和url，用于后退时使用
var pieChart1,
    pieChart2; //全局设置饼图的对象，window.resize时，触发chart的resize方法
Vue.use(Vuedals.default);
new Vue({
    el: "#main",
    data: {
        appname: "总体分析",
        isback: true,
        isrefresh: true,
        isfilter: true,
        isopen: true,
        //请求页面所需参数
        level: '',
        area: '',
        areaTitle: '',
        index: '3',
        selectedDateType: 1,
        endDate: '',
        startDate: '',
        lowLevel: '',
        chooseYear: '',
        userRole: '',
        //数据结果
        topDatas: {
            index_3: 0,
            index_4: 0,
            index_5: 0,
            index_83: 0,
            index_103:0,
            index_106:0,
            index_20: 0,
            index_21: 0,
            index_27: 0,
            index_86: 0
        },
        //微信绑定统计数据
        wxTotal:{
            label: '',
            amount1: '', //已缴费人数
            amount2: '', //未缴费人数
            rate: ''//绑定率
        }
    },
    components: {
        vuedals: Vuedals.Component
    },
    methods: {
        changeTag: function(val){
            this.index = val;
            loadData([1,2], this);
            //存储请求所带的参数
            reqList.push({
                level: this.level,
                area: this.area,
                areaTitle: this.areaTitle,
                index: this.index,
                endDate: this.endDate,
                startDate: this.startDate,
                lowLevel: this.lowLevel
            })
        },
        getNewLineData: function(arg){
            this.selectedDateType = arg.dateType;
            loadData([1], this);
        },
        jumpTip:function(tab){
            console.log("mouseenter");
            $('#shadow'+tab).attr("style","visibility:visible")
        },
        leaveTip:function(tab){
            $('#shadow'+tab).attr("style","visibility:hidden")

        },
        getAreaData: function(arg){
            //如果level改变，则需要重新加载整个页面的数据，否则只需加载底部区域数据
            if(arg.level == this.level){
                this.lowLevel = arg.lowLevel;
                loadData([2], this);
            }else{
                this.level = arg.level;
                this.lowLevel = arg.lowLevel;
                this.area = arg.area;
                this.areaTitle = arg.areaTitle;
                loadData([0,1,2], this);
            }
            EventBus.$emit('update-area-name', {areaName: this.areaTitle});
            //存储请求所带的参数
            reqList.push({
                level: this.level,
                area: this.area,
                areaTitle: this.areaTitle,
                index: this.index,
                endDate: this.endDate,
                startDate: this.startDate,
                lowLevel: this.lowLevel,
                selectedDateType: this.selectedDateType
            })
        }
    },
    mounted: function(){
        $(".tip").on('mouseenter', function(){
            console.log("mouse enter");
            var val = $(this).attr("data-val");
            $('#shadow'+val).attr("style","visibility:visible")
        })
        $(".tip").on('mouseleave', function(){
            console.log("mouse leave");
            var val = $(this).attr("data-val");
            $('#shadow'+val).attr("style","visibility:hidden")
        })
        //初始化数据
        initData(this);
        
        //获得顶部各tab的值
        loadData([0,1,2], this); //参数组数表示请求的区域为上中下
        
        //存储请求所带的参数
        reqList.push({
            level: this.level,
            area: this.area,
            areaTitle: this.areaTitle,
            index: this.index,
            endDate: this.endDate,
            startDate: this.startDate,
            lowLevel: this.lowLevel,
            selectedDateType: this.selectedDateType
        });
        
        //设置监听器， 监听折线图日期变化
        var vm = this;
        //监听后退按钮的操作
        EventBus.$on("back-click", function(arg){
            EventBus.$emit('update-statistics-time', {}); //更新统计时间
            if(reqList.length == 1){
                history.go(-1);
            } 
            else{
                var preInfo = reqList.pop();
                var info = reqList[reqList.length - 1];
                vm.level = info.level;
                vm.area = info.area;
                vm.areaTitle = info.areaTitle;
                vm.lowLevel = info.lowLevel;
                vm.index = info.index;
                
                loadData([0,1,2], vm);
                EventBus.$emit('update-area-name', {areaName: vm.areaTitle});
            }
        });
        //监听页面刷新
        EventBus.$on("refresh-click", function(arg){
            loadData([0,1,2], vm);
        });
        //弹出筛选框
        EventBus.$on('filter-click', function(arg) {
            //弹框显示筛选条件
            Vuedals.Bus.$emit('new', {
                title: '条件筛选',
                onClose:function(data){
                    vm.chooseYear = data.chooseYear;
                    vm.startDate = getStartDate(vm.chooseYear);
                    vm.endDate = getEndDate(vm.chooseYear);
                    
                    //请求参数重置，页面类型重新开始
                    vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
                    vm.area = vm.userRole.code;
                    vm.areaTitle = vm.userRole.name;
                    EventBus.$emit('update-area-name', {areaName: vm.areaTitle});
                    vm.selectedDateType = 1;
                    
                    //然后清空请求列表数组
                    reqList.splice(0, reqList.length);
                    
                    loadData([0, 1, 2], vm);//刷新数据
                    
                    //存储请求所带的参数
                    reqList.push({
                        level: vm.level,
                        area: vm.area,
                        areaTitle: vm.areaTitle,
                        index: vm.index,
                        endDate: vm.endDate,
                        startDate: vm.startDate,
                        lowLevel: vm.lowLevel,
                        selectedDateType: vm.selectedDateType
                    });
                    
                    EventBus.$emit('update-statistics-year', {selectDate: vm.chooseYear + "年"});//更新年份
                    EventBus.$emit('update-statistics-time', {});//更新统计时间
                },
                component: 'year-filter',
                props: {
                    selectedYear: vm.chooseYear
                }
            });
        });
        $("#main").removeClass("c-hide");
        window.onresize = function() {
            if(pieChart1){
                pieChart1.resize();
            }
            if(pieChart2){
                pieChart2.resize();
            }
            window.lineCharts.resize(); //日周月折线图
        }
    }
})

function initData(vm){
    //获得缓存中缓存的角色权限
    var userRole = window.sessionStorage.getItem("selectedRole");
    if(!userRole){
        return false;
    }
    vm.userRole = JSON.parse(userRole);
    vm.level = vm.userRole.code == '350200' ? 4 : vm.userRole.code.length == 6 ? 3 : 2;
    vm.area = vm.userRole.code;
    vm.areaTitle = vm.userRole.name;
    EventBus.$emit('update-area-name', {areaName: vm.areaTitle});
    
    var now = new Date();
    if(now.getMonth() >= 6){
        vm.chooseYear = now.getFullYear();
    }else{
        vm.chooseYear = now.getFullYear() - 1;
    }
    
    vm.startDate = getStartDate(vm.chooseYear);
    vm.endDate = getEndDate(vm.chooseYear);
    EventBus.$emit('update-statistics-year', {selectDate: vm.chooseYear + "年"});
}

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

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

function getTopTagDatas(vm){
    var reqs = [],
        indexs = ['3', '4', '5', '27', '21', '20'];
    for(i=0; i<indexs.length; i++){
        var item = getTopReqParams(indexs[i], vm);
        reqs.push(httpRequest.get(item.url, {data: item.data}));
    }
    Promise.all(reqs).then(function(ress){
        for(i=0; i<ress.length; i++){
            var res = ress[i];
            if(res.status == 200){
                for(key in res.data){
                    vm.topDatas[key] = res.data[key];
                }
            }else{
                console.log(res.msg);
            }
        }
    })
}

function loadData(loadArr, vm){
    if(loadArr.indexOf(0) > -1){
        getTopTagDatas(vm);
    }
    
    //获取其他请求的参数
    var reqParams = initReqParams(vm),
        reqPromise = [],
        newArr = []; //记录非顶部请求的请求数组
    for(i=0; i<loadArr.length; i++){
        if(loadArr[i] == 0){
            // do nothing
        }else{
            var j = loadArr[i] - 1;
            var param = reqParams[j];
            reqPromise.push(httpRequest.get(param.url, {data: param.data}));
            newArr.push(loadArr[i]);
        }
    }
    
    if(vm.index == 21){ //微信绑定的数据需要再请求一个数据
        reqPromise.push(httpRequest.get(reqParams[2].url, {data: reqParams[2].data}))
        newArr.push(3);
    }
    if(reqPromise.length > 0){
        Promise.all(reqPromise).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, vm);
                    if(vm.index == '5'){
                        var arr = [{
                            name: '健康文章',
                            value: vm.topDatas.index_83
                        },{
                            name: '健康指导',
                            value: vm.topDatas.index_5
                        }];
                        pieChart2 = drawPieChart('pieChart', arr, ['#ffc800', '#17b3ec']);
                    }
                }else{
                   console.log(res2.msg);
                }
                
            }
            if(res3){
                if(res3.status == 200){
                    listHandle(res3.data, vm);
                }else{
                    console.log(res3.msg);
                }
            }
            if(res4){
                if(res4.status == 200){
                    handleWXBindData(res4.data, vm);
                }else{
                    console.log(res4.msg);
                }
            }
        })
    }
}

function handleSecondPanelData(data, vm){
    var xDatas = [],
        yDatas = [],
        names = [],
        colors = ['#12b7f5', '#cd67fd'],
        labels = {'3': '咨询量新增趋势', '4': '随访量新增趋势', '5': '触达人数新增趋势', '20': '绑定设备新增趋势', '21': '绑定微信新增趋势', '27': '代预约量新增趋势'}
        index_names = {'index_3': '咨询量', 'index_4': '随访量', 'index_5': '健康指导','index_27':'代预约量','index_21': '绑定微信','index_20': '绑定设备', 'index_83': "健康文章"};
    for(var p in data){
        names.push(index_names[p]);
        if(p == 'index_21' || p == 'index_20' || p == "index_86"){
            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;
            });
        }
        console.log(xData);
        xDatas.push(xData);
        yDatas.push(yData);
    }
    EventBus.$emit("draw-line-chart", {
        panelName : labels[vm.index],
        quotaNames : names,
        xData : xDatas[0],
        yDatas : yDatas,
        colors : colors,
        selectedDateType: vm.selectedDateType
    });
}

function listHandle(data, vm){
    for(i in data){
        var list = data[i];
        var topArr = [];
        if(vm.index == "21"){
            topArr = soreRank(getKeyValueArr(list, 'bindRate'));
        }else if(vm.index == '3'){
            topArr = soreRank(getKeyValueArr2(list, 'amount'));
        }else{
            topArr = soreRank(getKeyValueArr(list, 'amount'));
        }
        var arr = _.map(list, function(o, index){
            var cols = [o.name];
            if(vm.index == '3'){
                var amount = o.amount.split(","); // 咨询量, 未回复咨询量
                cols.push(amount[0]);
                cols.push(amount[1]);
            }else if(vm.index == '21'){
                cols.push(o.bindRate + '%');
                cols.push(o.weChatAmount1);
                cols.push(o.weChatAmount0);
            }else{
                cols.push(o.amount);
                if(vm.index == '5'){
                    cols.push(o.readNum);
                    cols.push(o.readRate);
                }
            }
            return {
                rank: topArr[index],
                code: o.code,
                name: o.name,
                cols: cols
            }
        });
        var headers = {
            '3': ["排名", "咨询量", "未回复"],
            '4': ["排名", "随访量"],
            '5': ["排名", "总触达人数", "阅读量", "阅读率"],
            '20': ["排名", "绑定设备"],
            '21': ["排名", "绑定率", "已缴费", "未缴费"],
            "27": ["排名", "代预约量"]
        };
        
        EventBus.$emit("render-area-data",{
            level: vm.level,
            area: vm.area,
            lowLevel: vm.lowLevel,
            headers: headers[vm.index],
            rows: arr
        });
    }
}

function handleWXBindData(data, vm){
    switch(vm.level){
        case 4:
            vm.wxTotal.label = "全市概况";
            break;
        case 3: 
            vm.wxTotal.label = "全区概况";
            break;
        case 2: 
            vm.wxTotal.label = "全社区概况";
            break;
    }
    vm.wxTotal.rate = (data.bindRate || 0) + "%";
    vm.wxTotal.amount1 = data.weChatAmount1;
    vm.wxTotal.amount2 = data.weChatAmount0;
    var arr = [{
        name: '已缴费人数',
        value: data.weChatAmount1
    },{
        name: '未缴费人数',
        value: data.weChatAmount0
    }];
    pieChart1 = drawPieChart('pieChart2', arr, ['#17b3ec', '#909090']);
}

/*
 * 获取用来排序的字段值，返回数组
 * 参数： list - 列表， key - 字段的名称 
 */
function getKeyValueArr2(list, key){
    var arr = [];
    for(var k in list){
        var item = list[k][key].split(",");
        arr.push(item[0]);
    }
    
    return arr;
}