优化控制台数据显示

pull/296/head
Karson 2021-03-27 23:02:33 +08:00
parent ab89d2d506
commit e2772b164b
5 changed files with 137 additions and 150 deletions

View File

@ -2,13 +2,17 @@
namespace app\admin\controller; namespace app\admin\controller;
use app\admin\model\Admin;
use app\admin\model\User;
use app\common\controller\Backend; use app\common\controller\Backend;
use think\Config; use app\common\model\Attachment;
use fast\Date;
use think\Db;
/** /**
* 控制台 * 控制台
* *
* @icon fa fa-dashboard * @icon fa fa-dashboard
* @remark 用于展示当前系统中的统计数据、统计报表及重要实时数据 * @remark 用于展示当前系统中的统计数据、统计报表及重要实时数据
*/ */
class Dashboard extends Backend class Dashboard extends Backend
@ -19,37 +23,47 @@ class Dashboard extends Backend
*/ */
public function index() public function index()
{ {
$seventtime = \fast\Date::unixtime('day', -7); $column = [];
$paylist = $createlist = []; $starttime = Date::unixtime('day', -6);
for ($i = 0; $i < 7; $i++) $endtime = Date::unixtime('day', 0, 'end');
{ $joinlist = Db("user")->where('jointime', 'between time', [$starttime, $endtime])
$day = date("Y-m-d", $seventtime + ($i * 86400)); ->field('jointime, status, COUNT(*) AS nums, DATE_FORMAT(FROM_UNIXTIME(jointime), "%Y-%m-%d") AS join_date')
$createlist[$day] = mt_rand(20, 200); ->group('join_date')
$paylist[$day] = mt_rand(1, mt_rand(1, $createlist[$day])); ->select();
for ($time = $starttime; $time <= $endtime;) {
$column[] = date("Y-m-d", $time);
$time += 86400;
} }
$hooks = config('addons.hooks'); $userlist = array_fill_keys($column, 0);
$uploadmode = isset($hooks['upload_config_init']) && $hooks['upload_config_init'] ? implode(',', $hooks['upload_config_init']) : 'local'; foreach ($joinlist as $k => $v) {
$addonComposerCfg = ROOT_PATH . '/vendor/karsonzhang/fastadmin-addons/composer.json'; $userlist[$v['join_date']] = $v['nums'];
Config::parse($addonComposerCfg, "json", "composer"); }
$config = Config::get("composer");
$addonVersion = isset($config['version']) ? $config['version'] : __('Unknown'); $dbTableList = Db::query("SHOW TABLE STATUS");
$this->view->assign([ $this->view->assign([
'totaluser' => 35200, 'totaluser' => User::count(),
'totalviews' => 219390, 'totaladdon' => count(get_addon_list()),
'totalorder' => 32143, 'totaladmin' => Admin::count(),
'totalorderamount' => 174800, 'totalcategory' => \app\common\model\Category::count(),
'todayuserlogin' => 321, 'todayusersignup' => User::whereTime('jointime', 'today')->count(),
'todayusersignup' => 430, 'todayuserlogin' => User::whereTime('logintime', 'today')->count(),
'todayorder' => 2324, 'sevendau' => User::whereTime('jointime|logintime', '-7 days')->count(),
'unsettleorder' => 132, 'thirtydau' => User::whereTime('jointime|logintime', '-30 days')->count(),
'sevendnu' => '80%', 'threednu' => User::whereTime('jointime', '-3 days')->count(),
'sevendau' => '32%', 'sevendnu' => User::whereTime('jointime', '-7 days')->count(),
'paylist' => $paylist, 'dbtablenums' => count($dbTableList),
'createlist' => $createlist, 'dbsize' => array_sum(array_map(function ($item) {
'addonversion' => $addonVersion, return $item['Data_length'] + $item['Index_length'];
'uploadmode' => $uploadmode }, $dbTableList)),
'attachmentnums' => Attachment::count(),
'attachmentsize' => Attachment::sum('filesize'),
'picturenums' => Attachment::where('mimetype', 'like', 'image/%')->count(),
'picturesize' => Attachment::where('mimetype', 'like', 'image/%')->sum('filesize'),
]); ]);
$this->assignconfig('column', array_keys($userlist));
$this->assignconfig('userdata', array_values($userlist));
return $this->view->fetch(); return $this->view->fetch();
} }

