add 每日新增用户和每日新增支付金额图表

ruoyi-admin/src/main/java/com/ruoyi/web/controller/app/AppPayOrderController.java

@@ -1,17 +1,11 @@
 package com.ruoyi.web.controller.app;
 
 import java.util.List;
+import java.util.Map;
 import javax.servlet.http.HttpServletResponse;
 import org.springframework.security.access.prepost.PreAuthorize;
 import org.springframework.beans.factory.annotation.Autowired;
-import org.springframework.web.bind.annotation.GetMapping;
+import org.springframework.web.bind.annotation.*;
-import org.springframework.web.bind.annotation.PostMapping;
-import org.springframework.web.bind.annotation.PutMapping;
-import org.springframework.web.bind.annotation.DeleteMapping;
-import org.springframework.web.bind.annotation.PathVariable;
-import org.springframework.web.bind.annotation.RequestBody;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
 import com.ruoyi.common.annotation.Log;
 import com.ruoyi.common.core.controller.BaseController;
 import com.ruoyi.common.core.domain.AjaxResult;
@@ -101,4 +95,15 @@ public class AppPayOrderController extends BaseController
     {
         return toAjax(appPayOrderService.deleteAppPayOrderByIds(ids));
     }
+    
+    /**
+     * 查询每日新增支付金额统计
+     */
+    @PreAuthorize("@ss.hasPermi('app:order:list')")
+    @GetMapping("/dailyPayAmount")
+    public AjaxResult dailyPayAmount(@RequestParam(defaultValue = "30") Integer days)
+    {
+        List<Map<String, Object>> list = appPayOrderService.selectDailyPayAmount(days);
+        return AjaxResult.success(list);
+    }
 }

ruoyi-admin/src/main/java/com/ruoyi/web/controller/system/SysUserController.java

@@ -290,4 +290,14 @@ public class SysUserController extends BaseController
         ajax.put("user", sysUser);
         return ajax;
     }
+
+    /**
+     * 获取每天新增用户数量
+     */
+    @PreAuthorize("@ss.hasPermi('system:user:list')")
+    @GetMapping("/countByDay")
+    public AjaxResult countByDay()
+    {
+        return AjaxResult.success(userService.selectUserCountByDay());
+    }
 }

ruoyi-system/src/main/java/com/ruoyi/app/mapper/AppPayOrderMapper.java

@@ -1,6 +1,8 @@
 package com.ruoyi.app.mapper;
 
 import java.util.List;
+import java.util.Map;
+
 import com.ruoyi.app.domain.AppPayOrder;
 
 /**
@@ -66,4 +68,12 @@ public interface AppPayOrderMapper
      * @return 结果
      */
     public int deleteAppPayOrderByIds(Long[] ids);
+    
+    /**
+     * 查询每日新增支付金额统计
+     * 
+     * @param days 天数
+     * @return 统计结果
+     */
+    public List<Map<String, Object>> selectDailyPayAmount(Integer days);
 }

ruoyi-system/src/main/java/com/ruoyi/app/service/IAppPayOrderService.java

@@ -1,6 +1,8 @@
 package com.ruoyi.app.service;
 
 import java.util.List;
+import java.util.Map;
+
 import com.ruoyi.app.domain.AppPayOrder;
 
 /**
@@ -58,4 +60,12 @@ public interface IAppPayOrderService
      * @return 结果
      */
     public int deleteAppPayOrderById(Long id);
+    
+    /**
+     * 查询每日新增支付金额统计
+     * 
+     * @param days 天数
+     * @return 统计结果
+     */
+    public List<Map<String, Object>> selectDailyPayAmount(Integer days);
 }

ruoyi-system/src/main/java/com/ruoyi/app/service/impl/AppPayOrderServiceImpl.java

@@ -1,6 +1,8 @@
 package com.ruoyi.app.service.impl;
 
 import java.util.List;
+import java.util.Map;
+
 import com.ruoyi.common.utils.DateUtils;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Service;
@@ -92,4 +94,16 @@ public class AppPayOrderServiceImpl implements IAppPayOrderService
     {
         return appPayOrderMapper.deleteAppPayOrderById(id);
     }
+    
+    /**
+     * 查询每日新增支付金额统计
+     * 
+     * @param days 天数
+     * @return 统计结果
+     */
+    @Override
+    public List<Map<String, Object>> selectDailyPayAmount(Integer days)
+    {
+        return appPayOrderMapper.selectDailyPayAmount(days);
+    }
 }

ruoyi-system/src/main/java/com/ruoyi/system/mapper/SysUserMapper.java

