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

- 更新课程统计和标签统计页面，添加自定义排序功能 - 实现刷新按钮，重置排序状态并重新获取数据 - 优化数据请求，支持排序参数的传递 - 更新用户统计页面，调整显示逻辑以提升用户体验
2026-04-09 16:52:36 +08:00
parent 3e1b8917a8
commit b71a4464e7
3 changed files with 78 additions and 17 deletions
--- a/src/views/modules/statisticsBusiness/courseStatistics/courseStatistics.vue
+++ b/src/views/modules/statisticsBusiness/courseStatistics/courseStatistics.vue
@@ -45,7 +45,7 @@
        <el-button 
          type="primary"
          size="small"
-          @click="getDataList"
+          @click="handleRefresh"
        >刷新</el-button>
      </el-form-item>
      <el-form-item>
@@ -59,11 +59,13 @@
    
    <div class="table-container" ref="tableContainer">
      <el-table
+        ref="dataTable"
        :data="dataList"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        :max-height="tableHeight"
+        @sort-change="handleSortChange"
      >
        <el-table-column prop="courseTitle" label="课程名称" min-width="150" />
        <el-table-column prop="catalogueTitle" label="目录名" min-width="150" />
@@ -71,10 +73,13 @@
        <el-table-column 
          :label="timeType === 'year' ? '年销量' : '月销量'" 
          prop="sales" 
+          sortable="custom"
          min-width="100" 
        />
        <el-table-column 
          :label="timeType === 'year' ? '年销售额（微信+支付宝+银行+天医币）' : '月销售额（微信+支付宝+银行+天医币）'"
+          prop="salesFee"
+          sortable="custom"
          min-width="280"
        >
          <template slot-scope="scope">
@@ -83,6 +88,8 @@
        </el-table-column>
        <el-table-column 
          :label="timeType === 'year' ? '年销售额（微信+支付宝+银行）' : '月销售额（微信+支付宝+银行）'"
+          prop="cashFee"
+          sortable="custom"
          min-width="250"
        >
          <template slot-scope="scope">
@@ -235,7 +242,9 @@ export default {
      timeType: 'year',
      currentDate: new Date(),
      dataForm: {
-        courseTitle: ''
+        courseTitle: '',
+        sortKey: '',
+        sortValue: ''
      },
      dataList: [],
      yearDetailDataList: [],
@@ -290,6 +299,19 @@ export default {
      }
      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() {
      const dateStr = this.timeType === 'year' 
        ? this.currentDate.getFullYear().toString() 
@@ -301,7 +323,9 @@ export default {
          date: dateStr,
          page: this.page,
          limit: this.limit,
-          courseTitle: this.dataForm.courseTitle
+          courseTitle: this.dataForm.courseTitle,
+          sortKey: this.dataForm.sortKey,
+          sortValue: this.dataForm.sortValue
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
--- a/src/views/modules/statisticsBusiness/courseStatistics/labelStatistics.vue
+++ b/src/views/modules/statisticsBusiness/courseStatistics/labelStatistics.vue
@@ -37,7 +37,7 @@
        <el-button 
          type="primary"
          size="small"
-          @click="getDataList"
+          @click="handleRefresh"
        >刷新</el-button>
      </el-form-item>
      <el-form-item>
@@ -51,17 +51,31 @@
    
    <div class="table-container" ref="tableContainer">
      <el-table
+        ref="dataTable"
        :data="dataList"
        border
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        :max-height="tableHeight"
+        @sort-change="handleSortChange"
      >
        <el-table-column prop="courseLabel" label="分类" min-width="150" />
-        <el-table-column prop="courseCount" label="总销售门数" min-width="120" />
-        <el-table-column prop="sales" label="总销量" min-width="100" />
+        <el-table-column
+          prop="courseCount"
+          label="总销售门数"
+          sortable="custom"
+          min-width="120"
+        />
+        <el-table-column
+          prop="sales"
+          label="总销量"
+          sortable="custom"
+          min-width="100"
+        />
        <el-table-column 
          :label="timeType === 'year' ? '年销售额（微信+支付宝+银行+天医币）' : '月销售额（微信+支付宝+银行+天医币）'" 
+          prop="salesFee"
+          sortable="custom"
          min-width="280"
        >
          <template slot-scope="scope">
@@ -70,6 +84,8 @@
        </el-table-column>
        <el-table-column 
          :label="timeType === 'year' ? '年销售额（微信+支付宝+银行）' : '月销售额（微信+支付宝+银行）'" 
+          prop="cashFee"
+          sortable="custom"
          min-width="250"
        >
          <template slot-scope="scope">
@@ -89,7 +105,10 @@ export default {
    return {
      timeType: 'year',
      currentDate: new Date(),
-      dataForm: {},
+      dataForm: {
+        sortKey: '',
+        sortValue: ''
+      },
      dataList: [],
      tableHeight: null
    }
@@ -135,6 +154,19 @@ export default {
      }
      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() {
      const dateStr = this.timeType === 'year' 
        ? this.currentDate.getFullYear().toString() 
@@ -143,7 +175,9 @@ export default {
        url: http.adornUrl('/master/statisticsBusiness/getCourseSaleInfoByCourseLabel'),
        method: 'post',
        data: http.adornData({
-          date: dateStr
+          date: dateStr,
+          sortKey: this.dataForm.sortKey,
+          sortValue: this.dataForm.sortValue
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
--- a/src/views/modules/statisticsBusiness/userStatistics/userStatisticsBase.vue
+++ b/src/views/modules/statisticsBusiness/userStatistics/userStatisticsBase.vue
@@ -21,8 +21,8 @@
      </el-form>
    </div>

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