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,
        selectedDateType5: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_124: 0,
            index_125: 0,
            index_86: 0
        },
        //微信绑定统计数据
        wxTotal:{
            label: '',
            amount1: '', //已缴费人数
            amount2: '', //未缴费人数
            rate: ''//绑定率
        },
        isloading:false,  //加载中
    },
    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);
        },
        getNewLineData5:function(arg){
        	this.selectedDateType5 = arg.dateType;
        	getArticleData(this)
        	
        },
        jumpTip:function(tab){
            console.log("mouseenter");
            $('#shadow'+tab).css("visibility","visible")
        },
        leaveTip:function(tab){
            $('#shadow'+tab).css("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).css("visibility","visible")
        })
        $(".tip").on('mouseleave', function(){
            console.log("mouse leave");
            var val = $(this).attr("data-val");
            $('#shadow'+val).css("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 || now.getFullYear()>=2023){
        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';
    }else if(vm.index == '27'){
        url3 = '/statistics/lowlevel_all';
    }
    reqParam = [{
        url: url2,
        data:{
            index: vm.index == '5' ? '5,83' : vm.index == 27 ? '27,124,125' : 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' || vm.index == '27'){
        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','124','125'];
    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];
                    if(vm.chooseYear<2019&&(key=="index_124"||key=="index_125")){
                    	vm.topDatas[key]="--"
                    }
                }
            }else{
                console.log(res.msg);
            }
        }
    })
}

function loadData(loadArr, vm){
    if(loadArr.indexOf(0) > -1){
        getTopTagDatas(vm);
    }
    
    vm.isloading=true
    //获取其他请求的参数
    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){        	
       		vm.isloading=false
            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'){
                    	getArticleData(vm)
                        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','#FF9526'],
        labels = {'3': '咨询量新增趋势', '4': '随访量新增趋势', '5': '触达人数新增趋势', '20': '绑定设备新增趋势', '21': '绑定微信新增趋势', '27': '代预约量新增趋势'}
        index_names = {'index_3': '咨询量', 'index_4': '随访量', 'index_5': '健康指导','index_27':'代预约量','index_21': '绑定微信','index_20': '绑定设备', 'index_83': "健康文章", 'index_124': "代预约等级医院", 'index_125': "代预约社区医院"};
    for(var p in data){
        names.push(index_names[p]);
        if(p == 'index_21' || p == 'index_20' || p == "index_86"){
            xData = _.map(data[p].data, function(o){
                return o.range;
            });
            yData = _.map(data[p].data, function(o){
                return o.amount;
            });
        }else{
        	if(data[p][0].range){
	            xData = _.map(data[p], function(o){
	                return o.range;
	            });
	            yData = _.map(data[p], function(o){
	                return o.amount;
	            });
        	}else{
        		if(p=='index_124'||p=='index_125'){
        			xData=[];yData=[]
        			_.each(data["index_27"], function(o){
		                yData.push(0)
		                xData.push(o.range)
		            });
        		}
        	}
        }
//      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,
        nowlineid : "lineChart"
    });
}

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 if(vm.index == '27'){
            topArr = soreRank(getKeyValueArr(list, 'reservationTotalAmount0'));
        }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 if(vm.index == '27'){
            	if(vm.chooseYear<2019){            		
	                cols.push("--");
	                cols.push("--");
            	}else{
	                cols.push(o.reservationTotal1Amount0);
	                cols.push(o.reservationTota2Amount0);
            	}
                cols.push(o.reservationTotalAmount0);
            }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",{
        	index: vm.index,
            level: vm.level,
            area: vm.area,
            lowLevel: vm.lowLevel,
            headers: headers[vm.index],
            year:vm.chooseYear,
            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;
}

