<!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 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>
|
<script type="text/javascript" src="js/xadmin.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-span {
|
height: 25px;
|
display: flex;
|
margin: 20px 0;
|
}
|
|
.time-span div {
|
width: 50px;
|
height: 100%;
|
text-align: center;
|
line-height: 25px;
|
font-size: 12px;
|
background: #F5F5F5;
|
color: #666;
|
cursor: pointer;
|
}
|
|
.time-span .active {
|
background: #DDDDDD;
|
}
|
|
.time-span :first-child {
|
border-top-left-radius: 8px;
|
border-bottom-left-radius: 8px;
|
}
|
|
.time-span :last-child {
|
border-top-right-radius: 8px;
|
border-bottom-right-radius: 8px;
|
}
|
|
</style>
|
|
|
</head>
|
|
<body>
|
|
<div id="content">
|
<div class="layui-card" v-for="item,index in charts" :id="item.type" :data-index="index">
|
<div class="layui-card-body">
|
<blockquote class="layui-elem-quote">
|
{{item.title}}
|
</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">
|
<!-- :lay-filter="'search-'+item.type" -->
|
<button class="search" class="layui-btn" lay-submit="" :lay-filter="'search-'+item.type">
|
<i class="layui-icon"></i></button>
|
</div>
|
|
<input type="hidden" :value="index" name="index">
|
</form>
|
|
<div class="time-span">
|
<div data-key="hour" @click="changeSpan(index,$event)">小时</div>
|
<div data-key="day" class="active" @click="changeSpan(index,$event)">天</div>
|
<div data-key="month" @click="changeSpan(index,$event)">月</div>
|
</div>
|
<canvas :id="'chart-'+item.type" width="100%" height="25"></canvas>
|
</div>
|
</div>
|
</div>
|
</body>
|
|
|
<script>
|
$(function () {
|
var app = new Vue({
|
el: "#content",
|
data: {
|
charts: [
|
{
|
type: 'user',
|
url: '/admin/api/user/statisticRegisterUser',
|
title: '新增用户统计'
|
}
|
],
|
chartsCanvas: {}
|
},
|
mounted: function () {
|
setTimeout(function () {
|
app.init();
|
}, 10);
|
|
},
|
methods: {
|
init: function () {
|
var $this = this;
|
layui.use(['laydate', 'form'], function () {
|
var laydate = layui.laydate,
|
form = layui.form;
|
for (var i = 0; i < $this.charts.length; i++) {
|
var chartConfig = $this.charts[i];
|
console.log("初始化 ", chartConfig.type, i);
|
//渲染日期输入框
|
var d = new Date();
|
var nowDay = d.format('yyyy-MM-dd');
|
laydate.render({
|
elem: "#" + chartConfig.type + " input[name=date]" //指定元素
|
,
|
index: i,
|
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: new Date(d.getTime() - 1000 * 60 * 60 * 24 * 7).format('yyyy-MM-dd') + " - " + nowDay
|
,
|
done: function (value, date, endDate) {
|
console.log(value, date, endDate, this.index);
|
|
$("#" + $this.charts[this.index].type + " .search").click();
|
},
|
change: function (value, date, endDate) {
|
}
|
});
|
//搜索条件
|
form.on("submit(search-" + chartConfig.type + ")", function (data) {
|
var index = parseInt(data.field.index);
|
var span = $("#" + $this.charts[index].type + " .time-span .active").attr("data-key");
|
var config = $this.charts[index];
|
app.requestData(config.url, data.field.date, span, function (labels, values) {
|
$this.draw(labels, values, $this.getLineChart(config));
|
});
|
return false;
|
});
|
|
//查询
|
$("#" + chartConfig.type + " .search").click();
|
}
|
|
// $("#search-user").click();
|
});
|
},
|
requestData: function (url, dateValue, span, callback) {
|
var date = dateValue.split(" - ");
|
//"/admin/api/user/statisticRegisterUser"
|
ksapp.post(url, {
|
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: span
|
}, 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);
|
}
|
callback(labels, values);
|
} else {
|
layer.msg(res.msg);
|
}
|
}, function (res) {
|
});
|
},
|
getLineChart: function (config) {
|
if (this.chartsCanvas[config.type] == null) {
|
var ctx = document.getElementById("chart-" + config.type).getContext('2d');
|
this.chartsCanvas[config.type] = new Chart(ctx, {
|
type: 'line',
|
data: {
|
labels: [],
|
datasets: [{
|
label: config.title,
|
data: [],
|
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
borderColor: 'rgba(54, 162, 235, 1)',
|
borderWidth: 3
|
}]
|
},
|
options: {
|
scales: {
|
yAxes: [{
|
ticks: {
|
beginAtZero: true
|
}
|
}]
|
}
|
}
|
});
|
}
|
return this.chartsCanvas[config.type];
|
},
|
draw: function (labels, data, chart) {
|
console.log("绘图", chart);
|
chart.data.labels = labels;
|
chart.data.datasets[0].data = data;
|
chart.update();
|
},
|
changeSpan: function (index, event) {
|
var el = event.currentTarget;
|
if (!$(el).hasClass("active")) {
|
$(el).parent().find("div").removeClass("active");
|
$(el).addClass("active");
|
console.log("点击：" + ("#" + this.charts[index].type + " .search"));
|
$("#" + this.charts[index].type + " .search").click();
|
}
|
}
|
}
|
});
|
|
});
|
</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>
|
