Home Explore Help
Register Sign In
raolu
/
PC-application
Watch 0
Star 0
Fork 1
Files Issues 0 Pull Requests 0 Wiki
Browse Source

总体分析页面初稿

raolu 7 years ago
parent
e8e77bb70e
commit
cd78dfd74e
10 changed files with 616 additions and 255 deletions
Split View Show Diff Stats
  1. 0 115
      app/statistics/area-data-panel.html
  2. 99 2
      app/statistics/comprehensive-analysis.html
  3. 25 17
      app/statistics/css/common.css
  4. 42 0
      app/statistics/js/common.js
  5. 428 0
      app/statistics/js/comprehensive-analysis.js
  6. 1 1
      app/statistics/js/home.js
  7. 0 106
      app/statistics/line-chart.html
  8. 15 7
      component/statistics/area-data-panel.js
  9. 5 6
      component/statistics/line-chart.js
  10. 1 1
      component/statistics/team-info.js

+ 0 - 115
app/statistics/area-data-panel.html
View File 

@ -1,115 +0,0 @@
 
<!DOCTYPE html>
 
<html>
 
    <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">
 
            <area-data-panel v-on:getnewdata="getAreaData" :headers="headers" :rows="rows"></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="../../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/team-info.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="js/common.js" type="text/javascript" charset="utf-8"></script>
 
        <script type="text/javascript">
 
            (function(){
 
                Vue.use(Vuedals.default);
 
                new Vue({
 
                    el: "#main",
 
                    data: {
 
                        headers: [],
 
                        rows: [],
 
                        level: 4,
 
                        lowLevel: '',
 
                        index: '3,22',
 
                        area: '350200',
 
                        sort: 1,
 
                        year: 2017,
 
                        endDate: '2018-03-12',
 
                        reqUrl: 'statistics/lowlevel_total_mesh'
 
                    },
 
                    components: {
 
                        vuedals: Vuedals.Component
 
                    },
 
                    methods: {
 
                        changeLevel: function(arg){
 
                            var level = arg.level;
 
                            if(this.level > 2 && this.lowLevel != 1){
 
                                console.log("next");
 
                                //跳转去下一级数据
 
                                this.level = level --;
 
                            }
 
                        },
 
                        changeLowlevel: function(arg){
 
                            //点击tab时，获取下一级的数据
 
                            this.lowLevel = arg.lowLevel;
 
                        },
 
                        getAreaData: function(arg){
 
                            this.level = arg.level;
 
                            this.lowLevel = arg.lowLevel;
 
                            this.area = arg.area;
 
                            getAreaData(this);
 
                        }
 
                    },
 
                    mounted: function(){
 
                        var vm = this;
 
                        getAreaData(vm);
 
                    }
 
                })
 
                
                function getAreaData(vm){
 
                    var params = {
 
                        index: vm.index,
 
                        level: vm.level,
 
                        area: vm.area,
 
                        sort: vm.sort,
 
                        year: vm.year,
 
                        endDate: vm.endDate,
 
                        lowLevel: vm.lowLevel
 
                    };
 
                    statisticAPI.lowlevelData(vm.reqUrl, params).then(function(res){
 
                        if(res.status == 200){
 
                            for(i in res.data){
 
                                var list = res.data[i];
 
                                var topArr = soreRank(getKeyValueArr(list, 'amount'));
 
                                var arr = _.map(list, function(o, index){
 
                                    var amount = o.amount.split(","); // 咨询量, 未回复咨询量
 
                                    return {
 
                                        rank: topArr[index],
 
                                        code: o.code,
 
                                        name: o.name,
 
                                        cols: [o.name, amount[0], amount[1]]
 
                                    }
 
                                });
 
                                vm.headers = ["排名", "咨询量", "未回复"];
 
                                vm.rows = arr;
 
                            }
 
                        }else{
 
                            console.log(res.msg);
 
                        }
 
                    })
 
                }
 
            })()
 
        </script>
 
    </body>
 
</html>

+ 99 - 2
app/statistics/comprehensive-analysis.html
View File 

