Explorar el Código

feat(stats): 数据大屏补分享热点 Top5 列表(后端 hotShareList 渲染,三栏并排)

Sisyphus Agent hace 5 días
padre
commit
51cea40d65
Se han modificado 1 ficheros con 23 adiciones y 2 borrados
  1. 23 2
      cfc-web/src/views/admin/Dashboard.vue

+ 23 - 2
cfc-web/src/views/admin/Dashboard.vue

@@ -87,7 +87,22 @@
     </el-row>
 
     <el-row :gutter="16" class="section-row">
-      <el-col :xs="24" :md="12">
+      <el-col :xs="24" :md="8">
+        <el-card class="hot-card" v-loading="trafficLoading">
+          <div slot="header" class="card-header">
+            <span><i class="el-icon-share"></i> 分享热点(点击量 Top5)</span>
+          </div>
+          <div class="hot-list">
+            <div class="hot-item" v-for="(item, idx) in hotShares" :key="item.id">
+              <span class="hot-rank" :class="'rank-' + (idx + 1)">{{ idx + 1 }}</span>
+              <span class="hot-title" :title="item.shareTitle || shareTypeLabel(item.targetType)">{{ item.shareTitle || shareTypeLabel(item.targetType) }}</span>
+              <span class="hot-value"><i class="el-icon-share"></i> {{ item.clickCount || 0 }}次</span>
+            </div>
+            <div v-if="hotShares.length === 0" class="hot-empty">暂无分享数据</div>
+          </div>
+        </el-card>
+      </el-col>
+      <el-col :xs="24" :md="8">
         <el-card class="hot-card" v-loading="trafficLoading">
           <div slot="header" class="card-header">
             <span><i class="el-icon-top"></i> 访问热点(文章阅读量 Top5)</span>
@@ -102,7 +117,7 @@
           </div>
         </el-card>
       </el-col>
-      <el-col :xs="24" :md="12">
+      <el-col :xs="24" :md="8">
         <el-card class="hot-card" v-loading="trafficLoading">
           <div slot="header" class="card-header">
             <span><i class="el-icon-shopping-cart-2"></i> 购买热点(近30天销量 Top5)</span>
@@ -184,6 +199,7 @@ export default {
       trendData: { familyTrend: {}, userTrend: {} },
       membershipData: {},
       hotArticles: [],
+      hotShares: [],
       hotProducts: [],
       sharePieData: [],
       trafficDates: [],
@@ -299,6 +315,7 @@ export default {
           const ch = d.shareSummary && d.shareSummary.channelStats ? Object.entries(d.shareSummary.channelStats) : []
           this.sharePieData = ch.map(([name, value]) => ({ name, value }))
           this.hotArticles = (d.hotArticleList || []).slice(0, 5)
+          this.hotShares = (d.hotShareList || []).slice(0, 5)
           this.hotProducts = (d.hotProductList || []).slice(0, 5)
           this.trafficDates = d.trafficDates || []
           this.pvData = d.pvData || []
@@ -400,6 +417,10 @@ export default {
       const map = { pending: '待审核', approved: '已通过', completed: '已完成', rejected: '已拒绝' }
       return map[status] || status
     },
+    shareTypeLabel(type) {
+      const map = { article: '文章', activity: '活动', product: '商品', package: '任务模板', invite: '邀请', other: '其它' }
+      return map[type] || type || '分享'
+    },
     formatTime(t) {
       return t ? t.replace('T', ' ').substring(0, 19) : '-'
     }