Home Explore Help
Register Sign In
igamebox
/
mtb_crm_asp
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

fleat: add statistics

igb 1 month ago
parent
f458d63ca3
commit
de06912739
3 changed files with 90 additions and 58 deletions
Unified View Show Diff Stats
  1. 28 2
      statistics.php
  2. 43 45
      statistics_customers.php
  3. 19 11
      statistics_products.php

+ 28 - 2
statistics.php
View File 

@@ -499,6 +499,32 @@ while ($row = $detailed_orders->fetch_assoc()) {
 
         .download-btn:hover {
 
         .download-btn:hover {
 
             background: #45a049;
 
             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>
 
     </style>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
@@ -522,7 +548,7 @@ while ($row = $detailed_orders->fetch_assoc()) {
 
                     </select>
 
                     </select>
 
                 </div>
 
                 </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">
 
                     <div class="form-group">
 
                         <label>开始日期</label>
 
                         <label>开始日期</label>
 
                         <input type="date" name="start_date" class="form-control" value="<?php echo $custom_start; ?>">
 
                         <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>
 
                     </select>
 
                 </div>
 
                 </div>
 
                 
                 
-                <div class="form-group" style="align-self: flex-end;">
 
+                <div class="form-group">
 
                     <input type="submit" class="btn" value="应用筛选">
 
                     <input type="submit" class="btn" value="应用筛选">
 
                 </div>
 
                 </div>
 
             </form>
 
             </form>

+ 43 - 45
statistics_customers.php
View File 

@@ -292,11 +292,49 @@ function renderNewVsReturningCustomersChart($new_vs_returning) {
 
         <div class="chart-header">
 
         <div class="chart-header">
 
             <h2 class="chart-title">新老客户分析</h2>
 
             <h2 class="chart-title">新老客户分析</h2>
 
         </div>
 
         </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>
 
                 <canvas id="newVsReturningCustomersChart"></canvas>
 
             </div>
 
             </div>
 
-            <div class="chart-column">
 
+            <div class="pie-chart-wrapper">
 
+                <h3 style="text-align: center; margin-bottom: 15px;">销售额分布</h3>
 
                 <canvas id="newVsReturningAmountChart"></canvas>
 
                 <canvas id="newVsReturningAmountChart"></canvas>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
@@ -357,13 +395,10 @@ function renderNewVsReturningCustomersChart($new_vs_returning) {
 
             },
 
             },
 
             options: {
 
             options: {
 
                 responsive: true,
 
                 responsive: true,
 
+                maintainAspectRatio: true,
 
                 plugins: {
 
                 plugins: {
 
                     legend: {
 
                     legend: {
 
                         position: 'bottom',
 
                         position: 'bottom',
 
-                    },
 
-                    title: {
 
-                        display: true,
 
-                        text: '客户数量分布'
 
                     }
 
                     }
 
                 }
 
                 }
 
             }
 
             }
 
@@ -389,51 +424,14 @@ function renderNewVsReturningCustomersChart($new_vs_returning) {
 
             },
 
             },
 
             options: {
 
             options: {
 
                 responsive: true,
 
                 responsive: true,
 
+                maintainAspectRatio: true,
 
                 plugins: {
 
                 plugins: {
 
                     legend: {
 
                     legend: {
 
                         position: 'bottom',
 
                         position: 'bottom',
 
-                    },
 
-                    title: {
 
-                        display: true,
 
-                        text: '销售额分布'
 
                     }
 
                     }
 
                 }
 
                 }
 
             }
 
             }
 
         });
 
         });
 
     </script>
 
     </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
 
     <?php
 
 } 
 }

+ 19 - 11
statistics_products.php
View File 

@@ -265,11 +265,25 @@ function renderProductCategorySalesChart($categories, $quantities, $revenues) {
 
         <div class="chart-header">
 
         <div class="chart-header">
 
             <h2 class="chart-title">产品类别销售分布</h2>
 
             <h2 class="chart-title">产品类别销售分布</h2>
 
         </div>
 
         </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>
 
                 <canvas id="categoryQuantityChart"></canvas>
 
             </div>
 
             </div>
 
-            <div class="col-md-6">
 
+            <div class="pie-chart-wrapper">
 
+                <h3 style="text-align: center; margin-bottom: 15px;">产品类别销售收入分布</h3>
 
                 <canvas id="categoryRevenueChart"></canvas>
 
                 <canvas id="categoryRevenueChart"></canvas>
 
             </div>
 
             </div>
 
         </div>
 
         </div>
 
@@ -297,13 +311,10 @@ function renderProductCategorySalesChart($categories, $quantities, $revenues) {
 
             },
 
             },
 
             options: {
 
             options: {
 
                 responsive: true,
 
                 responsive: true,
 
+                maintainAspectRatio: true,
 
                 plugins: {
 
                 plugins: {
 
                     legend: {
 
                     legend: {
 
                         position: 'bottom',
 
                         position: 'bottom',
 
-                    },
 
-                    title: {
 
-                        display: true,
 
-                        text: '产品类别销售数量分布'
 
                     }
 
                     }
 
                 }
 
                 }
 
             }
 
             }
 
@@ -330,13 +341,10 @@ function renderProductCategorySalesChart($categories, $quantities, $revenues) {
 
             },
 
             },
 
             options: {
 
             options: {
 
                 responsive: true,
 
                 responsive: true,
 
+                maintainAspectRatio: true,
 
                 plugins: {
 
                 plugins: {
 
                     legend: {
 
                     legend: {
 
                         position: 'bottom',
 
                         position: 'bottom',
 
-                    },
 
-                    title: {
 
-                        display: true,
 
-                        text: '产品类别销售收入分布'
 
                     }
 
                     }
 
                 }
 
                 }
 
             }
 
             }