gitee
/
django-vue-admin
mirror of https://gitee.com/liqianglog/django-vue-admin
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: ✨ 首页控制台优化

pull/95/head
李强 2023-04-21 16:39:55 +08:00
parent 5927f60610
commit c656d7ac97
11 changed files with 256 additions and 186 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
backend/dvadmin/system/urls.py
View File

@ -30,6 +30,7 @@ system_url.register(r'file', FileViewSet)
system_url.register(r'api_white_list', ApiWhiteListViewSet)
system_url.register(r'system_config', SystemConfigViewSet)
system_url.register(r'message_center', MessageCenterViewSet)
system_url.register(r'datav', DataVViewSet)
urlpatterns = [
path('system_config/save_content/', SystemConfigViewSet.as_view({'put': 'save_content'})),
@ -41,6 +42,5 @@ urlpatterns = [
path('dept_lazy_tree/', DeptViewSet.as_view({'get': 'dept_lazy_tree'})),
path('clause/privacy.html', PrivacyView.as_view()),
path('clause/terms_service.html', TermsServiceView.as_view()),
path('homepage_statistics/', DataVViewSet.as_view({'get': 'homepage_statistics'})),
]
urlpatterns += system_url.urls

235
backend/dvadmin/system/views/datav.py
View File

@ -7,7 +7,9 @@ import json
import re
import time
from django.db.models import Count
from django.db.models import Count, Sum, Q
from django.db.models.functions import TruncMonth, TruncDay
from django.utils import timezone
from rest_framework.decorators import action
from rest_framework.permissions import IsAuthenticated
from rest_framework.viewsets import GenericViewSet
@ -17,6 +19,11 @@ from dvadmin.system.models import Users, LoginLog, FileList
from dvadmin.system.views.login_log import LoginLogSerializer
from dvadmin.utils.json_response import DetailResponse
from django.db import connection
from django.utils.timezone import now
from django.db.models import Count
from django.db.models.functions import TruncDate
from dvadmin.utils.string_util import format_bytes
def jx_timestamp():
@ -35,93 +42,159 @@ class DataVViewSet(GenericViewSet):
ordering_fields = ['create_datetime']
@action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated])
def homepage_statistics(self, request):
# Users 新增
# LoginLog # 最后登录
timestr = jx_timestamp().split(" ")
min_time = datetime.datetime.strptime(timestr[0] + " " + "00:00:00", "%Y-%m-%d %H:%M:%S")
max_time = datetime.datetime.strptime(timestr[0] + " " + "23:59:59", "%Y-%m-%d %H:%M:%S")
# 今日注册
today_register = Users.objects.filter(create_datetime__gte=min_time, is_superuser=0).count()
# 今日登录
today_login = len(set(LoginLog.objects.filter(create_datetime__gte=min_time).values_list('username')))
# 三日新增
Three_days_register = Users.objects.filter(
create_datetime__gte=min_time - datetime.timedelta(days=3), is_superuser=0).count()
# 七日新增
Seven_days_register = Users.objects.filter(
create_datetime__gte=min_time - datetime.timedelta(days=7), is_superuser=0).count()
# 七日活跃
Seven_days_login = len(set(LoginLog.objects.filter(
create_datetime__gte=min_time - datetime.timedelta(days=7)).values_list('username')))
# 月活跃
month_login = len(set(LoginLog.objects.filter(
create_datetime__gte=min_time - datetime.timedelta(days=30)).values_list('username')))
# 七日用户登录数
sum_days_login_list = []
for i in range(7):
sum_days_login_list.append({"time": (min_time + datetime.timedelta(days=-i)).strftime("%Y-%m-%d"),
"count": len(set(LoginLog.objects.filter(
create_datetime__lte=max_time - datetime.timedelta(days=i),
create_datetime__gte=min_time - datetime.timedelta(days=i)).values_list(
'username')))})
def users_login_total(self, request):
"""
用户登录总数数据
:param request:
:return:
"""
login_total = LoginLog.objects.all().count()
return DetailResponse(data={"login_total": login_total}, msg="获取成功")
# 七日注册用户数
sum_days_register_list = []
for i in range(7):
sum_days_register_list.append(
{"time": (min_time + datetime.timedelta(days=-i)).strftime("%Y-%m-%d"), "count": Users.objects.filter(
create_datetime__lte=max_time - datetime.timedelta(days=i),
create_datetime__gte=min_time - datetime.timedelta(days=i), is_superuser=0).count()})
# 用户总数
sum_register = Users.objects.filter(is_superuser=0).count()
# FileList 附件
today_f_l = FileList.objects.filter(create_datetime__gte=min_time).count()
sum_f_l = FileList.objects.all().count()
# 今日附件
today_file = {'count': today_f_l, "occupy_space": 0}
# 总附件
sum_file = {'count': sum_f_l, "occupy_space": 0}
@action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated])
def users_total(self, request):
"""
用户总数
:param request:
:return:
"""
users_total = Users.objects.all().count()
return DetailResponse(data={"users_total": users_total, }, msg="获取成功")
# 获取游标对象
@action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated])
def attachment_total(self, request):
"""
附件统计数据
:param request:
:return:
"""
count = FileList.objects.all().count()
data = FileList.objects.aggregate(sum_size=Sum('size'))
return DetailResponse(data={"count": count, "occupy_space": format_bytes(data.get('sum_size'))}, msg="获取成功")
cursor = connection.cursor()
@action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated])
def database_total(self, request):
"""
数据库统计数据
:param request:
:return:
"""
count = len(connection.introspection.table_names())
database_type = connection.settings_dict['ENGINE']
sql = None
if 'mysql' in database_type:
sql = "SELECT SUM(data_length + index_length) AS size FROM information_schema.TABLES WHERE table_schema = DATABASE()"
elif 'postgres' in database_type or 'psqlextra' in database_type:
sql = """SELECT SUM(pg_total_relation_size(quote_ident(schemaname) || '.' || quote_ident(tablename))) AS size FROM pg_tables WHERE schemaname = current_schema();"""
elif 'oracle' in database_type:
sql = "SELECT SUM(bytes) AS size FROM user_segments"
elif 'microsoft' in database_type:
sql = "SELECT SUM(size) * 8 AS size FROM sys.database_files"
else:
space = 0
if sql:
with connection.cursor() as cursor:
try:
cursor.execute(sql)
result = cursor.fetchone()
space = result[0]
except Exception as e:
print(e)
space = '无权限'
return DetailResponse(data={"count": count, "space": format_bytes(space)}, msg="获取成功")
# 拿到游标对象后执行sql语句
@action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated])
def registered_user(self, request):
"""
用户注册趋势
:param request:
:return:
"""
today = datetime.datetime.today()
seven_days_ago = today - datetime.timedelta(days=30)
cursor.execute("show tables;")
users = Users.objects.filter(date_joined__gte=seven_days_ago).annotate(day=TruncDay('date_joined')).values(
'day').annotate(count=Count('id'))
# 获取所有的数据
result = []
for i in range(30):
date = (today - datetime.timedelta(days=i)).strftime('%Y-%m-%d')
count = 0
for user in users:
if user['day'] == date:
count = user['count']
break
result.append({'day': date, 'count': count})
# users_last_month = Users.objects.filter(date_joined__gte=last_month).annotate(day=TruncDate('date_joined')).values('day').annotate(count=Count('id'))
return DetailResponse(data={"registered_user_list": result}, msg="获取成功")
@action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated])
def registered_user(self, request):
"""
用户注册趋势
:param request:
:return:
"""
day = 30
today = datetime.datetime.today()
seven_days_ago = today - datetime.timedelta(days=day)
users = Users.objects.filter(create_datetime__gte=seven_days_ago).annotate(
day=TruncDay('create_datetime')).values(
'day').annotate(count=Count('id'))
result = []
data_dict = {ele.get('day').strftime('%Y-%m-%d'): ele.get('count') for ele in users}
for i in range(day):
date = (today - datetime.timedelta(days=i)).strftime('%Y-%m-%d')
result.append({'day': date, 'count': data_dict[date] if date in data_dict else 0})
return DetailResponse(data={"registered_user_list": result}, msg="获取成功")
@action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated])
def login_user(self, request):
"""
用户登录趋势
:param request:
:return:
"""
day = 30
today = datetime.datetime.today()
seven_days_ago = today - datetime.timedelta(days=day)
users = LoginLog.objects.filter(create_datetime__gte=seven_days_ago).annotate(
day=TruncDay('create_datetime')).values(
'day').annotate(count=Count('id'))
result = []
data_dict = {ele.get('day').strftime('%Y-%m-%d'): ele.get('count') for ele in users}
for i in range(day):
date = (today - datetime.timedelta(days=i)).strftime('%Y-%m-%d')
result.append({'day': date, 'count': data_dict[date] if date in data_dict else 0})
return DetailResponse(data={"login_user": result}, msg="获取成功")
@action(methods=["GET"], detail=False, permission_classes=[IsAuthenticated])
def users_active(self, request):
"""
用户新增活跃数据统计
:param request:
:return:
"""
today = datetime.date.today()
seven_days_ago = today - datetime.timedelta(days=6)
thirty_days_ago = today - datetime.timedelta(days=29)
today_users = Users.objects.filter(date_joined__date=today).count()
today_logins = Users.objects.filter(last_login__date=today).count()
three_days_users = Users.objects.filter(date_joined__gte=seven_days_ago).count()
seven_days_users = Users.objects.filter(date_joined__gte=thirty_days_ago).count()
seven_days_active = Users.objects.filter(last_login__gte=seven_days_ago).values('last_login').annotate(
count=Count('id', distinct=True)).count()
monthly_active = Users.objects.filter(last_login__gte=thirty_days_ago).values('last_login').annotate(
count=Count('id', distinct=True)).count()
rows = cursor.fetchall()
tables_list = []
for row in rows:
tables_list.append(row)
# cursor.execute(
# "select table_schema as db, table_name as tb, table_rows as data_rows, index_length / 1024 as 'storage(KB)' from information_schema.tables where table_schema='{}';".format(
# DATABASE_NAME))
cursor.execute(
"select table_schema as table_db, sum(index_length) as storage,count(table_name ) as tables from information_schema.tables group by table_schema having table_db='{}';".format(
DATABASE_NAME))
rows = cursor.fetchall()
count = 0
space = 0
for row in rows:
count = row[2]
space = round(row[1] / 1024 / 1024, 2)
database_info = {"count": count, "space": space}
data = {
"today_register": today_register,
"today_login": today_login,
"Three_days_register": Three_days_register,
"Seven_days_register": Seven_days_register,
"Seven_days_login": Seven_days_login,
"month_login": month_login,
"sum_days_login_list": sum_days_login_list,
"sum_days_register_list": sum_days_register_list,
"sum_register": sum_register,
"today_file": today_file,
"sum_file": sum_file,
"database_info": database_info,
'today_users': today_users,
'today_logins': today_logins,
'three_days': three_days_users,
'seven_days': seven_days_users,
'seven_days_active': seven_days_active,
'monthly_active': monthly_active
}
return DetailResponse(data=data, msg="获取成功")

