You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
578 lines
21 KiB
578 lines
21 KiB
<!DOCTYPE html>
|
|
<html class="x-admin-sm">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>数据总览</title>
|
|
<meta name="renderer" content="webkit">
|
|
<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"/>
|
|
<link rel="stylesheet" href="/css/font.css">
|
|
<link rel="stylesheet" href="/css/xadmin.css">
|
|
<script src="/lib/layui/layui.js" charset="utf-8"></script>
|
|
<script type="text/javascript" src="/js/xadmin.js"></script>
|
|
<script type="text/javascript" src="/js/echarts.min.js"></script>
|
|
<script src="/js/china.js"></script>
|
|
<script type="text/javascript" src="/js/jquery.min.js"></script>
|
|
<script type="text/javascript" src="/js/countUp.min.js"></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]-->
|
|
<style>
|
|
/*欢迎文字*/
|
|
.layui-elem-quote:hover {
|
|
background: #b9c8ff;
|
|
}
|
|
|
|
/*卡片样式*/
|
|
.layui-card-body li:hover {
|
|
background: #ffb5b7;
|
|
}
|
|
|
|
.layui-card-body li a:hover {
|
|
background: #9cecff;
|
|
}
|
|
|
|
.layui-card-body li:hover h3 {
|
|
font-size: 16px;
|
|
color: #911215;
|
|
}
|
|
|
|
.layui-card-body li:hover cite {
|
|
font-size: 30px;
|
|
color: #3d933a;
|
|
}
|
|
|
|
/*系统信息*/
|
|
.layui-table tbody tr th {
|
|
width: 30%
|
|
}
|
|
|
|
.layui-table tbody tr:hover {
|
|
background-color: #ddded9;
|
|
}
|
|
|
|
.layui-table tbody tr:hover th {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.layui-table tbody tr:hover td {
|
|
font-size: 18px;
|
|
/*letter-spacing: 3px;*/
|
|
}
|
|
/*开发团队*/
|
|
.team tbody tr:hover {
|
|
background-color: #d1d1ff;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="layui-fluid">
|
|
<div class="layui-row layui-col-space30">
|
|
<div class="layui-col-md12" style="margin-top: 10px">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header"
|
|
style="background-image: linear-gradient(#ffedcc , #ffffff);">
|
|
静坐当思己过，闲谈莫论人非。
|
|
</div>
|
|
<div class="layui-card-body" style="background-image: linear-gradient(#ffffff , #ffedcc);">
|
|
<blockquote class="layui-elem-quote layui-anim layui-anim-scale" style="font-size: 20px;background-color: rgba(255,230,179,0.89)">
|
|
当前时间：<span id="time" style="font-size: 20px;font-family: 方正姚体;"></span>
|
|
</blockquote>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header"
|
|
style="background-image: linear-gradient(#86e4df , #ffffff);">数据统计
|
|
</div>
|
|
<div class="layui-card-body" style="background-image: linear-gradient(#ffffff , #86e4df); min-height: 85px">
|
|
<ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
|
|
<li class="layui-col-xs6 layui-col-sm3 layui-col-md3 ">
|
|
<a class="x-admin-backlog-body">
|
|
<h3>管理员人数</h3>
|
|
<p>
|
|
<cite id="card0" class="counter">0</cite></p>
|
|
</a>
|
|
</li>
|
|
<li class="layui-col-xs6 layui-col-sm3 layui-col-md3 ">
|
|
<a class="x-admin-backlog-body">
|
|
<h3>用户人数</h3>
|
|
<p>
|
|
<cite id="card1" class="counter">0</cite></p>
|
|
</a>
|
|
</li>
|
|
<li class="layui-col-xs6 layui-col-sm3 layui-col-md3 ">
|
|
<a class="x-admin-backlog-body">
|
|
<h3>用户总访问次数</h3>
|
|
<p>
|
|
<cite id="card2" class="counter">0</cite></p>
|
|
</a>
|
|
</li>
|
|
<li class="layui-col-xs6 layui-col-sm3 layui-col-md3 ">
|
|
<a class="x-admin-backlog-body">
|
|
<h3>总设备数</h3>
|
|
<p>
|
|
<cite id="card3" class="counter">0</cite></p>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-row layui-col-space10">
|
|
<div class="layui-col-sm12 layui-col-lg6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header"
|
|
style="background-image: linear-gradient( #98d9f3 , #ffffff);">设备地域分布
|
|
</div>
|
|
<div class="layui-card-body" style="min-height:470px;">
|
|
<div id="main1" class="layui-col-sm12" style="height:470px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm12 layui-col-lg6">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="background-image: linear-gradient(#f4c5c1 , #ffffff);">设备数量比重</div>
|
|
<div class="layui-card-body" style="min-height: 470px;">
|
|
<div id="main2" class="layui-col-sm12" style="height: 470px;"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-sm12 layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="background-image: linear-gradient(#daffdb , #ffffff);">近期单日新增用户变化</div>
|
|
<div class="layui-card-body" style="min-height: 270px;">
|
|
<div id="main3" class="layui-col-sm12" style="height: 270px;"></div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card">
|
|
<div class="layui-card-header" style="background-image: linear-gradient(#ddded9 , #ffffff);">系统信息</div>
|
|
<div class="layui-card-body" style="background-image: linear-gradient(#ffffff , #ddded9);">
|
|
<table class="layui-table">
|
|
<tbody>
|
|
<tr>
|
|
<th>系统版本</th>
|
|
<td>1.2.0内测版</td>
|
|
</tr>
|
|
<tr>
|
|
<th>服务器地址</th>
|
|
<td>graduation.zengjianqi.com</td>
|
|
</tr>
|
|
<tr>
|
|
<th>服务器环境</th>
|
|
<td>LAMP</td>
|
|
</tr>
|
|
<tr>
|
|
<th>运行环境</th>
|
|
<td>Linux/CentOS-7.3</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Apache版本</th>
|
|
<td>2.4.41</td>
|
|
</tr>
|
|
<tr>
|
|
<th>MySQL版本</th>
|
|
<td>5.6.44</td>
|
|
</tr>
|
|
<tr>
|
|
<th>PHP版本</th>
|
|
<td>7.2</td>
|
|
</tr>
|
|
<tr>
|
|
<th>ThinkPHP版本</th>
|
|
<td>5.0</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Layui版本</th>
|
|
<td>2.5.6</td>
|
|
</tr>
|
|
<tr>
|
|
<th>X-admin版本</th>
|
|
<td>2.2/Deepin modified version by ZJQ</td>
|
|
</tr>
|
|
<tr>
|
|
<th>ECharts版本</th>
|
|
<td>4.6.0</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="layui-col-md12">
|
|
<div class="layui-card" style="margin-bottom: 20px">
|
|
<div class="layui-card-header" style="background-image: linear-gradient(#d1d1ff , #ffffff);">开发团队</div>
|
|
<div class="layui-card-body" style="background-image: linear-gradient(#ffffff , #d1d1ff);">
|
|
<table class="layui-table team">
|
|
<tbody>
|
|
<tr>
|
|
<th>前端</th>
|
|
<td>曾健起</td>
|
|
</tr>
|
|
<tr>
|
|
<th>后端</th>
|
|
<td>曾健起</td>
|
|
</tr>
|
|
<tr>
|
|
<th>版权所有</th>
|
|
<td>
|
|
<a href="http://zengjianqi.com/" target="_blank" class="layui-icon"> © Copyright
|
|
Reserved.zengjianqi.com   zengjianqi163@163.com</a>
|
|
</td>
|
|
</tr>
|
|
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
//配置可视化数字增长的属性
|
|
var options = {
|
|
useEasing: true, // 使用缓和
|
|
useGrouping: true, // 使用分组(是否显示千位分隔符,一般为 true)
|
|
separator: ',', // 分隔器(千位分隔符,默认为',')
|
|
decimal: '.', // 十进制(小数点符号,默认为 '.')
|
|
prefix: '', // 字首(数字的前缀,根据需要可设为 $,¥,￥ 等)
|
|
suffix: '' // 后缀(数字的后缀 ,根据需要可设为 元,个,美元 等)
|
|
};
|
|
|
|
$.ajaxSettings.async = false;
|
|
// 基于准备好的dom，初始化echarts实例
|
|
var myChart1 = echarts.init(document.getElementById('main1'));
|
|
var myChart2 = echarts.init(document.getElementById('main2'));
|
|
var myChart3 = echarts.init(document.getElementById('main3'));
|
|
|
|
//当前时间
|
|
updateTime();
|
|
setInterval(updateTime, 1000);
|
|
|
|
//初始化卡片数据
|
|
updateCards();
|
|
|
|
//初始化所有图表
|
|
updateEcharts();
|
|
|
|
//根据窗口的大小变动图表 --- 重点
|
|
window.onresize = function () {
|
|
echatsResize();
|
|
};
|
|
|
|
//获取当前详细时间
|
|
function updateTime() {
|
|
var date = new Date();
|
|
this.year = date.getFullYear();
|
|
this.month = date.getMonth() + 1;
|
|
this.date = date.getDate();
|
|
this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];
|
|
this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
|
|
this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
|
|
this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
|
|
var currentTime = this.year + "." + this.month + "." + this.date + "," + this.day + ", " + this.hour + ":" + this.minute + ":" + this.second;
|
|
$("#time").html(currentTime);
|
|
}
|
|
|
|
//获取卡片展示数据
|
|
function updateCards() {
|
|
$.get("/index/Tools/cardData", function (result) {
|
|
//控制数字的滚动时间，数值越大，滚动时间越长。
|
|
if (result[0] < 10) {
|
|
var time0 = 1
|
|
}else if (result[0] < 100) {
|
|
var time0 = 2
|
|
}else if (result[0] < 1000) {
|
|
var time0 = 3
|
|
}else {
|
|
var time0 = 4
|
|
}
|
|
if (result[1] < 10) {
|
|
var time1 = 1
|
|
}else if (result[0] < 100) {
|
|
var time1 = 2
|
|
}else if (result[0] < 1000) {
|
|
var time1 = 3
|
|
}else {
|
|
var time1 = 4
|
|
}
|
|
if (result[2] < 10) {
|
|
var time2 = 1
|
|
}else if (result[0] < 100) {
|
|
var time2 = 2
|
|
}else if (result[0] < 1000) {
|
|
var time2 = 3
|
|
}else {
|
|
var time2 = 4
|
|
}
|
|
if (result[3] < 10) {
|
|
var time3 = 1
|
|
}else if (result[0] < 100) {
|
|
var time3 = 2
|
|
}else if (result[0] < 1000) {
|
|
var time3 = 3
|
|
}else {
|
|
var time3 = 4
|
|
}
|
|
//下面的操作为数字可视化滚动显示至当前值
|
|
$(function () {
|
|
// CountUp(参数一, 参数二, 参数三, 参数四, 参数五, 参数六)
|
|
// 参数一: 数字所在容器
|
|
// 参数二: 数字开始增长前的默认值(起始值),一般从 0 开始增长
|
|
// 参数三: 数字增长后的最终值,该值一般通过异步请求获取
|
|
// 参数四: 数字小数点后保留的位数
|
|
// 参数五: 数字增长特效的时间,此处为3秒
|
|
// 参数六: 其他配置项
|
|
// 注: 参数六也可不加,其配置项则为默认值
|
|
new CountUp("card0", 0, result[0], 0, time0, {suffix: '人'}).start();
|
|
new CountUp("card1", 0, result[1], 0, time1, {suffix: '人'}).start();
|
|
new CountUp("card2", 0, result[2], 0, time2, {suffix: '次'}).start();
|
|
new CountUp("card3", 0, result[3], 0, time3, {suffix: '个'}).start();
|
|
|
|
});
|
|
// card1.countUp({
|
|
// delay: 50,
|
|
// time: 2000
|
|
// });
|
|
});
|
|
}
|
|
|
|
//获取图表所需数据
|
|
function updateEcharts() {
|
|
// 指定图表1的配置项和数据
|
|
$.get("/index/Tools/areaData", function (result) {
|
|
// myChart1.showLoading();
|
|
// setTimeout(function () {
|
|
// myChart1.hideLoading();
|
|
// }, 200);
|
|
myChart1.setOption(option = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{b}<br/>{c} (个)'
|
|
},
|
|
grid: {
|
|
top: '1%',
|
|
right: '2%',
|
|
left: '1%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
toolbox: {
|
|
// show: true,
|
|
// orient: 'vertical',
|
|
// left: 'right',
|
|
// top: 'center',
|
|
feature: {
|
|
dataView: {readOnly: false},
|
|
restore: {},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
visualMap: {
|
|
min: 0,
|
|
max: result[1],
|
|
text: ['High', 'Low'],
|
|
realtime: false,
|
|
calculable: true,
|
|
inRange: {
|
|
color: ['lightskyblue', 'yellow', 'orangered']
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '设备地域分布',
|
|
type: 'map',
|
|
mapType: 'china', // 自定义扩展图表类型
|
|
itemStyle: {
|
|
normal: {label: {show: true}},
|
|
emphasis: {label: {show: true}}
|
|
},
|
|
data: JSON.parse(result[0]),
|
|
}
|
|
]
|
|
});
|
|
});
|
|
|
|
// 指定图表2的配置项和数据
|
|
$.get("/index/Tools/devTypeData", function (result) {
|
|
// console.log(result[0]);
|
|
// myChart2.showLoading();
|
|
// setTimeout(function () {
|
|
// myChart2.hideLoading();
|
|
// }, 400);
|
|
myChart2.setOption(option = {
|
|
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
},
|
|
toolbox: {
|
|
// show: true,
|
|
// orient: 'vertical',
|
|
// left: 'right',
|
|
// top: 'center',
|
|
feature: {
|
|
dataView: {readOnly: false},
|
|
restore: {},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
legend: {
|
|
orient: 'vertical',
|
|
left: 'left',
|
|
data: result[0]
|
|
},
|
|
series: [
|
|
{
|
|
name: '设备类型',
|
|
type: 'pie',
|
|
radius: '55%',
|
|
center: ['50%', '60%'],
|
|
data: JSON.parse(result[1]),
|
|
itemStyle: {
|
|
emphasis: {
|
|
shadowBlur: 10,
|
|
shadowOffsetX: 0,
|
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
|
}
|
|
}
|
|
}
|
|
]
|
|
});
|
|
});
|
|
|
|
// 指定图表3的配置项和数据
|
|
$.get("/index/Tools/userData", function (result) {
|
|
// myChart3.showLoading();
|
|
// setTimeout(function () {
|
|
// myChart3.hideLoading();
|
|
// }, 300);
|
|
myChart3.setOption(option = {
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {
|
|
type: 'line',
|
|
lineStyle: {
|
|
color: '#9bbbde',
|
|
width: 3
|
|
}
|
|
}
|
|
},
|
|
color: '#85d081',
|
|
toolbox: {
|
|
// show: true,
|
|
// orient: 'vertical',
|
|
// left: 'right',
|
|
// top: 'top',
|
|
feature: {
|
|
dataView: {readOnly: false},
|
|
saveAsImage: {}
|
|
}
|
|
},
|
|
grid: {
|
|
top: '15%',
|
|
right: '2%',
|
|
left: '1%',
|
|
bottom: '10%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [
|
|
{
|
|
type: 'category',
|
|
boundaryGap: false,
|
|
// data: recentWeeks()
|
|
data: result[0]
|
|
}
|
|
],
|
|
yAxis: [
|
|
{
|
|
type: 'value',
|
|
minInterval: 1
|
|
}
|
|
],
|
|
series: [
|
|
{
|
|
name: '新增人数：',
|
|
type: 'line',
|
|
areaStyle: {normal: {}},
|
|
data: result[1],
|
|
smooth: true
|
|
}]
|
|
|
|
});
|
|
});
|
|
}
|
|
|
|
//变动图表大小 --- 重点
|
|
function echatsResize() {
|
|
myChart1.resize();
|
|
myChart2.resize();
|
|
myChart3.resize();
|
|
}
|
|
|
|
function recentWeeks() {
|
|
var myDate = new Date();
|
|
var days = myDate.getDay();
|
|
var daysArr = [];
|
|
for (var i = 0; i < 7; i++) {
|
|
if (days < 0) {
|
|
days = 6
|
|
}
|
|
daysArr.unshift(days);
|
|
days--;
|
|
}
|
|
// console.log(daysArr);
|
|
for (var i = 0; i < 7; i++) {
|
|
daysArr[i] = trans(daysArr[i]);
|
|
}
|
|
|
|
console.log(daysArr);
|
|
|
|
function trans(days) {
|
|
switch (days) {
|
|
case 1:
|
|
days = '周一';
|
|
break;
|
|
case 2:
|
|
days = '周二';
|
|
break;
|
|
case 3:
|
|
days = '周三';
|
|
break;
|
|
case 4:
|
|
days = '周四';
|
|
break;
|
|
case 5:
|
|
days = '周五';
|
|
break;
|
|
case 6:
|
|
days = '周六';
|
|
break;
|
|
case 0:
|
|
days = '周日';
|
|
break;
|
|
}
|
|
return days;
|
|
}
|
|
|
|
return daysArr;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|