feat(统计业务): 课程统计添加排序;用户统计修改数据卡片显示;
- 更新课程统计和标签统计页面,添加自定义排序功能 - 实现刷新按钮,重置排序状态并重新获取数据 - 优化数据请求,支持排序参数的传递 - 更新用户统计页面,调整显示逻辑以提升用户体验
This commit is contained in:
@@ -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">
|
||||||
@@ -83,6 +88,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">
|
||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
@@ -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) {
|
||||||
|
|||||||
Reference in New Issue
Block a user