Home Explore Help
Register Sign In
chenyue
/
PC-application
forked from raolu/PC-application
Watch 0
Star 0
Fork 0
Files
Browse Source

Merge branch 'master' of http://192.168.1.220:10080/raolu/PC-application

Xiao_yanpeng 7 years ago
parent
080b9a3a63 7e3efa24fd
commit
6371009597
35 changed files with 314 additions and 7 deletions
Unified View Show Diff Stats
  1. 42 0
      api/statistics-api.js
  2. 2 2
      app/statistics/comprehensive-analysis.html
  3. 5 5
      app/statistics/common.css
  4. 106 0
      app/statistics/line-chart.html
  5. 159 0
      component/statistics/line-chart.js
  6. BIN
      images/changcufangfenxi_icon.png
  7. BIN
      images/fanhui02_icon.png
  8. BIN
      images/fanhui_icon.png
  9. BIN
      images/jiankangjiaoyu02_icon.png
  10. BIN
      images/jiankangjiaoyu_icon.png
  11. BIN
      images/jumingfenxi_icon.png
  12. BIN
      images/paiming_1_icon.png
  13. BIN
      images/paiming_2_icon.png
  14. BIN
      images/paiming_3_icon.png
  15. BIN
      images/paiming_4_icon.png
  16. BIN
      images/pijianfenxi_icon.png
  17. BIN
      images/qianyujingzhan_icon.png
  18. BIN
      images/shuaxin02_icon.png
  19. BIN
      images/shuaxin_icon.png
  20. BIN
      images/suifangjihua02_icon.png
  21. BIN
      images/suifangjihua_icon.png
  22. BIN
      images/tianjia_btn.png
  23. BIN
      images/tianjia_pre.png
  24. BIN
      images/tongjifenxi02_icon.png
  25. BIN
      images/tongjifenxi_icon.png
  26. BIN
      images/tuigaiqian_icon.png
  27. BIN
      images/xuanzhe02_icon.png
  28. BIN
      images/xuanzhe_icon.png
  29. BIN
      images/xufangguanli02_icon.png
  30. BIN
      images/xufangguanli_icon.png
  31. BIN
      images/xuqianjingzhan_icon.png
  32. BIN
      images/zhankai02_icon.png
  33. BIN
      images/zhankai_icon.png
  34. BIN
      images/zixunfenxi_icon.png
  35. BIN
      images/zongtifenxi_icon.png

+ 42 - 0
api/statistics-api.js
View File 

@ -0,0 +1,42 @@
 
(function(exports) {
 
    var statisticAPI = {
 
        /*************总体分析页面接口列表**************/
 
        //1、顶部各个tab的值
 
        statisticTotal: function(data){
 
            return httpRequest.get("/statistics/total", {data: data});
 
        },
 
        //微信绑定和设备绑定数据接口
 
        statisticBindAll: function(data){
 
            return httpRequest.get("/statistics/index_all", {data: data});
 
        },
 
        //健康文章发送数量
 
        articleAll: function(data){
 
            return httpRequest.get("/statistics/article_total", {data: data});
 
        },
 
        //2、中间折线图接口 
        //增量（咨询量3、随访量4、健康教育5、代预约量27），到达量（绑定微信21、绑定设备20）
 
        interval: function(data){
 
            return httpRequest.get("statistics/interval", {data: data});
 
        },
 
        intervalTotal: function(data){
 
            return httpRequest.get("statistics/interval_total", {data: data});
 
        },
 
        //3、底部区域数据接口
 
        lowlevelTotal: function(data){
 
            return httpRequest.get("statistics/lowlevel_total", {data: data});
 
        },
 
        //微信绑定和设备绑定
 
        lowlevelAll: function(data){
 
            return httpRequest.get("statistics/lowlevel_all", {data: data});
 
        },
 
        //咨询量数据
 
        lowlevelTotalMesh: function(data){
 
            return httpRequest.get("statistics/lowlevel_total_mesh", {data: data});
 
        },
 
        articleLowlevelTotal: function(data){
 
            return httpRequest.get("/statistics/article_lowlevel_total", {data: data});
 
        }
 
    }
 
    exports.statisticAPI = statisticAPI;
 
})(window)

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

@ -11,7 +11,7 @@
 
        <link rel="stylesheet" type="text/css" href="../../fonts/font-awesome/css/font-awesome.min.css"/>
 
        <link rel="stylesheet" type="text/css" href="../../fonts/font-awesome/css/font-awesome.min.css"/>
 
        <link rel="stylesheet" type="text/css" href="../../css/style.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/cross.css"/>
 
        <link rel="stylesheet" type="text/css" href="common.css"/>
 
        <link rel="stylesheet" type="text/css" href="css/common.css"/>
 
    </head>
 
    </head>
 
    <body>
 
    <body>
 
        <div class="h45">
 
        <div class="h45">
 
@ -214,7 +214,7 @@
 
                    {{if index == '21'}}
 
                    {{if index == '21'}}
 
                        <td>{{v.bindRate || 0}}%</td>
 
                        <td>{{v.bindRate || 0}}%</td>
 
                        <td>{{v.weChatAmount1}}</td>
 
                        <td>{{v.weChatAmount1}}</td>
 
                        <td>{{v.weChatAmount0}}</td>
 
                        <td>{{v.weChatAmount0}}</td> 
                    {{else}}
 
                    {{else}}
 
                        <td>{{v.amount}}</td>
 
                        <td>{{v.amount}}</td>
 
                        {{if index == '3'}}
 
                        {{if index == '3'}}

+ 5 - 5
app/statistics/common.css
View File 

@ -112,12 +112,12 @@
 
    height: 45px;
 
    height: 45px;
 
    border-bottom: 2px solid transparent;
 
    border-bottom: 2px solid transparent;
 
    font-size: 16px;
 
    font-size: 16px;
 
    color: #323232;
 
    color: #666;
 
    padding: 0 10px;
 
    padding: 0 10px;
 
}
 
}
 
.area-tab.active span{
 
.area-tab.active span{
 
    color: #17b3ec;
 
    border-bottom: 2px solid #17b3ec;
 
    color: #12b7f5;
 
    border-bottom: 2px solid #12b7f5;
 
}
 
}
 
.bottom-list-table{
 
.bottom-list-table{
 
    border-top: 1px solid #e1e1e1;
 
    border-top: 1px solid #e1e1e1;
 
@ -128,9 +128,9 @@
 
}
 
}
 
.bottom-list-table thead{
 
.bottom-list-table thead{
 
    height: 40px;
 
    height: 40px;
 
    background-color: #f2f4f6;
 
    background-color: #ebebf5;
 
    border-bottom: 1px solid #e1e1e1;
 
    border-bottom: 1px solid #e1e1e1;
 
    color: #909090;
 
    color: #999;
 
}
 
}
 
