فهرست منبع

fleat: add statistics

igb 1 ماه پیش
والد
کامیت
de06912739
3فایلهای تغییر یافته به همراه90 افزوده شده و 58 حذف شده
  1. 28 2
      statistics.php
  2. 43 45
      statistics_customers.php
  3. 19 11
      statistics_products.php

+ 28 - 2
statistics.php

@@ -499,6 +499,32 @@ while ($row = $detailed_orders->fetch_assoc()) {
         .download-btn:hover {
             background: #45a049;
         }
+        
+        /* 确保筛选表单元素在同一行显示 */
+        .filter-form form {
+            display: flex;
+            flex-direction: row;
+            align-items: flex-end;
+            gap: 15px;
+            flex-wrap: nowrap;
+            width: 100%;
+        }
+        .filter-form .form-group {
+            margin-right: 0;
+            flex: 0 0 auto;
+            white-space: nowrap;
+        }
+        .filter-form label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        .filter-form #custom_dates {
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+            flex: 0 0 auto;
+        }
     </style>
 </head>
 <body>
@@ -522,7 +548,7 @@ while ($row = $detailed_orders->fetch_assoc()) {
                     </select>
                 </div>
                 
-                <div id="custom_dates" style="display: <?php echo $date_range == 'custom' ? 'flex' : 'none'; ?>; gap: 10px;">
+                <div id="custom_dates" style="display: <?php echo $date_range == 'custom' ? 'flex' : 'none'; ?>;">
                     <div class="form-group">
                         <label>开始日期</label>
                         <input type="date" name="start_date" class="form-control" value="<?php echo $custom_start; ?>">
@@ -542,7 +568,7 @@ while ($row = $detailed_orders->fetch_assoc()) {
                     </select>
                 </div>
                 
-                <div class="form-group" style="align-self: flex-end;">
+                <div class="form-group">
                     <input type="submit" class="btn" value="应用筛选">
                 </div>
             </form>

+ 43 - 45
statistics_customers.php

@@ -292,11 +292,49 @@ function renderNewVsReturningCustomersChart($new_vs_returning) {
         <div class="chart-header">
             <h2 class="chart-title">新老客户分析</h2>
         </div>
-        <div class="chart-row">
-            <div class="chart-column">
+        <style>
+            .pie-charts-container {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                margin-bottom: 20px;
+            }
+            .pie-chart-wrapper {
+                flex: 0 0 48%;
+                max-width: 48%;
+            }
+            .customer-stats-summary {
+                margin-top: 20px;
+                padding: 15px;
+                background-color: #f9f9f9;
+                border-radius: 5px;
+            }
+            .stats-row {
+                display: flex;
+                margin-bottom: 15px;
+            }
+            .stat-item {
+                flex: 1;
+                padding: 0 10px;
+            }
+            .stat-label {
+                display: block;
+                font-weight: bold;
+                margin-bottom: 5px;
+                color: #555;
+            }
+            .stat-value {
+                font-size: 16px;
+                color: #333;
+            }
+        </style>
+        <div class="pie-charts-container">
+            <div class="pie-chart-wrapper">
+                <h3 style="text-align: center; margin-bottom: 15px;">客户数量分布</h3>
                 <canvas id="newVsReturningCustomersChart"></canvas>
             </div>
-            <div class="chart-column">
+            <div class="pie-chart-wrapper">
+                <h3 style="text-align: center; margin-bottom: 15px;">销售额分布</h3>
                 <canvas id="newVsReturningAmountChart"></canvas>
             </div>
         </div>
@@ -357,13 +395,10 @@ function renderNewVsReturningCustomersChart($new_vs_returning) {
             },
             options: {
                 responsive: true,
+                maintainAspectRatio: true,
                 plugins: {
                     legend: {
                         position: 'bottom',
-                    },
-                    title: {
-                        display: true,
-                        text: '客户数量分布'
                     }
                 }
             }
@@ -389,51 +424,14 @@ function renderNewVsReturningCustomersChart($new_vs_returning) {
             },
             options: {
                 responsive: true,
+                maintainAspectRatio: true,
                 plugins: {
                     legend: {
                         position: 'bottom',
-                    },
-                    title: {
-                        display: true,
-                        text: '销售额分布'
                     }
                 }
             }
         });
     </script>
-    <style>
-        .chart-row {
-            display: flex;
-            flex-wrap: wrap;
-        }
-        .chart-column {
-            flex: 0 0 50%;
-            max-width: 50%;
-        }
-        .customer-stats-summary {
-            margin-top: 20px;
-            padding: 15px;
-            background-color: #f9f9f9;
-            border-radius: 5px;
-        }
-        .stats-row {
-            display: flex;
-            margin-bottom: 15px;
-        }
-        .stat-item {
-            flex: 1;
-            padding: 0 10px;
-        }
-        .stat-label {
-            display: block;
-            font-weight: bold;
-            margin-bottom: 5px;
-            color: #555;
-        }
-        .stat-value {
-            font-size: 16px;
-            color: #333;
-        }
-    </style>
     <?php
 } 

+ 19 - 11
statistics_products.php

@@ -265,11 +265,25 @@ function renderProductCategorySalesChart($categories, $quantities, $revenues) {
         <div class="chart-header">
             <h2 class="chart-title">产品类别销售分布</h2>
         </div>
-        <div class="row">
-            <div class="col-md-6">
+        <style>
+            .pie-charts-container {
+                display: flex;
+                flex-direction: row;
+                justify-content: space-between;
+                margin-bottom: 20px;
+            }
+            .pie-chart-wrapper {
+                flex: 0 0 48%;
+                max-width: 48%;
+            }
+        </style>
+        <div class="pie-charts-container">
+            <div class="pie-chart-wrapper">
+                <h3 style="text-align: center; margin-bottom: 15px;">产品类别销售数量分布</h3>
                 <canvas id="categoryQuantityChart"></canvas>
             </div>
-            <div class="col-md-6">
+            <div class="pie-chart-wrapper">
+                <h3 style="text-align: center; margin-bottom: 15px;">产品类别销售收入分布</h3>
                 <canvas id="categoryRevenueChart"></canvas>
             </div>
         </div>
@@ -297,13 +311,10 @@ function renderProductCategorySalesChart($categories, $quantities, $revenues) {
             },
             options: {
                 responsive: true,
+                maintainAspectRatio: true,
                 plugins: {
                     legend: {
                         position: 'bottom',
-                    },
-                    title: {
-                        display: true,
-                        text: '产品类别销售数量分布'
                     }
                 }
             }
@@ -330,13 +341,10 @@ function renderProductCategorySalesChart($categories, $quantities, $revenues) {
             },
             options: {
                 responsive: true,
+                maintainAspectRatio: true,
                 plugins: {
                     legend: {
                         position: 'bottom',
-                    },
-                    title: {
-                        display: true,
-                        text: '产品类别销售收入分布'
                     }
                 }
             }