|
|
@@ -7,6 +7,10 @@
|
|
|
<div class="card" v-for="item in dataCards" :key="item.title">
|
|
|
<h3>{{ item.title }}</h3>
|
|
|
<p class="value">{{ item.value }}</p>
|
|
|
+ <div class="sub-values" v-if="item.subValues">
|
|
|
+ <span class="sub-item">直播: {{ item.subValues.live }}</span>
|
|
|
+ <span class="sub-item">回放: {{ item.subValues.replay }}</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -15,12 +19,12 @@
|
|
|
<!-- 左侧用户分析区(占50%宽度) -->
|
|
|
<div class="user-analysis">
|
|
|
<div class="new-old">
|
|
|
- <h3>新老用户占比</h3>
|
|
|
- <EChartsComponent chartId="newOldChart" :option="newOldOption" />
|
|
|
+ <h3>直播新老用户占比</h3>
|
|
|
+ <EChartsComponent chartId="liveNewOldChart" :option="liveNewOldOption" />
|
|
|
</div>
|
|
|
<div class="region">
|
|
|
- <h3>地域访客</h3>
|
|
|
- <EChartsComponent chartId="regionChart" :option="regionOption" />
|
|
|
+ <h3>回放新老用户占比</h3>
|
|
|
+ <EChartsComponent chartId="replayNewOldChart" :option="replayNewOldOption" />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -69,16 +73,36 @@ export default {
|
|
|
return {
|
|
|
// 数据保持不变(与原代码一致)
|
|
|
dataCards: [
|
|
|
- { title: '在线人数', value: '2.5k' },
|
|
|
- { title: '观看人次', value: '15.2k' },
|
|
|
- { title: '点赞数', value: '12.8k' },
|
|
|
- { title: '评论数', value: '3.2k' }
|
|
|
+ { title: '在线人数', value: 0 },
|
|
|
+ {
|
|
|
+ title: '观看人次',
|
|
|
+ value: 0,
|
|
|
+ subValues: { live: 0, replay: 0 }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '点赞数',
|
|
|
+ value: 0,
|
|
|
+ subValues: { live: 0, replay: 0 }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '评论数',
|
|
|
+ value: 0,
|
|
|
+ subValues: { live: 0, replay: 0 }
|
|
|
+ }
|
|
|
],
|
|
|
- newOldOption: {
|
|
|
+ liveNewOldOption: {
|
|
|
tooltip: { trigger: 'item' },
|
|
|
series: [{
|
|
|
type: 'pie', radius: '70%',
|
|
|
- data: [{ value: 65, name: '新用户' }, { value: 35, name: '老用户' }],
|
|
|
+ data: [{ value: 0, name: '新用户' }, { value: 0, name: '老用户' }],
|
|
|
+ itemStyle: { colors: ['#36cfc9', '#722ed1'] }
|
|
|
+ }]
|
|
|
+ },
|
|
|
+ replayNewOldOption: {
|
|
|
+ tooltip: { trigger: 'item' },
|
|
|
+ series: [{
|
|
|
+ type: 'pie', radius: '70%',
|
|
|
+ data: [{ value: 0, name: '新用户' }, { value: 0, name: '老用户' }],
|
|
|
itemStyle: { colors: ['#36cfc9', '#722ed1'] }
|
|
|
}]
|
|
|
},
|
|
|
@@ -202,29 +226,80 @@ export default {
|
|
|
});
|
|
|
},
|
|
|
dealData(data){
|
|
|
+ // 计算总计
|
|
|
+ const totalViewNum = (data.liveViewNum || 0) + (data.replayViewNum || 0);
|
|
|
+ const totalLikeNum = (data.liveLikeNum || 0) + (data.replayLikeNum || 0);
|
|
|
+ const totalCommentNum = (data.liveCommentNum || 0) + (data.replayCommentNum || 0);
|
|
|
+
|
|
|
this.dataCards = [
|
|
|
- { title: '在线人数', value: data.onlineNum },
|
|
|
- { title: '观看人次', value: data.viewNum },
|
|
|
- { title: '点赞数', value: data.likeNum },
|
|
|
- { title: '评论数', value: data.commentNum }
|
|
|
+ { title: '在线人数', value: data.onlineNum || 0 },
|
|
|
+ {
|
|
|
+ title: '观看人次',
|
|
|
+ value: totalViewNum,
|
|
|
+ subValues: {
|
|
|
+ live: data.liveViewNum || 0,
|
|
|
+ replay: data.replayViewNum || 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '点赞数',
|
|
|
+ value: totalLikeNum,
|
|
|
+ subValues: {
|
|
|
+ live: data.liveLikeNum || 0,
|
|
|
+ replay: data.replayLikeNum || 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '评论数',
|
|
|
+ value: totalCommentNum,
|
|
|
+ subValues: {
|
|
|
+ live: data.liveCommentNum || 0,
|
|
|
+ replay: data.replayCommentNum || 0
|
|
|
+ }
|
|
|
+ }
|
|
|
]
|
|
|
- this.newOldOption= {
|
|
|
+
|
|
|
+ // 直播新老用户占比
|
|
|
+ this.liveNewOldOption = {
|
|
|
+ tooltip: { trigger: 'item' },
|
|
|
+ series: [{
|
|
|
+ type: 'pie', radius: '70%',
|
|
|
+ data: [
|
|
|
+ { value: data.liveNewUserNum || 0, name: '新用户' },
|
|
|
+ { value: data.liveOldUserNum || 0, name: '老用户' }
|
|
|
+ ],
|
|
|
+ itemStyle: { colors: ['#36cfc9', '#722ed1'] }
|
|
|
+ }]
|
|
|
+ }
|
|
|
+
|
|
|
+ // 回放新老用户占比
|
|
|
+ this.replayNewOldOption = {
|
|
|
tooltip: { trigger: 'item' },
|
|
|
series: [{
|
|
|
type: 'pie', radius: '70%',
|
|
|
- data: [{ value: data.newUserNum, name: '新用户' }, { value: data.oldUserNum, name: '老用户' }],
|
|
|
+ data: [
|
|
|
+ { value: data.replayNewUserNum || 0, name: '新用户' },
|
|
|
+ { value: data.replayOldUserNum || 0, name: '老用户' }
|
|
|
+ ],
|
|
|
itemStyle: { colors: ['#36cfc9', '#722ed1'] }
|
|
|
}]
|
|
|
}
|
|
|
+
|
|
|
+ // 观众来源
|
|
|
this.sourceOption = {
|
|
|
tooltip: { trigger: 'item' },
|
|
|
series: [{
|
|
|
type: 'pie', radius: '70%',
|
|
|
- data: [{ value: data.shareUrlNum, name: '分享链接' }, { value: data.directAccessNum, name: '直接访问' }, { value: 0, name: '其他' }],
|
|
|
- itemStyle: { colors: ['#3b82f6', '#10b981', '#f59e0b'] }
|
|
|
+ data: [
|
|
|
+ { value: data.shareUrlNum || 0, name: '分享链接' },
|
|
|
+ { value: data.directAccessNum || 0, name: '直接访问' }
|
|
|
+ ],
|
|
|
+ itemStyle: { colors: ['#3b82f6', '#10b981'] }
|
|
|
}]
|
|
|
}
|
|
|
- this.rankList = data.inviteUserList;
|
|
|
+
|
|
|
+ // 邀请用户列表
|
|
|
+ this.rankList = data.inviteUserList || [];
|
|
|
},
|
|
|
}
|
|
|
};
|
|
|
@@ -282,6 +357,20 @@ export default {
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
+.card .sub-values {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ margin-top: 10px;
|
|
|
+ font-size: 0.8vw;
|
|
|
+ color: #94a3b8;
|
|
|
+}
|
|
|
+
|
|
|
+.card .sub-item {
|
|
|
+ padding: 3px 8px;
|
|
|
+ background: rgba(54, 207, 201, 0.1);
|
|
|
+ border-radius: 4px;
|
|
|
+}
|
|
|
+
|
|
|
/* 中间内容区:高度40%,左右分栏 */
|
|
|
.middle-content {
|
|
|
width: 100%;
|