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>
