目录
1. 套餐预约占比饼形图
1.1 需求分析
会员可以通过移动端自助进行体检预约，在预约时需要选择预约的体检套餐。本章节我们需要通过饼形图直观的展示出会员预约的各个套餐占比情况。展示效果如下图：
1.2 完善页面
套餐预约占比饼形图对应的页面为/pages/report_setmeal.html。
1.2.1 导入ECharts库
<script src="../plugins/echarts/echarts.js"></script>
1.2.2 参照官方实例导入饼形图
<div class="box">
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="chart1" style="height:600px;"></div>
</div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart1 = echarts.init(document.getElementById('chart1'));
//发送ajax请求获取动态数据
axios.get("/report/getSetmealReport.do").then((res)=>{
myChart1.setOption({
title : {
text: '套餐预约占比',
subtext: '',
x:'center'
},
tooltip : {//提示框组件
trigger: 'item',//触发类型，在饼形图中为item
formatter: "{a} <br/>{b} : {c} ({d}%)"//提示内容格式
},
legend: {
orient: 'vertical',
left: 'left',
data: res.data.data.setmealNames
},
series : [
{
name: '套餐预约占比',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data:res.data.data.setmealCount,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
});
});
</script>
根据饼形图对数据格式的要求，我们发送ajax请求，服务端需要返回如下格式的数据：
{
"data":{
"setmealNames":["套餐1","套餐2","套餐3"],
"setmealCount":[
{"name":"套餐1","value":10},
{"name":"套餐2","value":30},
{"name":"套餐3","value":25}
]
},
"flag":true,
"message":"获取套餐统计数据成功"
}
1.3 后台代码
1.3.1 Controller
在health_backend工程的ReportController中提供getSetmealReport方法
@Reference
private SetmealService setmealService;
/**
* 套餐占比统计
* @return
*/
@RequestMapping("/getSetmealReport")
public Result getSetmealReport(){
List<Map<String, Object>> list = setmealService.findSetmealCount();
Map<String,Object> map = new HashMap<>();
map.put("setmealCount",list);
List<String> setmealNames = new ArrayList<>();
for(Map<String,Object> m : list){
String name = (String) m.get("name");
setmealNames.add(name);
}
map.put("setmealNames",setmealNames);
return new Result(true, MessageConstant.GET_SETMEAL_COUNT_REPORT_SUCCESS,map);
}
1.3.2 服务接口
在SetmealService服务接口中扩展方法findSetmealCount
public List<Map<String,Object>> findSetmealCount();
1.3.3 服务实现类
在SetmealServiceImpl服务实现类中实现findSetmealCount方法
public List<Map<String, Object>> findSetmealCount() {
return setmealDao.findSetmealCount();
}
1.3.4 Dao接口
在SetmealDao接口中扩展方法findSetmealCount
public List<Map<String,Object>> findSetmealCount();
1.3.5 Mapper映射文件
在SetmealDao.xml映射文件中提供SQL语句
<select id="findSetmealCount" resultType="map">
select s.name,count(o.id) as value
from t_order o ,t_setmeal s
where o.setmeal_id = s.id
group by s.name
</select>
小结
- 官方实例，copy Option的配置
- 构造数据模型，测试
- 后台代码，返回经过测试的数据模型
2. 运营数据统计
—1---
2.1 需求分析
通过运营数据统计可以展示出体检机构的运营情况，包括会员数据、预约到诊数据、热门套餐等信息。本章节就是要通过一个表格的形式来展示这些运营数据。效果如下图：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UBtH2axt-1609428362625)(img/2.png)]
-----1----
2.2 完善页面
运营数据统计对应的页面为/pages/report_business.html。
2.2.1 定义模型数据
定义数据模型，通过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>
2.2.2 发送请求获取动态数据
在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/getBusinessReportData.do").then((res)=>{
this.reportData = res.data.data;
});
}
})
</script>
根据页面对数据格式的要求，我们发送ajax请求，服务端需要返回如下格式的数据：
{
"data":{
"todayVisitsNumber":0,
"reportDate":"2019-04-25",
"todayNewMember":0,
"thisWeekVisitsNumber":0,
"thisMonthNewMember":2,
"thisWeekNewMember":0,
"totalMember":10,
"thisMonthOrderNumber":2,
"thisMonthVisitsNumber":0,
"todayOrderNumber":0,
"thisWeekOrderNumber":0,
"hotSetmeal":[
{"proportion":0.4545,"name":"粉红珍爱(女)升级TM12项筛查体检套餐","setmeal_count":5},
{"proportion":0.1818,"name":"阳光爸妈升级肿瘤12项筛查体检套餐","setmeal_count":2},
{"proportion":0.1818,"name":"珍爱高端升级肿瘤12项筛查","setmeal_count":2},
{"proportion":0.0909,"name":"孕前检查套餐","setmeal_count":1}
],
},
"flag":true,
"message":"获取运营统计数据成功"
}
----2—
2.3 后台代码
2.3.1 Controller
在ReportController中提供getBusinessReportData方法
@Reference
private ReportService reportService;
/**
* 获取运营统计数据
* @return
*/
@RequestMapping("/getBusinessReportData")
public Result getBusinessReportData(){
try {
Map<String, Object> result = reportService.getBusinessReport();
return new Result(true,MessageConstant.GET_BUSINESS_REPORT_SUCCESS,result);
} catch (Exception e) {
e.printStackTrace();
return new Result(true,MessageConstant.GET_BUSINESS_REPORT_FAIL);
}
}
–1—
2.3.2 服务接口
在health_interface工程中创建ReportService服务接口并声明getBusinessReport方法
package com.itheima.service;
import java.util.Map;
public interface ReportService {
/**
* 获得运营统计数据
* Map数据格式：
* todayNewMember -> number
* totalMember -> number
* thisWeekNewMember -> number
* thisMonthNewMember -> number
* todayOrderNumber -> number
* todayVisitsNumber -> number
* thisWeekOrderNumber -> number
* thisWeekVisitsNumber -> number
* thisMonthOrderNumber -> number
* thisMonthVisitsNumber -> number
* hotSetmeals -> List<Setmeal>
*/
public Map<String,Object> getBusinessReport() throws Exception;
}
2.3.3 服务实现类
在health_service_provider工程中创建服务实现类ReportServiceImpl并实现ReportService接口
package com.itheima.service;
import com.alibaba.dubbo.config.annotation.Service;
import com.itheima.dao.MemberDao;
import com.itheima.dao.OrderDao;
import com.itheima.utils.DateUtils;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.transaction.annotation.Transactional;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
/**
* 统计报表服务
*/
@Service(interfaceClass = ReportService.class)
@Transactional
public class ReportServiceImpl implements ReportService {
@Autowired
private MemberDao memberDao;
@Autowired
private OrderDao orderDao;
/**
* 获得运营统计数据
* Map数据格式：
* todayNewMember -> number
* totalMember -> number
* thisWeekNewMember -> number
* thisMonthNewMember -> number
* todayOrderNumber -> number
* todayVisitsNumber -> number
* thisWeekOrderNumber -> number
* thisWeekVisitsNumber -> number
* thisMonthOrderNumber -> number
* thisMonthVisitsNumber -> number
* hotSetmeal -> List<Setmeal>
*/
public Map<String, Object> getBusinessReport() 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;
}
}
2.3.4 Dao接口
在OrderDao和MemberDao中声明相关统计查询方法
package com.itheima.dao;
import com.itheima.pojo.Order;
import java.util.List;
import java.util.Map;
public interface OrderDao {
public void add(Order order);
public List<Order> findByCondition(Order order);
public Map findById4Detail(Integer id);
public Integer findOrderCountByDate(String date);
public Integer findOrderCountAfterDate(String date);
public Integer findVisitsCountByDate(String date);
public Integer findVisitsCountAfterDate(String date);
public List<Map> findHotSetmeal();
}
package com.itheima.dao;
import com.github.pagehelper.Page;
import com.itheima.pojo.Member;
import java.util.List;
public interface MemberDao {
public List<Member> findAll();
public Page<Member> selectByCondition(String queryString);
public void add(Member member);
public void deleteById(Integer id);
public Member findById(Integer id);
public Member findByTelephone(String telephone);
public void edit(Member member);
public Integer findMemberCountBeforeDate(String date);
public Integer findMemberCountByDate(String date);
public Integer findMemberCountAfterDate(String date);
public Integer findMemberTotalCount();
}
- count(1)比count(*) 效率高
2.3.5 Mapper映射文件
在OrderDao.xml和MemberDao.xml中定义SQL语句
OrderDao.xml：
<!--根据日期统计预约数-->
<select id="findOrderCountByDate" parameterType="string" resultType="int">
select count(id) from t_order where orderDate = #{value}
</select>
<!--根据日期统计预约数，统计指定日期之后的预约数-->
<select id="findOrderCountAfterDate" parameterType="string" resultType="int">
select count(id) from t_order where orderDate >= #{value}
</select>
<!--根据日期统计到诊数-->
<select id="findVisitsCountByDate" parameterType="string" resultType="int">
select count(id) from t_order where orderDate = #{value} and orderStatus = '已到诊'
</select>
<!--根据日期统计到诊数，统计指定日期之后的到诊数-->
<select id="findVisitsCountAfterDate" parameterType="string" resultType="int">
select count(id) from t_order where orderDate >= #{value} and orderStatus = '已到诊'
</select>
<!--热门套餐，查询前4条-->
<select id="findHotSetmeal" resultType="map">
select
s.name,
count(o.id) setmeal_count ,
count(o.id)/(select count(id) from t_order) proportion
from t_order o inner join t_setmeal s on s.id = o.setmeal_id
group by o.setmeal_id
order by setmeal_count desc
limit 0,4
</select>
MemberDao.xml：
<!--根据日期统计会员数，统计指定日期之前的会员数-->
<select id="findMemberCountBeforeDate" parameterType="string" resultType="int">
select count(id) from t_member where regTime <= #{value}
</select>
<!--根据日期统计会员数-->
<select id="findMemberCountByDate" parameterType="string" resultType="int">
select count(id) from t_member where regTime = #{value}
</select>
<!--根据日期统计会员数，统计指定日期之后的会员数-->
<select id="findMemberCountAfterDate" parameterType="string" resultType="int">
select count(id) from t_member where regTime >= #{value}
</select>
<!--总会员数-->
<select id="findMemberTotalCount" resultType="int">
select count(id) from t_member
</select>
SELECT a.name,count(b.id) as setmeal_count, (count(b.id)/(select count(1) from t_order)) as proportion,a.remark FROM
t_setmeal a ,t_order b where a.id = b.setmeal_id
group by a.id
order by setmeal_count DESC
limit 2
SELECT a.name,count(b.id) as setmeal_count, (count(b.id)/(select count(1) from t_order)) as proportion,a.remark FROM
t_order b right join t_setmeal a on a.id = b.setmeal_id
group by a.id
order by setmeal_count DESC
扫一扫
293
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
