yovinchen/BigDataTool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成基本分表查询

Browse Source
This commit is contained in:
YoVinchen
2025-08-02 01:23:33 +08:00
parent 689328eeca
commit b7a05e56d0
4 changed files with 1087 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

158
templates/db_compare.html
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数据库查询比对工具</title>
<title>数据库查询比对工具 - 支持分表查询</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
<style>
@@ -226,6 +226,35 @@
#diffView td {
padding: 0.5rem;
}
/* 分表配置样式 */
.sharding-config-section {
background-color: #e8f4fd;
border-radius: 8px;
padding: 20px;
margin-bottom: 20px;
border: 2px solid #0d6efd;
}
.sharding-info {
background-color: #f8f9fa;
border-radius: 8px;
padding: 15px;
margin-bottom: 20px;
}
.shard-table-info {
display: inline-block;
margin: 5px;
padding: 5px 10px;
background-color: #e7f3ff;
border-radius: 15px;
font-size: 0.9em;
border: 1px solid #b3d9ff;
}
.shard-error-info {
background-color: #ffe6e6;
border-color: #ffb3b3;
color: #d63384;
}
</style>
</head>
<body>
@@ -244,7 +273,10 @@
<a class="nav-link" href="/">首页</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="/db-compare">数据库比对</a>
<a class="nav-link active" href="/db-compare">单表查询</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/sharding-compare">分表查询</a>
</li>
</ul>
</div>
@@ -256,6 +288,7 @@
<div class="col-12">
<h1 class="text-center mb-4">
<i class="fas fa-database"></i> 数据库查询比对工具
<small class="text-muted d-block fs-6 mt-2">支持单表查询和分表查询两种模式</small>
</h1>
</div>
</div>
@@ -266,6 +299,72 @@
<div class="config-section">
<h4><i class="fas fa-cogs"></i> 配置管理</h4>
<!-- 查询模式切换 -->
<div class="card mb-3">
<div class="card-header">
<h6><i class="fas fa-toggle-on"></i> 查询模式</h6>
</div>
<div class="card-body">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" id="enableSharding" onchange="toggleShardingMode()">
<label class="form-check-label" for="enableSharding">
<strong>启用分表查询模式</strong>
<small class="text-muted d-block">支持TWCS时间分表的智能索引计算</small>
</label>
</div>
</div>
</div>
<!-- 分表参数配置 (默认隐藏) -->
<div class="sharding-config-section" id="shardingConfig" style="display: none;">
<h5><i class="fas fa-layer-group"></i> 分表参数配置</h5>
<div class="row">
<div class="col-md-6">
<h6 class="text-primary">生产环境分表配置</h6>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="use_sharding_for_pro" checked>
<label class="form-check-label" for="use_sharding_for_pro">
启用分表查询
</label>
</div>
<div class="mb-2">
<label for="pro_interval_seconds" class="form-label">时间间隔(秒)</label>
<input type="number" class="form-control form-control-sm" id="pro_interval_seconds" value="604800" min="1">
<small class="form-text text-muted">默认604800秒(7天)</small>
</div>
<div class="mb-2">
<label for="pro_table_count" class="form-label">分表数量</label>
<input type="number" class="form-control form-control-sm" id="pro_table_count" value="14" min="1" max="100">
<small class="form-text text-muted">默认14张分表</small>
</div>
</div>
<div class="col-md-6">
<h6 class="text-success">测试环境分表配置</h6>
<div class="form-check mb-2">
<input class="form-check-input" type="checkbox" id="use_sharding_for_test">
<label class="form-check-label" for="use_sharding_for_test">
启用分表查询
</label>
</div>
<div class="mb-2">
<label for="test_interval_seconds" class="form-label">时间间隔(秒)</label>
<input type="number" class="form-control form-control-sm" id="test_interval_seconds" value="604800" min="1">
<small class="form-text text-muted">默认604800秒(7天)</small>
</div>
<div class="mb-2">
<label for="test_table_count" class="form-label">分表数量</label>
<input type="number" class="form-control form-control-sm" id="test_table_count" value="14" min="1" max="100">
<small class="form-text text-muted">默认14张分表</small>
</div>
</div>
</div>
<div class="alert alert-info mt-3" role="alert">
<i class="fas fa-info-circle"></i>
<strong>分表计算说明：</strong>系统会自动从Key值中提取时间戳并计算分表索引。
计算公式：<code>时间戳 // 间隔秒数 % 分表数量</code>
</div>
</div>
<!-- 配置组管理 -->
<div class="card mb-3">
<div class="card-header">
@@ -367,6 +466,7 @@
<div class="col-6">
<label class="form-label">表名</label>
<input type="text" class="form-control form-control-sm" id="pro_table" placeholder="document">
<small class="form-text text-muted" id="pro_table_hint">完整表名或基础表名(分表时)</small>
</div>
</div>
</div>
@@ -419,6 +519,7 @@
<div class="col-6">
<label class="form-label">表名</label>
<input type="text" class="form-control form-control-sm" id="test_table" placeholder="document_test">
<small class="form-text text-muted" id="test_table_hint">完整表名或基础表名(分表时)</small>
</div>
</div>
</div>
@@ -432,7 +533,8 @@
<div class="card-body">
<div class="mb-3">
<label class="form-label">主键字段 (逗号分隔)</label>
<input type="text" class="form-control form-control-sm" id="keys" placeholder="docid" value="docid">
<input type="text" class="form-control form-control-sm" id="keys" placeholder="docid 或 wmid" value="docid">
<small class="form-text text-muted">分表模式下推荐使用包含时间戳的字段如wmid</small>
</div>
<div class="mb-3">
<label class="form-label">比较字段 (空则比较全部，逗号分隔)</label>
@@ -453,11 +555,12 @@
<h4><i class="fas fa-key"></i> 查询Key管理</h4>
<div class="mb-3">
<label class="form-label">批量Key输入 (一行一个)</label>
<textarea class="form-control query-keys" id="query_values" placeholder="请输入查询的Key值，一行一个&#10;例如：&#10;key1&#10;key2&#10;key3"></textarea>
<textarea class="form-control query-keys" id="query_values" placeholder="请输入查询的Key值，一行一个&#10;单表查询示例：&#10;key1&#10;key2&#10;key3&#10;&#10;分表查询示例（包含时间戳）：&#10;wmid_1609459200&#10;wmid_1610064000&#10;wmid_1610668800"></textarea>
<small class="form-text text-muted" id="key_input_hint">单表模式：输入普通Key值 | 分表模式：Key值应包含时间戳用于计算分表索引</small>
</div>
<div class="mb-3">
<button class="btn btn-primary" onclick="executeQuery()">
<i class="fas fa-play"></i> 执行查询比对
<i class="fas fa-play"></i> <span id="executeButtonText">执行查询比对</span>
</button>
<button class="btn btn-secondary" onclick="clearResults()">
<i class="fas fa-trash"></i> 清空结果
@@ -469,12 +572,18 @@
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">查询中...</span>
</div>
<p class="mt-2">正在执行查询比对...</p>
<p class="mt-2" id="loadingText">正在执行查询比对...</p>
</div>
</div>
<!-- 结果面板 -->
<div class="result-section" id="results" style="display: none;">
<!-- 分表查询信息 (分表模式时显示) -->
<div class="sharding-info" id="shardingInfoContainer" style="display: none;">
<h6><i class="fas fa-info-circle"></i> 分表查询信息</h6>
<div id="shardingInfo"></div>
</div>
<!-- 统计信息 -->
<div class="row" id="stats">
<!-- 统计卡片将在这里动态生成 -->
@@ -499,6 +608,11 @@
<i class="fas fa-chart-pie"></i> 比较总结
</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="logs-tab" data-bs-toggle="tab" data-bs-target="#logs-panel" type="button" role="tab">
<i class="fas fa-file-alt"></i> 查询日志
</button>
</li>
</ul>
<div class="mt-2">
<button class="btn btn-sm btn-outline-primary" onclick="exportResults()">
@@ -529,6 +643,38 @@
<!-- 总结报告将在这里动态生成 -->
</div>
</div>
<!-- 查询日志面板 -->
<div class="tab-pane fade" id="logs-panel" role="tabpanel">
<div class="d-flex justify-content-between align-items-center mb-3">
<div class="d-flex align-items-center">
<h6 class="mb-0 me-3">查询执行日志</h6>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="log-level-info" checked onchange="filterLogsByLevel()">
<label class="form-check-label text-primary" for="log-level-info">INFO</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="log-level-warning" checked onchange="filterLogsByLevel()">
<label class="form-check-label text-warning" for="log-level-warning">WARNING</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="checkbox" id="log-level-error" checked onchange="filterLogsByLevel()">
<label class="form-check-label text-danger" for="log-level-error">ERROR</label>
</div>
</div>
<div>
<button class="btn btn-sm btn-outline-primary me-2" onclick="refreshQueryLogs()">
<i class="fas fa-sync-alt"></i> 刷新
</button>
<button class="btn btn-sm btn-outline-danger" onclick="clearQueryLogs()">
<i class="fas fa-trash"></i> 清空
</button>
</div>
</div>
<div id="query-logs" style="max-height: 500px; overflow-y: auto;">
<!-- 查询日志将在这里动态生成 -->
</div>
</div>
</div>
</div>
</div>