.bottom-list-table thead tr{
 
.bottom-list-table thead tr{
 
    height: 40px;
 
    height: 40px;

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

@ -0,0 +1,106 @@
 
<!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>

+ 159 - 0
component/statistics/line-chart.js
View File 

@ -0,0 +1,159 @@
 
(function(){
 
    Vue.component('line-chart',{
 
        template: '<div class="mtb10 bgc-fff c-border pb10">\
 
            <div class="ui-grid ui-grid-middle plr10 c-border-b">\
 
                <div class="ui-col-0">\
 
                    <span class="c-333 c-bold c-f14">{{panelName}}</span>\
 
                </div>\
 
                <div class="ui-col-1 c-t-right ptb5">\
 
                    <span class="date-tag" :class="{active: selectedDateType == 1}" data-type="1" @click="changeType(1)">日</span><!--\
 
                    --><span class="date-tag" :class="{active: selectedDateType == 2}" data-type="2" @click="changeType(2)">周</span><!--\
 
                    --><span class="date-tag" :class="{active: selectedDateType == 3}" data-type="3" @click="changeType(3)">月</span>\
 
                </div>\
 
            </div>\
 
            <div class="clearfix mt5 plr10">\
 
                <div class="fl c-f12 c-909090"><span>{{startDate}}</span> ~ <span>{{endDate}}</span>数据</div>\
 
                <div class="fr c-f12 c-909090">单位：人</div>\
 
            </div>\
 
            <div class="line-chart" id="lineChart" style="height: 200px; width: 100%;"></div>\
 
        </div>',
 
        props:[],
 
        data: function(){
 
            return {
 
                selectedDateType: 1,
 
                startDate: "", //数据展示时显示的开始时间
 
                endDate: "", //数据展示时显示的结束时间
 
                panelName: ""
 
            }
 
        },
 
        methods: {
 
            changeType: function(type){
 
                this.selectedDateType = type;
 
                //触发页面更新折线图的数据
 
                EventBus.$emit("get-line-chart-data", {dateType: type});
 
            }
 
        },
 
        mounted: function(){
 
            var vm = this;
 
            EventBus.$on("draw-line-chart", function(arg){
 
                vm.panelName = arg.panelName;
 
                drawLine(vm, arg);
 
            })
 
        }
 
    });
 
    
    function drawLine(vm, arg){
 
        var lineCharts = echarts.init(document.getElementById('lineChart'));
 
        var xData = arg.xData,
 
            yDatas = arg.yDatas,
 
            names = arg.quotaNames,
 
            colors = arg.colors;
 
        //处理数据, 数据按照10条数一屏展示
 
        var lastIndex = xData.length % 10;
 
        if(xData.length >10 ){  
            dataZoom_end = 100-(9/xData.length)*100;  
        }else{  
            dataZoom_end = 0;
 
        }
 
        //初始结束时间
 
        var lastValue = xData[xData.length - 1];
 
        if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
 
            vm.endDate = lastValue;
 
        }else if(vm.selectedDateType == 3){
 
            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,
 
                borderColor: "#f1f1f1"
 
            },
 
            grid: {
 
                show: false,
 
                left: '20px',
 
                right: '20px',
 
                bottom: '40px',
 
                top: '20px',
 
                containLabel: true
 
            },
 
            xAxis: {
 
                type: 'category',
 
                boundaryGap: false,
 
                data: xData,
 
                axisLabel: {
 
                    interval:0,//横轴信息全部显示  
                    formatter: function (value, index) {
 
                        if(vm.selectedDateType == 1 || vm.selectedDateType == 2){
 
                            if(index == 0){
 
                                vm.startDate = value;
 
                                return value.substr(5,2)+"月"+value.substr(8,2);
 
                            }else{
 
                                if(index == 9){
 
                                    vm.endDate = value;
 
                                }
 
                                return value.substr(8,2);
 
                            }
 
                        }else if(vm.selectedDateType == 3){
 
                            var val = value.substr(5,2)+"月"
 
                            if(index == 0){
 
                                vm.startDate = value.substr(0,4)+"年"+val;
 
                            }else{
 
                                if(index == 9){
 
                                    vm.endDate = value.substr(0,4)+"年"+val;
 
                                }
 
                            }
 
                            return val;
 
                        }
 
                    }
 
                }
 
            },
 
            yAxis: {
 
                type: 'value',
 
                axisPointer: {
 
                    snap: true
 
                },
 
                scale: true,
 
                minInterval: 1,
 
                boundaryGap: ['10%', '30%'],
 
                splitLine: {show:false}
 
            },
 
            dataZoom: [{//给x轴设置滚动条  
//              show: false,
 
                start: dataZoom_end,
 
                end: 100,
 
                type: 'slider',
 
                zoomLock: true,
 
            },{ //下面这个属性是内容区域配置
 
                start: dataZoom_end,
 
                end: 100,
 
                type: 'inside',
 
                zoomLock: true,
 
            }]
 
        };
 
        var series = [],
 
            legend = [];
 
        for(var i=0; i<yDatas.length; i++){
 
            var obj = {
 
                name: name[i],
 
                type: 'line',
 
                smooth: true,
 
                data: yDatas[i],
 
                lineStyle:{
 
                    normal:{
 
                        color: colors[i]
 
                    }
 
                }
 
            };
 
            series.push(obj);
 
        }
 
        options.series = series;
 
        $("#lineChart").removeAttr('_echarts_instance_')
 
        lineCharts.setOption(options);
 
    }
 
})()

BIN
images/changcufangfenxi_icon.png
View File


BIN
images/fanhui02_icon.png
View File


BIN
images/fanhui_icon.png
View File


BIN
images/jiankangjiaoyu02_icon.png
View File


BIN
images/jiankangjiaoyu_icon.png
View File


BIN
images/jumingfenxi_icon.png
View File


BIN
images/paiming_1_icon.png
View File


BIN
images/paiming_2_icon.png
View File


BIN
images/paiming_3_icon.png
View File


BIN
images/paiming_4_icon.png
View File


BIN
images/pijianfenxi_icon.png
View File


BIN
images/qianyujingzhan_icon.png
View File


BIN
images/shuaxin02_icon.png
View File


BIN
images/shuaxin_icon.png
View File


BIN
images/suifangjihua02_icon.png
View File


BIN
images/suifangjihua_icon.png
View File


BIN
images/tianjia_btn.png
View File


BIN
images/tianjia_pre.png
View File


BIN
images/tongjifenxi02_icon.png
View File


BIN
images/tongjifenxi_icon.png
View File


BIN
images/tuigaiqian_icon.png
View File


BIN
images/xuanzhe02_icon.png
View File


BIN
images/xuanzhe_icon.png
View File


BIN
images/xufangguanli02_icon.png
View File


BIN
images/xufangguanli_icon.png
View File


BIN
images/xuqianjingzhan_icon.png
View File


BIN
images/zhankai02_icon.png
View File


BIN
images/zhankai_icon.png
View File


BIN
images/zixunfenxi_icon.png
View File


BIN
images/zongtifenxi_icon.png
View File