前面实现了用户的角色管理、权限管理、故障管理。下面学习下解决故障
报表只有总监能看到,这里用的报表使用了hichart,插件来实现的
{% extends 'layout.html' %}
{% block content %}
<div id="container" style="min-width:300px;height:300px"></div>
<div id="container2" style="min-width:500px;height:500px"></div>
{% endblock %}
{% block js %}
<script src="https://img.hcharts.cn/highcharts/highcharts.js"></script>
<script src="https://img.hcharts.cn/highcharts/modules/exporting.js"></script>
<script src="https://img.hcharts.cn/highcharts-plugins/highcharts-zh_CN.js"></script>
<script>
$(function () {
Highcharts.setOptions({
global: {
useUTC: false
}
});
$.ajax({
url: '/report.html',
type: "POST",
data: {'csrfmiddlewaretoken': '{{ csrf_token }}'},
dataType: 'JSON',
success: function (arg) {
console.log(arg);
$('#container').highcharts({
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false
},
title: {
text: '运维人员处理报障占比'
},
tooltip: {
headerFormat: '{series.name}<br>',
pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
series: [{
type: 'pie',
name: '运维人员处理报障占比',
data: arg.pie
}]
});
Highcharts.chart('container2', {
title: {
text: '每日处理订单详细',
x: -20 //center
},
subtitle: {
text: '...',
x: -20
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
borderWidth: 1
},
xAxis:{
labels:{
formatter:function(){
return Highcharts.dateFormat("%Y-%m-%d",this.value);
//return this.value;
}
},
minTickInterval:24
},
series: arg.zhexian
});
}
});
})
</script>
{% endblock %}
后端的数据提供是:
def report(request):
if request.permission_code == "LOOK":
if request.method == "GET":
return render(request,'report.html')
else:
from django.db.models import Count
#饼图
result = models.Order.objects.filter(status=3).values_list('processor__nickname').annotate(ct=Count('id'))
response = {}
result_dic ={}
# key = bin['processor_id']
# if key in result_dic:
# result_dic[key]['data'].append([bin['processor__nickname'],bin['ct']])
# else:
# result_dic[key]={'data':[[bin['processor__nickname'],bin['ct']],]}
response['pie']=list(result)
ymd_list = models.Order.objects.filter(status=3).extra(select={'ymd':"strftime('%%s',strftime('%%Y-%%m-%%d',ptime))"}).values('processor_id','processor__nickname','ymd').annotate(ct=Count('id'))
ymd_dict = {}
for row in ymd_list:
key = row['processor_id']
if key in ymd_dict:
ymd_dict[key]['data'].append([float(row['ymd'])*1000, row['ct']])
else:
ymd_dict[key] = {'name':row['processor__nickname'],'data':[ [float(row['ymd'])*1000, row['ct']], ]}
response['zhexian']=list(ymd_dict.values())
return HttpResponse(json.dumps(response))
结果:
![](https://s1.51cto.com/images/blog/201805/22/f5728870af697d0d7f23052846fb8791.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_90,type_ZmFuZ3poZW5naGVpdGk=)
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。