Kaynağa Gözat

咨询分析页面和底部区域tab切换的bug

raolu 7 yıl önce
ebeveyn
işleme
8daf55adab

+ 73 - 6
app/statistics/consulting-analysis.html

@ -1,9 +1,76 @@
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>咨询分析</title>
	</head>
	<body>
	</body>
    <head>
        <meta charset="UTF-8">
        <title>咨询分析</title>
        <meta name="author" content="yihu.com" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <link rel="stylesheet" type="text/css" href="../../css/font-awesome.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/style.min.css"/>
        <link rel="stylesheet" type="text/css" href="../../css/cross.css"/>
        <link rel="stylesheet" type="text/css" href="css/common.css"/>
    </head>
    <body>
        <div id="main">
            <header-tab :appname="appname" :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen" ></header-tab>
            <header-prompt></header-prompt>
            <div class="clearfix ">
                <ul class="l-banner">
                    <li style="width: calc(100% / 4)">
                        <div class="tag">
                            <div class="c-f18">{{topDatas['total']}}</div>
                            <div class="mt5 c-f14 l-name">总咨询数</div>
                        </div>
                    </li>
                    <li style="width: calc(100% / 4)">
                        <div class="tag">
                            <div id="index_4" class="c-f18">{{topDatas['noRelyRate']}}</div>
                            <div class="mt5 c-f14 l-name">未回复率</div>
                        </div>
                    </li>
                    <li style="width: calc(100% / 4)">
                        <div class="tag">
                            <div class="c-f18">{{topDatas['noRelyCount']}}</div>
                            <div class="mt5 c-f14 l-name">未回复数</div>
                        </div>
                    </li>
                    <li style="width: calc(100% / 4)">
                        <div class="tag">
                            <div class="c-f18">{{topDatas['relyRate']}}</div>
                            <div class="mt5 c-f14 l-name">回复及时率</div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="mt10 c-border">
                <div class="plr10 ptb10 c-border-b">
                    <span class="c-f14 c-333 ml5">首次回复时间分布(次数)</span>
                </div>
                <div id="barChart" style="height: 200px; width: 100%;"></div>
            </div>
            <!-- 底部区域图 -->
            <area-data-panel class="mt20" v-on:getnewdata="getAreaData"></area-data-panel>
            <!--模态框组件-->
            <vuedals></vuedals>
        </div>
        <script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/jquery-2.2.4.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/es6-promise.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/underscore.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../plugins/echarts/3.8.5/echarts.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/http-request.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../api/statistics-api.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/common/event-bus.js"></script>
        <script src="../../component/common/vuedals.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/header-tab.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/header-prompt.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/area-data-panel.js" type="text/javascript" charset="utf-8"></script>
        <script src="../../component/statistics/team-info.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/common.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/consulting-analysis.js" type="text/javascript" charset="utf-8"></script>
    </body>
</html>

+ 311 - 0
app/statistics/js/consulting-analysis.js

