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

View File

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