本文介绍了一个使用layui构建的前端页面，实现了周、月、季、年的事件查询，并结合laydate插件进行日期选择。通过数据提交，动态更新用户达标情况的ECharts折线图，便于分析与导出数据。
周 月 季度 年 事件查询 layui 事件筛选 图标统计 前端页面
<!DOCTYPE html>
<html>
<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, initial-scale=1, maximum-scale=1">
{include file="public/common"/}
<style>
body {
background-color: #ffffff;
}
.selbox {
background-color: #ededed;
font-size: 17px;
padding: 8px;
margin: 3px;
}
.active {
border-style: solid;
border-color: #157ded;
}
.datesel {
display: flex;
align-items: center;
}
</style>
</head>
<body>
<div class="layui-form layuimini-form">
<div class="layui-col-md6" style="margin-top: 32px;">
<form class="layui-form layui-form-pane" action="">
<div class="datesel flex">
<a s_href="week" class="selbox flex">周</a>
<a s_href="yue" class="selbox flex">月</a>
<a s_href="season" class="selbox flex">季</a>
<a s_href="yer" class="selbox flex">年</a>
<input type="hidden" name="time_type" id="time_type" value="">
<label class="layui-inline-label" id="worldlable">
<input id="worldId" type="text" lay-verify="required" placeholder="请选择日期" name="time" class="layui-input laydate-test" data-type="date">
</label>
<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 查询</button>
<button type="submit" class="layui-btn layui-btn-info" lay-submit lay-filter="data-export-btn"> 导出</button>
</div>
</form>
</div>
<div class="layui-col-md12">
<div class="layui-card">
<!-- <div class="layui-card-header"><i class="fa fa-line-chart icon"></i>用餐饮达标统计</div>-->
<div class="layui-card-body" style="margin-top: 90px;">
<div id="echarts-records" style="width: 100%;min-height:500px"></div>
</div>
</div>
</div>
</div>
<script>
layui.use(['laydate', 'layer','form', 'jquery', 'echarts'], function () {
var laydate = layui.laydate,
layer = layui.layer,
form = layui.form,
$ = layui.jquery
type = $('#time_type').val();
/**
* 报表功能
*/
var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');
var optionRecords = {
title: {
text: '用户达标情况统计'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['达标', '未达标']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
},
yAxis: {
type: 'value'
},
series: [
{
name: '达标',
type: 'line',
stack: '达标总人数',
data: [0,0,0,0,0,0,0]
},
{
name: '未达标',
type: 'line',
stack: '未达标总人数',
data: [0,0,0,0,0,0,0]
},
]
};
echartsRecords.setOption(optionRecords);
window.addEventListener("resize", function () {
echartsRecords.resize();
});
// 监听搜索操作
form.on('submit(data-search-btn)', function (data) {
var result = JSON.stringify(data.field);
if(data.field.time_type == ''){
layer.msg('请选择查询周期')
return false;
}
if(data.field.time == ''){
layer.msg('请选择查询日期')
return false;
}
$.post("{:url('count')}", {'time_type':data.field.time_type,'time':data.field.time}, function (res) {
echartsRecords.setOption({
xAxis:{
type: 'category',
boundaryGap: false,
data: res['data']['xAxis']
},
series : [
{
name: '达标',
type: 'line',
stack: '达标总人数',
data: res['data']['data']['pass']
},
{
name: '未达标',
type: 'line',
stack: '未达标总人数',
data: res['data']['data']['no_pass']
}
]
});
})
return false;
});
//监听导出
form.on('submit(data-export-btn)', function (data) {
var result = JSON.stringify(data.field);
window.location.href= "{:url('countExport')}"+"?time_type="+data.field.time_type+"&time="+data.field.time;
return false;
});
//日选择器
laydate.render({
elem: '#worldId',
max: genTime('d'),
value: genTime('d'),
type: 'date'
});
function genTime(opt) {
var now = new Date();
var year = now.getFullYear();
var mth = now.getMonth();
var day = now.getDate();
var month = mth + 1;
if (month < 10) {
month = '0' + month
}
if (day < 10) {
day = '0' + day
}
var str;
if (opt == 'd') {
str = year + '-' + month + '-' + day;
} else if (opt == 'm') {
str = year + '-' + month;
}
return str;
}
$('div .datesel a').on('click', function () {
var hel = $(this).attr('s_href');
$(this).addClass("active")
.siblings().removeClass("active");
$("#worldId").remove();
$("#worldlable").html(
'<input id="worldId" name="time" placeholder="请选择日期" type="text" class="layui-input laydate-test" data-type="date">');
if (hel == "week") {
$('#dtl').val("week");
$('#time_type').val('week');
//周选择器
getWeek("#worldId");
} else if (hel == "yue") {
$('#time_type').val('yue');
//月选择器
$('#dtl').val("yue");
laydate.render({
elem: '#worldId',
type: 'month',
max: genTime('m'),
value: genTime('m'),
btns: ['clear', 'confirm']
});
} else if (hel == "season") {
$('#time_type').val('season');
$('#dtl').val('season');
//季选择器
getSeason('#worldId');
} else if (hel == "yer") {
$('#time_type').val('yer');
$('#dtl').val('yer');
//年选择器
laydate.render({
elem: '#worldId',
type: 'year',
btns: ['clear', 'confirm']
});
}
});
function getWeek(ohd) {
var ele = $(ohd);
laydate.render({
elem: ohd,
format: "yyyy-MM-dd~yyyy-MM-dd",
btns: ['clear', 'now'],
trigger: 'click',
done: function (value, date, endDate) {
if (value != "" && value.length > 0) {
var today = new Date(value.substring(0, 10));
var weekday = today.getDay();
var monday;
var sunday;
if (weekday == 0) {
monday = new Date(1000 * 60 * 60 * 24 * (weekday - 6) + today.getTime());
} else {
monday = new Date(1000 * 60 * 60 * 24 * (1 - weekday) + today.getTime());
}
if (weekday == 0) {
sunday = today;
} else {
sunday = new Date(1000 * 60 * 60 * 24 * (7 - weekday) + today.getTime());
}
var month = monday.getMonth() + 1;
if (month < 10) {
month = "0" + month;
}
var day1 = monday.getDate();
if (day1 < 10) {
day1 = "0" + day1;
}
var start = "" + monday.getFullYear() + "-" + month + "-" + day1;
var month2 = sunday.getMonth() + 1;
if (month2 < 10) {
month2 = "0" + month2;
}
var day2 = sunday.getDate();
if (day2 < 10) {
day2 = "0" + day2;
}
var end = "" + sunday.getFullYear() + "-" + month2 + "-" + day2;
ele.val(start + "~" + end);
} else {
ele.val('');
}
}
});
}
function getSeason(ohd) {
var ele = $(ohd);
laydate.render({
elem: ohd,
type: 'month',
format: 'yyyy年M季度',
//range: sgl?null:'~',
//min:"1900-1-1",
btns: ['clear', 'confirm'],
ready: function (value, date, endDate) {
var hd = $("#layui-laydate" + ele.attr("lay-key"));
console.log("hd=" + hd);
if (hd.length > 0) {
hd.click(function () {
ren($(this));
});
}
ren(hd);
},
done: function (value, date, endDate) {
if (!isNull(date) && date.month > 0 && date.month < 5) {
ele.attr("startDate", date.year + "-" + date.month);
} else {
ele.attr("startDate", "");
}
if (!isNull(endDate) && endDate.month > 0 && endDate.month < 5) {
ele.attr("endDate", endDate.year + "-" + endDate.month)
} else {
ele.attr("endDate", "");
}
}
});
}
var ren = function (thiz) {
var mls = thiz.find(".laydate-month-list");
mls.each(function (i, e) {
$(this).find("li").each(function (inx, ele) {
var cx = ele.innerHTML;
console.log('inx' + inx);
if (inx < 4) {
ele.innerHTML = cx.replace(/月/g, "季度");
} else {
ele.style.display = "none";
}
});
});
};
});
function isNull(s) {
if (s == null || typeof (s) == "undefined" || s == "") return true;
return false;
}
</script>
</body>
</html>
后端代码
/**
* 统计数据
* @return \think\response\View|null
* @throws \think\db\exception\DataNotFoundException
* @throws \think\db\exception\DbException
* @throws \think\db\exception\ModelNotFoundException
*/
public function count()
{
if (request()->isPost()) {
$type = request()->post('time_type', 'week');
$time = request()->post('time', 'time');
$data = [];
if (empty($time)) {
$this->error(201, '请选择时间');
}
$_RecipesLog = new RecipesLog();
$recipesLog_data = []; //血糖数据
$date_data = [];//日期数据
$title = [];
switch ($type) {
case 'yue': //获取月信息
$month_date = getMonthRange(strtotime($time), false);
$date_data = get_between_time($month_date['startTime'], $month_date['endTime'], '1');
//查询本月内所有数据
$recipesLog_data = $_RecipesLog->where([['recipes_time', '>=', strtotime($month_date['startTime'])], ['recipes_time', '<=', strtotime($month_date['endTime'])]])
->field('is_pass,recipes_time')->select();
//处理成统计数据
foreach ($date_data as $v) {
$pass[$v] = 0; //达标数据
$no_pass[$v] = 0; //未达标数据
foreach ($recipesLog_data as $value) {
//当天数据
if ($value['recipes_time'] == $v) {
if ($value['is_pass'] == 2) {
$pass[$v] += 1;
} else {
$no_pass[$v] += 1;
}
}
}
}
$title_data =[];
foreach ($date_data as $v){
$title_data[]= date('d',$v);
}
$title =$title_data;
break;
case 'season': //获取季度信息
//匹配季度
$yer=preg_match('#(\d+)年#i', $time, $yer_data);
$season=preg_match('#年(\d+)季度#i', $time, $season_data);
$time = $yer>0?$yer_data[1]:'';
if(!empty($time)){
switch ($season_data[1]){
case 1:
$start_time = strtotime($time.'-01-01 00:00:00 ');
$month2_date = getMonthRange(strtotime($time.'-03'), true);
$end_time=$month2_date['endTime'];
$date_data =['01','02','03'];
break;
case 2:
$start_time = strtotime($time.'-04-01 00:00:00 ');
$month2_date = getMonthRange(strtotime($time.'-06'), true);
$end_time=$month2_date['endTime'];
$date_data =['04','05','06'];
break;
case 3:
$start_time = strtotime($time.'-07-01 00:00:00 ');
$month2_date = getMonthRange(strtotime($time.'-09'), true);
$end_time=$month2_date['endTime'];
$date_data =['07','08','09'];
break;
case 4:
$start_time = strtotime($time.'-10-01 00:00:00 ');
$month2_date = getMonthRange(strtotime($time.'-12'), true);
$end_time=$month2_date['endTime'];
$date_data =['10','11','12'];
break;
default:
$this->error(201,'时间格式有误');
}
//查询本季度所有数据
$recipesLog_data = $_RecipesLog->where([['recipes_time','>=',$start_time],['recipes_time','<=',$end_time]])
->field('is_pass,recipes_time')->select();
//处理成统计数据
foreach ($date_data as $v) {
$pass[$v] = 0; //达标数据
$no_pass[$v] = 0; //未达标数据
$month_data = getMonthRange(strtotime($time."-".$v), true);
foreach ($recipesLog_data as $value) {
//当天数据
if ($value['recipes_time'] >= $month_data['startTime']&&$value['recipes_time'] <= $month_data['endTime']) {
if ($value['is_pass'] == 2) {
$pass[$v] += 1;
} else {
$no_pass[$v] += 1;
}
}
}
}
$title = $date_data;
}
break;
case 'yer': //获取年信息
$date_data =['01','02','03','04','05','06','07','08','09','11','12'];
//查询本年内所有数据
$recipesLog_data = $_RecipesLog->whereYear('recipes_time',$time)
->field('is_pass,recipes_time')->select();
//处理成统计数据
foreach ($date_data as $v) {
$pass[$v] = 0; //达标数据
$no_pass[$v] = 0; //未达标数据
$month_data = getMonthRange(strtotime($time."-".$v), true);
foreach ($recipesLog_data as $value) {
//当天数据
if ($value['recipes_time'] >= $month_data['startTime']&&$value['recipes_time'] <= $month_data['endTime']) {
if ($value['is_pass'] == 2) {
$pass[$v] += 1;
} else {
$no_pass[$v] += 1;
}
}
}
}
$title = $date_data;
break;
default: //默认周数据
$time = explode('~', $time,);
if (isset($time[0]) && isset($time[1])) {
$date_data = get_between_time($time[0], $time[1], '1');
//查询本周内所有数据
$recipesLog_data = $_RecipesLog->where([['recipes_time', '>=', strtotime($time[0] . ' 00:00:00')], ['recipes_time', '<=', strtotime($time[1] . ' 23:59:59')]])
->field('is_pass,recipes_time')->select();
//处理成统计数据
foreach ($date_data as $v) {
$pass[$v] = 0; //达标数据
$no_pass[$v] = 0; //未达标数据
foreach ($recipesLog_data as $value) {
//当天数据
if ($value['recipes_time'] == $v) {
if ($value['is_pass'] == 2) {
$pass[$v] += 1;
} else {
$no_pass[$v] += 1;
}
}
}
}
$title =['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
}
break;
}
$data['data']['pass'] = empty($pass)?[]: array_values($pass);
$data['data']['no_pass'] =empty($no_pass)?[]: array_values($no_pass);
$data['xAxis'] = $title;
return $this->success(200, '获取成功', '', $data);
}
return View();
}
扫一扫
1297
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