@@ -1,6 +1,8 @@
 package com.ruoyi.system.mapper;
 
 import java.util.List;
+import java.util.Map;
+
 import org.apache.ibatis.annotations.Param;
 import com.ruoyi.common.core.domain.entity.SysUser;
 import org.apache.ibatis.annotations.Update;
@@ -145,4 +147,9 @@ public interface SysUserMapper
      */
     @Update("update sys_user SET integral = integral-#{integral} where user_id = #{userId}")
     public int delIntegralByUserId(@Param("integral") int integral ,@Param("userId")Long userId);
+
+    /**
+     * 查询每日新增用户数
+     */
+    public List<Map<String, Object>> selectUserCountByDay();
 }

ruoyi-system/src/main/java/com/ruoyi/system/service/ISysUserService.java

@@ -1,6 +1,8 @@
 package com.ruoyi.system.service;
 
 import java.util.List;
+import java.util.Map;
+
 import com.ruoyi.common.core.domain.entity.SysUser;
 
 /**
@@ -194,6 +196,11 @@ public interface ISysUserService
      */
     public int deleteUserByIds(Long[] userIds);
 
+    /**
+     * 查询每日新增用户数
+     */
+    public List<Map<String, Object>> selectUserCountByDay();
+
     /**
      * 导入用户数据
      * 

ruoyi-system/src/main/java/com/ruoyi/system/service/impl/SysUserServiceImpl.java

@@ -2,6 +2,7 @@ package com.ruoyi.system.service.impl;
 
 import java.util.ArrayList;
 import java.util.List;
+import java.util.Map;
 import java.util.stream.Collectors;
 import javax.validation.Validator;
 import org.slf4j.Logger;
@@ -541,4 +542,15 @@ public class SysUserServiceImpl implements ISysUserService
         }
         return successMsg.toString();
     }
+
+    /**
+     * 查询每天新增用户数量
+     *
+     * @return 结果
+     */
+    @Override
+    public List<Map<String, Object>> selectUserCountByDay()
+    {
+        return userMapper.selectUserCountByDay();
+    }
 }

ruoyi-system/src/main/resources/mapper/app/AppPayOrderMapper.xml

@@ -95,4 +95,33 @@ PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
             #{id}
         </foreach>
     </delete>
+    
+    <!-- 查询每日新增支付金额统计 -->
+    <select id="selectDailyPayAmount" parameterType="Integer" resultType="map">
+        SELECT 
+            dates.date AS date,
+            IFNULL(SUM(pay.amount), 0) AS amount
+        FROM (
+            SELECT DATE_FORMAT(DATE_SUB(CURDATE(), INTERVAL (a.a + (10 * b.a)) DAY), '%Y-%m-%d') AS date
+            FROM (
+                SELECT 0 AS a UNION ALL SELECT 1 UNION ALL SELECT 2 UNION ALL SELECT 3 UNION ALL SELECT 4 UNION ALL 
+                SELECT 5 UNION ALL SELECT 6 UNION ALL SELECT 7 UNION ALL SELECT 8 UNION ALL SELECT 9
+            ) AS a
+            CROSS JOIN (
+                SELECT 0 AS a UNION ALL SELECT 1 UNION ALL SELECT 2 UNION ALL SELECT 3 UNION ALL SELECT 4 UNION ALL 
+                SELECT 5 UNION ALL SELECT 6 UNION ALL SELECT 7 UNION ALL SELECT 8 UNION ALL SELECT 9
+            ) AS b
+        ) AS dates
+        LEFT JOIN (
+            SELECT 
+                DATE_FORMAT(pay_time, '%Y-%m-%d') AS date,
+                amount
+            FROM app_pay_order 
+            WHERE pay_time >= DATE_SUB(CURDATE(), INTERVAL #{days} DAY)
+              AND status = 1
+        ) AS pay ON dates.date = pay.date
+        WHERE dates.date >= DATE_SUB(CURDATE(), INTERVAL #{days} DAY)
+        GROUP BY dates.date
+        ORDER BY dates.date
+    </select>
 </mapper>

ruoyi-system/src/main/resources/mapper/system/SysUserMapper.xml

@@ -228,4 +228,8 @@
 		</foreach>
 	</delete>
 
-</mapper> 
+	<select id="selectUserCountByDay" resultType="map">
+		select date_format(create_time,'%Y-%m-%d') as date, count(*) as count from sys_user where del_flag = '0' and create_time >= DATE_SUB(CURDATE(), INTERVAL 30 DAY) group by date_format(create_time,'%Y-%m-%d') order by date
+	</select>
+
+</mapper>

ruoyi-ui/src/api/system/user.js

@@ -133,3 +133,11 @@ export function deptTreeSelect() {
     method: 'get'
   })
 }
