<!doctype html>
|
<html class="x-admin-sm">
|
<head>
|
<meta charset="UTF-8">
|
<title>板栗快省</title>
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
<meta name="viewport"
|
content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
|
<meta http-equiv="Cache-Control" content="no-siteapp"/>
|
|
<link rel="stylesheet" href="css/font.css">
|
<link rel="stylesheet" href="css/xadmin.css">
|
<link rel="stylesheet" href="css/theme3049.min.css">
|
|
<!-- <link rel="stylesheet" href="./css/theme5.css"> -->
|
|
<script type="text/javascript" src="js/xadmin.js"></script>
|
<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
|
<script src="js/http.js" type="text/javascript" charset="utf-8"></script>
|
<script src="lib/layui/layui.js" charset="utf-8"></script>
|
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
|
<!--[if lt IE 9]>
|
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
|
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
|
<![endif]-->
|
<script>
|
// 是否开启刷新记忆tab功能
|
// var is_remember = false;
|
</script>
|
|
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.6.0/chart.min.js"></script>
|
|
|
<style>
|
.layui-elem-quote {
|
color: #666;
|
font-size: 16px;
|
font-weight: bold;
|
border-left: none;
|
}
|
|
.time-psan {
|
height: 25px;
|
display: flex;
|
margin: 20px 0;
|
}
|
|
.time-psan div {
|
width: 50px;
|
height: 100%;
|
text-align: center;
|
line-height:25px;
|
font-size: 12px;
|
background: #F5F5F5;
|
color: #666;
|
cursor: pointer;
|
}
|
|
.time-psan .active {
|
background: #DDDDDD;
|
}
|
|
.time-psan :first-child {
|
border-top-left-radius: 8px;
|
border-bottom-left-radius: 8px;
|
}
|
|
.time-psan :last-child {
|
border-top-right-radius: 8px;
|
border-bottom-right-radius: 8px;
|
}
|
|
</style>
|
|
|
</head>
|
|
<body>
|
<div class="layui-card">
|
<div class="layui-card-body">
|
<blockquote class="layui-elem-quote">
|
新增用户统计
|
</blockquote>
|
<form class="layui-form layui-col-space5">
|
<div class="layui-inline layui-show-xs-block">
|
<input type="text" name="date" lay-verify="" placeholder="" autocomplete="off"
|
class="layui-input">
|
</div>
|
<div class="layui-inline layui-show-xs-block">
|
<button id="search" class="layui-btn" lay-submit="" lay-filter="search">
|
<i class="layui-icon"></i></button>
|
</div>
|
</form>
|
|
<div class="time-psan">
|
<div key="hour">小时</div>
|
<div key="day" class="active">天</div>
|
<div key="month">月</div>
|
</div>
|
<canvas id="myChart" width="100%" height="25"></canvas>
|
</div>
|
</div>
|
|
</body>
|
|
|
<script>
|
$(function () {
|
|
//时间间隔点击事件
|
$(".time-psan div").click(function () {
|
if (!$(this).hasClass("active")) {
|
$(".time-psan div").removeClass("active");
|
$(this).addClass("active");
|
$("#search").click();
|
}
|
});
|
|
|
layui.use(['laydate', 'form'], function () {
|
var laydate = layui.laydate,
|
form = layui.form;
|
//渲染日期输入框
|
var d = new Date();
|
var nowDay = d.format('yyyy-MM-dd');
|
laydate.render({
|
elem: 'input[name=date]' //指定元素
|
, type: 'date'
|
, trigger: 'click'
|
//,lang: 'en'
|
//,theme: 'grid'
|
, range: true //开启日期范围，默认使用“-”分割
|
// ,min: '2020-01-01'
|
//,max: '2021-5-9'
|
//,value: '2021-05-09 12:06:09'
|
, value: nowDay + " - " + nowDay
|
, done: function (value, date, endDate) {
|
console.log(value, date, endDate);
|
requestData(value);
|
}
|
, change: function (value, date, endDate) {
|
}
|
});
|
//搜索条件
|
form.on('submit(search)', function (data) {
|
requestData(data.field.date);
|
return false;
|
});
|
|
$("#search").click();
|
});
|
|
|
function requestData(value) {
|
var date = value.split(" - ");
|
ksapp.post("/admin/api/user/statisticRegisterUser", {
|
startTime: new Date(date[0]).getTime()-1000*60*60*8,
|
endTime: new Date(date[1]).getTime()-1000*60*60*8+1000*60*60*24-1,
|
span: $(".time-psan .active").attr("key")
|
}, function (res) {
|
if (res.code == 0) {
|
var labels = new Array();
|
var values = new Array();
|
for (var i = 0; i < res.data.list.length; i++) {
|
labels.push(res.data.list[i].time);
|
values.push(res.data.list[i].number);
|
}
|
draw(labels, values);
|
} else {
|
layer.msg(res.msg);
|
}
|
}, function (res) {
|
});
|
|
}
|
});
|
</script>
|
|
<script>
|
var ctx = document.getElementById("myChart").getContext('2d');
|
var myChar = null;
|
|
function draw(labels, data) {
|
if (myChar == null) {
|
myChar = new Chart(ctx, {
|
type: 'line',
|
data: {
|
labels: labels,
|
datasets: [{
|
label: '新增用户数',
|
data: data,
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
borderColor: 'rgba(54, 162, 235, 1)',
|
borderWidth: 3
|
}]
|
},
|
options: {
|
scales: {
|
yAxes: [{
|
ticks: {
|
beginAtZero: true
|
}
|
}]
|
}
|
}
|
});
|
} else {
|
myChar.data.labels = labels;
|
myChar.data.datasets[0].data = data;
|
myChar.update();
|
}
|
}
|
</script>
|
|
|
<script>
|
|
Date.prototype.format = function (format) {
|
var o = {
|
"M+": this.getMonth() + 1, //month
|
"d+": this.getDate(), //day
|
"h+": this.getHours(), //hour
|
"m+": this.getMinutes(), //minute
|
"s+": this.getSeconds(), //second
|
"q+": Math.floor((this.getMonth() + 3) / 3), //quarter
|
"S": this.getMilliseconds() //millisecond
|
}
|
if (/(y+)/.test(format)) format = format.replace(RegExp.$1,
|
(this.getFullYear() + "").substr(4 - RegExp.$1.length));
|
for (var k in o) if (new RegExp("(" + k + ")").test(format))
|
format = format.replace(RegExp.$1,
|
RegExp.$1.length == 1 ? o[k] :
|
("00" + o[k]).substr(("" + o[k]).length));
|
return format;
|
}
|
|
</script>
|
</html>
|
