diff --git a/src/api/platformData.js b/src/api/platformData.js
index 55e5e96..b0008d7 100644
--- a/src/api/platformData.js
+++ b/src/api/platformData.js
@@ -85,3 +85,26 @@ export function getUserLoginList(params) {
data: formData
})
}
+
+// 获取用户登录趋势数据
+export function getUserLoginTrend(params) {
+ const formData = new FormData();
+ formData.append('token', localStorage.getItem('token'));
+ if (params) {
+ if (params.region) formData.append('region', params.region);
+ if (params.start_time) formData.append('start_time', params.start_time);
+ if (params.end_time) formData.append('end_time', params.end_time);
+ }
+
+ return request({
+ url: 'http://7a1b8c9e.r40.cpolar.top/admin/user/login/trend',
+ method: 'post',
+ headers: {
+ 'token': localStorage.getItem('token'),
+ 'client': 'ios',
+ 'version': '1',
+ 'Content-Type': 'multipart/form-data'
+ },
+ data: formData
+ })
+}
diff --git a/src/views/PlatformData/UserLoginStats.vue b/src/views/PlatformData/UserLoginStats.vue
index e68f239..f3deade 100644
--- a/src/views/PlatformData/UserLoginStats.vue
+++ b/src/views/PlatformData/UserLoginStats.vue
@@ -37,8 +37,8 @@
end-placeholder="结束时间"
size="default"
/>
- 搜索
- 重置
+ 搜索
+ 重置
数据导出
@@ -92,7 +92,7 @@
-
近7天登录趋势
+
{{ chartTrendTitle }}
@@ -223,7 +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';
+import { getUserLoginList, getUserLoginTrend } from '../../api/platformData';
const route = useRoute();
const router = useRouter();
@@ -235,6 +235,7 @@ const searchRegion = ref('');
const dateRangeRegion = ref('');
const chartTrendRef = ref(null);
+let chartTrendInstance = null;
const chartRegionBarRef = ref(null);
const chartRegionPieRef = ref(null);
const chartRegionMemberPieRef = ref(null);
@@ -251,6 +252,8 @@ const loginStats = ref({
});
// 获取增长率的样式类
+const chartTrendTitle = ref('近7天登录趋势');
+
const getGrowthClass = (growthStr) => {
if (!growthStr) return '';
return growthStr.startsWith('-') ? 'down' : 'up';
@@ -266,6 +269,14 @@ const getGrowthText = (growthStr) => {
return `${prefix}${arrow} ${value}`;
};
+// 格式化日期
+const formatDate = (date) => {
+ if (!date) return '';
+ const d = new Date(date);
+ const pad = (n) => n < 10 ? '0' + n : n;
+ return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`;
+};
+
const fetchLoginData = async () => {
try {
const res = await getUserLoginList();
@@ -282,6 +293,83 @@ const fetchLoginData = async () => {
}
};
+const fetchTrendData = async () => {
+ let params = {};
+ if (dateRange.value && dateRange.value.length === 2) {
+ params.start_time = formatDate(dateRange.value[0]);
+ params.end_time = formatDate(dateRange.value[1]);
+ chartTrendTitle.value = `${params.start_time} 至 ${params.end_time} 登录趋势`;
+ } else {
+ chartTrendTitle.value = '近7天登录趋势';
+ }
+
+ try {
+ const res = await getUserLoginTrend(params);
+ console.log("获取用户登录趋势响应:", res);
+
+ // 兼容处理拦截器
+ const data = res.list ? res : (res.data && res.data.list ? res.data : null);
+
+ if (data && data.list) {
+ updateTrendChart(data.list);
+ }
+ } catch (e) {
+ console.error('获取用户登录趋势失败:', e);
+ }
+};
+
+const updateTrendChart = (list) => {
+ if (!chartTrendRef.value) return;
+
+ if (!chartTrendInstance) {
+ chartTrendInstance = echarts.init(chartTrendRef.value);
+ }
+
+ const dates = list.map(item => item.date);
+ const allUser = list.map(item => item.all_user);
+ const member = list.map(item => item.member);
+
+ const option = {
+ tooltip: { trigger: 'axis' },
+ legend: { data: ['所有用户', '会员用户'], top: 'top' },
+ grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
+ xAxis: {
+ type: 'category',
+ boundaryGap: false,
+ data: dates
+ },
+ yAxis: { type: 'value' },
+ series: [
+ {
+ name: '所有用户',
+ type: 'line',
+ data: allUser,
+ smooth: true,
+ itemStyle: { color: '#40a9ff' }
+ },
+ {
+ name: '会员用户',
+ type: 'line',
+ data: member,
+ smooth: true,
+ itemStyle: { color: '#52c41a' }
+ }
+ ]
+ };
+ chartTrendInstance.setOption(option);
+};
+
+const handleSearch = () => {
+ fetchTrendData();
+ // 这里也可以加上 fetchLoginData() 如果登录统计也支持搜索参数
+};
+
+const handleReset = () => {
+ dateRange.value = '';
+ selectedRegion.value = '';
+ fetchTrendData();
+};
+
// Tab 1 数据
const loginTableData1 = [
{ channel: 'App Store', total: '154,832', dailyNew: '', percent: '38%' },
@@ -333,36 +421,9 @@ const regionColors = ['#68B2FF', '#D94F41', '#69D2AF', '#FFD360', '#ADADAD', '#B
const initCharts = () => {
nextTick(() => {
if (activeTab.value === 'loginData') {
- if (chartTrendRef.value) {
- const chart = echarts.init(chartTrendRef.value);
- chart.setOption({
- tooltip: { trigger: 'axis' },
- legend: { data: ['新用户', '老用户'], top: 'top' },
- grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
- xAxis: {
- type: 'category',
- boundaryGap: false,
- data: ['六天前', '五天前', '四天前', '三天前', '两天前', '昨天', '今天']
- },
- yAxis: { type: 'value' },
- series: [
- {
- name: '新用户',
- type: 'line',
- data: [1350, 1250, 1100, 1050, 1050, 1300, 1000],
- smooth: true,
- itemStyle: { color: '#40a9ff' }
- },
- {
- name: '老用户',
- type: 'line',
- data: [300, 600, 320, 320, 400, 550, 650],
- smooth: true,
- itemStyle: { color: '#52c41a' }
- }
- ]
- });
- }
+ // 趋势图已经在 fetchTrendData -> updateTrendChart 中初始化和更新
+ // 这里只需要处理初始无数据时的状态,或者等待 fetchTrendData 调用
+ fetchTrendData();
} else if (activeTab.value === 'regionalData') {
// 柱状图
if (chartRegionBarRef.value) {