feat(统计业务): 新增全部用户统计页面及相关功能
- 新增用户统计页面,支持按日、月、年统计用户数据 - 引入用户统计基础组件,包含数据展示和导出功能 - 更新主统计页面以集成新的统计选项
This commit is contained in:
@@ -0,0 +1,14 @@
|
|||||||
|
<template>
|
||||||
|
<userStatisticsBase mode="null" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import userStatisticsBase from './userStatisticsBase'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
userStatisticsBase
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
@@ -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'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user