fleat: region

region_stats.php

@@ -16,6 +16,10 @@ $date_params = getDateRangeParams();
 $start_date = $date_params['start_date_sql'];
 $end_date = $date_params['end_date_sql'];
 $date_range = $date_params['date_range'];
+$period = $date_params['period'];
+
+// 特定国家过滤
+$country_id = isset($_GET['country_id']) ? intval($_GET['country_id']) : 0;
 
 // 页面头部
 include('statistics_header.php');
@@ -48,6 +52,29 @@ include('statistics_header.php');
                 <label for="end_date">结束日期</label>
                 <input type="date" class="form-control" id="end_date" name="end_date" value="<?php echo $date_params['custom_end']; ?>">
             </div>
+            <div class="form-group">
+                <label for="period">时间粒度</label>
+                <select class="form-control" id="period" name="period">
+                    <option value="day" <?php echo $period == 'day' ? 'selected' : ''; ?>>日</option>
+                    <option value="week" <?php echo $period == 'week' ? 'selected' : ''; ?>>周</option>
+                    <option value="month" <?php echo $period == 'month' ? 'selected' : ''; ?>>月</option>
+                </select>
+            </div>
+            <div class="form-group">
+                <label for="country_id">国家/地区</label>
+                <select class="form-control" id="country_id" name="country_id">
+                    <option value="0">全部地区</option>
+                    <?php
+                    $country_filter = isset($_GET['country_id']) ? intval($_GET['country_id']) : 0;
+                    $sql = "SELECT id, countryName FROM country ORDER BY countryName";
+                    $countries = $conn->query($sql);
+                    while($country = $countries->fetch_assoc()) {
+                        $selected = ($country_filter == $country['id']) ? 'selected' : '';
+                        echo "<option value='{$country['id']}' {$selected}>{$country['countryName']}</option>";
+                    }
+                    ?>
+                </select>
+            </div>
             <div class="form-group">
                 <button type="submit" class="btn">应用筛选</button>
             </div>
@@ -55,42 +82,66 @@ include('statistics_header.php');
     </div>
     
     <!-- 地区销售数据概览 -->
-    <div class="stats-overview">
-        <div class="row">
-            <div class="col-md-4">
-                <div class="stat-card">
-                    <h3>总销售额</h3>
-                    <?php
-                    $total_sales = getRegionTotalSales($conn, $start_date, $end_date);
-                    echo "<div class='stat-value'>¥" . number_format($total_sales['total_amount'], 2) . "</div>";
-                    echo "<div class='stat-trend " . ($total_sales['growth'] >= 0 ? 'positive' : 'negative') . "'>";
-                    echo ($total_sales['growth'] >= 0 ? '+' : '') . number_format($total_sales['growth'], 2) . "%</div>";
-                    ?>
-                </div>
+    <div class="key-metrics-section">
+        <div class="section-title">
+            <h2>地区销售概览</h2>
+        </div>
+        <div class="stats-row">
+            <div class="stat-card">
+                <h3>总销售额</h3>
+                <?php
+                $total_sales = getRegionTotalSales($conn, $start_date, $end_date);
+                echo "<div class='stat-value'>¥" . number_format($total_sales['total_amount'], 2) . "</div>";
+                echo "<div class='stat-trend " . ($total_sales['growth'] >= 0 ? 'positive' : 'negative') . "'>";
+                echo ($total_sales['growth'] >= 0 ? '+' : '') . number_format($total_sales['growth'], 2) . "%</div>";
+                ?>
             </div>
-            <div class="col-md-4">
-                <div class="stat-card">
-                    <h3>活跃国家数</h3>
-                    <?php
-                    $active_countries = getActiveCountries($conn, $start_date, $end_date);
-                    echo "<div class='stat-value'>" . $active_countries['count'] . "</div>";
-                    ?>
-                </div>
+            
+            <div class="stat-card">
+                <h3>活跃国家数</h3>
+                <?php
+                $active_countries = getActiveCountries($conn, $start_date, $end_date);
+                echo "<div class='stat-value'>" . $active_countries['count'] . "</div>";
+                ?>
             </div>
-            <div class="col-md-4">
-                <div class="stat-card">
-                    <h3>平均订单金额</h3>
-                    <?php
-                    $avg_order = getAverageOrderByRegion($conn, $start_date, $end_date);
-                    echo "<div class='stat-value'>¥" . number_format($avg_order['global_avg'], 2) . "</div>";
-                    ?>
-                </div>
+            
+            <div class="stat-card">
+                <h3>平均订单金额</h3>
+                <?php
+                $avg_order = getAverageOrderByRegion($conn, $start_date, $end_date);
+                echo "<div class='stat-value'>¥" . number_format($avg_order['global_avg'], 2) . "</div>";
+                ?>
             </div>
         </div>
     </div>
     
