读取Excel 和显示预约人数

上传文件导入属性

上传文件

java 复制代码

<el-upload action="http://127.0.0.1/ordersetting/upload"
                     name="excelFile" :show-file-list="false"
                     :on-success="handleSuccess"
            :before-upload="beforeUpload">
            <el-button type="primary">上传文件</el-button>
          </el-upload>

action: 上传接口地址 http://127.0.0.1/ordersetting/upload

跳转： /ordersetting/upload

后端：读取媒体文件获取里面的属性装到集合里面

//Controller

java 复制代码

@RequestMapping("/upload")
    @ResponseBody
    public Result upload( MultipartFile excelFile){
        try {
            List<String[]> list = POIUtils.readExcel(excelFile);//读取Excel
            List<OrderSetting> data = new ArrayList();//创建集合
            for (String[] strings : list) {
                String orderDate = strings[0];//预约日期
                String number = strings[1];//可预约人数
                OrderSetting orderSetting = new OrderSetting(
                        OrderListDate(orderDate),
                        Integer.parseInt(number)
                );//封装数据
                data.add(orderSetting);//添加到集合
            }
            orderSettingService.addUpload(data);
            return new Result(true, MessageConstant.IMPORT_ORDERSETTING_SUCCESS);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false,MessageConstant.IMPORT_ORDERSETTING_FAIL );
        }
    }

orderseetting

java 复制代码

    private Integer id ;

    @DateTimeFormat(pattern = "yyyy-MM-dd")  // 后端接收时用
    @JsonFormat(pattern = "yyyy-MM-dd", timezone = "GMT+8")  // JSON序列化时用
    private Date orderDate;//预约设置日期
    private int number;//可预约人数
    private int reservations ;//已预约人数

service

java 复制代码

  @Autowired
    private OrderSettingMapper orderSettingMapper ;
    @Override
    public void addUpload(List<OrderSetting>  data ) {
      
        orderSettingMapper.addUpload(data);
    }

判断预约日期是否过时

java 复制代码

  @Autowired
    private OrderSettingMapper orderSettingMapper ;
    @Override
    public void addUpload(List<OrderSetting>  data ) {
        //1、判断当前日期是否设置过
        for (OrderSetting orderSettingParam : data) {
            Date orderDate = orderSettingParam.getOrderDate();//预约日期
            OrderSetting orderSetting = orderSettingMapper.selectByDate(orderDate);
            if(orderSetting != null){
                //2、如果设置过则删除
                orderSettingMapper.delectNumber(orderDate);
            }
            //selectByDate 查询预约日期
            //delectNumber 删除预约人数
        }
        orderSettingMapper.addUpload(data);
    }

mapper

java 复制代码

  public void addUpload(@Param("data") List<OrderSetting> data);


    OrderSetting selectByDate(Date orderDate);

    void delectNumber(Date orderDate);

设置可预约人数

