Day_ 11 smart communication health project - graphic report and poi Report

The first 11 Chapter Graphical reports 、POI report form

1. Pie chart of the proportion of package reservation

1.1 Demand analysis

Members can make physical examination appointment through mobile terminal self-service , When making an appointment, you need to select the physical examination package for appointment . In this chapter, we need to visually display the proportion of each package reserved by members through pie chart . The display effect is as follows ：

1.2 Perfect the page

The page corresponding to the pie chart of the proportion of package reservation is /pages/report_setmeal.html.

1.2.1 Import ECharts library

<script src="../plugins/echarts/echarts.js"></script>

1.2.2 Import pie chart by referring to official instance

<div class="box">
  <!--  by  ECharts  Prepare one with size （ Wide and high ） Of  DOM -->
  <div id="chart1" style="height:600px;"></div>
</div>

<script type="text/javascript">
  //  Based on the prepared dom, initialization echarts example 
  var myChart1 = echarts.init(document.getElementById('chart1'));
  // send out ajax Request dynamic data 
  axios.get("/report/getSetmealReport.do").then((res)=>{
    
    myChart1.setOption({
    
      title : {
    
        text: ' Proportion of package reservation ',
        subtext: '',
        x:'center'
      },
      tooltip : {
    // Prompt box components 
        trigger: 'item',// Trigger type , In the pie chart is item
        formatter: "{a} <br/>{b} : {c} ({d}%)"// Prompt content format 
      },
      legend: {
    
        orient: 'vertical',
        left: 'left',
        data: res.data.data.setmealNames
      },
      series : [
        {
    
          name: ' Proportion of package reservation ',
          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>

According to the requirements of pie chart for data format , We send ajax request , The server needs to return data in the following format ：

{
    
	"data":{
    
			"setmealNames":[" package 1"," package 2"," package 3"],
			"setmealCount":[
							{
    "name":" package 1","value":10},
							{
    "name":" package 2","value":30},
							{
    "name":" package 3","value":25}
						   ]
		   },
	"flag":true,
	"message":" Get package statistics successfully "
}

1.3 Background code

1.3.1 Controller

stay health_backend engineering ReportController Provided in the getSetmealReport Method

@Reference
private SetmealService setmealService;
/** *  Statistics of the proportion of packages  * @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 Service interface

stay SetmealService Extension method in service interface findSetmealCount

public List<Map<String,Object>> findSetmealCount();

1.3.3 Service implementation class

stay SetmealServiceImpl Implementation in service implementation class findSetmealCount Method

public List<Map<String, Object>> findSetmealCount() {
    
  return setmealDao.findSetmealCount();
}

1.3.4 Dao Interface

stay SetmealDao Extension method in interface findSetmealCount

public List<Map<String,Object>> findSetmealCount();

1.3.5 Mapper The mapping file

stay SetmealDao.xml Provided in the mapping file SQL sentence

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

2. Operation data statistics

2.1 Demand analysis

Through the operation data statistics, we can show the operation of the physical examination institution , Include member data 、 Appointment data 、 Popular packages and other information . This chapter is to show these operation data in the form of a table . The effect is as follows ：

2.2 Perfect the page

The corresponding page of operation data statistics is /pages/report_business.html.

2.2.1 Define model data

Define the data model , adopt VUE Data binding for presentation data

<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"> export Excel</el-button> Operation data statistics 
  </div>
  <div class="excelTime"> date ：{
   {reportData.reportDate}}</div>
  <table class="exceTable" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="4" class="headBody"> Member data statistics </td>
    </tr>
    <tr>
      <td width='20%' class="tabletrBg"> Number of new members </td>
      <td width='30%'>{
   {reportData.todayNewMember}}</td>
      <td width='20%' class="tabletrBg"> Total members </td>
      <td width='30%'>{
   {reportData.totalMember}}</td>
    </tr>
    <tr>
      <td class="tabletrBg"> Number of new members this week </td>
      <td>{
   {reportData.thisWeekNewMember}}</td>
      <td class="tabletrBg"> Number of new members this month </td>
      <td>{
   {reportData.thisMonthNewMember}}</td>
    </tr>
    <tr>
      <td colspan="4" class="headBody"> Statistics of appointment data </td>
    </tr>
    <tr>
      <td class="tabletrBg"> Number of appointments today </td>
      <td>{
   {reportData.todayOrderNumber}}</td>
      <td class="tabletrBg"> Number of visits today </td>
      <td>{
   {reportData.todayVisitsNumber}}</td>
    </tr>
    <tr>
      <td class="tabletrBg"> Number of appointments this week </td>
      <td>{
   {reportData.thisWeekOrderNumber}}</td>
      <td class="tabletrBg"> Number of visits this week </td>
      <td>{
   {reportData.thisWeekVisitsNumber}}</td>
    </tr>
    <tr>
      <td class="tabletrBg"> Number of appointments this month </td>
      <td>{
   {reportData.thisMonthOrderNumber}}</td>
      <td class="tabletrBg"> Number of visits this month </td>
      <td>{
   {reportData.thisMonthVisitsNumber}}</td>
    </tr>
    <tr>
      <td colspan="4" class="headBody"> Hot packages </td>
    </tr>
    <tr class="tabletrBg textCenter">
      <td> Package name </td>
      <td> Number of appointments </td>
      <td> Proportion </td>
      <td> remarks </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 Send a request to get dynamic data

stay VUE Sent in the hook function of ajax Request dynamic data , adopt VUE The data binding of will display the data to the page

<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() {
    
      // send out ajax Request dynamic data 
      axios.get("/report/getBusinessReportData.do").then((res)=>{
    
        this.reportData = res.data.data;
      });
    }
  })
</script>

According to the data format requirements of the page , We send ajax request , The server needs to return data in the following format ：

{
    
  "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":" Pink treasure ( Woman ) upgrade TM12 Screening and physical examination package ","setmeal_count":5},
      {
    "proportion":0.1818,"name":" Sunshine parents upgrade tumor 12 Screening and physical examination package ","setmeal_count":2},
      {
    "proportion":0.1818,"name":" Cherish high-end upgraded tumors 12 Item screening ","setmeal_count":2},
      {
    "proportion":0.0909,"name":" Pre pregnancy check-up package ","setmeal_count":1}
    ],
  },
  "flag":true,
  "message":" Obtain operation statistics successfully "
}

2.3 Background code

2.3.1 Controller

stay ReportController Provided in the getBusinessReportData Method

@Reference
private ReportService reportService;

/** *  Obtain operational statistics  * @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);
  }
}

2.3.2 Service interface

stay health_interface Create in project ReportService Service interface and declare getBusinessReport Method

package com.itheima.service;

import java.util.Map;

public interface ReportService {
    
    /** *  Obtain operational statistics  * Map data format ： * 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 Service implementation class

stay health_service_provider Create a service implementation class in the project ReportServiceImpl And implement ReportService Interface

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;

/** *  Statistical report service  */
@Service(interfaceClass = ReportService.class)
@Transactional
public class ReportServiceImpl implements ReportService {
    
    @Autowired
    private MemberDao memberDao;
    @Autowired
    private OrderDao orderDao;

    /** *  Obtain operational statistics  * Map data format ： * 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{
    
      	// Get the current date 
        String today = DateUtils.parseDate2String(DateUtils.getToday());
        // Get this Monday's date 
        String thisWeekMonday = DateUtils.parseDate2String(DateUtils.getThisWeekMonday());
        // Get the date of the first day of the month  
        String firstDay4ThisMonth = 
          					DateUtils.parseDate2String(DateUtils.getFirstDay4ThisMonth());

        // Number of new members added today 
        Integer todayNewMember = memberDao.findMemberCountByDate(today);

        // Total members 
        Integer totalMember = memberDao.findMemberTotalCount();

        // Number of new members this week 
        Integer thisWeekNewMember = memberDao.findMemberCountAfterDate(thisWeekMonday);

        // Number of new members this month 
        Integer thisMonthNewMember = memberDao.findMemberCountAfterDate(firstDay4ThisMonth);

        // Number of appointments today 
        Integer todayOrderNumber = orderDao.findOrderCountByDate(today);

        // Number of appointments this week 
        Integer thisWeekOrderNumber = orderDao.findOrderCountAfterDate(thisWeekMonday);

        // Number of appointments this month 
        Integer thisMonthOrderNumber = orderDao.findOrderCountAfterDate(firstDay4ThisMonth);

        // Number of visits today 
        Integer todayVisitsNumber = orderDao.findVisitsCountByDate(today);

        // Number of visits this week 
        Integer thisWeekVisitsNumber = orderDao.findVisitsCountAfterDate(thisWeekMonday);

        // Number of visits this month 
        Integer thisMonthVisitsNumber = orderDao.findVisitsCountAfterDate(firstDay4ThisMonth);

        // Hot packages （ Take before 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 Interface

stay OrderDao and MemberDao Declare relevant statistical query methods in

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();
}

2.3.5 Mapper The mapping file

stay OrderDao.xml and MemberDao.xml In the definition of SQL sentence

OrderDao.xml：

<!-- Count the number of appointments according to the date -->
<select id="findOrderCountByDate" parameterType="string" resultType="int">
  select count(id) from t_order where orderDate = #{value}
</select>

<!-- Count the number of appointments according to the date , Count the number of appointments after the specified date -->
<select id="findOrderCountAfterDate" parameterType="string" resultType="int">
  select count(id) from t_order where orderDate &gt;= #{value}
</select>

<!-- Count the number of visits according to the date -->
<select id="findVisitsCountByDate" parameterType="string" resultType="int">
  select count(id) from t_order where orderDate = #{value} and orderStatus = ' Has arrived '
</select>

<!-- Count the number of visits according to the date , Count the number of visits after the specified date -->
<select id="findVisitsCountAfterDate" parameterType="string" resultType="int">
  select count(id) from t_order where orderDate &gt;= #{value} and orderStatus = ' Has arrived '
</select>

<!-- Hot packages , Before query 4 strip -->
<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：

<!-- Count the number of members according to the date , Count the number of members before the specified date -->
<select id="findMemberCountBeforeDate" parameterType="string" resultType="int">
  select count(id) from t_member where regTime &lt;= #{value}
</select>

<!-- Count the number of members according to the date -->
<select id="findMemberCountByDate" parameterType="string" resultType="int">
  select count(id) from t_member where regTime = #{value}
</select>

<!-- Count the number of members according to the date , Count the number of members after the specified date -->
<select id="findMemberCountAfterDate" parameterType="string" resultType="int">
  select count(id) from t_member where regTime &gt;= #{value}
</select>

<!-- Total members -->
<select id="findMemberTotalCount" resultType="int">
  select count(id) from t_member
</select>

3. Export operation data statistical report

3.1 Demand analysis

The export of operation data statistics report is to write the statistics to Excel And provide it to the client browser for download , So that the management personnel of the physical examination institution can view and archive the operation data .

3.2 Provide template file

In this chapter, we need to pass the operation statistics through POI Write to Excel file , Corresponding Excel The effect is as follows ：

Through the top Excel The effect can be seen , The table is complex , It involves merging cells 、 typeface 、 Font size 、 Bold font 、 Alignment, etc . If we pass POI Programming the way to set these effects code will be very cumbersome .

In the actual development of enterprises , For this kind of complex table export, we usually design a Excel Template file , In this template file, set the structure and style of the table in advance , Our program only needs to read this file and write specific values in the corresponding position in the file .

In the materials of this chapter, there has been provided an example named report_template.xlsx Template file , You need to copy this file to health_backend engineering template Directory

3.3 Perfect the page

stay report_business.html The page provides an Export button and binds events

<div class="excelTitle" >
  <el-button @click="exportExcel"> export Excel</el-button> Operation data statistics 
</div>

methods:{
    
  // export Excel report form 
  exportExcel(){
    
    window.location.href = '/report/exportBusinessReport.do';
  }
}

3.4 Background code

stay ReportController Provided in the exportBusinessReport Method , be based on POI Writes data to Excel And download it to the client through the output stream

/** *  export Excel report form  * @return */
@RequestMapping("/exportBusinessReport")
public Result exportBusinessReport(HttpServletRequest request, HttpServletResponse response){
    
  try{
    
    // Call report service remotely to get report data 
    Map<String, Object> result = reportService.getBusinessReport();
    
    // Get the returned result data , Prepare to write report data to Excel In file 
    String reportDate = (String) result.get("reportDate");
    Integer todayNewMember = (Integer) result.get("todayNewMember");
    Integer totalMember = (Integer) result.get("totalMember");
    Integer thisWeekNewMember = (Integer) result.get("thisWeekNewMember");
    Integer thisMonthNewMember = (Integer) result.get("thisMonthNewMember");
    Integer todayOrderNumber = (Integer) result.get("todayOrderNumber");
    Integer thisWeekOrderNumber = (Integer) result.get("thisWeekOrderNumber");
    Integer thisMonthOrderNumber = (Integer) result.get("thisMonthOrderNumber");
    Integer todayVisitsNumber = (Integer) result.get("todayVisitsNumber");
    Integer thisWeekVisitsNumber = (Integer) result.get("thisWeekVisitsNumber");
    Integer thisMonthVisitsNumber = (Integer) result.get("thisMonthVisitsNumber");
    List<Map> hotSetmeal = (List<Map>) result.get("hotSetmeal");
	
    // get Excel Template file absolute path 
    String temlateRealPath = request.getSession().getServletContext().getRealPath("template") +
      											File.separator + "report_template.xlsx";
	
    // Read the template file and create Excel Table objects 
    XSSFWorkbook workbook = new XSSFWorkbook(new FileInputStream(new File(temlateRealPath)));
    XSSFSheet sheet = workbook.getSheetAt(0);
    
    XSSFRow row = sheet.getRow(2);
    row.getCell(5).setCellValue(reportDate);// date 

    row = sheet.getRow(4);
    row.getCell(5).setCellValue(todayNewMember);// Number of new members （ Today ）
    row.getCell(7).setCellValue(totalMember);// Total members 

    row = sheet.getRow(5);
    row.getCell(5).setCellValue(thisWeekNewMember);// Number of new members this week 
    row.getCell(7).setCellValue(thisMonthNewMember);// Number of new members this month 

    row = sheet.getRow(7);
    row.getCell(5).setCellValue(todayOrderNumber);// Number of appointments today  
    row.getCell(7).setCellValue(todayVisitsNumber);// Number of visits today 

    row = sheet.getRow(8);
    row.getCell(5).setCellValue(thisWeekOrderNumber);// Number of appointments this week 
    row.getCell(7).setCellValue(thisWeekVisitsNumber);// Number of visits this week 

    row = sheet.getRow(9);
    row.getCell(5).setCellValue(thisMonthOrderNumber);// Number of appointments this month 
    row.getCell(7).setCellValue(thisMonthVisitsNumber);// Number of visits this month 

    int rowNum = 12;
    for(Map map : hotSetmeal){
    // Hot packages 
      String name = (String) map.get("name");
      Long setmeal_count = (Long) map.get("setmeal_count");
      BigDecimal proportion = (BigDecimal) map.get("proportion");
      row = sheet.getRow(rowNum ++);
      row.getCell(4).setCellValue(name);// Package name 
      row.getCell(5).setCellValue(setmeal_count);// Number of appointments 
      row.getCell(6).setCellValue(proportion.doubleValue());// Proportion 
    }

    // Download files through the output stream 
    ServletOutputStream out = response.getOutputStream();
    response.setContentType("application/vnd.ms-excel");
    response.setHeader("content-Disposition", "attachment;filename=report.xlsx");
    workbook.write(out);
    
    out.flush();
    out.close();
    workbook.close();
    
    return null;
  }catch (Exception e){
    
    return new Result(false, MessageConstant.GET_BUSINESS_REPORT_FAIL,null);
  }
}