一、需求分析

        通过运营数据统计可以展示出体检机构的运营情况，包括会员数据、预约到诊数据、热门套餐等信息。我们要通过一个表格的形式来展示这些运营数据。如下图：

二、代码实现

实现步骤：

步骤一：定义数据模型，通过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 {@Autowiredprivate MemberDao memberDao;@Autowiredprivate 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;}
}

实现完成，启动羡项目测试运行。