From 5b8ffac16cdbec87216a2109b67910ae08aa1115 Mon Sep 17 00:00:00 2001
From: linbin <495561397@qq.com>
Date: Wed, 8 Oct 2025 17:22:58 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=BC=E8=BF=B0:=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=93=81=E7=89=8C=E6=95=B0=E6=8D=AE=E5=88=86=E6=9E=90=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E5=8A=9F=E8=83=BD=E5=B9=B6=E6=9B=B4=E6=96=B0=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95=E5=AF=BC=E8=88=AA=20-=20=E4=BF=AE=E6=94=B9=E4=B8=BB?=
 =?UTF-8?q?=E8=8F=9C=E5=8D=95=E5=AF=BC=E8=88=AA=E9=93=BE=E6=8E=A5=EF=BC=8C?=
 =?UTF-8?q?=E5=B0=86"=E8=BF=9E=E9=94=81=E5=8D=95=E4=BD=8D=E4=B8=9A?=
 =?UTF-8?q?=E7=BB=A9=E6=8E=92=E8=A1=8C=E6=A6=9C"=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E4=B8=BA"=E5=93=81=E7=89=8C=E4=B8=9A=E7=BB=A9=E6=8E=92?=
 =?UTF-8?q?=E8=A1=8C=E6=A6=9C"=EF=BC=8C=E6=9B=B4=E5=87=86=E7=A1=AE?=
 =?UTF-8?q?=E5=9C=B0=E5=8F=8D=E6=98=A0=E9=A1=B5=E9=9D=A2=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=AE=9A=E4=BD=8D=E3=80=82=20-=20=E5=9C=A8=E5=93=81=E7=89=8C?=
 =?UTF-8?q?=E5=88=86=E9=94=80=E5=85=A8=E6=99=AF=E5=88=86=E6=9E=90=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=B8=AD=E6=96=B0=E5=A2=9E=E6=97=B6=E9=97=B4=E7=AD=9B?=
 =?UTF-8?q?=E9=80=89=E5=8A=9F=E8=83=BD=E6=A8=A1=E5=9D=97=EF=BC=8C=E6=94=AF?=
 =?UTF-8?q?=E6=8C=81=E5=BF=AB=E9=80=9F=E9=80=89=E6=8B=A9=E9=A2=84=E8=AE=BE?=
 =?UTF-8?q?=E6=97=B6=E9=97=B4=E8=8C=83=E5=9B=B4=EF=BC=88=E4=BB=8A=E6=97=A5?=
 =?UTF-8?q?=E3=80=81=E6=98=A8=E6=97=A5=E3=80=81=E8=BF=917=E5=A4=A9?=
 =?UTF-8?q?=E3=80=81=E8=BF=9130=E5=A4=A9=EF=BC=89=E5=92=8C=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9A=E4=B9=89=E6=97=A5=E6=9C=9F=E8=8C=83=E5=9B=B4=E6=9F=A5?=
 =?UTF-8?q?=E8=AF=A2=EF=BC=8C=E6=8F=90=E5=8D=87=E6=95=B0=E6=8D=AE=E5=88=86?=
 =?UTF-8?q?=E6=9E=90=E7=9A=84=E7=81=B5=E6=B4=BB=E6=80=A7=E3=80=82=20-=20?=
 =?UTF-8?q?=E5=9C=A8=E5=93=81=E7=89=8C=E7=88=86=E6=AC=BE=E5=95=86=E5=93=81?=
 =?UTF-8?q?=E6=A6=9C=E9=A1=B5=E9=9D=A2=E4=B8=AD=E5=90=8C=E6=A0=B7=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E6=97=B6=E9=97=B4=E7=AD=9B=E9=80=89=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=EF=BC=8C=E4=BF=9D=E6=8C=81=E7=95=8C=E9=9D=A2=E9=A3=8E=E6=A0=BC?=
 =?UTF-8?q?=E4=B8=80=E8=87=B4=E6=80=A7=EF=BC=8C=E7=94=A8=E6=88=B7=E5=8F=AF?=
 =?UTF-8?q?=E6=A0=B9=E6=8D=AE=E4=B8=8D=E5=90=8C=E6=97=B6=E9=97=B4=E7=BB=B4?=
 =?UTF-8?q?=E5=BA=A6=E6=9F=A5=E7=9C=8B=E5=95=86=E5=93=81=E9=94=80=E5=94=AE?=
 =?UTF-8?q?=E6=95=B0=E6=8D=AE=E3=80=82=20-=20=E5=88=A0=E9=99=A4=E5=8E=9F?=
 =?UTF-8?q?=E6=9C=89=E7=9A=84=E8=BF=9E=E9=94=81=E5=8D=95=E4=BD=8D=E4=B8=9A?=
 =?UTF-8?q?=E7=BB=A9=E6=8E=92=E8=A1=8C=E6=A6=9C=E6=96=87=E4=BB=B6=EF=BC=8C?=
 =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E4=B8=BA=E6=96=B0=E7=9A=84=E5=93=81=E7=89=8C?=
 =?UTF-8?q?=E4=B8=9A=E7=BB=A9=E6=8E=92=E8=A1=8C=E6=A6=9C=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 商家端web/index.html                          |   4 +-
 .../{连锁单位业绩排行榜.html => 品牌业绩排行榜.html} | 263 +++++++++++++-----
 .../品牌管理/数据分析/品牌分销全景分析.html   | 209 ++++++++++++--
 .../品牌管理/数据分析/品牌爆款商品榜.html     | 186 ++++++++++++-
 4 files changed, 559 insertions(+), 103 deletions(-)
 rename 商家端web/品牌管理/数据分析/{连锁单位业绩排行榜.html => 品牌业绩排行榜.html} (72%)

