添加绘图

jumpserver/views.py

@@ -20,17 +20,20 @@ from jlog.models import Log
 
 
 def getDaysByNum(num):
+    """
+    输出格式:([datetime.date(2015, 11, 6),  datetime.date(2015, 11, 8)], ['11-06', '11-08'])
+    """
+
     today = datetime.date.today()
     oneday = datetime.timedelta(days=1)
-    li_date, li_str = [], []
+    date_li, date_str = [], []
     for i in range(0, num):
         today = today-oneday
-        li_date.append(today)
+        date_li.append(today)
-        li_str.append(str(today)[5:10])
+        date_str.append(str(today)[5:10])
-    li_date.reverse()
+    date_li.reverse()
-    li_str.reverse()
+    date_str.reverse()
-    t = (li_date, li_str)
+    return date_li, date_str
-    return t
 
 
 def get_data(data, items, option):
@@ -51,6 +54,24 @@ def get_data(data, items, option):
     return dic
 
 
+def get_count_by_day(date_li, item):
+    data_li = []
+    for d in date_li:
+        logs = Log.objects.filter(start_time__year=d.year,
+                                  start_time__month=d.month,
+                                  start_time__day=d.day)
+        if item == 'user':
+            count = len(set([log.user for log in logs]))
+        elif item == 'asset':
+            count = len(set([log.host for log in logs]))
+        elif item == 'login':
+            count = len(logs)
+        else:
+            count = 0
+        data_li.append(count)
+    return data_li
+
+
 @require_role(role='user')
 def index_cu(request):
     user_id = request.user.id
@@ -90,6 +111,13 @@ def index(request):
         active_hosts = Asset.objects.filter(is_active=1)
         week_data = Log.objects.filter(start_time__range=[from_week, datetime.datetime.now()])
 
+        date_li, date_str = getDaysByNum(30)
+        date_month = repr(date_str)
+        print date_month
+        active_user_month = str(get_count_by_day(date_li, 'user'))
+        active_asset_month = str(get_count_by_day(date_li, 'asset'))
+        active_login_month = str(get_count_by_day(date_li, 'login'))
+
     elif is_role_request(request, 'admin'):
         return index_cu(request)
         # user = get_session_user_info(request)[2]

templates/foot_script.html

@@ -23,15 +23,7 @@
 
 <!-- highcharts -->
 <script src="/static/js/highcharts/highcharts.js"></script>
-<script type="text/javascript">
+
-    require.config({
-        paths: {
-            echarts: '/static/js/echarts/chart'
-        }
-    });
-</script>
-<!-- echarts -->
-<script src="/static/js/echarts/echarts.js"></script>
 
 <script src="/static/js/dropzone/dropzone.js"></script>
 <!-- active menu -->

templates/index.html

@@ -40,7 +40,7 @@
                     <h5>实时在线用户</h5>
                 </div>
                 <div class="ibox-content">
-                    <h1 class="no-margins"><a href="/jlog/log_list/online/"> <span id="online_users"></span></a></h1>
+                    <h1 class="no-margins"><a href="/jlog/log_list/online/"> <span id="online_users">10</span></a></h1>
                     <div class="stat-percent font-bold text-navy">{{ percent_online_user }} <i class="fa fa-level-up"></i></div>
                     <small>Online user</small>
                 </div>
@@ -54,7 +54,7 @@
                     <h5>已连接服务器</h5>
                 </div>
                 <div class="ibox-content">
-                        <h1 class="no-margins"><a href="/jlog/log_list/online/"> <span id="online_hosts"></span></a></h1>
+                        <h1 class="no-margins"><a href="/jlog/log_list/online/"> <span id="online_hosts">10</span></a></h1>
                     <div class="stat-percent font-bold text-danger">{{ percent_online_host }} <i class="fa fa-level-down"></i></div>
                     <small>Connected host</small>
                 </div>
@@ -62,7 +62,7 @@
         </div>
     </div>
     <div class="row">
-        <div class="col-lg-3 border-bottom white-bg dashboard-header" style="margin-left:15px;height: 346px">
+        <div class="col-sm-2 border-bottom white-bg dashboard-header" style="margin-left:15px;height: 346px">
             <h2>活跃用户TOP5</h2>
             <small>过去一周共有<span class="text-info">{{ week_users }}</span>位用户登录<span class="text-success">{{ week_hosts }}</span>次服务器.</small>
             <ul class="list-group clear-list m-t">
@@ -76,7 +76,32 @@
                 {% endfor %}
             </ul>
         </div>
-        <div class="col-lg-9" id="top10" style="margin-left: -15px;height: 345px"></div>
+        <div class="col-sm-7" id="top10" style="margin-left: -15px;height: 346px;padding: 15px 0 15px 0;"></div>
+        <div class="col-lg-3 white-bg" id="top1" style="margin-left: -15px;height: 346px">
+            <div class="statistic-box">
+                <h4>
+                    活跃用户资产占比
+                </h4>
+                <p>
+                    以下图形分别描述一个月活跃用户和资产占所有用户主机的百分比
+                </p>
+                <div class="row text-center">
+                    <div class="col-lg-6">
+                        <div id="activeUser"  style="width: 140px; height: 140px;">
+
+                        </div>
+                        <h5>用户</h5>
+                    </div>
+                    <div class="col-lg-6">
+                        <div id="activeAsset" style="width: 140px; height: 140px;"></div>
+                        <h5>主机</h5>
+                    </div>
+                </div>
+                <div class="m-t">
+                    <small></small>
+                </div>
+            </div>
+        </div>
     </div>
     <br/>
 
@@ -248,161 +273,176 @@
         <!--</div>-->
 </div>
 
+<script src="/static/js/echarts/echarts.js"></script>
 <script>
 $(document).ready(function(){
     $('#show').click(function(){
         $('#show').css('display', 'none');
         $('#more').css('display', 'block');
     })
-})
-var cate = {{ li_str|safe }};
-$(function () {
-    $('#top10').highcharts({
-//        chart: {
-//            type: 'column'
-//        },
-        title: {
-            text: '一周数据总览',
-            x: -20 //center
-        },
-        subtitle: {
-            text: 'Source: JumpServer',
-            x: -20
-        },
-        rangeSelector: {
-            allButtonsEnabled: true,
-            selected: 2
-        },
-        xAxis: {
-            type: 'datetime',
-            categories: cate
-        },
-        yAxis:{
-            min: 0,
-            title: {
-                text: ''
-            },
-            plotLines: [{
-                value: 0,
-                width: 1,
-                color: '#808080'
-            }]
-        },
-        tooltip: {
-            valueSuffix: '次'
-        },
-        navigation: {
-            buttonOptions: {
-                align: 'right'
-            }
-        },
-        series: [
-            {% for k,v in top_dic.items %}
-                {
-                    name: '{{ k }}',
-                    data: {{ v }}
-                },
-            {% endfor %}
-        ]
-    });
-
-    $('#usertop10').highcharts({
-        title: {
-            text: '一周用户登录TOP10',
-            x: -20 //center
-        },
-        subtitle: {
-            text: 'Source: JumpServer',
-            x: -20
-        },
-        xAxis: {
-            type: 'datetime',
-            categories: cate
-        },
-        yAxis:{
-            min: 0,
-            title: {
-                text: '登录次数'
-            },
-            plotLines: [{
-                value: 0,
-                width: 1,
-                color: '#808080'
-            }]
-        },
-        tooltip: {
-            valueSuffix: '次'
-        },
-        series: [
-            {% for k,v in user_dic.items %}
-                {
-                    name: '{{ k }}',
-                    data: {{ v }}
-                },
-            {% endfor %}
-        ]
-    });
-
-        $('#hosttop10').highcharts({
-        title: {
-            text: '一周主机登录TOP10',
-            x: -20 //center
-        },
-        subtitle: {
-            text: 'Source: JumpServer',
-            x: -20
-        },
-        xAxis: {
-            type: 'datetime',
-            categories: cate
-        },
-        yAxis:{
-            min: 0,
-            title: {
-                text: '登录次数'
-            },
-            plotLines: [{
-                value: 0,
-                width: 1,
-                color: '#808080'
-            }]
-        },
-        tooltip: {
-            valueSuffix: '次'
-        },
-        series: [
-            {% for k,v in host_dic.items %}
-                {
-                    name: '{{ k }}',
-                    data: {{ v }}
-                },
-            {% endfor %}
-        ]
-    });
-
-    function magic_number(value, id) {
-        var num = $("#"+id);
-        num.animate({count: value}, {
-            duration: 500,
-            step: function() {
-                num.text(String(parseInt(this.count)));
-            }
-        });
-    };
-
-    function update() {
-        $.getJSON('api/user/',  function(data) {
-            var users = data.users;
-            var hosts = data.hosts;
-            magic_number(users, 'online_users');
-            magic_number(hosts, 'online_hosts')
-        });
-    };
-
-    setInterval(update, 5000); //5秒钟执行一次
-    update();
-
 });
+
+    require.config({
+        paths: {
+            'echarts': '/static/js/echarts/chart',
+            'echarts/chart/line': '/static/js/echarts/chart/line',
+            'echarts/chart/pie': '/static/js/echarts/chart/pie'
+        }
+    });
+    require(
+        [
+            'echarts',
+            'echarts/chart/line'
+        ],
+        function (ec) {
+            var top10Chart = ec.init(document.getElementById('top10'));
+            var option = {
+                title : {
+                    text: '月数据总览',
+                    subtext: '一个月内历史汇总',
+                    x: 'center'
+                },
+                tooltip : {
+                    trigger: 'axis'
+                },
+                backgroundColor: '#fff',
+                legend: {
+                    data:['登陆次数', '活跃用户','活跃资产'],
+                    y: 'bottom'
+                },
+                toolbox: {
+                    show : false,
+                    feature : {
+{#                        mark : {show: true},#}
+{#                        dataView : {show: true, readOnly: false},#}
+                        magicType : {show: true, type: ['line', 'bar']}
+                    }
+                },
+                calculable : true,
+                xAxis : [
+                    {
+                        type : 'category',
+                        boundaryGap : false,
+                        data : {{ date_month | safe}}
+                    }
+                ],
+                yAxis : [
+                    {
+                        type : 'value'
+                    }
+                ],
+                series : [
+                    {
+                        name:'登陆次数',
+                        type:'line',
+                        smooth:true,
+                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
+                        data: {{ active_login_month | safe }}
+                    },
+                    {
+                        name:'活跃用户',
+                        type:'line',
+                        smooth:true,
+                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
+                        data: {{ active_user_month | safe }}
+                    },
+                    {
+                        name:'活跃资产',
+                        type:'line',
+                        smooth:true,
+                        itemStyle: {normal: {areaStyle: {type: 'default'}}},
+                        data: {{ active_asset_month | safe }}
+                    },
+
+                ]
+            };
+
+            top10Chart.setOption(option);
+        }
+    );
+
+    require(
+        [
+            'echarts',
+            'echarts/chart/pie'
+        ],
+        function (ec) {
+            var auChart = ec.init(document.getElementById('activeUser'));
+            var aaChart = ec.init(document.getElementById('activeAsset'));
+            var option = {
+                tooltip : {
+                    trigger: 'item',
+                    formatter: "{b} <br> {c} ({d}%)"
+                },
+                legend: {
+                    show: false,
+                    orient : 'vertical',
+                    x : 'left',
+                    data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
+                },
+                toolbox: {
+                    show : false,
+                    feature : {
+                        mark : {show: true},
+                        dataView : {show: true, readOnly: false},
+                        magicType : {
+                            show: true,
+                            type: ['pie', 'funnel'],
+                            option: {
+                                funnel: {
+                                    x: '25%',
+                                    width: '50%',
+                                    funnelAlign: 'center',
+                                    max: 1548
+                                }
+                            }
+                        },
+                        restore : {show: true},
+                        saveAsImage : {show: true}
+                    }
+                },
+                calculable : true,
+                series : [
+                    {
+                        name:'访问来源',
+                        type:'pie',
+                        radius : ['50%', '70%'],
+                        itemStyle : {
+                            normal : {
+                                label : {
+                                    show : false
+                                },
+                                labelLine : {
+                                    show : false
+                                }
+                            },
+                            emphasis : {
+                                label : {
+                                    show : true,
+                                    position : 'center',
+                                    textStyle : {
+                                        fontSize : '5',
+                                        fontWeight : 'bold'
+                                    }
+                                }
+                            }
+                        },
+                        data:[
+                            {value:335, name:'直接访问'},
+                            {value:310, name:'邮件营销'},
+                            {value:234, name:'联盟广告'},
+                            {value:135, name:'视频广告'},
+                            {value:1548, name:'搜索引擎'}
+                        ]
+                    }
+                ]
+            };
+
+            auChart.setOption(option);
+            aaChart.setOption(option);
+        }
+    );
+
 </script>
 
 {% endblock %}

templates/test2.html

@@ -6,33 +6,34 @@
     <script type="text/javascript">
         require.config({
             paths: {
-{#                'echarts': '/static/js/echarts/chart',#}
+                'echarts': '/static/js/echarts/chart',
-                'line': '/static/js/echarts/chart/line'
+                'echarts/chart/line': '/static/js/echarts/chart/line'
             }
         });
         require(
             [
-                'line',
+                'echarts',
+                'echarts/chart/line'
             ],
             function (ec) {
                 var myChart = ec.init(document.getElementById('main'));
                 var option = {
                     title : {
-                        text: '未来一周气温变化',
+                        text: '某楼盘销售情况',
                         subtext: '纯属虚构'
                     },
                     tooltip : {
                         trigger: 'axis'
                     },
                     legend: {
-                        data:['最高气温','最低气温']
+                        data:['意向','预购','成交']
                     },
                     toolbox: {
                         show : true,
                         feature : {
                             mark : {show: true},
                             dataView : {show: true, readOnly: false},
-                            magicType : {show: true, type: ['line', 'bar']},
+                            magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                             restore : {show: true},
                             saveAsImage : {show: true}
                         }
@@ -47,47 +48,35 @@
                     ],
                     yAxis : [
                         {
-                            type : 'value',
+                            type : 'value'
-                            axisLabel : {
-                                formatter: '{value} °C'
-                            }
                         }
                     ],
                     series : [
                         {
-                            name:'最高气温',
+                            name:'成交',
                             type:'line',
-                            data:[11, 11, 15, 13, 12, 13, 10],
+                            smooth:true,
-                            markPoint : {
+                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
-                                data : [
+                            data:[10, 12, 21, 54, 260, 830, 710]
-                                    {type : 'max', name: '最大值'},
-                                    {type : 'min', name: '最小值'}
-                                ]
-                            },
-                            markLine : {
-                                data : [
-                                    {type : 'average', name: '平均值'}
-                                ]
-                            }
                         },
                         {
-                            name:'最低气温',
+                            name:'预购',
                             type:'line',
-                            data:[1, -2, 2, 5, 3, 2, 0],
+                            smooth:true,
-                            markPoint : {
+                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
-                                data : [
+                            data:[30, 182, 434, 791, 390, 30, 10]
-                                    {name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
+                        },
-                                ]
+                        {
-                            },
+                            name:'意向',
-                            markLine : {
+                            type:'line',
-                                data : [
+                            smooth:true,
-                                    {type : 'average', name : '平均值'}
+                            itemStyle: {normal: {areaStyle: {type: 'default'}}},
-                                ]
+                            data:[1320, 1132, 601, 234, 120, 90, 20]
-                            }
                         }
                     ]
                 };
 
+
                 myChart.setOption(option);
             }
         );