feat(统计业务): 新增全部用户统计页面及相关功能

- 新增用户统计页面,支持按日、月、年统计用户数据
- 引入用户统计基础组件,包含数据展示和导出功能
- 更新主统计页面以集成新的统计选项
This commit is contained in:
2026-03-23 16:02:46 +08:00
parent b5f280b02f
commit 301b3a2582
4 changed files with 36 additions and 14 deletions

View File

@@ -0,0 +1,14 @@
<template>
<userStatisticsBase mode="null" />
</template>
<script>
import userStatisticsBase from './userStatisticsBase'
export default {
components: {
userStatisticsBase
}
}
</script>

View File

@@ -1,9 +1,10 @@
<template>
<div class="mod-config">
<el-tabs v-model="activeTab" type="card">
<el-tab-pane label="首页" name="homeUser" />
<el-tab-pane label="当日" name="dayUser" />
<el-tab-pane label="月度" name="monthUser" />
<el-tab-pane label="年度" name="yearUser" />
<el-tab-pane label="全部" name="allUser" />
<el-tab-pane label="留存率" name="retainUser" />
</el-tabs>
<keep-alive>
@@ -13,21 +14,23 @@
</template>
<script>
import homeUser from './homeUser'
import allUser from './allUser'
import dayUser from './dayUser'
import monthUser from './monthUser'
import yearUser from './yearUser'
import retainUser from './retainUser'
export default {
components: {
homeUser,
dayUser,
monthUser,
yearUser,
allUser,
retainUser
},
data() {
return {
activeTab: 'homeUser'
activeTab: 'dayUser'
}
}
}

View File

@@ -1,6 +1,6 @@
<template>
<div class="user-statistics-page" v-loading="loading">
<div v-if="mode !== 'day'" class="query-section">
<div v-if="mode !== 'null'" class="query-section">
<el-form :inline="true" @keyup.enter.native="getDataList">
<el-form-item :label="queryLabel">
<el-date-picker
@@ -50,7 +50,7 @@
<el-table
:data="tableData"
border
:height="mode !== 'day' ? 470 : 520"
:height="mode !== 'null' ? 470 : 520"
:header-cell-style="{ textAlign: 'center', padding: '6px 0' }"
:cell-style="{ textAlign: 'center', padding: '6px 0' }"
>
@@ -158,20 +158,23 @@ export default {
pickerType() {
if (this.mode === 'day') return 'date'
if (this.mode === 'month') return 'month'
return 'year'
if (this.mode === 'year') return 'year'
return ''
},
displayFormat() {
if (this.mode === 'day') return 'yyyy-MM-dd'
if (this.mode === 'month') return 'yyyy-MM'
return 'yyyy'
if (this.mode === 'year') return 'yyyy'
return ''
},
valueFormat() {
return this.displayFormat
},
timePrefix() {
if (this.mode === 'day') return '当日'
if (this.mode === 'month') return '当月'
return '当年'
// if (this.mode === 'day') return '当日'
// if (this.mode === 'month') return '当月'
// if (this.mode === 'year') return '当年'
return '当日'
},
pickerOptions() {
return {
@@ -213,7 +216,8 @@ export default {
const now = new Date()
if (this.mode === 'day') return formatDate(now)
if (this.mode === 'month') return formatMonth(now)
return formatYear(now)
if (this.mode === 'year') return formatYear(now)
return null
},
normalizeRows(userList = []) {
return userList.map((item) => ({
@@ -281,12 +285,13 @@ export default {
data: http.adornData({
date: this.currentDate
}),
responseType: 'blob'
responseType: 'blob',
timeout: 0
}).then((response) => {
const blob = new Blob([response.data])
const link = document.createElement('a')
link.href = URL.createObjectURL(blob)
link.download = `用户统计报表-${this.currentDate}.xlsx`
link.download = `用户统计报表-${this.currentDate || '全部'}.xlsx`
link.click()
URL.revokeObjectURL(link.href)
}).catch(() => {