add 每日新增用户和每日新增支付金额图表
This commit is contained in:
		@@ -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.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 org.springframework.web.bind.annotation.*;
 | 
			
		||||
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);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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());
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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);
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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);
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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);
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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();
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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();
 | 
			
		||||
 | 
			
		||||
    /**
 | 
			
		||||
     * 导入用户数据
 | 
			
		||||
     * 
 | 
			
		||||
 
 | 
			
		||||
@@ -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();
 | 
			
		||||
    }
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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>
 | 
			
		||||
@@ -228,4 +228,8 @@
 | 
			
		||||
		</foreach>
 | 
			
		||||
	</delete>
 | 
			
		||||
 | 
			
		||||
	<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>
 | 
			
		||||
@@ -133,3 +133,11 @@ export function deptTreeSelect() {
 | 
			
		||||
    method: 'get'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
// 查询每日新增用户数量
 | 
			
		||||
export function getUserCountByDay() {
 | 
			
		||||
  return request({
 | 
			
		||||
    url: '/system/user/countByDay',
 | 
			
		||||
    method: 'get'
 | 
			
		||||
  })
 | 
			
		||||
}
 | 
			
		||||
 
 | 
			
		||||
@@ -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,17 +956,126 @@
 | 
			
		||||
</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());
 | 
			
		||||
        });
 | 
			
		||||
      }
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user