初始化项目
This commit is contained in:
399
templates/db_compare.html
Normal file
399
templates/db_compare.html
Normal file
@@ -0,0 +1,399 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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>
|
||||
.config-section {
|
||||
background-color: #f8f9fa;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.result-section {
|
||||
margin-top: 30px;
|
||||
}
|
||||
.difference-item {
|
||||
border-left: 4px solid #dc3545;
|
||||
padding-left: 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #fff5f5;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
.stat-card {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.loading {
|
||||
display: none;
|
||||
}
|
||||
.query-keys {
|
||||
min-height: 120px;
|
||||
}
|
||||
.compare-fields {
|
||||
min-height: 80px;
|
||||
}
|
||||
.exclude-fields {
|
||||
min-height: 80px;
|
||||
}
|
||||
.json-field {
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 0.9em;
|
||||
background-color: #f8f9fa !important;
|
||||
}
|
||||
.badge {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
.field-container {
|
||||
border: 1px solid #e9ecef;
|
||||
border-radius: 5px;
|
||||
padding: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.field-value {
|
||||
font-size: 0.85em;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
margin: 0;
|
||||
}
|
||||
.field-header {
|
||||
font-weight: 600;
|
||||
color: #495057;
|
||||
}
|
||||
.pagination {
|
||||
--bs-pagination-padding-x: 0.5rem;
|
||||
--bs-pagination-padding-y: 0.25rem;
|
||||
--bs-pagination-font-size: 0.875rem;
|
||||
}
|
||||
.copy-btn {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
padding: 2px 6px;
|
||||
font-size: 0.75rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.field-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 确保提示消息在最顶层 */
|
||||
.alert {
|
||||
position: fixed !important;
|
||||
top: 20px !important;
|
||||
left: 50% !important;
|
||||
transform: translateX(-50%) !important;
|
||||
z-index: 9999 !important;
|
||||
min-width: 300px !important;
|
||||
max-width: 600px !important;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">
|
||||
<i class="fas fa-tools"></i> 大数据工具集合
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/">首页</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/db-compare">数据库比对</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container-fluid py-4">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<h1 class="text-center mb-4">
|
||||
<i class="fas fa-database"></i> 数据库查询比对工具
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- 配置面板 -->
|
||||
<div class="col-lg-4">
|
||||
<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-layer-group"></i> 配置组管理</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-8">
|
||||
<select class="form-select form-select-sm" id="configGroupSelect">
|
||||
<option value="">选择配置组...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<button class="btn btn-primary btn-sm w-100" onclick="loadSelectedConfigGroup()">
|
||||
<i class="fas fa-download"></i> 加载
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<button class="btn btn-success btn-sm w-100" onclick="showSaveConfigDialog()">
|
||||
<i class="fas fa-save"></i> 保存配置组
|
||||
</button>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<button class="btn btn-info btn-sm w-100" onclick="showManageConfigDialog()">
|
||||
<i class="fas fa-cog"></i> 管理配置组
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-secondary btn-sm" onclick="loadDefaultConfig()">
|
||||
<i class="fas fa-refresh"></i> 重置为空配置
|
||||
</button>
|
||||
<button class="btn btn-success btn-sm" onclick="exportConfig()">
|
||||
<i class="fas fa-file-export"></i> 导出配置
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 生产环境配置 -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6><i class="fas fa-server"></i> 生产环境配置</h6>
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="showImportDialog('pro')">
|
||||
<i class="fas fa-download"></i> 一键导入
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label class="form-label">集群名称</label>
|
||||
<input type="text" class="form-control form-control-sm" id="pro_cluster_name" placeholder="Production Cluster">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">数据中心</label>
|
||||
<input type="text" class="form-control form-control-sm" id="pro_datacenter" placeholder="dc1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-8">
|
||||
<label class="form-label">集群节点 (逗号分隔)</label>
|
||||
<input type="text" class="form-control form-control-sm" id="pro_hosts" placeholder="10.20.2.22,10.20.2.23">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<label class="form-label">端口</label>
|
||||
<input type="number" class="form-control form-control-sm" id="pro_port" placeholder="9042">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label">用户名</label>
|
||||
<input type="text" class="form-control form-control-sm" id="pro_username" placeholder="cbase">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">密码</label>
|
||||
<input type="password" class="form-control form-control-sm" id="pro_password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Keyspace</label>
|
||||
<input type="text" class="form-control form-control-sm" id="pro_keyspace" placeholder="yuqing_skinny">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">表名</label>
|
||||
<input type="text" class="form-control form-control-sm" id="pro_table" placeholder="document">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 测试环境配置 -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h6><i class="fas fa-flask"></i> 测试环境配置</h6>
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="showImportDialog('test')">
|
||||
<i class="fas fa-download"></i> 一键导入
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<label class="form-label">集群名称</label>
|
||||
<input type="text" class="form-control form-control-sm" id="test_cluster_name" placeholder="Test Cluster">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">数据中心</label>
|
||||
<input type="text" class="form-control form-control-sm" id="test_datacenter" placeholder="dc1">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-8">
|
||||
<label class="form-label">集群节点 (逗号分隔)</label>
|
||||
<input type="text" class="form-control form-control-sm" id="test_hosts" placeholder="10.20.2.22,10.20.2.23">
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<label class="form-label">端口</label>
|
||||
<input type="number" class="form-control form-control-sm" id="test_port" placeholder="9042">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label">用户名</label>
|
||||
<input type="text" class="form-control form-control-sm" id="test_username" placeholder="cbase">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">密码</label>
|
||||
<input type="password" class="form-control form-control-sm" id="test_password">
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-2">
|
||||
<div class="col-6">
|
||||
<label class="form-label">Keyspace</label>
|
||||
<input type="text" class="form-control form-control-sm" id="test_keyspace" placeholder="yuqing_skinny">
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<label class="form-label">表名</label>
|
||||
<input type="text" class="form-control form-control-sm" id="test_table" placeholder="document_test">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查询配置 -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h6><i class="fas fa-search"></i> 查询配置</h6>
|
||||
</div>
|
||||
<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">
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<label class="form-label">比较字段 (空则比较全部，逗号分隔)</label>
|
||||
<textarea class="form-control form-control-sm compare-fields" id="fields_to_compare" placeholder="留空表示比较所有字段 或输入: field1,field2,field3"></textarea>
|
||||
</div>
|
||||
<div>
|
||||
<label class="form-label">排除字段 (逗号分隔)</label>
|
||||
<textarea class="form-control form-control-sm exclude-fields" id="exclude_fields" placeholder="排除不需要比较的字段 如: field1,field2"></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 查询面板 -->
|
||||
<div class="col-lg-8">
|
||||
<div class="config-section">
|
||||
<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值，一行一个 例如： key1 key2 key3"></textarea>
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<button class="btn btn-primary" onclick="executeQuery()">
|
||||
<i class="fas fa-play"></i> 执行查询比对
|
||||
</button>
|
||||
<button class="btn btn-secondary" onclick="clearResults()">
|
||||
<i class="fas fa-trash"></i> 清空结果
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- 加载动画 -->
|
||||
<div class="loading text-center" id="loading">
|
||||
<div class="spinner-border text-primary" role="status">
|
||||
<span class="visually-hidden">查询中...</span>
|
||||
</div>
|
||||
<p class="mt-2">正在执行查询比对...</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 结果面板 -->
|
||||
<div class="result-section" id="results" style="display: none;">
|
||||
<!-- 统计信息 -->
|
||||
<div class="row" id="stats">
|
||||
<!-- 统计卡片将在这里动态生成 -->
|
||||
</div>
|
||||
|
||||
<!-- 结果选项卡导航 -->
|
||||
<div class="card mt-4">
|
||||
<div class="card-header">
|
||||
<ul class="nav nav-tabs card-header-tabs" id="resultTabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="differences-tab" data-bs-toggle="tab" data-bs-target="#differences-panel" type="button" role="tab">
|
||||
<i class="fas fa-exclamation-triangle"></i> 差异详情 <span class="badge bg-danger ms-1" id="diff-count">0</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="identical-tab" data-bs-toggle="tab" data-bs-target="#identical-panel" type="button" role="tab">
|
||||
<i class="fas fa-check-circle"></i> 相同结果 <span class="badge bg-success ms-1" id="identical-count">0</span>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="summary-tab" data-bs-toggle="tab" data-bs-target="#summary-panel" type="button" role="tab">
|
||||
<i class="fas fa-chart-pie"></i> 比较总结
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="mt-2">
|
||||
<button class="btn btn-sm btn-outline-primary" onclick="exportResults()">
|
||||
<i class="fas fa-download"></i> 导出结果
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
<div class="tab-content" id="resultTabContent">
|
||||
<!-- 差异详情面板 -->
|
||||
<div class="tab-pane fade show active" id="differences-panel" role="tabpanel">
|
||||
<div id="differences">
|
||||
<!-- 差异内容将在这里动态生成 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 相同结果面板 -->
|
||||
<div class="tab-pane fade" id="identical-panel" role="tabpanel">
|
||||
<div id="identical-results">
|
||||
<!-- 相同结果将在这里动态生成 -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 比较总结面板 -->
|
||||
<div class="tab-pane fade" id="summary-panel" role="tabpanel">
|
||||
<div id="comparison-summary">
|
||||
<!-- 总结报告将在这里动态生成 -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script src="{{ url_for('static', filename='js/app.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
374
templates/index.html
Normal file
374
templates/index.html
Normal file
@@ -0,0 +1,374 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<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>
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
font-family: 'Microsoft YaHei', Arial, sans-serif;
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
padding: 80px 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: 3.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.3rem;
|
||||
margin-bottom: 3rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.tools-section {
|
||||
padding: 60px 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.tool-card {
|
||||
background: white;
|
||||
border-radius: 15px;
|
||||
padding: 2rem;
|
||||
margin-bottom: 2rem;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s ease;
|
||||
border: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.tool-card:hover {
|
||||
transform: translateY(-10px);
|
||||
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.tool-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 1.5rem;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.tool-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tool-description {
|
||||
color: #666;
|
||||
margin-bottom: 2rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.tool-features {
|
||||
text-align: left;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.tool-features li {
|
||||
margin-bottom: 0.5rem;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.tool-btn {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 0.75rem 2rem;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tool-btn:hover {
|
||||
transform: scale(1.05);
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.stats-section {
|
||||
padding: 40px 0;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 3rem;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.footer {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 2rem 0;
|
||||
}
|
||||
|
||||
.feature-badge {
|
||||
background: #28a745;
|
||||
color: white;
|
||||
padding: 0.25rem 0.75rem;
|
||||
border-radius: 15px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: bold;
|
||||
display: inline-block;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.coming-soon {
|
||||
background: #ffc107;
|
||||
color: #333;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- 导航栏 -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark" style="background: rgba(0,0,0,0.1);">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="/">
|
||||
<i class="fas fa-tools"></i> 大数据工具集合
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="/">首页</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="/db-compare">数据库比对</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 主标题区域 -->
|
||||
<div class="hero-section">
|
||||
<div class="container">
|
||||
<h1 class="hero-title">
|
||||
<i class="fas fa-database"></i> 大数据工具集合
|
||||
</h1>
|
||||
<p class="hero-subtitle">
|
||||
专业的数据处理、分析和比对工具平台<br>
|
||||
提升数据工作效率，简化复杂操作
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 统计信息 -->
|
||||
<div class="stats-section">
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">1</span>
|
||||
<span class="stat-label">可用工具</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">100%</span>
|
||||
<span class="stat-label">可视化操作</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div class="stat-item">
|
||||
<span class="stat-number">0</span>
|
||||
<span class="stat-label">学习成本</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 工具展示区域 -->
|
||||
<div class="tools-section">
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-lg-8">
|
||||
<div class="text-center mb-5">
|
||||
<h2 class="mb-3">可用工具</h2>
|
||||
<p class="text-muted">选择合适的工具来处理您的数据任务</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- 数据库比对工具 -->
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="tool-card">
|
||||
<div class="text-center">
|
||||
<div class="feature-badge">可用</div>
|
||||
<div class="tool-icon">
|
||||
<i class="fas fa-exchange-alt"></i>
|
||||
</div>
|
||||
<h3 class="tool-title">数据库查询比对工具</h3>
|
||||
<p class="tool-description">
|
||||
专业的Cassandra数据库比对工具，支持生产环境与测试环境数据差异分析，
|
||||
提供批量查询、字段级比对和详细统计报告。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tool-features">
|
||||
<h5><i class="fas fa-star text-warning"></i> 核心功能：</h5>
|
||||
<ul>
|
||||
<li><i class="fas fa-check text-success"></i> 支持多环境数据库配置管理</li>
|
||||
<li><i class="fas fa-check text-success"></i> 批量Key查询和数据比对</li>
|
||||
<li><i class="fas fa-check text-success"></i> 自定义比较字段和排除字段</li>
|
||||
<li><i class="fas fa-check text-success"></i> 可视化差异展示和统计</li>
|
||||
<li><i class="fas fa-check text-success"></i> 配置和结果导出功能</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<a href="/db-compare" class="tool-btn">
|
||||
<i class="fas fa-rocket"></i> 立即使用
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 占位工具卡片 -->
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="tool-card">
|
||||
<div class="text-center">
|
||||
<div class="feature-badge coming-soon">即将推出</div>
|
||||
<div class="tool-icon">
|
||||
<i class="fas fa-chart-line"></i>
|
||||
</div>
|
||||
<h3 class="tool-title">数据分析工具</h3>
|
||||
<p class="tool-description">
|
||||
强大的数据分析和可视化工具，支持多种数据源，
|
||||
提供丰富的图表类型和统计分析功能。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tool-features">
|
||||
<h5><i class="fas fa-star text-warning"></i> 计划功能：</h5>
|
||||
<ul>
|
||||
<li><i class="fas fa-clock text-muted"></i> 多数据源连接支持</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 交互式图表生成</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 自定义报表制作</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 数据趋势分析</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 自动化报告生成</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button class="tool-btn" disabled style="opacity: 0.6;">
|
||||
<i class="fas fa-hourglass-half"></i> 开发中
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 第二行工具 -->
|
||||
<div class="row mt-4">
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="tool-card">
|
||||
<div class="text-center">
|
||||
<div class="feature-badge coming-soon">即将推出</div>
|
||||
<div class="tool-icon">
|
||||
<i class="fas fa-file-import"></i>
|
||||
</div>
|
||||
<h3 class="tool-title">数据导入导出工具</h3>
|
||||
<p class="tool-description">
|
||||
高效的数据迁移工具，支持多种格式和数据库类型之间的数据传输，
|
||||
提供批量处理和进度监控功能。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tool-features">
|
||||
<h5><i class="fas fa-star text-warning"></i> 计划功能：</h5>
|
||||
<ul>
|
||||
<li><i class="fas fa-clock text-muted"></i> 多格式数据支持</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 批量数据处理</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 实时进度监控</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 数据映射配置</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 错误处理和日志</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button class="tool-btn" disabled style="opacity: 0.6;">
|
||||
<i class="fas fa-hourglass-half"></i> 开发中
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-6 col-md-12">
|
||||
<div class="tool-card">
|
||||
<div class="text-center">
|
||||
<div class="feature-badge coming-soon">即将推出</div>
|
||||
<div class="tool-icon">
|
||||
<i class="fas fa-shield-alt"></i>
|
||||
</div>
|
||||
<h3 class="tool-title">数据质量检测工具</h3>
|
||||
<p class="tool-description">
|
||||
专业的数据质量评估工具，自动检测数据完整性、一致性和准确性问题，
|
||||
生成详细的质量报告和改进建议。
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="tool-features">
|
||||
<h5><i class="fas fa-star text-warning"></i> 计划功能：</h5>
|
||||
<ul>
|
||||
<li><i class="fas fa-clock text-muted"></i> 数据完整性检查</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 重复数据检测</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 数据格式验证</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 质量评分系统</li>
|
||||
<li><i class="fas fa-clock text-muted"></i> 自动化修复建议</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="text-center">
|
||||
<button class="tool-btn" disabled style="opacity: 0.6;">
|
||||
<i class="fas fa-hourglass-half"></i> 开发中
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 页脚 -->
|
||||
<div class="footer">
|
||||
<div class="container">
|
||||
<p>© 2024 大数据工具集合. 专注于提供高效的数据处理解决方案.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user