44 lines
2.3 KiB
Markdown
44 lines
2.3 KiB
Markdown
# 调整DNS趋势图表默认显示和浮窗独立性
|
||
|
||
## 问题分析
|
||
1. **DNS趋势图表默认显示**：当前代码中`isMixedView`变量默认设置为`true`，但在`initTimeRangeToggle`函数中，默认选中第一个按钮后会将`isMixedView`设置为`false`，导致实际默认显示的是24小时视图而非混合视图。
|
||
2. **浮窗图表独立性**：当前代码中详细图表（浮窗）已有独立变量`detailedCurrentTimeRange`和`detailedIsMixedView`，但需要确保初始化时正确设置，避免与主图表冲突。
|
||
|
||
## 实现计划
|
||
|
||
### 1. 修改DNS趋势图表默认显示为混合内容
|
||
- **文件**：`/root/dns/static/js/dashboard.js`
|
||
- **函数**：`initTimeRangeToggle`
|
||
- **修改点**：
|
||
- 在函数末尾，默认选中第一个按钮后，将`isMixedView`设置为`true`
|
||
- 将`currentTimeRange`设置为`'mixed'`
|
||
- 更新按钮样式，添加混合视图标记
|
||
|
||
### 2. 确保浮窗图表初始化正确
|
||
- **文件**：`/root/dns/static/js/dashboard.js`
|
||
- **函数**：`initDetailedTimeRangeToggle`
|
||
- **修改点**：
|
||
- 确保初始化时`detailedIsMixedView`默认值与主图表保持一致
|
||
- 确保点击浮窗中的时间范围按钮时，只修改详细图表的变量，不影响主图表
|
||
|
||
### 3. 验证功能完整性
|
||
- 检查`drawDNSRequestsChart`函数，确保它使用主图表变量
|
||
- 检查`drawDetailedDNSRequestsChart`函数，确保它使用详细图表变量
|
||
- 确保两个函数的实现逻辑一致，但使用不同的变量
|
||
|
||
## 预期效果
|
||
1. DNS趋势图表默认显示混合内容（24小时、7天、30天数据同时显示）
|
||
2. 展开浮窗后，切换浮窗中的时间范围或视图模式，不会影响主页图表的显示
|
||
3. 主页图表和浮窗图表可以独立显示不同的时间范围和视图模式
|
||
|
||
## 实现步骤
|
||
1. 修改`initTimeRangeToggle`函数，设置默认混合视图
|
||
2. 优化`initDetailedTimeRangeToggle`函数，确保浮窗图表初始化正确
|
||
3. 验证两个图表函数的变量使用是否正确
|
||
4. 测试功能完整性
|
||
|
||
## 代码修改点
|
||
1. **第1250-1256行**：修改默认按钮选中逻辑，添加混合视图设置
|
||
2. **第1475-1507行**：优化浮窗图表时间范围切换逻辑
|
||
3. **第1716-1912行**：确保主图表函数使用正确变量
|
||
4. **第1509-1714行**：确保浮窗图表函数使用正确变量 |