Skip to content

Commit 6b75473

Browse files
huacnleehuacnlee
committed
调整后台统计数字的排版;
1 parent 79957a0 commit 6b75473

File tree

3 files changed

+115
-105
lines changed

3 files changed

+115
-105
lines changed

‎app/assets/stylesheets/admin.scss

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,9 @@
22
*= require application
33
*= require_self
44
*/
5+
6+
@import "vars";
7+
58
body { color: #333; }
69

710
body, p, ol, ul, td {
@@ -10,6 +13,8 @@ body, p, ol, ul, td {
1013
line-height: 18px;
1114
}
1215

16+
.nav-search { display: none !important; }
17+
1318
.panel-body h1,
1419
fieldset legend { border:0px; font-size: 18px; margin-top:0px; margin-bottom: 20px; padding: 0;line-height: 100%; }
1520

@@ -38,3 +43,15 @@ table tr td a.fa {
3843
.nav > li > a {
3944
padding: 14px 6px;
4045
}
46+
47+
.stat {
48+
49+
margin: 15px;
50+
padding-bottom: 15px;
51+
border-bottom: 1px dashed #eee;
52+
53+
.total { font-size: 18px; color: #555; margin-bottom: 10px; margin-top: 8px; }
54+
.name { font-size: 14px; color: #999; }
55+
.total-week { color: $blue; font-size: 12px; margin: 0 10px; }
56+
.total-month { color: $green; font-size: 12px; }
57+
}

‎app/controllers/admin/stats_controller.rb

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,11 @@ class StatsController < Admin::ApplicationController
55
# model - Model 名称
66
# by - day, week, month
77
def index
8-
date_from = case params[:by]
9-
when 'month' then 12.months.ago.beginning_of_month.to_date
10-
when 'week' then 6.months.ago.beginning_of_month.to_date
11-
else 30.days.ago.beginning_of_month.to_date
12-
end
13-
res = {}
14-
group_cmd = case params[:by]
15-
when 'day' then "date(created_at at time zone 'CST')"
16-
when 'week' then "date_trunc('week', created_at)"
17-
else "date_trunc('month', created_at)"
18-
end
19-
results = klass.unscoped.where('created_at >= ? and created_at <= ?', date_from, Date.current)
20-
.group("date")
21-
.select("#{group_cmd} AS date, count(id) AS count").all
22-
render json: results.as_json
8+
result = { model: params[:model] }
9+
result[:count] = klass.unscoped.count
10+
result[:week_count] = klass.unscoped.where("created_at >= ?", Date.today.beginning_of_week).count
11+
result[:month_count] = klass.unscoped.where("created_at >= ?", Date.today.beginning_of_month).count
12+
render json: result.as_json
2313
end
2414

2515
def klass

‎app/views/admin/home/index.html.erb

Lines changed: 93 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -2,26 +2,6 @@
22
<span class="current"><%= t("admin.overview") %></span>
33
<% end %>
44

5-
<style type="text/css">
6-
.ac-tooltip{
7-
position:absolute;
8-
visibility:hidden;
9-
border : 1px solid #efefef;
10-
border-radius: 3px;
11-
background-color: white;
12-
opacity: .85;
13-
padding: 3px;
14-
font-size: 12px;
15-
}
16-
.ac-tooltip .ac-list{
17-
margin: 0;
18-
padding: 0;
19-
list-style: none;
20-
}
21-
.ac-tooltip li{
22-
line-height: 14px;
23-
}
24-
</style>
255

266
<div class="toolbar">
277
<div class="btn-group">
@@ -33,80 +13,103 @@
3313
</div>
3414

3515
<div class="clearfix">
36-
<h4><%= t("admin.statics") %></h4>
37-
<table class="table table-striped table-condensed">
38-
<tr>
39-
<td style="width:120px;"><%= t("admin.menu.users") %></td>
40-
<td><%= User.unscoped.count %> 人</td>
41-
</tr>
42-
<tr><td colspan="2"><div id="chart-user" class="chart"></div></td></tr>
43-
<tr><td><%= t("admin.menu.topics") %></td><td><%= Topic.unscoped.count %> 个</td></tr>
44-
<tr><td colspan="2"><div id="chart-topic" class="chart"></div></td></tr>
45-
<tr><td><%= t("admin.menu.replies") %></td><td><%= Reply.unscoped.count %> 条</td></tr>
46-
<tr><td colspan="2"><div id="chart-reply" class="chart"></div></td></tr>
47-
<tr><td>通知</td><td><%= Notification.unscoped.count %> 条</td></tr>
48-
<tr><td colspan="2"><div id="chart-notification" class="chart"></div></td></tr>
49-
<tr><td>图片</td><td><%= Photo.unscoped.count %> 张</td></tr>
50-
<tr><td colspan="2"><div id="chart-photo" class="chart"></div></td></tr>
51-
<% if Setting.has_module? :note %>
52-
<tr><td><%= t("admin.menu.notes") %></td><td><%= Note.unscoped.count %> 条</td></tr>
53-
<% end %>
54-
<tr><td>Device</td><td><%= Device.unscoped.count %> 台</td><td></td></tr>
55-
<tr><td>OAuth Token</td><td><%= Doorkeeper::AccessToken.count %> 条</td><td></td></tr>
56-
</table>
16+
<div class="row">
17+
<div class="col-sm-4" id="user-stat">
18+
<div class="stat">
19+
<div class="total">0</div>
20+
<div class="name">
21+
用户总数
22+
<span class="total-week" rel="twipsy" title="本周新增">+0</span>
23+
<span class="total-month" rel="twipsy" title="本月新增">+0</span>
24+
</div>
25+
</div>
26+
</div>
27+
28+
<div class="col-sm-4" id="topic-stat">
29+
<div class="stat">
30+
<div class="total">0</div>
31+
<div class="name">
32+
话题总数
33+
<span class="total-week" rel="twipsy" title="本周新增">+0</span>
34+
<span class="total-month" rel="twipsy" title="本月新增">+0</span>
35+
</div>
36+
</div>
37+
</div>
38+
39+
<div class="col-sm-4" id="reply-stat">
40+
<div class="stat">
41+
<div class="total">0</div>
42+
<div class="name">
43+
回帖总数
44+
<span class="total-week" rel="twipsy" title="本周新增">+0</span>
45+
<span class="total-month" rel="twipsy" title="本月新增">+0</span>
46+
</div>
47+
</div>
48+
</div>
49+
</div>
50+
<div class="row">
51+
<div class="col-sm-3" id="notification-stat">
52+
<div class="stat">
53+
<div class="total">0</div>
54+
<div class="name">
55+
通知总数
56+
<span class="total-week" rel="twipsy" title="本周新增">+0</span>
57+
<span class="total-month" rel="twipsy" title="本月新增">+0</span>
58+
</div>
59+
</div>
60+
</div>
61+
62+
<div class="col-sm-3" id="comment-stat">
63+
<div class="stat">
64+
<div class="total">0</div>
65+
<div class="name">
66+
评论总数
67+
<span class="total-week" rel="twipsy" title="本周新增">+0</span>
68+
<span class="total-month" rel="twipsy" title="本月新增">+0</span>
69+
</div>
70+
</div>
71+
</div>
72+
73+
<div class="col-sm-3" id="note-stat">
74+
<div class="stat">
75+
<div class="total">0</div>
76+
<div class="name">
77+
记事本总数
78+
<span class="total-week" rel="twipsy" title="本周新增">+0</span>
79+
<span class="total-month" rel="twipsy" title="本月新增">+0</span>
80+
</div>
81+
</div>
82+
</div>
83+
84+
85+
86+
<div class="col-sm-3" id="photo-stat">
87+
<div class="stat">
88+
<div class="total">0</div>
89+
<div class="name">
90+
照片总数
91+
<span class="total-week" rel="twipsy" title="本周新增">+0</span>
92+
<span class="total-month" rel="twipsy" title="本月新增">+0</span>
93+
</div>
94+
</div>
95+
</div>
96+
</div>
5797

58-
<script src="https://as.alipayobjects.com/g/datavis/g2/2.0.5/index.js"></script>
5998
<script type="text/javascript">
60-
function createChart(source, model, color) {
61-
var dom = $('#chart-' + model);
62-
dom.html("");
63-
var chart = new G2.Chart({
64-
id: 'chart-' + model,
65-
width : dom.width(),
66-
height : 60,
67-
tickCount: 12,
68-
plotCfg: {
69-
margin: [10, 5]
70-
}
71-
});
72-
chart.source(source, {
73-
date: {
74-
type: 'time',
75-
alias: '时间',
76-
formatter: function(val) {
77-
var date = new Date(val);
78-
return (date.getMonth() + 1) + '月';
79-
}
80-
},
81-
count: {
82-
nice: true,
83-
type: 'linear',
84-
alias: '新增数量',
85-
}
86-
});
87-
chart.axis(false);
88-
chart.tooltip({
89-
title: ''
90-
});
91-
chart.line().color(color).position('date*count').shape('spline').tooltip('date*count').size(2);
92-
chart.render();
99+
function updateStatValue(data) {
100+
var el = $('#' + data.model + '-stat');
101+
el.find(".total").text(data.count);
102+
el.find(".total-week").text('+' + data.week_count);
103+
el.find(".total-month").text('+' + data.month_count);
93104
}
94105

95-
$.get("/admin/stats?model=user&by=month", function(data) {
96-
createChart(data, 'user', '#356DD0');
97-
});
98-
$.get("/admin/stats?model=topic&by=month", function(data) {
99-
createChart(data, 'topic', '#F44336');
100-
});
101-
$.get("/admin/stats?model=reply&by=month", function(data) {
102-
createChart(data, 'reply', '#FFB300');
103-
});
104-
$.get("/admin/stats?model=notification&by=month", function(data) {
105-
createChart(data, 'notification', '#795548');
106-
});
107-
$.get("/admin/stats?model=photo&by=month", function(data) {
108-
createChart(data, 'photo', '#03A9F4');
109-
});
106+
var models = ['user', 'topic', 'reply', 'note', 'notification', 'photo', 'comment'];
107+
for (var i = 0; i < models.length; i ++) {
108+
var model = models[i];
109+
$.get("/admin/stats?model="+ model +"&by=month", function(data) {
110+
updateStatValue(data)
111+
});
112+
}
110113
</script>
111114
</div>
112115

0 commit comments

Comments
 (0)