|
|
|
@ -50,9 +50,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">{{ loginStats.total }}</div> |
|
|
|
<div class="card-tag" :class="getGrowthClass(loginStats.total_growth)"> |
|
|
|
{{ getGrowthText(loginStats.total_growth) }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -64,10 +64,12 @@ |
|
|
|
<div class="card-title"> |
|
|
|
<el-icon><Trophy /></el-icon> 今日登录会员用户数 |
|
|
|
</div> |
|
|
|
<div class="card-value-small">112,265</div> |
|
|
|
<div class="card-value-small">{{ loginStats.member }}</div> |
|
|
|
</div> |
|
|
|
<div class="card-tag-wrapper"> |
|
|
|
<div class="card-tag up">较昨日增加↑ 15.22%</div> |
|
|
|
<div class="card-tag" :class="getGrowthClass(loginStats.member_growth)"> |
|
|
|
{{ getGrowthText(loginStats.member_growth) }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
@ -77,10 +79,12 @@ |
|
|
|
<div class="card-title"> |
|
|
|
<el-icon><User /></el-icon> 今日登录非网用户数 |
|
|
|
</div> |
|
|
|
<div class="card-value-small">42,567</div> |
|
|
|
<div class="card-value-small">{{ loginStats.normal }}</div> |
|
|
|
</div> |
|
|
|
<div class="card-tag-wrapper"> |
|
|
|
<div class="card-tag down">较昨日减少↓ 1.22%</div> |
|
|
|
<div class="card-tag" :class="getGrowthClass(loginStats.normal_growth)"> |
|
|
|
{{ getGrowthText(loginStats.normal_growth) }} |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -219,6 +223,7 @@ |
|
|
|
import { ref, onMounted, nextTick, watch } from 'vue'; |
|
|
|
import { useRoute, useRouter } from 'vue-router'; |
|
|
|
import * as echarts from 'echarts'; |
|
|
|
import { getUserLoginList } from '../../api/platformData'; |
|
|
|
|
|
|
|
const route = useRoute(); |
|
|
|
const router = useRouter(); |
|
|
|
@ -235,6 +240,48 @@ const chartRegionPieRef = ref(null); |
|
|
|
const chartRegionMemberPieRef = ref(null); |
|
|
|
const chartRegionNonMemberPieRef = ref(null); |
|
|
|
|
|
|
|
// 响应式数据:登录数据统计 |
|
|
|
const loginStats = ref({ |
|
|
|
total: 0, |
|
|
|
total_growth: '0%', |
|
|
|
member: 0, |
|
|
|
member_growth: '0%', |
|
|
|
normal: 0, |
|
|
|
normal_growth: '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 fetchLoginData = async () => { |
|
|
|
try { |
|
|
|
const res = await getUserLoginList(); |
|
|
|
console.log("获取用户登录数据响应:", res); |
|
|
|
|
|
|
|
// 兼容处理拦截器 |
|
|
|
const data = res.list ? res : (res.data && res.data.list ? res.data : null); |
|
|
|
|
|
|
|
if (data && data.list) { |
|
|
|
loginStats.value = data.list; |
|
|
|
} |
|
|
|
} catch (e) { |
|
|
|
console.error('获取用户登录数据失败:', e); |
|
|
|
} |
|
|
|
}; |
|
|
|
|
|
|
|
// Tab 1 数据 |
|
|
|
const loginTableData1 = [ |
|
|
|
{ channel: 'App Store', total: '154,832', dailyNew: '', percent: '38%' }, |
|
|
|
@ -428,6 +475,9 @@ watch(activeTab, (newVal) => { |
|
|
|
}); |
|
|
|
|
|
|
|
onMounted(() => { |
|
|
|
if (activeTab.value === 'loginData') { |
|
|
|
fetchLoginData(); |
|
|
|
} |
|
|
|
initCharts(); |
|
|
|
}); |
|
|
|
</script> |
|
|
|
|