424 lines
10 KiB
HTML
424 lines
10 KiB
HTML
{extend name="common/base"/}
|
||
{block name="style"}
|
||
<style type="text/css">
|
||
.dashboard-num table {width: 100%;}
|
||
.dashboard-num td {text-align: center; padding: 16px 0; width: 20%;border-left: 1px solid #f1f1f1; position: relative;}
|
||
.dashboard-num td:nth-child(1) { border-left: none}
|
||
.dashboard-num .num-title { padding-bottom: 10px; color: #999;}
|
||
.dashboard-num .blue {font-size: 20px; font-weight: 300;}
|
||
.dashboard-num td .badge {position: absolute;top: 0; right: 0;}
|
||
.dashboard-num td .badge span { padding: 2px 4px; font-size: 12px; border-radius: 0 0 0 4px;}
|
||
.dashboard-total td {border-top: 1px solid #f1f1f1}
|
||
.dashboard-logs .layui-timeline-item {padding-bottom: 1px;}
|
||
.info-td { width: 90px; text-align: right;background-color: #fafafa; color: #999; padding: 5px 3px;}
|
||
.info-td {width: 90px; text-align: right;background-color: #fafafa; color: #999; padding: 5px 3px;}
|
||
.layui-card-body .layui-timeline-title {
|
||
padding-bottom: 0;
|
||
font-size: 14px;
|
||
}
|
||
.layui-card-body .layui-timeline-item {
|
||
padding-bottom: 5px;
|
||
}
|
||
</style>
|
||
{/block}
|
||
<!-- 主体 -->
|
||
{block name="body"}
|
||
<div class="p-3">
|
||
<div class="layui-row layui-col-space12">
|
||
<div class="">
|
||
<div class="layui-row layui-col-space12">
|
||
<div class="layui-col-md12">
|
||
<div class="layui-card dashboard-num">
|
||
<table>
|
||
<tr>
|
||
<td>
|
||
<div class="num-title">总会员数</div>
|
||
<div class="blue">{$totaluser}</div>
|
||
</td>
|
||
<td>
|
||
<div class="num-title">老人人数</div>
|
||
<div class="blue">{$old_num}</div>
|
||
</td>
|
||
<td>
|
||
<div class="num-title">儿童人数</div>
|
||
<div class="blue">{$children_num}</div>
|
||
</td>
|
||
<td>
|
||
<div class="num-title">未婚男</div>
|
||
<div class="blue">{$unmarried_man_num}</div>
|
||
</td>
|
||
<td>
|
||
<div class="num-title">未婚女</div>
|
||
<div class="blue">{$unmarried_woman_num}</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
|
||
<td>
|
||
<div class="num-title">残疾人数</div>
|
||
<div class="blue">{$whether_disabled_num}</div>
|
||
</td>
|
||
<td>
|
||
<div class="num-title">参保人数</div>
|
||
<div class="blue">{$insurance_type_num}</div>
|
||
</td>
|
||
<td>
|
||
<div class="num-title">少数名族人数</div>
|
||
<div class="blue">{$nation_s_num}</div>
|
||
</td>
|
||
<td>
|
||
<div class="num-title">汉族人数</div>
|
||
<div class="blue">{$nation_h_num}</div>
|
||
</td>
|
||
<td>
|
||
<div class="num-title">工作人员数</div>
|
||
<div class="blue">{$work_num}</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</div>
|
||
|
||
|
||
<div class="layui-card">
|
||
<div id="chartView" style="width: 100%;height:300px;"></div>
|
||
</div>
|
||
<div class="layui-card">
|
||
<div id="chartYear" style="width: 100%;height:240px;"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/block}
|
||
<!-- /主体 -->
|
||
|
||
<!-- 脚本 -->
|
||
{block name="script"}
|
||
<script src="https://cdn.staticfile.org/echarts/5.3.0/echarts.min.js"></script>
|
||
<script>
|
||
function getLogs() {
|
||
$.ajax({
|
||
url: "/admin/api/get_log_list",
|
||
type: 'post',
|
||
data: {
|
||
page: 1,
|
||
limit: 20
|
||
},
|
||
success: function (e) {
|
||
if (e.code == 0) {
|
||
var html = '';
|
||
$.each(e.data, function (key, value) {
|
||
html += '<li class="layui-timeline-item">\
|
||
<i class="layui-icon layui-timeline-axis"></i>\
|
||
<div class="layui-timeline-content layui-text">\
|
||
<div class="layui-timeline-title"><span title="'+ value.id + '">' + value.times + '</span>，' + value.content + '</div>\
|
||
</div>\
|
||
</li>';
|
||
});
|
||
$('#logs').html(html);
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
const moduleInit = ['tool'];
|
||
function gouguInit() {
|
||
var table = layui.table;
|
||
$('body').on('click','[data-event="pay"]',function(){
|
||
var src=$(this).attr('src');
|
||
layer.open({
|
||
type:1,
|
||
title:'感谢您给作者加鸡腿🍗🍗',
|
||
content:'<img src="'+src+'" style="width:100%" align=center />',
|
||
});
|
||
})
|
||
getLogs();
|
||
//注册用户
|
||
table.render({
|
||
elem: '#UserList'
|
||
, url: '/admin/api/get_user_list' //数据接口
|
||
, page: false //开启分页
|
||
, cols: [[ //表头
|
||
{ field: 'username', title: '用户名'}
|
||
,{ field: 'username', title: '昵称', align: 'center', 'width': 120}
|
||
,{ field: 'sex', title: '性别','width': 60, align: 'center', templet: function (d) {
|
||
let str='-';
|
||
if(d.sex==1){
|
||
str='男';
|
||
}
|
||
else if(d.sex==2){
|
||
str='女';
|
||
}
|
||
return str;
|
||
}}
|
||
, {
|
||
field: 'headimgurl', title: '头像', align: 'center','width': 60, templet: function (d) {
|
||
return '<img src="' + d.headimgurl + '" width="20" height="20" />';
|
||
}
|
||
}
|
||
, { field: 'login_num', title: '登录次数', align: 'center','width': 100}
|
||
, { field: 'last_login_time', title: '最后登录时间', align: 'center','width': 168}
|
||
]]
|
||
});
|
||
|
||
//文章
|
||
table.render({
|
||
elem: '#Article'
|
||
, url: '/admin/api/get_article_list' //数据接口
|
||
, page: false //开启分页
|
||
, cols: [[ //表头
|
||
{ field: 'title', title: '文章标题'}
|
||
, { field: 'cate_title', title: '文章分类', align: 'center','width': 150 }
|
||
, { field: 'read', title: '访问量', align: 'center','width': 100 }
|
||
, { field: 'create_time', title: '发布时间', align: 'center','width': 168}
|
||
]]
|
||
});
|
||
get_view_data();
|
||
}
|
||
|
||
|
||
function setHour(num) {
|
||
var str = num + ':00';
|
||
if (num < 10) {
|
||
str = '0' + num + ':00';
|
||
}
|
||
return str;
|
||
}
|
||
var chartView = echarts.init(document.getElementById('chartView'));
|
||
function get_view_data() {
|
||
$.ajax({
|
||
url: "/admin/api/get_view_data",
|
||
type: 'post',
|
||
data: {},
|
||
success: function (e) {
|
||
if (e.code == 0) {
|
||
var data_first = e.data.data_first;
|
||
var data_second = e.data.data_second;
|
||
archiveCalendar = e.data.data_three;
|
||
var myDate = new Date();
|
||
var nowHour = myDate.getHours(); //获取当前小时数(0-23)
|
||
var xData = [];
|
||
var yData1 = [];
|
||
var yData2 = [];
|
||
$.each(data_first, function (key, value) {
|
||
if (key <= nowHour) {
|
||
yData1.push(value);
|
||
}
|
||
});
|
||
$.each(data_second, function (key, value) {
|
||
xData.push(setHour(key));
|
||
yData2.push(value);
|
||
});
|
||
var ops = {
|
||
title: {
|
||
top: '12px',
|
||
text: '今日与昨日访问统计',
|
||
left: '10px',
|
||
textStyle: {
|
||
fontSize: '18',
|
||
color: '#333',
|
||
}
|
||
},
|
||
color: ["#1AAD19", "#1890FF"],
|
||
grid: {
|
||
left: '16px',
|
||
right: '30px',
|
||
bottom: '12px',
|
||
top: '60px',
|
||
containLabel: true
|
||
},
|
||
tooltip: {
|
||
trigger: 'axis',
|
||
axisPointer: {
|
||
type: 'cross',
|
||
crossStyle: {
|
||
color: '#999'
|
||
}
|
||
}
|
||
},
|
||
toolbox: {
|
||
show: true,
|
||
},
|
||
legend: {
|
||
data: ["今日", "昨日"],
|
||
top: '16px',
|
||
},
|
||
xAxis: [{
|
||
type: "category",
|
||
boundaryGap: !1,
|
||
data: xData,
|
||
axisLine: {
|
||
lineStyle: {
|
||
color: '#999999',
|
||
width: 1,
|
||
}
|
||
},
|
||
}],
|
||
yAxis: [{
|
||
type: "value",
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: '#999999',
|
||
width: 1,
|
||
}
|
||
},
|
||
}],
|
||
series: [{
|
||
name: "今日",
|
||
type: "line",
|
||
smooth: !0,
|
||
itemStyle: {
|
||
normal: {
|
||
areaStyle: {
|
||
type: "default",
|
||
opacity: 0.2
|
||
}
|
||
}
|
||
},
|
||
data: yData1
|
||
}, {
|
||
name: "昨日",
|
||
type: "line",
|
||
smooth: !0,
|
||
itemStyle: {
|
||
normal: {
|
||
areaStyle: {
|
||
type: "default",
|
||
opacity: 0.2
|
||
}
|
||
}
|
||
},
|
||
data: yData2
|
||
}]
|
||
}
|
||
chartView.setOption(ops);
|
||
|
||
|
||
let myChart = echarts.init(document.getElementById('chartYear'));
|
||
let option = {
|
||
title: {
|
||
top: '12px',
|
||
text: '近一年访问统计',
|
||
left: '10px',
|
||
textStyle: {
|
||
fontSize: '18',
|
||
color: '#333',
|
||
}
|
||
},
|
||
tooltip: {
|
||
padding: 6,
|
||
formatter: function (obj) {
|
||
var value = obj.value;
|
||
return '<div style="font-size: 12px;">' + value[0] + '：' + value[1] + ' 个访客</div>';
|
||
}
|
||
},
|
||
visualMap: {
|
||
min: 0,
|
||
max: 300,
|
||
show: false,
|
||
inRange: {
|
||
color: ['#fafafa', '#1AAD19']
|
||
}
|
||
},
|
||
calendar: {
|
||
top: 75,
|
||
left: 50,
|
||
right: 20,
|
||
range: getRange(),
|
||
cellSize: ['auto', 21],
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: '#aaa',
|
||
type: 'dashed'
|
||
}
|
||
},
|
||
itemStyle: {
|
||
borderWidth: 0.5
|
||
},
|
||
yearLabel: { show: false },
|
||
monthLabel: {
|
||
nameMap: 'cn',
|
||
fontSize: 12
|
||
},
|
||
dayLabel: {
|
||
show: true,
|
||
formatter: '{start} 1st',
|
||
fontWeight: 'lighter',
|
||
nameMap: ['周日', '周一', '周二', '周三', '周四', '周五', '周六'],
|
||
fontSize: 12
|
||
}
|
||
},
|
||
series: [{
|
||
type: 'heatmap',
|
||
coordinateSystem: 'calendar',
|
||
calendarIndex: 0,
|
||
data: getDay()
|
||
}]
|
||
};
|
||
myChart.setOption(option);
|
||
|
||
setTimeout(function () {
|
||
window.onresize = function () {
|
||
chartView.resize();
|
||
myChart.resize();
|
||
}
|
||
})
|
||
console.log(e.data);
|
||
}
|
||
}
|
||
})
|
||
|
||
var archiveCalendar = {};
|
||
function getRange() {
|
||
let today = new Date();
|
||
let tYear = today.getFullYear();
|
||
let tMonth = today.getMonth() + 1;
|
||
let tDate = today.getDate();
|
||
let dateFirst = tYear + "-" + tMonth + "-" + tDate;
|
||
let datelast = (tYear - 1) + "-" + tMonth + "-" + tDate;
|
||
let dataRange = [];
|
||
dataRange.push(dateFirst);
|
||
dataRange.push(datelast);
|
||
return dataRange;
|
||
}
|
||
|
||
function getDay() {
|
||
var today = new Date();
|
||
var dayArray = [];
|
||
for (var i = 0; i < 366; i++) {
|
||
var targetday_milliseconds = today.getTime() - 1000 * 60 * 60 * 24 * i;
|
||
var date = new Date(targetday_milliseconds);
|
||
dayArray.push(retunDay(date));
|
||
}
|
||
return dayArray;
|
||
}
|
||
|
||
function retunDay(day) {
|
||
var tYear = day.getFullYear();
|
||
var tMonth = day.getMonth();
|
||
var tDate = day.getDate();
|
||
tMonth = tMonth + 1;
|
||
if (tMonth.toString().length == 1) {
|
||
tMonth = "0" + tMonth;
|
||
}
|
||
if (tDate.toString().length == 1) {
|
||
tDate = "0" + tDate;
|
||
}
|
||
var dateStr = tYear + "-" + tMonth + "-" + tDate;
|
||
var dateArray = [];
|
||
dateArray.push(dateStr);
|
||
if (archiveCalendar[dateStr]) {
|
||
dateArray.push(archiveCalendar[dateStr]);
|
||
}
|
||
else {
|
||
dateArray.push(0);
|
||
}
|
||
return dateArray;
|
||
}
|
||
}
|
||
|
||
</script>
|
||
{/block}
|
||
<!-- /脚本 --> |