|
|
@ -146,8 +146,8 @@ |
|
|
end-placeholder="结束时间" |
|
|
end-placeholder="结束时间" |
|
|
size="default" |
|
|
size="default" |
|
|
/> |
|
|
/> |
|
|
<el-button type="primary" class="search-btn">搜索</el-button> |
|
|
|
|
|
<el-button type="primary" class="reset-btn">重置</el-button> |
|
|
|
|
|
|
|
|
<el-button type="primary" class="search-btn" @click="handleSearchRegion">搜索</el-button> |
|
|
|
|
|
<el-button type="primary" class="reset-btn" @click="handleResetRegion">重置</el-button> |
|
|
<el-button type="danger" class="export-btn">数据导出</el-button> |
|
|
<el-button type="danger" class="export-btn">数据导出</el-button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
@ -223,7 +223,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 { getUserLoginList, getUserLoginTrend } from '../../api/platformData'; |
|
|
|
|
|
|
|
|
import { getUserLoginList, getUserLoginTrend, getRegionActiveData } from '../../api/platformData'; |
|
|
|
|
|
|
|
|
const route = useRoute(); |
|
|
const route = useRoute(); |
|
|
const router = useRouter(); |
|
|
const router = useRouter(); |
|
|
@ -241,6 +241,11 @@ const chartRegionPieRef = ref(null); |
|
|
const chartRegionMemberPieRef = ref(null); |
|
|
const chartRegionMemberPieRef = ref(null); |
|
|
const chartRegionNonMemberPieRef = ref(null); |
|
|
const chartRegionNonMemberPieRef = ref(null); |
|
|
|
|
|
|
|
|
|
|
|
// 响应式数据:地区活跃数据 |
|
|
|
|
|
const regionalTableData1 = ref([]); |
|
|
|
|
|
const regionalTableData2 = ref([]); |
|
|
|
|
|
const regionalTableData3 = ref([]); |
|
|
|
|
|
|
|
|
// 初始化查询参数 |
|
|
// 初始化查询参数 |
|
|
const initQueryParams = () => { |
|
|
const initQueryParams = () => { |
|
|
const { start_time, end_time, region } = route.query; |
|
|
const { start_time, end_time, region } = route.query; |
|
|
@ -425,6 +430,58 @@ const handleReset = () => { |
|
|
fetchLoginData(); |
|
|
fetchLoginData(); |
|
|
}; |
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const fetchRegionActiveData = async () => { |
|
|
|
|
|
let params = {}; |
|
|
|
|
|
if (dateRangeRegion.value && dateRangeRegion.value.length === 2) { |
|
|
|
|
|
params.start_time = formatDate(dateRangeRegion.value[0]); |
|
|
|
|
|
params.end_time = formatDate(dateRangeRegion.value[1]); |
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
try { |
|
|
|
|
|
// 并行请求三种身份的数据 |
|
|
|
|
|
const [resAll, resMember, resNormal] = await Promise.all([ |
|
|
|
|
|
getRegionActiveData({ ...params, identity: 0 }), |
|
|
|
|
|
getRegionActiveData({ ...params, identity: 1 }), |
|
|
|
|
|
getRegionActiveData({ ...params, identity: 2 }) |
|
|
|
|
|
]); |
|
|
|
|
|
|
|
|
|
|
|
console.log("获取地区活跃数据响应:", { resAll, resMember, resNormal }); |
|
|
|
|
|
|
|
|
|
|
|
const processData = (res) => { |
|
|
|
|
|
// 兼容处理拦截器 |
|
|
|
|
|
const data = res.region_active_data ? res : (res.data && res.data.region_active_data ? res.data : null); |
|
|
|
|
|
if (data && data.region_active_data) { |
|
|
|
|
|
return data.region_active_data.map(item => ({ |
|
|
|
|
|
region: item.region, |
|
|
|
|
|
dailyActive: item.daily_active_user, |
|
|
|
|
|
weeklyActive: item.weekly_active_user, |
|
|
|
|
|
monthlyActive: item.monthly_active_user, |
|
|
|
|
|
periodActive: item.range_active_user, |
|
|
|
|
|
percent: item.active_rate + '%' |
|
|
|
|
|
})); |
|
|
|
|
|
} |
|
|
|
|
|
return []; |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
regionalTableData1.value = processData(resAll); |
|
|
|
|
|
regionalTableData2.value = processData(resMember); |
|
|
|
|
|
regionalTableData3.value = processData(resNormal); |
|
|
|
|
|
|
|
|
|
|
|
} catch (e) { |
|
|
|
|
|
console.error('获取地区活跃数据失败:', e); |
|
|
|
|
|
} |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleSearchRegion = () => { |
|
|
|
|
|
fetchRegionActiveData(); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
|
|
const handleResetRegion = () => { |
|
|
|
|
|
dateRangeRegion.value = ''; |
|
|
|
|
|
searchRegion.value = ''; |
|
|
|
|
|
fetchRegionActiveData(); |
|
|
|
|
|
}; |
|
|
|
|
|
|
|
|
// Tab 1 数据 |
|
|
// Tab 1 数据 |
|
|
const loginTableData1 = [ |
|
|
const loginTableData1 = [ |
|
|
{ channel: 'App Store', total: '154,832', dailyNew: '', percent: '38%' }, |
|
|
{ channel: 'App Store', total: '154,832', dailyNew: '', percent: '38%' }, |
|
|
@ -450,21 +507,7 @@ const loginTableData3 = [ |
|
|
{ channel: '总计', total: '3,096', dailyNew: '', rate: '100%' }, |
|
|
{ channel: '总计', total: '3,096', dailyNew: '', rate: '100%' }, |
|
|
]; |
|
|
]; |
|
|
|
|
|
|
|
|
// Tab 2 数据 |
|
|
|
|
|
const regionalTableData1 = [ |
|
|
|
|
|
{ region: '香港', dailyActive: '1,245', weeklyActive: '1,245', monthlyActive: '1,245', periodActive: '', percent: '38%' }, |
|
|
|
|
|
{ region: '新加坡', dailyActive: '987', weeklyActive: '987', monthlyActive: '807', periodActive: '', percent: '30%' }, |
|
|
|
|
|
{ region: '泰国', dailyActive: '543', weeklyActive: '543', monthlyActive: '543', periodActive: '', percent: '17%' }, |
|
|
|
|
|
{ region: '越南', dailyActive: '321', weeklyActive: '321', monthlyActive: '321', periodActive: '', percent: '10%' }, |
|
|
|
|
|
{ region: '马来西亚', dailyActive: '321', weeklyActive: '321', monthlyActive: '321', periodActive: '', percent: '10%' }, |
|
|
|
|
|
{ region: '加拿大', dailyActive: '321', weeklyActive: '321', monthlyActive: '321', periodActive: '', percent: '10%' }, |
|
|
|
|
|
{ region: '其他', dailyActive: '321', weeklyActive: '321', monthlyActive: '321', periodActive: '', percent: '10%' }, |
|
|
|
|
|
{ region: '总计', dailyActive: '3,096', weeklyActive: '3,096', monthlyActive: '3,096', periodActive: '', percent: '100%' }, |
|
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
|
|
const regionalTableData2 = JSON.parse(JSON.stringify(regionalTableData1)); // 复用假数据 |
|
|
|
|
|
const regionalTableData3 = JSON.parse(JSON.stringify(regionalTableData1)); // 复用假数据 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// Tab 2 数据:regionalTableData1, 2, 3 已改为响应式变量并在 fetchRegionActiveData 中更新 |
|
|
const headerCellStyle = { |
|
|
const headerCellStyle = { |
|
|
background: '#fff0f0', |
|
|
background: '#fff0f0', |
|
|
color: '#333', |
|
|
color: '#333', |
|
|
@ -479,7 +522,9 @@ const initCharts = () => { |
|
|
// 趋势图已经在 fetchTrendData -> updateTrendChart 中初始化和更新 |
|
|
// 趋势图已经在 fetchTrendData -> updateTrendChart 中初始化和更新 |
|
|
// 这里只需要处理初始无数据时的状态,或者等待 fetchTrendData 调用 |
|
|
// 这里只需要处理初始无数据时的状态,或者等待 fetchTrendData 调用 |
|
|
fetchTrendData(); |
|
|
fetchTrendData(); |
|
|
|
|
|
fetchLoginData(); |
|
|
} else if (activeTab.value === 'regionalData') { |
|
|
} else if (activeTab.value === 'regionalData') { |
|
|
|
|
|
fetchRegionActiveData(); |
|
|
// 柱状图 |
|
|
// 柱状图 |
|
|
if (chartRegionBarRef.value) { |
|
|
if (chartRegionBarRef.value) { |
|
|
const chart = echarts.init(chartRegionBarRef.value); |
|
|
const chart = echarts.init(chartRegionBarRef.value); |
|
|
|