admins: dashboard page

dev_aliyun_beta
p31729568 5 years ago
parent d270680ffb
commit 7b69860aa9

@ -13,6 +13,7 @@
//= require bootstrap-datepicker
//= require bootstrap.viewer
//= require echarts
//= require lib/codemirror
//= require mode/shell/shell

@ -0,0 +1,66 @@
$(document).on('turbolinks:load', function() {
if ($('body.admins-dashboards-index-page').length > 0) {
// 月新增用户
var monthChart = echarts.init(document.getElementById('month-active-user'));
monthChart.setOption({
tooltip: {
show: "true",
trigger: 'item',
formatter: '{c0}',
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
padding: [8, 10], //内边距
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
series : [
{
name: '访问来源',
type: 'pie',
radius: '55%',
data: []
}
]
});
monthChart.showLoading();
$.get('/admins/dashboards/month_active_user.json').done(function(data){
monthChart.setOption({
series: [
{ data: data.data }
]
});
monthChart.hideLoading();
});
// 近七天评测次数
var evaluateChart = echarts.init(document.getElementById('evaluate-pie'));
evaluateChart.setOption({
tooltip: {
show: "true",
trigger: 'item',
formatter: '{c0}',
backgroundColor: 'rgba(0,0,0,0.7)', // 背景
padding: [8, 10], //内边距
extraCssText: 'box-shadow: 0 0 3px rgba(255, 255, 255, 0.4);', //添加阴影
axisPointer: { // 坐标轴指示器,坐标轴触发有效
type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
}
},
xAxis: { type: 'category', data: [] },
yAxis: { type: 'value' },
series: [{ data: [], type: 'line' }]
});
evaluateChart.showLoading();
$.get('/admins/dashboards/evaluate.json').done(function(data){
evaluateChart.setOption({
xAxis: { data: data.names },
series: [{ data: data.data }]
});
evaluateChart.hideLoading();
});
}
});

@ -0,0 +1,7 @@
.admins-dashboards-index-page {
.pie-statistic {
.pie {
height: 300px;
}
}
}

@ -1,4 +1,50 @@
class Admins::DashboardsController < Admins::BaseController
def index
@active_user_count = User.where(last_login_on: today).count
@weekly_active_user_count = User.where(last_login_on: current_week).count
@month_active_user_count = User.where(last_login_on: current_month).count
@new_user_count = User.where(created_on: current_month).count
end
def month_active_user
count = UserExtension.where(created_at: current_month).group(:identity).count
data = [
{ value: count['teacher'].to_i, name: '老师' },
{ value: count['student'].to_i, name: '学生' },
{ value: count['professional'].to_i, name: '专业人士' }
]
render_ok(data: data)
end
def evaluate
names = []
data = []
7.times do |i|
date = i.days.ago
names.unshift(date.strftime('%Y-%m-%d'))
count = Output.where(created_at: date.beginning_of_day..date.end_of_day).count
data.unshift(count)
end
render_ok(names: names, data: data)
end
private
def today
Time.now.beginning_of_day..Time.now.end_of_day
end
def current_week
7.days.ago.beginning_of_day..Time.now.end_of_day
end
def current_month
30.days.ago.beginning_of_day..Time.now.end_of_day
end
end

@ -12,19 +12,19 @@
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Traffic</h5>
<span class="h2 font-weight-bold mb-0">350,897</span>
<h5 class="card-title text-uppercase text-muted mb-0">当日活跃用户</h5>
<span class="h2 font-weight-bold mb-0"><%= @active_user_count %></span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-danger text-white rounded-circle shadow">
<i class="fas fa-pie-chart"></i>
<div class="icon icon-shape rounded-circle shadow">
<i class="fa fa-users"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-muted text-sm">
<span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>
<span class="text-nowrap">Since last month</span>
</p>
<!-- <p class="mt-3 mb-0 text-muted text-sm">-->
<!-- <span class="text-success mr-2"><i class="fa fa-arrow-up"></i> 3.48%</span>-->
<!-- <span class="text-nowrap">Since last month</span>-->
<!-- </p>-->
</div>
</div>
</div>
@ -33,19 +33,19 @@
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">New users</h5>
<span class="h2 font-weight-bold mb-0">2,356</span>
<h5 class="card-title text-uppercase text-muted mb-0">7天内活跃用户数</h5>
<span class="h2 font-weight-bold mb-0"><%= @weekly_active_user_count %></span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-warning text-white rounded-circle shadow">
<i class="fas fa-pie-chart"></i>
<div class="icon icon-shape rounded-circle shadow">
<i class="fa fa-users"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-muted text-sm">
<span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 3.48%</span>
<span class="text-nowrap">Since last week</span>
</p>
<!-- <p class="mt-3 mb-0 text-muted text-sm">-->
<!-- <span class="text-danger mr-2"><i class="fas fa-arrow-down"></i> 3.48%</span>-->
<!-- <span class="text-nowrap">Since last week</span>-->
<!-- </p>-->
</div>
</div>
</div>
@ -54,19 +54,19 @@
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Sales</h5>
<span class="h2 font-weight-bold mb-0">924</span>
<h5 class="card-title text-uppercase text-muted mb-0">30天内活跃用户数</h5>
<span class="h2 font-weight-bold mb-0"><%= @month_active_user_count %></span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-yellow text-white rounded-circle shadow">
<i class="fas fa-user"></i>
<div class="icon icon-shape rounded-circle shadow">
<i class="fa fa-users"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-muted text-sm">
<span class="text-warning mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>
<span class="text-nowrap">Since yesterday</span>
</p>
<!-- <p class="mt-3 mb-0 text-muted text-sm">-->
<!-- <span class="text-warning mr-2"><i class="fas fa-arrow-down"></i> 1.10%</span>-->
<!-- <span class="text-nowrap">Since yesterday</span>-->
<!-- </p>-->
</div>
</div>
</div>
@ -75,19 +75,19 @@
<div class="card-body">
<div class="row">
<div class="col">
<h5 class="card-title text-uppercase text-muted mb-0">Performance</h5>
<span class="h2 font-weight-bold mb-0">49,65%</span>
<h5 class="card-title text-uppercase text-muted mb-0">30天内新增用户数</h5>
<span class="h2 font-weight-bold mb-0"><%= @new_user_count %></span>
</div>
<div class="col-auto">
<div class="icon icon-shape bg-info text-white rounded-circle shadow">
<i class="fas fa-pie-chart"></i>
<div class="icon icon-shape rounded-circle shadow">
<i class="fa fa-user-plus"></i>
</div>
</div>
</div>
<p class="mt-3 mb-0 text-muted text-sm">
<span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>
<span class="text-nowrap">Since last month</span>
</p>
<!-- <p class="mt-3 mb-0 text-muted text-sm">-->
<!-- <span class="text-success mr-2"><i class="fas fa-arrow-up"></i> 12%</span>-->
<!-- <span class="text-nowrap">Since last month</span>-->
<!-- </p>-->
</div>
</div>
</div>
@ -95,94 +95,124 @@
</div>
</div>
</div>
<div class="container-fluid mt--7">
<div class="container-fluid mt--7 pie-statistic">
<div class="row mt-5">
<div class="col-xl-8 mb-5 mb-xl-0">
<div class="card shadow">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Page visits</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">Test</a>
</div>
<h5 class="mb-0">近7天评测次数</h5>
</div>
</div>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col">Test</th>
</tr>
</thead>
<tbody>
<% 5.times do %>
<tr>
<th scope="row">/test/</th>
<td>4,569</td>
<td>340</td>
<td>
<i class="fas fa-arrow-up text-success mr-3"></i> 46,53%
</td>
</tr>
<% end %>
</tbody>
</table>
<div id="evaluate-pie" class="pie"></div>
</div>
</div>
</div>
<div class="col-xl-4">
<div class="card shadow">
<div class="card-header border-0">
<div class="row align-items-center">
<div class="col">
<h3 class="mb-0">Test</h3>
</div>
<div class="col text-right">
<a href="#!" class="btn btn-sm btn-primary">Test</a>
</div>
<h5 class="mb-0">30天内新增用户</h5>
</div>
</div>
<div class="table-responsive">
<!-- Projects table -->
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Test</th>
<th scope="col">Test</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<% 5.times do %>
<tr>
<th scope="row">
Test
</th>
<td>
1,480
</td>
<td>
<div class="d-flex align-items-center">
<span class="mr-2">60%</span>
<div>
<div class="progress">
<div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>
</div>
</div>
</div>
</td>
</tr>
<% end %>
</tbody>
</table>
<div id="month-active-user" class="pie"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--<div class="container-fluid mt--7">-->
<!-- <div class="row mt-5">-->
<!-- <div class="col-xl-8 mb-5 mb-xl-0">-->
<!-- <div class="card shadow">-->
<!-- <div class="card-header border-0">-->
<!-- <div class="row align-items-center">-->
<!-- <div class="col">-->
<!-- <h3 class="mb-0">Page visits</h3>-->
<!-- </div>-->
<!-- <div class="col text-right">-->
<!-- <a href="#!" class="btn btn-sm btn-primary">Test</a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="table-responsive">-->
<!-- <table class="table align-items-center table-flush">-->
<!-- <thead class="thead-light">-->
<!-- <tr>-->
<!-- <th scope="col">Test</th>-->
<!-- <th scope="col">Test</th>-->
<!-- <th scope="col">Test</th>-->
<!-- <th scope="col">Test</th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<%# 5.times do %>
<!-- <tr>-->
<!-- <th scope="row">/test/</th>-->
<!-- <td>4,569</td>-->
<!-- <td>340</td>-->
<!-- <td>-->
<!-- <i class="fas fa-arrow-up text-success mr-3"></i> 46,53%-->
<!-- </td>-->
<!-- </tr>-->
<%# end %>
<!-- </tbody>-->
<!-- </table>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="col-xl-4">-->
<!-- <div class="card shadow">-->
<!-- <div class="card-header border-0">-->
<!-- <div class="row align-items-center">-->
<!-- <div class="col">-->
<!-- <h3 class="mb-0">Test</h3>-->
<!-- </div>-->
<!-- <div class="col text-right">-->
<!-- <a href="#!" class="btn btn-sm btn-primary">Test</a>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- <div class="table-responsive">-->
<!-- <table class="table align-items-center table-flush">-->
<!-- <thead class="thead-light">-->
<!-- <tr>-->
<!-- <th scope="col">Test</th>-->
<!-- <th scope="col">Test</th>-->
<!-- <th scope="col"></th>-->
<!-- </tr>-->
<!-- </thead>-->
<!-- <tbody>-->
<%# 5.times do %>
<!-- <tr>-->
<!-- <th scope="row">-->
<!-- Test-->
<!-- </th>-->
<!-- <td>-->
<!-- 1,480-->
<!-- </td>-->
<!-- <td>-->
<!-- <div class="d-flex align-items-center">-->
<!-- <span class="mr-2">60%</span>-->
<!-- <div>-->
<!-- <div class="progress">-->
<!-- <div class="progress-bar bg-gradient-danger" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;"></div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </td>-->
<!-- </tr>-->
<%# end %>
<!-- </tbody>-->
<!-- </table>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!-- </div>-->
<!--</div>-->

@ -779,6 +779,12 @@ Rails.application.routes.draw do
namespace :admins do
get '/', to: 'dashboards#index'
resources :dashboards, only: [:index] do
collection do
get :month_active_user
get :evaluate
end
end
resources :files, only: [:create]
resources :daily_school_statistics, only: [:index] do

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long
Loading…
Cancel
Save