View File

@ -6,34 +6,34 @@ return [
'Type' => '栏目类型', 'Type' => '栏目类型',
'Image' => '图片', 'Image' => '图片',
'Total user' => '总会员数', 'Total user' => '总会员数',
'Total view' => '总访问数', 'Total addon' => '总插件数',
'Total order' => '总订单数', 'Total category' => '总分类数',
'Total order amount' => '总金额', 'Total admin' => '总管理员数',
'Today user signup' => '今日注册', 'Today user signup' => '今日注册',
'Today user login' => '今日登录', 'Today user login' => '今日登录',
'Today order' => '今日订单', 'Today order' => '今日订单',
'Unsettle order' => '未处理订单', 'Unsettle order' => '未处理订单',
'Three dnu' => '三日新增',
'Seven dnu' => '七日新增', 'Seven dnu' => '七日新增',
'Seven dau' => '七日活跃', 'Seven dau' => '七日活跃',
'Thirty dau' => '月活跃',
'Custom zone' => '这里是你的自定义数据', 'Custom zone' => '这里是你的自定义数据',
'Sales' => '成交数', 'Register user' => '注册用户数',
'Orders' => '订单数',
'Real time' => '实时', 'Real time' => '实时',
'Category count' => '分类统计', 'Category count' => '分类统计',
'Category count tips' => '当前分类总记录数', 'Category count tips' => '当前分类总记录数',
'Database count' => '数据库统计',
'Database table nums' => '数据表数量',
'Database size' => '占用空间',
'Attachment count' => '附件统计', 'Attachment count' => '附件统计',
'Attachment nums' => '附件数量',
'Attachment size' => '附件大小',
'Attachment count tips' => '当前上传的附件数量', 'Attachment count tips' => '当前上传的附件数量',
'Article count' => '文章统计', 'Picture count' => '图片统计',
'News count' => '新闻统计', 'Picture nums' => '图片数量',
'Comment count' => '评论次数', 'Picture size' => '图片大小',
'Like count' => '点赞次数',
'Recent news' => '最新新闻',
'Recent discussion' => '最新发贴',
'Server info' => '服务器信息', 'Server info' => '服务器信息',
'PHP version' => 'PHP版本', 'PHP version' => 'PHP版本',
'Fastadmin version' => '主框架版本',
'Fastadmin addon version' => '插件版本',
'Thinkphp version' => 'ThinkPHP版本',
'Sapi name' => '运行方式', 'Sapi name' => '运行方式',
'Debug mode' => '调试模式', 'Debug mode' => '调试模式',
'Software' => '环境信息', 'Software' => '环境信息',

View File

@ -150,7 +150,6 @@
} }
#statistics .panel { #statistics .panel {
min-height: 150px; min-height: 150px;
} }
@ -183,28 +182,28 @@
</div> </div>
<div class="col-sm-3 col-xs-6"> <div class="col-sm-3 col-xs-6">
<div class="sm-st clearfix"> <div class="sm-st clearfix">
<span class="sm-st-icon st-violet"><i class="fa fa-book"></i></span> <span class="sm-st-icon st-violet"><i class="fa fa-magic"></i></span>
<div class="sm-st-info"> <div class="sm-st-info">
<span>{$totalviews}</span> <span>{$totaladdon}</span>
{:__('Total view')} {:__('Total addon')}
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-3 col-xs-6"> <div class="col-sm-3 col-xs-6">
<div class="sm-st clearfix"> <div class="sm-st clearfix">
<span class="sm-st-icon st-blue"><i class="fa fa-shopping-bag"></i></span> <span class="sm-st-icon st-blue"><i class="fa fa-leaf"></i></span>
<div class="sm-st-info"> <div class="sm-st-info">
<span>{$totalorder}</span> <span>{$totalcategory}</span>
{:__('Total order')} {:__('Total category')}
</div> </div>
</div> </div>
</div> </div>
<div class="col-sm-3 col-xs-6"> <div class="col-sm-3 col-xs-6">
<div class="sm-st clearfix"> <div class="sm-st clearfix">
<span class="sm-st-icon st-green"><i class="fa fa-cny"></i></span> <span class="sm-st-icon st-green"><i class="fa fa-user"></i></span>
<div class="sm-st-info"> <div class="sm-st-info">
<span>{$totalorderamount}</span> <span>{$totaladdon}</span>
{:__('Total order amount')} {:__('Total admin')}
</div> </div>
</div> </div>
</div> </div>
@ -229,7 +228,7 @@
</div> </div>
</div> </div>
<div class="col-xs-6 stat-col"> <div class="col-xs-6 stat-col">
<div class="stat-icon"><i class="fa fa-shopping-cart"></i></div> <div class="stat-icon"><i class="fa fa-vcard"></i></div>
<div class="stat"> <div class="stat">
<div class="value"> {$todayuserlogin}</div> <div class="value"> {$todayuserlogin}</div>
<div class="name"> {:__('Today user login')}</div> <div class="name"> {:__('Today user login')}</div>
@ -239,27 +238,17 @@
</div> </div>
</div> </div>
<div class="col-xs-6 stat-col"> <div class="col-xs-6 stat-col">
<div class="stat-icon"><i class="fa fa-line-chart"></i></div> <div class="stat-icon"><i class="fa fa-calendar"></i></div>
<div class="stat"> <div class="stat">
<div class="value"> {$todayorder}</div> <div class="value"> {$threednu}</div>
<div class="name"> {:__('Today order')}</div> <div class="name"> {:__('Three dnu')}</div>
</div> </div>
<div class="progress"> <div class="progress">
<div class="progress-bar progress-bar-success" style="width: 25%"></div> <div class="progress-bar progress-bar-success" style="width: 25%"></div>
</div> </div>
</div> </div>
<div class="col-xs-6 stat-col"> <div class="col-xs-6 stat-col">
<div class="stat-icon"><i class="fa fa-users"></i></div> <div class="stat-icon"><i class="fa fa-calendar-plus-o"></i></div>
<div class="stat">
<div class="value"> {$unsettleorder}</div>
<div class="name"> {:__('Unsettle order')}</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 25%"></div>
</div>
</div>
<div class="col-xs-6 stat-col">
<div class="stat-icon"><i class="fa fa-list-alt"></i></div>
<div class="stat"> <div class="stat">
<div class="value"> {$sevendnu}</div> <div class="value"> {$sevendnu}</div>
<div class="name"> {:__('Seven dnu')}</div> <div class="name"> {:__('Seven dnu')}</div>
@ -268,8 +257,8 @@
<div class="progress-bar progress-bar-success" style="width: 25%"></div> <div class="progress-bar progress-bar-success" style="width: 25%"></div>
</div> </div>
</div> </div>
<div class="col-xs-6 stat-col"> <div class="col-xs-6 stat-col">
<div class="stat-icon"><i class="fa fa-dollar"></i></div> <div class="stat-icon"><i class="fa fa-user-circle"></i></div>
<div class="stat"> <div class="stat">
<div class="value"> {$sevendau}</div> <div class="value"> {$sevendau}</div>
<div class="name"> {:__('Seven dau')}</div> <div class="name"> {:__('Seven dau')}</div>
@ -278,6 +267,16 @@
<div class="progress-bar progress-bar-success" style="width: 25%"></div> <div class="progress-bar progress-bar-success" style="width: 25%"></div>
</div> </div>
</div> </div>
<div class="col-xs-6 stat-col">
<div class="stat-icon"><i class="fa fa-user-circle-o"></i></div>
<div class="stat">
<div class="value"> {$thirtydau}</div>
<div class="name"> {:__('Thirty dau')}</div>
</div>
<div class="progress">
<div class="progress-bar progress-bar-success" style="width: 25%"></div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -296,9 +295,14 @@
<h5>{:__('Category count')}</h5> <h5>{:__('Category count')}</h5>
</div> </div>
<div class="panel-content"> <div class="panel-content">
<h1 class="no-margins">1234</h1> <div class="row">
<div class="stat-percent font-bold text-gray"><i class="fa fa-commenting"></i> 1234</div> <div class="col-md-12">
<small>{:__('Category count tips')}</small> <h1 class="no-margins">{$totalcategory}</h1>
<div class="font-bold"><i class="fa fa-magic"></i>
<small>{:__('Category count tips')}</small>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -308,12 +312,23 @@
<div class="panel-body"> <div class="panel-body">
<div class="ibox-title"> <div class="ibox-title">
<span class="label label-primary pull-right">{:__('Real time')}</span> <span class="label label-primary pull-right">{:__('Real time')}</span>
<h5>{:__('Attachment count')}</h5> <h5>{:__('Database count')}</h5>
</div> </div>
<div class="ibox-content"> <div class="ibox-content">
<h1 class="no-margins">1043</h1> <div class="row">
<div class="stat-percent font-bold text-gray"><i class="fa fa-modx"></i> 2592</div> <div class="col-md-6">
<small>{:__('Attachment count tips')}</small> <h1 class="no-margins">{$dbtablenums}</h1>
<div class="font-bold"><i class="fa fa-database"></i>
<small>{:__('Database table nums')}</small>
</div>
</div>
<div class="col-md-6">
<h1 class="no-margins">{$dbsize|format_bytes=###,'',0}</h1>
<div class="font-bold"><i class="fa fa-filter"></i>
<small>{:__('Database size')}</small>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -324,21 +339,21 @@
<div class="panel-body"> <div class="panel-body">
<div class="ibox-title"> <div class="ibox-title">
<span class="label label-primary pull-right">{:__('Real time')}</span> <span class="label label-primary pull-right">{:__('Real time')}</span>
<h5>{:__('Article count')}</h5> <h5>{:__('Attachment count')}</h5>
</div> </div>
<div class="ibox-content"> <div class="ibox-content">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h1 class="no-margins">1234</h1> <h1 class="no-margins">{$attachmentnums}</h1>
<div class="font-bold"><i class="fa fa-commenting"></i> <div class="font-bold"><i class="fa fa-files-o"></i>
<small>{:__('Comment count')}</small> <small>{:__('Attachment nums')}</small>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h1 class="no-margins">6754</h1> <h1 class="no-margins">{$attachmentsize|format_bytes=###,'',0}</h1>
<div class="font-bold"><i class="fa fa-heart"></i> <div class="font-bold"><i class="fa fa-filter"></i>
<small>{:__('Like count')}</small> <small>{:__('Attachment size')}</small>
</div> </div>
</div> </div>
</div> </div>
@ -351,21 +366,21 @@
<div class="panel-body"> <div class="panel-body">
<div class="ibox-title"> <div class="ibox-title">
<span class="label label-primary pull-right">{:__('Real time')}</span> <span class="label label-primary pull-right">{:__('Real time')}</span>
<h5>{:__('News count')}</h5> <h5>{:__('Picture count')}</h5>
</div> </div>
<div class="ibox-content"> <div class="ibox-content">
<div class="row"> <div class="row">
<div class="col-md-6"> <div class="col-md-6">
<h1 class="no-margins">5302</h1> <h1 class="no-margins">{$picturenums}</h1>
<div class="font-bold"><i class="fa fa-commenting"></i> <div class="font-bold"><i class="fa fa-picture-o"></i>
<small>{:__('Comment count')}</small> <small>{:__('Picture nums')}</small>
</div> </div>
</div> </div>
<div class="col-md-6"> <div class="col-md-6">
<h1 class="no-margins">8205</h1> <h1 class="no-margins">{$picturesize|format_bytes=###,'',0}</h1>
<div class="font-bold"><i class="fa fa-user"></i> <div class="font-bold"><i class="fa fa-filter"></i>
<small>{:__('Like count')}</small> <small>{:__('Picture size')}</small>
</div> </div>
</div> </div>
</div> </div>
@ -385,12 +400,3 @@
</div> </div>
</div> </div>
</div> </div>
<!--@formatter:off-->
<script>
var Orderdata = {
column: {:json_encode(array_keys($paylist))},
paydata: {:json_encode(array_values($paylist))},
createdata: {:json_encode(array_values($createlist))},
};
</script>
<!--@formatter:on-->

View File

@ -33,15 +33,16 @@ if (!function_exists('format_bytes')) {
* 将字节转换为可读文本 * 将字节转换为可读文本
* @param int $size 大小 * @param int $size 大小
* @param string $delimiter 分隔符 * @param string $delimiter 分隔符
* @param int $precision 小数位数
* @return string * @return string
*/ */
function format_bytes($size, $delimiter = '') function format_bytes($size, $delimiter = '', $precision = 2)
{ {
$units = array('B', 'KB', 'MB', 'GB', 'TB', 'PB'); $units = array('B', 'KB', 'MB', 'GB', 'TB', 'PB');
for ($i = 0; $size >= 1024 && $i < 6; $i++) { for ($i = 0; $size >= 1024 && $i < 6; $i++) {
$size /= 1024; $size /= 1024;
} }
return round($size, 2) . $delimiter . $units[$i]; return round($size, $precision) . $delimiter . $units[$i];
} }
} }

View File

@ -11,11 +11,19 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
text: '', text: '',
subtext: '' subtext: ''
}, },
color: [
"#18d1b1",
"#3fb1e3",
"#626c91",
"#a0a7e6",
"#c4ebad",
"#96dee8"
],
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis'
}, },
legend: { legend: {
data: [__('Sales'), __('Orders')] data: [__('Register user')]
}, },
toolbox: { toolbox: {
show: false, show: false,
@ -27,7 +35,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
xAxis: { xAxis: {
type: 'category', type: 'category',
boundaryGap: false, boundaryGap: false,
data: Orderdata.column data: Config.column
}, },
yAxis: {}, yAxis: {},
grid: [{ grid: [{
@ -37,7 +45,7 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
bottom: 30 bottom: 30
}], }],
series: [{ series: [{
name: __('Sales'), name: __('Register user'),
type: 'line', type: 'line',
smooth: true, smooth: true,
areaStyle: { areaStyle: {
@ -48,55 +56,13 @@ define(['jquery', 'bootstrap', 'backend', 'addtabs', 'table', 'echarts', 'echart
width: 1.5 width: 1.5
} }
}, },
data: Orderdata.paydata data: Config.userdata
}, }]
{
name: __('Orders'),
type: 'line',
smooth: true,
areaStyle: {
normal: {}
},
lineStyle: {
normal: {
width: 1.5
}
},
data: Orderdata.createdata
}]
}; };
// 使用刚指定的配置项和数据显示图表。 // 使用刚指定的配置项和数据显示图表。
myChart.setOption(option); myChart.setOption(option);
//动态添加数据可以通过Ajax获取数据然后填充
setInterval(function () {
Orderdata.column.push((new Date()).toLocaleTimeString().replace(/^\D*/, ''));
var amount = Math.floor(Math.random() * 200) + 20;
Orderdata.createdata.push(amount);
Orderdata.paydata.push(Math.floor(Math.random() * amount) + 1);
//按自己需求可以取消这个限制
if (Orderdata.column.length >= 20) {
//移除最开始的一条数据
Orderdata.column.shift();
Orderdata.paydata.shift();
Orderdata.createdata.shift();
}
myChart.setOption({
xAxis: {
data: Orderdata.column
},
series: [{
name: __('Sales'),
data: Orderdata.paydata
},
{
name: __('Orders'),
data: Orderdata.createdata
}]
});
}, 2000);
$(window).resize(function () { $(window).resize(function () {
myChart.resize(); myChart.resize();
}); });