@ -0,0 +1,311 @@
var reqList = [];
new Vue({
    el: "#main",
    data: {
        appname: "咨询分析",
        isback: true,
        isrefresh: true,
        isfilter: true,
        isopen: true,
        //页面请求参数
        level: '',
        area: '',
        areaTitle: '',
        lowLevel: '',
        chooseYear: '',
        endDate: '',
        topDatas: {
            total: 0,
            noRelyCount: 0,
            noRelyRate: 0,
            relyRate: 0
        }
    },
    components: {
        vuedals: Vuedals.Component
    },
    methods:{
        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,
                lowLevel: this.lowLevel,
                endDate: this.endDate
            })
        }
    },
    mounted: function(){
        //初始化数据
        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
        });
        
        //设置监听器, 监听折线图日期变化
        var vm = this;
        //监听后退按钮的操作
        EventBus.$on("back-click", function(arg){
            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.$on("refresh-click", function(arg){
            loadData([0,1,2], vm);
        });
    }
});
function initData(vm){
    //获得缓存中缓存的角色权限
    var userRole = window.localStorage.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.endDate = getEndDate(vm.chooseYear);
}
function initReqParams(vm){
    var param = [{
        url: "/statistics/Consulting_Title",
        data: {level: vm.level, area: vm.area, year: vm.chooseYear}
    },{
        url: "/statistics/getCoutListByTime",
        data: {level: vm.level, area: vm.area, year: vm.chooseYear}
    },{
        url: "/statistics/Consulting_StatList",
        data: {level: vm.level, area: vm.area, year: vm.chooseYear, sort: 1, date: vm.endDate, lowlevel: vm.lowLevel}
    }];
    
    return param;
}
function loadData(loadArr, vm){
    //获取其他请求的参数
    var reqParams = initReqParams(vm),
        reqPromise = [];
    
    for(i=0; i< loadArr.length; i++){
        var j = loadArr[i];
        var param = reqParams[j];
        reqPromise.push(httpRequest.get(param.url, {data: param.data}));
    }
        
    if(reqPromise.length > 0){
        Promise.all(reqPromise).then(function(ress){
            var res1, res2, res2;
            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){
                if(res1.status == 200){
                    handleTopPanelData(res1.data, vm);
                }else{
                    console.log(res1.msg);
                }
            }
            if(res2){
                if(res2.status == 200){
                    handleSecondPanelData(res2.data, vm);
                }else{
                   console.log(res2.msg);
                }
                
            }
            if(res3){
                if(res3.status == 200){
                    listHandle(res3.data, vm);
                }else{
                    console.log(res3.msg);
                }
            }
        })
    }
}
function handleTopPanelData(data, vm){
    var obj = data.result[0];
    console.log(obj);
    vm.topDatas = {
        total: obj.total,
        noRelyCount: obj.noRelyCount,
        noRelyRate: obj.noRelyRate,
        relyRate: obj.relyRate
    }
}
function handleSecondPanelData(data, vm){
    var list = data.resultList,
        xData = [],
        yData = [];
    for(i=0; i<list.length; i++){
        var item = list[i];
        xData.push(item.name + "时");
        yData.push(item.num);
    }
    drawBarChart(xData, yData);
}
function listHandle(data, vm){
    var list = data.resultList;
    var topArr = soreRank(getKeyValueArr(list, 'relyDoubleRate'));
    var arr = _.map(list, function(o, index){
        var cols = [o.name, o.total, o.noRelyCount, o.noRelyRate];
        return {
            rank: topArr[index],
            code: o.code,
            name: o.name,
            cols: cols
        }
    });
    
    EventBus.$emit("render-area-data",{
        level: vm.level,
        area: vm.area,
        lowLevel: vm.lowLevel,
        headers: ["排名", "咨询数", "未回复数", "未回复率"],
        rows: arr
    });
}
function drawBarChart(xData, yData) {
    var myChart = echarts.init(document.getElementById('barChart'));
    var options = {
        calculable: true,
        tooltip: {
            trigger: 'item',
//          formatter: '{a}<br />{b} : {c}次'
        },
        toolbox: {
            dataZoom: true,
            show: true,
            orient: 'vertical',
            x: 'right',
            y: 'center'
        },
        grid: {
            left: '20px',
            right: '20px',
            bottom: '20px',
            top: '20px',
            containLabel: true
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#dcdcdc',
                    width: 1
                }
            },
            axisLabel: {
                show: true,
                color: '#666'
            },
            splitLine: {
                show: false
            },
            data: xData
        }],
        yAxis: [{
            type: 'value',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#dcdcdc',
                    width: 1
                }
            },
            axisLabel: {
                show: true,
                color: '#666'
            },
            splitLine: {
                show: false
            },
        }],
        series: [{
            name: '回复次数',
            type: 'bar',
            barWidth: 40,
            itemStyle: {
                normal: {
                    color: function(params) {
                        var colorList = ['#12B7F5', '#FB5DAB', '#CD67FD', '#FFC800', '#61EB41'];
                        return colorList[params.dataIndex]
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function(params) {
                            return params.value;
                        }
                    },
                    barBorderRadius: 0
                }
            },
            data: yData
        }]
    };
    myChart.clear();
    myChart.setOption(options);
}

+ 1 - 1
component/statistics/area-data-panel.js

@ -3,7 +3,7 @@
        template: '<div class="area-panel">\
                <div class="area-tab-panel">\
                    <div v-show="level==4" class="area-tab" :class="{\'active\': level==4 && (!lowLevel || lowLevel==3)}" @click="getLowCodeData(3)"><span>各区</span></div>\
                    <div v-show="level >= 3" class="area-tab" :class="{\'active\': level==3 || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
                    <div v-show="level >= 3" class="area-tab" :class="{\'active\': (level==3 && lowLevel!=1) || lowLevel==2}" @click="getLowCodeData(2)"><span>社区</span></div>\
                    <div class="area-tab" :class="{\'active\': level==2 || lowLevel==1}" @click="getLowCodeData(1)"><span>团队</span></div>\
                </div>\
                <table class="bottom-list-table mb20" id="listTable">\