23
backend/dvadmin/utils/string_util.py
View File

@ -8,6 +8,7 @@
"""
import hashlib
import random
from decimal import Decimal
CHAR_SET = ("2", "3", "4", "5",
"6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H",
@ -40,3 +41,25 @@ def has_md5(str, salt='123456'):
md.update(str.encode())
res = md.hexdigest()
return res
def format_bytes(size, decimals=2):
"""
格式化字节大小
:param size:
:param decimals:
:return:
"""
if isinstance(size, (str)) and size.isnumeric():
size = int(size)
elif not isinstance(size, (int, float, Decimal)):
return size
if size == 0:
return "0 Bytes"
units = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"]
i = 0
while size >= 1024:
size /= 1024
i += 1
return f"{round(size, decimals)} {units[i]}"

17
web/src/libs/util.js
View File

@ -172,5 +172,22 @@ util.ArrayToTree = function (rootList, parentValue, parentName, list) {
}
return list
}
// 格式化字节大小
util.formatBytes = function (bytes, decimals = 2) {
if (isNaN(bytes)) {
return bytes
}
if (bytes === 0) {
return '0 Bytes'
}
const k = 1024
const dm = decimals < 0 ? 0 : decimals
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
const i = Math.floor(Math.log(bytes) / Math.log(k))
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i]
}
export default util

8
web/src/views/dashboard/workbench/components/attachmentTotal.vue
View File

@ -19,7 +19,7 @@
</div>
<div class="absolute-right">
<div class="card-content-time">
<div class="attachment-value">{{ occupy_space }}MB</div>
<div class="attachment-value">{{ occupy_space }}</div>
<div class="el-icon-s-flag">
附件大小
</div>
@ -70,10 +70,10 @@ export default {
methods: {
initGet () {
request({
url: '/api/system/homepage_statistics/'
url: '/api/system/datav/attachment_total/'
}).then((res) => {
this.count = res.data.sum_file.count
this.occupy_space = res.data.sum_file.occupy_space
this.count = res.data.count
this.occupy_space = this.$util.formatBytes(res.data.occupy_space)
})
},
// 生成一个随机整数

8
web/src/views/dashboard/workbench/components/databaseTotal.vue
View File

@ -19,7 +19,7 @@
</div>
<div class="absolute-right">
<div class="card-content-time">
<div class="attachment-value">{{ space }}MB</div>
<div class="attachment-value">{{ space }}</div>
<div class="el-icon-s-flag">
占用空间
</div>
@ -70,10 +70,10 @@ export default {
methods: {
initGet () {
request({
url: '/api/system/homepage_statistics/'
url: '/api/system/datav/database_total/'
}).then((res) => {
this.count = res.data.database_info.count
this.space = res.data.database_info.space
this.count = res.data.count
this.space = this.$util.formatBytes(res.data.space)
})
},
randomColor () {

12
web/src/views/dashboard/workbench/components/loginTotal.vue
View File

@ -4,8 +4,8 @@
<el-row type="flex" justify="space-around" style="padding:10px">
<el-col :span="12">
<div class="card-content">
<div class="card-content-label">登录总数</div>
<div class="card-content-value">{{ sum_register }}</div>
<div class="card-content-label">登录次数</div>
<div class="card-content-value">{{ loginTotal }}</div>
</div>
</el-col>
<el-col :span="6" :offset="6" style="text-align: right;">
@ -21,7 +21,7 @@ import { request } from '@/api/service'
export default {
sort: 2,
title: '登录总数',
title: '登录总次数',
name: 'loginTotal',
icon: 'el-icon-user-solid',
description: '用户登录平台总次数',
@ -50,15 +50,15 @@ export default {
},
data () {
return {
sum_register: ''
loginTotal: ''
}
},
methods: {
initGet () {
request({
url: '/api/system/homepage_statistics/'
url: '/api/system/datav/users_login_total/'
}).then((res) => {
this.sum_register = res.data.sum_register
this.loginTotal = res.data.login_total
})
},
// 生成一个随机整数

48
web/src/views/dashboard/workbench/components/registeredUser.vue
View File

@ -44,46 +44,16 @@ export default {
data () {
this.myChart = null
return {
time: []
data: []
}
},
methods: {
initGet () {
request({
url: '/api/system/homepage_statistics/'
url: '/api/system/datav/registered_user/'
}).then((res) => {
this.time = [
{
time: '2023-04-20',
count: 1
},
{
time: '2023-04-19',
count: 0
},
{
time: '2023-04-18',
count: 0
},
{
time: '2023-04-17',
count: 10
},
{
time: '2023-04-16',
count: 0
},
{
time: '2023-04-15',
count: 2
},
{
time: '2023-04-14',
count: 3
}
]
console.log(this.time)
this.drawLine(this.time)
this.data = res.data.registered_user_list
this.drawLine(this.data)
})
},
// 生成一个随机整数
@ -95,8 +65,8 @@ export default {
drawLine () {
// 基于准备好的dom，初始化echarts实例
// 绘制图表
const xAxisData = this.time.map(item => item.time)
const seriesData = this.time.map(item => item.count)
const xAxisData = this.data.map(item => item.day)
const seriesData = this.data.map(item => item.count)
const option = {
tooltip: {
trigger: 'axis',
@ -139,10 +109,8 @@ export default {
}
},
axisLabel: {
interval: function (index, value) {
// 控制 x 轴上的刻度标签每隔一定数量显示一次
return index % 2 === 0
}, // 强制显示所有刻度
interval: 'auto',
maxInterval: 1,
rotate: 0,
textStyle: {
color: '#333',

21
web/src/views/dashboard/workbench/components/userLogin.vue
View File

@ -44,7 +44,7 @@ export default {
data () {
this.myChart = null
return {
time: [],
data: [],
radio: '7'
}
@ -52,11 +52,10 @@ export default {
methods: {
initGet () {
request({
url: '/api/system/homepage_statistics/'
url: '/api/system/datav/login_user/'
}).then((res) => {
this.time = res.data.sum_days_login_list
console.log(2, this.time)
this.drawLine(this.time)
this.data = res.data.login_user
this.drawLine(this.data)
})
},
// 生成一个随机整数
@ -68,8 +67,8 @@ export default {
drawLine () {
// 基于准备好的dom，初始化echarts实例
// 绘制图表
const xAxisData = this.time.map(item => item.time)
const seriesData = this.time.map(item => item.count)
const xAxisData = this.data.map(item => item.day)
const seriesData = this.data.map(item => item.count)
const option = {
tooltip: {
@ -87,7 +86,7 @@ export default {
},
formatter: params => {
const param = params[0]
return `<div style="padding: 8px;"><div style="color: #333;">${param.name}</div><div style="color: #FFA500;">${param.value} 人</div></div>`
return `<div style="padding: 8px;"><div style="color: #333;">${param.name}</div><div style="color: #FFA500;">${param.value} 次</div></div>`
}
},
legend: {
@ -113,10 +112,8 @@ export default {
}
},
axisLabel: {
interval: function (index, value) {
// 控制 x 轴上的刻度标签每隔一定数量显示一次
return index % 2 === 0
}, // 强制显示所有刻度
interval: 'auto',
maxInterval: 1,
rotate: 0,
textStyle: {
color: '#333',

60
web/src/views/dashboard/workbench/components/usersActive.vue
View File

@ -11,7 +11,7 @@
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{ newName }}</h3>
<div class="enroll-number"><h3>{{ data.today_users || 0 }}</h3>
</div>
<div class="enroll-text">今日注册
</div>
@ -26,7 +26,7 @@
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{ today_login }}</h3>
<div class="enroll-number"><h3>{{ data.today_logins || 0 }}</h3>
</div>
<div class="enroll-text">今日登录
</div>
@ -41,28 +41,13 @@
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{ Three_days_register }}</h3>
<div class="enroll-number"><h3>{{ data.three_days || 0 }}</h3>
</div>
<div class="enroll-text">三日新增
</div>
</div>
</el-col>
</div>
<div style="flex: 1;min-width: 180px;max-width:180px;height: 80px;display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
<i class="el-icon-folder-add"></i>
</div>
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{ Seven_days_register }}</h3>
</div>
<div class="enroll-text">七日新增
</div>
</div>
</el-col>
</div>
<div style="flex: 1;min-width: 180px;max-width:180px;height: 80px; display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
@ -71,13 +56,28 @@
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{ Seven_days_login }}</h3>
<div class="enroll-number"><h3>{{ data.seven_days || 0 }}</h3>
</div>
<div class="enroll-text">七日活跃
</div>
</div>
</el-col>
</div>
<div style="flex: 1;min-width: 180px;max-width:180px;height: 80px;display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
<i class="el-icon-folder-add"></i>
</div>
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{ data.seven_days_active || 0 }}</h3>
</div>
<div class="enroll-text">七日新增
</div>
</div>
</el-col>
</div>
<div style="flex: 1;min-width: 180px;max-width:180px;height: 80px; display: flex;">
<el-col :span="4" class="lightgreen-box">
<div class="underline">
@ -86,7 +86,7 @@
</el-col>
<el-col :span="20" class="orange-box">
<div class="enroll-time">
<div class="enroll-number"><h3>{{ month_login }}</h3>
<div class="enroll-number"><h3>{{ data.monthly_active || 0 }}</h3>
</div>
<div class="enroll-text">月活跃
</div>
@ -131,12 +131,7 @@ export default {
},
data () {
return {
newName: '',
today_login: '',
Three_days_register: '',
Seven_days_register: '',
Seven_days_login: '',
month_login: ''
data: {}
}
},
mounted () {
@ -145,14 +140,9 @@ export default {
methods: {
initGet () {
request({
url: '/api/system/homepage_statistics/'
url: '/api/system/datav/users_active/'
}).then((res) => {
this.newName = res.data.today_register
this.today_login = res.data.today_login
this.Three_days_register = res.data.Three_days_register
this.Seven_days_register = res.data.Seven_days_register
this.Seven_days_login = res.data.Seven_days_login
this.month_login = res.data.month_login
this.data = res.data
})
},
// 生成一个随机整数
@ -172,7 +162,9 @@ export default {
// border-radius: 10px;
color: $color-primary;
}
.enroll-number{
color: $color-primary;
}
.lightgreen-box {
border-bottom: 2px solid;
height: 60px;

8
web/src/views/dashboard/workbench/components/usersTotal.vue
View File

@ -5,7 +5,7 @@
<el-col :span="12">
<div class="card-content">
<div class="card-content-label">用户总数</div>
<div class="card-content-value">{{ sum_register }}</div>
<div class="card-content-value">{{ usersTotal }}</div>
</div>
</el-col>
<el-col :span="6" :offset="6" style="text-align: right;">
@ -50,15 +50,15 @@ export default {
},
data () {
return {
sum_register: ''
usersTotal: ''
}
},
methods: {
initGet () {
request({
url: '/api/system/homepage_statistics/'
url: '/api/system/datav/users_total/'
}).then((res) => {
this.sum_register = res.data.sum_register
this.usersTotal = res.data.users_total
})
},
// 生成一个随机整数