diff --git a/商家端web/index.html b/商家端web/index.html
index ae1f2e4..259e92e 100644
--- a/商家端web/index.html
+++ b/商家端web/index.html
@@ -513,9 +513,9 @@
                             </span>
                         </div>
                         <div class="submenu">
-                            <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/数据分析/连锁单位业绩排行榜.html', this);" style="padding-left: 70px;">
+                            <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/数据分析/品牌业绩排行榜.html', this);" style="padding-left: 70px;">
                                 <span class="submenu-icon"></span>
-                                连锁单位业绩排行榜
+                                品牌业绩排行榜
                             </a>
                             <a href="#" class="submenu-link" onclick="loadContent('./品牌管理/数据分析/品牌爆款商品榜.html', this);" style="padding-left: 70px;">
                                 <span class="submenu-icon"></span>
diff --git a/商家端web/品牌管理/数据分析/连锁单位业绩排行榜.html b/商家端web/品牌管理/数据分析/品牌业绩排行榜.html
similarity index 72%
rename from 商家端web/品牌管理/数据分析/连锁单位业绩排行榜.html
rename to 商家端web/品牌管理/数据分析/品牌业绩排行榜.html
index 709ab1a..e927adc 100644
--- a/商家端web/品牌管理/数据分析/连锁单位业绩排行榜.html
+++ b/商家端web/品牌管理/数据分析/品牌业绩排行榜.html
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>连锁单位业绩排行榜 - 品牌数据中心</title>
+    <title>xx品牌业绩排行榜 - 品牌数据中心</title>
     <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
     <style>
         * {
@@ -228,29 +228,155 @@
             background: #f8d7da;
             color: #721c24;
         }