+
+// 查询每日新增用户数量
+export function getUserCountByDay() {
+  return request({
+    url: '/system/user/countByDay',
+    method: 'get'
+  })
+}

ruoyi-ui/src/views/index.vue

@@ -2,7 +2,21 @@
   <div class="app-container home">
     <el-row :gutter="20">
       <el-col :sm="24" :lg="24">
-        <h2>南音工作室</h2>
+        <!-- 每日新增用户折线图 -->
+        <el-card style="margin-bottom: 20px;">
+          <div slot="header" class="clearfix">
+            <span>每日新增用户</span>
+          </div>
+          <div ref="userChart" style="height: 400px;"></div>
+        </el-card>
+        
+        <!-- 每日新增支付金额折线图 -->
+        <el-card style="margin-bottom: 20px;">
+          <div slot="header" class="clearfix">
+            <span>每日新增支付金额</span>
+          </div>
+          <div ref="payChart" style="height: 400px;"></div>
+        </el-card>
 <!--        <blockquote class="text-warning" style="font-size: 14px">
           领取阿里云通用云产品1888优惠券
           <br />
@@ -942,18 +956,127 @@
 </template>
 
 <script>
+import { getUserCountByDay } from '@/api/system/user';
+import { getDailyPayAmount } from '@/api/app/payStatistics';
+import * as echarts from 'echarts';
+
 export default {
   name: "Index",
   data() {
     return {
       // 版本号
-      version: "3.8.6"
+      version: "3.8.6",
+      // 用户统计数据
+      userStats: {
+        dates: [],
+        counts: []
+      },
+      // 支付统计数据
+      payStats: {
+        dates: [],
+        amounts: []
+      }
     };
   },
+  mounted() {
+    this.initUserChart();
+    this.initPayChart();
+  },
   methods: {
     goTarget(href) {
       window.open(href, "_blank");
-    }
+    },
+    // 初始化用户统计图表
+      initUserChart() {
+        // 获取后端数据
+        getUserCountByDay().then(response => {
+          // 解析后端返回的数据
+          const data = response.data || [];
+          this.userStats.dates = data.map(item => item.date);
+          this.userStats.counts = data.map(item => item.count);
+          
+          // 初始化echart实例
+          const userChart = echarts.init(this.$refs.userChart);
+          
+          // 配置图表选项
+          const option = {
+            title: {
+              text: '近30日新增用户趋势'
+            },
+            tooltip: {
+              trigger: 'axis'
+            },
+            xAxis: {
+              type: 'category',
+              data: this.userStats.dates
+            },
+            yAxis: {
+              type: 'value'
+            },
+            series: [{
+              data: this.userStats.counts,
+              type: 'line',
+              smooth: true,
+              areaStyle: {}
+            }]
+          };
+          
+          // 使用配置项显示图表
+          userChart.setOption(option);
+          
+          // 监听窗口大小变化，自适应调整图表大小
+          window.addEventListener('resize', () => userChart.resize());
+        });
+      },
+      // 初始化支付统计图表
+      initPayChart() {
+        // 获取后端数据
+        getDailyPayAmount().then(response => {
+          // 解析后端返回的数据
+          const data = response.data || [];
+          this.payStats.dates = data.map(item => item.date);
+          this.payStats.amounts = data.map(item => item.amount);
+          
+          // 初始化echart实例
+          const payChart = echarts.init(this.$refs.payChart);
+          
+          // 配置图表选项
+          const option = {
+            title: {
+              text: '近30日新增支付金额趋势'
+            },
+            tooltip: {
+              trigger: 'axis',
+              formatter: params => {
+                const value = params[0].value;
+                return `${params[0].axisValue}<br/>${params[0].marker}${value}元`;
+              }
+            },
+            xAxis: {
+              type: 'category',
+              data: this.payStats.dates
+            },
+            yAxis: {
+              type: 'value',
+              axisLabel: {
+                formatter: value => `${value}元`
+              }
+            },
+            series: [{
+              data: this.payStats.amounts,
+              type: 'line',
+              smooth: true,
+              areaStyle: {}
+            }]
+          };
+          
+          // 使用配置项显示图表
+          payChart.setOption(option);
+          
+          // 监听窗口大小变化，自适应调整图表大小
+          window.addEventListener('resize', () => payChart.resize());
+        });
+      }
   }
 };
 </script>