@ -8,23 +8,120 @@
 
        <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="../../fonts/font-awesome/css/font-awesome.min.css"/>
 
        <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"></div>
 
        <div id="main">
 
            <header-tab :isback="isback" :isrefresh="isrefresh" :isfilter="isfilter" :isopen="isopen" ></header-tab>
 
            <header-prompt></header-prompt>
 
            <div class="clearfix ">
 
                <ul class="l-banner">
 
                    <li class="active" >
 
                        <div class="tag" :class="{'active': index==3}" @click="changeTag(3)">
 
                            <div id="index_3" class="c-f18">{{topDatas['index_3']}}</div>
 
                            <div class="mt5 c-f14 l-name">咨询量</div>
 
                        </div>
 
                    </li>
 
                    <li>
 
                        <div class="tag" :class="{'active': index==4}" @click="changeTag(4)">
 
                            <div id="index_4" class="c-f18">{{topDatas['index_4']}}</div>
 
                            <div class="mt5 c-f14 l-name">随访量</div>
 
                        </div>
 
                    </li>
 
                    <li>
 
                        <div class="tag" :class="{'active': index==5}" @click="changeTag(5)">
 
                            <div id="index_5" class="c-f18">{{topDatas['index_5'] + topDatas['index_83']}}</div>
 
                            <div class="mt5 c-f14 l-name">健康教育</div>
 
                        </div>
 
                    </li>
 
                </ul>
 
                <ul class="l-banner">
 
                    <li>
 
                        <div class="tag" :class="{'active': index==27}" @click="changeTag(27)">
 
                            <div id="index_27" class="c-f18">{{topDatas['index_27']}}</div>
 
                            <div class="mt5 c-f14 l-name">代预约量</div>
 
                        </div>
 
                    </li>
 
                    <li>
 
                        <div class="tag" :class="{'active': index==21}" @click="changeTag(21)">
 
                            <div id="index_21" class="c-f18">{{topDatas['index_21']}}</div>
 
                            <div class="mt5 c-f14 l-name">绑定微信</div>
 
                        </div>
 
                    </li>
 
                    <li>
 
                        <div class="tag" :class="{'active': index==20}" @click="changeTag(20)">
 
                            <div id="index_20" class="c-f18">{{topDatas['index_20']}}</div>
 
                            <div class="mt5 c-f14 l-name">绑定设备</div>
 
                        </div>
 
                    </li>
 
                </ul>
 
            </div>
 
            <!-- 折线图 -->
 
            <line-chart v-on:getlinedata="getNewLineData"></line-chart>
 
            <!-- 饼图 健康教育-->
 
            <div v-show="index=='5'" class="mt20 c-border bgc-fff">
 
                <div class="c-border-b plr10 ptb10 c-f16 c-333">全市概况</div>
 
                <div class="ui-grid ui-grid-middle ptb10">
 
                    <div class="ui-col-0 c-t-center c-ffc800 plr10 c-w-33">
 
                        <div class="c-f20 wz-num">{{topDatas['index_83']}}</div>
 
                        <div class="c-f12">健康文章推送量</div>
 
                    </div>
 
                    <div class="ui-col-1 c-position-r c-t-center">
 
                        <div class="position-center-text c-f14">推送情况</div>
 
                        <div id="pieChart" style="width: 100%; height:100px;"></div>
 
                    </div>
 
                    <div class="ui-col-0 c-t-center c-17b3ec plr10 c-w-33">
 
                        <div class="c-f20 zd-num">{{topDatas['index_5']}}</div>
 
                        <div class="c-f12">健康指导推送量</div>
 
                    </div>
 
                </div>
 
            </div>
 
            <!-- 微信绑定统计 -->
 
            <div v-show="index=='21'" class="mt20 c-border bgc-fff">
 
                <div class="c-border-b plr10 ptb10 c-f16 c-333">{{wxTotal.label}}</div>
 
                <div class="ui-grid ui-grid-middle ptb10">
 
                    <div class="ui-col-0 c-t-center c-17b3ec plr10 c-w-33">
 
                        <div class="c-f20 wz-num">{{wxTotal.amount1}}</div>
 
                        <div class="c-f12">已缴费人数</div>
 
                    </div>
 
                    <div class="ui-col-1 c-position-r c-t-center">
 
                        <div class="blur-cycle-box">
 
                            <div class="c-f16 c-fff num mt15">{{wxTotal.rate}}</div>
 
                            <div class="c-f12 c-fff mt5">绑定率</div>
 
                        </div>
 
                        <div id="pieChart2" style="width: 100%; height:100px;"></div>
 
                    </div>
 
                    <div class="ui-col-0 c-t-center c-909090 plr10 c-w-33">
 
                        <div class="c-f20 zd-num">{{wxTotal.amount2}}</div>
 
                        <div class="c-f12">未缴费人数</div>
 
                    </div>
 
                </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/line-chart.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/comprehensive-analysis.js" type="text/javascript" charset="utf-8"></script>
 
    </body>
 
</html>

+ 25 - 17
app/statistics/css/common.css
View File 

@ -16,9 +16,15 @@
 
.c-ffc800{
 
    color: #ffc800;
 
}
 
.c-75ed59{
 
    color: #75ed59;
 
}
 
.c-w-33{
 
    width: 33%;
 
}
 
ul{
 
    list-style: none;
 
}
 
.info-icon{
 
    vertical-align: middle;
 
    margin-bottom: 5px;
 
@ -309,32 +315,34 @@
 
}
 
.l-banner li{
 
    -webkit-box-flex: 0;
 
    text-align: center;
 
    margin-left: 10px;
 
    background: #fff;
 
    border-radius: 5px;
 
    width: calc((100% - 20px) / 3);
 
    padding: 10px 0;
 
    border: 1px solid #E1E1E1;
 
    /*border-bottom: 5px solid transparent;*/
 
    position: relative;
 
    width: calc(100% / 3);
 
}
 
.l-banner li:first-child{
 
    margin-left: 0;
 
    /*margin-left: 0;*/
 
}
 
.l-banner li .tag{
 
    width: 80%;
 
    border: 1px solid #e1e1e1;
 
    border-radius: 5px;
 
    text-align: center;
 
    padding: 17px 0;
 
    margin: 0 auto;
 
    position: relative;
 
}
 
.l-banner li .l-name{
 
    color: #909090;
 
    color: #666;
 
}
 
.l-banner li.active,
 
.l-banner li.active .l-name
 
.l-banner li .tag.active,
 
.l-banner li .tag.active .l-name
 
{
 
    color: #17b3ec;
 
    color: #12B7F5;
 
    border-color: #12B7F5;
 
}
 
.l-banner li.active:after{
 
.l-banner li .tag.active:after{
 
    content: "";
 
    width: 100%;
 
    height: 5px;
 
    background-color: #17b3ec;
 
    height: 4px;
 
    background-color: #12B7F5;
 
    position: absolute;
 
    bottom: 0;
 
    left: 0;

+ 42 - 0
app/statistics/js/common.js
View File 

@ -46,4 +46,46 @@ function soreRank(arr){
 
    }
 
    
    return temp;
 
}
 
/*
 
 * 绘制饼图
 
 * arry [{name: '', value: ''}]
 
 * color ['#ffc800', '#17b3ec']
 
 */
 
function drawPieChart(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
 
        }]
 
    };
 
    $("#"+elId).removeAttr("_echarts_instance_");
 
    myChart.setOption(option);
 
}

+ 428 - 0
app/statistics/js/comprehensive-analysis.js
View File 

@ -1,6 +1,434 @@
 
var reqList = []; //记录请求的参数和url，用于后退时使用
 
Vue.use(Vuedals.default);
 
new Vue({
 
    el: "#main",
 
    data: {
 
        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_20: 0,
 
            index_21: 0,
 
            index_27: 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);
 
        },
 
        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;
 
                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
 
            })
 
        }
 
    },
 
    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.areaTile = vm.userRole.name;
 
    
    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);
 
}
 
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' : 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
 
                        }];
 
                        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'){
 
            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);
 
    }
 
    EventBus.$emit("draw-line-chart", {
 
        panelName : labels[vm.index],
 
        quotaNames : names,
 
        xData : xDatas[0],
 
        yDatas : yDatas,
 
        colors : colors
 
    });
 
}
 
function listHandle(data, vm){
 
    for(i in data){
 
        var list = data[i];
 
        var topArr = [];
 
        if(vm.index == "21"){
 
            topArr = soreRank(getKeyValueArr(list, 'bindRate'));
 
        }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
 
    }];
 
    drawPieChart('pieChart2', arr, ['#17b3ec', '#909090']);
 
}

+ 1 - 1
app/statistics/js/home.js
View File 

