edab0910 by Zelig

数据统计

1 parent 07fc7fc0
......@@ -2,14 +2,11 @@
defined('BASEPATH') OR exit('No direct script access allowed');
class Data extends CI_Controller {
/**
* 控制台默认页面
*/
public function index()
{
$this->load->view('data/index');
public function user () {
$this->load->view('data/user');
}
public function loan() {
$this->load->view('data/loan');
}
}
......
......@@ -64,4 +64,39 @@ class Loan extends CI_Controller {
{
$this->load->view('/loan/资料移交');
}
public function data($format = 'days')
{
$data = [];
switch ($format) {
case 'days':
$data['labels'] = [31, 1, 2, 3, 4, 5, 6];
$data['datasets'] = [
['label' => '放款量趋势', 'data' => [30, 50, 30, 60, 32, 54, 43]],
['label' => '放款额趋势', 'data' => [34, 53, 34, 30, 34, 64, 23]]
];
break;
case 'weeks':
$data['labels'] = [7, 1, 2, 3, 4, 5, 6];
$data['datasets'] = [
['label' => '放款量趋势', 'data' => [30, 50, 30, 60, 32, 54, 43]],
['label' => '放款额趋势', 'data' => [34, 53, 34, 30, 34, 64, 23]]
];
case 'months':
$data['labels'] = [7, 1, 2, 3, 4, 5, 6];
$data['datasets'] = [
['label' => '放款量趋势', 'data' => [30, 50, 30, 60, 32, 54, 43]],
['label' => '放款额趋势', 'data' => [34, 53, 34, 30, 34, 64, 23]]
];
case 'years':
$data['labels'] = [7, 1, 2, 3, 4, 5, 6];
$data['datasets'] = [
['label' => '放款量趋势', 'data' => [30, 50, 30, 60, 32, 54, 43]],
['label' => '放款额趋势', 'data' => [34, 53, 34, 30, 34, 64, 23]]
];
break;
}
$this->output->set_content_type('application/json')->set_output(json_encode($data));
}
}
......
......@@ -34,4 +34,35 @@ class User extends CI_Controller {
break;
}
}
public function data($format = 'days')
{
$data = [];
switch ($format) {
case 'days':
$data['labels'] = [31, 1, 2, 3, 4, 5, 6];
$data['datasets'] = [
['label' => '用户量趋势图', 'data' => [30, 50, 30, 60, 32, 54, 43]]
];
break;
case 'weeks':
$data['labels'] = [7, 1, 2, 3, 4, 5, 6];
$data['datasets'] = [
['label' => '用户量趋势图', 'data' => [30, 50, 30, 60, 32, 54, 43]]
];
case 'months':
$data['labels'] = [7, 1, 2, 3, 4, 5, 6];
$data['datasets'] = [
['label' => '用户量趋势图', 'data' => [30, 50, 30, 60, 32, 54, 43]]
];
case 'years':
$data['labels'] = [7, 1, 2, 3, 4, 5, 6];
$data['datasets'] = [
['label' => '用户量趋势图', 'data' => [30, 50, 30, 60, 32, 54, 43]]
];
break;
}
$this->output->set_content_type('application/json')->set_output(json_encode($data));
}
}
......
......@@ -8,6 +8,8 @@
<script type="text/javascript" src="/resource/lib/My97DatePicker/4.8/WdatePicker.js"></script>
<script type="text/javascript" src="/resource/lib/webuploader/0.1.5/webuploader.min.js"></script>
<script type="text/javascript" src="/resource/lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
<script src="https://cdn.bootcss.com/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script type="text/javascript" src="/resource/chart.js"></script>
<script src="https://cdn.bootcss.com/holder/2.9.4/holder.min.js"></script>
<script type="text/javascript" src="/resource/upload.js"></script>
<script>
......
<?php $this->load->view('common/header'); ?>
<body>
<div class="page-container">
<div class="panel panel-default">
<div class="panel-header">
数据趋势
<div class="r">
<select class="select" size="1" id="format">
<option value="days"></option>
<option value="weeks"></option>
<option value="months"></option>
<option value="years"></option>
</select>
</div>
</div>
<div class="panel-body">
<div class="row cl pb-20">
<div class="col-md-2 col-sm-4 col-xs-6 card">
<span class="count_top c-999"><i class="Hui-iconfont">&#xe66b;</i> 应收总额(元)</span>
<div class="count">700.00</div>
<span class="count_bottom c-999"><i class="green"><i class="Hui-iconfont">&#xe6d6;</i>4% </i></span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 card">
<span class="count_top c-999"><i class="Hui-iconfont">&#xe66c;</i> 放款总额(元)</span>
<div class="count">700.00</div>
<span class="count_bottom c-999"><i class="red"><i class="Hui-iconfont">&#xe6d5;</i>12% </i></span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 card">
<span class="count_top c-999"><i class="Hui-iconfont">&#xe6a7;</i> 已收总额(元)</span>
<div class="count">700.00</div>
<span class="count_bottom c-999"><i class="red"><i class="Hui-iconfont">&#xe6d5;</i>12% </i></span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 card">
<span class="count_top c-999"><i class="Hui-iconfont">&#xe6a6;</i> 坏账总额(元)</span>
<div class="count">700.00</div>
<span class="count_bottom c-999"><i class="red"><i class="Hui-iconfont">&#xe6d5;</i>12% </i></span>
</div>
<div class="col-md-2 col-sm-4 col-xs-6 card">
<span class="count_top c-999"><i class="Hui-iconfont">&#xe639;</i> 放款量概览</span>
<div class="count">700.00</div>
</div>
</div>
<div>
<canvas id="chart" url="<?=site_url('loan/data/')?>"></canvas>
<div>
</div>
</div>
</div>
<?php $this->load->view('common/footer'); ?>
<script>
chart();
</script>
</body>
<html>
<aside class="Hui-aside">
<div class="menu_dropdown bk_2">
<ul>
<li><a data-href="<?=site_url('/data/user')?>" data-title="客户统计报表" href="javascript:void(0)"><i class="Hui-iconfont">&#xe60d;</i>&nbsp;客户统计报表</a></li>
<li><a data-href="<?=site_url('/data/loan')?>" data-title="贷款统计报表" href="javascript:void(0)"><i class="Hui-iconfont">&#xe61a;</i>&nbsp;贷款统计报表</a></li>
</ul>
</div>
</aside>
<?php $this->load->view('common/header'); ?>
<body>
<div class="page-container">
<div class="panel panel-default">
<div class="panel-header">
数据趋势
<div class="r">
<select class="select" size="1" id="format">
<option value="days"></option>
<option value="weeks"></option>
<option value="months"></option>
<option value="years"></option>
</select>
</div>
</div>
<div class="panel-body">
<div class="row cl pb-20">
<div class="col-md-2 col-sm-4 col-xs-6 card">
<span class="count_top c-999"><i class="Hui-iconfont">&#xe60d;</i> 注册预览</span>
<div class="count">2500</div>
</div>
</div>
<div>
<canvas id="chart" url="<?=site_url('user/data/')?>"></canvas>
<div>
</div>
</div>
</div>
<?php $this->load->view('common/footer'); ?>
<script>
chart();
</script>
</body>
<html>
......@@ -5,96 +5,9 @@
<body>
<?php
$this->load->view('common/top');
$this->load->view('data/menu');
?>
<aside class="Hui-aside">
<div class="menu_dropdown bk_2">
<dl id="menu-article">
<dt><i class="Hui-iconfont">&#xe616;</i> 资讯管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
<dd>
<ul>
<li><a data-href="article-list.html" data-title="资讯管理" href="javascript:void(0)">资讯管理</a></li>
</ul>
</dd>
</dl>
<dl id="menu-picture">
<dt><i class="Hui-iconfont">&#xe613;</i> 图片管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
<dd>
<ul>
<li><a data-href="picture-list.html" data-title="图片管理" href="javascript:void(0)">图片管理</a></li>
</ul>
</dd>
</dl>
<dl id="menu-product">
<dt><i class="Hui-iconfont">&#xe620;</i> 产品管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
<dd>
<ul>
<li><a data-href="product-brand.html" data-title="品牌管理" href="javascript:void(0)">品牌管理</a></li>
<li><a data-href="product-category.html" data-title="分类管理" href="javascript:void(0)">分类管理</a></li>
<li><a data-href="product-list.html" data-title="产品管理" href="javascript:void(0)">产品管理</a></li>
</ul>
</dd>
</dl>
<dl id="menu-comments">
<dt><i class="Hui-iconfont">&#xe622;</i> 评论管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
<dd>
<ul>
<li><a data-href="http://h-ui.duoshuo.com/admin/" data-title="评论列表" href="javascript:;">评论列表</a></li>
<li><a data-href="feedback-list.html" data-title="意见反馈" href="javascript:void(0)">意见反馈</a></li>
</ul>
</dd>
</dl>
<dl id="menu-member">
<dt><i class="Hui-iconfont">&#xe60d;</i> 会员管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
<dd>
<ul>
<li><a data-href="member-list.html" data-title="会员列表" href="javascript:;">会员列表</a></li>
<li><a data-href="member-del.html" data-title="删除的会员" href="javascript:;">删除的会员</a></li>
<li><a data-href="member-level.html" data-title="等级管理" href="javascript:;">等级管理</a></li>
<li><a data-href="member-scoreoperation.html" data-title="积分管理" href="javascript:;">积分管理</a></li>
<li><a data-href="member-record-browse.html" data-title="浏览记录" href="javascript:void(0)">浏览记录</a></li>
<li><a data-href="member-record-download.html" data-title="下载记录" href="javascript:void(0)">下载记录</a></li>
<li><a data-href="member-record-share.html" data-title="分享记录" href="javascript:void(0)">分享记录</a></li>
</ul>
</dd>
</dl>
<dl id="menu-admin">
<dt><i class="Hui-iconfont">&#xe62d;</i> 管理员管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
<dd>
<ul>
<li><a data-href="admin-role.html" data-title="角色管理" href="javascript:void(0)">角色管理</a></li>
<li><a data-href="admin-permission.html" data-title="权限管理" href="javascript:void(0)">权限管理</a></li>
<li><a data-href="admin-list.html" data-title="管理员列表" href="javascript:void(0)">管理员列表</a></li>
</ul>
</dd>
</dl>
<dl id="menu-tongji">
<dt><i class="Hui-iconfont">&#xe61a;</i> 系统统计<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
<dd>
<ul>
<li><a data-href="charts-1.html" data-title="折线图" href="javascript:void(0)">折线图</a></li>
<li><a data-href="charts-2.html" data-title="时间轴折线图" href="javascript:void(0)">时间轴折线图</a></li>
<li><a data-href="charts-3.html" data-title="区域图" href="javascript:void(0)">区域图</a></li>
<li><a data-href="charts-4.html" data-title="柱状图" href="javascript:void(0)">柱状图</a></li>
<li><a data-href="charts-5.html" data-title="饼状图" href="javascript:void(0)">饼状图</a></li>
<li><a data-href="charts-6.html" data-title="3D柱状图" href="javascript:void(0)">3D柱状图</a></li>
<li><a data-href="charts-7.html" data-title="3D饼状图" href="javascript:void(0)">3D饼状图</a></li>
</ul>
</dd>
</dl>
<dl id="menu-system">
<dt><i class="Hui-iconfont">&#xe62e;</i> 系统管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe6d5;</i></dt>
<dd>
<ul>
<li><a data-href="system-base.html" data-title="系统设置" href="javascript:void(0)">系统设置</a></li>
<li><a data-href="system-category.html" data-title="栏目管理" href="javascript:void(0)">栏目管理</a></li>
<li><a data-href="system-data.html" data-title="数据字典" href="javascript:void(0)">数据字典</a></li>
<li><a data-href="system-shielding.html" data-title="屏蔽词" href="javascript:void(0)">屏蔽词</a></li>
<li><a data-href="system-log.html" data-title="系统日志" href="javascript:void(0)">系统日志</a></li>
</ul>
</dd>
</dl>
</div>
</aside>
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a></div>
<section class="Hui-article-box">
<div id="Hui-tabNav" class="Hui-tabNav hidden-xs">
......@@ -193,4 +106,4 @@ $this->load->view('common/footer');
</script>
</body>
</html>
\ No newline at end of file
</html>
......
var chartColors = {
grey: 'rgb(201, 203, 207)',
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
purple: 'rgb(153, 102, 255)',
blue: 'rgb(54, 162, 235)'
};
var config = {
type: 'line',
data: {},
options: {
tooltips: {
mode: 'index',
intersect: false,
},
hover: {
mode: 'nearest',
intersect: true
},
scales: {
xAxes: [{
display: true,
scaleLabel: {
display: true,
labelString: $('#format').val()
}
}],
yAxes: [{
display: true,
ticks: {
min: 0
}
}]
}
}
}
function load () {
var url = $('#chart').attr('url');
$.ajax({
url: url + $('#format').val()
}).done(function (json) {
var colorNames = Object.keys(chartColors);
for (var i = 0; i < json.datasets.length; i++) {
var colorName = colorNames.pop();
var newColor = chartColors[colorName];
json.datasets[i].backgroundColor = newColor;
json.datasets[i].borderColor = newColor;
json.datasets[i].fill = false;
config.data = json;
}
config.options.scales.xAxes[0].scaleLabel.labelString = $('#format').val();
chart.update();
})
}
function chart () {
var can = $('#chart');
var ctx = can.get(0).getContext("2d");
var container = can.parent().parent(); // get width from proper parent
var $container = jQuery(container);
can.attr('width', $container.width()); //max width
can.attr('height', $container.height()); //max height
window.chart = new Chart(ctx, config);
load();
}
$('#format').on('change', function () {
load();
})
......@@ -279,3 +279,37 @@ label.radio > input:checked + img{
.pmb p {
margin-bottom: 0;
}
.row .card:first-child:before {
border-left: 0;
}
.row .card:before {
content: "";
position: absolute;
left: 0;
height: 65px;
border-left: 2px solid #ADB2B5;
margin-top: 10px;
}
.card span {
font-size: 13px;
}
.card .count {
font-size: 40px;
line-height: 47px;
font-weight: 600;
}
.card .count_bottom i {
width: 12px;
}
.green {
color: #1ABB9C;
}
.red {
color: #E74C3C;
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!