|
|
|
@ -26,9 +26,9 @@ |
|
|
|
<el-icon><UserFilled /></el-icon> 用户总数 |
|
|
|
</div> |
|
|
|
<div class="big-card-content"> |
|
|
|
<div class="card-value">154,838</div> |
|
|
|
<div class="card-tag up"> |
|
|
|
较昨日增加↑ 5.22% |
|
|
|
<div class="card-value">{{ overviewData.total }}</div> |
|
|
|
<div class="card-tag" :class="getGrowthClass(overviewData.total_growth)"> |
|
|
|
{{ getGrowthText(overviewData.total_growth) }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -40,10 +40,12 @@ |
|
|
|
<div class="card-title"> |
|
|
|
<el-icon><Trophy /></el-icon> 会员总数 |
|
|
|
</div> |
|
|
|
<div class="card-value-small">154,838</div> |
|
|
|
<div class="card-value-small">{{ overviewData.member }}</div> |
|
|
|
</div> |
|
|
|
<div class="card-tag-wrapper"> |
|
|
|
<div class="card-tag up">较昨日增加↑ 15.22%</div> |
|
|
|
<div class="card-tag" :class="getGrowthClass(overviewData.member_growth)"> |
|
|
|
{{ getGrowthText(overviewData.member_growth) }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -53,10 +55,12 @@ |
|
|
|
<div class="card-title"> |
|
|
|
<el-icon><User /></el-icon> 非会员总数 |
|
|
|
</div> |
|
|
|
<div class="card-value-small">154,838</div> |
|
|
|
<div class="card-value-small">{{ overviewData.normal }}</div> |
|
|
|
</div> |
|
|
|
<div class="card-tag-wrapper"> |
|
|
|
<div class="card-tag down">较昨日减少↓ 1.22%</div> |
|
|
|
<div class="card-tag" :class="getGrowthClass(overviewData.normal_growth)"> |
|
|
|
{{ getGrowthText(overviewData.normal_growth) }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -177,6 +181,7 @@ |
|
|
|
import { ref, onMounted, nextTick, watch } from 'vue'; |
|
|
|
import { useRoute, useRouter } from 'vue-router'; |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import { getUserOverviewList } from '../../api/platformData'; |
|
|
|
|
|
|
|
const route = useRoute(); |
|
|
|
const router = useRouter(); |
|
|
|
@ -188,6 +193,48 @@ const chartMemberRef = ref(null); |
|
|
|
const chartNewOldRef = ref(null); |
|
|
|
const chartBarRef = ref(null); |
|
|
|
|
|
|
|
const overviewData = ref({ |
|
|
|
total: 0, |
|
|
|
total_growth: '0%', |
|
|
|
member: 0, |
|
|
|
member_growth: '0%', |
|
|
|
normal: 0, |
|
|
|
normal_growth: '0%', |
|
|
|
new_normal: 0, |
|
|
|
old_normal: 0 |
|
|
|
}); |
|
|
|
|
|
|
|
// 获取增长率的样式类 |
|
|
|
const getGrowthClass = (growthStr) => { |
|
|
|
if (!growthStr) return ''; |
|
|
|
return growthStr.startsWith('-') ? 'down' : 'up'; |
|
|
|
}; |
|
|
|
|
|
|
|
// 获取增长率的显示文本(添加箭头) |
|
|
|
const getGrowthText = (growthStr) => { |
|
|
|
if (!growthStr) return ''; |
|
|
|
const isDown = growthStr.startsWith('-'); |
|
|
|
const arrow = isDown ? '↓' : '↑'; |
|
|
|
const prefix = isDown ? '较昨日减少' : '较昨日增加'; |
|
|
|
// 移除可能存在的负号,因为箭头已经表示了方向 |
|
|
|
const value = growthStr.replace('-', ''); |
|
|
|
return `${prefix}${arrow} ${value}`; |
|
|
|
}; |
|
|
|
|
|
|
|
const fetchData = async () => { |
|
|
|
try { |
|
|
|
const res = await getUserOverviewList(); |
|
|
|
console.log("获取用户概览数据响应完成:",res.list); |
|
|
|
// 根据用户反馈,响应拦截器直接返回data部分,不再包含code |
|
|
|
if (res && res.list) { |
|
|
|
overviewData.value = res.list; |
|
|
|
initCharts(); |
|
|
|
} |
|
|
|
} catch (error) { |
|
|
|
console.error('获取用户概览数据失败:', error); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// 表格数据 |
|
|
|
const tableData1 = [ |
|
|
|
{ type: '用户总数', total: '154,832', dailyNew: '+3.44', weeklyNew: '+21,379', monthlyNew: '+21,379', periodNew: '' }, |
|
|
|
@ -238,8 +285,8 @@ const initCharts = () => { |
|
|
|
avoidLabelOverlap: false, |
|
|
|
label: { show: false }, |
|
|
|
data: [ |
|
|
|
{ value: 112265, name: '非会员用户' }, |
|
|
|
{ value: 42567, name: '会员用户' } |
|
|
|
{ value: overviewData.value.normal, name: '非会员用户' }, |
|
|
|
{ value: overviewData.value.member, name: '会员用户' } |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
@ -262,9 +309,9 @@ const initCharts = () => { |
|
|
|
avoidLabelOverlap: false, |
|
|
|
label: { show: false }, |
|
|
|
data: [ |
|
|
|
{ value: 300, name: '新非网数量' }, |
|
|
|
{ value: 500, name: '会员用户' }, |
|
|
|
{ value: 400, name: '老非网数量' } |
|
|
|
{ value: overviewData.value.new_normal, name: '新非网数量' }, |
|
|
|
{ value: overviewData.value.member, name: '会员用户' }, |
|
|
|
{ value: overviewData.value.old_normal, name: '老非网数量' } |
|
|
|
] |
|
|
|
} |
|
|
|
] |
|
|
|
@ -332,7 +379,7 @@ watch(activeTab, (newVal) => { |
|
|
|
}); |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
initCharts(); |
|
|
|
fetchData(); |
|
|
|
}); |
|
|
|
|
|
|
|
</script> |
|
|
|
|