512 lines
23 KiB
HTML
512 lines
23 KiB
HTML
<!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="../vendor/bootstrap/bootstrap.min.css" rel="stylesheet">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
||
<link href="../assets/css/styles.css" rel="stylesheet">
|
||
<style>
|
||
#guideContent {
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
#toggleGuide {
|
||
z-index: 1001;
|
||
width: 24px;
|
||
padding: 0.5rem 0;
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
#toggleGuide i {
|
||
transition: transform 0.3s ease-in-out;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="d-flex flex-column min-vh-100">
|
||
<!-- Header -->
|
||
<div id="header"></div>
|
||
|
||
<div class="container my-5 flex-grow-1">
|
||
<!-- 页面标题和介绍 -->
|
||
<div class="row mb-5">
|
||
<div class="col-lg-8 mx-auto text-center">
|
||
<h1 class="display-5 fw-bold mb-3">数据接入</h1>
|
||
<p class="lead text-muted mb-4">安全、便捷地接入您的数据资产，开启数据价值新征程</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧浮动帮助卡片 -->
|
||
<div class="position-fixed end-0 top-50 translate-middle-y" style="z-index: 1000;">
|
||
<!-- 控制按钮 -->
|
||
<button class="btn btn-primary btn-sm rounded-start"
|
||
style="position: absolute; left: 0; top: 50%; transform: translate(-100%, -50%);"
|
||
id="toggleGuide">
|
||
<i class="bi bi-chevron-right"></i>
|
||
</button>
|
||
|
||
<!-- 指南内容 -->
|
||
<div id="guideContent" class="me-3" style="width: 300px;">
|
||
<div class="card border-0 shadow-sm">
|
||
<div class="card-header bg-primary text-white">
|
||
<h5 class="card-title mb-0">
|
||
<i class="bi bi-info-circle me-2"></i>接入指南
|
||
</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<!-- 核心优势 -->
|
||
<div class="mb-4">
|
||
<h6 class="fw-bold">
|
||
<i class="bi bi-shield-check text-primary me-2"></i>安全可靠
|
||
</h6>
|
||
<p class="text-muted small mb-0">多重安全防护，确保数据安全传输与存储</p>
|
||
</div>
|
||
<div class="mb-4">
|
||
<h6 class="fw-bold">
|
||
<i class="bi bi-lightning text-warning me-2"></i>快速接入
|
||
</h6>
|
||
<p class="text-muted small mb-0">支持多种接入方式，最快5分钟完成接入</p>
|
||
</div>
|
||
<div class="mb-4">
|
||
<h6 class="fw-bold">
|
||
<i class="bi bi-gear text-success me-2"></i>专业服务
|
||
</h6>
|
||
<p class="text-muted small mb-0">全程技术支持，确保顺利完成接入</p>
|
||
</div>
|
||
<hr>
|
||
<!-- 准备材料 -->
|
||
<div class="mb-4">
|
||
<h6 class="fw-bold">
|
||
<i class="bi bi-file-earmark-text text-primary me-2"></i>准备材料
|
||
</h6>
|
||
<ul class="list-unstyled small mb-0">
|
||
<li class="mb-2">
|
||
<i class="bi bi-check2 text-success me-2"></i>企业营业执照
|
||
</li>
|
||
<li class="mb-2">
|
||
<i class="bi bi-check2 text-success me-2"></i>数据资产清单
|
||
</li>
|
||
<li class="mb-2">
|
||
<i class="bi bi-check2 text-success me-2"></i>合规性文件
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<!-- 注意事项 -->
|
||
<div class="mb-4">
|
||
<h6 class="fw-bold">
|
||
<i class="bi bi-exclamation-triangle text-warning me-2"></i>注意事项
|
||
</h6>
|
||
<ul class="list-unstyled small mb-0">
|
||
<li class="mb-2">
|
||
<i class="bi bi-exclamation-circle text-warning me-2"></i>确保数据来源合法
|
||
</li>
|
||
<li class="mb-2">
|
||
<i class="bi bi-exclamation-circle text-warning me-2"></i>遵守数据安全规范
|
||
</li>
|
||
<li class="mb-2">
|
||
<i class="bi bi-exclamation-circle text-warning me-2"></i>保证数据质量标准
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
<hr>
|
||
<div class="d-grid">
|
||
<button class="btn btn-outline-primary btn-sm" type="button" data-bs-toggle="collapse" data-bs-target="#helpDetails">
|
||
<i class="bi bi-chevron-down me-2"></i>查看更多帮助
|
||
</button>
|
||
</div>
|
||
<div class="collapse mt-3" id="helpDetails">
|
||
<div class="text-muted small">
|
||
<p class="fw-bold mb-2">常见问题：</p>
|
||
<ul class="list-unstyled">
|
||
<li class="mb-2">
|
||
<i class="bi bi-question-circle me-2"></i>
|
||
如何准备合规文件？
|
||
</li>
|
||
<li class="mb-2">
|
||
<i class="bi bi-question-circle me-2"></i>
|
||
支持哪些数据格式？
|
||
</li>
|
||
<li>
|
||
<i class="bi bi-question-circle me-2"></i>
|
||
如何保障数据安全？
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="row justify-content-center">
|
||
<div class="col-md-8">
|
||
<!-- 演示控制按钮 -->
|
||
<div class="text-end mb-4">
|
||
<span class="text-muted me-3">首次使用？试试演示功能</span>
|
||
<button id="demoButton" class="btn btn-primary">
|
||
<i class="bi bi-play-fill"></i> 演示填报
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 进度指示器 -->
|
||
<div class="progress-steps mb-5">
|
||
<div class="step active" id="step1">
|
||
<div class="step-circle">1</div>
|
||
<div class="step-text">身份验证</div>
|
||
</div>
|
||
<div class="step" id="step2">
|
||
<div class="step-circle">2</div>
|
||
<div class="step-text">接入类型</div>
|
||
</div>
|
||
<div class="step" id="step3">
|
||
<div class="step-circle">3</div>
|
||
<div class="step-text">接入方式</div>
|
||
</div>
|
||
<div class="step" id="step4">
|
||
<div class="step-circle">4</div>
|
||
<div class="step-text">合规文件</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表单区域 -->
|
||
<form id="dataAccessForm" class="needs-validation" novalidate>
|
||
<!-- 步骤 1: 身份验证 -->
|
||
<div class="form-step" id="step1-content">
|
||
<h3>企业身份验证
|
||
<i class="bi bi-question-circle text-muted"
|
||
data-bs-toggle="tooltip"
|
||
title="请提供企业的有效认证信息"></i>
|
||
</h3>
|
||
<div class="mb-3">
|
||
<label class="form-label">企业名称</label>
|
||
<input type="text" class="form-control" id="companyName" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">统一社会信用代码</label>
|
||
<input type="text" class="form-control" id="creditCode" required>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤 2: 接入类型 -->
|
||
<div class="form-step d-none" id="step2-content">
|
||
<h3>选择接入类型
|
||
<i class="bi bi-question-circle text-muted"
|
||
data-bs-toggle="tooltip"
|
||
title="请选择数据接入类型"></i>
|
||
</h3>
|
||
<div class="mb-3">
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="accessType" id="testAccess" value="test" required>
|
||
<label class="form-check-label">
|
||
占位接入（免费测试）
|
||
</label>
|
||
</div>
|
||
<div class="form-check">
|
||
<input class="form-check-input" type="radio" name="accessType" id="prodAccess" value="production">
|
||
<label class="form-check-label">
|
||
真实接入（查看计费说明）
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 步骤 3: 接入方式 -->
|
||
<div class="form-step d-none" id="step3-content">
|
||
<h3>选择接入方式
|
||
<i class="bi bi-question-circle text-muted"
|
||
data-bs-toggle="tooltip"
|
||
title="请选择数据接入方式"></i>
|
||
</h3>
|
||
<div class="mb-3">
|
||
<select class="form-select" id="accessMethod" required>
|
||
<option value="">请选择接入方式</option>
|
||
<option value="file">文件上传</option>
|
||
<option value="api">接口接入</option>
|
||
<option value="database">数据库连接</option>
|
||
</select>
|
||
</div>
|
||
|
||
<!-- 动态表单区域 -->
|
||
<div id="accessMethodForms"></div>
|
||
</div>
|
||
|
||
<!-- 步骤 4: 合规文件 -->
|
||
<div class="form-step d-none" id="step4-content">
|
||
<h3>上传合规文件
|
||
<i class="bi bi-question-circle text-muted"
|
||
data-bs-toggle="tooltip"
|
||
title="请上传必要的合规文件"></i>
|
||
</h3>
|
||
<div class="mb-3">
|
||
<label class="form-label">数据合规确权报告</label>
|
||
<input type="file" class="form-control" id="complianceReport" accept=".pdf" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">数据质量评估报告</label>
|
||
<input type="file" class="form-control" id="qualityReport" accept=".pdf" required>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 导航按钮 -->
|
||
<div class="d-flex justify-content-between mt-4">
|
||
<button type="button" class="btn btn-secondary" id="prevBtn" disabled>上一步</button>
|
||
<button type="button" class="btn btn-primary" id="nextBtn">下一步</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Footer -->
|
||
<div id="footer"></div>
|
||
|
||
<script src="../vendor/bootstrap/bootstrap.bundle.min.js"></script>
|
||
<script src="../assets/js/components.js"></script>
|
||
<script>
|
||
// 初始化工具提示
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||
return new bootstrap.Tooltip(tooltipTriggerEl)
|
||
});
|
||
});
|
||
|
||
const form = document.getElementById('dataAccessForm');
|
||
const steps = document.querySelectorAll('.form-step');
|
||
const progressSteps = document.querySelectorAll('.step');
|
||
const prevBtn = document.getElementById('prevBtn');
|
||
const nextBtn = document.getElementById('nextBtn');
|
||
let currentStep = 0;
|
||
|
||
// 更新步骤显示
|
||
function updateSteps() {
|
||
steps.forEach((step, index) => {
|
||
if (index === currentStep) {
|
||
step.classList.remove('d-none');
|
||
} else {
|
||
step.classList.add('d-none');
|
||
}
|
||
});
|
||
|
||
// 更新进度指示器
|
||
progressSteps.forEach((step, index) => {
|
||
if (index === currentStep) {
|
||
step.classList.add('active');
|
||
} else if (index < currentStep) {
|
||
step.classList.add('completed');
|
||
step.classList.remove('active');
|
||
} else {
|
||
step.classList.remove('active', 'completed');
|
||
}
|
||
});
|
||
|
||
// 更新按钮状态
|
||
prevBtn.disabled = currentStep === 0;
|
||
if (currentStep === steps.length - 1) {
|
||
nextBtn.textContent = '提交';
|
||
} else {
|
||
nextBtn.textContent = '下一步';
|
||
}
|
||
}
|
||
|
||
// 表单验证
|
||
function validateCurrentStep() {
|
||
const currentStepElement = steps[currentStep];
|
||
const inputs = currentStepElement.querySelectorAll('input, select');
|
||
let isValid = true;
|
||
|
||
inputs.forEach(input => {
|
||
if (input.hasAttribute('required')) {
|
||
if (input.type === 'radio') {
|
||
const radioGroup = currentStepElement.querySelectorAll(`input[name="${input.name}"]`);
|
||
const checked = Array.from(radioGroup).some(radio => radio.checked);
|
||
if (!checked) {
|
||
isValid = false;
|
||
}
|
||
} else if (!input.value) {
|
||
isValid = false;
|
||
}
|
||
}
|
||
});
|
||
|
||
return isValid;
|
||
}
|
||
|
||
// 监听接入方式变化
|
||
document.getElementById('accessMethod').addEventListener('change', function() {
|
||
const formsContainer = document.getElementById('accessMethodForms');
|
||
formsContainer.innerHTML = '';
|
||
|
||
switch(this.value) {
|
||
case 'api':
|
||
formsContainer.innerHTML = `
|
||
<div class="mb-3">
|
||
<label class="form-label">API地址</label>
|
||
<input type="url" class="form-control" id="apiUrl" required>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">API Token</label>
|
||
<input type="text" class="form-control" id="apiToken" required>
|
||
</div>
|
||
`;
|
||
break;
|
||
case 'database':
|
||
formsContainer.innerHTML = `
|
||
<div class="mb-3">
|
||
<label class="form-label">数据库类型</label>
|
||
<select class="form-select" required>
|
||
<option value="">请选择</option>
|
||
<option value="mysql">MySQL</option>
|
||
<option value="postgresql">PostgreSQL</option>
|
||
<option value="sqlserver">SQL Server</option>
|
||
</select>
|
||
</div>
|
||
<div class="mb-3">
|
||
<label class="form-label">连接字符串</label>
|
||
<input type="text" class="form-control" required>
|
||
</div>
|
||
`;
|
||
break;
|
||
}
|
||
});
|
||
|
||
// 按钮事件监听
|
||
prevBtn.addEventListener('click', () => {
|
||
if (currentStep > 0) {
|
||
currentStep--;
|
||
updateSteps();
|
||
}
|
||
});
|
||
|
||
nextBtn.addEventListener('click', () => {
|
||
if (!validateCurrentStep()) {
|
||
alert('请填写必填项');
|
||
return;
|
||
}
|
||
|
||
if (currentStep < steps.length - 1) {
|
||
currentStep++;
|
||
updateSteps();
|
||
} else {
|
||
// 提交表单
|
||
if (form.checkValidity()) {
|
||
// 创建 Modal 元素
|
||
const modalEl = document.createElement('div');
|
||
modalEl.className = 'modal fade';
|
||
modalEl.innerHTML = `
|
||
<div class="modal-dialog">
|
||
<div class="modal-content">
|
||
<div class="modal-body text-center py-4">
|
||
<i class="bi bi-check-circle text-success display-1 mb-3"></i>
|
||
<h4>提交成功！</h4>
|
||
<p class="text-muted">数据接入申请已提交，即将返回首页...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
`;
|
||
document.body.appendChild(modalEl);
|
||
|
||
// 创建并显示 Modal
|
||
const successModal = new bootstrap.Modal(modalEl);
|
||
successModal.show();
|
||
|
||
// 2秒后跳转回首页
|
||
setTimeout(() => {
|
||
window.location.href = '../index.html';
|
||
}, 2000);
|
||
}
|
||
}
|
||
});
|
||
|
||
// 初始化显示
|
||
updateSteps();
|
||
|
||
// 演示数据
|
||
const demoData = {
|
||
step1: {
|
||
companyName: '示例科技有限公司',
|
||
creditCode: '91110105MA12345678'
|
||
},
|
||
step2: {
|
||
accessType: 'test'
|
||
},
|
||
step3: {
|
||
accessMethod: 'api',
|
||
apiUrl: 'https://api.example.com/data',
|
||
apiToken: 'demo_token_123456'
|
||
}
|
||
};
|
||
|
||
// 自动填报功能
|
||
document.getElementById('demoButton').addEventListener('click', async function() {
|
||
const button = this;
|
||
button.disabled = true;
|
||
button.innerHTML = '<i class="bi bi-hourglass-split"></i> 演示中...';
|
||
|
||
// 步骤1：填写企业信息
|
||
await simulateTyping('companyName', demoData.step1.companyName);
|
||
await simulateTyping('creditCode', demoData.step1.creditCode);
|
||
await delay(1000);
|
||
document.getElementById('nextBtn').click();
|
||
|
||
// 步骤2：选择接入类型
|
||
await delay(1000);
|
||
document.getElementById('testAccess').click();
|
||
await delay(1000);
|
||
document.getElementById('nextBtn').click();
|
||
|
||
// 步骤3：选择接入方式
|
||
await delay(1000);
|
||
document.getElementById('accessMethod').value = demoData.step3.accessMethod;
|
||
document.getElementById('accessMethod').dispatchEvent(new Event('change'));
|
||
await delay(1000);
|
||
|
||
// 如果是API接入，填写API信息
|
||
if (demoData.step3.accessMethod === 'api') {
|
||
await simulateTyping('apiUrl', demoData.step3.apiUrl);
|
||
await simulateTyping('apiToken', demoData.step3.apiToken);
|
||
}
|
||
|
||
button.disabled = false;
|
||
button.innerHTML = '<i class="bi bi-play-fill"></i> 演示填报';
|
||
});
|
||
|
||
// 模拟打字效果
|
||
async function simulateTyping(elementId, text) {
|
||
const element = document.getElementById(elementId);
|
||
element.value = '';
|
||
for (let i = 0; i < text.length; i++) {
|
||
element.value += text[i];
|
||
await delay(100);
|
||
}
|
||
}
|
||
|
||
// 延迟函数
|
||
function delay(ms) {
|
||
return new Promise(resolve => setTimeout(resolve, ms));
|
||
}
|
||
|
||
// 接入指南展开/收起控制
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
const toggleBtn = document.getElementById('toggleGuide');
|
||
const guideContent = document.getElementById('guideContent');
|
||
const btnIcon = toggleBtn.querySelector('i');
|
||
let isGuideVisible = true;
|
||
|
||
toggleBtn.addEventListener('click', function() {
|
||
if (isGuideVisible) {
|
||
guideContent.style.transform = 'translateX(100%)';
|
||
btnIcon.classList.remove('bi-chevron-right');
|
||
btnIcon.classList.add('bi-chevron-left');
|
||
toggleBtn.style.transform = 'translate(-100%, -50%) translateX(300px)';
|
||
} else {
|
||
guideContent.style.transform = 'translateX(0)';
|
||
btnIcon.classList.remove('bi-chevron-left');
|
||
btnIcon.classList.add('bi-chevron-right');
|
||
toggleBtn.style.transform = 'translate(-100%, -50%)';
|
||
}
|
||
isGuideVisible = !isGuideVisible;
|
||
});
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |