Skip to content

J
jumpserver
Commit adc3703f authored by ibuler's avatar ibuler
Browse files
Options

添加绘图

parent f31bea2c
Hide whitespace changes
Inline Side-by-side
Showing with 246 additions and 198 deletions
jumpserver/views.py
View file @ adc3703f
......@@ -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)
li_str.append(str(today)[5:10])
li_date.reverse()
li_str.reverse()
t = (li_date, li_str)
return t
date_li.append(today)
date_str.append(str(today)[5:10])
date_li.reverse()
date_str.reverse()
return date_li, date_str
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
View file @ adc3703f
......@@ -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
View file @ adc3703f
......@@ -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 %}
]
require.config({
paths: {
'echarts': '/static/js/echarts/chart',
'echarts/chart/line': '/static/js/echarts/chart/line',
'echarts/chart/pie': '/static/js/echarts/chart/pie'
}
});
$('#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 }}
require(
[
'echarts',
'echarts/chart/line'
],
function (ec) {
var top10Chart = ec.init(document.getElementById('top10'));
var option = {
title : {
text: '月数据总览',
subtext: '一个月内历史汇总',
x: 'center'
},
{% endfor %}
]
});
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 }}
},
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')
});
};
top10Chart.setOption(option);
}
);
setInterval(update, 5000); //5秒钟执行一次
update();
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 %}
\ No newline at end of file
templates/test2.html
View file @ adc3703f
......@@ -6,33 +6,34 @@
<script type="text/javascript">
require.config({
paths: {
{# 'echarts': '/static/js/echarts/chart',#}
'line': '/static/js/echarts/chart/line'
'echarts': '/static/js/echarts/chart',
'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',
axisLabel : {
formatter: '{value} °C'
}
type : 'value'
}
],
series : [
{
name:'最高气温',
name:'成交',
type:'line',
data:[11, 11, 15, 13, 12, 13, 10],
markPoint : {
data : [
{type : 'max', name: '最大值'},
{type : 'min', name: '最小值'}
]
},
markLine : {
data : [
{type : 'average', name: '平均值'}
]
}
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[10, 12, 21, 54, 260, 830, 710]
},
{
name:'最低气温',
name:'预购',
type:'line',
data:[1, -2, 2, 5, 3, 2, 0],
markPoint : {
data : [
{name : '周最低', value : -2, xAxis: 1, yAxis: -1.5}
]
},
markLine : {
data : [
{type : 'average', name : '平均值'}
]
}
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[30, 182, 434, 791, 390, 30, 10]
},
{
name:'意向',
type:'line',
smooth:true,
itemStyle: {normal: {areaStyle: {type: 'default'}}},
data:[1320, 1132, 601, 234, 120, 90, 20]
}
]
};
myChart.setOption(option);
}
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment