Browse Source

对接数据概览接口完成;

zhaowenkang/feature-20260206140254-后台AI复盘二期
songjie 1 month ago
parent
commit
ff2bfbcd93
  1. 19
      src/api/platformData.js
  2. 73
      src/views/PlatformData/UserOverview.vue

19
src/api/platformData.js

@ -0,0 +1,19 @@
import request from '../utils/myAxios'
// 获取用户数据概览列表
export function getUserOverviewList() {
const formData = new FormData();
formData.append('token', localStorage.getItem('token'));
return request({
url: 'http://280e5e98.r7.cpolar.top/admin/user/overview/list',
method: 'post',
headers: {
'token': localStorage.getItem('token'),
'client': 'ios',
'version': '1',
'Content-Type': 'multipart/form-data'
},
data: formData
})
}

73
src/views/PlatformData/UserOverview.vue

@ -26,9 +26,9 @@
<el-icon><UserFilled /></el-icon> <el-icon><UserFilled /></el-icon>
</div> </div>
<div class="big-card-content"> <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> </div>
</div> </div>
@ -40,10 +40,12 @@
<div class="card-title"> <div class="card-title">
<el-icon><Trophy /></el-icon> <el-icon><Trophy /></el-icon>
</div> </div>
<div class="card-value-small">154,838</div>
<div class="card-value-small">{{ overviewData.member }}</div>
</div> </div>
<div class="card-tag-wrapper"> <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>
</div> </div>
@ -53,10 +55,12 @@
<div class="card-title"> <div class="card-title">
<el-icon><User /></el-icon> <el-icon><User /></el-icon>
</div> </div>
<div class="card-value-small">154,838</div>
<div class="card-value-small">{{ overviewData.normal }}</div>
</div> </div>
<div class="card-tag-wrapper"> <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> </div>
</div> </div>
@ -177,6 +181,7 @@
import { ref, onMounted, nextTick, watch } from 'vue'; import { ref, onMounted, nextTick, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from 'vue-router';
import * as echarts from 'echarts'; import * as echarts from 'echarts';
import { getUserOverviewList } from '../../api/platformData';
const route = useRoute(); const route = useRoute();
const router = useRouter(); const router = useRouter();
@ -188,6 +193,48 @@ const chartMemberRef = ref(null);
const chartNewOldRef = ref(null); const chartNewOldRef = ref(null);
const chartBarRef = 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);
// datacode
if (res && res.list) {
overviewData.value = res.list;
initCharts();
}
} catch (error) {
console.error('获取用户概览数据失败:', error);
}
};
// //
const tableData1 = [ const tableData1 = [
{ type: '用户总数', total: '154,832', dailyNew: '+3.44', weeklyNew: '+21,379', monthlyNew: '+21,379', periodNew: '' }, { type: '用户总数', total: '154,832', dailyNew: '+3.44', weeklyNew: '+21,379', monthlyNew: '+21,379', periodNew: '' },
@ -238,8 +285,8 @@ const initCharts = () => {
avoidLabelOverlap: false, avoidLabelOverlap: false,
label: { show: false }, label: { show: false },
data: [ 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, avoidLabelOverlap: false,
label: { show: false }, label: { show: false },
data: [ 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(() => { onMounted(() => {
initCharts();
fetchData();
}); });
</script> </script>

Loading…
Cancel
Save