+    <!-- 热门地区 -->
+    <div class="chart-container">
+        <div class="section-title">
+            <h2>热门地区</h2>
+        </div>
+        <?php
+        $region_orders = getOrdersByRegion($conn, $start_date, $end_date);
+        $region_labels = [];
+        $region_order_counts = [];
+        $region_quantities = [];
+        $region_amounts = [];
+        
+        while ($row = $region_orders->fetch_assoc()) {
+            $region_labels[] = $row['countryName'];
+            $region_order_counts[] = $row['order_count'];
+            $region_quantities[] = $row['total_quantity'];
+            $region_amounts[] = $row['total_amount'];
+        }
+        renderTopRegionsTable($region_labels, $region_order_counts, $region_quantities, $region_amounts);
+        ?>
+    </div>
+    
     <!-- 客户国家分布 -->
     <div class="chart-container">
+        <div class="section-title">
+            <h2>客户国家分布</h2>
+        </div>
         <?php
         $country_distribution = getCustomerCountryDistribution($conn);
         $country_labels = [];
@@ -104,25 +155,32 @@ include('statistics_header.php');
         ?>
     </div>
     
+    <!-- 地区销售趋势 -->
+    <div class="chart-container">
+        <div class="section-title">
+            <h2>地区销售趋势</h2>
+        </div>
+        <?php
+        $growth_trends = getRegionGrowthTrends($conn, $start_date, $end_date, $period);
+        renderRegionGrowthTrendsChart($growth_trends);
+        ?>
+    </div>
+    
     <!-- 地区订单分析 -->
     <div class="chart-container">
+        <div class="section-title">
+            <h2>地区订单分析</h2>
+        </div>
         <?php
-        $region_orders = getOrdersByRegion($conn, $start_date, $end_date);
-        $region_labels = [];
-        $region_order_counts = [];
-        $region_quantities = [];
-        
-        while ($row = $region_orders->fetch_assoc()) {
-            $region_labels[] = $row['countryName'];
-            $region_order_counts[] = $row['order_count'];
-            $region_quantities[] = $row['total_quantity'];
-        }
         renderRegionOrdersChart($region_labels, $region_order_counts, $region_quantities);
         ?>
     </div>
     
     <!-- 地区平均订单金额分析 -->
     <div class="chart-container">
+        <div class="section-title">
+            <h2>地区平均订单金额分析</h2>
+        </div>
         <?php
         $avg_order_data = getAverageOrderByRegion($conn, $start_date, $end_date);
         renderAverageOrderByRegionChart($avg_order_data['regions']);
@@ -131,22 +189,20 @@ include('statistics_header.php');
     
     <!-- 各地区产品类别偏好 -->
     <div class="chart-container">
+        <div class="section-title">
+            <h2>各地区产品类别偏好</h2>
+        </div>
         <?php
         $category_preferences = getRegionCategoryPreferences($conn, $start_date, $end_date);
         renderRegionCategoryPreferencesChart($category_preferences);
         ?>
     </div>
     
-    <!-- 地区销售增长趋势 -->
-    <div class="chart-container">
-        <?php
-        $growth_trends = getRegionGrowthTrends($conn, $start_date, $end_date, $date_params['period']);
-        renderRegionGrowthTrendsChart($growth_trends);
-        ?>
-    </div>
-    
     <!-- 地区销售同比分析 -->
     <div class="chart-container">
+        <div class="section-title">
+            <h2>地区销售同比分析</h2>
+        </div>
         <?php
         $comparison_data = getRegionSalesComparison($conn, $start_date, $end_date);
         renderRegionSalesComparisonTable($comparison_data);
@@ -155,6 +211,9 @@ include('statistics_header.php');
     
     <!-- 地区季节性分析 -->
     <div class="chart-container">
+        <div class="section-title">
+            <h2>地区季节性分析</h2>
+        </div>
         <?php
         $seasonal_analysis = getRegionSeasonalAnalysis($conn);
         renderRegionSeasonalAnalysisChart($seasonal_analysis);
@@ -163,6 +222,9 @@ include('statistics_header.php');
     
     <!-- 地区销售预测 -->
     <div class="chart-container">
+        <div class="section-title">
+            <h2>地区销售预测</h2>
+        </div>
         <?php
         $forecast_data = getRegionSalesForecast($conn, $start_date, $end_date);
         renderRegionSalesForecastChart($forecast_data);
@@ -179,12 +241,41 @@ include('statistics_header.php');
         color: #dc3545;
         font-weight: bold;
     }