//获得健康文章相关的其他的内容
function getArticleData(vm){
    vm.isloading=true
    var reqss=[],reqs = [{
        url: "/statistics/getAppActicleStatisticsData",
        data: {startDate: vm.startDate, endDate: vm.endDate, area: vm.area},
        reqType: 'get'
    }, {
        url: "/statistics/getAppActicleTrendStatisticsData",
        data: {startDate: vm.startDate, endDate: vm.endDate, area: vm.area},
        reqType: 'get'
    }];
    _.each(reqs,function(item){
    	reqss.push(httpRequest.get(item.url, {data: item.data}))
    })
    Promise.all(reqss).then(function(ress){
        var res1 = ress[0],
            res2 = ress[1];
        if(res1.status == 200){
            var data1 = res1.data;
            $(".article-total-count").text(data1.totalContentCount);
            $(".article-send-count").text(data1.totalPushCount);
            var per = '',
                full = '50%';
            if(parseInt(data1.totalContentCount) > parseInt(data1.totalPushCount)){
                per = data1.totalPushCount / data1.totalContentCount * 50;
                $(".article-bar").css('width', "50%");
                $(".send-bar").css('width', per+"%");
            }else{
                if(data1.totalPushCount != 0){
                    per = data1.totalContentCount / data1.totalPushCount * 50;
                    $(".send-bar").css('width', "50%");
                }else{
                    per = 0;
                    $(".send-bar").css('width', 0);
                }
                
                $(".article-bar").css('width', per+"%");
            }
            
            var legend = {
                orient: 'vertical',
//              type: 'scroll',
	            x: '40%',
	            data: [],
	            itemGap: 15,
	            top: 'middle',
	            icon: 'circle',
	            align: 'left',
            };
            var colors = ["#15c1b0", "#428ffd", "#9892fb", "#f67279", "#fdc44f"];
            legendNames = [];
            var arr1 = _.map(data1.contentDistrPie, function(o){
                var obj = {
                    name: o.categoryName,
                    count: parseInt(o.contentCount)
                };
                legend.data.push(o.categoryName)
                legendNames.push(obj);
                return {
                    value: parseInt(o.contentCount),
                    name: o.categoryName
                }
            });
            legend.formatter = function(name){
                var total = 0;
                var target;
//              console.log(this)
                for (var i = 0, l = legendNames.length; i < l; i++) {
                    total += parseInt(legendNames[i].count);
                    if (legendNames[i].name == name) {
                        target = parseInt(legendNames[i].count);
                    }
                }
//              console.log(((target/total)*100).toFixed(2)+'% (' + name +')');
                return ((target/total)*100).toFixed(2)+'% (' + name +')';
            }
            var title = {
                text: '内容分布',
                x:'left',
                textStyle:{
                    fontWeight: 400,
                    fontSize: 16
                }
            }
            drawPie("articleChart", arr1, colors, legend, ['25%', '50%'], ['55%', '70%'], title);
            var arr2 = [
                {value: parseInt(data1.userBehaviorPie.shareCount), name: '分享'},
                {value: parseInt(data1.userBehaviorPie.browseCount), name: '浏览'},
                {value: parseInt(data1.userBehaviorPie.collectCount), name: '收藏'},
                {value: parseInt(data1.userBehaviorPie.zanCount), name: '点赞'},
            ];
            var legendNames2 = [{name: "分享", count: parseInt(data1.userBehaviorPie.shareCount)},
                                {name: "浏览", count: parseInt(data1.userBehaviorPie.browseCount)},
                                {name: "收藏", count: parseInt(data1.userBehaviorPie.collectCount)},
                                {name: "点赞", count: parseInt(data1.userBehaviorPie.zanCount)}];
            legend.data=["分享","浏览","收藏","点赞"]
            legend.formatter = function(name){
                var total = 0;
                var target;
                for (var i = 0, l = legendNames2.length; i < l; i++) {
                    total += legendNames2[i].count;
                    if (legendNames2[i].name == name) {
                        target = legendNames2[i].count;
//                      console.log(target)
                    }
                }
                var rs = "";
                if(total == 0){
                    rs = "0% ("+name+")";
                }else{
                    rs = ((target/total)*100).toFixed(2)+'% (' + name +')'
                }
                return rs;
            }
            var title = {
                text: '推送分析',
                x:'left',
                textStyle:{
                    fontWeight: 400,
                    fontSize: 16
                }
            }
            drawPie("sendChart", arr2, colors, legend, ['25%', '50%'], ['55%', '70%'], title)
        }else{
            vm.$message.error(res1.msg);
        }
        if(res2.status == 200){
            articleTrendData = res2.data;
            handleArticleTrendChart(articleTrendData,vm);
        }else{
            vm.$message.error(res2.msg);
        }
        vm.isloading=false
    })
}

/*
 * 处理健康文章运营统计折线图数据
 */
function handleArticleTrendChart(articleTrendData,vm){
    var data = {};
    if(vm.selectedDateType5 == 1){
        data = articleTrendData.day;
    }else if(vm.selectedDateType5 == 2){
        data = articleTrendData.week;
    }else{
        data = articleTrendData.month;
    }
    var dataZoom_end,
        xDatas = [],
        yDatas = [],
        names = [],
        colors = [];
    for(var p in data){
        if(p == 'contentList'){
            names.push("新增内容量");
            colors.push('#1dff67');
        }else if(p == 'pushList'){
            names.push("新增推送量");
            colors.push('#ffd132');
        }else if(p == 'readList'){
            names.push("新增阅读量");
            colors.push('#00deff');
        }
        var xData = _.map(data[p], function(o){
            return o.date;
        });
        var yData = _.map(data[p], function(o){
            return o.count;
        });
        
        xDatas.push(xData);
        yDatas.push(yData);
    }
    EventBus.$emit("draw-line-chart", {
        panelName : "运营统计",
        quotaNames : names,
        xData : xDatas[0],
        yDatas : yDatas,
        colors : colors,
        selectedDateType: vm.selectedDateType5,        
        nowlineid : "lineChart5",
        unit:"篇"
    });
}