spring+vue按照数据库中的缴费时间统计缴费总数

您可以通过以下步骤来实现按照数据库中的缴费时间统计缴费总数：

1. 在后端(Spring)中，编写一个查询方法，使用JPA或MyBatis等ORM框架，从数据库中查询缴费信息，并按照缴费时间排序。

2. 根据需求，您可以选择按照年、月、日等时间单位进行统计。例如，如果您需要按照月份统计缴费总数，则可以编写一个方法，对缴费信息进行按月份分组，然后统计每个月份的缴费总数。

3. 将统计结果返回给前端(Vue)，并在页面上展示出来。

下面是一个简单的示例代码，用于演示如何按照月份统计缴费总数：

// 在后端(Spring)中编写一个查询方法
@GetMapping("/payment/statistics")
public List<Map<String, Object>> getPaymentStatistics() {
    // 从数据库中查询缴费信息，并按照缴费时间排序
    List<Payment> payments = paymentRepository.findAll(Sort.by("paymentTime"));

    // 使用Java 8的Stream API，按照月份分组，并统计每个月份的缴费总数
    Map<String, Double> statistics = payments.stream()
        .collect(Collectors.groupingBy(payment -> {
            // 将缴费时间转换为月份字符串，例如："2022-01"
            return payment.getPaymentTime().format(DateTimeFormatter.ofPattern("yyyy-MM"));
        }, Collectors.summingDouble(Payment::getAmount)));

    // 将统计结果转换为List<Map<String, Object>>，方便前端使用
    List<Map<String, Object>> result = new ArrayList<>();
    for (String month : statistics.keySet()) {
        Map<String, Object> item = new HashMap<>();
        item.put("month", month);
        item.put("amount", statistics.get(month));
        result.add(item);
    }

    return result;
}

在前端(Vue)中，您可以通过调用后端接口，获取缴费统计结果，并使用图表、表格等方式展示出来。例如，使用ECharts库绘制一个折线图，展示每个月份的缴费总数：

<template>
  <div>
    <div ref="chart" style="height: 500px;"></div>
  </div>
</template>

<script>
import echarts from 'echarts'

export default {
  mounted() {
    // 调用后端接口，获取缴费统计结果
    fetch('/payment/statistics')
      .then(response => response.json())
      .then(data => {
        // 将统计结果转换为折线图的数据格式
        const xAxisData = data.map(item => item.month)
        const seriesData = data.map(item => item.amount)

        // 使用ECharts库，绘制一个折线图
        const chart = echarts.init(this.$refs.chart)
        chart.setOption({
          xAxis: { data: xAxisData },
          yAxis: {},
          series: [{ type: 'line', data: seriesData }]
        })
      })
  }
}
</script>