+    .key-metrics-section {
+        margin-bottom: 30px;
+    }
+    .section-title {
+        margin-bottom: 20px;
+        border-bottom: 1px solid #eee;
+        padding-bottom: 10px;
+    }
+    .section-title h2 {
+        font-size: 20px;
+        margin: 0;
+        color: #333;
+    }
+    .stats-row {
+        display: flex;
+        flex-wrap: nowrap;
+        gap: 20px;
+        justify-content: space-between;
+        width: 100%;
+        margin-bottom: 20px;
+    }
     .stat-card {
         background-color: #f8f9fa;
         border-radius: 8px;
         padding: 20px;
-        margin-bottom: 20px;
+        margin-bottom: 0;
         box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        height: 100%;
+        transition: all 0.3s ease;
+        flex: 1;
+        min-width: 0; /* Prevents flex items from overflowing */
+    }
+    .stat-card:hover {
+        transform: translateY(-5px);
+        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
     }
     .stat-value {
         font-size: 24px;
@@ -212,6 +303,7 @@ include('statistics_header.php');
         border-radius: 8px;
         padding: 15px;
         margin-bottom: 30px;
+        box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
     .filter-form-inline {
         display: flex;
@@ -222,6 +314,50 @@ include('statistics_header.php');
     .form-group {
         margin-bottom: 10px;
     }
+    .data-table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-top: 15px;
+    }
+    .data-table th, .data-table td {
+        padding: 12px 15px;
+        text-align: left;
+        border-bottom: 1px solid #ddd;
+    }
+    .data-table th {
+        background-color: #f8f9fa;
+        font-weight: bold;
+        color: #333;
+    }
+    .data-table tr:hover {
+        background-color: #f5f5f5;
+    }
+    .subchart-container {
+        margin-bottom: 20px;
+    }
+    .subchart-title {
+        font-size: 16px;
+        margin-bottom: 15px;
+        color: #555;
+    }
+    .grid-row {
+        display: flex;
+        flex-wrap: wrap;
+        margin: -10px; /* Negative margin to offset the padding in grid-column */
+    }
+    .grid-column {
+        flex: 0 0 50%; /* Two columns per row */
+        padding: 10px;
+        box-sizing: border-box;
+    }
+    @media (max-width: 768px) {
+        .grid-column {
+            flex: 0 0 100%; /* Full width on small screens */
+        }
+        .stats-row {
+            flex-direction: column;
+        }
+    }
 </style>
 
 <script>
@@ -235,6 +371,12 @@ function toggleCustomDates() {
         customDateInputs.forEach(el => el.style.display = 'none');
     }
 }
+
+// 初始化所有图表的配置
+Chart.defaults.font.family = "'Arial', sans-serif";
+Chart.defaults.color = '#666';
+Chart.defaults.plugins.tooltip.backgroundColor = 'rgba(0, 0, 0, 0.8)';
+Chart.defaults.plugins.legend.position = 'bottom';
 </script>
 
 <?php

statistics_region.php

@@ -836,7 +836,7 @@ function renderRegionCategoryPreferencesChart($preferences) {
         <h2 class="chart-title">各地区产品类别偏好</h2>
     </div>
     
-    <div class="row">
+    <div class="grid-row">
         <?php foreach ($preferences as $country => $categories): ?>
             <?php
             $category_labels = [];
@@ -847,7 +847,7 @@ function renderRegionCategoryPreferencesChart($preferences) {
                 $category_data[] = $cat['quantity'];
             }
             ?>
-            <div class="col-md-6">
+            <div class="grid-column">
                 <div class="subchart-container">
                     <h3 class="subchart-title"><?php echo $country; ?></h3>
                     <canvas id="categoryChart<?php echo md5($country); ?>"></canvas>
@@ -1136,4 +1136,42 @@ function renderRegionSalesForecastChart($forecast_data) {
         });
     </script>
     <?php
+}
+
+/**
+ * 渲染热门地区表格
+ * 
+ * @param array $region_labels 地区标签
+ * @param array $region_order_counts 地区订单数量
+ * @param array $region_quantities 地区产品数量
+ * @param array $region_amounts 地区销售金额
+ * @return void
+ */
+function renderTopRegionsTable($region_labels, $region_order_counts, $region_quantities, $region_amounts) {
+    ?>
+    <table class="data-table">
+        <thead>
+            <tr>
+                <th>排名</th>
+                <th>国家/地区</th>
+                <th>订单数</th>
+                <th>产品数量</th>
+                <th>销售金额</th>
+                <th>平均订单金额</th>
+            </tr>
+        </thead>
+        <tbody>
+            <?php for ($i = 0; $i < count($region_labels); $i++): ?>
+                <tr>
+                    <td><?php echo $i + 1; ?></td>
+                    <td><?php echo htmlspecialchars($region_labels[$i]); ?></td>
+                    <td><?php echo number_format($region_order_counts[$i]); ?></td>
+                    <td><?php echo number_format($region_quantities[$i]); ?></td>
+                    <td>¥<?php echo number_format($region_amounts[$i], 2); ?></td>
+                    <td>¥<?php echo number_format($region_order_counts[$i] > 0 ? $region_amounts[$i] / $region_order_counts[$i] : 0, 2); ?></td>
+                </tr>
+            <?php endfor; ?>
+        </tbody>
+    </table>
+    <?php
 }