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>
|
||||
|
||||
</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>
|
||||
@@ -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,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>
|
||||
|
||||
Reference in New Issue
Block a user