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

src/views/PlatformData/UserLoginStats.vue

@@ -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();
 };