java 复制代码

  this.$ajax.post("/ordersetting/editNumberByDate", {
            number: value,//可预约人数
            orderDate: this.formatDate(day.getFullYear(), day.getMonth() + 1, day.getDate()) //日期
          }

java 复制代码

    void editNumberByDate(@Param("orderSetting") OrderSetting orderSetting);、


   <update id="editNumberByDate"  >
        UPDATE t_ordersetting
        SET number = #{orderSetting.number}
        WHERE orderDate = #{orderSetting.orderDate}
    </update>

前端显示可以预约的人数

// this.currentYear + "-" + this.currentMonth 前后发送后端的是年月

java 复制代码

     /*  this.leftobj = [
              { date: 1, number: 120, reservations: 1 },
              { date: 3, number: 120, reservations: 1 },
              { date: 4, number: 120, reservations: 120 },
              { date: 6, number: 120, reservations: 1 },
              { date: 8, number: 120, reservations: 1 }
          ];*/

        //发送ajax请求，根据当前页面对应的年月份查询数据库，封装成相应结果赋值给leftobj模型数据，用于页面展示  2020-6
        this.$ajax.post("/ordersetting/getOrderSettingByMonth?date=" + this.currentYear + "-" + this.currentMonth).
        then((res) => {
          if (res.flag) {
            this.leftobj = res.data;
            console.log(this.leftobj);
          } else {
            this.$message.error(res.message);
          }
        });

复制代码

Controller

java 复制代码

/**
     * 设置未来预约人数情况
     * @param date
     * @return
     */
        @RequestMapping("/getOrderSettingByMonth")
        @ResponseBody
    public Result getOrderSettingByMonth( String date){
        try {
            //返回的数据装到 lis 中 属性赋值到 map当中
            List<Map<String, Object>> OrderSettingList =  orderSettingService.getOrderSettingByMonth(date);
            return new Result(true,MessageConstant.GET_ORDERSETTING_SUCCESS,OrderSettingList);
        } catch (Exception e) {
            e.printStackTrace();
            return new Result(false,MessageConstant.GET_ORDERSETTING_FAIL);
        }
    }

数据库存储时间需要格式化一下在进行查询

java 复制代码

  <select id="getOrderSettingByMonth" resultType="java.util.Map">
        select
            DATE_FORMAT(orderDate,'%e') as date,number,reservations
        from t_ordersetting
        where DATE_FORMAT(orderDate ,'%Y-%c') = #{orderDate}
    </select>

图标

java 复制代码

 methods: {

            },
            tooltip: {},
            legend: {
              data: ['会员数量']
            },
            xAxis: {
              data: res.data.monthList //动态数据
            },
            yAxis: {
              type: 'value'
            },
            series: [{
              name: '会员数量',
              type: 'line',
              data: res.data.memberCount
            }]
          });

        });

java 复制代码

 this.$ajax.get("/report/getReportSetmeal").then(res => {
        myChart.setOption( {
          title: {
            text: '套餐预约占比',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              type: 'pie',
              radius: '50%',
              data: res.data,
              emphasis: {
           
                }
              }
            }
          ]
        });

查询结果放到一个对象里面 map

折线图

java 复制代码

   @RequestMapping("/getMemberReport")
//    @ResponseBody
    public Result getMemberReport(){
          Map<String , Object> map = reportMemberService.getMemberReport();
            return new Result(true, "成功" ,map);
       
    }

service

java 复制代码

 @Autowired
    private ReportMemberMapper reportMemberMapper;

    @Override
    public Map<String , Object> getMemberReport() {
        HashMap<String, Object> ReportMemberMap = new HashMap<>();// 创建一个Map集合
        List<Object> monthList = new ArrayList<>();  // 时间
        List<Object> memberReportList = new ArrayList<>(); //会员人数
        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM");// 设置时间格式
        Calendar c = Calendar.getInstance();// 创建一个日历对象
        c.add(Calendar.MONTH, -12);// 设置当前时间 一年钱
        for (int i = 0; i < 12; i++) {
            c.add(Calendar.MONTH, 1); //当前时间
            String format = sdf.format(c.getTime()); // 格式化时间
            monthList.add(format); // 添加时间集合
            Integer memberReport =  reportMemberMapper.getMemberReport(format);// 返回每个月会员的人数
            memberReportList.add(memberReport);// 添加会员人数
        }
        //x轴
        ReportMemberMap.put("monthList", monthList);// 添加时间
        //y轴
        ReportMemberMap.put("memberCount", memberReportList); // 添加会员人数


        return ReportMemberMap;
    }

查询数量

java 复制代码

    <select id="getMemberReport" resultType="int" parameterType="String">
        select  COUNT(*) from t_member where  DATE_FORMAT(regTime,'%Y-%m') = #{format}
    </select>

扇形图

java 复制代码

    @RequestMapping("/getReportSetmeal")
    @ResponseBody
    public Result getReportSetmeal(){
   
List<Map<String, Object>>  reportMemberlast = reportMemberService.getReportSetmeal();
            return new Result(true, GET_BUSINESS_REPORT_SUCCESS ,reportMemberlast);
       
    }

属性需要与前段的属性保持一致 orient: 'vertical',

java 复制代码

    <select id="getReportSetmeal" resultType="java.util.Map" >
        SELECT t1.`name`,count(*)   value  FROM t_setmeal t1 ,t_order t2 WHERE t1.id = t2.setmeal_id GROUP  BY t1.id
    </select>

读取Excel 和 显示预约人数

上传文件导入属性

设置可预约人数

前端显示可以预约的人数

图标

读取Excel 和显示预约人数