@ -29,7 +29,7 @@ new Vue({
 
        serviceAnalysis: [{
 
            photo: '../../images/zongtifenxi_icon.png',
 
            label: '总体分析',
 
            url: ''
 
            url: 'comprehensive-analysis.html'
 
        },{
 
            photo: '../../images/zixunfenxi_icon.png',
 
            label: '咨询分析',

+ 0 - 106
app/statistics/line-chart.html
View File 

@ -1,106 +0,0 @@
 
<!DOCTYPE html>
 
<html>
 
    <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">
 
            <line-chart :panelName="panelName" :quotaNames="quotaNames" :xData="xData" :yDatas="yDatas" :colors="colors"></line-chart>
 
        </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="../../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/statistics/line-chart.js" type="text/javascript" charset="utf-8"></script>
 
        <script type="text/javascript">
 
            (function(){
 
                new Vue({
 
                    el: '#main',
 
                    data:{
 
                        panelName: '',
 
                        quotaNames: [],
 
                        xData: [],
 
                        yDatas: [],
 
                        colors: [],
 
                        requestParam: {
 
                            index: 3,
 
                            level: 4,
 
                            area: '350200', 
                            startDate: '2017-12-01', 
                            endDate: '2018-03-08',
 
                            interval: 1
 
                        }
 
                    },
 
                    mounted: function(){
 
                        var vm = this;
 
                        EventBus.$on("get-line-chart-data", function(arg){
 
                            vm.requestParam.interval = arg.dateType;
 
                            getLineData(vm);
 
                        });
 
                        getLineData(vm);
 
                    }
 
                });
 
                
                function getLineData(vm){
 
                    statisticAPI.interval(vm.requestParam).then(function(res){
 
                        console.log(res);
 
                        var xDatas = [],
 
                            yDatas = [],
 
                            names = [],
 
                            colors = ['#12b7f5', '#cd67fd'],
 
                            data = res.data;
 
                        for(var p in data){
 
                            names.push('咨询量');
 
                            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);
 
                        }
 
                        vm.panelName = "咨询量新增趋势";
 
                        vm.quotaNames = names;
 
                        vm.xData = xDatas[0];
 
                        vm.yDatas = yDatas;
 
                        vm.colors = colors;
 
                        EventBus.$emit("draw-line-chart", {
 
                            panelName : "咨询量新增趋势",
 
                            quotaNames : names,
 
                            xData : xDatas[0],
 
                            yDatas : yDatas,
 
                            colors : colors
 
                        });
 
                    })
 
                }
 
            })()
 
            
        </script>
 
    </body>
 
</html>

+ 15 - 7
component/statistics/area-data-panel.js
View File 

@ -1,5 +1,4 @@
 
(function(){
 
//  Vue.component('vuedals', Vuedals.Component);
 
    Vue.component('area-data-panel',{
 
        template: '<div class="area-panel">\
 
                <div class="area-tab-panel">\
 
@ -24,17 +23,26 @@
 
                    </tbody>\
 
                </table>\
 
            </div>',
 
        props:['headers','rows'],
 
        props:[],
 
        data: function(){
 
            return {
 
//              headers: ["排名", "咨询量", "未回复"],
 
//              rows: [{rank: 1, cols: ["思明区", "100", "2"]}, 
//                  {rank: 2, cols: ["海沧区", "98", "1"]}],
 
                level: 4,
 
                level: '',
 
                lowLevel: '',
 
                area: '350200'
 
                area: '',
 
                headers: [],
 
                rows: []
 
            }
 
        },
 
        mounted: function(){
 
            var vm = this;
 
            EventBus.$on("render-area-data", function(arg){
 
                vm.level = arg.level;
 
                vm.lowLevel = arg.lowLevel;
 
                vm.area = arg.area;
 
                vm.headers = arg.headers;
 
                vm.rows = arg.rows;
 
            })
 
        },
 
        methods: {
 
            getLowLeverData: function(row){
 
                if(this.level > 2 && this.lowLevel != 1){

+ 5 - 6
component/statistics/line-chart.js
View File 

@ -29,8 +29,8 @@
 
        methods: {
 
            changeType: function(type){
 
                this.selectedDateType = type;
 
                //触发页面更新折线图的数据
 
                EventBus.$emit("get-line-chart-data", {dateType: type});
 
                //触发页面更新折线图的数据,触发器是父类页面自定在组件上的
 
                this.$emit("getlinedata", {dateType: type});
 
            }
 
        },
 
        mounted: function(){
 
@ -63,15 +63,14 @@
 
            var val = lastValue.substr(5,2)+"月"
 
            vm.endDate = lastValue.substr(0,4)+"年"+val;
 
        }
 
        console.log(lastValue);
 
        var options = {
 
            tooltip: {
 
                trigger: 'axis'
 
            },
 
            color: colors,
 
            legend: {
 
                bottom: '0px',
 
                data: name,
 
                top: '0px',
 
                data: names,
 
                borderColor: "#f1f1f1"
 
            },
 
            grid: {
 
@ -140,7 +139,7 @@
 
            legend = [];
 
        for(var i=0; i<yDatas.length; i++){
 
            var obj = {
 
                name: name[i],
 
                name: names[i],
 
                type: 'line',
 
                smooth: true,
 
                data: yDatas[i],

+ 1 - 1
component/statistics/team-info.js
View File 

@ -17,7 +17,7 @@
 
            <div class="plr15 pb20">\
 
                <span class="c-f14 c-bold c-333">团队成员(<span class="span-team-count">{{memberLength}}</span>人)：</span>\
 
                <p class="c-f14 c-333 mt10">\
 
                    <span v-for="member in members">{{member.name}}</span>\
 
                    <span v-for="(member, index) in members">{{index==0? "": " 、"}}{{member.name}}</span>\
 
                </p>\
 
            </div>\
 
        </div>',