黑马程序员技术交流社区

标题: 【郑州校区】传智健康项目讲义第十章 三 [打印本页]

---

作者: 我是楠楠    时间: 2019-11-21 09:29
标题: 【郑州校区】传智健康项目讲义第十章 三

【郑州校区】传智健康项目讲义第十章 三

2. 运营数据统计
2.1 需求分析
通过运营数据统计可以展示出体检机构的运营情况，包括会员数据、预约到诊数据、热门套餐等信息。本章节就是要通过一个表格的形式来展示这些运营数据。效果如下图：

2.2 完善页面运营数据统计对应的页面为/pages/report_business.html。
2.2.1 定义模型数据
定义数据模型，通过VUE的数据绑定展示数据

[AppleScript] 纯文本查看 复制代码

<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>

[AppleScript] 纯文本查看 复制代码

<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> 

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2