+        
+        .time-filter-section {
+            background: white;
+            padding: 20px 24px;
+            margin-bottom: 16px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        .time-filter-container {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+        
+        .filter-label {
+            font-size: 14px;
+            color: #666;
+            font-weight: 500;
+            white-space: nowrap;
+        }
+        
+        .filter-buttons {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+        
+        .filter-btn {
+            padding: 8px 16px;
+            border: 1px solid #d9d9d9;
+            background: white;
+            color: #666;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s;
+            outline: none;
+        }
+        
+        .filter-btn:hover {
+            border-color: #1890ff;
+            color: #1890ff;
+        }
+        
+        .filter-btn.active {
+            background: #1890ff;
+            color: white;
+            border-color: #1890ff;
+        }
+        
+        .custom-btn {
+            border-style: dashed;
+        }
+        
+        .custom-date-range {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-left: auto;
+        }
+        
+        .date-input {
+            padding: 8px 12px;
+            border: 1px solid #d9d9d9;
+            border-radius: 6px;
+            font-size: 14px;
+            outline: none;
+        }
+        
+        .date-input:focus {
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+        
+        .date-separator {
+            color: #999;
+            font-size: 14px;
+        }
+        
+        .query-btn {
+            padding: 8px 16px;
+            background: #1890ff;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s;
+            outline: none;
+        }
+        
+        .query-btn:hover {
+            background: #40a9ff;
+        }
+        
+        @media (max-width: 768px) {
+            .time-filter-container {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 12px;
+            }
+            
+            .custom-date-range {
+                margin-left: 0;
+                width: 100%;
+            }
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="page-header">
-            <h1 class="page-title">📊 连锁单位业绩排行榜</h1>
-            <p class="page-subtitle">多维度对比连锁市场/店铺经营表现 · 数据更新时间：2024-01-15 10:30</p>
+            <h1 class="page-title">📊 xx品牌业绩排行榜</h1>
+        </div>
+
+        <div class="time-filter-section">
+            <div class="time-filter-container">
+                <div class="filter-label">时间范围：</div>
+                <div class="filter-buttons">
+                    <button class="filter-btn active" data-range="1">近1天</button>
+                    <button class="filter-btn" data-range="7">近7天</button>
+                    <button class="filter-btn" data-range="30">近30天</button>
+                    <button class="filter-btn custom-btn" data-range="custom">自定义</button>
+                </div>
+                <div class="custom-date-range" style="display: none;">
+                    <input type="date" class="date-input" id="startDate">
+                    <span class="date-separator">至</span>
+                    <input type="date" class="date-input" id="endDate">
+                    <button class="query-btn" id="customQuery">查询</button>
+                </div>
+            </div>
         </div>
 
         <div class="stats-section">
             <div class="stats-grid">
                 <div class="stat-item">
-                    <h3>连锁单位总数</h3>
+                    <h3>品牌单位总数</h3>
                     <div class="value">28</div>
                     <div class="label">家连锁市场/店铺</div>
                 </div>
                 <div class="stat-item">
-                    <h3>本月总销售额</h3>
+                    <h3>总销售额</h3>
                     <div class="value">¥856万</div>
                     <div class="label">环比上月 +23.5%</div>
                 </div>
                 <div class="stat-item">
-                    <h3>本月总订单量</h3>
+                    <h3>总订单量</h3>
                     <div class="value">12,847</div>
                     <div class="label">环比上月 +18.2%</div>
                 </div>
@@ -274,7 +400,6 @@
                         </div>
                         <div>
                             <span class="ranking-value">¥128.5万</span>
-                            <span class="trend-badge trend-up">↑ 32%</span>
                         </div>
                     </li>
                     <li class="ranking-item">
@@ -285,7 +410,6 @@
                         </div>
                         <div>
                             <span class="ranking-value">¥115.2万</span>
-                            <span class="trend-badge trend-up">↑ 28%</span>
                         </div>
                     </li>
                     <li class="ranking-item">
@@ -296,7 +420,6 @@
                         </div>
                         <div>
                             <span class="ranking-value">¥98.7万</span>
-                            <span class="trend-badge trend-up">↑ 15%</span>
                         </div>
                     </li>
                     <li class="ranking-item">
@@ -307,7 +430,6 @@
                         </div>
                         <div>
                             <span class="ranking-value">¥87.3万</span>
-                            <span class="trend-badge trend-up">↑ 22%</span>
                         </div>
                     </li>
                     <li class="ranking-item">
@@ -318,7 +440,6 @@
                         </div>
                         <div>
                             <span class="ranking-value">¥76.8万</span>
-                            <span class="trend-badge trend-up">↑ 18%</span>
                         </div>
                     </li>
                     <li class="ranking-item">
@@ -329,7 +450,6 @@
                         </div>
                         <div>
                             <span class="ranking-value">¥65.4万</span>
-                            <span class="trend-badge trend-up">↑ 12%</span>
                         </div>
                     </li>
                     <li class="ranking-item">
@@ -340,7 +460,6 @@
                         </div>
                         <div>
                             <span class="ranking-value">¥58.9万</span>
-                            <span class="trend-badge trend-up">↑ 25%</span>
                         </div>
                     </li>
                     <li class="ranking-item">
@@ -351,7 +470,6 @@
                         </div>
                         <div>
                             <span class="ranking-value">¥52.3万</span>
-                            <span class="trend-badge trend-down">↓ 5%</span>
                         </div>
                     </li>
                     <li class="ranking-item">
@@ -362,7 +480,6 @@
                         </div>
                         <div>
                             <span class="ranking-value">¥48.6万</span>
-                            <span class="trend-badge trend-up">↑ 8%</span>
                         </div>
                     </li>
                     <li class="ranking-item">
@@ -373,7 +490,6 @@
                         </div>
                         <div>
                             <span class="ranking-value">¥42.1万</span>
-                            <span class="trend-badge trend-up">↑ 10%</span>
                         </div>
                     </li>
                 </ul>
@@ -390,15 +506,67 @@
                 <h2>👥 客户量TOP10排行榜</h2>
                 <div class="chart-container" id="customerChart"></div>
             </div>
-            
-            <div class="chart-card">
-                <h2>📈 增长率TOP10排行榜</h2>
-                <div class="chart-container" id="growthChart"></div>
-            </div>
         </div>
     </div>
     
     <script>
+        // 时间筛选功能
+        const filterButtons = document.querySelectorAll('.filter-btn');
+        const customDateRange = document.querySelector('.custom-date-range');
+        const customQueryBtn = document.getElementById('customQuery');
+        
+        // 切换按钮状态
+        filterButtons.forEach(btn => {
+            btn.addEventListener('click', function() {
+                // 移除所有按钮的active状态
+                filterButtons.forEach(b => b.classList.remove('active'));
+                // 给当前按钮添加active状态
+                this.classList.add('active');
+                
+                const range = this.getAttribute('data-range');
+                
+                if (range === 'custom') {
+                    customDateRange.style.display = 'flex';
+                } else {
+                    customDateRange.style.display = 'none';
+                    // 这里可以根据选择的日期范围加载数据
+                    loadDataByRange(range);
+                }
+            });
+        });
+        
+        // 自定义日期查询
+        customQueryBtn.addEventListener('click', function() {
+            const startDate = document.getElementById('startDate').value;
+            const endDate = document.getElementById('endDate').value;
+            
+            if (!startDate || !endDate) {
+                alert('请选择开始和结束日期');
+                return;
+            }
+            
+            if (new Date(startDate) > new Date(endDate)) {
+                alert('开始日期不能晚于结束日期');
+                return;
+            }
+            
+            // 这里可以根据自定义日期范围加载数据
+            loadCustomData(startDate, endDate);
+        });
+        
+        // 根据预设范围加载数据
+        function loadDataByRange(range) {
+            console.log('加载近' + range + '天数据');
+            // 这里可以添加数据加载逻辑
+            // 例如：更新统计数据、图表数据等
+        }
+        
+        // 加载自定义日期范围数据
+        function loadCustomData(startDate, endDate) {
+            console.log('加载自定义日期数据:', startDate, '至', endDate);
+            // 这里可以添加数据加载逻辑
+        }
+        
         // 订单量排行榜
         const orderChart = echarts.init(document.getElementById('orderChart'));
         const orderOption = {
@@ -487,63 +655,10 @@
         };
         customerChart.setOption(customerOption);
         
-        // 增长率排行榜
-        const growthChart = echarts.init(document.getElementById('growthChart'));
-        const growthOption = {
-            tooltip: {
-                trigger: 'axis',
-                axisPointer: { type: 'shadow' }
-            },
-            grid: {
-                left: '3%',
-                right: '4%',
-                bottom: '3%',
-                containLabel: true
-            },
-            xAxis: {
-                type: 'value',
-                name: '环比增长率',
-                axisLabel: {
-                    formatter: '{value}%'
-                }
-            },
-            yAxis: {
-                type: 'category',
-                data: ['石景山(万达)', '西城(金融街)', '大兴(亦庄)', '顺义(空港)', '丰台(科技园)', 
-                       '东城(国贸)', '通州(副中心)', '海淀(中关村)', '朝阳(望京)', '昌平(天通苑)'],
-                axisLabel: {
-                    fontSize: 12
-                }
-            },
-            series: [{
-                name: '增长率',
-                type: 'bar',
-                data: [12, 15, 18, 22, 25, 28, 32, 35, 38, 45],
-                itemStyle: {
-                    color: function(params) {
-                        const colors = [
-                            new echarts.graphic.LinearGradient(0, 0, 1, 0, [
-                                { offset: 0, color: '#4facfe' },
-                                { offset: 1, color: '#00f2fe' }
-                            ])
-                        ];
-                        return colors[0];
-                    }
-                },
-                label: {
-                    show: true,
-                    position: 'right',
-                    formatter: '{c}%'
-                }
-            }]
-        };
-        growthChart.setOption(growthOption);
-        
         // 响应式
         window.addEventListener('resize', function() {
             orderChart.resize();
             customerChart.resize();
-            growthChart.resize();
         });
     </script>
 </body>
diff --git a/商家端web/品牌管理/数据分析/品牌分销全景分析.html b/商家端web/品牌管理/数据分析/品牌分销全景分析.html
index c7c1c64..ae6a386 100644
--- a/商家端web/品牌管理/数据分析/品牌分销全景分析.html
+++ b/商家端web/品牌管理/数据分析/品牌分销全景分析.html
@@ -47,6 +47,115 @@
             font-size: 14px;
             color: #666;
         }
+        
+        .time-filter-section {
+            background: white;
+            padding: 20px 24px;
+            margin-bottom: 16px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        .time-filter-container {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+        
+        .filter-label {
+            font-size: 14px;
+            color: #666;
+            font-weight: 500;
+            white-space: nowrap;
+        }
+        
+        .filter-buttons {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+        
+        .filter-btn {
+            padding: 8px 16px;
+            border: 1px solid #d9d9d9;
+            background: white;
+            color: #666;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s;
+            outline: none;
+        }
+        
+        .filter-btn:hover {
+            border-color: #1890ff;
+            color: #1890ff;
+        }
+        
+        .filter-btn.active {
+            background: #1890ff;
+            color: white;
+            border-color: #1890ff;
+        }
+        
+        .custom-btn {
+            border-style: dashed;
+        }
+        
+        .custom-date-range {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-left: auto;
+        }
+        
+        .date-input {
+            padding: 8px 12px;
+            border: 1px solid #d9d9d9;
+            border-radius: 6px;
+            font-size: 14px;
+            outline: none;
+        }
+        
+        .date-input:focus {
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+        
+        .date-separator {
+            color: #999;
+            font-size: 14px;
+        }
+        
+        .query-btn {
+            padding: 8px 16px;
+            background: #1890ff;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s;
+            outline: none;
+        }
+        
+        .query-btn:hover {
+            background: #40a9ff;
+        }
+        
+        @media (max-width: 768px) {
+            .time-filter-container {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 12px;
+            }
+            
+            .custom-date-range {
+                margin-left: 0;
+                width: 100%;
+            }
+        }
 
         .section-title {
             color: #262626;
@@ -323,7 +432,25 @@
     <div class="container">
         <div class="page-header">
             <h1 class="page-title">🎯 品牌分销全景分析</h1>
-            <p class="page-subtitle">全方位监控分销推广效果与分销商效能 · 数据更新时间：2024-01-15 10:30</p>
+            <p class="page-subtitle">全方位监控分销推广效果与分销商效能</p>
+        </div>
+
+        <div class="time-filter-section">
+            <div class="time-filter-container">
+                <div class="filter-label">时间范围：</div>
+                <div class="filter-buttons">
+                    <button class="filter-btn active" data-range="1">近1天</button>
+                    <button class="filter-btn" data-range="7">近7天</button>
+                    <button class="filter-btn" data-range="30">近30天</button>
+                    <button class="filter-btn custom-btn" data-range="custom">自定义</button>
+                </div>
+                <div class="custom-date-range" style="display: none;">
+                    <input type="date" class="date-input" id="startDate">
+                    <span class="date-separator">至</span>
+                    <input type="date" class="date-input" id="endDate">
+                    <button class="query-btn" id="customQuery">查询</button>
+                </div>
+            </div>
         </div>
 
         <h2 class="section-title">📊 分销商团队数据</h2>
@@ -359,13 +486,7 @@
                         <div class="icon">🔥</div>
                         <h3>活跃分销商</h3>
                         <div class="value">892</div>
-                        <div class="sub-value">活跃率 71.5% <span class="trend up">+5.2%</span></div>
-                    </div>
-                    <div class="stat-item">
-                        <div class="icon">📈</div>
-                        <h3>本月流失分销商</h3>
-                        <div class="value">23</div>
-                        <div class="sub-value">流失率 1.8% <span class="trend down">-0.3%</span></div>
+                        <div class="sub-value">活跃率 71.5%</div>
                     </div>
                 </div>
             </div>
@@ -614,6 +735,63 @@
     </div>
     
     <script>
+        // 时间筛选功能
+        const filterButtons = document.querySelectorAll('.filter-btn');
+        const customDateRange = document.querySelector('.custom-date-range');
+        const customQueryBtn = document.getElementById('customQuery');
+        
+        // 切换按钮状态
+        filterButtons.forEach(btn => {
+            btn.addEventListener('click', function() {
+                // 移除所有按钮的active状态
+                filterButtons.forEach(b => b.classList.remove('active'));
+                // 给当前按钮添加active状态
+                this.classList.add('active');
+                
+                const range = this.getAttribute('data-range');
+                
+                if (range === 'custom') {
+                    customDateRange.style.display = 'flex';
+                } else {
+                    customDateRange.style.display = 'none';
+                    // 这里可以根据选择的日期范围加载数据
+                    loadDataByRange(range);
+                }
+            });
+        });
+        
+        // 自定义日期查询
+        customQueryBtn.addEventListener('click', function() {
+            const startDate = document.getElementById('startDate').value;
+            const endDate = document.getElementById('endDate').value;
+            
+            if (!startDate || !endDate) {
+                alert('请选择开始和结束日期');
+                return;
+            }
+            
+            if (new Date(startDate) > new Date(endDate)) {
+                alert('开始日期不能晚于结束日期');
+                return;
+            }
+            
+            // 这里可以根据自定义日期范围加载数据
+            loadCustomData(startDate, endDate);
+        });
+        
+        // 根据预设范围加载数据
+        function loadDataByRange(range) {
+            console.log('加载近' + range + '天数据');
+            // 这里可以添加数据加载逻辑
+            // 例如：更新统计数据、图表数据等
+        }
+        
+        // 加载自定义日期范围数据
+        function loadCustomData(startDate, endDate) {
+            console.log('加载自定义日期数据:', startDate, '至', endDate);
+            // 这里可以添加数据加载逻辑
+        }
+        
         // 分销商等级分布饼图
         const levelChart = echarts.init(document.getElementById('levelChart'));
         const levelOption = {
@@ -664,7 +842,7 @@
                 trigger: 'axis'
             },
             legend: {
-                data: ['新增分销商', '流失分销商'],
+                data: ['新增分销商'],
                 top: 10
             },
             grid: {
@@ -695,19 +873,6 @@
                             { offset: 1, color: 'rgba(92, 184, 92, 0.05)' }
                         ])
                     }
-                },
-                {
-                    name: '流失分销商',
-                    type: 'line',
-                    smooth: true,
-                    data: [15, 18, 22, 19, 25, 23],
-                    itemStyle: { color: '#d9534f' },
-                    areaStyle: {
-                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
-                            { offset: 0, color: 'rgba(217, 83, 79, 0.3)' },
-                            { offset: 1, color: 'rgba(217, 83, 79, 0.05)' }
-                        ])
-                    }
                 }
             ]
         };
diff --git a/商家端web/品牌管理/数据分析/品牌爆款商品榜.html b/商家端web/品牌管理/数据分析/品牌爆款商品榜.html
index b87389c..12c0154 100644
--- a/商家端web/品牌管理/数据分析/品牌爆款商品榜.html
+++ b/商家端web/品牌管理/数据分析/品牌爆款商品榜.html
@@ -48,6 +48,115 @@
             color: #666;
         }
         
+        .time-filter-section {
+            background: white;
+            padding: 20px 24px;
+            margin-bottom: 16px;
+            border-radius: 8px;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        
+        .time-filter-container {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+            flex-wrap: wrap;
+        }
+        
+        .filter-label {
+            font-size: 14px;
+            color: #666;
+            font-weight: 500;
+            white-space: nowrap;
+        }
+        
+        .filter-buttons {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+        }
+        
+        .filter-btn {
+            padding: 8px 16px;
+            border: 1px solid #d9d9d9;
+            background: white;
+            color: #666;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s;
+            outline: none;
+        }
+        
+        .filter-btn:hover {
+            border-color: #1890ff;
+            color: #1890ff;
+        }
+        
+        .filter-btn.active {
+            background: #1890ff;
+            color: white;
+            border-color: #1890ff;
+        }
+        
+        .custom-btn {
+            border-style: dashed;
+        }
+        
+        .custom-date-range {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            margin-left: auto;
+        }
+        
+        .date-input {
+            padding: 8px 12px;
+            border: 1px solid #d9d9d9;
+            border-radius: 6px;
+            font-size: 14px;
+            outline: none;
+        }
+        
+        .date-input:focus {
+            border-color: #1890ff;
+            box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
+        }
+        
+        .date-separator {
+            color: #999;
+            font-size: 14px;
+        }
+        
+        .query-btn {
+            padding: 8px 16px;
+            background: #1890ff;
+            color: white;
+            border: none;
+            border-radius: 6px;
+            font-size: 14px;
+            cursor: pointer;
+            transition: all 0.3s;
+            outline: none;
+        }
+        
+        .query-btn:hover {
+            background: #40a9ff;
+        }
+        
+        @media (max-width: 768px) {
+            .time-filter-container {
+                flex-direction: column;
+                align-items: flex-start;
+                gap: 12px;
+            }
+            
+            .custom-date-range {
+                margin-left: 0;
+                width: 100%;
+            }
+        }
+        
         .stats-section {
             background: white;
             padding: 24px;
@@ -319,7 +428,25 @@
     <div class="container">
         <div class="page-header">
             <h1 class="page-title">🔥 品牌爆款商品榜</h1>
-            <p class="page-subtitle">跨所有连锁单位的商品表现排行 · 数据更新时间：2024-01-15 10:30</p>
+            <p class="page-subtitle">跨所有连锁单位的商品表现排行</p>
+        </div>
+        
+        <div class="time-filter-section">
+            <div class="time-filter-container">
+                <div class="filter-label">时间范围：</div>
+                <div class="filter-buttons">
+                    <button class="filter-btn active" data-range="1">近1天</button>
+                    <button class="filter-btn" data-range="7">近7天</button>
+                    <button class="filter-btn" data-range="30">近30天</button>
+                    <button class="filter-btn custom-btn" data-range="custom">自定义</button>
+                </div>
+                <div class="custom-date-range" style="display: none;">
+                    <input type="date" class="date-input" id="startDate">
+                    <span class="date-separator">至</span>
+                    <input type="date" class="date-input" id="endDate">
+                    <button class="query-btn" id="customQuery">查询</button>
+                </div>
+            </div>
         </div>
 
         <div class="stats-section">
@@ -765,13 +892,62 @@
             ratingChart.resize();
         });
         
-        // 筛选标签交互
-        document.querySelectorAll('.filter-tag').forEach(tag => {
-            tag.addEventListener('click', function() {
-                document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
+        // 时间筛选功能
+        const filterButtons = document.querySelectorAll('.filter-btn');
+        const customDateRange = document.querySelector('.custom-date-range');
+        const customQueryBtn = document.getElementById('customQuery');
+        
+        // 切换按钮状态
+        filterButtons.forEach(btn => {
+            btn.addEventListener('click', function() {
+                // 移除所有按钮的active状态
+                filterButtons.forEach(b => b.classList.remove('active'));
+                // 给当前按钮添加active状态
                 this.classList.add('active');
+                
+                const range = this.getAttribute('data-range');
+                
+                if (range === 'custom') {
+                    customDateRange.style.display = 'flex';
+                } else {
+                    customDateRange.style.display = 'none';
+                    // 这里可以根据选择的日期范围加载数据
+                    loadDataByRange(range);
+                }
             });
         });
+        
+        // 自定义日期查询
+        customQueryBtn.addEventListener('click', function() {
+            const startDate = document.getElementById('startDate').value;
+            const endDate = document.getElementById('endDate').value;
+            
+            if (!startDate || !endDate) {
+                alert('请选择开始和结束日期');
+                return;
+            }
+            
+            if (new Date(startDate) > new Date(endDate)) {
+                alert('开始日期不能晚于结束日期');
+                return;
+            }
+            
+            // 这里可以根据自定义日期范围加载数据
+            loadCustomData(startDate, endDate);
+        });
+        
+        // 根据预设范围加载数据
+        function loadDataByRange(range) {
+            console.log('加载近' + range + '天数据');
+            // 这里可以添加数据加载逻辑
+            // 例如：更新统计数据、图表数据等
+        }
+        
+        // 加载自定义日期范围数据
+        function loadCustomData(startDate, endDate) {
+            console.log('加载自定义日期数据:', startDate, '至', endDate);
+            // 这里可以添加数据加载逻辑
+        }
     </script>
 </body>
 </html>