项目功能--运营数据统计
一、需求分析
通过运营数据统计可以展示出体检机构的运营情况,包括会员数据、预约到诊数据、热门套餐等信息。我们要通过一个表格的形式来展示这些运营数据。如下图:
二、代码实现
实现步骤:
步骤一:定义数据模型,通过VUE的数据绑定展示数据
<script>
var vue = new Vue({
el: '#app',
data:{
reportData:{
reportDate:null,
todayNewMember :0,
totalMember :0,
thisWeekNewMember :0,
thisMonthNewMember :0,
todayOrderNumber :0,
todayVisitsNumber :0,
thisWeekOrderNumber :0,
thisWeekVisitsNumber :0,
thisMonthOrderNumber :0,
thisMonthVisitsNumber :0,
hotSetmeal :[]
}
}
})
</script>
<div class="box" style="height: 900px">
<div class="excelTitle" >
<el-button @click="exportExcel">导出Excel</el-button>运营数据统计
</div>
<div class="excelTime">日期:{{reportData.reportDate}}</div>
<table class="exceTable" cellspacing="0" cellpadding="0">
<tr>
<td colspan="4" class="headBody">会员数据统计</td>
</tr>
<tr>
<td width='20%' class="tabletrBg">新增会员数</td>
<td width='30%'>{{reportData.todayNewMember}}</td>
<td width='20%' class="tabletrBg">总会员数</td>
<td width='30%'>{{reportData.totalMember}}</td>
</tr>
<tr>
<td class="tabletrBg">本周新增会员数</td>
<td>{{reportData.thisWeekNewMember}}</td>
<td class="tabletrBg">本月新增会员数</td>
<td>{{reportData.thisMonthNewMember}}</td>
</tr>
<tr>
<td colspan="4" class="headBody">预约到诊数据统计</td>
</tr>
<tr>
<td class="tabletrBg">今日预约数</td>
<td>{{reportData.todayOrderNumber}}</td>
<td class="tabletrBg">今日到诊数</td>
<td>{{reportData.todayVisitsNumber}}</td>
</tr>
<tr>
<td class="tabletrBg">本周预约数</td>
<td>{{reportData.thisWeekOrderNumber}}</td>
<td class="tabletrBg">本周到诊数</td>
<td>{{reportData.thisWeekVisitsNumber}}</td>
</tr>
<tr>
<td class="tabletrBg">本月预约数</td>
<td>{{reportData.thisMonthOrderNumber}}</td>
<td class="tabletrBg">本月到诊数</td>
<td>{{reportData.thisMonthVisitsNumber}}</td>
</tr>
<tr>
<td colspan="4" class="headBody">热门套餐</td>
</tr>
<tr class="tabletrBg textCenter">
<td>套餐名称</td>
<td>预约数量</td>
<td>占比</td>
<td>备注</td>
</tr>
<tr v-for="s in reportData.hotSetmeal">
<td>{{s.name}}</td>
<td>{{s.setmeal_count}}</td>
<td>{{s.proportion}}</td>
<td></td>
</tr>
</table>
</div>
步骤二:发送请求获取动态数据
在VUE中发送ajax请求获取动态数据,通过VUE的数据绑定将数据展示到页面
<script>
var vue = new Vue({
el: '#app',
data:{
reportData:{
reportDate:null,
todayNewMember :0,
totalMember :0,
thisWeekNewMember :0,
thisMonthNewMember :0,
todayOrderNumber :0,
todayVisitsNumber :0,
thisWeekOrderNumber :0,
thisWeekVisitsNumber :0,
thisMonthOrderNumber :0,
thisMonthVisitsNumber :0,
hotSetmeal :[]
}
},
created() {
//发送ajax请求获取动态数据
axios.get("/report/getExaminationReportData.do").then((res)=>{
this.reportData = res.data.data;
});
}
})
</script>
根据页面对数据格式的要求,我们发送ajax请求,服务端需要返回如下格式的数据:
{
"data":{
"todayVisitsNumber":0,
"reportDate":"2023-06-15",
"todayNewMember":0,
"thisWeekVisitsNumber":0,
"thisMonthNewMember":2,
"thisWeekNewMember":0,
"totalMember":10,
"thisMonthOrderNumber":2,
"thisMonthVisitsNumber":0,
"todayOrderNumber":0,
"thisWeekOrderNumber":0,
"hotSetmeal":[
{"proportion":0.4545,"name":"体检套餐一","package_count":5},
{"proportion":0.1818,"name":"二体检套餐","package_count":2},
{"proportion":0.1818,"name":"体检套餐三","package_count":2},
{"proportion":0.0909,"name":"孕前检查套餐","package_count":1}
],
},
"flag":true,
"message":"获取运营统计数据成功"
}
步骤三:编写后台代码:
在backend的Controller中编写getExaminationReportData方法
@Reference
private ReportService reportService;
/**
* 获取运营统计数据
* @return
*/
@RequestMapping("/getExaminationReportData")
public Result getExaminationReportData(){
try {
Map<String, Object> result = reportService.getExaminationReportData();
return new Result(true,MessageConstant.GET_BUSINESS_REPORT_SUCCESS,result);
} catch (Exception e) {
e.printStackTrace();
return new Result(true,MessageConstant.GET_BUSINESS_REPORT_FAIL);
}
}
步骤四:编写Service接口和实现类,编写Dao接口 和Mapper映射文件
统计涉及到预约表(t_order)和会员表(t_member), 即OrderDao和MemberDao
Service接口:
package com.it.service;
import java.util.Map;
public interface ReportService {
/**
* 获得运营统计数据
*/
public Map<String,Object> getExaminationReport() throws Exception;
}
Service实现类:
/**
* 统计报表服务
*/
@Service(interfaceClass = ReportService.class)
@Transactional
public class ReportServiceImpl implements ReportService {
@Autowired
private MemberDao memberDao;
@Autowired
private OrderDao orderDao;
/**
* 获得运营统计数据
*/
public Map<String, Object> getExaminationReport() throws Exception{
//获得当前日期
String today = DateUtils.parseDate2String(DateUtils.getToday());
//获得本周一的日期
String thisWeekMonday = DateUtils.parseDate2String(DateUtils.getThisWeekMonday());
//获得本月第一天的日期
String firstDay4ThisMonth =
DateUtils.parseDate2String(DateUtils.getFirstDay4ThisMonth());
//今日新增会员数
Integer todayNewMember = memberDao.findMemberCountByDate(today);
//总会员数
Integer totalMember = memberDao.findMemberTotalCount();
//本周新增会员数
Integer thisWeekNewMember = memberDao.findMemberCountAfterDate(thisWeekMonday);
//本月新增会员数
Integer thisMonthNewMember = memberDao.findMemberCountAfterDate(firstDay4ThisMonth);
//今日预约数
Integer todayOrderNumber = orderDao.findOrderCountByDate(today);
//本周预约数
Integer thisWeekOrderNumber = orderDao.findOrderCountAfterDate(thisWeekMonday);
//本月预约数
Integer thisMonthOrderNumber = orderDao.findOrderCountAfterDate(firstDay4ThisMonth);
//今日到诊数
Integer todayVisitsNumber = orderDao.findVisitsCountByDate(today);
//本周到诊数
Integer thisWeekVisitsNumber = orderDao.findVisitsCountAfterDate(thisWeekMonday);
//本月到诊数
Integer thisMonthVisitsNumber = orderDao.findVisitsCountAfterDate(firstDay4ThisMonth);
//热门套餐(取前4)
List<Map> hotSetmeal = orderDao.findHotSetmeal();
Map<String,Object> result = new HashMap<>();
result.put("reportDate",today);
result.put("todayNewMember",todayNewMember);
result.put("totalMember",totalMember);
result.put("thisWeekNewMember",thisWeekNewMember);
result.put("thisMonthNewMember",thisMonthNewMember);
result.put("todayOrderNumber",todayOrderNumber);
result.put("thisWeekOrderNumber",thisWeekOrderNumber);
result.put("thisMonthOrderNumber",thisMonthOrderNumber);
result.put("todayVisitsNumber",todayVisitsNumber);
result.put("thisWeekVisitsNumber",thisWeekVisitsNumber);
result.put("thisMonthVisitsNumber",thisMonthVisitsNumber);
result.put("hotSetmeal",hotSetmeal);
return result;
}
}
实现完成,启动羡项目测试运行。
原文地址:https://blog.csdn.net/kong7906928/article/details/143744672
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!