Day6 谷粒学院统计分析总结

Day6 谷粒学院统计分析总结

统计分析与定时任务

思路：
①创建对应的微服务service-sta
②创建后端接口接收参数type（数据类型），begin（开始日期），end（结束日期），最后就是在sta表中获取对应的数据。type这里需要做判断，可以采用switch case方式来选择的。
③写好前端路由和api。
④前端点击获取数据数组生成对应的图。这里的从后端返回的数据是数组，所以要分开list装日期和数量数组。最后放到map返回到前端。
⑤计时任务其实相对来说比较简单。在主启动类上面开启@EnableScheduling，然后就是创建一个任务类加入到spring容器。给任务方法加上@Schedule（cron=“时间表达式”）来指定要执行的时间。

遇到的问题：
①同步不成功
我的问题就是hostname没有设置到etc/hosts里面去。我发现这个问题是在canal的logs下面的example/example.log下找到问题的。如果你发现没有同步成功可以查看一下日志寻找准确的问题，这样子解决起来会更高效。

StaController

@RestController
@RequestMapping("/edusta/sta")
@CrossOrigin
@Slf4j
public class StatisticsDailyController {

    @Autowired
    StatisticsDailyService statisticsDailyService;

    @GetMapping("ok")
    public R ok(){
        return R.ok();
    }

    @PostMapping("registerCount/{day}")
    public R registerCount(@PathVariable("day")String day){
        statisticsDailyService.saveRegisterCount(day);
        return R.ok();
    }

    @GetMapping("showData/{type}/{begin}/{end}")
    public R getData(
            @PathVariable("type")String type,
            @PathVariable("begin")String begin,
            @PathVariable("end")String end
    ){
        Map<String,Object> map=statisticsDailyService.showData(type,begin,end);
        log.info(String.valueOf(map));
        return R.ok().data(map);
    }
}

StaService

@Override
    public Map<String, Object> showData(String type, String begin, String end) {
        //1.根据条件查询对应的数据
        QueryWrapper<StatisticsDaily> queryWrapper=new QueryWrapper<>();
        queryWrapper.between("date_calculated",begin,end);
        queryWrapper.select("date_calculated",type);
        List<StatisticsDaily> list = baseMapper.selectList(queryWrapper);

        //2.封装到日期list和数量list里面去.
        List<String> date_calculatedList =new ArrayList<>();
        List<Integer> numDataList=new ArrayList<>();
        for(int i=0;i<list.size();i++){
            StatisticsDaily statisticsDaily = list.get(i);
            date_calculatedList.add(statisticsDaily.getDateCalculated());
            switch (type){
                case "register_num":
                    numDataList.add(statisticsDaily.getRegisterNum());
                    break;
                case "login_num":
                    numDataList.add(statisticsDaily.getLoginNum());
                    break;
                case "video_view_num":
                    numDataList.add(statisticsDaily.getVideoViewNum());
                    break;
                case "course_num":
                    numDataList.add(statisticsDaily.getCourseNum());
                    break;
                default:
                    break;
            }
        }


        //3.把数据封装到map里面去
        Map<String,Object> map=new HashMap<>();
        map.put("xlist",date_calculatedList);
        map.put("ylist",numDataList);
        return map;
    }

create.vue

<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="日期">
        <el-date-picker
          v-model="day"
          type="date"
          placeholder="选择要统计的日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button :disabled="btnDisabled" type="primary" @click="create()"
        >生成</el-button
      >
    </el-form>
  </div>
</template>
<script>
import staApi from "@/api/sta"
export default {
   data(){
       return {
           day:"",
           btnDisabled:false
       }
   },
   created(){
   },
   methods:{
       create(){
             staApi.registerCount(this.day)
             .then(response=>{
                 this.btnDisabled=false;
                 //1.提示
                 this.$message({
                     type:"success",
                     message:"成功注册"
                 })
                 //2.路由
                 this.$router.push({path:"/sta/show"})
             })
       }
   }
   
}
</script>

show.vue

<template>
  <div class="app-container">
    <!--表单-->
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select v-model="searchObj.type" clearable placeholder="请选择">
          <el-option label="学员登录数统计" value="login_num" />
          <el-option label="学员注册数统计" value="register_num" />
          <el-option label="课程播放数统计" value="video_view_num" />
          <el-option label="每日课程数统计" value="course_num" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.begin"
          type="date"
          placeholder="选择开始日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchObj.end"
          type="date"
          placeholder="选择截止日期"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-button
        :disabled="btnDisabled"
        type="primary"
        icon="el-icon-search"
        @click="showChart()"
        >查询</el-button
      >
    </el-form>
    <div class="chart-container">
      <div id="chart" class="chart" style="height: 500px; width: 100%" />
    </div>
  </div>
</template>
<script>
import echarts from "echarts";
import staApi from "@/api/sta"
export default {
  data() {
    return {
      searchObj: {},
      btnDisabled: false,
      xData:[],
      yData:[]
    };
  },
  created() {},
  methods: {
    showChart() {
        staApi.getData(this.searchObj)
        .then(response=>{
            //1.给数据赋值
            this.xData=response.data.xlist;
            this.yData=response.data.ylist;
            alert(this.xData)
            //2.展示图
            this.setChart();
        })
    },
    setChart() {
      // 基于准备好的dom，初始化echarts实例
      this.chart = echarts.init(document.getElementById("chart"));
      // console.log(this.chart)
      // 指定图表的配置项和数据
      var option = {
        // x轴是类目轴（离散数据）,必须通过data设置类目数据
        xAxis: {
          type: "category",
          data: this.xData,
        },
        // y轴是数据轴（连续数据）
        yAxis: {
          type: "value",
        },
        // 系列列表。每个系列通过 type 决定自己的图表类型
        series: [
          {
            // 系列中的数据内容数组
            data: this.yData,
            // 折线图
            type: "line",
          },
        ],
      };
      this.chart.setOption(option);
    },
  },
};
</script>

Schedule

@Component
public class ScheduleTask {
    @Autowired
    StatisticsDailyService statisticsDailyService;

    @Scheduled(cron = "0 0 1 * * ?")
    public void task2(){
        //把前一天的内容添加到表中
        statisticsDailyService.saveRegisterCount(DateUtil.formatDate(DateUtil.addDays(new Date(),-1)));
    }
}