qimaohong
/
deepChartBack
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

三个表格按列居中；没有时间段时显示横线；

zhaowenkang/feature-20260206140254-后台AI复盘二期
songjie 1 month ago
parent
40d9deaa0e
commit
fcf5b39b25
1 changed files with 61 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 81
      src/views/PlatformData/UserLoginStats.vue

81
src/views/PlatformData/UserLoginStats.vue
View File

@ -155,12 +155,12 @@
<div class="detail-section">
<div class="section-title"><el-icon><Location /></el-icon> 各地区活跃数据</div>
<el-table :data="regionalTableData1" style="width: 100%" :header-cell-style="headerCellStyle">
<el-table-column prop="region" label="地区" />
<el-table-column prop="dailyActive" label="日活跃用户" />
<el-table-column prop="weeklyActive" label="周活跃用户" />
<el-table-column prop="monthlyActive" label="月活跃用户" />
<el-table-column prop="periodActive" label="区间活跃用户" />
<el-table-column prop="percent" label="活跃度占比" />
<el-table-column prop="region" label="地区" align="center" />
<el-table-column prop="dailyActive" label="日活跃用户" align="center" />
<el-table-column prop="weeklyActive" label="周活跃用户" align="center" />
<el-table-column prop="monthlyActive" label="月活跃用户" align="center" />
<el-table-column prop="periodActive" label="区间活跃用户" align="center" />
<el-table-column prop="percent" label="活跃度占比" align="center" />
</el-table>
</div>
@ -168,12 +168,12 @@
<div class="detail-section">
<div class="section-title"><el-icon><Trophy /></el-icon> 各地区会员活跃数据</div>
<el-table :data="regionalTableData2" style="width: 100%" :header-cell-style="headerCellStyle">
<el-table-column prop="region" label="地区" />
<el-table-column prop="dailyActive" label="日活跃用户" />
<el-table-column prop="weeklyActive" label="周活跃用户" />
<el-table-column prop="monthlyActive" label="月活跃用户" />
<el-table-column prop="periodActive" label="区间活跃用户" />
<el-table-column prop="percent" label="活跃度占比" />
<el-table-column prop="region" label="地区" align="center" />
<el-table-column prop="dailyActive" label="日活跃用户" align="center" />
<el-table-column prop="weeklyActive" label="周活跃用户" align="center" />
<el-table-column prop="monthlyActive" label="月活跃用户" align="center" />
<el-table-column prop="periodActive" label="区间活跃用户" align="center" />
<el-table-column prop="percent" label="活跃度占比" align="center" />
</el-table>
</div>
@ -181,12 +181,12 @@
<div class="detail-section">
<div class="section-title"><el-icon><User /></el-icon> 各地区非网活跃数据</div>
<el-table :data="regionalTableData3" style="width: 100%" :header-cell-style="headerCellStyle">
<el-table-column prop="region" label="地区" />
<el-table-column prop="dailyActive" label="日活跃用户" />
<el-table-column prop="weeklyActive" label="周活跃用户" />
<el-table-column prop="monthlyActive" label="月活跃用户" />
<el-table-column prop="periodActive" label="区间活跃用户" />
<el-table-column prop="percent" label="活跃度占比" />
<el-table-column prop="region" label="地区" align="center" />
<el-table-column prop="dailyActive" label="日活跃用户" align="center" />
<el-table-column prop="weeklyActive" label="周活跃用户" align="center" />
<el-table-column prop="monthlyActive" label="月活跃用户" align="center" />
<el-table-column prop="periodActive" label="区间活跃用户" align="center" />
<el-table-column prop="percent" label="活跃度占比" align="center" />
</el-table>
</div>
@ -248,13 +248,23 @@ const regionalTableData3 = ref([]);
// 初始化查询参数
const initQueryParams = () => {
const { start_time, end_time, region } = route.query;
const { start_time, end_time, region, r_start_time, r_end_time, r_region } = route.query;
// Tab 1 Params
if (start_time && end_time) {
dateRange.value = [new Date(start_time), new Date(end_time)];
}
if (region) {
selectedRegion.value = region;
}
// Tab 2 Params
if (r_start_time && r_end_time) {
dateRangeRegion.value = [new Date(r_start_time), new Date(r_end_time)];
}
if (r_region) {
searchRegion.value = r_region;
}
};
initQueryParams();
@ -447,6 +457,9 @@ const fetchRegionActiveData = async () => {
console.log("获取地区活跃数据响应:", { resAll, resMember, resNormal });
// 检查是否选择了时间段
const isRangeSelected = !!(params.start_time && params.end_time);
const processData = (res) => {
// 兼容处理拦截器
const data = res.region_active_data ? res : (res.data && res.data.region_active_data ? res.data : null);
@ -456,7 +469,8 @@ const fetchRegionActiveData = async () => {
dailyActive: item.daily_active_user,
weeklyActive: item.weekly_active_user,
monthlyActive: item.monthly_active_user,
periodActive: item.range_active_user,
// 如果没有选择时间段，则显示 '-'，否则显示数据
periodActive: isRangeSelected ? item.range_active_user : '-',
percent: item.active_rate + '%'
}));
}
@ -473,12 +487,39 @@ const fetchRegionActiveData = async () => {
};
const handleSearchRegion = () => {
// 更新 URL 参数
const query = { ...route.query };
if (dateRangeRegion.value && dateRangeRegion.value.length === 2) {
query.r_start_time = formatDate(dateRangeRegion.value[0]);
query.r_end_time = formatDate(dateRangeRegion.value[1]);
} else {
delete query.r_start_time;
delete query.r_end_time;
}
if (searchRegion.value) {
query.r_region = searchRegion.value;
} else {
delete query.r_region;
}
router.replace({ query });
fetchRegionActiveData();
};
const handleResetRegion = () => {
dateRangeRegion.value = '';
searchRegion.value = '';
// 清除 URL 参数
const query = { ...route.query };
delete query.r_start_time;
delete query.r_end_time;
delete query.r_region;
router.replace({ query });
fetchRegionActiveData();
};

Write Preview
Loading…
Cancel
Save