feat(统计业务): 课程统计添加排序;用户统计修改数据卡片显示;

- 更新课程统计和标签统计页面,添加自定义排序功能
- 实现刷新按钮,重置排序状态并重新获取数据
- 优化数据请求,支持排序参数的传递
- 更新用户统计页面,调整显示逻辑以提升用户体验
This commit is contained in:
2026-04-09 16:52:36 +08:00
parent 3e1b8917a8
commit b71a4464e7
3 changed files with 78 additions and 17 deletions

View File

@@ -45,7 +45,7 @@
<el-button <el-button
type="primary" type="primary"
size="small" size="small"
@click="getDataList" @click="handleRefresh"
>刷新</el-button> >刷新</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@@ -59,11 +59,13 @@
<div class="table-container" ref="tableContainer"> <div class="table-container" ref="tableContainer">
<el-table <el-table
ref="dataTable"
:data="dataList" :data="dataList"
border border
:header-cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
:max-height="tableHeight" :max-height="tableHeight"
@sort-change="handleSortChange"
> >
<el-table-column prop="courseTitle" label="课程名称" min-width="150" /> <el-table-column prop="courseTitle" label="课程名称" min-width="150" />
<el-table-column prop="catalogueTitle" label="目录名" min-width="150" /> <el-table-column prop="catalogueTitle" label="目录名" min-width="150" />
@@ -71,10 +73,13 @@
<el-table-column <el-table-column
:label="timeType === 'year' ? '年销量' : '月销量'" :label="timeType === 'year' ? '年销量' : '月销量'"
prop="sales" prop="sales"
sortable="custom"
min-width="100" min-width="100"
/> />
<el-table-column <el-table-column
:label="timeType === 'year' ? '年销售额(微信+支付宝+银行+天医币)' : '月销售额(微信+支付宝+银行+天医币)'" :label="timeType === 'year' ? '年销售额(微信+支付宝+银行+天医币)' : '月销售额(微信+支付宝+银行+天医币)'"
prop="salesFee"
sortable="custom"
min-width="280" min-width="280"
> >
<template slot-scope="scope"> <template slot-scope="scope">
@@ -82,7 +87,9 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:label="timeType === 'year' ? '年销售额(微信+支付宝+银行)' : '月销售额(微信+支付宝+银行)'" :label="timeType === 'year' ? '年销售额(微信+支付宝+银行)' : '月销售额(微信+支付宝+银行)'"
prop="cashFee"
sortable="custom"
min-width="250" min-width="250"
> >
<template slot-scope="scope"> <template slot-scope="scope">
@@ -235,7 +242,9 @@ export default {
timeType: 'year', timeType: 'year',
currentDate: new Date(), currentDate: new Date(),
dataForm: { dataForm: {
courseTitle: '' courseTitle: '',
sortKey: '',
sortValue: ''
}, },
dataList: [], dataList: [],
yearDetailDataList: [], yearDetailDataList: [],
@@ -290,6 +299,19 @@ export default {
} }
this.getDataList() this.getDataList()
}, },
handleSortChange({ prop, order }) {
this.dataForm.sortKey = prop
this.dataForm.sortValue = order
this.getDataList()
},
handleRefresh() {
this.dataForm.sortKey = ''
this.dataForm.sortValue = ''
this.$nextTick(() => {
this.$refs.dataTable.clearSort()
})
this.getDataList()
},
getDataList() { getDataList() {
const dateStr = this.timeType === 'year' const dateStr = this.timeType === 'year'
? this.currentDate.getFullYear().toString() ? this.currentDate.getFullYear().toString()
@@ -301,7 +323,9 @@ export default {
date: dateStr, date: dateStr,
page: this.page, page: this.page,
limit: this.limit, limit: this.limit,
courseTitle: this.dataForm.courseTitle courseTitle: this.dataForm.courseTitle,
sortKey: this.dataForm.sortKey,
sortValue: this.dataForm.sortValue
}) })
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {

View File

@@ -37,7 +37,7 @@
<el-button <el-button
type="primary" type="primary"
size="small" size="small"
@click="getDataList" @click="handleRefresh"
>刷新</el-button> >刷新</el-button>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
@@ -51,17 +51,31 @@
<div class="table-container" ref="tableContainer"> <div class="table-container" ref="tableContainer">
<el-table <el-table
ref="dataTable"
:data="dataList" :data="dataList"
border border
:header-cell-style="{ textAlign: 'center' }" :header-cell-style="{ textAlign: 'center' }"
:cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }"
:max-height="tableHeight" :max-height="tableHeight"
@sort-change="handleSortChange"
> >
<el-table-column prop="courseLabel" label="分类" min-width="150" /> <el-table-column prop="courseLabel" label="分类" min-width="150" />
<el-table-column prop="courseCount" label="总销售门数" min-width="120" /> <el-table-column
<el-table-column prop="sales" label="总销量" min-width="100" /> prop="courseCount"
label="总销售门数"
sortable="custom"
min-width="120"
/>
<el-table-column
prop="sales"
label="总销量"
sortable="custom"
min-width="100"
/>
<el-table-column <el-table-column
:label="timeType === 'year' ? '年销售额(微信+支付宝+银行+天医币)' : '月销售额(微信+支付宝+银行+天医币)'" :label="timeType === 'year' ? '年销售额(微信+支付宝+银行+天医币)' : '月销售额(微信+支付宝+银行+天医币)'"
prop="salesFee"
sortable="custom"
min-width="280" min-width="280"
> >
<template slot-scope="scope"> <template slot-scope="scope">
@@ -70,6 +84,8 @@
</el-table-column> </el-table-column>
<el-table-column <el-table-column
:label="timeType === 'year' ? '年销售额(微信+支付宝+银行)' : '月销售额(微信+支付宝+银行)'" :label="timeType === 'year' ? '年销售额(微信+支付宝+银行)' : '月销售额(微信+支付宝+银行)'"
prop="cashFee"
sortable="custom"
min-width="250" min-width="250"
> >
<template slot-scope="scope"> <template slot-scope="scope">
@@ -89,7 +105,10 @@ export default {
return { return {
timeType: 'year', timeType: 'year',
currentDate: new Date(), currentDate: new Date(),
dataForm: {}, dataForm: {
sortKey: '',
sortValue: ''
},
dataList: [], dataList: [],
tableHeight: null tableHeight: null
} }
@@ -135,6 +154,19 @@ export default {
} }
this.getDataList() this.getDataList()
}, },
handleSortChange({ prop, order }) {
this.dataForm.sortKey = prop
this.dataForm.sortValue = order
this.getDataList()
},
handleRefresh() {
this.dataForm.sortKey = ''
this.dataForm.sortValue = ''
this.$nextTick(() => {
this.$refs.dataTable.clearSort()
})
this.getDataList()
},
getDataList() { getDataList() {
const dateStr = this.timeType === 'year' const dateStr = this.timeType === 'year'
? this.currentDate.getFullYear().toString() ? this.currentDate.getFullYear().toString()
@@ -143,7 +175,9 @@ export default {
url: http.adornUrl('/master/statisticsBusiness/getCourseSaleInfoByCourseLabel'), url: http.adornUrl('/master/statisticsBusiness/getCourseSaleInfoByCourseLabel'),
method: 'post', method: 'post',
data: http.adornData({ data: http.adornData({
date: dateStr date: dateStr,
sortKey: this.dataForm.sortKey,
sortValue: this.dataForm.sortValue
}) })
}).then(({ data }) => { }).then(({ data }) => {
if (data && data.code === 0) { if (data && data.code === 0) {

View File

@@ -21,8 +21,8 @@
</el-form> </el-form>
</div> </div>
<div class="summary-section"> <div v-if="mode !== 'null'" class="summary-section">
<div class="summary-card"> <div v-if="showLoginAnd30DaySummary" class="summary-card">
<div class="summary-card__label">{{ timePrefix }}登录人数</div> <div class="summary-card__label">{{ timePrefix }}登录人数</div>
<div class="summary-card__value">{{ summary.loginCount }}</div> <div class="summary-card__value">{{ summary.loginCount }}</div>
</div> </div>
@@ -30,7 +30,7 @@
<div class="summary-card__label">{{ timePrefix }}注册人数</div> <div class="summary-card__label">{{ timePrefix }}注册人数</div>
<div class="summary-card__value">{{ summary.createCount }}</div> <div class="summary-card__value">{{ summary.createCount }}</div>
</div> </div>
<div class="summary-card"> <div v-if="showLoginAnd30DaySummary" class="summary-card">
<div class="summary-card__label">截止今日 近30天内活跃人数</div> <div class="summary-card__label">截止今日 近30天内活跃人数</div>
<div class="summary-card__value">{{ summary.userCountFor30Day }}</div> <div class="summary-card__value">{{ summary.userCountFor30Day }}</div>
</div> </div>
@@ -51,7 +51,7 @@
<el-table <el-table
:data="tableData" :data="tableData"
border border
:height="mode !== 'null' ? 470 : 520" :height="mode !== 'null' ? 470 : 640"
: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' }"
> >
@@ -172,11 +172,14 @@ export default {
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 '当月'
// if (this.mode === 'year') return '当年' if (this.mode === 'year') return '当年'
return '当日' return '当日'
}, },
showLoginAnd30DaySummary() {
return this.mode === 'day'
},
pickerOptions() { pickerOptions() {
return { return {
disabledDate(time) { disabledDate(time) {